hello

.gitignore

@@ -0,0 +1,19 @@
+dist
+.rpt2_cache
+node_modules
+lib
+kfs
+plugins
+static
+data
+conf
+
+*.d.ts
+*.js
+*.ts
+
+!src/**/*
+node_modules
+src/frontend/node_modules
+src/frontend/out-tsc
+src/frontend/dist

Dockerfile

@@ -0,0 +1,7 @@
+FROM node:12.9.0-alpine
+RUN apk add git
+
+RUN git clone https://gitea.frontblock.me/fb-dist/admin.git dist
+
+EXPOSE 8080 20000
+ENTRYPOINT ["node", "dist/FrontblockAdmin.js"]

FrontworkAdminConf.json

@@ -0,0 +1,11 @@
+{
+  "httpPort": 8080,
+  "eventBusConf": {},
+  "dbConf": {
+    "client": "sqlite3",
+    "connection": {
+      "filename": "/home/cake/frontwork/lib/data/frontworkAdmin.sqlite"
+    },
+    "useNullAsDefault": true
+  }
+}

config/FrontworkAdminConf.json

@@ -0,0 +1,11 @@
+{
+  "httpPort": 8080,
+  "eventBusConf": {},
+  "dbConf": {
+    "client": "sqlite3",
+    "connection": {
+      "filename": "/home/cake/frontwork/lib/data/frontworkAdmin.sqlite"
+    },
+    "useNullAsDefault": true
+  }
+}

package.json

@@ -0,0 +1,67 @@
+{
+  "name": "frontblock-admin",
+  "description": "Dynamic configurator for frontblock",
+  "version": "1.0.0",
+  "scripts": {
+    "tsc": "tsc",
+    "start": "npm run build; node dist/FrontblockAdmin.js",
+    "build": "npm run clean; npm run build-backend; npm run build-frontend",
+    "build-backend": "tsc; npm run webpack",
+    "build-frontend": "npm run build-dashboard; cp ./dist/FrontblockLib.js ./dist/static",
+    "build-dashboard": "git submodule init && git submodule update --merge; cd src/frontend; npm i && npm run build; mkdir ../../dist/static; cp -r dist/* ../../dist/static",
+    "clean": "rm -rf lib static plugins conf dist widget .rpt2_cache *.js *.ts src/frontend/dist data",
+    "update-frontblock": "npm remove frontblock frontblock-generic; npm install frontblock-generic@latest frontblock@latest",
+    "webpack": "webpack  --config src/backend/webpack.prod.js --progress --colors"
+  },
+  "repository": {
+    "type": "git",
+    "url": "http://gitea.frontblock.me/fb-vendor/admin"
+  },
+  "author": "frontblock.me",
+  "license": "ISC",
+  "dependencies": {
+    "bsert": "0.0.10",
+    "bsock": "^0.1.9",
+    "child-process-promise": "^2.2.1",
+    "debug": "^4.1.1",
+    "express": "^4.16.4",
+    "frontblock": "^0.15.2",
+    "frontblock-generic": "^0.34.8",
+    "git-cherrypicker": "0.0.3",
+    "git-describe": "^4.0.4",
+    "http": "0.0.0",
+    "knex": "^0.19.2",
+    "loadson": "^1.0.0",
+    "log4js": "^4.5.1",
+    "lowdb": "^1.0.0",
+    "node-fetch": "^2.6.0",
+    "path": "^0.12.7",
+    "rimraf": "^3.0.0",
+    "rpclibrary": "^1.3.0",
+    "simple-git": "^1.124.0",
+    "spawn-sync": "^2.0.0",
+    "sqlite3": "^4.1.0",
+    "trash": "^6.0.0",
+    "upgiter": "^1.0.1",
+    "uuid": "^3.3.2"
+  },
+  "devDependencies": {
+    "@types/express": "^4.17.0",
+    "@types/node": "^11.13.19",
+    "@types/semver": "^6.0.1",
+    "terser-webpack-plugin": "^1.4.1",
+    "ts-loader": "^5.3.3",
+    "typescript": "^3.5.3",
+    "webpack": "^4.39.2",
+    "webpack-cli": "^3.3.5"
+  },
+  "files": [
+    "lib/**/*"
+  ],
+  "main": "index.js",
+  "directories": {
+    "lib": "lib",
+    "test": "test"
+  },
+  "keywords": []
+}

src/backend/Admin.ts

@@ -0,0 +1,117 @@
+'use strict'
+
+import { getLogger } from 'frontblock-generic/Types';
+import { ConfigLoader } from 'loadson';
+import { promises as fs } from "fs"
+import { RPCServer } from 'rpclibrary/js/src/Backend'
+import { AdminConf } from './Types';
+import { RPCConfigLoader } from './RPCConfigLoader';
+
+import * as Path from 'path'
+
+import Knex = require('knex');
+import http = require('http');
+import express = require('express');
+
+const logger = getLogger("admin", 'debug') 
+
+export class FrontworkAdmin {
+    private express
+    private httpServer
+    private config: RPCConfigLoader<AdminConf>
+
+    constructor(){
+        this.initConfig()
+        this.startWebsocket()
+        this.startWebserver()
+    }
+
+    private initConfig(){
+        this.config = new RPCConfigLoader<AdminConf>({
+            name: "FrontworkAdminConf", 
+            getDefaultConfig: () => {
+                return {
+                    httpPort: 8080,
+                    eventBusConf: {},
+                    dbConf: {
+                        client: 'sqlite3',
+                        connection: {
+                            filename: Path.join(__dirname, "data/frontworkAdmin.sqlite")
+                        },
+                        useNullAsDefault: true
+                    }
+                }   
+            }
+        }, './config', console.log) 
+    }
+
+    private startWebsocket(){
+        console.log()
+        new RPCServer(20000, [
+            this.config
+        ])
+    }
+
+    private startWebserver(){
+        if(this.httpServer != null || this.express != null){
+            logger.warn("Webserver is already running")
+            return
+        }
+        
+        let port:number = this.config.getConfig().httpPort
+        this.express = express()
+        this.express.use('/', express.static('dist/static'))
+
+        /**
+         * get the compiled FrontendPlugins.js
+         */
+        this.express.get('/plugins/:id'+".js", async (request, response) => {
+            const pth = Path.resolve("plugins/"+request.params.id, "FrontendPlugin.js");
+            const file = await fs.readFile(pth)
+            const frontend = file.toString()
+
+            response.status(200)
+            response.set('Content-Type', 'application/javascript')
+            response.send(frontend)
+        })
+
+        /**
+         * serve the index.html from the static folder
+         */
+        this.express.get("/", (request, response) => {
+            response.status(200)
+            response.sendFile('index.html');
+        })
+
+        /**
+         * redirect all the other traffic to the single page app
+         */
+        this.express.get("*", (request, response) => {
+            response.status(301)
+            response.redirect('/')
+        })
+
+        this.httpServer = new http.Server(this.express)
+        this.httpServer.listen(port, () => {
+            logger.info('Admin panel listening for HTTP on *'+port)
+        })
+    }
+
+    private stopWebserver(){
+        if(this.httpServer == null || this.express == null){
+            logger.warn("Webserver is not running")
+            return
+        }
+        this.httpServer.close()
+        this.httpServer = null
+        this.express = null
+        logger.info("Webserver stopped")
+    }
+
+}
+
+process.on( 'SIGINT', function() {
+    logger.info("Shutting down from SIGINT (Ctrl-C)" );
+    // some other closing procedures go here
+    process.exit(0);
+})

src/backend/Installer.ts

@@ -0,0 +1,22 @@
+import { Plugin } from "frontblock-generic/Plugin"
+import { getLogger } from "frontblock-generic/Types"
+var exec = require('child-process-promise').exec;
+
+const logger = getLogger("installer", 'info') 
+
+export type NPMPkgName = string
+export type NPMVersion = string
+
+export const installAdmin = (plugins: Plugin[] = []) => {
+    
+    const npmPkgs:[NPMPkgName, NPMVersion][] = [['sqlite3', '4.1.0'], ['knex', '0.19.2']]
+    const deps = npmPkgs.map(tuple => tuple.join('@') ).join(" ")
+    logger.info("Installing plaform dependencies: "+deps)
+
+    exec("npm i " + deps).then(async process => {
+        logger.debug(process.stdout)    
+        const Admin = require("./Admin").FrontworkAdmin
+        const fbAdmin = new Admin(plugins)
+    })
+
+}

src/backend/Launcher.ts

@@ -0,0 +1,2 @@
+import { installAdmin } from "./Installer";
+installAdmin()

src/backend/RPCConfigLoader.ts

@@ -0,0 +1,42 @@
+import { ConfigLoader } from 'loadson'
+import { RPCExporter } from 'rpclibrary/js/src/Interfaces'
+
+export type ConfigLoaderIfc<ConfT> = {
+    Config : {
+        getConfig: () => ConfT
+        resetConfig: () => ConfT
+        setConfig: (conf:ConfT) => ConfT
+        setConfigKey: (key:string, value:any) => ConfT
+        deleteConfigKey: (key:string) => ConfT
+        getConfigKey: (key:string) => any
+    }
+}
+
+export class RPCConfigLoader<ConfT> 
+extends ConfigLoader<ConfT>
+implements RPCExporter<ConfigLoaderIfc<ConfT>, "Config">{
+
+    name = "Config" as "Config"
+
+    exportRPCs() {
+        return [{
+            name: "getConfig" as "getConfig",
+            call: () => { return this.getConfig() }
+        },{
+            name: "resetConfig" as "resetConfig",
+            call: () => { return this.resetConfig() }
+        },{
+            name: "setConfig" as "setConfig",
+            call: (conf:ConfT) => { return this.setConfig(conf) }
+        },{
+            name: "setConfigKey" as "setConfigKey",
+            call: (key:string, value:any) => { return this.setConfigKey(key, value) }
+        },{
+            name: "deleteConfigKey" as "deleteConfigKey",
+            call: (key:string) => { return this.deleteConfigKey(key) }
+        },{
+            name: "getConfigKey" as "getConfigKey",
+            call: (key:string) => { return this.getConfigKey(key) }
+        }]
+    }
+}

src/backend/Types.ts

@@ -0,0 +1,9 @@
+import Knex = require("knex")
+
+export declare type NotificationSeverity = 'Info' | 'Important' | 'Error';
+
+export type AdminConf = { 
+    httpPort: number,
+    dbConf:Knex.Config, 
+    eventBusConf: { [topic in string]: NotificationSeverity}
+}

src/backend/webpack.prod.js

