Commit d46a1a89 authored by Daniel Eggert's avatar Daniel Eggert
Browse files

initial commit

parents
# 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.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
.nuxt/
.vscode/
dist/
node_modules/
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",
}
};
# 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
{
"semi": true,
"singleQuote": true
}
## 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
```
.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
**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._
import render from './render'
export default routerBase => ({
render: render(routerBase)
})
\ No newline at end of file
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
/**
* 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
**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).
<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>
<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>