new server dialog

sentryx/servers.json

@@ -1,12 +1 @@
-[
+[{"name":"Main Server","ip":"10.7.1.2","coordinates":[19.8187,41.3275]},{"name":"Second Server","ip":"10.7.1.2","coordinates":[19.8187,42]},{"name":"test","ip":"abc","coordinates":[14.212747852350674,13.997221304482736]},{"name":"Bro","ip":"10.7.1.53","coordinates":[19.66455594156352,40.826754398461304]},{"name":"Idk lol","ip":"10.32.2.4","coordinates":[20.135507417925936,41.17975477202245]}]
-  {
-    "name": "Main Server",
-    "ip": "10.7.1.2",
-    "coordinates": [19.8187, 41.3275]
-  },
-  {
-    "name": "Second Server",
-    "ip": "10.7.1.2",
-    "coordinates": [19.8187, 42]
-  }
-]

src/app/api/servers/route.ts

@@ -1,6 +1,7 @@
 import { NextResponse } from "next/server";
 import Data from "../data";
 import Server, { ServerAPI } from "@/types/server";
+import { HttpStatusCode } from "axios";
 
 const servers = new Data<ServerAPI[]>("sentryx/servers.json", "array");
 
@@ -39,3 +40,29 @@ export async function GET(request: Request) {
     servers: currentServers,
   });
 }
+
+export async function POST(request: Request) {
+  const body = await request.json();
+
+  if (!body.name || !body.ip)
+    return NextResponse.json(
+      {
+        message: "Invalid body",
+      },
+      {
+        status: HttpStatusCode.BadRequest,
+      }
+    );
+
+  servers.data.push({
+    name: body.name,
+    ip: body.ip,
+    coordinates: body.coordinates,
+  });
+
+  servers.write();
+
+  return NextResponse.json({
+    message: "ok",
+  });
+}

src/app/servers/LocationSelect.tsx

@@ -0,0 +1,60 @@
+import React, { useRef, useEffect, useState } from "react";
+import maplibregl from "maplibre-gl";
+import "maplibre-gl/dist/maplibre-gl.css";
+
+export default function MapSelect({
+  setLocation,
+}: {
+  setLocation: (coors: [number, number]) => void;
+}) {
+  const mapContainer = useRef<HTMLDivElement | null>(null);
+  const map = useRef<maplibregl.Map | null>(null);
+  const marker = useRef<maplibregl.Marker | null>(null);
+
+  useEffect(() => {
+    if (map.current || !mapContainer.current) return;
+
+    map.current = new maplibregl.Map({
+      container: mapContainer.current,
+      style: "/map_style.json",
+      center: [0, 0],
+      zoom: 2,
+    });
+
+    // Add click handler
+    map.current.on("click", (e) => {
+      const lngLat = e.lngLat;
+
+      // Save location to state
+      setLocation([lngLat.lng, lngLat.lat]);
+
+      // Remove previous marker if any
+      if (marker.current) {
+        marker.current.remove();
+      }
+
+      // Add marker to clicked location
+      marker.current = new maplibregl.Marker({ color: "#ff3e00" })
+        .setLngLat(lngLat)
+        .addTo(map.current!);
+    });
+
+    return () => {
+      // Clean up marker
+      if (marker.current) {
+        marker.current.remove();
+        marker.current = null;
+      }
+
+      // Clean up map
+      map.current?.remove();
+      map.current = null;
+    };
+  }, []);
+
+  return (
+    <>
+      <div ref={mapContainer} style={{ width: "100%", height: "300px" }} />
+    </>
+  );
+}

src/app/servers/Map.tsx

@@ -56,5 +56,5 @@ export default function Map({ servers }: { servers: Server[] }) {
     });
   }, [servers]);
 
-  return <div ref={mapContainer} style={{ width: "100%", height: "600px" }} />;
+  return <div ref={mapContainer} className="w-full h-full" />;
 }

src/app/servers/NewServerDialog.tsx

