add sprinkles to the uncooked doughnut (add styles and theming)

waldowred5 · Jun 7, 2024 · 9b4fd68 · 9b4fd68
1 parent 31e855f
commit 9b4fd68
Show file tree

Hide file tree

Showing 15 changed files with 1,217 additions and 42 deletions.
diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 ### Future Improvements:
 - Caching to reduce API calls (Next.js?)
-- Add Google Maps API for location display
+- Add Google Maps API for location display ([3d Maps](https://developers.google.com/maps/documentation/javascript/3d-maps-getting-started?hl=en))
 
 ### Repo Visualisation
 For more info head to: [Repo Visualizer](https://octo.github.com/projects/repo-visualization)

diff --git a/index.html b/index.html
@@ -1,14 +1,16 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <link href="./output.css" rel="stylesheet">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<head>
+    <meta charset="UTF-8"/>
+    <link rel="icon" type="image/svg+xml" href="/vite.svg"/>
+    <link href="./src/output.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+          rel="stylesheet">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <title>GeoSense</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
+</head>
+<body>
+<div id="root"></div>
+<script type="module" src="/src/main.tsx"></script>
+</body>
 </html>
diff --git a/package.json b/package.json
@@ -15,7 +15,9 @@
     "eslint-plugin-react": "^7.34.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.2.1",
     "repo-visualizer": "^0.0.3",
+    "theme-change": "^2.5.0",
     "zustand": "^4.5.2"
   },
   "devDependencies": {
@@ -24,6 +26,7 @@
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
     "@vitejs/plugin-react": "^4.2.1",
+    "daisyui": "^4.12.2",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,23 +1,20 @@
-import { useGetFeatures } from "./hooks/useFetch.ts";
-import { FeatureSelect } from "./components/FeatureSelect.tsx";
-import { SensorSelect } from "./components/SensorSelect.tsx";
-import { useFeature } from "./store/useFeature.ts";
+import { useEffect } from 'react'
+import { themeChange } from 'theme-change'
+import { Header } from "./components/Header.tsx";
+import { SelectorBar } from "./components/SelectorBar.tsx";
 
 const App = () => {
-  const {
-    data: features,
-    loading: featuresLoading,
-    error: featuresError
-  } = useGetFeatures();
-
-  const { selectedFeature } = useFeature();
+  useEffect(() => {
+    themeChange(false)
+  }, [])
 
   return (
-    <>
-      <h1>BGS Sensors Plotter</h1>
-      <FeatureSelect features={features} loading={featuresLoading} error={featuresError} />
-      { selectedFeature && <SensorSelect /> }
-    </>
+    <div className="flex items-center flex-col gap-3 w-[100vw] h-[100vh]">
+      <Header />
+      <div className="flex w-[96%] h-[94%] mb-8 card shadow-xl border rounded-box bg-base-300">
+        <SelectorBar />
+      </div>
+    </div>
   );
 }
 

diff --git a/src/components/FeatureSelect.tsx b/src/components/FeatureSelect.tsx
@@ -1,4 +1,5 @@
 import { useFeature } from "../store/useFeature.ts";
+import { Select } from "./Select.tsx";
 
 type Feature = {
   '@iot.id': number;
@@ -26,10 +27,7 @@ export const FeatureSelect = ({ features, loading, error }: IFeatureSelectProps)
   const { selectedFeature, updateSelectedFeature } = useFeature();
 
   return (
-    <select
-      value={selectedFeature}
-      onChange={(e) => updateSelectedFeature(e.target.value)}
-    >
+    <Select value={selectedFeature} updateValue={updateSelectedFeature} label={'First, select a Feature...'}>
       <option value="">Select a feature...</option>
       {
         features && features.map((feature: any) => (
@@ -38,6 +36,6 @@ export const FeatureSelect = ({ features, loading, error }: IFeatureSelectProps)
           </option>
         ))
       }
-    </select>
+    </Select>
   )
 }
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -0,0 +1,10 @@
+import { ThemeSwitcher } from "./ThemeSwitcher.tsx";
+
+export const Header = () => {
+  return (
+    <div className="flex items-center bg-base-300 justify-between p-4 m-4 w-[96%] shadow-xl border rounded-box">
+      <h1 className="text-3xl font-bold pl-4">BGS Sensors Plotter</h1>
+      <ThemeSwitcher/>
+    </div>
+  )
+}
diff --git a/src/components/Select.tsx b/src/components/Select.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+
+interface ISelectProps {
+  children: React.ReactNode;
+  disabled?: boolean;
+  label?: string;
+  value: string;
+  updateValue: (value: string) => void;
+}
+
+export const Select = ({ children, disabled, label, value, updateValue }: ISelectProps) => {
+  return (
+    <div className="flex flex-col w-full gap-2 items-center">
+      {label ? <label className="label p-0">{label}</label> : null}
+      <select
+        className="flex w-full select select-bordered w-1/2 rounded bg-primary text-primary-content p-2"
+        value={value}
+        onChange={(e) => updateValue(e.target.value)}
+        disabled={disabled || false}
+      >
+        {children}
+      </select>
+    </div>
+  )
+}
diff --git a/src/components/SelectorBar.tsx b/src/components/SelectorBar.tsx
@@ -0,0 +1,26 @@
+import { FeatureSelect } from "./FeatureSelect.tsx";
+import { SensorSelect, sensorSelectLabel } from "./SensorSelect.tsx";
+import { useGetFeatures } from "../hooks/useFetch.ts";
+import { useFeature } from "../store/useFeature.ts";
+import { Select } from "./Select.tsx";
+
+export const SelectorBar = () => {
+  const {
+    data: features,
+    loading: featuresLoading,
+    error: featuresError
+  } = useGetFeatures();
+
+  const { selectedFeature } = useFeature();
+
+  return (
+    <div className="flex w-full p-4 border-b-4 border-accent rounded-t-box gap-[10vw]">
+      <FeatureSelect features={features} loading={featuresLoading} error={featuresError}/>
+      {
+        selectedFeature
+          ? <SensorSelect />
+          : <Select value={''} updateValue={() => {}} label={sensorSelectLabel} disabled></Select>
+      }
+    </div>
+  )
+}
diff --git a/src/components/SensorSelect.tsx b/src/components/SensorSelect.tsx
@@ -1,12 +1,15 @@
 import { useFeature } from "../store/useFeature.ts";
 import { useGetObservations } from "../hooks/useFetch.ts";
 import { useState } from "react";
+import { Select } from "./Select.tsx";
+
+export const sensorSelectLabel = '...then select a Sensor';
 
 export const SensorSelect = () => {
   const { selectedFeature } = useFeature();
   const [selectedSensor, setSelectedSensor] = useState<string>('');
 
-  const sensors = useGetObservations(selectedFeature)
+  const sensors = useGetObservations(selectedFeature);
 
   if (sensors.error) {
     console.error('Error loading sensors:', sensors.error);
@@ -16,17 +19,14 @@ export const SensorSelect = () => {
   if (sensors.loading) {
     // TODO: Add loading spinner with 200ms delay to avoid quick load flickering
     return (
-      <select>
+      <Select value={''} updateValue={() => {}} disabled label={sensorSelectLabel}>
         <option>Loading sensors...</option>
-      </select>
+      </Select>
     )
   }
 
   return (
-    <select
-      value={selectedSensor}
-      onChange={(e) => setSelectedSensor(e.target.value)}
-    >
+    <Select value={selectedSensor} updateValue={setSelectedSensor} label={sensorSelectLabel}>
       <option value="">Select a sensor...</option>
       {
         sensors.data && sensors.data.map((sensor: any) => (
@@ -35,6 +35,6 @@ export const SensorSelect = () => {
           </option>
         ))
       }
-    </select>
+    </Select>
   )
 }
diff --git a/src/components/ThemeSwitcher.tsx b/src/components/ThemeSwitcher.tsx
@@ -0,0 +1,16 @@
+import { LuMoonStar } from "react-icons/lu";
+import { FiSun } from "react-icons/fi";
+
+export const ThemeSwitcher = () => {
+  return (
+    <div className="flex space-x-0.5">
+      <button className="btn btn-ghost text-2xl" data-set-theme="synthwave" data-act-class="ACTIVECLASS">
+        <LuMoonStar  />
+      </button>
+      <div className="divider divider-horizontal divider-accent"></div>
+      <button className="btn btn-ghost text-2xl" data-set-theme="light" data-act-class="ACTIVECLASS">
+        <FiSun />
+      </button>
+    </div>
+  )
+}
diff --git a/src/index.css b/src/index.css
@@ -1,3 +1,14 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+body {
+    font-family: 'Kanit', sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+* {
+    @apply transition duration-[0.03s];
+    box-sizing: border-box;
+}