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

Webview: add clanList edit

Browse Source
This commit is contained in:
Johannes Kirschbauer
2024-07-11 18:45:29 +02:00
parent 3736f492d3
commit ba8a9c7565
3 changed files with 82 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -17,6 +17,8 @@ const [clanList, setClanList] = makePersisted(createSignal<string[]>([]), {
storage: localStorage, storage: localStorage,
}); });
clanList() && setActiveURI(clanList()[0]);
export { clanList, setClanList }; export { clanList, setClanList };
const App: Component = () => { const App: Component = () => {

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

@@ -1,17 +1,13 @@
import { Component, JSXElement, Show } from "solid-js"; import { Component, JSXElement, Show } from "solid-js";
import { Header } from "./header"; import { Header } from "./header";
import { Sidebar } from "../Sidebar"; import { Sidebar } from "../Sidebar";
import { route, setRoute } from "../App"; import { clanList, route, setRoute } from "../App";
import { effect } from "solid-js/web";
interface LayoutProps { interface LayoutProps {
children: JSXElement; children: JSXElement;
} }
export const Layout: Component<LayoutProps> = (props) => { export const Layout: Component<LayoutProps> = (props) => {
effect(() => {
console.log(route());
});
return ( return (
<> <>
<div class="drawer bg-base-100 lg:drawer-open"> <div class="drawer bg-base-100 lg:drawer-open">
@@ -24,12 +20,13 @@ export const Layout: Component<LayoutProps> = (props) => {
<Show when={route() !== "welcome"}> <Show when={route() !== "welcome"}>
<Header /> <Header />
</Show> </Show>
{props.children} {props.children}
</div> </div>
<div <div
class="drawer-side z-40" class="drawer-side z-40"
classList={{ "!hidden": route() === "welcome" }} classList={{
"!hidden": route() === "welcome" || clanList().length === 0,
}}
> >
<label <label
for="toplevel-drawer" for="toplevel-drawer"

134
pkgs/webview-ui/app/src/routes/settings/index.tsx
View File

@@ -5,12 +5,14 @@ import {
required, required,
setValue, setValue,
} from "@modular-forms/solid"; } from "@modular-forms/solid";
import { activeURI, setClanList, setActiveURI, setRoute } from "@/src/App"; import {
activeURI,
// eslint-disable-next-line @typescript-eslint/consistent-type-definitions setClanList,
type SettingsForm = { setActiveURI,
base_dir: string | null; setRoute,
}; clanList,
} from "@/src/App";
import { For } from "solid-js";
export const registerClan = async () => { export const registerClan = async () => {
try { try {
@@ -20,7 +22,10 @@ export const registerClan = async () => {
console.log(loc); console.log(loc);
if (loc.status === "success" && loc.data) { if (loc.status === "success" && loc.data) {
// @ts-expect-error: data is a string // @ts-expect-error: data is a string
setClanList((s) => [...s, loc.data]); setClanList((s) => {
const res = new Set([...s, loc.data]);
return Array.from(res);
});
setRoute((r) => { setRoute((r) => {
if (r === "welcome") return "machines"; if (r === "welcome") return "machines";
return r; return r;
@@ -33,66 +38,79 @@ export const registerClan = async () => {
}; };
export const Settings = () => { export const Settings = () => {
const [formStore, { Form, Field }] = createForm<SettingsForm>({
initialValues: {
base_dir: activeURI(),
},
});
const handleSubmit: SubmitHandler<SettingsForm> = async (values, event) => {
//
};
return ( return (
<div class="card card-normal"> <div class="card card-normal">
<Form onSubmit={handleSubmit} shouldActive> <div class="card-body">
<div class="card-body"> <div class="label">
<Field name="base_dir" validate={[required("Clan URI is required")]}> <div class="label-text">Registered Clans</div>
{(field, props) => ( <button
<label class="form-control w-full"> class="btn btn-square btn-primary"
<div class="label"> onClick={() => {
<span class="label-text block after:ml-0.5 after:text-primary"> registerClan();
Directory }}
</span> >
</div> <span class="material-icons">add</span>
<div class="stats shadow"> </button>
<div class="stat"> </div>
<div class="stat-figure text-primary"> <div class="stats stats-vertical shadow">
<span class="material-icons">inventory</span> <For each={clanList()}>
</div> {(value) => (
<div class="stat-title">Clan URI</div> <div class="stat">
<div <div class="stat-figure text-primary">
class="stat-value" <div class="join">
classList={{ "text-slate-500": !field.value }} <button
class=" join-item btn-sm"
classList={{
"btn btn-ghost btn-outline": activeURI() !== value,
"badge badge-primary": activeURI() === value,
}}
disabled={activeURI() === value}
onClick={() => {
setActiveURI(value);
}}
> >
{field.value || "Not set"} {activeURI() === value ? "active" : "select"}
<button </button>
class="btn btn-ghost mx-4" <button
onClick={async () => { class="btn btn-ghost btn-outline join-item btn-sm"
const location = await registerClan(); onClick={() => {
if (location) { setClanList((s) =>
setActiveURI(location); s.filter((v, idx) => {
setValue(formStore, "base_dir", location); if (v == value) {
} setActiveURI(
}} clanList()[idx - 1] ||
> clanList()[idx + 1] ||
<span class="material-icons">edit</span> null
</button> );
</div> return false;
<div class="stat-desc">Where the clan source resides</div> }
return true;
})
);
// if (activeURI() === value) {
// setActiveURI();
// }
}}
>
Remove URI
</button>
</div> </div>
</div> </div>
<div class="stat-title">Clan URI</div>
<div class="label"> <div
{field.error && ( class="stat-desc text-lg"
<span class="label-text-alt">{field.error}</span> classList={{
)} "text-primary": activeURI() === value,
}}
>
{value}
</div> </div>
</label> </div>
)} )}
</Field> </For>
</div> </div>
</Form> </div>
</div> </div>
); );
}; };