Add/device page

package.json

@@ -20,7 +20,9 @@
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-scroll-area": "^1.0.4",
     "@radix-ui/react-select": "^1.2.2",
+    "@radix-ui/react-slider": "^1.1.2",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-toast": "^1.1.4",
     "@radix-ui/react-toggle": "^1.0.3",
     "autoprefixer": "10.4.15",
@@ -29,11 +31,13 @@
     "eslint": "8.48.0",
     "eslint-config-next": "13.4.19",
     "lucide-react": "^0.274.0",
+    "maplibre-gl": "^3.3.1",
     "next": "13.4.19",
     "postcss": "8.4.29",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.46.1",
+    "react-map-gl": "^7.1.5",
     "swiper": "^10.2.0",
     "tailwind-merge": "^1.14.0",
     "tailwindcss": "3.3.3",

src/app/device/page.tsx

@@ -1,10 +1,67 @@
-import PreviewModal from '@/components/Device/PreviewModal'
+"use client";
+import MapComponent from "@/components/Map/Map";
+import {
+  BeakerIcon,
+  ChartBarIcon,
+  CloudIcon,
+  PauseIcon,
+  PlayIcon,
+  RssIcon,
+  SignalIcon,
+  SunIcon,
+  TruckIcon,
+} from "@heroicons/react/24/outline";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { cx } from "class-variance-authority";
+import { Settings2Icon, SettingsIcon } from "lucide-react";
+import { useState } from "react";
+import { DialogTrigger } from "@radix-ui/react-dialog";
+import SettingsModal from "@/components/Map/Settings";
+import RecordButton from "@/components/Map/RecordButton";
+import MeasurementsOverview from "@/components/Map/MeasurementsOverview";
+import ControlBar from "@/components/Map/ControlBar";
+
 
 export default function Home() {
+  const [recording, setRecording] = useState(false);
+
+  const [data, setData] = useState({
+    temperature: 0,
+    humidity: 0,
+    pm1: 0,
+    pm25: 0,
+    pm4: 0,
+    pm10: 0,
+    accelerationX: 0,
+    accelerationY: 0,
+    accelerationZ: 0,
+    speed: 0,
+  });
+  const toggleRecording = () => {
+    setRecording(!recording);
+  };
+
   return (
-    <div className="flex h-full w-full flex-col">
-      <h1> DEVICE PAGE </h1>
-      <PreviewModal />
+    <div className="h-full w-full">
+      <MapComponent />
+      <div className="flex flex-col">
+        <div className="absolute left-5 top-20">
+          <MeasurementsOverview data={data} />
+        </div>
+        <div className="absolute top-20 right-5 ">
+          <RecordButton recording={recording} />
+        </div>
+        <div className="absolute bottom-20 right-5 ">
+          <ControlBar recording={recording} toggleRecording={toggleRecording} />
+        </div>
+      </div>
+
     </div>
   )
 }

src/app/layout.tsx

@@ -1,10 +1,11 @@
-import { TopBar } from '@/components/ui/TopBar'
-import '../styles/globals.css'
-import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
-import { Navbar } from '@/components/ui/Navbar'
-import { cn } from '@/lib/utils'
-import { Toaster } from '@/components/ui/toaster'
+import { TopBar } from "@/components/ui/TopBar";
+import "../styles/globals.css";
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import { Navbar } from "@/components/ui/Navbar";
+import { cn } from "@/lib/utils";
+import { Toaster } from "@/components/ui/toaster";
+
 
 const inter = Inter({ subsets: ['latin'] })
 
@@ -31,7 +32,7 @@
         <header>
           <TopBar />
         </header>
-        <main className="flex-1 overflow-auto p-4">{children}</main>
+        <main className="flex-1 overflow-auto">{children}</main>
         <nav>
           <Navbar />
         </nav>

src/components/Map/ControlBar.tsx

@@ -0,0 +1,31 @@
+import {
+  BeakerIcon,
+  ChartBarIcon,
+  CloudIcon,
+  PauseIcon,
+  PlayIcon,
+  RssIcon,
+  SignalIcon,
+  SunIcon,
+  TruckIcon,
+} from "@heroicons/react/24/outline";
+import SettingsModal from "./Settings";
+
+export default function ControlBar({
+  recording,
+  toggleRecording,
+}: {
+  recording: boolean;
+  toggleRecording: () => void;
+}) {
+  return (
+    <div className="rounded-lg flex gap-2 flex-col bg-white">
+      {recording ? (
+        <PauseIcon className="h-10 w-10" onClick={() => toggleRecording()} />
+      ) : (
+        <PlayIcon className="h-10 w-10" onClick={() => toggleRecording()} />
+      )}
+      <SettingsModal />
+    </div>
+  );
+}

src/components/Map/Map.tsx

@@ -0,0 +1,20 @@
+"use client";
+import * as React from "react";
+import Map, { Marker } from "react-map-gl/maplibre";
+
+export default function MapComponent() {
+  return (
+    <div className="h-full w-full">
+      {" "}
+      <Map
+        initialViewState={{
+          longitude: 7.629040078544051,
+          latitude: 51.95991276754322,
+          zoom: 14,
+          pitch: 45,
+        }}
+        mapStyle="https://api.maptiler.com/maps/streets/style.json?key=DT8RRRX6sOuzQrcuhKuE"
+      ></Map>
+    </div>
+  );
+}

src/components/Map/MeasurementsOverview.tsx

