Feat/rwsviewers 49 open up to other data sources

.env.example

@@ -1,2 +1,3 @@
-VUE_APP_MAPBOX_TOKEN=
+DATO_API_TOKEN=
 VUE_APP_API_ENDPOINT=
+VUE_APP_MAPBOX_TOKEN=

.gitignore

@@ -23,4 +23,4 @@ pnpm-debug.log*
 *.sw?
 
 # Generated files
-public/data/**/*.json
+public/datoData/**/*.json

config/dato/_dump-data.mjs

@@ -9,7 +9,7 @@ import queryApi from './_query-api.mjs'
 dotenv.config()
 
 const __dirname = new URL('.', import.meta.url).pathname
-const PUBLIC_DIR = path.join(__dirname, '../..', 'public/data')
+const PUBLIC_DIR = path.join(__dirname, '../..', 'public/datoData')
 
 const readFile = file => fs.readFile(file, { encoding: 'utf-8' })
 
@@ -37,7 +37,7 @@ function fetchDataFromQueryFile(variables = {}) {
     }
 
     return readFile(queryFile)
-      .then(query => 
+      .then(query =>
           queryApi(process.env.DATO_API_TOKEN, variables)(query)
             .catch((error) => {
               console.log(error)

functions/bob-viewer.js

@@ -0,0 +1,46 @@
+const data = {
+  'id': '0001',
+  'name': 'The Bob Viewer',
+  'metadata': [],
+  'children': [
+    {
+      'id': '0002',
+      'name': 'Aangewezen windenergiegebied NWP',
+      'url': 'https://geoservices.rijkswaterstaat.nl/apps/geoserver/windenergiegebieden/wms',
+      'layer': 'windenergiegebieden:aangewezen_windenergiegebieden__nwp_II_',
+      'downloadUrl': '',
+      'downloadLayer': '',
+      'tags': [
+        'Gebruik',
+      ],
+      'metadata': [],
+    },
+    {
+      'id': '0003',
+      'name': 'Reguliere monitoring WMR',
+      'metadata': [],
+      'children': [
+        {
+          'id': '85222925',
+          'name': 'Zeehonden',
+          'url': 'https://opengeodata.wmr.wur.nl/geoserver/IHM/wms',
+          'layer': 'ZH_All_OD_Geo_view',
+          'downloadUrl': 'https://opengeodata.wmr.wur.nl/geoserver/IHM/wfs',
+          'downloadLayer': '',
+          'tags': [
+            'Zoogdieren',
+            'Noordzee',
+          ],
+          'metadata': [],
+        },
+      ],
+    },
+  ],
+}
+
+exports.handler = async function() {
+  return {
+    statusCode: 200,
+    body: JSON.stringify(data),
+  }
+}

netlify.toml

@@ -6,3 +6,6 @@
   from = "/*"
   to = "/index.html"
   status = 200
+
+[functions]
+  directory = 'functions'

public/data/some-other-viewer.json

@@ -0,0 +1,39 @@
+{
+  "id": "0001",
+  "name": "Some other Viewer",
+  "metadata": [],
+  "children": [
+    {
+      "id": "0002",
+      "name": "Aangewezen windenergiegebied NWP",
+      "url": "https://geoservices.rijkswaterstaat.nl/apps/geoserver/windenergiegebieden/wms",
+      "layer": "windenergiegebieden:aangewezen_windenergiegebieden__nwp_II_",
+      "downloadUrl": "",
+      "downloadLayer": "",
+      "tags": [
+        "Gebruik"
+      ],
+      "metadata": []
+    },
+    {
+      "id": "0003",
+      "name": "Reguliere monitoring WMR",
+      "metadata": [],
+      "children": [
+        {
+          "id": "85222925",
+          "name": "Zeehonden",
+          "url": "https://opengeodata.wmr.wur.nl/geoserver/IHM/wms",
+          "layer": "ZH_All_OD_Geo_view",
+          "downloadUrl": "https://opengeodata.wmr.wur.nl/geoserver/IHM/wfs",
+          "downloadLayer": "",
+          "tags": [
+            "Zoogdieren",
+            "Noordzee"
+          ],
+          "metadata": []
+        }
+      ]
+    }
+  ]
+}

src/components/AppSidebar/AppSidebar.vue

@@ -16,7 +16,7 @@
       <template v-for="tab in tabs">
         <v-tab
           :key="tab.name"
-          :to="`/${viewerConfig}${tab.page}`"
+          :to="`/${ viewerConfigNames }${ tab.page }`"
           :ripple="false"
           exact-path
         >
@@ -50,7 +50,7 @@
       ],
     }),
     computed: {
-      ...mapGetters('app', [ 'appNavigationOpen', 'appNavigationWidth', 'viewerConfig' ]),
+      ...mapGetters('app', [ 'appNavigationOpen', 'appNavigationWidth', 'viewerConfigNames' ]),
     },
   }
 </script>

src/lib/constants.js

