initial commit

.circleci/config.yml

+# Global CircleCI used version
+version: 2.1
+
+# ------------------------------------------------------------------------------
+# Workflows
+# version is set at 2
+# ------------------------------------------------------------------------------
+workflows:
+  version: 2
+  full-flow:
+    jobs:
+      - build
+      - test:
+          requires:
+            - build
+      - pre-deploy:
+          requires:
+            - build
+          filters:
+            branches:
+              only:
+                - master
+      - deploy-surge:
+          requires:
+            - pre-deploy
+            - test
+      - deploy-s3:
+          requires:
+            - pre-deploy
+            - test
+      - deploy-heroku:
+          requires:
+            - pre-deploy # not required actually
+            - test
+
+# ------------------------------------------------------------------------------
+# Executors: list of executing environments (requires version: 2.1)
+# https://circleci.com/docs/2.0/configuration-reference/#executors-requires-version-21
+# ------------------------------------------------------------------------------
+executors:
+  app-builder:
+    docker:
+      - image: circleci/node:11-browsers-legacy
+    working_directory: ~/repo
+
+# ------------------------------------------------------------------------------
+# Commands: list of re-usable commands (requires version: 2.1)
+# https://circleci.com/docs/2.0/configuration-reference/#commands-requires-version-21
+# ------------------------------------------------------------------------------
+commands:
+  load-repo:
+    description: 'Checkout repository and load dependencies'
+    steps:
+      - checkout
+      - restore_cache:
+          name: Restore dependencies
+          keys:
+            - nuxt-ts-dependencies-{{ checksum "package-lock.json" }}
+
+# ------------------------------------------------------------------------------
+# Orbs: pre-configuration (requires version: 2.1)
+# https://circleci.com/docs/2.0/using-orbs/
+# ------------------------------------------------------------------------------
+orbs:
+  # https://circleci.com/orbs/registry/orb/circleci/aws-s3
+  # Config via environment variables:
+  # https://circleci.com/orbs/registry/orb/circleci/aws-cli
+  aws-s3: circleci/aws-s3@1.0.4
+
+# ------------------------------------------------------------------------------
+# Jobs: list of workflow jobs
+# ------------------------------------------------------------------------------
+# Jobs
+jobs:
+  # ---------- Building job
+  build:
+    executor: app-builder
+    steps:
+      - load-repo
+      - run:
+          # https://docs.npmjs.com/cli/ci
+          name: Install Dependencies
+          command: npm ci
+      - save_cache:
+          name: Save dependencies
+          key: nuxt-ts-dependencies-{{ checksum "package-lock.json" }}
+          paths:
+            - ~/repo/node_modules
+
+  # ---------- Testing job
+  test:
+    executor: app-builder
+    steps:
+      - load-repo
+      # Code Climate setup & initialise
+      - run:
+          name: Code Climate test-reporter setup
+          command: |
+            # download test reporter as a static binary
+            curl -L https://codeclimate.com/downloads/test-reporter/test-reporter-latest-linux-amd64 > ./cc-test-reporter
+            chmod +x ./cc-test-reporter
+            ./cc-test-reporter before-build
+      # Testing configuration must be configured in package.json
+      - run:
+          name: Testing
+          command: npm run test -- --coverage --silent
+      # Code Climate sending report
+      - run:
+          name: Code Climate report
+          command: |
+            if [ "${CIRCLE_BRANCH}" == "master" ]; then
+              ./cc-test-reporter after-build --exit-code $?
+            fi
+
+  # ---------- Pre-deploy: generate
+  pre-deploy:
+    executor: app-builder
+    steps:
+      - load-repo
+      - run: npm run generate
+      - persist_to_workspace:
+          root: ./
+          paths:
+            - dist
+
+  # ---------- Deploy: Surge
+  deploy-surge:
+    executor: app-builder
+    steps:
+      - load-repo
+      - attach_workspace:
+          at: ~/repo/
+      - run: ./node_modules/.bin/surge --project ~/repo/dist --domain nuxt-ts.surge.sh
+
+  # ---------- Deploy: Surge
+  deploy-s3:
+    docker:
+      - image: circleci/python:2.7
+    steps:
+      - attach_workspace:
+          at: ~/repo/
+      - aws-s3/copy:
+          from: ~/repo/dist
+          to: 's3://nuxt-ts'
+          arguments: '--recursive'
+
+  # ---------- Deploy: Heroku
+  deploy-heroku:
+    docker:
+      - image: buildpack-deps:trusty
+    steps:
+      - checkout
+      - run: git push https://heroku:$HEROKU_API_KEY@git.heroku.com/$HEROKU_APP_NAME.git master