@@ -0,0 +1,68 @@
+const path = require('path');
+
+module.exports = [{
+  mode: 'production',
+  target: "node",
+  node: {
+    global: true,
+    process: true,
+    __filename: false,
+    __dirname: false,
+    Buffer: true,
+  },
+  
+  resolve: {
+    // Add `.ts` and `.tsx` as a resolvable extension.
+
+    extensions: [".ts", ".tsx", ".js"]
+  },
+  module: {
+    rules: [
+      { test: /\.ts?$/, loader: "ts-loader" }
+    ]
+  },
+
+  externals: ['knex'],
+  optimization: {
+    minimize: false
+  },
+  entry: path.resolve(__dirname, 'Installer.ts'),
+  output: {
+      path: path.resolve(__dirname, '../../dist'),
+      filename: 'Installer.js',
+      libraryTarget: 'commonjs',
+  }
+},{
+  mode: 'production',
+  target: "node",
+  node: {
+    global: true,
+    process: true,
+    __filename: false,
+    __dirname: false,
+    Buffer: true,
+  },
+
+  
+  resolve: {
+    // Add `.ts` and `.tsx` as a resolvable extension.
+
+    extensions: [".ts", ".tsx", ".js"]
+  },
+  module: {
+    rules: [
+      { test: /\.ts?$/, loader: "ts-loader" }
+    ]
+  },
+
+  externals:["./Installer"],
+  optimization: {
+    minimize: false
+  },
+  entry: path.resolve(__dirname, 'Launcher.ts'),
+  output: {
+      path: path.resolve(__dirname, '../../dist'),
+      filename: 'FrontblockAdmin.js',
+      libraryTarget: 'commonjs',
+  }
+}]

src/frontend/.drone.yml

@@ -0,0 +1,60 @@
+kind: pipeline
+name: default
+
+steps:
+- name: restore cache
+  image: drillster/drone-volume-cache
+  settings:
+    restore: true
+    mount:
+      - ./node_modules
+  volumes:
+  - name: cache
+    path: /cache
+    
+- name: npm install
+  image: node:12
+  commands:
+  - npm install
+
+- name: npm run build
+  image: node:12
+  commands:
+  - npm run build
+
+- name: rebuild cache
+  image: drillster/drone-volume-cache
+  settings:
+    rebuild: true
+    mount:
+      - ./node_modules
+  volumes:
+  - name: cache
+    path: /cache
+
+- name: deploy static files
+  image: node:12
+  commands:
+  - git config --global user.email "${DRONE_COMMIT_AUTHOR_EMAIL}"
+  - git config --global user.name "${DRONE_COMMIT_AUTHOR}"
+  - git clone https://gitea.frontblock.me/fb-dist/${DRONE_REPO_NAME}.git
+  - cp -r ./dist/* ./${DRONE_REPO_NAME}
+  - cd ./${DRONE_REPO_NAME}
+  - git add -A
+  - git commit --allow-empty -m "drone taged as version ${DRONE_TAG}"
+  - git tag ${DRONE_TAG}
+  - git push https://$GIT_USER:$GIT_PASSWORD@gitea.frontblock.me/fb-dist/${DRONE_REPO_NAME}.git master ${DRONE_TAG}
+  environment:
+    GIT_USER:
+      from_secret: git_user
+    GIT_PASSWORD:
+      from_secret: git_password
+  when:
+    event:
+    - tag
+
+
+volumes:
+- name: cache 
+  host:
+    path: /tmp

src/frontend/.editorconfig

@@ -0,0 +1,13 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

src/frontend/.gitignore

@@ -0,0 +1,48 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+/out-tsc
+# Only exists if Bazel was run
+/bazel-out 
+
+# dependencies
+/node_modules
+
+# profiling files
+chrome-profiler-events.json
+speed-measure-plugin.json
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+testem.log
+/typings
+
+# System Files
+.DS_Store
+Thumbs.db
+
+src/assets/*.js

src/frontend/.gitmodules

@@ -0,0 +1,6 @@
+[submodule "src/app/paymentmanager"]
+	path = src/app/paymentmanager
+	url = ssh://git@gitea.frontblock.me:2222/fb-plugin/paymentmanager.git
+[submodule "src/app/wallet"]
+	path = src/app/wallet
+	url = ssh://git@gitea.frontblock.me:2222/fb-plugin/wallet.git

src/frontend/README.md

@@ -0,0 +1,27 @@
+# Dashboard
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.1.0.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

src/frontend/angular.json

@@ -0,0 +1,149 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "dashboard": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-builders/custom-webpack:browser",
+          "options": {
+            "customWebpackConfig": {"path": "./custom-webpack.config.js"},
+
+            "outputPath": "dist",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.app.json",
+            
+            "aot": false,
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.scss",
+              "node_modules/@clr/icons/clr-icons.min.css",
+              "node_modules/@clr/ui/clr-ui-dark.min.css"
+            ],
+            "scripts": [
+              "node_modules/systemjs/dist/system.js",
+              "node_modules/@webcomponents/custom-elements/custom-elements.min.js",
+              "node_modules/@clr/icons/clr-icons.min.js"
+            ]
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "tsconfig.prod.json",
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": false,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "2mb",
+                  "maximumError": "5mb"
+                }
+              ]
+            },
+
+            "prodlike": {
+              "tsConfig": "tsconfig.prod.json",
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prodlike.ts"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-builders/custom-webpack:dev-server",
+          "tsConfig": "tsconfig.app.json",
+          "options": {
+            "browserTarget": "dashboard:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "dashboard:build:production"
+            },
+            "prodlike": {
+              "browserTarget": "dashboard:build:prodlike"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "dashboard:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-builders/custom-webpack:karma",
+          "options": {
+            "main": "src/test.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.spec.json",
+            "karmaConfig": "karma.conf.js",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": []
+          }
+        },
+        "lint": {
+          "builder": "@angular-builders/custom-webpack:tslint",
+          "options": {
+            "tsConfig": [
+              "tsconfig.app.json",
+              "tsconfig.spec.json",
+              "e2e/tsconfig.json"
+            ],
+            "exclude": [
+              "**/node_modules/**",
+              "**/backend/**"
+            ]
+          }
+        },
+        "e2e": {
+          "builder": "@angular-builders/custom-webpack:protractor",
+          "options": {
+            "protractorConfig": "e2e/protractor.conf.js",
+            "devServerTarget": "dashboard:serve"
+          },
+          "configurations": {
+            "production": {
+              "devServerTarget": "dashboard:serve:production"
+            }
+          }
+        }
+      }
+    }},
+  "defaultProject": "dashboard"
+}

src/frontend/browserslist

@@ -0,0 +1,12 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist  
+
+> 0.5%
+last 2 versions
+Firefox ESR
+not dead
+not IE 9-11 # For IE 9-11 support, remove 'not'.

src/frontend/custom-webpack.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+    externals: ['log4js']
+}

src/frontend/e2e/protractor.conf.js

@@ -0,0 +1,32 @@
+// @ts-check
+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+
+const { SpecReporter } = require('jasmine-spec-reporter');
+
+/**
+ * @type { import("protractor").Config }
+ */
+exports.config = {
+  allScriptsTimeout: 11000,
+  specs: [
+    './src/**/*.e2e-spec.ts'
+  ],
+  capabilities: {
+    'browserName': 'chrome'
+  },
+  directConnect: true,
+  baseUrl: 'http://localhost:4200/',
+  framework: 'jasmine',
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 30000,
+    print: function() {}
+  },
+  onPrepare() {
+    require('ts-node').register({
+      project: require('path').join(__dirname, './tsconfig.json')
+    });
+    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+  }
+};

src/frontend/e2e/src/app.e2e-spec.ts

@@ -0,0 +1,23 @@
+import { AppPage } from './app.po';
+import { browser, logging } from 'protractor';
+
+describe('workspace-project App', () => {
+  let page: AppPage;
+
+  beforeEach(() => {
+    page = new AppPage();
+  });
+
+  it('should display welcome message', () => {
+    page.navigateTo();
+    expect(page.getTitleText()).toEqual('Welcome to dashboard!');
+  });
+
+  afterEach(async () => {
+    // Assert that there are no errors emitted from the browser
+    const logs = await browser.manage().logs().get(logging.Type.BROWSER);
+    expect(logs).not.toContain(jasmine.objectContaining({
+      level: logging.Level.SEVERE,
+    } as logging.Entry));
+  });
+});

src/frontend/e2e/src/app.po.ts

@@ -0,0 +1,11 @@
+import { browser, by, element } from 'protractor';
+
+export class AppPage {
+  navigateTo() {
+    return browser.get(browser.baseUrl) as Promise<any>;
+  }
+
+  getTitleText() {
+    return element(by.css('app-root h1')).getText() as Promise<string>;
+  }
+}

src/frontend/e2e/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/e2e",
+    "module": "commonjs",
+    "target": "es5",
+    "types": [
+      "jasmine",
+      "jasminewd2",
+      "node"
+    ]
+  }
+}

src/frontend/karma.conf.js

@@ -0,0 +1,32 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, './coverage/dashboard'),
+      reports: ['html', 'lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

src/frontend/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "dashboard",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve --aot=false --optimization=false --proxy-config proxy.conf.json ",
+    "start-prodlike": "npm run build-assets && ng serve --aot=false --optimization=false --proxy-config proxy.conf.json --configuration=prodlike",
+    "build": "rm -f src/assets/*.js; ng build --prod --aot=false --optimization=false --build-optimizer=false",
+    "build-assets": "npm run copy-frontends; npm run deep-clean-plugins",
+    "get-submodules": "git submodule update --init && git submodule foreach git checkout master",
+    "copy-frontends": "for module in $(git config --file .gitmodules --get-regexp path | awk '{ print $2 }'); do npm i --prefix $module && npm run --prefix $module build && cp $module/dist/FrontendPlugin.js ./src/assets/$(basename $module).js; done",
+    "deep-clean-plugins": "for module in $(git config --file .gitmodules --get-regexp path | awk '{ print $2 }'); do rm -rf $module/node_modules; done",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e",
+    "update-frontblock": "npm remove frontblock frontblock-generic; npm install frontblock-generic@latest frontblock@latest"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "~8.2.1",
+    "@angular/common": "~8.2.1",
+    "@angular/compiler": "~8.2.1",
+    "@angular/core": "~8.2.1",
+    "@angular/forms": "~8.2.1",
+    "@angular/platform-browser": "~8.2.1",
+    "@angular/platform-browser-dynamic": "~8.2.1",
+    "@angular/router": "~8.2.1",
+    "@clr/angular": "^2.1.1",
+    "@clr/icons": "^2.1.1",
+    "@clr/ui": "^2.1.1",
+    "@types/knex": "^0.16.1",
+    "@webcomponents/custom-elements": "^1.0.0",
+    "btc-hdkey": "0.0.17",
+    "coinselect": "^3.1.11",
+    "frontblock": "^0.15.1",
+    "frontblock-generic": "^0.34.1",
+    "key-file-storage": "^2.2.4",
+    "node-fetch": "^2.6.0",
+    "rxjs": "~6.5.2",
+    "stream": "0.0.2",
+    "systemjs": "^0.21.3",
+    "tslib": "^1.9.0",
+    "uuid": "^3.3.2",
+    "zone.js": "~0.10.1"
+  },
+  "devDependencies": {
+    "@angular-builders/custom-webpack": "^8.2.0",
+    "@angular-builders/dev-server": "^7.3.1",
+    "@angular-devkit/build-angular": "^0.802.2",
+    "@angular/cli": "^8.2.2",
+    "@angular/compiler-cli": "~8.2.1",
+    "@angular/language-service": "~8.2.1",
+    "@types/jasmine": "~3.4.0",
+    "@types/jasminewd2": "~2.0.3",
+    "@types/node": "^12.7.1",
+    "@types/systemjs": "^0.20.6",
+    "codelyzer": "^5.0.0",
+    "jasmine-core": "~3.4.0",
+    "jasmine-spec-reporter": "~4.2.1",
+    "karma": "~4.2.0",
+    "karma-chrome-launcher": "~3.0.0",
+    "karma-coverage-istanbul-reporter": "~2.1.0",
+    "karma-jasmine": "~2.0.1",
+    "karma-jasmine-html-reporter": "^1.4.0",
+    "protractor": "~5.4.0",
+    "ts-node": "~8.3.0",
+    "tslint": "~5.18.0",
+    "typescript": "~3.5.3"
+  }
+}