@@ -1,6 +1,33 @@
-export const VALID_VIEWER_CONFIGS = require('../../public/data/available-configs.json')
+const DATO_VIEWER_CONFIGS = require('../../public/datoData/available-configs.json')
+  .map(name => ({ name, source: 'dato' }))
 
-export const CATEGORIES = require('../../public/data/app.json').categories
+const OTHER_VIEWER_CONFIGS = [
+  {
+    name: 'some-other-viewer',
+    source: 'file',
+    path: '/data/some-other-viewer.json',
+    // SUGGESTION FOR PER-VIEWER APP CONFIG
+    // initialMap: {
+    //   zoom: 5,
+    //   center: [ dsnmakvms, damskmfds ],
+    // },
+    // categories: [
+    //   'biota',
+    //   'chemie',
+    //   'fysisch',
+    //   'gebruik',
+    // ],
+  },
+  {
+    name: 'bob-viewer',
+    source: 'api',
+    path: '/.netlify/functions/bob-viewer',
+  },
+]
+
+export const VALID_VIEWER_CONFIGS = [ ...DATO_VIEWER_CONFIGS, ...OTHER_VIEWER_CONFIGS ]
+
+export const CATEGORIES = require('../../public/datoData/app.json').categories
 
 export const COORDINATES_HANDLE = '[[COORDINATES]]'
 

src/repo/configRepo.js

@@ -1,25 +1,46 @@
 import { VALID_VIEWER_CONFIGS } from '~/lib/constants'
 import axios from 'axios'
 
