@vcmap/ui 5.0.0-rc.9 → 5.0.0

package/plugins/@vcmap-show-case/plugin-editors/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "@vcmap-show-case/plugin-editors",
+  "version": "1.0.0",
+  "mapVersion": "^5.0.0"
+}

package/plugins/@vcmap-show-case/plugin-editors/src/PluginEditors.vue

@@ -0,0 +1,119 @@
+<template>
+  <VcsList :items="plugins" :show-title="false" />
+</template>
+
+<script>
+  import { inject, onUnmounted, ref } from 'vue';
+  import { VcsList, createToggleAction, WindowSlot } from '@vcmap/ui';
+  import { name } from '../package.json';
+
+  export default {
+    name: 'PluginEditors',
+    components: {
+      VcsList,
+    },
+    setup() {
+      const plugins = ref([]);
+      const vcsApp = /** @type {VcsUiApp} */ (inject('vcsApp'));
+      const createPluginItem = (plugin) => {
+        const editors = plugin.getConfigEditors?.();
+        if (editors?.length > 0) {
+          const actions = editors
+            .map((e) => e.component)
+            .filter((c) => c)
+            .map((component, index) =>
+              createToggleAction(
+                {
+                  name: `editor-${index + 1}`,
+                  icon: index < 9 ? `mdi-numeric-${index + 1}-box` : undefined,
+                },
+                {
+                  id: `${plugin.name}-editor-${index}`,
+                  component,
+                  parentId: name,
+                  slot: WindowSlot.DYNAMIC_CHILD,
+                  props: {
+                    getConfig: () =>
+                      Promise.resolve(
+                        vcsApp.plugins.getSerializedByKey(plugin.name),
+                      ),
+                    setConfig(config) {
+                      if (config) {
+                        vcsApp.notifier.add({
+                          type: 'info',
+                          message: `${plugin.name}: ${JSON.stringify(
+                            config,
+                            null,
+                            2,
+                          )}`,
+                        });
+                      } else {
+                        vcsApp.notifier.add({
+                          type: 'warning',
+                          message: `${plugin.name}: no config set.`,
+                        });
+                      }
+                    },
+                  },
+                  state: {
+                    headerTitle:
+                      component.title ?? `${plugin.name} Editor ${index + 1}`,
+                  },
+                  position: {
+                    width: 500,
+                  },
+                },
+                vcsApp.windowManager,
+                name,
+              ),
+            );
+
+          if (actions.length > 0) {
+            return {
+              title: plugin.name,
+              actions: actions.map((a) => a.action),
+              destroy() {
+                actions.forEach((a) => a.destroy());
+                actions.splice(0);
+              },
+            };
+          }
+        }
+        return null;
+      };
+
+      plugins.value = [...vcsApp.plugins]
+        .map(createPluginItem)
+        .filter((p) => p);
+
+      const added = vcsApp.plugins.added.addEventListener((p) => {
+        const item = createPluginItem(p);
+        if (item) {
+          plugins.value.push(item);
+        }
+      });
+
+      const removed = vcsApp.plugins.removed.addEventListener((p) => {
+        const index = plugins.value.findIndex((i) => i.title === p.name);
+        if (index > -1) {
+          plugins.value[index].destroy();
+          plugins.value.splice(index, 1);
+        }
+      });
+
+      onUnmounted(() => {
+        added();
+        removed();
+        plugins.value.forEach((p) => {
+          p.destroy();
+        });
+      });
+
+      return {
+        plugins,
+      };
+    },
+  };
+</script>
+
+<style scoped></style>

package/plugins/@vcmap-show-case/plugin-editors/src/index.js

