Show latest measurements in mobility single record views

noi-techpark · Jan 18, 2024 · 73fd1ff · 73fd1ff
1 parent dff405c
commit 73fd1ff
Show file tree

Hide file tree

Showing 6 changed files with 113 additions and 59 deletions.
diff --git a/databrowser/src/config/mobility/stationTypes/stationTypes.sharedView.ts b/databrowser/src/config/mobility/stationTypes/stationTypes.sharedView.ts
@@ -158,67 +158,24 @@ export const stationTypesSharedView = ():
       slug: 'measurements',
       subcategories: [
         {
-          name: 'Measurement Details',
+          name: 'Measurement',
           properties: [
             {
-              title: 'tdescription',
-              component: CellComponent.StringCell,
-              objectMapping: {
-                text: 'data.0.tdescription',
-              },
-            },
-            {
-              title: 'tname',
-              component: CellComponent.StringCell,
-              objectMapping: {
-                text: 'data.0.tname',
-              },
-            },
-            {
-              title: 'ttype',
-              component: CellComponent.StringCell,
-              objectMapping: {
-                text: 'data.0.ttype',
-              },
-            },
-            {
-              title: 'tunit',
-              component: CellComponent.StringCell,
-              objectMapping: {
-                text: 'data.0.tunit',
-              },
-            },
-            {
-              title: 'tmetadata',
-              component: CellComponent.StringCell,
-              objectMapping: {
-                text: 'data.0.tmetadata',
-              },
-            },
-          ],
-        },
-        {
-          name: 'Values',
-          properties: [
-            {
-              title: 'mvalue',
-              component: CellComponent.StringCell,
-              objectMapping: {
-                text: 'data.0.mvalue',
-              },
-            },
-            {
-              title: 'mvalidtime',
-              component: CellComponent.StringCell,
-              objectMapping: {
-                text: 'data.0.mvalidtime',
-              },
-            },
-            {
-              title: 'mperiod',
-              component: CellComponent.StringCell,
-              objectMapping: {
-                text: 'data.0.mperiod',
+              title: 'Latest',
+              component: CellComponent.MeasurementsCell,
+              arrayMapping: {
+                pathToParent: 'data',
+                targetPropertyName: 'data',
+                objectMapping: {
+                  tdescription: 'tdescription',
+                  tname: 'tname',
+                  ttype: 'ttype',
+                  tunit: 'tunit',
+                  tmetadata: 'tmetadata',
+                  mvalue: 'mvalue',
+                  mvalidtime: 'mvalidtime',
+                  mperiod: 'mperiod',
+                },
               },
             },
           ],

diff --git a/databrowser/src/domain/cellComponents/components/cells/measurementsCell/MeasurementsCell.vue b/databrowser/src/domain/cellComponents/components/cells/measurementsCell/MeasurementsCell.vue
@@ -0,0 +1,21 @@
+<!--
+SPDX-FileCopyrightText: NOI Techpark <digital@noi.bz.it>
+
+SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+  <EditListCell :items="data">
+    <template #table="{ items }">
+      <MeasurementsCellTable :items="items" />
+    </template>
+  </EditListCell>
+</template>
+
+<script setup lang="ts">
+import EditListCell from '../../utils/editList/EditListCell.vue';
+import MeasurementsCellTable from './MeasurementsCellTable.vue';
+import { DataEntry } from './types';
+
+defineProps<{ data?: DataEntry[] | null }>();
+</script>
diff --git a/...ser/src/domain/cellComponents/components/cells/measurementsCell/MeasurementsCellTable.vue b/...ser/src/domain/cellComponents/components/cells/measurementsCell/MeasurementsCellTable.vue
@@ -0,0 +1,59 @@
+<!--
+SPDX-FileCopyrightText: NOI Techpark <digital@noi.bz.it>
+
+SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+  <EditListTable :items="items">
+    <template #colGroup>
+      <col class="w-32 md:w-40" />
+      <col class="w-32 md:w-40" />
+      <col class="w-32 md:w-40" />
+      <col class="w-32 md:w-40" />
+      <col class="w-32 md:w-40" />
+      <col class="w-32 md:w-40" />
+      <col class="w-32 md:w-40" />
+      <col class="w-32 md:w-40" />
+    </template>
+
+    <template #tableHeader>
+      <TableHeaderCell>tdescription</TableHeaderCell>
+      <TableHeaderCell>tname</TableHeaderCell>
+      <TableHeaderCell>ttype</TableHeaderCell>
+      <TableHeaderCell>tunit</TableHeaderCell>
+      <TableHeaderCell>tmetadata</TableHeaderCell>
+      <TableHeaderCell>mvalue</TableHeaderCell>
+      <TableHeaderCell>mvalidtime</TableHeaderCell>
+      <TableHeaderCell>mperiod</TableHeaderCell>
+    </template>
+
+    <template #tableCols="{ item }: { item: DataEntry }">
+      <TableCell>{{ item.tdescription }}</TableCell>
+      <TableCell>{{ item.tname }}</TableCell>
+      <TableCell>{{ item.ttype }}</TableCell>
+      <TableCell>{{ item.tunit }}</TableCell>
+      <TableCell>{{ item.tmetadata }}</TableCell>
+      <TableCell>{{ item.mvalue }}</TableCell>
+      <TableCell>
+        <EditedDateCell
+          :date="item.mvalidtime"
+          :format="DEFAULT_DATE_TIME_FORMAT"
+        />
+      </TableCell>
+      <TableCell>{{ item.mperiod }}</TableCell>
+    </template>
+    <template #noItems>No webcams have been defined yet</template>
+  </EditListTable>
+</template>
+
+<script setup lang="ts">
+import TableCell from '../../../../../components/table/TableCell.vue';
+import TableHeaderCell from '../../../../../components/table/TableHeaderCell.vue';
+import { DEFAULT_DATE_TIME_FORMAT } from '../../../../../config/utils';
+import EditListTable from '../../utils/editList/table/EditListTable.vue';
+import EditedDateCell from '../editedDateCell/EditedDateCell.vue';
+import { DataEntry } from './types';
+
+defineProps<{ items: DataEntry[] }>();
+</script>
diff --git a/databrowser/src/domain/cellComponents/components/cells/measurementsCell/types.ts b/databrowser/src/domain/cellComponents/components/cells/measurementsCell/types.ts
@@ -0,0 +1,14 @@
+// SPDX-FileCopyrightText: NOI Techpark <digital@noi.bz.it>
+//
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+export interface DataEntry {
+  tdescription?: string;
+  tname?: string;
+  ttype?: string;
+  tunit?: string;
+  tmetadata?: string;
+  mvalue?: string;
+  mvalidtime?: string;
+  mperiod?: string;
+}
diff --git a/databrowser/src/domain/cellComponents/plugins/registerCellComponents.ts b/databrowser/src/domain/cellComponents/plugins/registerCellComponents.ts
@@ -29,6 +29,7 @@ import OperationScheduleCell from '../components/cells/operationScheduleCell/Ope
 import JsonCell from '../components/cells/jsonCell/JsonCell.vue';
 import LoadingCell from '../components/cells/loadingCell/LoadingCell.vue';
 import MappingCell from '../components/cells/mappingCell/MappingCell.vue';
+import MeasurementsCell from '../components/cells/measurementsCell/MeasurementsCell.vue';
 import SelectWithOptionsCell from '../components/cells/selectWithOptionsCell/SelectWithOptionsCell.vue';
 import StateCell from '../components/cells/stateCell/StateCell.vue';
 import StringCell from '../components/cells/stringCell/StringCell.vue';
@@ -83,6 +84,7 @@ export default {
     app.component(CellComponent.JsonCell, JsonCell);
     app.component(CellComponent.LoadingCell, LoadingCell);
     app.component(CellComponent.MappingCell, MappingCell);
+    app.component(CellComponent.MeasurementsCell, MeasurementsCell);
     app.component(CellComponent.OperationScheduleCell, OperationScheduleCell);
     app.component(CellComponent.SelectWithOptionsCell, SelectWithOptionsCell);
     app.component(CellComponent.StateCell, StateCell);

diff --git a/databrowser/src/domain/cellComponents/types.ts b/databrowser/src/domain/cellComponents/types.ts
@@ -27,6 +27,7 @@ export enum CellComponent {
   JsonCell = 'JsonCell',
   LoadingCell = 'LoadingCell',
   MappingCell = 'MappingCell',
+  MeasurementsCell = 'MeasurementsCell',
   OperationScheduleCell = 'OperationScheduleCell',
   SelectWithOptionsCell = 'SelectWithOptionsCell',
   StateCell = 'StateCell',