added components

2023-04-02 17:44:54 +02:00 · 2023-04-02 17:44:54 +02:00 · 5ba5d9f5bb
parent b42e9cc1d5
commit 5ba5d9f5bb
7 changed files with 247 additions and 101 deletions
--- a/prisma/migrations/20230402154437_added_manuacturer_and_devicetype/migration.sql
+++ b/prisma/migrations/20230402154437_added_manuacturer_and_devicetype/migration.sql
@ -0,0 +1,85 @@
+-- CreateTable
+CREATE TABLE "Example" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" DATETIME NOT NULL
+);
+
+-- CreateTable
+CREATE TABLE "Account" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "userId" TEXT NOT NULL,
+    "type" TEXT NOT NULL,
+    "provider" TEXT NOT NULL,
+    "providerAccountId" TEXT NOT NULL,
+    "refresh_token" TEXT,
+    "access_token" TEXT,
+    "expires_at" INTEGER,
+    "token_type" TEXT,
+    "scope" TEXT,
+    "id_token" TEXT,
+    "session_state" TEXT,
+    CONSTRAINT "Account_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User" ("id") ON DELETE CASCADE ON UPDATE CASCADE
+);
+
+-- CreateTable
+CREATE TABLE "Session" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "sessionToken" TEXT NOT NULL,
+    "userId" TEXT NOT NULL,
+    "expires" DATETIME NOT NULL,
+    CONSTRAINT "Session_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User" ("id") ON DELETE CASCADE ON UPDATE CASCADE
+);
+
+-- CreateTable
+CREATE TABLE "User" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "name" TEXT,
+    "email" TEXT,
+    "emailVerified" DATETIME,
+    "image" TEXT
+);
+
+-- CreateTable
+CREATE TABLE "VerificationToken" (
+    "identifier" TEXT NOT NULL,
+    "token" TEXT NOT NULL,
+    "expires" DATETIME NOT NULL
+);
+
+-- CreateTable
+CREATE TABLE "Manufacturer" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "name" TEXT NOT NULL
+);
+
+-- CreateTable
+CREATE TABLE "DeviceTypes" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "name" TEXT NOT NULL,
+    "manufacturerId" TEXT NOT NULL,
+    CONSTRAINT "DeviceTypes_manufacturerId_fkey" FOREIGN KEY ("manufacturerId") REFERENCES "Manufacturer" ("id") ON DELETE RESTRICT ON UPDATE CASCADE
+);
+
+-- CreateTable
+CREATE TABLE "Device" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "name" TEXT NOT NULL,
+    "deviceTypeId" TEXT NOT NULL,
+    CONSTRAINT "Device_deviceTypeId_fkey" FOREIGN KEY ("deviceTypeId") REFERENCES "DeviceTypes" ("id") ON DELETE RESTRICT ON UPDATE CASCADE
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Account_provider_providerAccountId_key" ON "Account"("provider", "providerAccountId");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Session_sessionToken_key" ON "Session"("sessionToken");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "User_email_key" ON "User"("email");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "VerificationToken_token_key" ON "VerificationToken"("token");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "VerificationToken_identifier_token_key" ON "VerificationToken"("identifier", "token");
--- a/prisma/migrations/migration_lock.toml
+++ b/prisma/migrations/migration_lock.toml
@ -0,0 +1,3 @@
+# Please do not edit this file manually
+# It should be added in your version-control system (i.e. Git)
+provider = "sqlite"
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@ -65,7 +65,23 @@ model VerificationToken {
    @@unique([identifier, token])
 }

