@vcmap/ui 5.0.0-rc.10

package/plugins/@vcmap/project-selector/index.js

@@ -0,0 +1,259 @@
+import { ref } from '@vue/composition-api';
+import { ButtonLocation, createToggleAction } from '@vcmap/ui';
+import { Context } 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} VCMapContextOptions
+ * @property {string} [name]
+ * @property {string} [description]
+ * @property {string} configUrl
+ */
+
+/**
+ * @typedef {Object} VCMapContext
+ * @property {string} [name]
+ * @property {string} [description]
+ * @property {string} configUrl
+ * @property {string} contextId
+ * @property {boolean} active
+ */
+
+/**
+ * @typedef {Object} VCMapProjectOptions
+ * @property {string} name
+ * @property {string} [description]
+ * @property {Array<VCMapContextOptions>} contexts
+ */
+
+/**
+ * @typedef {Object} VCMapProject
+ * @property {string} name
+ * @property {string} [description]
+ * @property {Array<VCMapContext>} contexts
+ * @property {boolean} active
+ */
+
+/**
+ * @typedef {Object} ProjectSelectorConfig
+ * @property {string} [selected='VC Map Base'] - selected project on startup
+ * @property {string[]} [selectedContexts] - selected contexts on startup
+ * @property {boolean} [open=false] - open plugin on startup
+ * @property {Array<VCMapProjectOptions>} projects
+ * @property {Array<VCMapContextOptions>} contexts
+ */
+
+/**
+ * @param {ProjectSelectorConfig} config
+ * @returns {VcsPlugin}
+ */
+export default async function projectSelector(config) {
+  const { selected, selectedContexts, open, projects = [], contexts = [] } = config;
+
+  const pluginConfig = {
+    selected: ref(selected || defaultConfig.selected),
+    selectedContexts: ref(selectedContexts || defaultConfig.selectedContexts),
+    open: ref(open || defaultConfig.open),
+    projects: ref(/** @type {Array<VCMapProjectOptions>} */[...defaultConfig.projects, ...projects]),
+    contexts: ref(/** @type {Array<VCMapContextOptions>} */[...defaultConfig.contexts, ...contexts]),
+  };
+
+  const pluginState = {
+    projects: ref(/** @type {Array<VCMapProject>} */[]),
+    contexts: ref(/** @type {Array<VCMapContext>} */[]),
+  };
+
+  /**
+   * @param {VCMapContextOptions} contextOptions
+   */
+  function addContextFromOptions(contextOptions) {
+    /**
+     * @type {VCMapContext}
+     */
+    const context = {
+      name: undefined,
+      description: undefined,
+      configUrl: undefined,
+      ...contextOptions,
+      contextId: undefined,
+      active: false,
+    };
+    pluginState.contexts.value.push(context);
+  }
+
+  /**
+   * @param {VCMapContext} context
+   */
+  function removeContext(context) {
+    const idx = pluginState.contexts.value.findIndex(c => c.configUrl === context.configUrl);
+    pluginState.contexts.value.splice(idx, 1);
+  }
+
+  /**
+   * @param {VCMapProjectOptions} projectOptions
+   */
+  function addProjectFromOptions(projectOptions) {
+    const { name, description, contexts: contextsOptions = [] } = projectOptions;
+    /**
+     * @type {VCMapProject}
+     */
+    const project = {
+      name,
+      description,
+      contexts: contextsOptions.map(options => /** @type {VCMapContext} */({
+        name: undefined,
+        description: undefined,
+        configUrl: undefined,
+        ...options,
+        contextId: undefined,
+        active: false,
+      })),
+      active: false,
+    };
+    pluginState.projects.value.push(project);
+  }
+
+  /**
+   * @param {VCMapProject} project
+   */
+  function removeProject(project) {
+    const projectIdx = pluginState.projects.findIndex(p => p.name === project.name);
+    pluginState.projects.value.splice(projectIdx, 1);
+  }
+
+  /**
+   * @param {VcsApp} app
+   * @param {VCMapContext} vcMapContext
+   * @returns {Promise<void>}
+   */
+  async function loadContext(app, vcMapContext) {
+    try {
+      const configJson = await fetch(vcMapContext.configUrl)
+        .then(response => response.json());
+      const context = new Context(configJson);
+      if (!app.getContextById(context.id)) {
+        await app.addContext(context);
+      }
+      vcMapContext.contextId = context.id;
+      vcMapContext.active = true;
+    } catch (err) {
+      getLogger().error(`Failed loading context from ${ vcMapContext.configUrl}`, err);
+    }
+  }
+
+  /**
+   * @param {VcsApp} app
+   * @param {VCMapContext} vcMapContext
+   * @returns {Promise<void>}
+   */
+  async function unloadContext(app, vcMapContext) {
+    if (app.getContextById(vcMapContext.contextId)) {
+      await app.removeContext(vcMapContext.contextId);
+    }
+    vcMapContext.active = false;
+  }
+
+  /**
+   * @param {VcsApp} app
+   * @param {VCMapProject} project
+   * @returns {Promise<void>}
+   */
+  async function deselectProject(app, project) {
+    if (project.active) {
+      await Promise.all([...project.contexts].map((context) => {
+        return unloadContext(app, context);
+      }));
+      project.active = false;
+    }
+  }
+
+  /**
+   * @param {VcsApp} app
+   * @param {VCMapProject} project
+   * @returns {Promise<void>}
+   */
+  async function selectProject(app, project) {
+    if (!project.active) {
+      await Promise.all([...pluginState.projects.value].map((p) => {
+        return deselectProject(app, p);
+      }));
+      await Promise.all([...project.contexts].map((context) => {
+        return loadContext(app, context);
+      }));
+      project.active = true;
+    }
+  }
+
+  return {
+    get name() { return packageJSON.name; },
+    get version() { return packageJSON.version; },
+    get vcMapVersion() { return packageJSON.vcMapVersion; },
+    config: pluginConfig,
+    state: pluginState,
+    addContextFromOptions,
+    removeContext,
+    addProjectFromOptions,
+    removeProject,
+    selectProject,
+    deselectProject,
+    loadContext,
+    unloadContext,
+    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.contexts.value.forEach(c => addContextFromOptions(c));
+      pluginConfig.projects.value.forEach(p => addProjectFromOptions(p));
+      const projectToSelect = [...pluginState.projects.value]
+        .find(p => p.name === pluginConfig.selected.value) ||
+        pluginState.projects.value[0];
+      selectProject(app, projectToSelect);
+      const contextsToSelect = [...pluginState.contexts.value]
+        .filter(c => pluginConfig.selectedContexts.value.includes(c.name));
+      contextsToSelect.forEach(c => loadContext(app, c));
+      if (pluginConfig.open) {
+        app.windowManager.add(windowComponent, packageJSON.name);
+      }
+    },
+    i18n: {
+      de,
+      en,
+    },
+    destroy() {
+      if (this._destroyAction) {
+        this._destroyAction();
+        this._destroyAction = null;
+      }
+    },
+  };
+}

