add create buttons

frontend/src/components/home2/AddServer.tsx

@@ -0,0 +1,71 @@
+import { Server } from "@monitor/types";
+import { Component, onMount } from "solid-js";
+import { createStore } from "solid-js/store";
+import { pushNotification } from "../..";
+import { ADD_SERVER } from "@monitor/util";
+import { useAppState } from "../../state/StateProvider";
+import { useToggle } from "../../util/hooks";
+import Input from "../util/Input";
+import Grid from "../util/layout/Grid";
+import CenterMenu from "../util/menu/CenterMenu";
+
+const AddServer: Component<{}> = () => {
+  const [show, toggleShow] = useToggle();
+  return (
+    <CenterMenu
+      show={show}
+      toggleShow={toggleShow}
+      title="add server"
+      target="add server"
+      targetClass="green shadow"
+      targetStyle={{ width: "100%" }}
+      content={<Content close={toggleShow} />}
+      position="center"
+    />
+  );
+};
+
+const Content: Component<{ close: () => void }> = (p) => {
+  const { ws } = useAppState();
+  let nameInput: HTMLInputElement | undefined;
+  const [server, setServer] = createStore<Server>({
+    name: "",
+    address: "",
+    enabled: true,
+    owners: [],
+    toNotify: [],
+  });
+  onMount(() => nameInput?.focus());
+  const create = () => {
+    if (server.name.length > 0 && server.address.length > 0) {
+      ws.send(ADD_SERVER, {
+        server,
+      });
+      p.close();
+    } else {
+      pushNotification("bad", "a field is empty. fill in all fields");
+    }
+  };
+  return (
+    <Grid placeItems="center" style={{ padding: "2rem 1rem 1rem 1rem" }}>
+      <Input
+        ref={nameInput}
+        value={server.name}
+        onEdit={(name) => setServer("name", name)}
+        placeholder="name"
+        style={{ "font-size": "1.5rem" }}
+      />
+      <Input
+        value={server.address}
+        onEdit={(address) => setServer("address", address)}
+        placeholder="address"
+        style={{ "font-size": "1.5rem" }}
+      />
+      <button class="green" style={{ width: "100%" }} onClick={create}>
+        add
+      </button>
+    </Grid>
+  );
+};
+
+export default AddServer;

frontend/src/components/home2/Builds.tsx

@@ -7,6 +7,7 @@ import Icon from "../util/Icon";
 import Grid from "../util/layout/Grid";
 import HoverMenu from "../util/menu/HoverMenu";
 import s from "./home.module.scss";
+import { NewBuild } from "./New";
 
 const Builds: Component<{}> = (p) => {
 	const { builds } = useAppState();
@@ -19,6 +20,7 @@ const Builds: Component<{}> = (p) => {
       )}
     >
       <For each={builds.ids()}>{(id) => <Build id={id} />}</For>
+      <NewBuild />
     </Grid>
   );
 }

frontend/src/components/home2/Home.tsx

@@ -7,6 +7,7 @@ import Tabs from "../util/tabs/Tabs";
 import Server from "./Server";
 import Builds from "./Builds";
 import s from "./home.module.scss";
+import AddServer from "./AddServer";
 
 const Home: Component<{}> = (p) => {
   const { username, permissions } = useUser();
@@ -24,6 +25,7 @@ const Home: Component<{}> = (p) => {
             element: (
               <Grid>
                 <For each={serverIDs()}>{(id) => <Server id={id} />}</For>
+                <AddServer />
               </Grid>
             ),
           },

frontend/src/components/home2/New.tsx

@@ -0,0 +1,105 @@
+import { CREATE_BUILD, CREATE_DEPLOYMENT } from "@monitor/util";
+import { Component, createSignal, onMount, Show } from "solid-js";
+import { pushNotification } from "../..";
+import { defaultDeployment } from "../../state/defaults";
+import { useAppState } from "../../state/StateProvider";
+import { useKeyDown, useToggle } from "../../util/hooks";
+import Icon from "../util/Icon";
+import Input from "../util/Input";
+import Flex from "../util/layout/Flex";
+
+export const NewDeployment: Component<{ serverID: string }> = (p) => {
+  const { ws } = useAppState();
+  const [showNew, toggleShowNew] = useToggle();
+  const create = (name: string) => {
+    ws.send(CREATE_DEPLOYMENT, {
+      deployment: defaultDeployment(name, p.serverID),
+    });
+  };
+  return (
+    <Show
+      when={showNew()}
+      fallback={
+        <button class="green" onClick={toggleShowNew} style={{ width: "100%" }}>
+          <Icon type="plus" />
+        </button>
+      }
+    >
+      <New
+        create={create}
+        close={toggleShowNew}
+        placeholder="name deployment"
+      />
+    </Show>
+  );
+};
+
+export const NewBuild: Component<{}> = (p) => {
+  const { ws } = useAppState();
+  const [showNew, toggleShowNew] = useToggle();
+  const create = (name: string) => {
+    ws.send(CREATE_BUILD, {
+      build: { name },
+    });
+  };
+  return (
+    <Show
+      when={showNew()}
+      fallback={
+        <button class="green" onClick={toggleShowNew} style={{ width: "100%" }}>
+          <Icon type="plus" />
+        </button>
+      }
+    >
+      <New placeholder="name build" create={create} close={toggleShowNew} />
+    </Show>
+  );
+};
+
+const New: Component<{
+  create: (value: string) => void;
+  close: () => void;
+  placeholder: string;
+}> = (p) => {
+  const [name, setName] = createSignal("");
+  let inputRef: HTMLInputElement | undefined;
+  onMount(() => {
+    inputRef?.focus();
+  });
+  useKeyDown("Escape", p.close);
+  const create = () => {
+    if (name().length > 0) {
+      p.create(name());
+      setName("");
+      p.close();
+    } else {
+      pushNotification("bad", "please provide a name");
+    }
+  };
+  return (
+    <Flex justifyContent="space-between">
+      <Input
+        ref={inputRef}
+        placeholder={p.placeholder}
+        value={name()}
+        onEdit={setName}
+        onEnter={create}
+        style={{ width: "20rem" }}
+      />
+      <Flex gap="0.4rem">
+        <button class="green" onClick={create}>
+          create
+        </button>
+        {/* <ConfirmButton
+          color="green"
+          onConfirm={create}
+        >
+          create
+        </ConfirmButton> */}
+        <button class="red" onClick={p.close}>
+          <Icon type="cross" />
+        </button>
+      </Flex>
+    </Flex>
+  );
+};

frontend/src/components/home2/NewDeployment.tsx

@@ -1,12 +0,0 @@
-import { Component } from "solid-js";
-import s from "./home.module.scss";
-
-const NewDeployment: Component<{ serverID: string }> = (p) => {
-	return (
-		<div class={s.NewDeployment} >
-			
-		</div>
-	);
-}
-
-export default NewDeployment;

frontend/src/components/home2/Server.tsx

@@ -10,7 +10,7 @@ import Flex from "../util/layout/Flex";
 import Grid from "../util/layout/Grid";
 import Deployment from "./Deployment";
 import s from "./home.module.scss";
-import NewDeployment from "./NewDeployment";
+import { NewDeployment } from "./New";
 
 const Server: Component<{ id: string }> = (p) => {
   const { servers, deployments, selected } = useAppState();

frontend/src/components/sidebar/AddServer.tsx

@@ -33,6 +33,7 @@ const Content: Component<{ close: () => void }> = (p) => {
     address: "",
     enabled: true,
     owners: [],
+    toNotify: []
   });
   onMount(() => nameInput?.focus());
   const create = () => {