+model Manufacturer {
+    id        String   @id @default(cuid())
+    name      String
+    deviceTypes DeviceTypes[]
+}
+
+model DeviceTypes {
+    id        String   @id @default(cuid())
+    name      String
+    manufacturerId String
+    manufacturer Manufacturer @relation(fields: [manufacturerId], references: [id])
+    devices Device[]
+}
+
 model Device {
    id        String   @id @default(cuid())
    name      String
+    deviceTypeId String
+    deviceType DeviceTypes @relation(fields: [deviceTypeId], references: [id])
 }
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@ -0,0 +1,27 @@
+import { signIn, signOut } from "next-auth/react";
+
+const Navbar: React.FC = (props) => {
+    const sessionData = props.sessionData 
+    return (
+        <div className="flex flex-row items-center justify-between w-full p-2">
+            <div className="flex flex-row items-center gap-4">
+                <img/>
+                <h1 className="text-2xl font-bold text-white">HerZ NSOT</h1>
+            </div>
+            <div className="flex flex-row items-center gap-4 h-full">
+                <button className="text-2xl align-text-bottom text-white">Home</button>
+            </div>
+            <div className="flex flex-row items-center gap-4">
+                <img src={sessionData?.user.image} className="rounded-full w-12" />
+                <button
+                    className="rounded-full bg-white/10 px-10 py-3 font-semibold text-white no-underline transition hover:bg-white/20"
+                    onClick={sessionData ? () => void signOut() : () => void signIn()}
+                >
+                    {sessionData ? "Sign out" : "Sign in"}
+                </button>
+            </div>
+        </div>
+    );
+};
+
+export default Navbar
--- a/src/components/nim/device/Devices.tsx
+++ b/src/components/nim/device/Devices.tsx
@ -0,0 +1,65 @@
+import { api } from "~/utils/api"; 
+import { useState } from "react";
+
+
+const Devices: React.FC = (props) => {
+    const sessionData = props.sessionData
+    const [newDevice, setNewDevice] = useState("");
+    const addDevice = api.device.addDevice.useMutation();
+    const device = api.device.getAll.useQuery();
+  
+  
+    
+  
+    return (
+      <div className="flex flex-col items-center justify-center gap-4">
+        <p className="text-center text-2xl text-white">
+        </p>
+        <h2 className="py-4 text-2xl font-bold text-white">
+          Devices
+        </h2>
+        <div className="flex flex-col items-center justify-center gap-4">
+          {
+            !device.data ? "Loading tRPC query..."  
+            : 
+            device.data.map((device) => (
+              <div className="flex flex-col items-center justify-center gap-4">
+                <p className="text-xl font-bold text-white">{device.name}</p>
+              </div>
+            ))
+          }
+        </div>
+        <div className="flex flex-col items-center justify-center gap-4">
+          <h2 className="py-4 text-2xl font-bold text-white">Create Device</h2>
+          <form
+            className="flex gap-2"
+            onSubmit={(event) => {
+              event.preventDefault();
+              addDevice.mutate({
+                name: newDevice
+              });
+              setNewDevice("");
+            }}
+          >
+            <input
+              type="text"
+              className="rounded-md border-2 border-zinc-800 bg-neutral-900 px-4 py-2 focus:outline-none"
+              placeholder="Your message..."
+              minLength={2}
+              maxLength={100}
+              value={newDevice}
+              onChange={(event) => setNewDevice(event.target.value)}
+            />
+            <button
+              type="submit"
+              className="rounded-md border-2 border-zinc-800 p-2 focus:outline-none"
+            >
+              Submit
+            </button>
+          </form>
+        </div>
+      </div>
+    );
+  };
+
+export default Devices;
--- a/src/pages/dev.tsx
+++ b/src/pages/dev.tsx
@ -1,120 +1,35 @@
 import { type NextPage } from "next";
 import Head from "next/head";
 import Link from "next/link";