package/plugins/@vcmap/project-selector/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@vcmap/project-selector",
+  "version": "1.0.0",
+  "vcMapVersion": "~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"
+  }
+}

package/plugins/@vcmap/theme-changer/README.md

@@ -0,0 +1,21 @@
+# VC Map Plugin Theme Changer
+
+This is a plugin to manage themes of the VC Map.
+This plugin provides 4 themes:
+- VCS Theme (defined by `@vcmap/ui`)
+- Theme 1
+- Theme 2
+- Theme 3
+
+Per config custom themes can be added.
+
+## configuration
+
+You can override the themes array by defining your own themes. A theme must provide:
+
+### VcMapTheme
+| Property | Type | Description            |
+|----------|------|------------------------|
+| name     | string | name of the theme      |
+| dark     | VuetifyTheme | dark theme definition  |
+| light    | VuetifyTheme | light theme definition |

package/plugins/@vcmap/theme-changer/ThemeChangerComponent.vue

@@ -0,0 +1,92 @@
+<template>
+  <v-card>
+    <v-list-item>
+      <v-list-item-content>
+        <v-list-item-title class="font-weight-bold">
+          Dark Mode
+        </v-list-item-title>
+      </v-list-item-content>
+      <v-list-item-action>
+        <v-switch v-model="$vuetify.theme.dark" />
+      </v-list-item-action>
+    </v-list-item>
+    <v-divider />
+    <v-card-text>
+      <v-card
+        class="my-2"
+        :disabled="state.selected.value === theme.name"
+        @click="setTheme(theme)"
+        hover
+        outlined
+        v-for="(theme, index) in config.themes.value"
+        :key="index"
+      >
+        <v-list-item>
+          <v-list-item-content>
+            <v-list-item-title class="font-weight-bold">
+              {{ theme.name }}
+            </v-list-item-title>
+          </v-list-item-content>
+          <v-list-item-action>
+            <v-avatar
+              color="success"
+              size="30"
+              v-if="state.selected.value === theme.name"
+            >
+              <v-icon>mdi-check</v-icon>
+            </v-avatar>
+          </v-list-item-action>
+        </v-list-item>
+        <v-card class="my-1 ma-1 py-1 white">
+          <v-chip
+            class="mx-1"
+            label
+            :color="theme.dark[key]"
+            v-for="(key, index) in Object.keys(theme.dark)"
+            :key="index"
+          >
+            {{ key }}
+          </v-chip>
+        </v-card>
+        <v-card class="my-1 ma-1 py-1 black">
+          <v-chip
+            class="mx-1"
+            label
+            :color="theme.light[key]"
+            v-for="(key, index) in Object.keys(theme.light)"
+            :key="index"
+          >
+            {{ key }}
+          </v-chip>
+        </v-card>
+      </v-card>
+    </v-card-text>
+  </v-card>
+</template>
+<script>
+  import { inject } from '@vue/composition-api';
+
+  export default {
+    name: 'ThemeChanger',
+    setup() {
+      const app = inject('vcsApp');
+      const plugin = app.plugins.getByKey('@vcmap/theme-changer');
+
+      function setTheme(theme) {
+        const { name, dark, light } = theme;
+        Object.keys(dark).forEach((i) => {
+          this.$vuetify.theme.themes.dark[i] = dark[i];
+        });
+        Object.keys(light).forEach((i) => {
+          this.$vuetify.theme.themes.light[i] = light[i];
+        });
+        plugin.state.selected.value = name;
+      }
+      return {
+        state: plugin.state,
+        config: plugin.config,
+        setTheme,
+      };
+    },
+  };
+</script>

