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 29d3049022
commit b40a4da301
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(() => {
console.log(
"empty ClanList, redirect to welcome page",
clanList().length === 0
clanList().length === 0,
);
if (clanList().length === 0) {
navigate("/welcome");

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

@@ -11,7 +11,7 @@ export const MachineAvatar = (props: AvatarProps) => {
<div
class={cx(
"rounded-lg border p-2 bg-def-1 border-def-3 size-36",
props.class
props.class,
)}
>
<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 Icon from "@/src/components/icon";
import { TextInput } from "@/src/components/TextInput";
import { Header } from "@/src/layout/header";
import { createForm, required, reset } from "@modular-forms/solid";
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 toast from "solid-toast";
import { MachineAvatar } from "./avatar";
import { DynForm } from "@/src/Form/form";
type CreateMachineForm = OperationArgs<"create_machine">;
@@ -66,68 +69,111 @@ export function CreateMachine() {
}
};
return (
<div class="flex w-full justify-center">
<div class="mt-4 w-full max-w-3xl self-stretch px-2">
<span class="px-2">Create new Machine</span>
<Form onSubmit={handleSubmit}>
<Field
name="opts.machine.name"
validate={[required("This field is required")]}
>
{(field, props) => (
<TextInput
inputProps={props}
formStore={formStore}
value={`${field.value}`}
label={"name"}
error={field.error}
required
/>
)}
</Field>
<Field name="opts.machine.description">
{(field, props) => (
<TextInput
inputProps={props}
formStore={formStore}
value={`${field.value}`}
label={"description"}
error={field.error}
/>
)}
</Field>
<Field name="opts.machine.deploy.targetHost">
{(field, props) => (
<>
<>
<Header title="Create Machine" />
<div class="flex w-full p-4">
<div class="mt-4 w-full self-stretch px-2">
<Form onSubmit={handleSubmit}>
<Field
name="opts.machine.name"
validate={[required("This field is required")]}
>
{(field, props) => (
<>
<div class="flex justify-center">
<MachineAvatar name={field.value} />
</div>
<TextInput
inputProps={props}
formStore={formStore}
value={`${field.value}`}
label={"name"}
error={field.error}
required
placeholder="New_machine"
/>
</>
)}
</Field>
<Field name="opts.machine.description">
{(field, props) => (
<TextInput
inputProps={props}
formStore={formStore}
value={`${field.value}`}
label={"Deployment target"}
label={"description"}
error={field.error}
placeholder="My awesome machine"
/>
</>
)}
</Field>
<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>
)}
</Field>
<Field name="opts.machine.tags" type="string[]">
{(field, props) => (
<div class="p-2">
<DynForm
initialValues={{ tags: ["all"] }}
components={{
before: <div>Tags</div>,
}}
schema={{
type: "object",
properties: {
tags: {
type: "array",
items: {
title: "Tag",
type: "string",
},
uniqueItems: true,
},
},
}}
/>
</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>
</>
);
}

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(
"Installing machine. Grab coffee (15min)..."
"Installing machine. Grab coffee (15min)...",
);
const r = await callApi("install_machine", {
opts: {
@@ -246,13 +246,13 @@ const MachineForm = (props: MachineDetailsProps) => {
...values.machine,
// TODO: Remove this workaround
tags: Array.from(
values.machine.tags || props.initialData.machine.tags || []
values.machine.tags || props.initialData.machine.tags || [],
),
},
});
if (machine_response.status === "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") {
@@ -438,7 +438,7 @@ const MachineForm = (props: MachineDetailsProps) => {
// disabled={!online()}
onClick={() => {
const modal = document.getElementById(
"install_modal"
"install_modal",
) as HTMLDialogElement | null;
modal?.showModal();
}}
@@ -544,7 +544,7 @@ function WifiModule(props: MachineWifiProps) {
});
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) => {
@@ -555,7 +555,7 @@ function WifiModule(props: MachineWifiProps) {
...acc,
[curr.ssid || ""]: { ssid: curr.ssid, password: curr.password },
}),
{}
{},
);
console.log("submitting", values, networks);