diff --git a/frontend/src/components/server/Header.tsx b/frontend/src/components/server/Header.tsx index 51f57027e..5d17ce798 100644 --- a/frontend/src/components/server/Header.tsx +++ b/frontend/src/components/server/Header.tsx @@ -1,8 +1,7 @@ -import { Component, createResource, Show } from "solid-js"; +import { Component, createResource, createSignal, Show } from "solid-js"; import { useAppState } from "../../state/StateProvider"; import { useUser } from "../../state/UserProvider"; import { combineClasses, getId, serverStatusClass } from "../../util/helpers"; -import ConfirmButton from "../shared/ConfirmButton"; import Icon from "../shared/Icon"; import Flex from "../shared/layout/Flex"; import Grid from "../shared/layout/Grid"; @@ -15,6 +14,7 @@ import { client } from "../.."; import Loading from "../shared/loading/Loading"; import HoverMenu from "../shared/menu/HoverMenu"; import ConfirmMenuButton from "../shared/ConfirmMenuButton"; +import Input, { AutofocusInput } from "../shared/Input"; const Header: Component<{}> = (p) => { const { servers } = useAppState(); @@ -25,6 +25,8 @@ const Header: Component<{}> = (p) => { const { isMobile, isSemiMobile } = useAppDimensions(); const [showUpdates, toggleShowUpdates] = useLocalStorageToggle("show-updates"); + const [editingName, setEditingName] = createSignal(false); + const [updatingName, setUpdatingName] = createSignal(false); const userCanUpdate = () => user().admin || server().server.permissions![getId(user())] === PermissionLevel.Update; @@ -50,7 +52,36 @@ const Header: Component<{}> = (p) => { }} > -

{server().server.name}

+ setEditingName(true)} + style={{ padding: 0 }} + > +

{server().server.name}

+ + } + > + } + > + { + setUpdatingName(true); + await client.update_server({ + ...server().server, + name: new_name, + }); + setEditingName(false); + setUpdatingName(false); + }} + /> + +
{status()}
diff --git a/frontend/src/components/shared/Input.tsx b/frontend/src/components/shared/Input.tsx index 557862dfe..24d3ea19d 100644 --- a/frontend/src/components/shared/Input.tsx +++ b/frontend/src/components/shared/Input.tsx @@ -1,4 +1,4 @@ -import { Component, JSX, Show } from "solid-js"; +import { Component, JSX, onMount, Show } from "solid-js"; const Input: Component< { @@ -15,16 +15,33 @@ const Input: Component< {...p} onInput={(e) => p.onEdit && p.onEdit(e.currentTarget.value)} onBlur={(e) => p.onConfirm && p.onConfirm(e.currentTarget.value)} - onKeyDown={p.onKeyDown || ((e) => { - if (e.key === "Enter") { - p.onEnter - ? p.onEnter(e.currentTarget.value) - : e.currentTarget.blur(); - } - })} + onKeyDown={ + p.onKeyDown || + ((e) => { + if (e.key === "Enter") { + p.onEnter + ? p.onEnter(e.currentTarget.value) + : e.currentTarget.blur(); + } + }) + } />
); }; export default Input; + +export const AutofocusInput: Component< + { + onEdit?: (value: string) => void; + onConfirm?: (value: string) => void; + onEnter?: (value: string) => void; + disabled?: boolean; + } & JSX.InputHTMLAttributes & + JSX.HTMLAttributes +> = (p) => { + let ref: HTMLInputElement; + onMount(() => setTimeout(() => ref?.focus(), 100)); + return ; +}; diff --git a/periphery/Cargo.toml b/periphery/Cargo.toml index 318ce0688..632872095 100644 --- a/periphery/Cargo.toml +++ b/periphery/Cargo.toml @@ -3,7 +3,7 @@ name = "monitor_periphery" version = "0.2.9" edition = "2021" authors = ["MoghTech"] -description = "monitor periphery binary | run monitor periphery as system daemon" +description = "monitor periphery binary" license = "GPL-3.0-or-later" [[bin]]