src/frontend/proxy.conf.json

@@ -0,0 +1,9 @@
+{
+  "/widgets-repo/*": {
+    "target": "http://localhost:4201",
+    "secure": false,
+    "pathRewrite": {
+      "^/widgets-repo": ""
+    }
+  }
+}

src/frontend/src/app/apiclient/apiclient-consumptions.component.ts

@@ -0,0 +1,92 @@
+import { Component, OnInit, isDevMode } from '@angular/core';
+import { SubscriptionResponse, parseResponse, SuccessResponse } from 'frontblock-generic/Types';
+
+declare const fb
+ 
+@Component({
+    selector: 'consumers',
+    template: `
+  <div class="clr-row">
+    <div class="card clr-col-12 clr-col-sm-12 clr-col-md-12 clr-col-lg-auto clr-col-xl-auto">
+        <div class="card-header">
+        Consumers
+        </div>
+        <clr-alert *ngFor="let entry of alerts" [clrAlertType]="entry.severity">
+            <clr-alert-item>
+                <span class="alert-text">
+                    {{entry.message}}
+                </span>
+            </clr-alert-item>
+        </clr-alert>
+
+        <div *ngIf="loading" class="card-block">
+        <span class="spinner spinner-inline"></span>
+        </div>
+        <div *ngIf="entries.length !== 0 && !loading" class="card-block limit-height">
+            <div class="card-text limit-height">
+                <clr-datagrid>
+                    <clr-dg-column>UUID</clr-dg-column>
+                    <clr-dg-column>Subscription UUID</clr-dg-column>
+                    <clr-dg-column>Expiry</clr-dg-column>
+                    <clr-dg-column>Creation</clr-dg-column>
+
+                    <clr-dg-row *clrDgItems="let line of entries">
+                        <clr-dg-cell>{{line.uid}}</clr-dg-cell>
+                        <clr-dg-cell>{{line.message}}</clr-dg-cell>
+                        <clr-dg-cell>{{line.expiry | date}}</clr-dg-cell>
+                        <clr-dg-cell>{{line.created | date}}</clr-dg-cell>
+                        
+                        <clr-dg-row-detail *clrIfExpanded>
+                            <button class="btn btn-icon btn-danger-outline" (click)="quit(line.uid)"><clr-icon shape="times"></clr-icon> Quit</button>
+                        </clr-dg-row-detail>
+                    </clr-dg-row>
+                    <clr-dg-footer>
+                        <clr-dg-pagination #pagination [clrDgPageSize]="10">
+                            <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Users per page</clr-dg-page-size>
+                            {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
+                            of {{pagination.totalItems}} users
+                        </clr-dg-pagination>
+                    </clr-dg-footer>
+                </clr-datagrid>
+            </div>
+        </div>
+        <div class="card-footer">
+            <button *ngIf="!loading" class="btn btn-sm btn-link" (click)="load()">{{actionName}}</button>
+        </div>
+    </div>
+  `
+})
+export class ApiclientConsumptionComponent implements OnInit {
+    loading: boolean = false
+    actionName: string = "load"
+    entries: SubscriptionResponse[] = []
+    alerts: {
+        severity: "danger" | "warning" | "success"
+        message: string
+    }[] = []
+
+    constructor() { }
+
+    ngOnInit() { }
+
+    async load() {
+        this.loading = true
+        this.entries = await fb.ApiClient.getConsumers()
+        if (this.entries.length === 0) {
+            this.alerts.push({ severity: "warning", message: "0 results were returned" })
+        }
+        this.loading = false
+        this.actionName = "refresh"
+    }
+
+    async quit(uid: string) {
+        const r = await fb.ApiClient.quit(uid)
+        const res = parseResponse(r)
+        if (res instanceof SuccessResponse) {
+            this.alerts.push({ severity: "success", message: "Quit consuming " + uid })
+            this.load()
+        } else {
+            this.alerts.push({ severity: "danger", message: "Error " + res.message })
+        }
+    }
+}

src/frontend/src/app/apiclient/apiclient-settings-form.component.ts

@@ -0,0 +1,132 @@
+import { Component, OnInit } from '@angular/core';
+import { isDevMode } from '@angular/core';
+
+declare const fb
+
+@Component({
+    selector: 'apiclient-settings',
+    template: `
+    <div class="clr-row">
+        <div class="card clr-col-12 clr-col-sm-12 clr-col-md-12 clr-col-lg-auto clr-col-xl-auto">
+            <div class="card-header">
+            Frontblock API Client
+            </div>
+            <div class="card-block">
+                <div class="card-text">
+                    <form clrForm clrLayout="horizontal">
+                        <div class="clr-row clr-form-control ng-star-inserted">
+                            <label class="clr-col-12 clr-col-md-4 clr-control-label">testnet</label>
+                            <div class="clr-col-12 clr-col-md-8">
+                                <input type="checkbox" [(ngModel)]="testnet"  (change)="updateTestnet($event)" name="testnetToggle" clrToggle  />
+                            </div>
+                        </div>
+                        
+                        <clr-input-container *ngIf="!testnet">
+                            <label class="clr-col-12 clr-col-md-4">API key</label>
+                            <input class="clr-col-12 clr-col-md-8" clrInput type="text" name="apiKey" required />
+                        </clr-input-container>
+                    
+                        <clr-input-container *ngIf="advanced" class="clr-row">
+                            <label class="clr-col-12 clr-col-md-4">API address</label>
+                            <input class="clr-col-12 clr-col-md-8" type="text" [(ngModel)]="data.apiHost" (change)="updatePort($event)" clrInput name="apiHost" required />
+                            <clr-control-error>This field is required!</clr-control-error>
+                        </clr-input-container>
+
+                        <div class="clr-row clr-form-control ng-star-inserted" *ngIf="advanced">
+                            <label class="clr-col-12 clr-col-md-4 clr-control-label">Use TLS</label>
+                            <div class="clr-col-12 clr-col-md-8">
+                                <input [(ngModel)]="data.tls" type="checkbox" clrCheckbox value="tls" name="options" />
+                            </div>
+                        </div>
+                        
+                        <clr-input-container class="clr-row" *ngIf="advanced">
+                            <label class="clr-col-12 clr-col-md-4">Port</label>
+                            <input class="clr-col-12 clr-col-md-8" [(ngModel)]="data.apiPort" clrInput type="number" name="lastName" required />
+                            <clr-control-error>Valid range 1024 - 65536 
+                            </clr-control-error>
+                        </clr-input-container>
+                    </form>
+                </div>
+            </div>
+            <div class="card-footer">
+                <button *ngIf="!saving" class="btn btn-success-outline" (click)="save()">
+                <span>Save</span>
+                </button>
+
+                <button *ngIf="saving" class="btn btn-disabled" (click)="save()" disabled>
+                <span class="spinner spinner-inline"></span>
+                </button>
+                <button *ngIf="!advanced" class="btn btn-sm btn-link" (click)="setAdvanced()">Advanced</button>
+            </div>
+        </div>
+    </div>
+  `
+})
+export class ApiclientFormComponent implements OnInit {
+    testnet: boolean = true
+    saving: boolean = false
+    advanced: boolean = false
+    data: any = {
+        apiHost: "api.testnet.frontblock.me",
+        apiPort: 10001,
+        tls: false,
+        apiKey: ""
+    }
+
+    constructor() { }
+
+    ngOnInit() { }
+
+    setAdvanced() { this.advanced = true }
+
+    checkData(): boolean {
+        return (
+            typeof this.data.apiPort === "number" &&
+            typeof this.data.apiHost === "string" &&
+            typeof this.data.tls === "boolean" &&
+            typeof this.data.apiKey === "string"
+        )
+    }
+
+    updateTestnet() {
+        if (this.testnet) {
+            this.data.apiHost = "api.testnet.frontblock.me"
+            this.data.apiPort = 10001
+        } else {
+            this.data.apiHost = "api.frontblock.me"
+            this.data.apiPort = 10000
+        }
+    }
+
+    updatePort() {
+        switch (this.data.apiHost) {
+            case "api.testnet.frontblock.me":
+                this.data.apiPort = 10001
+                break;
+            case "api.frontblock.me":
+                this.data.apiPort = 10000
+                break;
+
+            default:
+                console.warn("A non-standard api host was chosen: " + this.data.apiPort)
+                break;
+        }
+        console.log(this.data)
+    }
+
+    async save() {
+        this.saving = true;
+        if (typeof this.data.apiPort === "string")
+            this.data.apiPort = parseInt(this.data.apiPort)
+
+        if (this.checkData()) {
+            console.log(this.data)
+            const conf = await fb.Admin.setConfigKey("apiConf", this.data)
+            console.log(conf)
+        } else {
+            //show error in gui
+            console.error("bad data :(")
+        }
+        this.saving = false
+    }
+}

src/frontend/src/app/apiclient/apiclient-subscriptions.component.ts

