@vcmap/ui 5.0.0-rc.21 → 5.0.0-rc.23

package/src/i18n/de.js

@@ -55,18 +55,26 @@ const messages = {
     vcsTable: {
       key: 'Name',
       value: 'Wert',
+    },
+    vcsDataTable: {
       searchbarPlaceholder: 'Name, Wert, ...',
       itemsPerPage: 'pro Seite',
       ofItems: 'von',
       nextPage: 'Nächste Seite',
       formerPage: 'Vorherige Seite',
+      noDataPlaceholder: 'Keine Daten verfügbar',
+      noResultsPlaceholder: 'Keine übereinstimmenden Einträge gefunden',
     },
   },
   settings: {
     title: 'Einstellungen',
     tooltip: 'Einstellungen',
-    languageTitle: 'Spracheinstellungen',
     languageSelector: 'Sprache',
+    theme: {
+      title: 'Farbschema',
+      dark: 'Dunkel',
+      light: 'Hell',
+    },
   },
   featureInfo: {
     activateToolTitle: 'Informationstool aktivieren',
@@ -85,6 +93,7 @@ const messages = {
     select: 'Suchergebnis selektieren',
     placeholder: 'Suche nach Straße, Adresse, Ort, POI',
     zoomToFeatureAction: 'Auf Ergebnis zoomen',
+    zoomToAll: 'Zu allen Ergebnissen zoomen',
   },
   toolbox: {
     flight: 'Flug',
@@ -103,6 +112,9 @@ const messages = {
     information: 'Information',
     success: 'Erfolg',
   },
+  datePicker: {
+    today: 'Heute',
+  },
 };
 
 export default messages;

package/src/i18n/en.js

@@ -55,18 +55,26 @@ const messages = {
     vcsTable: {
       key: 'Name',
       value: 'Value',
+    },
+    vcsDataTable: {
       searchbarPlaceholder: 'Name, Value, ...',
       itemsPerPage: 'per page',
       ofItems: 'of',
       nextPage: 'Next page',
       formerPage: 'Former page',
+      noDataPlaceholder: 'No data available',
+      noResultsPlaceholder: 'No matching records found',
     },
   },
   settings: {
     title: 'Settings',
     tooltip: 'Settings',
-    languageTitle: 'Language settings',
     languageSelector: 'Language',
+    theme: {
+      title: 'Color theme',
+      dark: 'Dark',
+      light: 'Light',
+    },
   },
   featureInfo: {
     activateToolTitle: 'Activate Infotool',
@@ -85,6 +93,7 @@ const messages = {
     select: 'Select result item',
     placeholder: 'Search for Street, Address, Landmark, POI',
     zoomToFeatureAction: 'Zoom to result',
+    zoomToAll: 'Zoom to all',
   },
   toolbox: {
     flight: 'flight',
@@ -103,6 +112,9 @@ const messages = {
     information: 'Information',
     success: 'Success',
   },
+  datePicker: {
+    today: 'Today',
+  },
 };
 
 export default messages;

package/src/i18n/i18nCollection.js

@@ -1,5 +1,5 @@
 // eslint-disable-next-line max-classes-per-file
-import { contextIdSymbol, IndexedCollection } from '@vcmap/core';
+import { moduleIdSymbol, IndexedCollection } from '@vcmap/core';
 import { getLogger } from '@vcsuite/logger';
 
 /**
@@ -51,59 +51,59 @@ export function mergeDeep(...sources) {
  */
 class I18nCollection extends IndexedCollection {
   /**
-   * @param {function():string} getDynamicContextId - function to get the current dynamic context id
+   * @param {function():string} getDynamicModuleId - function to get the current dynamic module id
    */
-  constructor(getDynamicContextId) {
+  constructor(getDynamicModuleId) {
     super(false);
     /**
      * @type {function(): string}
      * @private
      */
-    this._getDynamicContextId = getDynamicContextId;
+    this._getDynamicModuleId = getDynamicModuleId;
   }
 
   /**
    * @inheritDoc
    */
   add(item) {
-    if (!item[contextIdSymbol]) {
-      item[contextIdSymbol] = this._getDynamicContextId();
+    if (!item[moduleIdSymbol]) {
+      item[moduleIdSymbol] = this._getDynamicModuleId();
     }
     super.add(item);
   }
 
   /**
    * @param {Array<Object>} configArray
-   * @param {string} contextId
+   * @param {string} moduleId
    * @returns {Promise<void>}
    */
-  async parseItems(configArray, contextId) {
+  async parseItems(configArray, moduleId) {
     if (Array.isArray(configArray)) {
       configArray.forEach((item) => {
-        item[contextIdSymbol] = contextId;
+        item[moduleIdSymbol] = moduleId;
         this.add(item);
       });
     }
   }
 
   /**
-   * @param {string} contextId
+   * @param {string} moduleId
    */
-  async removeContext(contextId) {
+  async removeModule(moduleId) {
     [...this]
-      .filter(item => item[contextIdSymbol] === contextId)
+      .filter(item => item[moduleIdSymbol] === moduleId)
       .forEach((item) => {
         this.remove(item);
       });
   }
 
   /**
-   * @param {string} contextId
+   * @param {string} moduleId
    * @returns {Array<Object>}
    */
-  serializeContext(contextId) {
+  serializeModule(moduleId) {
     return [...this]
-      .filter(item => item[contextIdSymbol] === contextId)
+      .filter(item => item[moduleIdSymbol] === moduleId)
       .filter(item => !item[i18nPluginSymbol])
       .map(item => JSON.parse(JSON.stringify(item)));
   }
@@ -112,12 +112,12 @@ class I18nCollection extends IndexedCollection {
    * This method adds plugin messages to the collection. It is no necessary to call this function
    * from within a plugin. Use the i18n property on your plugin.
    * @param {string} plugin Name of the plugin
-   * @param {string} contextId
+   * @param {string} moduleId
    * @param {Object} messages
    */
-  addPluginMessages(plugin, contextId, messages) {
+  addPluginMessages(plugin, moduleId, messages) {
     messages[i18nPluginSymbol] = plugin;
-    messages[contextIdSymbol] = contextId;
+    messages[moduleIdSymbol] = moduleId;
     this.add(messages);
   }
 
@@ -125,11 +125,11 @@ class I18nCollection extends IndexedCollection {
    * This method removes plugin messages from the collection. It is no necessary to call this function
    * from within a plugin. Once your plugin is removed, the VcsUiApp will call this for you.
    * @param {string} pluginName
-   * @param {string} contextId
+   * @param {string} moduleId
    */
-  removePluginMessages(pluginName, contextId) {
+  removePluginMessages(pluginName, moduleId) {
     [...this]
-      .filter(item => item[i18nPluginSymbol] === pluginName && item[contextIdSymbol] === contextId)
+      .filter(item => item[i18nPluginSymbol] === pluginName && item[moduleIdSymbol] === moduleId)
       .forEach((item) => {
         this.remove(item);
       });
@@ -147,7 +147,7 @@ class I18nCollection extends IndexedCollection {
    * @inheritDoc
    */
   destroy() {
-    this._getDynamicContextId = null;
+    this._getDynamicModuleId = null;
     super.destroy();
   }
 }

package/src/init.js

@@ -1,20 +1,49 @@
 import Vue from 'vue';
-import { check, checkMaybe } from '@vcsuite/check';
-import { Context } from '@vcmap/core';
+import { check, checkMaybe, is } from '@vcsuite/check';
+import { VcsModule } from '@vcmap/core';
 import VcsAppComponentWrapper from './application/vcsAppWrapper.vue';
 import { vuetify } from './vuePlugins/vuetify.js';
 import { createVueI18n, setupI18n } from './vuePlugins/i18n.js';
 import VcsUiApp from './vcsUiApp.js';
 
+/**
+ * Base pattern to check VcsObjects
+ * @type {import("vcsuite/check").PatternFor<import("@vcmap/core").VcsObject>}
+ */
+const VcsObjectPattern = {
+  type: String,
+  name: String,
+};
+
+/**
+ * Base pattern to check VcsUiAppConfig
+ * @type {import("vcsuite/check").PatternFor<VcsUiAppConfig>}
+ */
+export const VcsUiAppConfigPattern = {
+  id: [undefined, String],
+  layers: [undefined, [VcsObjectPattern]],
+  maps: [undefined, [VcsObjectPattern]],
+  styles: [undefined, [VcsObjectPattern]],
+  viewpoints: [undefined, [VcsObjectPattern]],
+  startingViewpointName: [undefined, String],
+  startingMapName: [undefined, String],
+  projection: [undefined, Object],
+  categories: [undefined, [{ name: String, items: [Object] }]],
+  obliqueCollections: [undefined, [VcsObjectPattern]],
+  plugins: [undefined, [Object]],
+  contentTree: [undefined, [Object]],
+  uiConfig: [undefined, [Object]],
+  featureInfo: [undefined, [VcsObjectPattern]],
+  i18n: [undefined, [Object]],
+};
+
 /**
  * creates and mounts a vcsApp
  * @param {string} mountTarget
- * @param {string=} configUrl optional config
  * @returns {Promise<VcsUiApp>}
  */
-export default async function initApp(mountTarget, configUrl) {
+export default async function initApp(mountTarget) {
   check(mountTarget, String);
-  checkMaybe(configUrl, String);
   const app = new VcsUiApp();
   const i18n = createVueI18n();
   new Vue({
@@ -28,11 +57,65 @@ export default async function initApp(mountTarget, configUrl) {
   }).$mount(mountTarget);
 
   setupI18n(app, i18n);
+  return app;
+}
+
+/**
+ * Initializes app with an optional single config
+ * @param {string} mountTarget
+ * @param {string=} configUrl optional config
+ * @returns {Promise<VcsUiApp>}
+ */
+export async function initAppFromModule(mountTarget, configUrl) {
+  check(mountTarget, String);
+  checkMaybe(configUrl, String);
+
+  const app = await initApp(mountTarget);
   if (configUrl) {
     const config = await fetch(configUrl)
       .then(response => response.json());
-    const context = new Context(config);
-    await app.addContext(context);
+    const module = new VcsModule(config);
+    await app.addModule(module);
   }
+
   return app;
 }
+
+/**
+ * Initializes app with a map config containing a set of config urls
+ * @param {string} mountTarget
+ * @param {string} appUrl app config containing further modules to be loaded
+ * @returns {Promise<VcsUiApp>}
+ */
+export async function initAppFromAppConfig(mountTarget, appUrl) {
+  check(mountTarget, String);
+  check(appUrl, String);
+
+  const app = await initApp(mountTarget);
+  /**
+   * @type {{modules: Array<string|VcsUiAppConfig>}}
+   */
+  const appConfig = await fetch(appUrl)
+    .then(response => response.json());
+
+  check(appConfig.modules, [String, Object]);
+
+  const modules = await Promise.all(appConfig.modules.map(async (c) => {
+    if (is(c, VcsUiAppConfigPattern)) {
+      return new VcsModule(/** @type{import("@vcmap/core").VcsAppConfig} */ c);
+    } else if (is(c, String)) {
+      const response = await fetch(c);
+      if (response.ok) {
+        const config = await response.json();
+        return new VcsModule(config);
+      }
+    }
+    return null;
+  }));
+  // eslint-disable-next-line no-restricted-syntax
+  for await (const module of modules) {
+    if (module) {
+      await app.addModule(module);
+    }
+  }
+}

package/src/legend/styleLegendItem.vue

@@ -6,7 +6,11 @@
         :key="idx"
         :class="{ 'w-full': item.colNr === 1, 'w-half': item.colNr !== 1 }"
       >
-        <v-list-item dense>
+        <v-list-item
+          dense
+          class="pa-0"
+          :class="determineInnerPadding(idx)"
+        >
           <v-list-item-icon class="pr-2">
             <v-img
               v-if="row.type === StyleRowType.Icon || row.type === StyleRowType.Shape"
@@ -126,7 +130,24 @@
         required: true,
       },
     },
-    setup() {
+    setup(props) {
+      /**
+       * Determines if a list item has padding right or left, so it has correct spacing to second row.
+       * @param {number} index The index of the list item. Starts with 0.
+       * @returns {string} Vuetify padding helper.
+       */
+      function determineInnerPadding(index) {
+        // check if there are more than two columns
+        if (props.item.colNr !== 1) {
+          // check if even number. If so, it is located in the left column and needs padding on the right.
+          if (index % 2 === 0) {
+            return 'pr-2';
+          } else {
+            return 'pl-2';
+          }
+        }
+        return '';
+      }
       return {
         StyleRowType,
         getImageSrcFromShape,
@@ -136,6 +157,7 @@
           }
           return null;
         },
+        determineInnerPadding,
       };
     },
   };

package/src/legend/vcsLegend.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-card
+  <v-sheet
     class="overflow-y-auto"
   >
     <v-expansion-panels
@@ -7,47 +7,48 @@
       multiple
       v-if="entries.length > 0"
       v-model="panels"
+      class="rounded-0"
     >
       <v-expansion-panel
         v-for="(entry,i) in entries"
         :key="i"
-        class="pa-0 ma-0"
+        class="px-2"
         @change="entry.open = !entry.open"
       >
         <v-expansion-panel-header hide-actions>
-          {{ $t(entry.title) }}
           <template #default="{ open }">
-            <div class="d-flex">
-              <v-icon :class="{ 'v-treeview-node__toggle': !open }">
-                mdi-chevron-down
-              </v-icon>
-              <VcsTreeviewLeaf class="w-full" :item="entry" />
+            <div class="d-flex justify-space-between">
+              <div class="d-flex align-center">
+                <v-icon class="mr-1" :class="{ 'rotate': !open }">
+                  mdi-chevron-down
+                </v-icon>
+                {{ $t(entry.title) }}
+              </div>
+              <VcsActionButtonList small :actions="entry.actions" />
             </div>
           </template>
         </v-expansion-panel-header>
-        <v-expansion-panel-content>
+        <v-expansion-panel-content class="pl-6 pb-2">
           <v-list dense>
             <div v-for="(item, idx) in entry.legend" :key="idx">
-              <div v-if="item.type === LegendType.Image" class="mx-2">
+              <div v-if="item.type === LegendType.Image">
                 <img
                   :src="$t(item.src)"
-                  max-width="287"
-                  max-height="auto"
-                  class="mx-2 legend-image"
+                  class="legend-image"
                   :title="item.tooltip"
                 >
               </div>
-              <div v-else-if="item.type === LegendType.Iframe" class="mx-2">
+              <div v-else-if="item.type === LegendType.Iframe">
                 <iframe
                   :id="`legendIframe${idx}`"
                   :src="$t(item.src)"
                   scrolling="no"
-                  width="287"
+                  style="width: 100%; height: 100%;"
                   frameBorder="0"
                   @load="setIframeHeight(`legendIframe${idx}`)"
                 />
               </div>
-              <style-legend-item v-else :item="item" class="mx-2" />
+              <style-legend-item v-else :item="item" />
             </div>
           </v-list>
         </v-expansion-panel-content>
@@ -56,13 +57,12 @@
     <v-sheet v-else class="ma-2">
       {{ $t('legend.empty') }}
     </v-sheet>
-  </v-card>
+  </v-sheet>
 </template>
 
 <script>
 
   import {
-    VCard,
     VExpansionPanels,
     VExpansionPanel,
     VExpansionPanelHeader,
@@ -74,7 +74,7 @@
   import { computed } from 'vue';
   import { LegendType } from './legendHelper.js';
   import StyleLegendItem from './styleLegendItem.vue';
-  import VcsTreeviewLeaf from '../components/lists/VcsTreeviewLeaf.vue';
+  import VcsActionButtonList from '../components/buttons/VcsActionButtonList.vue';
 
   /**
    * @description A component rendering configured legend information for active layers.
@@ -84,9 +84,8 @@
   export default {
     name: 'VcsLegend',
     components: {
-      VcsTreeviewLeaf,
+      VcsActionButtonList,
       StyleLegendItem,
-      VCard,
       VExpansionPanels,
       VExpansionPanel,
       VExpansionPanelHeader,
@@ -130,17 +129,11 @@
 </script>
 
 <style lang="scss" scoped>
-.v-list-item--dense {
-  height: 32px;
-}
-::v-deep {
-  .treeview-label {
-    max-width: 189px;
-  }
-}
 .legend-image {
-  max-width: 287px;
+  max-width: 100%;
   height: auto;
-  width: auto;
+}
+.rotate {
+  transform: rotate(-90deg);
 }
 </style>

package/src/manager/categoryManager/CategoryComponent.vue

@@ -1,48 +1,54 @@
 <template>
-  <v-container>
-    <v-row @click="open = !open" class="px-2 py-1 cursor-pointer">
-      <span>
-        <v-icon v-if="open">mdi-chevron-up</v-icon>
-        <v-icon v-else>mdi-chevron-down</v-icon>
-      </span>
-      <span class="flex-grow-1 flex-shrink-1">{{ $t(category.title) }}</span>
-      <vcs-action-button-list
-        v-if="category.actions?.length > 0"
-        :actions="category.actions"
-        small
-      />
-    </v-row>
-    <template v-if="open">
-      <v-row>
-        <v-col class="pa-0">
-          <vcs-list
-            :items="category.items.slice(0, 10)"
-            :selectable="category.selectable"
-            :single-select="category.singleSelect"
-            v-model="selection"
-            :show-title="false"
+  <v-expansion-panel
+    class="px-2"
+    @change="active = !active"
+  >
+    <v-expansion-panel-header hide-actions>
+      <template #default="{ open }">
+        <div class="d-flex justify-space-between">
+          <div class="d-flex align-center">
+            <v-icon class="mr-1" :class="{ 'rotate': !open }">
+              mdi-chevron-down
+            </v-icon>
+            {{ $t(category.title) }}
+          </div>
+          <VcsActionButtonList
+            v-if="category.actions?.length > 0"
+            :actions="category.actions"
+            small
+            class="float-end"
           />
-        </v-col>
-      </v-row>
-      <v-row v-if="category.items.length > 10">
-        <v-col class="pa-0">
-          <VcsButton @click="openCategoryItemWindow" class="pa-2" small>
-            {{ $t('categoryManager.more') }}
-          </VcsButton>
-        </v-col>
-      </v-row>
-      <v-row v-else-if="category.items.length === 0">
-        <v-col class="pa-2">
-          {{ $t('categoryManager.empty') }}
-        </v-col>
-      </v-row>
-    </template>
-  </v-container>
+        </div>
+      </template>
+    </v-expansion-panel-header>
+    <v-expansion-panel-content class="pb-1">
+      <vcs-list
+        :items="category.items.slice(0, 10)"
+        :selectable="category.selectable"
+        :single-select="category.singleSelect"
+        v-model="selection"
+        :show-title="false"
+      />
+      <v-sheet v-if="category.items.length > 10" class="ma-2 pl-2">
+        <VcsButton @click="openCategoryItemWindow" small>
+          {{ $t('categoryManager.more') }}
+        </VcsButton>
+      </v-sheet>
+      <v-sheet v-else-if="category.items.length === 0" class="ma-2 pl-2">
+        {{ $t('categoryManager.empty') }}
+      </v-sheet>
+    </v-expansion-panel-content>
+  </v-expansion-panel>
 </template>
 
 <script>
   import { computed, inject, ref } from 'vue';
-  import { VIcon, VContainer, VRow, VCol } from 'vuetify/lib';
+  import {
+    VIcon, VExpansionPanel,
+    VExpansionPanelHeader,
+    VExpansionPanelContent,
+    VSheet,
+  } from 'vuetify/lib';
   import VcsList from '../../components/lists/VcsList.vue';
   import VcsActionButtonList from '../../components/buttons/VcsActionButtonList.vue';
   import VcsButton from '../../components/buttons/VcsButton.vue';
@@ -54,11 +60,12 @@
     name: 'CategoryComponent',
     components: {
       VcsActionButtonList,
-      VcsList,
-      VContainer,
-      VRow,
       VcsButton,
-      VCol,
+      VcsList,
+      VExpansionPanel,
+      VExpansionPanelHeader,
+      VExpansionPanelContent,
+      VSheet,
       VIcon,
     },
     props: {
@@ -72,7 +79,7 @@
       /** @type {VcsUiApp} */
       const app = inject('vcsApp');
       const windowId = `${category.id}-category-list`;
-      const open = ref(false);
+      const active = ref(false);
 
       const selection = computed({
         get() { return category.selection; },
@@ -84,7 +91,7 @@
 
       return {
         selection,
-        open,
+        active,
         openCategoryItemWindow() {
           if (app.windowManager.has(windowId)) {
             setTimeout(() => {
@@ -110,6 +117,8 @@
   };
 </script>
 
-<style scoped>
-
+<style lang="scss" scoped>
+.rotate {
+  transform: rotate(-90deg);
+}
 </style>