@@ -0,0 +1,37 @@
+import {
+  BeakerIcon,
+  ChartBarIcon,
+  CloudIcon,
+  SignalIcon,
+  SunIcon,
+  TruckIcon,
+} from "@heroicons/react/24/outline";
+
+export default function MeasurementsOverview({ data }: { data: any }) {
+  return (
+    <div className="flex flex-col gap-1 bg-slate-100 rounded-lg opacity-90">
+      <span className="flex">
+        <SunIcon className="h-6 w-6" /> {data.temperature}°C
+      </span>
+      <span className="flex">
+        <BeakerIcon className="h-6 w-6" /> {data.humidity}%
+      </span>
+      <span className="flex">
+        <CloudIcon className="h-6 w-6" /> {data.pm1} / {data.pm25} / {data.pm4}{" "}
+        / {data.pm10} µg/m³
+      </span>
+      <span className="flex">
+        <ChartBarIcon className="h-6 w-6" /> {data.accelerationX} /{" "}
+        {data.accelerationY} / {data.accelerationZ} m/s²
+      </span>
+      <span className="flex">
+        {" "}
+        <TruckIcon className="h-6 w-6" />
+        {data.speed} km/h
+      </span>
+      <span className="flex">
+        <SignalIcon className="h-6 w-6" /> {data.speed}
+      </span>
+    </div>
+  );
+}

src/components/Map/RecordButton.tsx

@@ -0,0 +1,20 @@
+import { cx } from "class-variance-authority";
+
+export default function RecordButton({ recording }: { recording: boolean }) {
+  return (
+    <span className="flex h-6 w-6">
+      <span
+        className={cx(
+          " absolute inline-flex h-full w-full rounded-full  opacity-75",
+          recording ? "animate-ping bg-green-500" : "bg-red-500",
+        )}
+      ></span>
+      <span
+        className={cx(
+          "relative inline-flex rounded-full h-6 w-6 bg-red-500",
+          recording ? "bg-green-500" : "bg-red-500",
+        )}
+      ></span>
+    </span>
+  );
+}

src/components/Map/Settings.tsx

@@ -0,0 +1,122 @@
+"use client";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Settings2Icon, SettingsIcon } from "lucide-react";
+import { useForm } from "react-hook-form";
+import * as z from "zod";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+} from "../ui/form";
+import { Slider } from "../ui/slider";
+import { Switch } from "../ui/switch";
+import { useSettingsStore } from "@/lib/store/useSettingsStore";
+import { Button } from "../ui/button";
+import { DialogClose } from "@radix-ui/react-dialog";
+
+const formSchema = z.object({
+  uploadInterval: z.number().min(1).max(60),
+  switchUseDeviceGPS: z.boolean(),
+  switchLiveMode: z.boolean(),
+});
+
+export default function SettingsModal() {
+  const uploadInterval = useSettingsStore((state) => state.uploadInterval);
+  const useDeviceGPS = useSettingsStore((state) => state.useDeviceGPS);
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      uploadInterval: uploadInterval,
+      switchUseDeviceGPS: useDeviceGPS,
+      switchLiveMode: false,
+    },
+  });
+
+  const handleSubmit = (values: z.infer<typeof formSchema>) => {
+    useSettingsStore.setState({
+      uploadInterval: values.uploadInterval,
+      useDeviceGPS: values.switchUseDeviceGPS,
+    });
+  };
+
+  return (
+    <Dialog>
+      <DialogTrigger>
+        <SettingsIcon className="h-10 w-10" />
+      </DialogTrigger>
+      <DialogContent className="w-11/12">
+        <DialogHeader>
+          <DialogTitle>Settings</DialogTitle>
+        </DialogHeader>
+        <div className="flex flex-col gap-2 py-4 justify-end">
+          <Form {...form}>
+            <form
+              onSubmit={form.handleSubmit(handleSubmit)}
+              className="space-y-8"
+            >
+              <div>
+                <div className="space-y-4">
+                  <FormField
+                    name="uploadInterval"
+                    control={form.control}
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Upload Interval</FormLabel>
+                        <FormDescription>
+                          Upload Interval (in Sekunden) bestimmen
+                        </FormDescription>
+                        <FormControl>
+                          <Slider
+                            onValueChange={(e) => field.onChange(e[0])}
+                            defaultValue={[field.value]}
+                            min={1}
+                            max={60}
+                          />
+                        </FormControl>
+                      </FormItem>
+                    )}
+                  />
+                  <FormField
+                    name="switchUseDeviceGPS"
+                    control={form.control}
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Use Device GPS</FormLabel>
+                        <FormDescription>
+                          {" "}
+                          Das GPS vom Smartphone benutzen oder von der
+                          senseBox:bike
+                        </FormDescription>
+                        <FormControl>
+                          <Switch
+                            checked={field.value}
+                            onCheckedChange={field.onChange}
+                          />
+                        </FormControl>
+                      </FormItem>
+                    )}
+                  />
+                </div>
+              </div>
+              <DialogClose className="float-right">
+                <Button type="submit">Speichern</Button>
+              </DialogClose>
+            </form>
+          </Form>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/components/Wizard/SelectDevice.tsx

@@ -1,4 +1,4 @@
 import { useAuthStore } from '@/lib/store/useAuthStore'
 import {
   Select,
   SelectContent,
@@ -16,13 +16,13 @@
 export default function SelectDevice() {
   const boxes = useAuthStore(state => state.boxes)
 
-  const swiper = useSwiper()
-  const [selectedBox, setSelectedBox] = useState('')
-  const selectBox = box => {
-    setSelectedBox(box)
-    console.log(box)
-    useAuthStore.setState({ selectedBox: box })
-  }
+  const swiper = useSwiper();
+  const [selectedBox, setSelectedBox] = useState("");
+  const selectBox = (box: string) => {
+    setSelectedBox(box);
+    useAuthStore.setState({ selectedBox: box });
+  };
+
 
   return (
     <div className="flex h-full w-full flex-col items-center justify-center gap-4">