@@ -0,0 +1,101 @@
+import { Component, OnInit, isDevMode } from '@angular/core';
+import { SubscriptionResponse, SuccessResponse, parseResponse } from 'frontblock-generic/Types';
+declare const fb
+
+@Component({
+    selector: 'subscriptions',
+    template: `
+    <div class="clr-row">
+        <div class="card clr-col-12 clr-col-sm-12 clr-col-md-12 clr-col-lg-12 clr-col-xl-12">
+            <div class="card-header">
+            Subscriptions
+            </div>
+            <clr-alert *ngFor="let entry of alerts" [clrAlertType]="entry.severity">
+                <clr-alert-item>
+                    <span class="alert-text">
+                        {{entry.message}}
+                    </span>
+                </clr-alert-item>
+            </clr-alert>
+        
+            <div *ngIf="loading" class="card-block">
+            <span class="spinner spinner-inline"></span>
+            </div>
+            <div *ngIf="entries.length !== 0 && !loading" class="card-block">
+                <div class="card-text">
+                    <clr-datagrid>
+                        <clr-dg-column>UUID</clr-dg-column>
+                    <!--
+                        <clr-dg-column>Currency</clr-dg-column>
+                        <clr-dg-column>Address</clr-dg-column>
+                        <clr-dg-column>Memo</clr-dg-column>
+                        <clr-dg-column>Expiry</clr-dg-column>
+                        <clr-dg-column>Creation</clr-dg-column>
+                    -->
+        
+                        <clr-dg-row *clrDgItems="let line of entries">
+                            <clr-dg-cell>{{line.uid}}</clr-dg-cell>
+                        <!-- 
+                            <clr-dg-cell>{{line.currency}}</clr-dg-cell> 
+                            <clr-dg-cell>{{line.address}}</clr-dg-cell> 
+                            <clr-dg-cell>{{line.memo}}</clr-dg-cell> 
+                            <clr-dg-cell>{{line.expiry | date}}</clr-dg-cell> 
+                            <clr-dg-cell>{{line.created | date}}</clr-dg-cell> 
+                        -->
+                            
+                            <clr-dg-row-detail *clrIfExpanded>
+                                <button class="btn btn-icon btn-danger-outline" (click)="quit(line.uid)"><clr-icon shape="times"></clr-icon> Unsubscribe</button>
+                            </clr-dg-row-detail>
+                        </clr-dg-row>
+                        <clr-dg-footer>
+                            <clr-dg-pagination #pagination [clrDgPageSize]="10">
+                                <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Users per page</clr-dg-page-size>
+                                {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
+                                of {{pagination.totalItems}} users
+                            </clr-dg-pagination>
+                        </clr-dg-footer>
+                    </clr-datagrid>
+                </div>
+            </div>
+            <div class="card-footer">
+                <button *ngIf="!loading" class="btn btn-sm btn-link" (click)="load()">{{actionName}}</button>
+            </div>
+        </div>
+    </div>
+`
+})
+export class ApiclientSubscriptionComponent implements OnInit {
+    loading: boolean = false
+    actionName: string = "load"
+    entries: (SubscriptionResponse )[] = []
+    alerts: {
+        severity: "danger" | "warning" | "success"
+        message: string
+    }[] = []
+
+    constructor() { }
+
+    ngOnInit() { }
+
+    async load() {
+        this.loading = true
+        this.entries = await fb.ApiClient.getSubscriptions()
+        if (this.entries.length === 0) {
+            this.alerts.push({ severity: "warning", message: "0 results were returned" })
+        }
+        this.loading = false
+        this.actionName = "refresh"
+    }
+
+    async quit(uid: string) {
+        const r = await fb.ApiClient.unsubscribe(uid)
+        const res = parseResponse(r)
+        if (res instanceof SuccessResponse) {
+            this.alerts.push({ severity: "success", message: "Stopped subscription " + uid })
+            this.load()
+        } else {
+            this.alerts.push({ severity: "danger", message: "Error " + res.message })
+        }
+    }
+
+}

src/frontend/src/app/apiclient/apiclient-widget.component.ts

@@ -0,0 +1,32 @@
+import { Component, OnInit } from '@angular/core';
+
+declare const fb
+
+@Component({
+    selector: '[apiclientconfig]',
+    template: `
+    consumers {{consumers}} subscribers {{subscribers}}
+  `
+})
+export class ApiclientWidgetComponent implements OnInit {
+
+    consumers = 0
+    subscribers = 0
+    
+    constructor() { }
+
+    async ngOnInit() {
+        await new Promise((resolve, reject)=>{
+            let awaitAdmin: { (): void; (...args: any[]): void; }
+            (awaitAdmin = () => {
+              if(fb.ApiClient != null){
+                resolve()
+              }
+              setTimeout(awaitAdmin,25)
+            })()
+        })
+
+        fb.ApiClient.getConsumers().then(cons => this.consumers = cons.length)
+        fb.ApiClient.getSubscriptions().then(subs => this.subscribers = subs.length)
+    }
+}

src/frontend/src/app/apiclient/module.ts

@@ -0,0 +1,61 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+
+import { ApiclientFormComponent } from './apiclient-settings-form.component';
+import { ApiclientConsumptionComponent } from './apiclient-consumptions.component';
+import { ApiclientSubscriptionComponent } from './apiclient-subscriptions.component';
+
+import { ClarityModule } from '@clr/angular';
+import { FormsModule } from '@angular/forms';
+
+import {FrontendPlugin, SidebarEntries, SidebarEntry} from 'frontblock-generic/Plugin'
+import { ApiclientWidgetComponent } from './apiclient-widget.component';
+
+@NgModule({
+  imports: [
+    FormsModule,
+    ClarityModule,
+
+    CommonModule, 
+    RouterModule.forChild([
+      {path: "subscriptions", component: ApiclientSubscriptionComponent},
+      {path: "consumers", component: ApiclientConsumptionComponent},
+    ]),
+  ],
+  exports: [RouterModule, ApiclientFormComponent],
+  declarations: [
+    ApiclientConsumptionComponent,
+    ApiclientSubscriptionComponent,
+    ApiclientFormComponent,
+    ApiclientWidgetComponent
+  ],
+  entryComponents: [
+    ApiclientFormComponent,
+    ApiclientWidgetComponent
+  ]
+})
+export class ApiclientModule implements FrontendPlugin<typeof ApiclientFormComponent, typeof ApiclientWidgetComponent>{
+  getSidebarEntry(): SidebarEntry | SidebarEntries {
+    return {
+      icon: "terminal",
+      parentRoute: "apiclient",
+      text: "Api client",
+      links: [{
+        route: "apiclient/consumers",
+        text: "Consumers"
+      },{
+        route: "apiclient/subscriptions",
+        text: "Subscriptions"
+      }]
+    }
+  }
+
+  getSettingsComponent(): typeof ApiclientFormComponent{
+    return ApiclientFormComponent
+  }
+
+  getWidget(): typeof ApiclientWidgetComponent{
+    return ApiclientWidgetComponent
+  }
+}

src/frontend/src/app/app-routing.module.ts

@@ -0,0 +1,37 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { HomeComponent } from './home/home.component';
+import { ErrorDisplayComponent } from './error-display/error-display.component';
+import { SettingsComponent } from './settings/settings.component';
+
+const routes: Routes = [{
+    path: "apiclient",
+    loadChildren: () => import('./apiclient/module').then(mod => mod.ApiclientModule)
+  },{
+    path: "pluginmanager",
+    loadChildren: () => import('./pluginmanager/module').then(mod => mod.PluginmanagerModule)
+  },{
+    path: "settings",
+    component: SettingsComponent
+  },{
+    path: "home",
+    component: HomeComponent
+  },{
+    path: "",
+    pathMatch: "full",
+    redirectTo: "home",
+  },{
+    path: "**",
+    component: ErrorDisplayComponent
+  }];
+
+export function getRoutes(){
+  return routes
+}
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule],
+})
+export class AppRoutingModule {
+}

src/frontend/src/app/app.component.html

@@ -0,0 +1,5 @@
+<clr-main-container  >
+    <header-bar></header-bar>
+    <subnav></subnav>
+    <dynamic-loader style="height:  100%;"></dynamic-loader>
+</clr-main-container>

src/frontend/src/app/app.component.spec.ts

