Display more fields

codeforbielefeld · Aug 7, 2023 · f8b5aee · f8b5aee
1 parent 6536d57
commit f8b5aee
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 9 deletions.
diff --git a/src/components/SensorTooltip/index.tsx b/src/components/SensorTooltip/index.tsx
@@ -25,6 +25,12 @@ const styles = mergeStyleSets({
             fontWeight: FontWeights.semilight,
         },
     ],
+    footer: [
+        {
+            margin: 0,
+            marginTop: "10px",
+        },
+    ],
     link: [
         theme.fonts.medium,
         {
@@ -34,17 +40,62 @@ const styles = mergeStyleSets({
 });
 
 const SensorTooltip = ({ record }: { record: SensorInfo }) => {
+    const format = (n: number) =>
+        new Intl.NumberFormat("de-DE", {
+            maximumFractionDigits: 2,
+        }).format(n);
     return (
         <>
             <div className={styles.header}>
                 <Text className={styles.title}>
-                    Feuchte: {Number(record.soil_moisture).toFixed(2)} %
+                    Bodenfeuchte {format(record.soil_moisture)} %
                 </Text>
             </div>
             <div className={styles.inner}>
-                <Text className={styles.subtext}>
-                    Letzte Aktualisierung: {record.timestamp.toLocaleString()}
-                </Text>
+                <table>
+                    <tbody>
+                        {record.soil_temperature != null && (
+                            <tr>
+                                <td>
+                                    <Text>Bodentemperatur</Text>
+                                </td>
+                                <td>
+                                    <Text>
+                                        {format(record.soil_temperature)} °C
+                                    </Text>
+                                </td>
+                            </tr>
+                        )}
+                        {record.soil_conductivity != null && (
+                            <tr>
+                                <td>
+                                    <Text>Leitfähigkeit</Text>
+                                </td>
+                                <td>
+                                    <Text>
+                                        {format(record.soil_conductivity)} μS/cm
+                                    </Text>
+                                </td>
+                            </tr>
+                        )}
+                        {record.battery != null && (
+                            <tr>
+                                <td>
+                                    <Text>Batteriespannung</Text>
+                                </td>
+                                <td>
+                                    <Text>{format(record.battery)} V</Text>
+                                </td>
+                            </tr>
+                        )}
+                    </tbody>
+                </table>
+                <div className={styles.footer}>
+                    <Text className={styles.subtext}>
+                        Letzte Aktualisierung:{" "}
+                        {record.last_updated.toLocaleString()}
+                    </Text>
+                </div>
             </div>
         </>
     );

diff --git a/src/hooks/useMoistureData.ts b/src/hooks/useMoistureData.ts
@@ -14,17 +14,21 @@ const MOCK_DATA: MoistureDataDto = {
             altitude: 0,
             soil_moisture: 13.37,
             device: "mock",
+            last_update: "1970-01-01 00:00:00",
         },
     ],
 };
 
 function processData(data: MoistureDataDto): MoistureData {
-    const timestamp = new Date(
-        /\+|Z/i.test(data.timestamp) ? data.timestamp : data.timestamp + "Z"
-    );
+    function toDate(timestamp: string): Date {
+        return new Date(/\+|Z/i.test(timestamp) ? timestamp : timestamp + "Z");
+    }
+    const timestamp = toDate(data.timestamp);
     return {
         records: data.records.map((record) => {
-            return { ...record, timestamp };
+            const last_updated = toDate(record.last_update);
+            console.log(record.last_update);
+            return { ...record, last_updated };
         }),
         timestamp,
     };

diff --git a/src/model/models.ts b/src/model/models.ts
@@ -4,6 +4,10 @@ export interface SensorInfoDto {
     latitude: number;
     longitude: number;
     soil_moisture: number;
+    soil_temperature?: number;
+    soil_conductivity?: number;
+    battery?: number;
+    last_update: string;
 }
 export interface MoistureDataDto {
     records: SensorInfoDto[];
@@ -17,7 +21,10 @@ export interface SensorInfo {
     latitude: number;
     longitude: number;
     soil_moisture: number;
-    timestamp: Date;
+    soil_temperature?: number;
+    soil_conductivity?: number;
+    battery?: number;
+    last_updated: Date;
 }
 
 export interface MoistureData {