diff --git a/frontend/src/components/New.tsx b/frontend/src/components/New.tsx index 262567789..7dd4f5f1f 100644 --- a/frontend/src/components/New.tsx +++ b/frontend/src/components/New.tsx @@ -14,7 +14,7 @@ export const NewGroup: Component<{}> = (p) => { + } @@ -100,12 +100,6 @@ const New: Component<{ - {/* - create - */} diff --git a/frontend/src/components/Updates.tsx b/frontend/src/components/Updates.tsx index fc72f88db..e9fb41936 100644 --- a/frontend/src/components/Updates.tsx +++ b/frontend/src/components/Updates.tsx @@ -113,7 +113,7 @@ const Update: Component<{ update: UpdateType }> = (p) => { }; return ( diff --git a/frontend/src/components/home/Home.tsx b/frontend/src/components/home/Home.tsx index e5e3e9ac3..5e7d4934b 100644 --- a/frontend/src/components/home/Home.tsx +++ b/frontend/src/components/home/Home.tsx @@ -7,7 +7,7 @@ import Grid from "../shared/layout/Grid"; import SimpleTabs from "../shared/tabs/SimpleTabs"; import Summary from "./Summary"; import Builds from "./Tree/Builds"; -import Groups from "./Tree/Groups"; +import Groups from "./Tree/Groups2"; import { TreeProvider } from "./Tree/Provider"; import Servers from "./Tree/Servers"; import Updates from "./Updates/Updates"; @@ -30,13 +30,13 @@ const Home: Component<{}> = (p) => { localStorageKey="home-groups-servers-tab-v1" tabs={[ { - title: "groups", + title: "servers", element: () => , }, - { - title: "servers", - element: () => , - }, + // { + // title: "servers", + // element: () => , + // }, { title: "builds", element: () => diff --git a/frontend/src/components/home/Tree/Builds.tsx b/frontend/src/components/home/Tree/Builds.tsx index 1c4c2679f..472cb8d45 100644 --- a/frontend/src/components/home/Tree/Builds.tsx +++ b/frontend/src/components/home/Tree/Builds.tsx @@ -116,7 +116,7 @@ const Build: Component<{ id: string }> = (p) => { return ( = (p) => { + const { isSemiMobile } = useAppDimensions(); + const { groups } = useAppState(); + const [selected, setSelected] = useLocalStorage( + null, + "home-selected-group-v1" + ); + const [searchFilter, setSearchFilter] = createSignal(""); + const { sort, setSort, group_sorter } = useTreeState(); + const [editing, toggleEditing, setEditing] = useToggle(); + const groupIDs = createMemo(() => { + if (groups.loaded()) { + const filters = searchFilter() + .split(" ") + .filter((term) => term.length > 0) + .map((term) => term.toLowerCase()); + return groups + .ids() + ?.filter((id) => { + const name = groups.get(id)!.name; + for (const term of filters) { + if (!name.includes(term)) { + return false; + } + } + return true; + }) + .sort(group_sorter()); + } else { + return undefined; + } + }); + return ( + + + + + +

+ {selected() === "all" ? "all" : groups.get(selected()!)?.name} +

+ + + + + sort by:} + selected={sort()} + items={TREE_SORTS as any as string[]} + onSelect={(mode) => setSort(mode as TreeSortType)} + position="bottom right" + targetClass="blue" + targetStyle={{ height: "100%" }} + containerStyle={{ height: "100%" }} + /> + }> + + + + + + + + + + + {(id) => } + + + } + > + { + setSelected(null); + setEditing(false); + }} + editing={editing()} + /> + + + ); +}; + +export default Groups; + +const GroupButton: Component<{ + id: string; + setSelected: (s: string) => void; +}> = (p) => { + const { isSemiMobile } = useAppDimensions(); + const { groups, servers } = useAppState(); + const isAll = () => p.id === "all"; + const name = () => { + if (isAll()) { + return "all"; + } + return groups.get(p.id)?.name; + }; + const serverCount = () => { + if (isAll()) { + return servers.ids()?.length || 0; + } + return groups.get(p.id)?.servers.length || 0; + }; + return ( + p.setSelected(p.id)} + > +

{name()}

+ + +
{serverCount()}
+
{`server${serverCount() > 1 ? "s" : ""}`}
+ + + + + + + + + ); +}; + +const Group: Component<{ + id: string; + searchFilter: string; + editing: boolean; + exit: () => void; +}> = (p) => { + const { groups, servers } = useAppState(); + const { server_sorter } = useTreeState(); + const group = () => groups.get(p.id); + const serverIDs = createMemo(() => { + if (servers.loaded()) { + const filters = p.searchFilter + .split(" ") + .filter((term) => term.length > 0) + .map((term) => term.toLowerCase()); + const serverIds = ( + p.id === "all" ? servers.ids() : groups.get(p.id)?.servers + )?.sort(server_sorter()); + return serverIds + ?.filter((id) => { + const name = servers.get(id)!.server.name; + for (const term of filters) { + if (!name.includes(term)) { + return false; + } + } + return true; + }) + .sort(server_sorter()); + } else { + return undefined; + } + }); + useWindowKeyDown((e) => { + if (e.key === "ArrowLeft") { + p.exit(); + } + }); + return ( + + {(id) => ( + + + + { + client.update_group({ + ...group()!, + servers: group()!.servers.filter((member) => member !== id), + }); + }} + > + + + + + )} + + ); +}; + +const AddServerToGroup: Component<{ groupId: string }> = (p) => { + const { groups, servers, ungroupedServerIds } = useAppState(); + const [showAdd, setShowAdd] = createSignal(false); + const group = () => groups.get(p.groupId); + return ( + 0}> + { + e.stopPropagation(); + setShowAdd(false); + }} + position="bottom right" + target={ + + } + menuStyle={{ gap: "0.5rem" }} + content={ + <> + {/* */} + + {(server_id) => { + const server = () => servers.get(server_id)!; + return ( + + client.update_group({ + ...group()!, + servers: [...group()!.servers, server_id], + }) + } + > + {server().server.name} + + ); + }} + + + } + /> + + ); +}; diff --git a/frontend/src/components/home/Tree/Server.tsx b/frontend/src/components/home/Tree/Server.tsx index eb0a96276..3d91fa4c5 100644 --- a/frontend/src/components/home/Tree/Server.tsx +++ b/frontend/src/components/home/Tree/Server.tsx @@ -18,9 +18,10 @@ const Server: Component<{ id: string }> = (p) => { const server = () => servers.get(p.id); return ( -
+
+ ); }; diff --git a/frontend/src/components/home/Tree/Servers.tsx b/frontend/src/components/home/Tree/Servers.tsx index e92d16351..8c9e8b679 100644 --- a/frontend/src/components/home/Tree/Servers.tsx +++ b/frontend/src/components/home/Tree/Servers.tsx @@ -4,7 +4,7 @@ import { useUser } from "../../../state/UserProvider"; import Input from "../../shared/Input"; import Grid from "../../shared/layout/Grid"; import Selector from "../../shared/menu/Selector"; -import AddServer from "./AddServer"; +import AddServer from "../../topbar/AddServer"; import { TreeSortType, TREE_SORTS, useTreeState } from "./Provider"; import Server from "./Server"; diff --git a/frontend/src/components/home/Updates/Update.tsx b/frontend/src/components/home/Updates/Update.tsx index 2921ef620..420352e20 100644 --- a/frontend/src/components/home/Updates/Update.tsx +++ b/frontend/src/components/home/Updates/Update.tsx @@ -32,7 +32,7 @@ const Update: Component<{ update: UpdateType }> = (p) => { }; return ( diff --git a/frontend/src/components/home/Updates/update.module.scss b/frontend/src/components/home/Updates/update.module.scss index cb29b6131..85f2674fc 100644 --- a/frontend/src/components/home/Updates/update.module.scss +++ b/frontend/src/components/home/Updates/update.module.scss @@ -12,7 +12,6 @@ } .Update { - background-color: c.$lightgrey; padding: 0.75rem; height: 40px; transform-origin: top; diff --git a/frontend/src/components/server_children/Deployment.tsx b/frontend/src/components/server_children/Deployment.tsx index 57359728a..aa3ea5119 100644 --- a/frontend/src/components/server_children/Deployment.tsx +++ b/frontend/src/components/server_children/Deployment.tsx @@ -51,7 +51,7 @@ const Deployment: Component<{ id: string }> = (p) => { = (p) => { (id) => deployments.get(id)?.deployment.server_id === p.id )) as string[]; }); - // const buildIDs = createMemo(() => { - // return (builds.loaded() && - // builds - // .ids()! - // .filter((id) => builds.get(id)?.server_id === p.id)) as string[]; - // }); return (
{(id) => } = (p) => {
- // ( - // - // {(id) => } - // - // - // - // - // ), - // }, - // // { - // // title: "builds", - // // element: () => ( - // // - // // {(id) => } - // // - // // - // // - // // - // // ), - // // }, - // ]} - // /> ); }; diff --git a/frontend/src/components/home/Tree/AddServer.tsx b/frontend/src/components/topbar/AddServer.tsx similarity index 75% rename from frontend/src/components/home/Tree/AddServer.tsx rename to frontend/src/components/topbar/AddServer.tsx index c741a0b03..562486bb4 100644 --- a/frontend/src/components/home/Tree/AddServer.tsx +++ b/frontend/src/components/topbar/AddServer.tsx @@ -1,12 +1,12 @@ import { Component, JSX, onMount } from "solid-js"; import { createStore } from "solid-js/store"; -import { client, pushNotification } from "../../.."; -import { CreateServerBody } from "../../../util/client_types"; -import { useToggle } from "../../../util/hooks"; -import Icon from "../../shared/Icon"; -import Input from "../../shared/Input"; -import Grid from "../../shared/layout/Grid"; -import CenterMenu from "../../shared/menu/CenterMenu"; +import { client, pushNotification } from "../.."; +import { CreateServerBody } from "../../util/client_types"; +import { useToggle } from "../../util/hooks"; +import Icon from "../shared/Icon"; +import Input from "../shared/Input"; +import Grid from "../shared/layout/Grid"; +import CenterMenu from "../shared/menu/CenterMenu"; const AddServer: Component<{}> = () => { const [show, toggleShow] = useToggle(); @@ -14,10 +14,11 @@ const AddServer: Component<{}> = () => { } + target="add server" title="add server" targetClass="green shadow" content={() => } + style={{ "box-sizing": "border-box", "max-width": "90vw" }} position="center" /> ); @@ -26,7 +27,7 @@ const AddServer: Component<{}> = () => { const INPUT_STYLE: JSX.CSSProperties = { "font-size": "1.25rem", width: "500px", - "max-width": "90vw", + "max-width": "80vw", }; const Content: Component<{ close: () => void }> = (p) => { @@ -45,7 +46,12 @@ const Content: Component<{ close: () => void }> = (p) => { } }; return ( - + { return ( @@ -102,6 +95,7 @@ const RightSide: Component = () => { content={} position="bottom right" /> */} + { return servers.get(target.id)?.server.name || "deleted"; } else if (target.type === "Build" && builds) { return builds.get(target.id)?.name || "deleted"; + } else if (target.type === "Group" && groups) { + return groups.get(target.id)?.name || "deleted"; } else { - return "admin"; + return "unknown" } } }; diff --git a/frontend/src/style/app.scss b/frontend/src/style/app.scss index 2654fff11..5158b3e36 100644 --- a/frontend/src/style/app.scss +++ b/frontend/src/style/app.scss @@ -35,17 +35,37 @@ } .card { - background-color: c.$grey; + background-color: rgba(c.$grey, 0.7); padding: 1rem; transition: all 250ms ease-in-out; } +.card.hover:hover { + background-color: c.$grey; +} + +.card.clear { + background-color: rgba(c.$lightgrey, 0); +} + +.card.clear.hover:hover { + background-color: rgba(c.$lightgrey, 0.7); +} + .card.light { - background-color: c.$lightgrey; + background-color: rgba(c.$lightgrey, 0.7); +} + +.card.light.hover:hover { + background-color: c.$lightgrey; } .card.dark { - background-color: c.$darkgrey; + background-color: rgba(c.$darkgrey, 0.7); +} + +.card.dark.hover:hover { + background-color: c.$darkgrey; } .card.hoverable:hover {