-import { signIn, signOut, useSession } from "next-auth/react";
-import { useState } from "react";
-import { api } from "~/utils/api";
+import {  useSession } from "next-auth/react";
+
+
+import Navbar from "~/components/Navbar";
+import Devices from "~/components/nim/device/Devices";

 const Home: NextPage = () => {
-  const hello = api.example.hello.useQuery({ text: "from tRPC" });
-  
+  const { data: sessionData } = useSession();

  return (
    <>
-      <Head>
-        <title>Create T3 App</title>
+      <Head> 
+        <title>Dev Page</title>
        <meta name="description" content="Generated by create-t3-app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main className="flex min-h-screen flex-col items-center bg-gradient-to-b from-[#2e026d] to-[#15162c]">
+        {!sessionData 
+          ? <Navbar />
+          : <Navbar sessionData={sessionData}/>
+        }
+        {sessionData ? <Devices/>: <></>}
        <div className="container flex flex-col items-center py-3 gap-6 ">
-          <Navbar/>
-          <AuthShowcase/>
+          
+          
        </div>
      </main>
    </>
  );
 };

-export default Home;
-
-const AuthShowcase: React.FC = () => {
-  const [newDevice, setNewDevice] = useState("");
-  const addDevice = api.device.addDevice.useMutation();
-  const device = api.device.getAll.useQuery();
-
-  const { data: sessionData } = useSession();
-
-  const { data: secretMessage } = api.example.getSecretMessage.useQuery(
-    undefined, // no input
-    { enabled: sessionData?.user !== undefined },
-  );
-
-  
-
-  return (
-    <div className="flex flex-col items-center justify-center gap-4">
-      <p className="text-center text-2xl text-white">
-        {sessionData && <span>Logged in as {sessionData.user?.name}</span>}
-        {secretMessage && <span> - {secretMessage}</span>}
-      </p>
-      <h2 className="py-4 text-2xl font-bold text-white">
-        Devices
-      </h2>
-      <div className="flex flex-col items-center justify-center gap-4">
-        {
-          !device.data ? "Loading tRPC query..."  
-          : 
-          device.data.map((device) => (
-            <div className="flex flex-col items-center justify-center gap-4">
-              <p className="text-xl font-bold text-white">{device.name}</p>
-            </div>
-          ))
-        }
-      </div>
-      <div className="flex flex-col items-center justify-center gap-4">
-        <h2 className="py-4 text-2xl font-bold text-white">Create Device</h2>
-        <form
-          className="flex gap-2"
-          onSubmit={(event) => {
-            event.preventDefault();
-            addDevice.mutate({
-              name: newDevice
-            });
-            setNewDevice("");
-          }}
-        >
-          <input
-            type="text"
-            className="rounded-md border-2 border-zinc-800 bg-neutral-900 px-4 py-2 focus:outline-none"
-            placeholder="Your message..."
-            minLength={2}
-            maxLength={100}
-            value={newDevice}
-            onChange={(event) => setNewDevice(event.target.value)}
-          />
-          <button
-            type="submit"
-            className="rounded-md border-2 border-zinc-800 p-2 focus:outline-none"
-          >
-            Submit
-          </button>
-        </form>
-      </div>
-    </div>
-  );
-};
-
-
-const Navbar: React.FC = () => {
-  const { data: sessionData } = useSession();
-  return (
-    <div className="flex flex-row items-center justify-between w-full">
-      <div className="flex flex-row items-center gap-4">
-        <img/>
-        <h1 className="text-2xl font-bold text-white">HerZ NSOT</h1>
-      </div>
-      <div className="flex flex-row items-center gap-4">
-        <button className="text-white">Home</button>
-      </div>
-      <div className="flex flex-row items-center gap-4">
-        <button
-          className="rounded-full bg-white/10 px-10 py-3 font-semibold text-white no-underline transition hover:bg-white/20"
-          onClick={sessionData ? () => void signOut() : () => void signIn()}
-        >
-          {sessionData ? "Sign out" : "Sign in"}
-        </button>
-      </div>
-    </div>
-  );
-}
+export default Home;
--- a/src/pages/nim/manufacturer/index.tsx
+++ b/src/pages/nim/manufacturer/index.tsx
@ -0,0 +1,35 @@
+import { type NextPage } from "next";
+import Head from "next/head";
+import Link from "next/link";
+import {  useSession } from "next-auth/react";
+
+
+import Navbar from "~/components/Navbar";
+import Devices from "~/components/nim/device/Devices";
+
+const Home: NextPage = () => {
+  const { data: sessionData } = useSession();
+
+  return (
+    <>
+      <Head> 
+        <title>Manufacturer</title>
+        <meta name="description" content="Generated by create-t3-app" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <main className="flex min-h-screen flex-col items-center bg-gradient-to-b from-[#2e026d] to-[#15162c]">
+        {!sessionData 
+          ? <Navbar />
+          : <Navbar sessionData={sessionData}/>
+        }
+        {sessionData ? <Devices/>: <></>}
+        <div className="container flex flex-col items-center py-3 gap-6 ">
+          
+          
+        </div>
+      </main>
+    </>
+  );
+};
+
+export default Home;