-async function getViewerData(viewer) {
-  const fileName = `${ viewer }.json`
-  const { data } = await axios(`/data/${ fileName }`)
-  return data
+function getViewerDataFromApi(path) {
+  return axios(path)
+    .then(({ data }) => data)
+}
+
+function getViewerDataFromFile(path) {
+  return axios(path)
+    .then(({ data }) => data)
+}
+
+function getViewerDataFromDato(viewerName) {
+  const fileName = `${ viewerName }.json`
+  return getViewerDataFromFile(`/datoData/${ fileName }`)
+}
+
+function getViewerData(viewerConfig) {
+  switch (viewerConfig.source) {
+    case 'dato':
+      return getViewerDataFromDato(viewerConfig.name)
+    case 'file':
+      return getViewerDataFromFile(viewerConfig.path)
+    case 'api':
+      return getViewerDataFromApi(viewerConfig.path)
+  }
 }
 
 const configRepo = {
-  async getConfig(viewers) {
-    const validViewers = viewers
+  async getConfig(viewerNames) {
+    const validViewerConfigs = viewerNames
       .split(',')
-      .filter(viewer => VALID_VIEWER_CONFIGS.includes(viewer))
+      .map(viewerName => VALID_VIEWER_CONFIGS.find(({ name }) => name === viewerName))
+      .filter(Boolean)
 
-    if (validViewers.length === 0) {
-      const viewerToUse = VALID_VIEWER_CONFIGS[0]
-      validViewers.push(viewerToUse)
-      console.warn(`No (valid) viewer provided, falling back to ${ viewerToUse.name }`)
+    // @TODO :: This doesn't change the route, perhaps do this check in route guard?
+    if (validViewerConfigs.length === 0) {
+      const viewerConfigToUse = VALID_VIEWER_CONFIGS[0]
+      validViewerConfigs.push(viewerConfigToUse)
+      console.warn(`No (valid) viewer provided, falling back to ${ viewerConfigToUse.name }`)
     }
-
-    return Promise.all(validViewers.map(getViewerData))
+    return Promise.all(validViewerConfigs.map(getViewerData))
       .then(viewersData => {
         return {
           name: viewersData[0].name,

src/router/index.js

@@ -3,6 +3,7 @@ import VueRouter from 'vue-router'
 import store from '../store'
 import { VALID_VIEWER_CONFIGS } from '../lib/constants'
 
+const validViewerConfigNames = VALID_VIEWER_CONFIGS.map(({ name }) => name)
 let hasHadFirstRoute = false
 
 const Download = () => import('../views/Download.vue')
@@ -13,17 +14,17 @@ Vue.use(VueRouter)
 
 const routes = [
   {
-    path: '/:config',
+    path: '/:configNames',
     name: 'layers',
     component: Layers,
   },
   {
-    path: '/:config/download',
+    path: '/:configNames/download',
     name: 'download',
     component: Download,
   },
   {
-    path: '/:config/favourites',
+    path: '/:configNames/favourites',
     name: 'favourites',
     component: Favourites,
   },
@@ -36,19 +37,20 @@ const router = new VueRouter({
 })
 
 router.beforeEach((to, from, next) => {
-  const storedConfig = store.getters['app/viewerConfig']
-  const config = VALID_VIEWER_CONFIGS.includes(to.params.config)
-      ? to.params.config
-      : VALID_VIEWER_CONFIGS[0]
+  const storedConfigNames = store.getters['app/viewerConfigNames']
 
-  if (!storedConfig) {
-    store.commit('app/SET_VIEWER_CONFIG', config)
+  const configNames = validViewerConfigNames.includes(to.params.configNames)
+      ? to.params.configNames
+      : validViewerConfigNames[0]
+
+  if (!storedConfigNames) {
+    store.commit('app/SET_VIEWER_CONFIG_NAMES', configNames)
+  }
+
+  if (!to.params.configNames) {
+    return next({ ...to, path: `/${ configNames }${ to.path }` })
   }
 
-  if (!to.params.config) {
-    return next({ ...to, path: `/${ config }${ to.path }` })
-  } 
-
   next()
 })
 

src/store/modules/app/index.js

@@ -4,15 +4,16 @@ export default {
   state: () => ({
     appNavigationOpen: true,
     appNavigationWidth: 440,
-    viewerConfig: '',
+    viewerConfigNames: '',
     viewerName: '',
   }),
 
   getters: {
     appNavigationOpen: state => state.appNavigationOpen,
     appNavigationWidth: state => state.appNavigationWidth,
     viewerName: state => state.viewerName,
-    viewerConfig: state => state.viewerConfig,
+    // @TODO :: This may be redundant if we can just use route.params.configNames instead of this
+    viewerConfigNames: state => state.viewerConfigNames,
   },
 
   mutations: {
@@ -22,8 +23,8 @@ export default {
     SET_APP_NAVIGATION_OPEN(state, { open }) {
       state.appNavigationOpen = open
     },
-    SET_VIEWER_CONFIG(state, config) {
-      state.viewerConfig = config
+    SET_VIEWER_CONFIG_NAMES(state, configNames) {
+      state.viewerConfigNames = configNames
     },
   },
 

src/store/modules/data/index.js

@@ -40,10 +40,12 @@ export default {
   },
 
   actions: {
-    async getAppData({ dispatch }, route) {
-      const viewer = route?.params?.config
-      const { layers, name } = await dispatch('addViewerData', viewer)
+    async getAppData({ commit, dispatch }, route) {
+      const viewerConfigNames = route?.params?.configNames
+      const { layers, name } = await dispatch('addViewerData', viewerConfigNames)
 
+      // Commit the names on first load
+      commit('app/SET_VIEWER_CONFIG_NAMES', viewerConfigNames, { root: true })
       dispatch('app/setViewerName', { name }, { root: true })
 
       const searchParams = new URLSearchParams(window.location.search)
@@ -55,8 +57,8 @@ export default {
       }
     },
 
-    async addViewerData({ commit, state }, viewer) {
-      const { layers: viewerLayers, name } = await configRepo.getConfig(viewer)
+    async addViewerData({ commit, state }, viewerConfigNames) {
+      const { layers: viewerLayers, name } = await configRepo.getConfig(viewerConfigNames)
 
       const stateLayers = state.displayLayers
       commit('SET_DISPLAY_LAYERS', { layers: [ ...stateLayers, ...viewerLayers ] })
@@ -72,14 +74,14 @@ export default {
       commit('SET_LAYER_TAGS', { tags })
 
       const currentRoute = router.currentRoute
-      const viewersInRoute = currentRoute.params.config.split(',')
-      const newViewerParts = viewer.split(',')
+      const viewersInRoute = currentRoute.params.configNames.split(',')
+      const newViewerParts = viewerConfigNames.split(',')
       const viewerPartsToAdd = difference(newViewerParts, viewersInRoute)
 
       if (viewerPartsToAdd.length) {
-        const config = [ currentRoute.params.config, viewerPartsToAdd.join(',') ].join(',')
-        const params = { ...currentRoute.params, config }
-        commit('app/SET_VIEWER_CONFIG', params.config, { root: true })
+        const configNames = [ currentRoute.params.configNames, viewerPartsToAdd.join(',') ].join(',')
+        const params = { ...currentRoute.params, configNames }
+        commit('app/SET_VIEWER_CONFIG_NAMES', params.configNames, { root: true })
         router.replace({ ...currentRoute, ...{ params } })
       }
 
@@ -104,13 +106,13 @@ export default {
       commit('SET_LAYER_TAGS', { tags: tagsToRemain })
 
       const currentRoute = router.currentRoute
-      const config = currentRoute.params.config
+      const newConfigNames = currentRoute.params.configNames
         .split(',')
         .filter(name => name !== viewer)
         .join(',')
-      commit('app/SET_VIEWER_CONFIG', config, { root: true })
+      commit('app/SET_VIEWER_CONFIG_NAMES', newConfigNames, { root: true })
 
-      router.replace({ ...currentRoute, ...{ params: { ...currentRoute.params, ...{ config } } } })
+      router.replace({ ...currentRoute, ...{ params: { ...currentRoute.params, ...{ configNames: newConfigNames } } } })
     },
 
     setDisplayLayers({ commit }, { layers }) {