@@ -0,0 +1,35 @@
+import { TestBed, async } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule
+      ],
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  }));
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have as title 'dashboard'`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app.title).toEqual('dashboard');
+  });
+
+  it('should render title in a h1 tag', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector('h1').textContent).toContain('Welcome to dashboard!');
+  });
+});

src/frontend/src/app/app.component.ts

@@ -0,0 +1,35 @@
+import { Component, ChangeDetectorRef, NgZone, ViewChild, OnInit, AfterContentInit, isDevMode } from '@angular/core';
+import { SidebarComponent } from './sidebar/sidebar.component';
+import { SidebarEntryService } from './sidebar-entry-service.service';
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss']
+})
+export class AppComponent implements AfterContentInit {
+  title = 'dashboard';
+
+  @ViewChild(SidebarComponent, {static: false})
+  sidebar: SidebarComponent
+  
+  constructor(private zone:NgZone, private sidebarService: SidebarEntryService){
+    window["refresh"] = setInterval(() => zone.run(()=>{ /*this triggers an angular reload*/}), 200)
+    if(isDevMode()){
+      require("../assets/dev/FrontblockLib")
+    }
+  }
+
+  ngAfterContentInit(){
+    let awaitSidebar: { (): void; (...args: any[]): void; }
+    (awaitSidebar = () => {
+      if(this.sidebar != null){
+        this.sidebarService.setSidebar(this.sidebar)
+        return
+      }
+      setTimeout(awaitSidebar,25)
+    })()
+
+    
+
+  }
+}

src/frontend/src/app/app.module.ts

@@ -0,0 +1,75 @@
+import { NgModule } from '@angular/core';
+import { AppRoutingModule } from './app-routing.module';
+
+import { ClarityModule } from '@clr/angular';
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+
+import { COMPILER_OPTIONS, CompilerFactory, Compiler } from '@angular/core';
+import { JitCompilerFactory } from '@angular/platform-browser-dynamic';
+
+import { AppComponent } from './app.component';
+import { SidebarComponent } from './sidebar/sidebar.component';
+import { MainComponent } from './content-area/main.component';
+import { DynamicLoaderComponent } from './dynamic-loader/dynamic-loader.component';
+import { HomeComponent } from './home/home.component';
+import { ErrorDisplayComponent } from './error-display/error-display.component';
+import { HeaderBarComponent } from './header-bar/header-bar.component';
+import { SubnavComponent } from './subnav/subnav.component';
+import { KnexConfigComponent } from './knex-config/knex-config.component';
+import { ApiclientFormComponent } from './apiclient/apiclient-settings-form.component';
+import { SettingsComponent } from './settings/settings.component';
+import { ApiclientModule } from './apiclient/module';
+
+
+export function createCompiler(fn: CompilerFactory): Compiler {
+  return fn.createCompiler();
+}
+
+const declarations = [ 
+  AppComponent,
+  
+  SidebarComponent,
+  MainComponent,
+  DynamicLoaderComponent,
+  HomeComponent,
+  HeaderBarComponent,
+  ErrorDisplayComponent,
+  SubnavComponent,
+  KnexConfigComponent,
+  SettingsComponent
+]
+
+@NgModule({
+  declarations: declarations,
+  imports: [
+    FormsModule,
+    BrowserModule,
+    BrowserAnimationsModule,
+    ClarityModule,
+    AppRoutingModule,
+    ApiclientModule
+  ],
+  entryComponents: [],
+  providers: [
+    {
+      provide: COMPILER_OPTIONS,
+      useValue: {},
+      multi: true
+    },
+    {
+      provide: CompilerFactory,
+      useClass: JitCompilerFactory,
+      deps: [COMPILER_OPTIONS]
+    },
+    {
+      provide: Compiler,
+      useFactory: createCompiler,
+      deps: [CompilerFactory]
+    }
+  ],
+  bootstrap: [AppComponent]
+})
+export class AppModule{
+}

src/frontend/src/app/content-area/main.component.html

@@ -0,0 +1,3 @@
+<div  class="content-area" style="max-height: 100%">
+    <router-outlet class="clr-all-12" ></router-outlet>
+</div>

src/frontend/src/app/content-area/main.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MainComponent } from './main.component';
+
+describe('MainComponent', () => {
+  let component: MainComponent;
+  let fixture: ComponentFixture<MainComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MainComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MainComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/frontend/src/app/content-area/main.component.ts

@@ -0,0 +1,17 @@
+import { Component, OnInit, ViewContainerRef, ViewChild } from '@angular/core';
+
+@Component({
+  selector: 'content-area',
+  templateUrl: './main.component.html',
+  styleUrls: ['./main.component.scss']
+})
+export class MainComponent implements OnInit {
+
+  @ViewChild('content', { read: ViewContainerRef, static: false }) 
+  content: ViewContainerRef;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+}

src/frontend/src/app/dynamic-loader/dynamic-loader.component.html

@@ -0,0 +1,4 @@
+<div class="content-container" style="height:  100%;">
+    <sidebar></sidebar>
+    <content-area style="height:  100%; width: 100%"></content-area>
+</div>

src/frontend/src/app/dynamic-loader/dynamic-loader.component.scss

@@ -0,0 +1,3 @@
+.heightmax{
+    height: 100%!important;
+}

src/frontend/src/app/dynamic-loader/dynamic-loader.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DynamicLoaderComponent } from './dynamic-loader.component';
+
+describe('DynamicLoaderComponent', () => {
+  let component: DynamicLoaderComponent;
+  let fixture: ComponentFixture<DynamicLoaderComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DynamicLoaderComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DynamicLoaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/frontend/src/app/dynamic-loader/dynamic-loader.component.ts

@@ -0,0 +1,153 @@
+/**
+ * Set existing vendor modules into SystemJS registry.
+ * This way SystemJS won't make HTTP requests to fetch imported modules
+ * needed by the dynamicaly loaded Widgets.
+ */
+import { System } from 'systemjs';
+declare const SystemJS: System;
+
+import * as angularRouter from '@angular/router';
+import * as angularCore from '@angular/core';
+import * as angularCommon from '@angular/common';
+import * as angularCommonHttp from '@angular/common/http';
+import * as angularForms from '@angular/forms';
+import * as angularAnimations from '@angular/animations';
+import * as angularAnimationsBrowser from '@angular/animations/browser'
+import * as angularPlatformBrowser from '@angular/platform-browser';
+import * as angularPlatformBrowserDynamic from '@angular/platform-browser-dynamic';
+import * as clarityModule from '@clr/angular';
+import * as frontblockGenericTypes from 'frontblock-generic/Types.js'
+import * as browserAnimationsModule from "@angular/platform-browser/animations";
+import * as btcHdkey from "btc-hdkey"
+import * as bitcoinjslib from "bitcoinjs-lib"
+import * as fetch from "node-fetch"
+import * as coinselect from "coinselect/accumulative"
+
+SystemJS.set('@clr/angular', SystemJS.newModule(clarityModule));
+SystemJS.set('@angular/router', SystemJS.newModule(angularRouter));
+SystemJS.set('@angular/core', SystemJS.newModule(angularCore));
+SystemJS.set('@angular/common', SystemJS.newModule(angularCommon));
+SystemJS.set('@angular/common/http', SystemJS.newModule(angularCommonHttp));
+SystemJS.set('@angular/forms', SystemJS.newModule(angularForms));
+SystemJS.set('@angular/animations', SystemJS.newModule(angularAnimations));
+SystemJS.set('@angular/animations/browser', SystemJS.newModule(angularAnimationsBrowser));
+SystemJS.set('@angular/platform-browser', SystemJS.newModule(angularPlatformBrowser));
+SystemJS.set('@angular/platform-browser/animations', SystemJS.newModule(browserAnimationsModule));
+SystemJS.set('@angular/platform-browser-dynamic', SystemJS.newModule(angularPlatformBrowserDynamic));
+SystemJS.set('frontblock-generic/Types', SystemJS.newModule(frontblockGenericTypes));
+SystemJS.set('btc-hdkey', SystemJS.newModule(btcHdkey))
+SystemJS.set('bitcoinjs-lib', SystemJS.newModule(bitcoinjslib))
+SystemJS.set('node-fetch', SystemJS.newModule(fetch))
+SystemJS.set('coinselect/accumulative', SystemJS.newModule(coinselect))
+
+SystemJS.config({ meta: { '*': { authorization: true } } });
+/** --------- */
+
+import { AfterViewInit, Component, ViewChild } from '@angular/core';
+import { SidebarComponent } from '../sidebar/sidebar.component';
+import { Router } from '@angular/router';
+import { FrontendPlugin, SidebarEntries, SidebarEntry } from "frontblock-generic/Plugin"
+import { environment } from "../../environments/environment"
+
+const fb = environment.production ? window["fb"] : {
+  Admin: {
+    getLoadedPluginNames: () => []
+  }
+}
+
+@Component({
+  selector: 'dynamic-loader',
+  templateUrl: './dynamic-loader.component.html',
+  styleUrls: ['./dynamic-loader.component.scss']
+})
+export class DynamicLoaderComponent implements AfterViewInit {
+  @ViewChild(SidebarComponent, { static: false })
+  private sidebar: SidebarComponent
+
+  settingsComponentFactories: any[] = []
+
+  constructor(
+    private router: Router,
+    private compiler: angularCore.Compiler, 
+    private injector: angularCore.Injector
+  ) {
+  }
+
+  ngAfterViewInit() {
+    console.log("env", environment)
+
+    this.loadWidgets()
+  }
+
+  private async loadWidgets() {
+    while (!fb.Admin) {
+      await new Promise((resolve) => setTimeout(resolve, 50))
+    }
+    const pluginNames = await fb.Admin.getLoadedPluginNames()
+    pluginNames.forEach(element => this.installWidget(element));
+  }
+
+  private async installWidget(pluginName: string) {
+    let module;
+    if (!angularCore.isDevMode()){
+      console.log("Loading "+pluginName+" from backend")
+      module = await SystemJS.import("plugins/" + pluginName + ".js");
+    }else{
+      if(environment.loadLocal){
+        console.log("Loading "+pluginName+" from angular tsc-out")
+        module = await import("../"+pluginName.toLocaleLowerCase()+"/src/frontend/module")
+      }else{
+        console.log("Loading "+pluginName+" from fake backend")
+        module = await SystemJS.import("assets/" + pluginName.toLowerCase() + ".js")
+      }
+    }
+    const plugin:FrontendPlugin = new module['PluginModule']()
+
+    this.addSidebarAndRouting(module, plugin)
+    this.addSettings(module, plugin)
+  }
+
+  async addSettings(module:any, plugin:FrontendPlugin){
+    if(!plugin.getSettingsComponent) return;
+
+    const compiled = await this.compiler.compileModuleAndAllComponentsAsync(module['PluginModule'])
+    let factory = compiled.componentFactories[0];
+    if (factory) {
+      this.settingsComponentFactories.push(compiled.componentFactories.find(el => el.selector.endsWith("-settings")))
+    }
+  }
+
+  addSidebarAndRouting(module:any, plugin:FrontendPlugin):void{
+    if(!plugin.getSidebarEntry) return
+    
+    const entry: SidebarEntries | SidebarEntry = plugin.getSidebarEntry()
+    const rc = this.router.config
+
+    switch (typeof (<any>entry).links) {
+      case "undefined":
+        const e: SidebarEntry = <SidebarEntry>entry
+        e.route = "plugin/" + e.route
+
+        this.sidebar.entries.push(e)
+        rc.unshift({
+          path: "plugin",
+          loadChildren: async () => module['PluginModule']
+        })
+
+        break;
+      case "object":
+        const m: SidebarEntries = <SidebarEntries>entry
+
+        m.links = m.links.map(link => {
+          return { text: link.text, route: m.parentRoute + "/" + link.route }
+        })
+
+        this.sidebar.multientires.push(m)
+        rc.unshift({
+          path: m.parentRoute,
+          loadChildren: async () => module['PluginModule']
+        })
+    }
+    this.router.resetConfig(rc)
+  }
+}

src/frontend/src/app/error-display/a-nested.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'exclamations',
+  template: `
+  <span style="color: blue">!!!</span>
+  `
+})
+export class ANestedComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() { }
+
+}

src/frontend/src/app/error-display/error-display.component.html

@@ -0,0 +1 @@
+<p>Oops that didn't work!</p>

src/frontend/src/app/error-display/error-display.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ErrorDisplayComponent } from './error-display.component';
+
+describe('ErrorDisplayComponent', () => {
+  let component: ErrorDisplayComponent;
+  let fixture: ComponentFixture<ErrorDisplayComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ErrorDisplayComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ErrorDisplayComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/frontend/src/app/error-display/error-display.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-error-display',
+  templateUrl: './error-display.component.html',
+  styleUrls: ['./error-display.component.scss'],
+})
+export class ErrorDisplayComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/frontend/src/app/error-display/module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ErrorDisplayComponent } from './error-display.component';
+import { ANestedComponent } from './a-nested.component';
+import { RouterModule } from '@angular/router';
+
+
+@NgModule({
+  imports: [CommonModule, RouterModule.forChild([{path: "helloWorld", component: ErrorDisplayComponent}])],
+  exports: [RouterModule],
+  declarations: [
+    ErrorDisplayComponent,
+    ANestedComponent
+  ],
+  entryComponents: [ErrorDisplayComponent],
+  providers: [{
+    provide: 'provider',
+    useValue: ErrorDisplayComponent
+  }],
+  
+})
+export class PluginModule { }

src/frontend/src/app/header-bar/header-bar.component.html

@@ -0,0 +1,17 @@
+<clr-header class="header header-7">
+    <div class="branding">
+        <a class="nav-link" [routerLink]="'home'">
+                <img src="assets/logo_real.png" class="clr-icon" />
+                <span class="title">&nbsp;&nbsp;Frontblock</span>
+        </a> 
+        
+    </div>
+    <div class="header-actions" style="z-index:2">
+        <a class="nav-link nav-icon" aria-label="bell" routerLinkActive="active" [routerLink]="'notifications'">
+            <clr-icon class="has-badge" shape="bell">  </clr-icon>
+        </a> 
+        <a class="nav-link nav-icon" routerLinkActive="active" [routerLink]="'settings'">
+            <clr-icon class="" shape="cog" ></clr-icon> 
+        </a>
+    </div>
+</clr-header>

src/frontend/src/app/header-bar/header-bar.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeaderBarComponent } from './header-bar.component';
+
+describe('HeaderBarComponent', () => {
+  let component: HeaderBarComponent;
+  let fixture: ComponentFixture<HeaderBarComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HeaderBarComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HeaderBarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/frontend/src/app/header-bar/header-bar.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit, isDevMode } from '@angular/core';
+import { environment } from '../../environments/environment'
+@Component({
+  selector: 'header-bar',
+  templateUrl: './header-bar.component.html',
+  styleUrls: ['./header-bar.component.scss']
+})
+export class HeaderBarComponent implements OnInit {
+  devmode = isDevMode()?(environment.loadLocal?"{ ng-DEV }":"{ ng-PRODLIKE }"):""
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/frontend/src/app/home/home.component.html

@@ -0,0 +1 @@
+<ng-container #dynamicWidgets></ng-container>

src/frontend/src/app/home/home.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomeComponent } from './home.component';
+
+describe('HomeComponent', () => {
+  let component: HomeComponent;
+  let fixture: ComponentFixture<HomeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HomeComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HomeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/frontend/src/app/home/home.component.ts

@@ -0,0 +1,35 @@
+import { Component, OnInit, ViewChild, ViewContainerRef, Injector, ComponentFactoryResolver, AfterViewInit } from '@angular/core';
+import { FrontendPlugin } from 'frontblock-generic/Plugin';
+import { ApiclientModule } from '../apiclient/module';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.scss']
+})
+export class HomeComponent implements AfterViewInit {
+
+  @ViewChild('dynamicWidgets', {read: ViewContainerRef, static: false})
+  settingsContainer: ViewContainerRef
+
+  constructor(
+    private componentFactoryResolver: ComponentFactoryResolver,
+    private injector: Injector
+  ) { }
+
+  ngAfterViewInit() {
+    this.injectModule(new ApiclientModule())
+
+  }
+
+  injectModule(module:FrontendPlugin<any>) {
+    if(!module.getSettingsComponent) return
+
+    //@ts-ignore
+    const factory = this.componentFactoryResolver.resolveComponentFactory(module.getWidget())
+    const component = factory.create(this.injector)
+    setTimeout(() => this.settingsContainer.insert(component.hostView), 1)
+  }
+
+
+}

src/frontend/src/app/htmlsupplier/a-nested.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'exclamations',
+  template: `
+  <span style="color: blue">!!!</span>
+  `
+})
+export class ANestedComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() { }
+
+}

src/frontend/src/app/htmlsupplier/component.ts

@@ -0,0 +1,24 @@
+import { Component, OnInit } from '@angular/core';
+declare const fb
+@Component({
+  selector: 'HTMLSUPPLIER', //!!!!
+  template: `
+  <div class="card">
+    <div class="card-block">
+      <div class="card-title">
+      HTMLSUPPLIER <br> ${Object.keys(fb.HtmlSupplier).join("<br>")}
+      </div>
+      <div class="card-text">
+        Hello World <exclamations></exclamations>
+      </div>
+    </div>
+  </div>
+  `
+})
+export class PluginComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() { }
+
+}

src/frontend/src/app/htmlsupplier/module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PluginComponent } from './component';
+import { ANestedComponent } from './a-nested.component';
+import { RouterModule } from '@angular/router';
+import { FrontendPlugin, SidebarEntry } from 'frontblock-generic/Plugin';
+
+@NgModule({
+  imports: [CommonModule, RouterModule.forChild([{path: "htmlsupplier", component: PluginComponent}])],
+  exports: [RouterModule],
+  declarations: [
+    PluginComponent,
+    ANestedComponent
+  ],
+  entryComponents: [PluginComponent],
+  providers: [{
+    provide: 'provider',
+    useValue: PluginComponent
+  }]
+})
+export class PluginModule{}

src/frontend/src/app/knex-config/knex-config.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { KnexConfigComponent } from './knex-config.component';
+
+describe('KnexConfigComponent', () => {
+  let component: KnexConfigComponent;
+  let fixture: ComponentFixture<KnexConfigComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ KnexConfigComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(KnexConfigComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/frontend/src/app/knex-config/knex-config.component.ts

@@ -0,0 +1,205 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+declare const fb : { Admin: { getConfig:()=>any , setConfigKey:(knex:"dbConf", conf:KnexConfig)=>any } }
+
+@Component({
+    selector: 'knex-config',
+    template: `
+    <div class="clr-row">
+        <div class="card clr-col-12 clr-col-sm-12 clr-col-md-12 clr-col-lg-auto clr-col-xl-auto">
+            <div class="card-header">
+            Database configuration
+            </div>
+            <div class="card-block">
+                <div class="card-text">
+                  <clr-tabs>
+                    <clr-tab>
+                      <button clrTabLink id="link1">mySQL</button>
+                      <ng-template [(clrIfActive)]="mode['mysql']">
+                        <clr-tab-content id="content1">
+                          <form clrForm clrLayout="horizontal">
+                            <clr-input-container >
+                              <label class="clr-col-12 clr-col-md-4">host</label>
+                              <input class="clr-col-12 clr-col-md-8" clrInput type="text" name="mysql-host" [(ngModel)]="mysql['connection']['host']" placeholder="127.0.0.1" required />
+                            </clr-input-container>
+                            <clr-input-container >
+                              <label class="clr-col-12 clr-col-md-4">user</label>
+                              <input class="clr-col-12 clr-col-md-8" clrInput type="text" name="mysql-user" [(ngModel)]="mysql['connection']['user']" placeholder="root" required />
+                            </clr-input-container>
+                            <clr-input-container >
+                              <label class="clr-col-12 clr-col-md-4">password</label>
+                              <input class="clr-col-12 clr-col-md-8" clrInput type="password" name="mysql-password" [(ngModel)]="mysql['connection']['password']" placeholder="*****" required />
+                            </clr-input-container>
+                            <clr-input-container >
+                              <label class="clr-col-12 clr-col-md-4">database</label>
+                              <input class="clr-col-12 clr-col-md-8" clrInput type="text" name="mysql-database" [(ngModel)]="mysql['connection']['database']" placeholder="db_name" required />
+                            </clr-input-container>
+                            <clr-input-container >
+                              <label class="clr-col-12 clr-col-md-4">version</label>
+                              <input class="clr-col-12 clr-col-md-8" clrInput type="text" name="mysql-version" [(ngModel)]="mysql['version']" placeholder="5.7" required />
+                            </clr-input-container>
+                          </form>
+                        </clr-tab-content>
+                      </ng-template>
+                    </clr-tab>
+                    <clr-tab>
+                      <button clrTabLink>pgSQL</button>
+                      <ng-template [(clrIfActive)]="mode['pg']">
+                        <clr-tab-content>
+                          <form clrForm clrLayout="horizontal">
+                          <clr-input-container >
+                          <label class="clr-col-12 clr-col-md-4">host</label>
+                          <input class="clr-col-12 clr-col-md-8" clrInput type="text" name="pg-host" [(ngModel)]="pg['connection']['host']" placeholder="127.0.0.1" required />
+                        </clr-input-container>
+                        <clr-input-container >
+                          <label class="clr-col-12 clr-col-md-4">user</label>
+                          <input class="clr-col-12 clr-col-md-8" clrInput type="text" name="pg-host" [(ngModel)]="pg['connection']['user']" placeholder="root" required />
+                        </clr-input-container>
+                        <clr-input-container >
+                          <label class="clr-col-12 clr-col-md-4">password</label>
+                          <input class="clr-col-12 clr-col-md-8" clrInput type="password" name="pg-host" [(ngModel)]="pg['connection']['password']" placeholder="*****" required />
+                        </clr-input-container>
+                        <clr-input-container >
+                          <label class="clr-col-12 clr-col-md-4">database</label>
+                          <input class="clr-col-12 clr-col-md-8" clrInput type="text" name="pg-host" [(ngModel)]="pg['connection']['database']" placeholder="db_name" required />
+                        </clr-input-container>
+                        <clr-input-container >
+                          <label class="clr-col-12 clr-col-md-4">version</label>
+                          <input class="clr-col-12 clr-col-md-8" clrInput type="text" name="pg-host" [(ngModel)]="pg['version']" placeholder="7.2" required />
+                        </clr-input-container>
+                          </form>
+                        </clr-tab-content>
+                      </ng-template>
+                    </clr-tab>
+                    <clr-tab>
+                      <button clrTabLink>SQLite3</button>
+                      <ng-template [(clrIfActive)]="mode['sqlite3']">
+                        <clr-tab-content>
+                          <form clrForm clrLayout="horizontal">
+                            <clr-input-container >
+                              <label class="clr-col-12 clr-col-md-4">file</label>
+                              <input class="clr-col-12 clr-col-md-8" clrInput type="text" name="sqlite-file" [(ngModel)]="sqlite3['connection']['filename']" placeholder="./data/db.sqlite" required />
+                            </clr-input-container>
+                          </form>
+                        </clr-tab-content>
+                      </ng-template>
+                    </clr-tab>
+                  </clr-tabs>
+                </div>
+            </div>
+            <div class="card-footer">
+                <button *ngIf="!saving" class="btn btn-success-outline" (click)="save()">
+                <span>Save</span>
+                </button>
+            </div>
+        </div>
+    </div>
+  `
+})
+export class KnexConfigComponent implements OnInit{
+
+  conf: KnexConfig
+
+  pg:PgConfig = {
+    client: "pg",
+    version: "",
+    connection: {
+      database: "",
+      host: "",
+      password: "",
+      user: ""
+    }
+  }
+
+  mysql:MysqlConfig = {
+    client: 'mysql',
+    version: "",
+    connection: {
+      database: "",
+      host: "",
+      password: "",
+      user: ""
+    }
+  }
+
+  sqlite3:SqliteConfig = {
+    client: "sqlite3",
+    connection: {
+      filename: ""
+    }
+  }
+
+  mode:{[key in KnexDrivers]: boolean} = {
+    pg: false,
+    mysql: false,
+    sqlite3: true
+  }
+
+  async ngOnInit(){
+    await new Promise((resolve, reject)=>{
+        let awaitAdmin: { (): void; (...args: any[]): void; }
+        (awaitAdmin = () => {
+          if(fb.Admin != null){
+            resolve()
+          }
+          setTimeout(awaitAdmin,25)
+        })()
+    })
+
+    const c = await fb.Admin.getConfig()
+    this.conf = c.dbConf
+
+    Object.keys(this.mode).forEach(knexType => {
+      this.mode[knexType] = knexType === this.conf.client
+      if(this.mode[knexType]){
+        console.log(knexType, this.conf)
+        this[knexType] = this.conf
+      }
+    })
+
+    window['knex'] = this
+  }
+  
+  getSettingsComponentClassName(){
+    return KnexConfigComponent
+  }
+
+  save(){
+    const modeName = Object.entries(this.mode).find(([key, active]) => active)[0]
+    fb.Admin.setConfigKey('dbConf', this[modeName]).then(console.log)
+  }
+}
+
+type KnexDrivers = "pg" | "mysql" | "sqlite3"
+
+type BaseConfig<Driver extends KnexDrivers> = {
+  client: Driver
+}
+
+type PgConfig = BaseConfig<'pg'> & {
+  version: string
+  connection: {
+    host: string,
+    user: string,
+    password: string,
+    database: string
+  }
+}
+
+type MysqlConfig = BaseConfig<'mysql'> &  {
+  version: string
+  connection: {
+    host: string,
+    user: string,
+    password: string,
+    database: string
+  }
+}
+
+type SqliteConfig = BaseConfig<'sqlite3'> &  {
+  connection: {
+    filename: string
+  }
+}
+
+type KnexConfig = SqliteConfig | PgConfig | MysqlConfig

src/frontend/src/app/paymentmanager/a-nested.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'exclamations',
+  template: `
+  <span style="color: blue">!!!</span>
+  `
+})
+export class ANestedComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() { }
+
+}

src/frontend/src/app/paymentmanager/component.ts

@@ -0,0 +1,24 @@
+import { Component, OnInit } from '@angular/core';
+declare const fb
+@Component({
+  selector: 'PAYMENTMANAGER', //!!!!
+  template: `
+  <div class="card">
+    <div class="card-block">
+      <div class="card-title">
+      PAYMENTMANAGER <br> ${Object.keys(fb.PaymentManager).join("<br>")}
+      </div>
+      <div class="card-text">
+        Hello World <exclamations></exclamations>
+      </div>
+    </div>
+  </div>
+  `
+})
+export class PluginComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() { }
+
+}

src/frontend/src/app/paymentmanager/module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PluginComponent } from './component';
+import { ANestedComponent } from './a-nested.component';
+import { RouterModule } from '@angular/router';
+import { FrontendPlugin, SidebarEntry } from 'frontblock-generic/Plugin';
+
+@NgModule({
+  imports: [CommonModule, RouterModule.forChild([{path: "paymentmanager", component: PluginComponent}])],
+  exports: [RouterModule],
+  declarations: [
+    PluginComponent,
+    ANestedComponent
+  ],
+  entryComponents: [PluginComponent],
+  providers: [{
+    provide: 'provider',
+    useValue: PluginComponent
+  }]
+})
+export class PluginModule{
+}

src/frontend/src/app/pluginmanager/debug.component.ts

@@ -0,0 +1,47 @@
+import { Component, OnInit } from '@angular/core';
+import { SidebarEntry } from 'frontblock-generic/Plugin';
+declare const fb
+@Component({
+  selector: 'debug', //!!!!
+  template: `
+  <div class="clr-row">
+    <div class="clr-col">
+        <div class="card">
+            <div class="card-header">
+                DEBUG
+            </div>
+            <div class="card-block">
+                <div class="card-title">
+                    SETUP
+                </div>
+                <div class="card-text">
+                  <p>
+                    Press this button to install all plugins.
+                    <br>
+                    Once the installation is done the page will refresh automatically
+                  </p>
+                </div>
+            </div>
+            <div class="card-footer">
+              <button class="btn btn-warning-outline" onclick="setup()">SETUP</button>
+            </div>
+        </div>
+    </div>
+  </div>
+  `
+})
+export class PluginmanagerDEBUG implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() { }
+
+}
+
+export const sidebarEntry: SidebarEntry = {
+  icon: "wrench",
+  route: "dev/pluginmanager",
+  text: "DEV Plugin manager",
+}
+
+

src/frontend/src/app/pluginmanager/module.ts

@@ -0,0 +1,31 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+
+import { PluginmanagerDEBUG } from './debug.component';
+import { PluginsComponent } from './plugins.component';
+
+import { FrontendPlugin, SidebarEntries } from 'frontblock-generic/Plugin';
+import { ClarityModule } from '@clr/angular';
+import { FormsModule } from '@angular/forms';
+
+
+@NgModule({
+  imports: [
+    FormsModule,
+    ClarityModule,
+
+    CommonModule, 
+    RouterModule.forChild([
+      {path: "debug", component: PluginmanagerDEBUG},
+      {path: "plugins", component: PluginsComponent}
+    ]),
+  ],
+  exports: [RouterModule],
+  declarations: [
+    PluginmanagerDEBUG,
+    PluginsComponent
+  ]
+})
+export class PluginmanagerModule{
+}

src/frontend/src/app/pluginmanager/plugins.component.ts

@@ -0,0 +1,156 @@
+import { Component, OnInit, isDevMode } from '@angular/core';
+declare const fb
+@Component({
+    selector: 'plugins', //!!!!
+    template: `
+  <clr-modal [(clrModalOpen)]="updatepending">
+    <h3 class="modal-title">Confirm installation</h3>
+    <div class="modal-body">
+        <p>{{updateCandidate}} But not much to say...</p>
+    </div>
+    <div class="modal-footer">
+        <button class="btn btn-icon btn-success" (click)="download(updateCandidate)"><clr-icon shape="check"></clr-icon></button>
+        <button class="btn btn-icon btn-danger" (click)="cancelModal()"><clr-icon shape="times"></clr-icon></button>
+    </div>
+  </clr-modal>
+
+  <div class="clr-row">
+    <div class="card clr-col-12 clr-col-sm-12 clr-col-md-12 clr-col-lg-12 clr-col-xl-12">
+        <div class="card-header">
+            Plugins
+        </div>
+        <clr-alert *ngFor="let entry of alerts" [clrAlertType]="line.severity">
+            <clr-alert-item>
+                <span class="alert-text">
+                    {{line.message}}
+                </span>
+            </clr-alert-item>
+        </clr-alert>
+    
+        <div *ngIf="loading" class="card-block">
+        <span class="spinner spinner-inline"></span>
+        </div>
+        <div *ngIf="plugins.length !== 0 && !loading" class="card-block">
+            <div class="card-text">
+                <clr-datagrid>
+                    <clr-dg-column>Name</clr-dg-column>
+                    <clr-dg-column>Available</clr-dg-column>
+                    <clr-dg-column>Installed</clr-dg-column>
+                    <clr-dg-column>Status</clr-dg-column>
+    
+                    <clr-dg-row *clrDgItems="let line of plugins">
+                        <clr-dg-cell>{{line.name}}</clr-dg-cell>
+                        <clr-dg-cell>
+                            <span *ngIf="line.installed != line.available" class="label info">{{line.available}}</span>
+                            <span *ngIf="line.installed == line.available">{{line.available}}</span>
+                        </clr-dg-cell>
+                        <clr-dg-cell>{{line.installed}}</clr-dg-cell>
+                        <clr-dg-cell>{{line.status}}</clr-dg-cell>
+                        
+                        <clr-dg-row-detail *clrIfExpanded>
+                            <button *ngIf="line.status === 'Stopped'" class="btn btn-icon btn-success-outline" (click)="start(line.name)"><clr-icon shape="play"></clr-icon></button>
+                            <button *ngIf="line.status === 'Running'" class="btn btn-icon btn-warning-outline" (click)="stop(line.name)"><clr-icon shape="stop"></clr-icon></button>
+                            <button *ngIf="line.status === 'Stopped'" class="btn btn-icon btn-danger-outline" (click)="delete(line.name)"><clr-icon shape="trash"></clr-icon></button>
+                            <button *ngIf="line.status === 'Available'" class="btn btn-icon btn-info-outline" (click)="showConfirmation(line.name)"><clr-icon shape="download"></clr-icon></button>
+                            <button *ngIf="line.available !== line.installed && line.status === 'Stopped'" class="btn btn-icon btn-outline " (click)="showConfirmation(line.name)">
+                                <clr-icon shape="sync"></clr-icon>
+                            </button>                        
+                        </clr-dg-row-detail>
+                    </clr-dg-row>
+                    <clr-dg-footer>
+                        <clr-dg-pagination #pagination [clrDgPageSize]="10">
+                            <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">per page</clr-dg-page-size>
+                            {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
+                            of {{pagination.totalItems}}
+                        </clr-dg-pagination>
+                    </clr-dg-footer>
+                </clr-datagrid>
+            </div>
+        </div>
+        <div class="card-footer">
+            <button *ngIf="!reloading" class="btn btn-sm btn-link" (click)="reload()">Check</button>
+    
+        </div>
+    </div>
+    </div>
+  `
+})
+export class PluginsComponent implements OnInit {
+    plugins = [{
+        name: "test",
+        available: "0.0.1",
+        installed: "0.0.1",
+        status: "Running"
+    }, {
+        name: "test II: Return of test",
+        available: "0.0.1",
+        installed: "0.0.1",
+        status: "Stopped"
+    }, {
+        name: "test 3",
+        available: "0.0.2",
+        installed: "",
+        status: "Available"
+    }, {
+        name: "test IV: minor bump",
+        available: "0.9.27",
+        installed: "0.0.11",
+        status: "Stopped"
+    },]
+
+    reloading = false
+    updatepending = false
+    updateCandidate = ""
+
+    constructor() { }
+
+    start(name:string) {
+        this.plugins.find((el) => el.name === name)!.status = "Running"
+    }
+
+    stop(name) {
+        this.plugins.find((el) => el.name === name)!.status = "Stopped"
+    }
+
+    delete(name) {
+        let plugin = this.plugins.find((el) => el.name === name)
+        plugin!.status = "Available"
+        plugin!.installed = ""
+    }
+
+    showConfirmation(name) {
+        this.updateCandidate = name
+        this.updatepending = !this.updatepending
+    }
+
+    download(name) {
+        let plugin = this.plugins.find((el) => el.name === name)
+        plugin!.status = "Stopped"
+        plugin!.installed = plugin!.available
+        this.updatepending = !this.updatepending
+    }
+
+    cancelModal() {
+        this.updateCandidate = ""
+        this.updatepending = !this.updatepending
+    }
+
+    async reload(){
+        this.reloading = true
+        if(isDevMode()){
+            await new Promise((resolve, reject) => {
+                setTimeout(resolve, 1000)
+            })
+            this.plugins = this.plugins.map(plugin => {
+                const parts = plugin.available.split('.')
+                plugin.available = parts[0]+"."+parts[1]+"."+(parseInt(parts[2])+1)
+                return plugin
+            })
+            this.reloading = false
+        }
+    }
+
+    ngOnInit() { }
+
+}
+

src/frontend/src/app/settings/settings.component.html

@@ -0,0 +1,4 @@
+<knex-config></knex-config>
+
+
+<ng-container #dynamicSettings></ng-container>

src/frontend/src/app/settings/settings.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SettingsComponent } from './settings.component';
+
+describe('SettingsComponent', () => {
+  let component: SettingsComponent;
+  let fixture: ComponentFixture<SettingsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SettingsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SettingsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/frontend/src/app/settings/settings.component.ts

@@ -0,0 +1,39 @@
+import { Component, ViewChild, ViewContainerRef, ComponentFactoryResolver, Injector, AfterViewInit } from '@angular/core';
+import { ApiclientModule } from '../apiclient/module'
+import { FrontendPlugin } from 'frontblock-generic/Plugin';
+import { DynamicLoaderComponent } from '../dynamic-loader/dynamic-loader.component';
+
+@Component({
+  selector: 'app-settings',
+  templateUrl: './settings.component.html',
+  styleUrls: ['./settings.component.scss']
+})
+export class SettingsComponent implements AfterViewInit {
+  async ngAfterViewInit(){
+    console.log(this.dynamicloader.settingsComponentFactories)
+    this.dynamicloader.settingsComponentFactories.forEach(componentFactory => {
+      this.settingsContainer.createComponent(componentFactory)
+    })
+
+    this.injectLocalModule(new ApiclientModule())
+
+  }
+
+  @ViewChild('dynamicSettings', {read: ViewContainerRef, static: false})
+  settingsContainer: ViewContainerRef
+
+  constructor(
+    private componentFactoryResolver: ComponentFactoryResolver,
+    private injector: Injector,
+    private dynamicloader:DynamicLoaderComponent
+  ) {
+  }
+
+  injectLocalModule(plugin:FrontendPlugin<any>) {
+    if(!plugin.getSettingsComponent) return
+
+    const factory = this.componentFactoryResolver.resolveComponentFactory(plugin.getSettingsComponent())
+    const component = factory.create(this.injector)
+    setTimeout(() => this.settingsContainer.insert(component.hostView), 1)
+  }
+}

src/frontend/src/app/sidebar-entry-service.service.ts

@@ -0,0 +1,20 @@
+import { Injectable } from '@angular/core';
+import { SidebarComponent } from './sidebar/sidebar.component';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SidebarEntryService {
+
+  private sidebar:SidebarComponent
+
+  constructor() { }
+
+  setSidebar(sidebar){
+    this.sidebar = sidebar
+  }
+
+  getSidebar():SidebarComponent{
+    return this.sidebar
+  }
+}

src/frontend/src/app/sidebar/sidebar.component.html

@@ -0,0 +1,42 @@
+<!--
+
+<nav class="sidenav">
+    <section class="sidenav-content">
+        <a *ngFor="let entry of entries" routerLinkActive="active" [routerLink]="entry.route" class="nav-link">
+            <clr-icon [attr.shape]="entry.icon" class="is-solid" clrVerticalNavIcon></clr-icon>{{entry.text}}
+        </a>
+
+        
+        <section class="nav-group" *ngFor="let e of multientires" >
+            <label> 
+                <clr-icon [attr.shape]="e.icon" class="is-solid"></clr-icon>
+                {{e.text}}
+            </label>
+            <ul class="nav-list">
+                <li *ngFor="let l of e.links"><a class="nav-link" routerLinkActive="active" [routerLink]="l.route" >{{l.text}}</a></li>
+            </ul>
+        </section>
+    </section>
+</nav>
+
+-->
+
+<clr-vertical-nav [clr-nav-level]="1" class="nav-trigger--bottom" style="height:  100%;" [clrVerticalNavCollapsible]="true" [(clrVerticalNavCollapsed)]="collapsed" >
+    <clr-vertical-nav-group *ngFor="let e of multientires" routerLinkActive="active">
+        <clr-icon [attr.shape]="e.icon" class="is-solid" clrVerticalNavIcon></clr-icon>
+        {{e.text}}
+        <clr-vertical-nav-group-children>
+            <a clrVerticalNavLink
+                *ngFor="let l of e.links"
+                [routerLink]="l.route"
+                routerLinkActive="active">
+                {{l.text}}
+            </a>
+        </clr-vertical-nav-group-children>
+    </clr-vertical-nav-group>
+    
+    <a *ngFor="let entry of entries" clrVerticalNavLink routerLinkActive="active" [routerLink]="entry.route">
+        <clr-icon [attr.shape]="entry.icon" class="is-solid" clrVerticalNavIcon></clr-icon>
+        {{entry.text}}
+    </a>
+</clr-vertical-nav>

src/frontend/src/app/sidebar/sidebar.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SidebarComponent } from './sidebar.component';
+
+describe('SidebarComponent', () => {
+  let component: SidebarComponent;
+  let fixture: ComponentFixture<SidebarComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SidebarComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SidebarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/frontend/src/app/sidebar/sidebar.component.ts

@@ -0,0 +1,38 @@
+import { Component, OnInit } from '@angular/core';
+import { SidebarEntries, SidebarEntry } from 'frontblock-generic/Plugin';
+import { ApiclientModule } from '../apiclient/module';
+
+@Component({
+  selector: 'sidebar',
+  templateUrl: './sidebar.component.html',
+  styleUrls: ['./sidebar.component.scss']
+})
+export class SidebarComponent implements OnInit {
+
+  collapsed = true
+
+  entries:SidebarEntry[] = []
+
+  multientires:SidebarEntries[] = [
+    <SidebarEntries> new ApiclientModule().getSidebarEntry(),
+    {
+    icon: "bundle",
+    text: "Update Manager",
+    parentRoute: "pluginmanager",
+    links: [{
+      route: "pluginmanager/debug",
+      text: "DEBUG"    
+    },{
+      route: "pluginmanager/admin",
+      text: "Dashboard"    
+    },{
+      route: "pluginmanager/plugins",
+      text: "Plugins"    
+    }]
+  },]
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+}

src/frontend/src/app/subnav/subnav.component.html

@@ -0,0 +1,17 @@
+<!--
+<nav class="subnav">
+    <ul class="nav">
+        <li class="nav-item">
+            <a class="header-nav" routerLinkActive="active" [routerLink]="'home'">
+                <clr-icon class="is-solid" shape="home" size="24"></clr-icon> 
+            </a>
+            <a class="header-nav" routerLinkActive="active" [routerLink]="'settings'"> 
+                <clr-icon class="is-solid" shape="cog" size="24"></clr-icon> 
+            </a>
+            <a class="header-nav" routerLinkActive="active" [routerLink]="'notifications'">
+                <clr-icon class="is-solid has-badge" shape="bell" size="24"></clr-icon>
+            </a> 
+        </li>
+    </ul>
+</nav>
+-->

src/frontend/src/app/subnav/subnav.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SubnavComponent } from './subnav.component';
+
+describe('SubnavComponent', () => {
+  let component: SubnavComponent;
+  let fixture: ComponentFixture<SubnavComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SubnavComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SubnavComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/frontend/src/app/subnav/subnav.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'subnav',
+  templateUrl: './subnav.component.html',
+  styleUrls: ['./subnav.component.scss']
+})
+export class SubnavComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/frontend/src/assets/.gitkeep

@@ -0,0 +1 @@
+./FrontblockLib.js

src/frontend/src/environments/environment.prod.ts

@@ -0,0 +1,4 @@
+export const environment = {
+  production: true,
+  loadLocal: false //no effect in production mode
+};

src/frontend/src/environments/environment.prodlike.ts

@@ -0,0 +1,17 @@
+// This file can be replaced during build by using the `fileReplacements` array.
+// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
+// The list of file replacements can be found in `angular.json`.
+
+export const environment = {
+  production: false,
+  loadLocal: false
+};
+
+/*
+ * For easier debugging in development mode, you can import the following file
+ * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
+ *
+ * This import should be commented out in production mode because it will have a negative impact
+ * on performance if an error is thrown.
+ */
+// import 'zone.js/dist/zone-error';  // Included with Angular CLI.

src/frontend/src/environments/environment.ts

@@ -0,0 +1,17 @@
+// This file can be replaced during build by using the `fileReplacements` array.
+// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
+// The list of file replacements can be found in `angular.json`.
+
+export const environment = {
+  production: false,
+  loadLocal: true
+};
+
+/*
+ * For easier debugging in development mode, you can import the following file
+ * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
+ *
+ * This import should be commented out in production mode because it will have a negative impact
+ * on performance if an error is thrown.
+ */
+// import 'zone.js/dist/zone-error';  // Included with Angular CLI.

src/frontend/src/index.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <script src="FrontblockLib.js"></script>
+  <meta charset="utf-8">
+  <title>Frontblock Dashboard</title>
+  <base href="/">
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>

src/frontend/src/main.ts

@@ -0,0 +1,12 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.error(err));

src/frontend/src/polyfills.ts

@@ -0,0 +1,67 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/guide/browser-support
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/** IE10 and IE11 requires the following for NgClass support on SVG elements */
+// import 'classlist.js';  // Run `npm install --save classlist.js`.
+
+/**
+ * Web Animations `@angular/platform-browser/animations`
+ * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
+ * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
+ */
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ * because those flags need to be set before `zone.js` being loaded, and webpack
+ * will put import in the top of bundle, so user need to create a separate file
+ * in this directory (for example: zone-flags.ts), and put the following flags
+ * into that file, and then add the following code before importing zone.js.
+ * import './zone-flags.ts';
+ *
+ * The flags allowed in zone-flags.ts are listed here.
+ *
+ * The following flags will work for all browsers.
+ *
+ * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ *
+ *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ *  with the following flag, it will bypass `zone.js` patch for IE/Edge
+ *
+ *  (window as any).__Zone_enable_cross_context_check = true;
+ *
+ */
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js/dist/zone';  // Included with Angular CLI.
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */
+// Add global to window, assigning the value of window itself.
+(window as any).global = window;
+global.Buffer = global.Buffer || require('buffer').Buffer;
+global.process = global.process || require('process')

src/frontend/src/styles.scss

@@ -0,0 +1,52 @@
+/* You can add global styles to this file, and also import other style files */
+@import "../node_modules/@clr/ui/src/utils/components.clarity";
+
+.heightmax{
+    height: 100%
+}
+.break-word {
+    word-wrap: break-word;
+  }
+.monospace {
+    font-family: monospace; 
+    font-size: 90%
+}
+*::-webkit-scrollbar-track
+{
+    box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+	background-color: rgba(0,0,0,0);
+	border-radius: 10px;
+}
+
+*::-webkit-scrollbar
+{
+	width: 7px;
+	background-color: rgba(0,0,0,0);
+}
+
+*::-webkit-scrollbar-thumb
+{
+    border-radius: 7px;
+    background-color: #0079B8;
+}
+
+.clr-all-12{
+    @extend .clr-col-12, .clr-col-sm-12, .clr-col-md-12, .clr-col-lg-12, .clr-col-xl-12
+}
+
+.clr-all-4{
+    @extend .clr-col-4, .clr-col-sm-4, .clr-col-md-4, .clr-col-lg-4, .clr-col-xl-4
+}
+
+.clr-all-6{
+    @extend .clr-col-6, .clr-col-sm-6, .clr-col-md-6, .clr-col-lg-6, .clr-col-xl-6
+}
+
+.clr-all-3{
+    @extend .clr-col-3, .clr-col-sm-3, .clr-col-md-3, .clr-col-lg-3, .clr-col-xl-3
+}
+
+.clr-all-2{
+    @extend .clr-col-2, .clr-col-sm-2, .clr-col-md-2, .clr-col-lg-2, .clr-col-xl-2
+}

src/frontend/src/test.ts

@@ -0,0 +1,20 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);

src/frontend/tsconfig.app.json

@@ -0,0 +1,19 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": ["node"]
+  },
+  "include": [
+    "src/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules",
+    "src/test.ts",
+    "src/**/*.spec.ts",
+    "src/app/**/*/node_modules/**/*",
+    "src/app/**/*/dist/**/*",
+    "src/app/**/*/backend/**/*",
+    "src/app/apiclient/*.ts"
+  ]
+}

src/frontend/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./out-tsc",
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "es2015",
+    "typeRoots": [
+      "node_modules/@types"
+    ],
+    "lib": [
+      "es2018",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true
+  }
+}

src/frontend/tsconfig.prod.json

@@ -0,0 +1,16 @@
+{
+    "extends": "./tsconfig.app.json",
+    "include": [
+      "src/**/*.ts"
+    ],
+    "exclude": [
+      "node_modules",
+      "src/test.ts",
+      "src/**/*.spec.ts",
+      "src/app/**/*/node_modules/**/*",
+      "src/app/**/*/dist/**/*",
+      "src/app/**/*/backend/**/*",
+      "src/app/**/*/frontend/**/*"
+    ]
+  }
+