@@ -0,0 +1,70 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Button, buttonVariants } from "@/components/ui/button";
+import { Plus } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import MapSelect from "./LocationSelect";
+import { useState } from "react";
+import Session from "@/lib/session";
+
+export default function NewServerDialog({
+  session,
+}: {
+  session: Session | null;
+}) {
+  const [open, setOpen] = useState(false);
+  const [name, setName] = useState("");
+  const [ip, setIp] = useState("");
+  const [location, setLocation] = useState<[number, number] | undefined>(
+    undefined
+  );
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger
+        className={cn(buttonVariants({ variant: "default" }))}
+        onClick={() => setOpen(true)}
+      >
+        <Plus className="m-0 p-0" /> New
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Add Server</DialogTitle>
+        </DialogHeader>
+        <Label className="mt-2">Server Name</Label>
+        <Input
+          placeholder="Main Server, Database, etc"
+          onInput={(e) => setName(e.currentTarget.value)}
+        />
+
+        <Label className="mt-2">Server IP</Label>
+        <Input
+          placeholder="10.7.1.10, etc"
+          onInput={(e) => setIp(e.currentTarget.value)}
+        />
+
+        <Label className="mt-2">Server Location</Label>
+        <MapSelect setLocation={setLocation} />
+        <DialogFooter>
+          <Button
+            onClick={() => {
+              session?.addServer({ name, ip, coordinates: location });
+              setOpen(false);
+            }}
+          >
+            Add server
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/app/servers/page.tsx

@@ -1,19 +1,14 @@
 "use client";
 
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Card, CardContent } from "@/components/ui/card";
-import { Label } from "@/components/ui/label";
-import { cn } from "@/lib/utils";
-import { CircleCheckBig, Cpu, MemoryStick, TriangleAlert } from "lucide-react";
-import { ChartAreaGradient } from "../dashboard/chart";
-import { Progress } from "@/components/ui/progress";
 import ServerComponent from "../dashboard/server";
 import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
 import { useEffect, useState } from "react";
 import useSession from "@/hooks/useSession";
 import Server from "@/types/server";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import Map from "./Map";
+import NewServerDialog from "./NewServerDialog";
 
 export default function Servers() {
   const session = useSession();
@@ -45,20 +40,20 @@ export default function Servers() {
   }, [serversQuery, servers]);
 
   return (
-    <div className="w-full">
+    <div className="w-full h-full">
-      <Tabs defaultValue="grid">
+      <Tabs defaultValue="grid" className="h-full">
         <TabsList className="mx-auto mb-5">
           <TabsTrigger value="grid">Grid</TabsTrigger>
           <TabsTrigger value="map">Map</TabsTrigger>
         </TabsList>
-        <TabsContent value="grid" className="flex flex-col gap-5">
+        <TabsContent value="grid" className="flex flex-col gap-5 h-full">
           <Card>
             <CardContent className="flex flex-row gap-3">
               <Input
                 onInput={(e) => setServersQuery(e.currentTarget.value)}
                 placeholder="Search servers by name, location or IP..."
               />
-              <Button onClick={() => {}}>Search</Button>
+              <NewServerDialog session={session} />
             </CardContent>
           </Card>
 

src/components/ui/dialog.tsx

@@ -0,0 +1,143 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}

src/lib/session.ts

@@ -1,4 +1,4 @@
-import Server from "@/types/server";
+import Server, { ServerAPI } from "@/types/server";
 import axios from "axios";
 
 export default class Session {
@@ -21,4 +21,14 @@ export default class Session {
       return [];
     }
   }
+
+  public async addServer(s: ServerAPI) {
+    try {
+      return (
+        ((await axios.post("/api/servers", s)).data.servers as Server[]) || []
+      );
+    } catch {
+      return [];
+    }
+  }
 }

src/types/server.ts

@@ -1,6 +1,7 @@
 export interface ServerAPI {
   name: string;
   ip: string;
+  coordinates?: [number, number];
 }
 
 export default interface Server extends ServerAPI {
@@ -9,5 +10,4 @@ export default interface Server extends ServerAPI {
   memory: number;
   storage: number;
   network: number;
-  coordinates?: [number, number];
 }