.editorconfig

+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.eslintignore

+.nuxt/
+.vscode/
+dist/
+node_modules/

.eslintrc.js

+module.exports = {
+  // https://eslint.org/docs/user-guide/configuring#using-configuration-files-1
+  root: true,
+
+  // https://eslint.org/docs/user-guide/configuring#specifying-environments
+  env: {
+    browser: true,
+    node: true,
+    jest: true
+  },
+
+  // https://eslint.org/docs/user-guide/configuring#specifying-parser
+  parser: 'vue-eslint-parser',
+  // https://vuejs.github.io/eslint-plugin-vue/user-guide/#faq
+  parserOptions: {
+    parser: '@typescript-eslint/parser',
+    ecmaVersion: 2017,
+    sourceType: 'module',
+    project: './tsconfig.json'
+  },
+
+  // https://eslint.org/docs/user-guide/configuring#extending-configuration-files
+  // order matters: from least important to most important in terms of overriding
+  // Prettier + Vue: https://medium.com/@gogl.alex/how-to-properly-set-up-eslint-with-prettier-for-vue-or-nuxt-in-vscode-e42532099a9c
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:vue/recommended',
+    'prettier',
+    'prettier/vue',
+    'prettier/@typescript-eslint'
+  ],
+
+  // https://eslint.org/docs/user-guide/configuring#configuring-plugins
+  plugins: ['vue', '@typescript-eslint'],
+
+  rules: {
+    "@typescript-eslint/no-empty-interface": 1,
+    // https://github.com/typescript-eslint/typescript-eslint/issues/103
+    "@typescript-eslint/no-parameter-properties": 0,
+    "no-console": "off",
+  }
+};

.gitignore

+# Created by .ignore support plugin (hsz.mobi)
+### Node template
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+# for Travis
+cc-test-reporter
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# Nuxt generate
+dist
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless
+
+# IDE
+.idea
+
+# Service worker
+sw.*
+
+# VS Code config
+.vscode/
+
+# package lock
+package-lock.json
\ No newline at end of file

.prettierrc

+{
+  "semi": true,
+  "singleQuote": true
+}

README.md

+## de-prototypes
+
+This project contains the developed digital earth framework (DEF) front-end
+components, as well as the show case specific workflow implementions, 
+e.g. the flood event explorer (FEE).
+
+### framework
+The front-end core uses nuxtjs with vuetify,
+openlayers and d3. The back-end modules are connected via the pulsar messaging
+system.
+
+### build and deploy
+The dependencies are managed by npm (nodejs version 12, there appear to be 
+problems with version 13 for now).
+
+1. install nodejs v12 (if not already) and update npm
+
+```bash
+# Using Ubuntu
+curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
+sudo apt-get install -y nodejs
+
+# Update npm
+npm install -g npm@latest
+```
+
+2. clone the de-prototypes repository
+
+3. cd into the `de-prototypes` folder and install dependencies via
+
+```bash
+npm install
+```
+
+4. build deployable package via
+
+```bash
+npm run build
+```
+
+The built files can be found in the `dist` folder. Simply copy the contents to
+a webserver to deploy them.
+
+5. alternatively, for local development and testing the web application can
+be run in development mode via
+```bash
+npm run dev
+```
+
+