@@ -0,0 +1,41 @@
+import { ButtonLocation, createToggleAction, WindowSlot } from '@vcmap/ui';
+import { name, version } from '../package.json';
+import component from './PluginEditors.vue';
+/**
+ * @returns {VcsPlugin}
+ */
+export default function pluginEditors() {
+  return {
+    name,
+    version,
+    async initialize(app) {
+      const { action, destroy } = createToggleAction(
+        {
+          name: 'Plugin Editors',
+          title: 'Overview of Plugins with editors.',
+        },
+        {
+          id: name,
+          component,
+          slot: WindowSlot.DYNAMIC_LEFT,
+          state: {
+            headerTitle: 'Plugin Editors',
+          },
+        },
+        app.windowManager,
+        name,
+      );
+      app.navbarManager.add({ id: name, action }, name, ButtonLocation.TOOL);
+      this._destroyAction = destroy;
+    },
+    getConfigEditors() {
+      return [];
+    },
+    toJSON() {
+      return {};
+    },
+    destroy() {
+      this._destroyAction();
+    },
+  };
+}

package/plugins/@vcmap-show-case/project-selector/README.md

@@ -0,0 +1,25 @@
+# VC Map Plugin Project Selector
+
+This is a plugin to select and load `Projects` and `VcsModules`.
+
+## configuration
+
+You can add projects or modules and define the startup behavior of the plugin:
+
+### ProjectSelectorConfig
+
+| Property        | Type                  | default       | Description                 |
+| --------------- | --------------------- | ------------- | --------------------------- |
+| selected        | string                | 'VC Map Base' | selected project on startup |
+| selectedModules | string[]              | []            | selected modules on startup |
+| open            | boolean               | false         | open plugin on startup      |
+| projects        | Array<ProjectOptions> | []            |                             |
+| modules         | Array<string>         | []            | list of config urls         |
+
+### ProjectOptions
+
+| Property    | Type          | Description                |
+| ----------- | ------------- | -------------------------- |
+| name        | string        | name of the project        |
+| description | string        | description of the project |
+| modules     | Array<string> | list of config urls        |

package/plugins/@vcmap-show-case/project-selector/config.json

@@ -0,0 +1,15 @@
+{
+  "name": "@vcmap-show-case/project-selector",
+  "entry": "plugins/@vcmap-show-case/project-selector/index.js",
+  "selected": "VC Map Base",
+  "selectedModules": [],
+  "open": false,
+  "projects": [
+    {
+      "name": "VC Map Base",
+      "description": "Base Layout with basic datasets",
+      "modules": ["config/base.config.json"]
+    }
+  ],
+  "modules": []
+}

package/plugins/{@vcmap → @vcmap-show-case}/project-selector/package.json

@@ -1,14 +1,13 @@
 {
-  "name": "@vcmap/project-selector",
+  "name": "@vcmap-show-case/project-selector",
   "version": "1.0.0",
-  "vcMapVersion": "~5.0.0",
+  "mapVersion": "^5.0.0",
   "dependencies": {
     "@vcsuite/check": "^1.1.2",
     "@vcsuite/logger": "^1.0.1"
   },
   "peerDependencies": {
     "@vcmap/ui": "^5.0.0-rc.11",
-    "@vcmap/core": "^5.0.0-rc.5",
-    "@vue/composition-api": "^1.4.5"
+    "@vcmap/core": "^5.0.0-rc.5"
   }
 }

package/plugins/{@vcmap/project-selector/ContextsListComponent.vue → @vcmap-show-case/project-selector/src/ModulesListComponent.vue}

@@ -1,26 +1,24 @@
 <template>
   <v-container class="pa-0">
-    <v-list
-      color="rgba(0,0,0,0)"
-    >
+    <v-list color="rgba(0,0,0,0)">
       <v-chip
-        v-for="(context, index) in contexts"
+        v-for="(module, index) in modules"
         :key="index"
         class="mx-1"
-        :color="context.active ? 'primary' : undefined"
+        :color="module.active ? 'primary' : undefined"
         :disabled="!toggleable"
-        @click="toggle(context)"
+        @click="toggle(module)"
       >
-        {{ context.name || context.configUrl }}
+        {{ module.name || module.configUrl }}
         <VcsTooltip
-          v-if="context.description"
-          :tooltip="context.description"
+          v-if="module.description && toggleable"
+          :tooltip="module.description"
         >
           <template #activator="{ on, attrs }">
             <v-icon
               right
