From d40b37be574ecb1cef883f805eec1598355a5909 Mon Sep 17 00:00:00 2001 From: fbruc03 <65135023+fbruc03@users.noreply.github.com> Date: Tue, 23 May 2023 21:34:47 +0700 Subject: [PATCH 1/8] update `@prisma/client@latest` --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index b29eee48a..aab4a96e7 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,7 @@ "@directus/sdk": "^10.3.3", "@heroicons/react": "^2.0.15", "@mantine/hooks": "^6.0.8", - "@prisma/client": "^4.9.0", + "@prisma/client": "^4.14.1", "@radix-ui/react-dialog": "^1.0.2", "@radix-ui/react-navigation-menu": "^1.1.1", "@radix-ui/react-toast": "^1.1.3", From 103377bfc02a244d812f34f42c0fb8aeae95215d Mon Sep 17 00:00:00 2001 From: fbruc03 <65135023+fbruc03@users.noreply.github.com> Date: Tue, 23 May 2023 21:42:04 +0700 Subject: [PATCH 2/8] undo prisma version change --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index aab4a96e7..0a2d9d452 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,7 @@ "@directus/sdk": "^10.3.3", "@heroicons/react": "^2.0.15", "@mantine/hooks": "^6.0.8", - "@prisma/client": "^4.14.1", + "@prisma/client": "^4.14.0", "@radix-ui/react-dialog": "^1.0.2", "@radix-ui/react-navigation-menu": "^1.1.1", "@radix-ui/react-toast": "^1.1.3", From 2bacebe4edb06df72f2dddce1fb4e736cdc3bb18 Mon Sep 17 00:00:00 2001 From: fbruc03 <65135023+fbruc03@users.noreply.github.com> Date: Wed, 24 May 2023 11:47:06 +0700 Subject: [PATCH 3/8] add loading spinner --- app/components/bottomBar/BottomBar.tsx | 225 ++++++++++++++----------- 1 file changed, 126 insertions(+), 99 deletions(-) diff --git a/app/components/bottomBar/BottomBar.tsx b/app/components/bottomBar/BottomBar.tsx index 9b1a9a235..c37978c9a 100644 --- a/app/components/bottomBar/BottomBar.tsx +++ b/app/components/bottomBar/BottomBar.tsx @@ -4,7 +4,13 @@ import { MinusCircleIcon, ChevronDoubleUpIcon, } from "@heroicons/react/24/solid"; -import { Form, Link, useSearchParams, useSubmit } from "@remix-run/react"; +import { + Form, + Link, + useNavigation, + useSearchParams, + useSubmit, +} from "@remix-run/react"; import Graph from "./Graph"; import * as ToastPrimitive from "@radix-ui/react-toast"; import { clsx } from "clsx"; @@ -22,6 +28,7 @@ export interface DeviceAndSelectedSensors { } export default function BottomBar(data: DeviceAndSelectedSensors) { + const navigation = useNavigation(); // state variables const [isOpen, setIsOpen] = useState(true); const [searchParams] = useSearchParams(); @@ -92,114 +99,134 @@ export default function BottomBar(data: DeviceAndSelectedSensors) { -
{ - submit(e.currentTarget); - }} - > -
-
- {data.device.sensors.map((sensor: Sensor) => { - // dont really know why this is necessary - some kind of TypeScript/i18n bug? - const lastMeasurement = - sensor.lastMeasurement as Prisma.JsonObject; - const value = lastMeasurement.value as string; - return ( -
{ - if ( - !sensorIds.includes(sensor.id) && - searchParams.getAll("sensor").length >= 2 - ) { - if (toastOpen) { - setToastOpen(false); - setTimeout(() => { - setToastOpen(true); - }, 300); - } else { - setToastOpen(true); - } - } - }} - > -
(); @@ -37,7 +37,7 @@ export default function Graph(data: any) { (measurement: LastMeasurementProps) => measurement.createdAt ), datasets: - loaderData.selectedSensors.length === 2 + loaderData.selectedSensors.length === 2 ? [ { label: loaderData.selectedSensors[0].title, @@ -68,7 +68,7 @@ export default function Graph(data: any) { ], }; - const options: ChartOptions = { + const options: ChartOptions<"line"> = { maintainAspectRatio: false, interaction: { mode: "index", @@ -97,7 +97,10 @@ export default function Graph(data: any) { y: { title: { display: true, - text: loaderData.selectedSensors[0].title + " in " + loaderData.selectedSensors[0].unit, + text: + loaderData.selectedSensors[0].title + + " in " + + loaderData.selectedSensors[0].unit, }, type: "linear", display: true, @@ -107,13 +110,14 @@ export default function Graph(data: any) { title: { display: true, text: loaderData.selectedSensors[1] - ? loaderData.selectedSensors[1].title + " in " + loaderData.selectedSensors[1].unit + ? loaderData.selectedSensors[1].title + + " in " + + loaderData.selectedSensors[1].unit : "", //data.sensors[1].unit }, type: "linear", display: "auto", position: "right", - // grid line settings grid: { drawOnChartArea: false, // only want the grid lines for one axis to show up @@ -123,11 +127,9 @@ export default function Graph(data: any) { }; return ( -
+
{loaderData.selectedSensors.length > 0 ? (
- {/* -// @ts-ignore */}
) : null} From 985029f9279283caf4d3f921cb0671cfa1fb5845 Mon Sep 17 00:00:00 2001 From: fbruc03 Date: Fri, 26 May 2023 13:49:37 +0700 Subject: [PATCH 6/8] add lost laoding spinner after dev merge --- app/components/bottom-bar/bottom-bar.tsx | 213 +++++++++++++---------- 1 file changed, 118 insertions(+), 95 deletions(-) diff --git a/app/components/bottom-bar/bottom-bar.tsx b/app/components/bottom-bar/bottom-bar.tsx index b58fd79df..37918954e 100644 --- a/app/components/bottom-bar/bottom-bar.tsx +++ b/app/components/bottom-bar/bottom-bar.tsx @@ -4,7 +4,7 @@ import { MinusCircleIcon, ChevronDoubleUpIcon, } from "@heroicons/react/24/solid"; -import { Form, Link, useSearchParams, useSubmit } from "@remix-run/react"; +import { Form, Link, useNavigation, useSearchParams, useSubmit } from "@remix-run/react"; import Graph from "./graph"; import * as ToastPrimitive from "@radix-ui/react-toast"; import { clsx } from "clsx"; @@ -22,6 +22,7 @@ export interface DeviceAndSelectedSensors { } export default function BottomBar(data: DeviceAndSelectedSensors) { + const navigation = useNavigation(); // state variables const [isOpen, setIsOpen] = useState(true); const [searchParams] = useSearchParams(); @@ -92,110 +93,132 @@ export default function BottomBar(data: DeviceAndSelectedSensors) {
-
{ - submit(e.currentTarget); - }} - > -
-
- {data.device.sensors.map((sensor: Sensor) => { - // dont really know why this is necessary - some kind of TypeScript/i18n bug? - const lastMeasurement = - sensor.lastMeasurement as Prisma.JsonObject; - const value = lastMeasurement.value as string; - return ( -
{ - if ( - !sensorIds.includes(sensor.id) && - searchParams.getAll("sensor").length >= 2 - ) { - if (toastOpen) { - setToastOpen(false); - setTimeout(() => { - setToastOpen(true); - }, 300); - } else { - setToastOpen(true); - } - } - }} - > -
+
+ + + + + + + + +
+ + ); +} From de12f4d753ffa6b660fea873969d900200e92d79 Mon Sep 17 00:00:00 2001 From: fbruc03 Date: Tue, 30 May 2023 16:55:22 +0700 Subject: [PATCH 8/8] resolve ESLint warning --- app/components/bottom-bar/bottom-bar.tsx | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/app/components/bottom-bar/bottom-bar.tsx b/app/components/bottom-bar/bottom-bar.tsx index 875ff1c9d..4e75e67b0 100644 --- a/app/components/bottom-bar/bottom-bar.tsx +++ b/app/components/bottom-bar/bottom-bar.tsx @@ -42,19 +42,19 @@ export default function BottomBar(data: DeviceAndSelectedSensors) { const sensorIds = searchParams.getAll("sensor"); // helper function to filter an array of sensors by their ids - function filterSensorsById( - idArray: string[], - objectArray: Sensor[] - ): Sensor[] { - const filteredArray: Sensor[] = []; + // function filterSensorsById( + // idArray: string[], + // objectArray: Sensor[] + // ): Sensor[] { + // const filteredArray: Sensor[] = []; - for (const obj of objectArray) { - if (idArray.includes(obj.id)) { - filteredArray.push(obj); - } - } - return filteredArray; - } + // for (const obj of objectArray) { + // if (idArray.includes(obj.id)) { + // filteredArray.push(obj); + // } + // } + // return filteredArray; + // } // helper function to format a date as a string const formattedDate = (date: Date) => {