assets/css/responsive-svg.css

+.workflowTitle {
+    margin-top: 80px;
+    padding-left: 18px;
+    font-size: 1.6em;
+    font-weight: bold;
+    text-transform: uppercase !important;
+}
+
+.workflowSubtitle {
+    padding-left: 18px;
+    margin-bottom: 5px;;
+    font-size: 1em;
+    font-weight: bold;
+    color: rgb(184, 184, 184);
+    text-transform: lowercase !important;
+}
+
+.svg-container {
+    display: inline-block;
+    position: relative;
+    width: 100%;
+    padding-bottom: 50%;
+    /* aspect ratio */
+    vertical-align: top;
+    overflow: hidden;
+}
+
+.svg-content-responsive {
+    display: inline-block;
+    position: absolute;
+    top: 10px;
+    left: 0;
+}
+
+.v-card-fluid {
+    width: 100%;
+}
+
+.toolTip {
+    position: absolute;
+    display: none;
+    min-width: 80px;
+    height: auto;
+    background: none repeat scroll 0 0 #ffffff;
+    border: 1px solid #6F257F;
+    padding: 14px;
+    text-align: center;
+}
+
+.axis {
+    font-size: 1em;
+    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+}
+
+.navigationSC>dl>dt {
+    font-size: 1.5em;
+}
+
+.navigationSC>dl>dd {
+    font-size: 1em;
+    margin-left: 2em;
+}
+
+.router-link-active {
+    color: red;
+}
+
+.linkBreadcrumb{
+    position: absolute;
+    left: 3.1em;
+    bottom: -18px;
+}
+
+/**
+INPUT checkbox style:
+Link: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_custom_radio
+*/

components/README.md

+# COMPONENTS
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+The components directory contains your Vue.js Components.
+
+_Nuxt.js doesn't supercharge these components._

hooks/index.ts

+import render from './render'
+
+export default routerBase => ({
+  render: render(routerBase)
+})
\ No newline at end of file

hooks/render.ts

+import redirectRootToPortal from './route-redirect-portal'
+
+export default routerBase => {
+    return {
+        /**
+         * 'render:setupMiddleware'
+         * {@link node_modules/nuxt/lib/core/renderer.js}
+         */
+        setupMiddleware(app) {
+            app.use('/', redirectRootToPortal(routerBase))
+        }
+    }
+}
\ No newline at end of file

hooks/route-redirect-portal.ts

+/**
+ * Nuxt middleware hook to redirect from / to /portal (or whatever we set in nuxt.config.js router.base)
+ *
+ * Should be the same version as connect
+ * {@link node_modules/connect/package.json}
+ */
+import parseurl from 'parseurl'
+
+/**
+ * Connect middleware to handle redirecting to desired Web Applicatin Context Root.
+ *
+ * Notice that Nuxt docs lacks explaning how to use hooks.
+ * This is a sample router to help explain.
+ *
+ * See nice implementation for inspiration:
+ * - https://github.com/nuxt/nuxt.js/blob/dev/examples/with-cookies/plugins/cookies.js
+ * - https://github.com/yyx990803/launch-editor/blob/master/packages/launch-editor-middleware/index.js
+ *
+ * [http_class_http_clientrequest]: https://nodejs.org/api/http.html#http_class_http_clientrequest
+ * [http_class_http_serverresponse]: https://nodejs.org/api/http.html#http_class_http_serverresponse
+ *
+ * @param {http.ClientRequest} req Node.js internal client request object [http_class_http_clientrequest]
+ * @param {http.ServerResponse} res Node.js internal response [http_class_http_serverresponse]
+ * @param {Function} next middleware callback
+ */
+export default desiredContextRoot =>
+    function projectHooksRouteRedirectPortal(req, res, next) {
+        const desiredContextRootRegExp = new RegExp(`^${desiredContextRoot}`)
+        const _parsedUrl = Reflect.has(req, '_parsedUrl') ? req._parsedUrl : null
+        const url = _parsedUrl !== null ? _parsedUrl : parseurl(req)
+        const startsWithDesired = desiredContextRootRegExp.test(url.pathname)
+        const isNotProperContextRoot = desiredContextRoot !== url.pathname
+        if (isNotProperContextRoot && startsWithDesired === false) {
+            const pathname = url.pathname === null ? '' : url.pathname
+            const search = url.search === null ? '' : url.search
+            const Location = desiredContextRoot + pathname + search
+            res.writeHead(302, {
+                Location
+            })
+            res.end()
+        }
+        next()
+    }
\ No newline at end of file

