[REV] Remove additional creation options for now
This commit is contained in:
parent
fb57c03ba7
commit
f732710c7c
2 changed files with 253 additions and 128 deletions
|
|
@ -14,21 +14,16 @@ import { useCreateServer, useVersionList } from "@mcl/queries";
|
|||
const defaultServer = {
|
||||
version: "latest",
|
||||
serverType: "VANILLA",
|
||||
difficulty: "easy",
|
||||
maxPlayers: "5",
|
||||
gamemode: "survival",
|
||||
memory: "512",
|
||||
motd: `\\u00A7e\\u00A7ka\\u00A7l\\u00A7aMine\\u00A76Cluster\\u00A7r\\u00A78\\u00A7b\\u00A7ka`,
|
||||
};
|
||||
|
||||
export default function Create() {
|
||||
const [wl, setWl] = useState([]);
|
||||
const [ops, setOps] = useState([]);
|
||||
const [spec, setSpec] = useState(defaultServer);
|
||||
const nav = useNavigate();
|
||||
const versionList = useVersionList();
|
||||
const [versions, setVersions] = useState(["latest"]);
|
||||
const createServer = useCreateServer(spec);
|
||||
|
||||
const updateSpec = (attr, val) => {
|
||||
const s = { ...spec };
|
||||
s[attr] = val;
|
||||
|
|
@ -48,46 +43,6 @@ export default function Create() {
|
|||
|
||||
const coreUpdate = (attr) => (e) => updateSpec(attr, e.target.value);
|
||||
|
||||
function opsAdd(e) {
|
||||
const opEntry = e.target.innerHTML ?? e.target.value;
|
||||
if (!opEntry) return;
|
||||
const newOps = [...ops, opEntry];
|
||||
setOps(newOps);
|
||||
updateSpec("ops", newOps.join(","));
|
||||
}
|
||||
|
||||
function whitelistAdd(e) {
|
||||
const wlEntry = e.target.value;
|
||||
if (!wlEntry) return;
|
||||
const newWl = [...wl, wlEntry];
|
||||
setWl(newWl);
|
||||
updateSpec("whitelist", newWl.join(","));
|
||||
}
|
||||
|
||||
const opsRemove =
|
||||
(name, { onDelete: updateAutoComplete }) =>
|
||||
(e) => {
|
||||
updateAutoComplete(e);
|
||||
const newOps = [...ops];
|
||||
const entryIndex = newOps.indexOf(name);
|
||||
if (entryIndex === -1) return;
|
||||
newOps.splice(entryIndex, 1);
|
||||
setOps(newOps);
|
||||
updateSpec("ops", newOps.join(","));
|
||||
};
|
||||
|
||||
const whitelistRemove =
|
||||
(name, { onDelete: updateAutocomplete }) =>
|
||||
(e) => {
|
||||
updateAutocomplete(e);
|
||||
const newWl = [...wl];
|
||||
const entryIndex = newWl.indexOf(name);
|
||||
if (entryIndex === -1) return;
|
||||
newWl.splice(entryIndex, 1);
|
||||
setWl(newWl);
|
||||
updateSpec("whitelist", newWl.join(","));
|
||||
};
|
||||
|
||||
async function upsertSpec() {
|
||||
if (validateSpec() !== "validated") return;
|
||||
createServer(spec)
|
||||
|
|
@ -97,9 +52,9 @@ export default function Create() {
|
|||
|
||||
function validateSpec() {
|
||||
console.log("TODO CREATE VALIDATION");
|
||||
if (!spec.host) return alertValidationError("Host cannot be blank");
|
||||
if (!spec.name) return alertValidationError("Name not included");
|
||||
if (!spec.version) return alertValidationError("Version cannot be blank");
|
||||
if (!spec.host) return alertValidationError("Host cannot be blank");
|
||||
return "validated";
|
||||
}
|
||||
|
||||
|
|
@ -124,7 +79,7 @@ export default function Create() {
|
|||
<TextField
|
||||
label="Host"
|
||||
onChange={coreUpdate("host")}
|
||||
helperText="Example: host.mc.example.com"
|
||||
helperText="Example: host.mydomain.com"
|
||||
FormHelperTextProps={{ sx: { ml: 0 } }}
|
||||
required
|
||||
/>
|
||||
|
|
@ -154,93 +109,13 @@ export default function Create() {
|
|||
<MenuItem value={"PAPER"}>Paper</MenuItem>
|
||||
<MenuItem value={"SPIGOT"}>Spigot</MenuItem>
|
||||
</TextField>
|
||||
<TextField
|
||||
label="Difficulty"
|
||||
onChange={coreUpdate("difficulty")}
|
||||
value={spec.difficulty}
|
||||
select
|
||||
required
|
||||
>
|
||||
<MenuItem value={"peaceful"}>Peaceful</MenuItem>
|
||||
<MenuItem value={"easy"}>Easy</MenuItem>
|
||||
<MenuItem value={"medium"}>Medium</MenuItem>
|
||||
<MenuItem value={"hard"}>Hard</MenuItem>
|
||||
</TextField>
|
||||
|
||||
<Autocomplete
|
||||
multiple
|
||||
id="whitelist-autocomplete"
|
||||
options={[]}
|
||||
onChange={whitelistAdd}
|
||||
freeSolo
|
||||
renderInput={(p) => <TextField {...p} label="Whitelist" />}
|
||||
renderTags={(value, getTagProps) =>
|
||||
value.map((option, index) => {
|
||||
const defaultChipProps = getTagProps({ index });
|
||||
return (
|
||||
<Chip
|
||||
label={option}
|
||||
{...defaultChipProps}
|
||||
onDelete={whitelistRemove(option, defaultChipProps)}
|
||||
/>
|
||||
);
|
||||
})
|
||||
}
|
||||
/>
|
||||
<Autocomplete
|
||||
filterSelectedOptions={true}
|
||||
multiple
|
||||
id="ops-autocomplete"
|
||||
options={wl}
|
||||
onChange={opsAdd}
|
||||
renderInput={(p) => <TextField {...p} label="Ops" />}
|
||||
renderTags={(value, getTagProps) =>
|
||||
value.map((option, index) => {
|
||||
const defaultChipProps = getTagProps({ index });
|
||||
return (
|
||||
<Chip
|
||||
label={option}
|
||||
{...defaultChipProps}
|
||||
onDelete={opsRemove(option, defaultChipProps)}
|
||||
/>
|
||||
);
|
||||
})
|
||||
}
|
||||
/>
|
||||
{/*<TextField label="Ops" onChange={coreUpdate("ops")} />*/}
|
||||
{/*<TextField label="Icon" onChange={coreUpdate("icon")} required />*/}
|
||||
<TextField
|
||||
label="Max Players"
|
||||
onChange={coreUpdate("maxPlayers")}
|
||||
defaultValue={spec.maxPlayers}
|
||||
required
|
||||
/>
|
||||
<TextField
|
||||
label="Gamemode"
|
||||
onChange={coreUpdate("gamemode")}
|
||||
value={spec.gamemode}
|
||||
select
|
||||
required
|
||||
>
|
||||
<MenuItem value={"survival"}>Survival</MenuItem>
|
||||
<MenuItem value={"creative"}>Creative</MenuItem>
|
||||
<MenuItem value={"adventure"}>Adventure</MenuItem>
|
||||
<MenuItem value={"spectator"}>Spectator</MenuItem>
|
||||
</TextField>
|
||||
<TextField label="Seed" onChange={coreUpdate("seed")} />
|
||||
{/*<TextField label="Modpack" onChange={coreUpdate("modpack")} />*/}
|
||||
<TextField
|
||||
label="Memory"
|
||||
onChange={coreUpdate("memory")}
|
||||
defaultValue={spec.memory}
|
||||
required
|
||||
/>
|
||||
<TextField
|
||||
label="MOTD"
|
||||
onChange={coreUpdate("motd")}
|
||||
defaultValue={spec.motd}
|
||||
required
|
||||
/>
|
||||
<Button onClick={upsertSpec} variant="contained">
|
||||
Create
|
||||
</Button>
|
||||
|
|
|
|||
250
src/pages/CreateOptionsFull.jsx
Normal file
250
src/pages/CreateOptionsFull.jsx
Normal file
|
|
@ -0,0 +1,250 @@
|
|||
import { useState, useEffect } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import Autocomplete from "@mui/material/Autocomplete";
|
||||
import TextField from "@mui/material/TextField";
|
||||
import Box from "@mui/material/Box";
|
||||
import Button from "@mui/material/Button";
|
||||
import Chip from "@mui/material/Chip";
|
||||
import Select from "@mui/material/Select";
|
||||
import MenuItem from "@mui/material/MenuItem";
|
||||
import InputLabel from "@mui/material/InputLabel";
|
||||
import FormControl from "@mui/material/FormControl";
|
||||
import { useCreateServer, useVersionList } from "@mcl/queries";
|
||||
|
||||
const defaultServer = {
|
||||
version: "latest",
|
||||
serverType: "VANILLA",
|
||||
difficulty: "easy",
|
||||
maxPlayers: "5",
|
||||
gamemode: "survival",
|
||||
memory: "512",
|
||||
motd: `\\u00A7e\\u00A7ka\\u00A7l\\u00A7aMine\\u00A76Cluster\\u00A7r\\u00A78\\u00A7b\\u00A7ka`,
|
||||
};
|
||||
|
||||
export default function Create() {
|
||||
const [wl, setWl] = useState([]);
|
||||
const [ops, setOps] = useState([]);
|
||||
const [spec, setSpec] = useState(defaultServer);
|
||||
const nav = useNavigate();
|
||||
const versionList = useVersionList();
|
||||
const [versions, setVersions] = useState(["latest"]);
|
||||
const createServer = useCreateServer(spec);
|
||||
const updateSpec = (attr, val) => {
|
||||
const s = { ...spec };
|
||||
s[attr] = val;
|
||||
setSpec(s);
|
||||
console.log(s);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!versionList.data) return;
|
||||
setVersions([
|
||||
"latest",
|
||||
...versionList.data.versions
|
||||
.filter(({ type: releaseType }) => releaseType === "release")
|
||||
.map(({ id }) => id),
|
||||
]);
|
||||
}, [versionList.data]);
|
||||
|
||||
const coreUpdate = (attr) => (e) => updateSpec(attr, e.target.value);
|
||||
|
||||
function opsAdd(e) {
|
||||
const opEntry = e.target.innerHTML ?? e.target.value;
|
||||
if (!opEntry) return;
|
||||
const newOps = [...ops, opEntry];
|
||||
setOps(newOps);
|
||||
updateSpec("ops", newOps.join(","));
|
||||
}
|
||||
|
||||
function whitelistAdd(e) {
|
||||
const wlEntry = e.target.value;
|
||||
if (!wlEntry) return;
|
||||
const newWl = [...wl, wlEntry];
|
||||
setWl(newWl);
|
||||
updateSpec("whitelist", newWl.join(","));
|
||||
}
|
||||
|
||||
const opsRemove =
|
||||
(name, { onDelete: updateAutoComplete }) =>
|
||||
(e) => {
|
||||
updateAutoComplete(e);
|
||||
const newOps = [...ops];
|
||||
const entryIndex = newOps.indexOf(name);
|
||||
if (entryIndex === -1) return;
|
||||
newOps.splice(entryIndex, 1);
|
||||
setOps(newOps);
|
||||
updateSpec("ops", newOps.join(","));
|
||||
};
|
||||
|
||||
const whitelistRemove =
|
||||
(name, { onDelete: updateAutocomplete }) =>
|
||||
(e) => {
|
||||
updateAutocomplete(e);
|
||||
const newWl = [...wl];
|
||||
const entryIndex = newWl.indexOf(name);
|
||||
if (entryIndex === -1) return;
|
||||
newWl.splice(entryIndex, 1);
|
||||
setWl(newWl);
|
||||
updateSpec("whitelist", newWl.join(","));
|
||||
};
|
||||
|
||||
async function upsertSpec() {
|
||||
if (validateSpec() !== "validated") return;
|
||||
createServer(spec)
|
||||
.then(() => nav("/"))
|
||||
.catch(alert);
|
||||
}
|
||||
|
||||
function validateSpec() {
|
||||
console.log("TODO CREATE VALIDATION");
|
||||
if (!spec.name) return alertValidationError("Name not included");
|
||||
if (!spec.version) return alertValidationError("Version cannot be blank");
|
||||
if (!spec.host) return alertValidationError("Host cannot be blank");
|
||||
return "validated";
|
||||
}
|
||||
|
||||
function alertValidationError(reason) {
|
||||
alert(`Could not validate spec because: ${reason}`);
|
||||
}
|
||||
|
||||
return (
|
||||
<Box
|
||||
className="create-options"
|
||||
sx={{ width: "100%", maxWidth: "600px", margin: "auto" }}
|
||||
>
|
||||
<FormControl fullWidth sx={{ mt: "2rem", display: "flex", gap: ".5rem" }}>
|
||||
<TextField
|
||||
label="Name"
|
||||
onChange={coreUpdate("name")}
|
||||
helperText="Example: My Survival World"
|
||||
defaultValue={spec.name}
|
||||
FormHelperTextProps={{ sx: { ml: 0 } }}
|
||||
required
|
||||
/>
|
||||
<TextField
|
||||
label="Host"
|
||||
onChange={coreUpdate("host")}
|
||||
helperText="Example: host.mc.example.com"
|
||||
FormHelperTextProps={{ sx: { ml: 0 } }}
|
||||
required
|
||||
/>
|
||||
<TextField
|
||||
label="Version"
|
||||
onChange={coreUpdate("version")}
|
||||
value={spec.version}
|
||||
select
|
||||
required
|
||||
SelectProps={{ MenuProps: { sx: { maxHeight: "20rem" } } }}
|
||||
>
|
||||
{versions.map((v, k) => (
|
||||
<MenuItem value={v} key={k}>
|
||||
{v}
|
||||
</MenuItem>
|
||||
))}
|
||||
</TextField>
|
||||
<TextField
|
||||
label="Server Type"
|
||||
onChange={coreUpdate("serverType")}
|
||||
value={spec.serverType}
|
||||
select
|
||||
required
|
||||
>
|
||||
<MenuItem value={"VANILLA"}>Vanilla</MenuItem>
|
||||
<MenuItem value={"FABRIC"}>Fabric</MenuItem>
|
||||
<MenuItem value={"PAPER"}>Paper</MenuItem>
|
||||
<MenuItem value={"SPIGOT"}>Spigot</MenuItem>
|
||||
</TextField>
|
||||
<TextField
|
||||
label="Difficulty"
|
||||
onChange={coreUpdate("difficulty")}
|
||||
value={spec.difficulty}
|
||||
select
|
||||
required
|
||||
>
|
||||
<MenuItem value={"peaceful"}>Peaceful</MenuItem>
|
||||
<MenuItem value={"easy"}>Easy</MenuItem>
|
||||
<MenuItem value={"medium"}>Medium</MenuItem>
|
||||
<MenuItem value={"hard"}>Hard</MenuItem>
|
||||
</TextField>
|
||||
|
||||
<Autocomplete
|
||||
multiple
|
||||
id="whitelist-autocomplete"
|
||||
options={[]}
|
||||
onChange={whitelistAdd}
|
||||
freeSolo
|
||||
renderInput={(p) => <TextField {...p} label="Whitelist" />}
|
||||
renderTags={(value, getTagProps) =>
|
||||
value.map((option, index) => {
|
||||
const defaultChipProps = getTagProps({ index });
|
||||
return (
|
||||
<Chip
|
||||
label={option}
|
||||
{...defaultChipProps}
|
||||
onDelete={whitelistRemove(option, defaultChipProps)}
|
||||
/>
|
||||
);
|
||||
})
|
||||
}
|
||||
/>
|
||||
<Autocomplete
|
||||
filterSelectedOptions={true}
|
||||
multiple
|
||||
id="ops-autocomplete"
|
||||
options={wl}
|
||||
onChange={opsAdd}
|
||||
renderInput={(p) => <TextField {...p} label="Ops" />}
|
||||
renderTags={(value, getTagProps) =>
|
||||
value.map((option, index) => {
|
||||
const defaultChipProps = getTagProps({ index });
|
||||
return (
|
||||
<Chip
|
||||
label={option}
|
||||
{...defaultChipProps}
|
||||
onDelete={opsRemove(option, defaultChipProps)}
|
||||
/>
|
||||
);
|
||||
})
|
||||
}
|
||||
/>
|
||||
{/*<TextField label="Ops" onChange={coreUpdate("ops")} />*/}
|
||||
{/*<TextField label="Icon" onChange={coreUpdate("icon")} required />*/}
|
||||
<TextField
|
||||
label="Max Players"
|
||||
onChange={coreUpdate("maxPlayers")}
|
||||
defaultValue={spec.maxPlayers}
|
||||
required
|
||||
/>
|
||||
<TextField
|
||||
label="Gamemode"
|
||||
onChange={coreUpdate("gamemode")}
|
||||
value={spec.gamemode}
|
||||
select
|
||||
required
|
||||
>
|
||||
<MenuItem value={"survival"}>Survival</MenuItem>
|
||||
<MenuItem value={"creative"}>Creative</MenuItem>
|
||||
<MenuItem value={"adventure"}>Adventure</MenuItem>
|
||||
<MenuItem value={"spectator"}>Spectator</MenuItem>
|
||||
</TextField>
|
||||
<TextField label="Seed" onChange={coreUpdate("seed")} />
|
||||
{/*<TextField label="Modpack" onChange={coreUpdate("modpack")} />*/}
|
||||
<TextField
|
||||
label="Memory"
|
||||
onChange={coreUpdate("memory")}
|
||||
defaultValue={spec.memory}
|
||||
required
|
||||
/>
|
||||
<TextField
|
||||
label="MOTD"
|
||||
onChange={coreUpdate("motd")}
|
||||
defaultValue={spec.motd}
|
||||
required
|
||||
/>
|
||||
<Button onClick={upsertSpec} variant="contained">
|
||||
Create
|
||||
</Button>
|
||||
</FormControl>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue