Dish intern

packages/clients/dish/CHANGELOG.md

@@ -3,6 +3,10 @@
 ## unpublished
 
 - Feature: If a user is geolocated outside of the map's extent, the client will inform the user of why geolocation did not take effect via a textbox.
+- Feature: The map can now be used for internal use with specific configurations. This will be defined by the parameter `MODE` in the index.html. The parameters `internalHost`, `internalPort` and `internalPath` for the internal map must be passed in the `createMap` call.
+- Feature: New searches for address and parcels added.
+- Feature: New background and specialist data layers added.
+- Feature: New plugins DishExportMap and InternGfi for intern mode use added.
 - Fix: Extend typing for search result function according to type package update.
 - Fix: Import types `AddressSearchState` and `AddressSearchGetters` from correct position.
 - Fix: Import enum `SearchResultSymbols` from correct position.

packages/clients/dish/README.md

@@ -2,14 +2,30 @@
 
 ## Content
 
+The client can use two different configurations which are controlled by the parameter `MODE`. `MODE="EXTERN"` will apply the configuration for the map client as the website for the public, and `MODE="INTERN"` for the map used in the internal DISH application. `MODE` is initially set and cannot be changed after hosting.
+
 The DISH client differs from other POLAR clients in that it does not take any additional configuration, but is a closed product. All configuration is done dev-side and is versioned; updates require version updates.
 
 Please see the CHANGELOG.md for all changes after the initial release.
 
 ## Usage
 
-The product is a hostable HTML page. Usually, we do not deliver full pages, but rather components. Due to this, it's just that component, but full page width and height.
+The product can be used for two use cases. 
+
+One is a hostable HTML page for the public. Usually, we do not deliver full pages, but rather components. Due to this, it's just that component, but full page width and height. 
+
+The other one is a map that can be embedded in the dish application for internal use.
 
 Add a query parameter, e.g. `?ObjektID=1506`, to the page's URL to initially focus a feature and display its feature information by ObjektID.
 
 Name and casing of "ObjektID" have been directly taken from the backend to avoid duplicate naming.
+
+The service URLs for the internal monumental WMS and WFS need to be configurable. Therefore, the host (`internalHost`), the port and the part of the path that is equal for both services must be defined outside of the map. The `internalHost` and the combination of host, port and path as `internServicesBaseUrl` must be passed to the `createMap` call as attributes of the parameter `urlParams`. 
+
+The `internalHost` is also needed as parameter for the DishExportMap plugin and is passed as attribute of `configOverride` in the `createMap` call.
+
+The `urlParams` parameter and the configuration for the DishExportMap is only needed for the internal dish application and can be omitted otherwise.
+
+
+
+

packages/clients/dish/src/addPlugins.ts

@@ -1,6 +1,9 @@
 import { setLayout, NineLayout, NineLayoutTag } from '@polar/core'
 import PolarPluginAddressSearch from '@polar/plugin-address-search'
 import PolarPluginAttributions from '@polar/plugin-attributions'
+import PolarPluginDraw from '@polar/plugin-draw'
+import PolarPluginExport from '@polar/plugin-export'
+import PolarPluginFullscreen from '@polar/plugin-fullscreen'
 import PolarPluginGeoLocation from '@polar/plugin-geo-location'
 import PolarPluginGfi from '@polar/plugin-gfi'
 import PolarPluginIconMenu from '@polar/plugin-icon-menu'
@@ -16,77 +19,135 @@ import merge from 'lodash.merge'
 import { extendGfi } from './utils/extendGfi'
 import { search } from './utils/search'
 import { autocomplete, selectResult } from './utils/autocomplete'
+import { denkmalSearchResult } from './utils/denkmalSearchIntern'
+import { searchMethods } from './mapConfigurations/searchConfigParams'
 import DishModal from './plugins/Modal'
 import DishHeader from './plugins/Header'
 import DishGfiContent from './plugins/Gfi'
+import { MODE } from './enums'
+import DishGfiIntern from './plugins/GfiIntern'
+import DishExportMap from './plugins/DishExportMap'
 
 const defaultOptions = {
   displayComponent: true,
   layoutTag: NineLayoutTag.TOP_LEFT,
 }
 
+const pluginGfiExtern = {
+  coordinateSources: ['plugin/addressSearch/chosenAddress'],
+  gfiContentComponent: DishGfiContent,
+  afterLoadFunction: extendGfi,
+}
+
+const pluginGfiIntern = {
+  coordinateSources: ['plugin/addressSearch/chosenAddress'],
+  gfiContentComponent: DishGfiIntern,
+}
+
+function getPluginGfiConfig(mode: keyof typeof MODE) {
+  return mode === MODE.EXTERN ? pluginGfiExtern : pluginGfiIntern
+}
+
 // this is fine for list-like setup functions
 // eslint-disable-next-line max-lines-per-function
-export const addPlugins = (core) => {
-  const iconMenu = PolarPluginIconMenu(
-    merge({}, defaultOptions, {
-      menus: [
-        {
-          plugin: PolarPluginLayerChooser({}),
-          icon: 'fa-layer-group',
-          id: 'layerChooser',
-        },
-      ],
-      layoutTag: NineLayoutTag.TOP_RIGHT,
-    })
-  )
+export const addPlugins = (core, mode: keyof typeof MODE = 'EXTERN') => {
+  const internalMenu = [
+    {
+      plugin: PolarPluginLayerChooser({}),
+      icon: 'fa-layer-group',
+      id: 'layerChooser',
+    },
+    {
+      plugin: PolarPluginDraw({}),
+      icon: 'fa-pencil',
+      id: 'draw',
+    },
+    {
+      plugin: PolarPluginFullscreen({ renderType: 'iconMenu' }),
+      id: 'fullscreen',
+    },
+  ]
+  const externalMenu = [
+    {
+      plugin: PolarPluginLayerChooser({}),
+      icon: 'fa-layer-group',
+      id: 'layerChooser',
+    },
+  ]
+  const iconMenu = PolarPluginIconMenu({
+    displayComponent: true,
+    menus: mode === MODE.INTERN ? internalMenu : externalMenu,
+    layoutTag: NineLayoutTag.TOP_RIGHT,
+  })
 
   setLayout(NineLayout)
 
   core.addPlugins([
     iconMenu,
-    DishModal(defaultOptions),
+    DishModal({
+      displayComponent: true,
+      layoutTag: NineLayoutTag.TOP_LEFT,
+    }),
     DishHeader({
-      ...defaultOptions,
+      displayComponent: mode === MODE.EXTERN,
       layoutTag: NineLayoutTag.TOP_MIDDLE,
     }),
     PolarPluginAddressSearch(
-      merge({}, defaultOptions, {
-        layoutTag: NineLayoutTag.TOP_LEFT,
-        addLoading: 'plugin/loadingIndicator/addLoadingKey',
-        removeLoading: 'plugin/loadingIndicator/removeLoadingKey',
-        customSearchMethods: { dish: search, autocomplete },
-        customSelectResult: { categoryDenkmalsucheAutocomplete: selectResult },
-      })
-    ),
-    PolarPluginPins(
-      merge({}, defaultOptions, {
-        appearOnClick: { show: true, atZoomLevel: 6 },
-        coordinateSource: 'plugin/addressSearch/chosenAddress',
-      })
+      merge(
+        {},
+        {
+          displayComponent: true,
+          layoutTag: NineLayoutTag.TOP_LEFT,
+          addLoading: 'plugin/loadingIndicator/addLoadingKey',
+          removeLoading: 'plugin/loadingIndicator/removeLoadingKey',
+          customSearchMethods:
+            mode === MODE.EXTERN ? { dish: search, autocomplete } : {},
+          customSelectResult:
+            mode === MODE.EXTERN
+              ? {
+                  [searchMethods.denkmalsucheAutocomplete.categoryId]:
+                    selectResult,
+                }
+              : {
+                  [searchMethods.denkmalsucheDishIntern.categoryId]:
+                    denkmalSearchResult,
+                },
+        }
+      )
     ),
+    PolarPluginPins({
+      displayComponent: mode === MODE.EXTERN,
+      appearOnClick: { show: true, atZoomLevel: 6 },
+      coordinateSource: 'plugin/addressSearch/chosenAddress',
+    }),
     PolarPluginLegend(
-      merge({}, defaultOptions, {
-        layoutTag: NineLayoutTag.BOTTOM_RIGHT,
-        maxWidth: 500,
-      })
-    ),
-    PolarPluginAttributions(
-      merge({}, defaultOptions, {
-        layoutTag: NineLayoutTag.BOTTOM_RIGHT,
-        listenToChanges: [
-          'plugin/zoom/zoomLevel',
-          'plugin/layerChooser/activeBackgroundId',
-          'plugin/layerChooser/activeMaskIds',
-        ],
-      })
+      merge(
+        {},
+        {
+          displayComponent: mode === MODE.EXTERN,
+          layoutTag: NineLayoutTag.BOTTOM_RIGHT,
+          maxWidth: 500,
+        }
+      )
     ),
+    PolarPluginAttributions({
+      displayComponent: true,
+      layoutTag: NineLayoutTag.BOTTOM_RIGHT,
+      listenToChanges: [
+        'plugin/zoom/zoomLevel',
+        'plugin/layerChooser/activeBackgroundId',
+        'plugin/layerChooser/activeMaskIds',
+      ],
+    }),
     PolarPluginGfi(
-      merge({}, defaultOptions, {
-        coordinateSources: ['plugin/addressSearch/chosenAddress'],
-        gfiContentComponent: DishGfiContent,
-        afterLoadFunction: extendGfi,
-      })
+      merge(
+        {},
+        {
+          displayComponent: true,
+          layoutTag: NineLayoutTag.TOP_LEFT,
+        },
+        getPluginGfiConfig(mode)
+      )
     ),
     PolarPluginLoadingIndicator(
       merge({}, defaultOptions, {
@@ -99,18 +160,36 @@ export const addPlugins = (core) => {
       })
     ),
     PolarPluginToast(
-      merge({}, defaultOptions, {
-        layoutTag: NineLayoutTag.BOTTOM_MIDDLE,
-      })
+      merge(
+        {},
+        {
+          displayComponent: true,
+          layoutTag: NineLayoutTag.BOTTOM_MIDDLE,
+        }
+      )
     ),
     PolarPluginZoom(
       merge({}, defaultOptions, {
         layoutTag: NineLayoutTag.MIDDLE_RIGHT,
       })
     ),
     PolarPluginGeoLocation(
+      merge(
+        {},
+        {
+          displayComponent: mode === MODE.EXTERN,
+          layoutTag: NineLayoutTag.MIDDLE_RIGHT,
+        }
+      )
+    ),
+    DishExportMap({
+      displayComponent: mode === MODE.INTERN,
+      layoutTag: NineLayoutTag.BOTTOM_LEFT,
+    }),
+    PolarPluginExport(
       merge({}, defaultOptions, {
-        layoutTag: NineLayoutTag.MIDDLE_RIGHT,
+        displayComponent: mode === MODE.INTERN,
+        layoutTag: NineLayoutTag.BOTTOM_LEFT,
       })
     ),
   ])

packages/clients/dish/src/colors.ts

@@ -0,0 +1,12 @@
+export const shBlue = '#003064'
+export const shWhite = '#FFFFFF'
+
+/*
+from UI draft
+const shRed = '#D4004B'
+const shGrey = '#A4ADB6'
+const shDarkBlue = '#001E49'
+const ui 01 = '#1EAE9C';
+const ui 04 = '#008CCF';
+const unnamed = '#0089CA';
+*/

packages/clients/dish/src/enums.ts

@@ -0,0 +1,6 @@
+export const MODE = {
+  // display view for users that visit the map via URL
+  EXTERN: 'EXTERN',
+  // display intern view for administrators that work within the map
+  INTERN: 'INTERN',
+}

packages/clients/dish/src/html/index.html

@@ -24,6 +24,13 @@
         <noscript>Bitte benutzen Sie einen Browser mit aktiviertem JavaScript, um den Kartenklienten zu nutzen.</noscript>
       </div>
     </div>
-    <script type="module" src="./client-dish.js"></script>
+    <script type="module">
+      import client from './client-dish.js'
+
+      client.createMap({
+        containerId: 'polarstern',
+        mode: 'EXTERN',
+      })
+    </script>
   </body>
 </html>

packages/clients/dish/src/index.html

@@ -24,6 +24,30 @@
         <noscript>Bitte benutzen Sie einen Browser mit aktiviertem JavaScript, um den Kartenklienten zu nutzen.</noscript>
       </div>
     </div>
-    <script type="module" src="./polar-client.ts"></script>
+    <script type="module">
+      import client from './polar-client.ts'
+
+      const internalHost = 'http://10.61.63.54'
+      const internalPort = '8081'
+      const internalPath = 'dish-deegree-3.5.0/services'
+
+// leave empty for external map
+      const urlParams = {
+        internalHost,
+        internServicesBaseUrl: `${internalHost}:${internalPort}/${internalPath}`
+      }
+
+      client.createMap({
+        containerId: 'polarstern',
+        mode: 'INTERN', // INTERN, EXTERN
+        urlParams,
+        //only needed for internal map
+        configOverride: {
+          dishExportMap: {
+            internalHost: urlParams.internalHost,
+          },
+        }
+      })
+    </script>
   </body>
 </html>

packages/clients/dish/src/locales.ts

@@ -9,6 +9,7 @@ const locales = [
         idNotFound:
           'Die verlinkte ID konnte leider nicht aufgelöst werden. Bitte verwenden Sie Suche und Karte, um zum Denkmal zu navigieren.',
         addressSearchHint: 'Eingabe von z.B. Bezeichnung, Lage, Adresse, ...',
+        gfiHeader: 'Objektnummer',
       },
       plugins: {
         gfi: {
@@ -31,6 +32,7 @@ const locales = [
           'The linked ID could not be found. Please use the search function or map to navigate to your point of interest.',
         addressSearchHint:
           'Entry of e.g. monument names, location, address, ...',
+        gfiHeader: 'Object number',
       },
       plugins: {
         gfi: {