-              v-bind="{...$attrs, ...attrs}"
-              v-on="{...$listeners, ...on}"
+              v-bind="{ ...$attrs, ...attrs }"
+              v-on="{ ...$listeners, ...on }"
             >
               mdi-help-circle
             </v-icon>
@@ -33,12 +31,19 @@
 
 <script>
   import { VcsTooltip } from '@vcmap/ui';
+  import { VChip, VContainer, VIcon, VList } from 'vuetify/lib';
 
   export default {
-    name: 'ContextsListComponent',
-    components: { VcsTooltip },
+    name: 'ModulesListComponent',
+    components: {
+      VcsTooltip,
+      VContainer,
+      VList,
+      VChip,
+      VIcon,
+    },
     props: {
-      contexts: {
+      modules: {
         type: Array,
         required: true,
       },
@@ -48,15 +53,13 @@
       },
     },
     methods: {
-      toggle(context) {
+      toggle(module) {
         if (this.toggleable) {
-          this.$emit('toggle-context', context);
+          this.$emit('toggle-module', module);
         }
       },
     },
   };
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

package/plugins/@vcmap-show-case/project-selector/src/ProjectSelectorComponent.vue

@@ -0,0 +1,102 @@
+<template>
+  <v-container>
+    <h1>{{ $t('project-selector.project.title') }}</h1>
+    <v-list v-for="(project, index) in state.projects" :key="index">
+      <v-card
+        class="ma-1"
+        :color="project.active ? 'base lighten-3' : undefined"
+        @click="selectProject(project)"
+        hover
+        outlined
+        :loading="loading === project.name"
+      >
+        <v-list-item>
+          <v-list-item-content>
+            <v-list-item-title class="font-weight-bold">
+              {{ project.name }}
+            </v-list-item-title>
+            <v-list-item-subtitle>{{
+              project.description
+            }}</v-list-item-subtitle>
+            <ModulesListComponent
+              :modules="project.modules"
+              @toggle-module="toggleModule"
+              :toggleable="false"
+            />
+          </v-list-item-content>
+          <v-list-item-action>
+            <v-avatar color="success" size="30" v-if="project.active">
+              <v-icon>mdi-check</v-icon>
+            </v-avatar>
+          </v-list-item-action>
+        </v-list-item>
+      </v-card>
+    </v-list>
+    <v-divider />
+    <h1>{{ $t('project-selector.module.title') }}</h1>
+    <ModulesListComponent
+      :modules="state.modules"
+      @toggle-module="toggleModule"
+    />
+  </v-container>
+</template>
+<script>
+  import { inject } from 'vue';
+  import {
+    VList,
+    VContainer,
+    VCard,
+    VIcon,
+    VListItem,
+    VListItemContent,
+    VListItemTitle,
+    VListItemSubtitle,
+    VListItemAction,
+    VAvatar,
+    VDivider,
+  } from 'vuetify/lib';
+  import ModulesListComponent from './ModulesListComponent.vue';
+
+  export default {
+    name: 'ProjectSelector',
+    components: {
+      ModulesListComponent,
+      VList,
+      VContainer,
+      VCard,
+      VIcon,
+      VListItem,
+      VListItemContent,
+      VListItemTitle,
+      VListItemSubtitle,
+      VListItemAction,
+      VAvatar,
+      VDivider,
+    },
+    setup() {
+      const app = inject('vcsApp');
+      const plugin = app.plugins.getByKey('@vcmap-show-case/project-selector');
+      async function selectProject(project) {
+        this.loading = project.name;
+        await plugin.selectProject(app, project);
+        this.loading = undefined;
+      }
+
+      async function toggleModule(module) {
+        if (module.active) {
+          await plugin.unloadModule(app, module);
+        } else {
+          await plugin.loadModule(app, module);
+        }
+      }
+
+      return {
+        loading: undefined,
+        state: plugin.state,
+        config: plugin.config,
+        selectProject,
+        toggleModule,
+      };
+    },
+  };
+</script>

package/plugins/@vcmap-show-case/project-selector/src/de.json

@@ -0,0 +1,10 @@
+{
+  "project-selector": {
+    "project": {
+      "title": "Projekte"
+    },
+    "module": {
+      "title": "Module"
+    }
+  }
+}

package/plugins/@vcmap-show-case/project-selector/src/en.json

@@ -0,0 +1,10 @@
+{
+  "project-selector": {
+    "project": {
+      "title": "Projects"
+    },
+    "module": {
+      "title": "Modules"
+    }
+  }
+}

package/plugins/@vcmap-show-case/project-selector/src/index.js

@@ -0,0 +1,269 @@
+import { reactive } from 'vue';
+import { ButtonLocation, createToggleAction } from '@vcmap/ui';
+import { VcsModule } from '@vcmap/core';
+import { getLogger } from '@vcsuite/logger';
+import ProjectsComponent from './ProjectSelectorComponent.vue';
+import packageJSON from '../package.json';
+import defaultConfig from '../config.json';
+import de from './de.json';
+import en from './en.json';
+
+/**
+ * @typedef {Object} VcsModuleState
+ * @property {string} _id
+ * @property {string} [name]
+ * @property {string} [description]
+ * @property {string} configUrl
+ * @property {boolean} active
+ */
+
+/**
+ * @typedef {Object} ProjectOptions
+ * @property {string} name
+ * @property {string} [description]
+ * @property {Array<string>} modules - a list of config urls
+ */
+
+/**
+ * @typedef {ProjectOptions} Project
+ * @property {boolean} active
+ * @property {Array<VcsModuleState>} modules
+ */
+
+/**
+ * @typedef {Object} ProjectSelectorConfig
+ * @property {string} [selected='VC Map Base'] - selected project on startup
+ * @property {string[]} [selectedModules] - selected modules on startup
+ * @property {boolean} [open=false] - open plugin on startup
+ * @property {Array<Project>} projects
+ * @property {Array<string>} modules
+ */
+
+/**
+ * @param {ProjectSelectorConfig} config
+ * @returns {VcsPlugin}
+ */
+export default async function projectSelector(config) {
+  const {
+    selected,
+    selectedModules,
+    open,
+    projects = [],
+    modules = [],
+  } = config;
+
+  const pluginConfig = reactive({
+    selected: selected || defaultConfig.selected,
+    selectedModules: selectedModules || defaultConfig.selectedModules,
+    open: open || defaultConfig.open,
+    projects: /** @type {Array<ProjectOptions>} */ [
+      ...defaultConfig.projects,
+      ...projects,
+    ],
+    modules: /** @type {Array<string>} */ [
+      ...defaultConfig.modules,
+      ...modules,
+    ],
+  });
+
+  const pluginState = reactive({
+    projects: /** @type {Array<Project>} */ [],
+    modules: /** @type {Array<VcsModuleState>} */ [],
+  });
+
+  /**
+   * @param {string} configUrl
+   */
+  function addModule(configUrl) {
+    pluginState.modules.push({ _id: undefined, configUrl, active: false });
+  }
+
+  /**
+   * @param {string} moduleId
+   */
+  function removeModule(moduleId) {
+    const idx = pluginState.modules.findIndex(({ _id }) => _id === moduleId);
+    pluginState.modules.splice(idx, 1);
+  }
+
+  /**
+   * @param {ProjectOptions} projectOptions
+   */
+  function addProject({ name, description, modules: configUrls }) {
+    const project = {
+      name,
+      description,
+      modules: configUrls.map((configUrl) => ({
+        _id: undefined,
+        configUrl,
+        active: false,
+      })),
+      active: false,
+    };
+    pluginState.projects.push(project);
+  }
+
+  /**
+   * @param {Project} project
+   */
+  function removeProject(project) {
+    const projectIdx = pluginState.projects.findIndex(
+      (p) => p.name === project.name,
+    );
+    pluginState.projects.splice(projectIdx, 1);
+  }
+
+  /**
+   * @param {VcsApp} app
+   * @param {VcsModuleState} moduleState
+   * @returns {Promise<void>}
+   */
+  async function loadModule(app, moduleState) {
+    try {
+      const response = await fetch(moduleState.configUrl);
+      if (response.ok) {
+        const configJson = await response.json();
+        const module = new VcsModule(configJson);
+        if (!app.getModuleById(module._id)) {
+          await app.addModule(module);
+          moduleState._id = module._id;
+          moduleState.name = module.name;
+          moduleState.description = module.description;
+          moduleState.active = true;
+        }
+      }
+    } catch (err) {
+      getLogger().error(
+        `Failed loading module from ${moduleState.configUrl}`,
+        err,
+      );
+    }
+  }
+
+  /**
+   * @param {VcsApp} app
+   * @param {VcsModuleState} moduleState
+   * @returns {Promise<void>}
+   */
+  async function unloadModule(app, moduleState) {
+    if (app.getModuleById(moduleState._id)) {
+      await app.removeModule(moduleState._id);
+      moduleState.active = false;
+      moduleState._id = undefined;
+    }
+  }
+
+  /**
+   * @param {VcsApp} app
+   * @param {Project} project
+   * @returns {Promise<void>}
+   */
+  async function deselectProject(app, project) {
+    if (project.active) {
+      await Promise.all(
+        [...project.modules].map((moduleState) => {
+          return unloadModule(app, moduleState);
+        }),
+      );
+      project.active = false;
+    }
+  }
+
+  /**
+   * @param {VcsApp} app
+   * @param {Project} project
+   * @returns {Promise<void>}
+   */
+  async function selectProject(app, project) {
+    if (!project.active) {
+      await Promise.all(
+        [...pluginState.projects].map((p) => {
+          return deselectProject(app, p);
+        }),
+      );
+      await Promise.all(
+        [...project.modules].map((moduleState) => {
+          return loadModule(app, moduleState);
+        }),
+      );
+      project.active = true;
+    }
+  }
+
+  return {
+    get name() {
+      return packageJSON.name;
+    },
+    get version() {
+      return packageJSON.version;
+    },
+    get mapVersion() {
+      return packageJSON.mapVersion;
+    },
+    config: pluginConfig,
+    state: pluginState,
+    addModule,
+    removeModule,
+    addProject,
+    removeProject,
+    selectProject,
+    deselectProject,
+    loadModule,
+    unloadModule,
+    onVcsAppMounted(app) {
+      const windowComponent = {
+        id: 'project-selector',
+        component: ProjectsComponent,
+        state: {
+          headerTitle: 'Project Selector',
+        },
+        position: {
+          left: '30%',
+          right: '30%',
+          top: '20%',
+          bottom: '20%',
+        },
+      };
+      const { action, destroy } = createToggleAction(
+        {
+          name: 'VC Map HOSTING',
+          icon: 'mdi-chevron-down',
+        },
+        windowComponent,
+        app.windowManager,
+        packageJSON.name,
+      );
+      app.navbarManager.add(
+        { id: 'project-selector', action },
+        packageJSON.name,
+        ButtonLocation.PROJECT,
+      );
+      this._destroyAction = destroy;
+
+      pluginConfig.modules.forEach((c) => addModule(c));
+      pluginConfig.projects.forEach((p) => addProject(p));
+      const projectToSelect =
+        [...pluginState.projects].find(
+          (p) => p.name === pluginConfig.selected,
+        ) || pluginState.projects[0];
+      selectProject(app, projectToSelect);
+      const modulesToSelect = [...pluginState.modules].filter((m) =>
+        pluginConfig.selectedModules.includes(m.configUrl),
+      );
+      modulesToSelect.forEach((m) => loadModule(app, m));
+      if (pluginConfig.open) {
+        app.windowManager.add(windowComponent, packageJSON.name);
+      }
+    },
+    i18n: {
+      de,
+      en,
+    },
+    destroy() {
+      if (this._destroyAction) {
+        this._destroyAction();
+        this._destroyAction = null;
+      }
+    },
+  };
+}