yadunut/clan-core
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

UI: improve create machine form

Browse Source
This commit is contained in:
Johannes Kirschbauer
2024-12-10 15:17:19 +01:00
parent 84989fbfcb
commit f13306195c
4 changed files with 111 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
pkgs/webview-ui/app/src/layout/layout.tsx
View File

@@ -8,7 +8,7 @@ export const Layout: Component<RouteSectionProps> = (props) => {
createEffect(() => { createEffect(() => {
console.log( console.log(
"empty ClanList, redirect to welcome page", "empty ClanList, redirect to welcome page",
clanList().length === 0 clanList().length === 0,
); );
if (clanList().length === 0) { if (clanList().length === 0) {
navigate("/welcome"); navigate("/welcome");

2
pkgs/webview-ui/app/src/routes/machines/avatar.tsx
View File

@@ -11,7 +11,7 @@ export const MachineAvatar = (props: AvatarProps) => {
<div <div
class={cx( class={cx(
"rounded-lg border p-2 bg-def-1 border-def-3 size-36", "rounded-lg border p-2 bg-def-1 border-def-3 size-36",
props.class props.class,
)} )}
> >
<RndThumbnail name={props.name || ""} /> <RndThumbnail name={props.name || ""} />

160
pkgs/webview-ui/app/src/routes/machines/create.tsx
View File

@@ -3,11 +3,14 @@ import { activeURI } from "@/src/App";
import { Button } from "@/src/components/button"; import { Button } from "@/src/components/button";
import Icon from "@/src/components/icon"; import Icon from "@/src/components/icon";
import { TextInput } from "@/src/components/TextInput"; import { TextInput } from "@/src/components/TextInput";
import { Header } from "@/src/layout/header";
import { createForm, required, reset } from "@modular-forms/solid"; import { createForm, required, reset } from "@modular-forms/solid";
import { useNavigate } from "@solidjs/router"; import { useNavigate } from "@solidjs/router";
import { createQuery, useQueryClient } from "@tanstack/solid-query"; import { useQueryClient } from "@tanstack/solid-query";
import { Match, Switch } from "solid-js"; import { Match, Switch } from "solid-js";
import toast from "solid-toast"; import toast from "solid-toast";
import { MachineAvatar } from "./avatar";
import { DynForm } from "@/src/Form/form";
type CreateMachineForm = OperationArgs<"create_machine">; type CreateMachineForm = OperationArgs<"create_machine">;
@@ -66,68 +69,111 @@ export function CreateMachine() {
} }
}; };
return ( return (
<div class="flex w-full justify-center"> <>
<div class="mt-4 w-full max-w-3xl self-stretch px-2"> <Header title="Create Machine" />
<span class="px-2">Create new Machine</span> <div class="flex w-full p-4">
<Form onSubmit={handleSubmit}> <div class="mt-4 w-full self-stretch px-2">
<Field <Form onSubmit={handleSubmit}>
name="opts.machine.name" <Field
validate={[required("This field is required")]} name="opts.machine.name"
> validate={[required("This field is required")]}
{(field, props) => ( >
<TextInput {(field, props) => (
inputProps={props} <>
formStore={formStore} <div class="flex justify-center">
value={`${field.value}`} <MachineAvatar name={field.value} />
label={"name"} </div>
error={field.error} <TextInput
required inputProps={props}
/> formStore={formStore}
)} value={`${field.value}`}
</Field> label={"name"}
<Field name="opts.machine.description"> error={field.error}
{(field, props) => ( required
<TextInput placeholder="New_machine"
inputProps={props} />
formStore={formStore} </>
value={`${field.value}`} )}
label={"description"} </Field>
error={field.error} <Field name="opts.machine.description">
/> {(field, props) => (
)}
</Field>
<Field name="opts.machine.deploy.targetHost">
{(field, props) => (
<>
<TextInput <TextInput
inputProps={props} inputProps={props}
formStore={formStore} formStore={formStore}
value={`${field.value}`} value={`${field.value}`}
label={"Deployment target"} label={"description"}
error={field.error} error={field.error}
placeholder="My awesome machine"
/> />
</> )}
)} </Field>
</Field> <Field name="opts.machine.tags" type="string[]">
<div class="mt-12 flex justify-end"> {(field, props) => (
<Button <div class="p-2">
type="submit" <DynForm
disabled={formStore.submitting} initialValues={{ tags: ["all"] }}
startIcon={ components={{
formStore.submitting ? ( before: <div>Tags</div>,
<Icon icon="Load" /> }}
) : ( schema={{
<Icon icon="Plus" /> type: "object",
) properties: {
} tags: {
> type: "array",
<Switch fallback={<>Creating</>}> items: {
<Match when={!formStore.submitting}>Create</Match> title: "Tag",
</Switch> type: "string",
</Button> },
</div> uniqueItems: true,
</Form> },
},
}}
/>
</div>
)}
</Field>
<div class="collapse collapse-arrow" tabindex="0">
<input type="checkbox" />
<div class="collapse-title link font-medium ">
Deployment Settings
</div>
<div class="collapse-content">
<Field name="opts.machine.deploy.targetHost">
{(field, props) => (
<>
<TextInput
inputProps={props}
formStore={formStore}
value={`${field.value}`}
label={"Target"}
error={field.error}
placeholder="e.g. 192.168.188.64"
/>
</>
)}
</Field>
</div>
</div>
<div class="mt-12 flex justify-end">
<Button
type="submit"
disabled={formStore.submitting}
startIcon={
formStore.submitting ? (
<Icon icon="Load" />
) : (
<Icon icon="Plus" />
)
}
>
<Switch fallback={<>Creating</>}>
<Match when={!formStore.submitting}>Create</Match>
</Switch>
</Button>
</div>
</Form>
</div>
</div> </div>
</div> </>
); );
} }

12
pkgs/webview-ui/app/src/routes/machines/details.tsx
View File

@@ -63,7 +63,7 @@ const InstallMachine = (props: InstallMachineProps) => {
} }
const loading_toast = toast.loading( const loading_toast = toast.loading(
"Installing machine. Grab coffee (15min)..." "Installing machine. Grab coffee (15min)...",
); );
const r = await callApi("install_machine", { const r = await callApi("install_machine", {
opts: { opts: {
@@ -246,13 +246,13 @@ const MachineForm = (props: MachineDetailsProps) => {
...values.machine, ...values.machine,
// TODO: Remove this workaround // TODO: Remove this workaround
tags: Array.from( tags: Array.from(
values.machine.tags || props.initialData.machine.tags || [] values.machine.tags || props.initialData.machine.tags || [],
), ),
}, },
}); });
if (machine_response.status === "error") { if (machine_response.status === "error") {
toast.error( toast.error(
`Failed to set machine: ${machine_response.errors[0].message}` `Failed to set machine: ${machine_response.errors[0].message}`,
); );
} }
if (machine_response.status === "success") { if (machine_response.status === "success") {
@@ -438,7 +438,7 @@ const MachineForm = (props: MachineDetailsProps) => {
// disabled={!online()} // disabled={!online()}
onClick={() => { onClick={() => {
const modal = document.getElementById( const modal = document.getElementById(
"install_modal" "install_modal",
) as HTMLDialogElement | null; ) as HTMLDialogElement | null;
modal?.showModal(); modal?.showModal();
}} }}
@@ -544,7 +544,7 @@ function WifiModule(props: MachineWifiProps) {
}); });
const [nets, setNets] = createSignal<1[]>( const [nets, setNets] = createSignal<1[]>(
new Array(props.initialData.length || 1).fill(1) new Array(props.initialData.length || 1).fill(1),
); );
const handleSubmit = async (values: WifiForm) => { const handleSubmit = async (values: WifiForm) => {
@@ -555,7 +555,7 @@ function WifiModule(props: MachineWifiProps) {
...acc, ...acc,
[curr.ssid || ""]: { ssid: curr.ssid, password: curr.password }, [curr.ssid || ""]: { ssid: curr.ssid, password: curr.password },
}), }),
{} {},
); );
console.log("submitting", values, networks); console.log("submitting", values, networks);