layouts/README.md

+# LAYOUTS
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+This directory contains your Application Layouts.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts).

layouts/default.vue

+<template>
+  <v-app id="inspire" dark>
+    <ShowcaseNavigation />
+    <nuxt />
+    <v-footer app fixed>
+      <v-spacer></v-spacer>
+      <span>&copy; 2020</span>
+    </v-footer>
+    <v-snackbar v-model="showMessage" :color="messageColor" top multi-line :timeout="15000">
+      {{ message }}
+      <template v-slot:action="{ attrs }">
+        <v-btn dark text v-bind="attrs" @click="showMessage = false">Dismiss</v-btn>
+      </template>
+    </v-snackbar>
+  </v-app>
+</template>
+
+<script lang='ts'>
+import ShowcaseNavigation from '~/layouts/showcaseNavigation/ShowcaseNavigation.vue';
+import { Component, Vue } from 'nuxt-property-decorator';
+@Component({
+  components: { ShowcaseNavigation }
+})
+export default class Default extends Vue {
+  private showMessage = false;
+  private message = '';
+  private messageColor = 'error';
+
+  protected created(): void {
+    this.initErrorHandling();
+  }
+
+  private initErrorHandling(): void {
+    console.log('registering global error handler');
+    window.onerror = this.onError;
+    window.addEventListener('unhandledrejection', event => {
+      if (event.reason['config'] && event.reason['config']['url']) {
+        this.toastError(
+          event.reason.message + ' (' + event.reason.config.url + ')'
+        );
+      } else {
+        this.toastError(event.reason.message);
+      }
+      return false;
+    });
+    Vue.config.errorHandler = this.errorCaptured;
+  }
+
+  private onError(
+    event: string | Event,
+    source?: string,
+    lineno?: number,
+    colno?: number,
+    error?: Error
+  ): boolean {
+    // console.error('window.onError', event);
+    this.toastError(event.toString());
+    return false;
+  }
+
+  protected errorCaptured(err, vm, info): boolean {
+    console.error('errorCaptured', err);
+    this.toastError(err.toString());
+    return false;
+  }
+
+  private toastError(message: string): void {
+    this.message = message;
+    this.messageColor = 'error';
+    this.showMessage = true;
+  }
+
+  private toastWarning(message: string): void {
+    this.message = message;
+    this.messageColor = 'warning';
+    this.showMessage = true;
+  }
+}
+</script>

layouts/showcaseNavigation/ShowcaseNavigation.vue

+<template>
+  <div>
+    <v-app-bar flat app class="black">
+      <v-app-bar-nav-icon @click.stop="drawer = !drawer" ></v-app-bar-nav-icon>
+      <v-toolbar-title >DE Application Template</v-toolbar-title>
+      <v-breadcrumbs :items="breadcrumbs" divider=">" class="linkBreadcrumb"></v-breadcrumbs>
+      <img class="delogo" src="/images/de_logo_transparent.png" />
+    </v-app-bar>
+
+    <v-navigation-drawer v-model="drawer" width="300" temporary app>
+      <v-list shaped>
+            
+            <v-list-item v-for="(link,n) in links" :key="link.text" dark router :to="link.route">
+                <v-list-item-action> 
+                    <v-list-item-icon >
+                    <v-icon large left>{{link.icon}}</v-icon>
+                    </v-list-item-icon>