Add support for component settings and dashboard settings

src/assets/DefaultBaseMaps.json

@@ -0,0 +1,17 @@
+{
+  "automatic": {
+    "id": "automatic",
+    "name": "Automatic",
+    "style": "automatic"
+  },
+  "light": {
+    "id": "carto-db-light",
+    "name": "CartoDB (light)",
+    "style": "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
+  },
+  "dark": {
+    "id": "carto-dark-matter",
+    "name": "CartoDB (dark)",
+    "style": "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json"
+  }
+}

src/assets/DefaultUserSettings.json

@@ -82,27 +82,6 @@
     ],
     "group": "UI"
   },
-  {
-    "id": "ui.map.theme",
-    "type": "oneOfMultiple",
-    "label": "Basemap",
-    "value": "carto-db-automatic",
-    "items": [
-      {
-        "value": "carto-db-automatic",
-        "icon": "mdi-theme-light-dark"
-      },
-      {
-        "value": "carto-db-light",
-        "icon": "mdi-weather-sunny"
-      },
-      {
-        "value": "carto-dark-matter",
-        "icon": "mdi-weather-night"
-      }
-    ],
-    "group": "Map"
-  },
   {
     "id": "ui.map.showLocationNames",
     "type": "boolean",

src/components/general/DashboardDisplay.vue

@@ -1,58 +1,31 @@
 <template>
   <div class="dashboard-container ga-3 pa-3">
-    <template v-for="panel in panelItems">
-      <v-card
-        v-if="panel.component"
-        :style="{ gridArea: panel.id }"
-        class="d-flex flex-column"
-        density="compact"
-      >
-        <component
-          class="overflow-auto"
-          :is="panel.component"
-          v-bind="panel.props"
-          :topologyNode="panel.node"
-        />
-      </v-card>
-      <v-alert
-        v-else
-        :title="`${panel.id} not implemented`"
-        :style="{ gridArea: panel.id }"
-        class="ma-2"
-      />
+    <template v-for="group in groups">
+      <template v-for="element in group.elements">
+        <v-card
+          :style="{ gridArea: element.gridTemplateArea }"
+          class="d-flex flex-column"
+          density="compact"
+        >
+          <DashboardItems :items="element.items" />
+        </v-card>
+      </template>
     </template>
   </div>
 </template>
 
 <script setup lang="ts">
-import { getComponentWithPropsForNode } from '@/lib/topology/dashboard'
-import type { TopologyNode } from '@deltares/fews-pi-requests'
+import type { Dashboard } from '@/lib/dashboard/types'
 import { computed, watch } from 'vue'
-
-interface Dashboard {
-  id: string
-  css: string
-  panels: TopologyNode[]
-}
+import DashboardItems from '@/components/general/DashboardItems.vue'
 
 interface Props {
   dashboard: Dashboard
 }
 
 const props = defineProps<Props>()
 
-const panelItems = computed(() => {
-  return props.dashboard.panels.map((panel) => {
-    const { component, props } = getComponentWithPropsForNode(panel)
-    return {
-      id: panel.id,
-      title: panel.name,
-      node: panel,
-      component,
-      props,
-    }
-  })
-})
+const groups = computed(() => props.dashboard.groups)
 
 function loadCss(url: string) {
   if (!document.querySelector(`link[href="${url}"]`)) {
@@ -71,7 +44,7 @@ function removeCss(url: string) {
 }
 
 watch(
-  () => props.dashboard.css,
+  () => props.dashboard.cssTemplate,
   (newCss, oldCss) => {
     if (oldCss) removeCss(oldCss)
     loadCss(newCss)

src/components/general/DashboardItems.vue

@@ -0,0 +1,87 @@
+<template>
+  <v-tabs
+    v-model="tab"
+    v-if="items.length > 1"
+    bg-color="primary"
+    align-tabs="center"
+    class="flex-0-0 w-100"
+    density="compact"
+  >
+    <v-tab
+      v-for="item in componentItems"
+      :prepend-icon="item.icon"
+      class="text-none"
+    >
+      {{ item.title }}
+    </v-tab>
+  </v-tabs>
+
+  <template v-for="(item, i) in componentItems">
+    <component
+      v-if="tab === i"
+      class="overflow-auto flex-1-1"
+      :is="item.component"
+      v-bind="item.componentProps"
+      :topologyNode="item.topologyNode"
+      :settings="item.settings"
+    />
+  </template>
+</template>
+
+<script setup lang="ts">
+import type { DashboardItem } from '@/lib/dashboard/types'
+import {
+  componentTypeToIconMap,
+  componentTypeToTitleMap,
+} from '@/lib/topology/component'
+import {
+  componentTypeToComponentMap,
+  getComponentPropsForNode,
+} from '@/lib/topology/dashboard'
+import { useComponentSettingsStore } from '@/stores/componentSettings'
+import { useTopologyNodesStore } from '@/stores/topologyNodes'
+import { computed, ref, watch } from 'vue'
+
+interface Props {
+  items: DashboardItem[]
+}
+
+const props = defineProps<Props>()
+
+const tab = ref(0)
+
+const topologyNodesStore = useTopologyNodesStore()
+const componentSettingsStore = useComponentSettingsStore()
+
+function getComponentSettingsForItem(item: DashboardItem) {
+  const settings = componentSettingsStore.getSettingsById(
+    item.componentSettingsId,
+  )
+  return settings?.[item.component]
+}
+
+const componentItems = computed(() => {
+  return props.items.map((item) => {
+    const componentName = item.component
+    const topologyNode = topologyNodesStore.getNodeById(item.topologyNodeId)
+    const component = componentTypeToComponentMap[componentName]
+    const componentProps = getComponentPropsForNode(componentName, topologyNode)
+    const title = topologyNode?.name ?? componentTypeToTitleMap[componentName]
+    const icon = topologyNode?.iconId ?? componentTypeToIconMap[componentName]
+    const settings = getComponentSettingsForItem(item)
+    return {
+      title,
+      icon,
+      component,
+      componentProps,
+      componentName,
+      topologyNode,
+      settings,
+    }
+  })
+})
+
+watch(componentItems, () => {
+  tab.value = 0
+})
+</script>

src/components/map/MapComponent.vue

@@ -26,42 +26,37 @@ import { configManager } from '@/services/application-config'
 import { authenticationManager } from '@/services/authentication/AuthenticationManager'
 import {
   MglAttributionControl,
-  MglDefaults,
   MglMap,
   MglScaleControl,
-  useMap,
 } from '@indoorequal/vue-maplibre-gl'
-import type { ResourceType, RequestParameters, LngLatBounds } from 'maplibre-gl'
-import { useBaseLayers } from '@/services/useBaseLayers'
-import { useUserSettingsStore } from '@/stores/userSettings'
-import { useTemplateRef, watch } from 'vue'
+import type {
+  ResourceType,
+  RequestParameters,
+  LngLatBounds,
+  Map,
+} from 'maplibre-gl'
+import { computed, useTemplateRef, watch } from 'vue'
 import { transformStyle } from '@/lib/map'
+import { useComponentSettingsStore } from '@/stores/componentSettings'
 
 interface Props {
   bounds?: LngLatBounds
+  baseMapId?: string
 }
 
 defineProps<Props>()
 
-const settings = useUserSettingsStore()
-
-MglDefaults.style =
-  'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json'
-
-const { baseLayerStyle } = useBaseLayers(
-  () => settings.get('ui.map.theme')?.value as string | undefined,
-)
-
-const initialStyle = baseLayerStyle.value
-
 const mapRef = useTemplateRef('map')
 
-watch(baseLayerStyle, (newBaseStyle) => {
+const componentSettingsStore = useComponentSettingsStore()
+const selectedStyle = computed(() => componentSettingsStore.selectedStyle)
+const initialStyle = selectedStyle.value
+
+watch(selectedStyle, (newBaseStyle) => {
   if (!newBaseStyle) return
 
-  // NOTE: We have to get mapkey because useMap uses inject and we are not a child of MglMap
-  const mapKey = mapRef.value?.mapKey
-  const map = useMap(mapKey).map
+  // @ts-expect-error map is not exposed in the types
+  const map: Map | undefined = mapRef.value?.map
   map?.setStyle(newBaseStyle, { transformStyle })
 })