package/plugins/@vcmap/theme-changer/config.json

@@ -0,0 +1,69 @@
+{
+    "name": "themeChanger",
+    "entry": "plugins/@vcmap/theme-changer/index.js",
+    "themes": [
+        {
+            "name": "Theme 1",
+            "dark": {
+                "primary": "#21CFF3",
+                "accent": "#FF4081",
+                "secondary": "#21dc79",
+                "success": "#86af3f",
+                "info": "#f34fc6",
+                "warning": "#FB8C00",
+                "error": "#FF5252"
+            },
+            "light": {
+                "primary": "#22daff",
+                "accent": "#ff6b99",
+                "secondary": "#26ff8c",
+                "success": "#a5d64c",
+                "info": "#ff53d0",
+                "warning": "#ff8e00",
+                "error": "#ff5252"
+            }
+        },
+        {
+            "name": "Theme 2",
+            "dark": {
+                "primary": "#E65100",
+                "accent": "#7CB342",
+                "secondary": "#689F38",
+                "success": "#4CAF50",
+                "info": "#6156d8",
+                "warning": "#1565C0",
+                "error": "#FF7043"
+            },
+            "light": {
+                "primary": "#ffa450",
+                "accent": "#a1e754",
+                "secondary": "#92de4e",
+                "success": "#6dff74",
+                "info": "#7365ff",
+                "warning": "#2e8ac0",
+                "error": "#ff5e3c"
+            }
+        },
+        {
+            "name": "Theme 3",
+            "dark": {
+                "primary": "#33691E",
+                "accent": "#FFCA28",
+                "secondary": "#607D8B",
+                "success": "#FFEB3B",
+                "info": "#2196F3",
+                "warning": "#9C27B0",
+                "error": "#B71C1C"
+            },
+            "light": {
+                "primary": "#6ae240",
+                "accent": "#ffe063",
+                "secondary": "#7ea4b6",
+                "success": "#ffea70",
+                "info": "#229eff",
+                "warning": "#e239ff",
+                "error": "#e82424"
+            }
+        }
+    ]
+}

package/plugins/@vcmap/theme-changer/index.js

@@ -0,0 +1,102 @@
+import { ref } from '@vue/composition-api';
+import { check } from '@vcsuite/check';
+import { ButtonLocation, createToggleAction, vuetify } from '@vcmap/ui';
+import ThemeChangerComponent from './ThemeChangerComponent.vue';
+import packageJSON from './package.json';
+import defaultConfig from './config.json';
+
+/**
+ * @typedef {Object} VuetifyTheme
+ * @property {string} primary
+ * @property {string} secondary
+ * @property {string} accent
+ * @property {string} error
+ * @property {string} info
+ * @property {string} success
+ * @property {string} warning
+ */
+
+/**
+ * @typedef {Object} VcMapTheme
+ * @property {string} name
+ * @property {VuetifyTheme} light
+ * @property {VuetifyTheme} dark
+ */
+
+/**
+ * @param {Object} config
+ * @returns {VcsPlugin}
+ */
+export default async function themeChanger(config) {
+  /** @type {VcMapTheme} */
+  const vcsTheme = {
+    name: 'VCS Theme',
+    ...vuetify.userPreset.theme.themes,
+  };
+  const customThemes = config.themes || defaultConfig.themes;
+  const availableThemes = [vcsTheme, ...customThemes];
+
+  const pluginConfig = {
+    themes: ref(/** @type {Array<VcMapTheme> */[]),
+  };
+
+  const pluginState = {
+    selected: ref(vcsTheme.name),
+  };
+
+  /**
+   * @param {VcMapTheme} theme
+   */
+  function addTheme(theme) {
+    check(theme.name, String);
+    check(theme.light, Object);
+    check(theme.dark, Object);
+    pluginConfig.themes.value.push(theme);
+  }
+  availableThemes.forEach(t => addTheme(t));
+
+  return {
+    get name() { return packageJSON.name; },
+    get version() { return packageJSON.version; },
+    get vcMapVersion() { return packageJSON.vcMapVersion; },
+    config: pluginConfig,
+    state: pluginState,
+    addTheme,
+    onVcsAppMounted(app) {
+      const { action, destroy } = createToggleAction(
+        {
+          name: 'Theme Changer',
+          icon: 'mdi-palette',
+        },
+        {
+          id: 'theme-changer',
+          component: ThemeChangerComponent,
+          position: {
+            left: '60%',
+            right: '0%',
+            top: '5%',
+            bottom: '50%',
+          },
+          state: {
+            headerTitle: 'Theme Changer',
+            headerIcon: 'mdi-palette',
+          },
+        },
+        app.windowManager,
+        packageJSON.name,
+      );
+      app.navbarManager.add(
+        { id: 'theme-changer', action },
+        packageJSON.name,
+        ButtonLocation.MENU,
+      );
+      this._destroyAction = destroy;
+    },
+    destroy() {
+      if (this._destroyAction) {
+        this._destroyAction();
+        this._destroyAction = null;
+      }
+    },
+  };
+}

package/plugins/@vcmap/theme-changer/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@vcmap/theme-changer",
+  "version": "1.0.0",
+  "vcMapVersion": "~5.0.0",
+  "dependencies": {
+    "@vcsuite/check": "^1.1.2"
+  },
+  "peerDependencies": {
+    "@vcmap/ui": "5.0.0-rc.2",
+    "@vue/composition-api": "^1.4.5"
+  }
+}