portable check for dev mode

src/frontend/dashboard/angular.json

@@ -30,7 +30,7 @@
             "styles": [
               "src/styles.scss",
               "node_modules/@clr/icons/clr-icons.min.css",
-              "node_modules/@clr/ui/clr-ui.min.css"
+              "node_modules/@clr/ui/clr-ui-dark.min.css"
             ],
             "scripts": [
               "node_modules/systemjs/dist/system.js",

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

@@ -1,10 +1,8 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, isDevMode } from '@angular/core';
-import { FrontblockApiConf } from 'frontblock';
 import { SubscriptionResponse, parseResponse, SuccessResponse } from 'frontblock-generic/Types.js';
-import { environment } from "../../environments/environment"
 
-const fb = environment.production?window["fb"]:{
+const fb = !isDevMode() ? window["fb"] : {
-    ApiClient : {
+    ApiClient: {
         setConfig: async () => {
             await new Promise((resolve, reject) => {
                 setTimeout(() => {
@@ -50,29 +48,27 @@ const fb = environment.production?window["fb"]:{
     </div>
     <div *ngIf="entries.length !== 0 && !loading" class="card-block">
         <div class="card-text">
-            <table class="table table-noborder">
+            <clr-datagrid>
-                <thead>
+                <clr-dg-column>UUID</clr-dg-column>
-                    <tr>
+                <clr-dg-column>Expiry</clr-dg-column>
-                        <th class="left">UUID</th>
+                <clr-dg-column>Creation</clr-dg-column>
-                        <th>Expiry</th>
+                <clr-dg-column> </clr-dg-column>
-                        <th>Creation</th>
+
-                        <th class="left"></th>
+                <clr-dg-row *ngFor="let line of entries">
-                    </tr>
+                    <clr-dg-cell>{{line.uid}}</clr-dg-cell>
-                </thead>
+                    <clr-dg-cell>{{line.expiry}}</clr-dg-cell>
-                <tbody>
+                    <clr-dg-cell>{{line.created | date}}</clr-dg-cell>
-                    <tr *ngFor="let line of entries" >
+                    <clr-dg-cell><button class="btn btn-sm btn-link" (click)="quit(line.uid)"><clr-icon shape="times"></clr-icon></button></clr-dg-cell>
-                        <td class="left">{{line.uid}}</td>
+                </clr-dg-row>
-                        <td>{{line.expiry}}</td>
+
-                        <td>{{line.created}}</td>
+                <clr-dg-footer>
-                        <td class="left"><button class="btn btn-link btn-sm" (click)="quit(line.uid)">Quit</button></td>
+
-                    </tr>
+                {{entries.length}} entries</clr-dg-footer>
-                </tbody>
+            </clr-datagrid>
-            </table>
         </div>
     </div>
     <div class="card-footer">
         <button *ngIf="!loading" class="btn btn-sm btn-link" (click)="load()">{{actionName}}</button>
-
     </div>
     </div>
   `
@@ -80,11 +76,7 @@ const fb = environment.production?window["fb"]:{
 export class ApiclientConsumptionComponent implements OnInit {
     loading:boolean = false
     actionName:string = "load"
-    entries:SubscriptionResponse[] = [{
+    entries:SubscriptionResponse[] = []
-        uid: "1231",
-        message: "",
-        result: "Success"
-    }]
     alerts: {
         severity: "danger" | "warning" | "success"
         message: string

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

@@ -1,8 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { FrontblockApiConf } from 'frontblock';
-import { environment } from "../../environments/environment"
+import { isDevMode } from '@angular/core';
 
-const fb = environment.production ? window["fb"] : {
+const fb = !isDevMode ? window["fb"] : {
     ApiClient: {
         setConfig: async () => {
             await new Promise((resolve, reject) => {
@@ -23,33 +23,35 @@ const fb = environment.production ? window["fb"] : {
         </div>
         <div class="card-block">
             <div class="card-text">
-                <form clrForm clrLayout="vertical">
+                <form clrForm clrLayout="horizontal">
-                    <clr-input-container>
+                    <div class="clr-row clr-form-control ng-star-inserted">
-                        <label>testnet</label>
+                        <label class="clr-col-12 clr-col-md-4 clr-control-label">testnet</label>
-                        <clr-control-error>We need your first name for legal compliance</clr-control-error>
+                        <div class="clr-col-12 clr-col-md-8">
-                    </clr-input-container>
                             <input type="checkbox" [(ngModel)]="testnet"  (change)="updateTestnet($event)" name="testnetToggle" clrToggle  />
+                        </div>
+                    </div>
                     
                     <clr-input-container *ngIf="!testnet">
-                        <label>API key</label>
+                        <label class="clr-col-12 clr-col-md-4">API key</label>
-                        <input clrInput type="text" name="apiKey" required />
+                        <input class="clr-col-12 clr-col-md-8" clrInput type="text" name="apiKey" required />
-                        <clr-control-error>We need your first name for legal compliance</clr-control-error>
                     </clr-input-container>
                 
                     <clr-input-container *ngIf="advanced">
-                        <label>API address</label>
+                        <label class="clr-col-12 clr-col-md-4">API address</label>
-                        <input type="text" [(ngModel)]="data.apiHost" (change)="updatePort($event)" clrInput name="apiHost" required />
+                        <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>
 
-                    <clr-checkbox-wrapper *ngIf="advanced" >
+                    <div class="clr-row clr-form-control ng-star-inserted" *ngIf="advanced">
-                        <input [(ngModel)]="data.tls" type="checkbox" clrCheckbox value="tls" name="options" />
+                        <label class="clr-col-12 clr-col-md-4 clr-control-label">Use TLS</label>
-                        <label>Use TLS</label>
+                        <div class="clr-col-12 clr-col-md-8">
-                    </clr-checkbox-wrapper>
+                            <input class="clr-col-12 clr-col-md-8" [(ngModel)]="data.tls" type="checkbox" clrCheckbox value="tls" name="options" />
+                        </div>
+                    </div>
                     
-                    <clr-input-container *ngIf="advanced">
+                    <clr-input-container class="clr-row" *ngIf="advanced">
-                        <label>Port</label>
+                        <label class="clr-col-12 clr-col-md-4">Port</label>
-                        <input [(ngModel)]="data.apiPort" clrInput type="number" name="lastName" required />
+                        <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>
@@ -59,7 +61,7 @@ const fb = environment.production ? window["fb"] : {
             </div>
         </div>
         <div class="card-footer">
-            <button *ngIf="!saving" class="btn btn-success" (click)="save()">
+            <button *ngIf="!saving" class="btn btn-success-outline" (click)="save()">
             <span>Save</span>
             </button>
 
@@ -67,7 +69,6 @@ const fb = environment.production ? window["fb"] : {
             <span class="spinner spinner-inline"></span>
             </button>
             <button *ngIf="!advanced" class="btn btn-sm btn-link" (click)="setAdvanced()">Advanced</button>
-
         </div>
     </div>
   `

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

@@ -1,9 +1,7 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, isDevMode } from '@angular/core';
-import { FrontblockApiConf } from 'frontblock';
 import { SubscriptionResponse, SuccessResponse, parseResponse } from 'frontblock-generic/Types.js';
-import { environment } from "../../environments/environment"
 
-const fb = environment.production ? window["fb"] : {
+const fb = !isDevMode() ? window["fb"] : {
     ApiClient: {
         setConfig: async () => {
             await new Promise((resolve, reject) => {
@@ -38,7 +36,6 @@ const fb = environment.production ? window["fb"] : {
       <div class="card-header">
       Subscriptions
       </div>
-    
       <clr-alert *ngFor="let entry of alerts" [clrAlertType]="entry.severity">
           <clr-alert-item>
               <span class="alert-text">
@@ -52,24 +49,23 @@ const fb = environment.production ? window["fb"] : {
       </div>
       <div *ngIf="entries.length !== 0 && !loading" class="card-block">
           <div class="card-text">
-            <table class="table table-noborder">
+              <clr-datagrid>
-                <thead>
+                  <clr-dg-column>UUID</clr-dg-column>
-                    <tr>
+                  <clr-dg-column>Expiry</clr-dg-column>
-                        <th class="left">UUID</th>
+                  <clr-dg-column>Creation</clr-dg-column>
-                        <th>Expiry</th>
+                  <clr-dg-column> </clr-dg-column>
-                        <th>Creation</th>
+  
-                        <th class="left"></th>
+                  <clr-dg-row *ngFor="let line of entries">
-                    </tr>
+                      <clr-dg-cell>{{line.uid}}</clr-dg-cell>
-                </thead>
+                      <clr-dg-cell>{{line.expiry}}</clr-dg-cell>
-                <tbody>
+                      <clr-dg-cell>{{line.created | date}}</clr-dg-cell>
-                    <tr *ngFor="let line of entries" >
+                      <clr-dg-cell><button class="btn btn-sm btn-link" (click)="quit(line.uid)"><clr-icon shape="times"></clr-icon></button></clr-dg-cell>
-                        <td class="left">{{line.uid}}</td>
+                  </clr-dg-row>
-                        <td>{{line.expiry}}</td>
+  
-                        <td>{{line.created}}</td>
+                  <clr-dg-footer>
-                        <td class="left"><button class="btn btn-link btn-sm" (click)="quit(line.uid)">Quit</button></td>
+  
-                    </tr>
+                  {{entries.length}} entries</clr-dg-footer>
-                </tbody>
+              </clr-datagrid>
-            </table>
           </div>
       </div>
       <div class="card-footer">
@@ -77,7 +73,7 @@ const fb = environment.production ? window["fb"] : {
   
       </div>
     </div>
-  `
+`
 })
 export class ApiclientSubscriptionComponent implements OnInit {
     loading: boolean = false

src/frontend/dashboard/src/app/ApiClient/module.ts

@@ -7,7 +7,7 @@ import { ApiclientFormComponent } from './apiclient-settings-form.component';
 import { ApiclientConsumptionComponent } from './apiclient-consumptions.component';
 import { ApiclientSubscriptionComponent } from './apiclient-subscriptions.component';
 
-import { FrontendPlugin, SidebarEntry } from 'frontblock-generic/Plugin';
+import { FrontendPlugin, SidebarEntry, SidebarEntries } from 'frontblock-generic/Plugin';
 import { ClarityModule } from '@clr/angular';
 import { FormsModule } from '@angular/forms';
 
@@ -19,7 +19,9 @@ import { FormsModule } from '@angular/forms';
 
     CommonModule, 
     RouterModule.forChild([
-      {path: "apiclient", component: ApiclientComponent},
+      {path: "settings", component: ApiclientFormComponent},
+      {path: "subscriptions", component: ApiclientSubscriptionComponent},
+      {path: "consumptions", component: ApiclientConsumptionComponent},
     ]),
   ],
   exports: [RouterModule],
@@ -31,11 +33,21 @@ import { FormsModule } from '@angular/forms';
   ]
 })
 export class PluginModule implements FrontendPlugin{
-  getSidebarEntry(): SidebarEntry {
+  getSidebarEntry(): SidebarEntries {
     return {
       icon: "key",
-      route: "apiclient",
+      parentRoute: "apiclient",
       text: "Api client",
+      links: [{
+        route: "settings",
+        text: "Settings"
+      },{
+        route: "consumptions",
+        text: "Consumptions"
+      },{
+        route: "subscriptions",
+        text: "Subscriptions"
+      },]
     }
   }
 }

src/frontend/dashboard/src/app/PluginManager/debug.component.ts

@@ -23,7 +23,7 @@ declare const fb
                 </div>
             </div>
             <div class="card-footer">
-              <button class="btn btn-warning" onclick="setup()">SETUP</button>
+              <button class="btn btn-warning-outline" onclick="setup()">SETUP</button>
             </div>
         </div>
     </div>

src/frontend/dashboard/src/app/PluginManager/plugins.component.ts

@@ -1,15 +1,10 @@
 import { Component, OnInit } from '@angular/core';
-import { SidebarEntry } from 'frontblock-generic/Plugin';
 declare const fb
 @Component({
     selector: 'plugins', //!!!!
     template: `
-  <div class="modal" *ngIf="!updatepending">
+  <clr-modal [(clrModalOpen)]="updatepending">
-    <div class="modal-dialog fadeDown in" role="dialog" aria-hidden="true">
-        <div class="modal-content">
-            <div class="modal-header">
     <h3 class="modal-title">Confirm installation</h3>
-            </div>
     <div class="modal-body">
         <p>{{updateCandidate}} But not much to say...</p>
     </div>
@@ -17,12 +12,7 @@ declare const fb
         <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>
-        
-    </div>
-  </div>
-  <div class="modal-backdrop fade in" aria-hidden="true" *ngIf="!updatepending"></div>
 
   <div class="clr-row">
     <div class="clr-col">
@@ -64,48 +54,48 @@ export class PluginsComponent implements OnInit {
         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: "Available"
-    },{
+    }, {
         name: "test 3",
         available: "0.0.2",
         installed: "0.0.1",
         status: "Stopped"
     },]
 
-    updatepending = true
+    updatepending = false
     updateCandidate = ""
 
     constructor() { }
 
-    start(name){
+    start(name) {
         this.plugins.find((el) => el.name === name).status = "Running"
     }
 
-    stop(name){
+    stop(name) {
         this.plugins.find((el) => el.name === name).status = "Stopped"
     }
 
-    delete(name){
+    delete(name) {
         this.plugins.find((el) => el.name === name).status = "Available"
     }
 
-    showConfirmation(name){
+    showConfirmation(name) {
         this.updateCandidate = name
         this.updatepending = !this.updatepending
     }
 
-    download(name){
+    download(name) {
         let plugin = this.plugins.find((el) => el.name === name)
         plugin.status = "Stopped"
         plugin.installed = plugin.available
         this.updatepending = !this.updatepending
     }
 
-    cancelModal(){
+    cancelModal() {
         this.updateCandidate = ""
         this.updatepending = !this.updatepending
     }

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

@@ -14,7 +14,7 @@ export class AppComponent implements AfterContentInit {
   sidebar: SidebarComponent
   
   constructor(private zone:NgZone, private sidebarService: SidebarEntryService){
-    window["refresh"] = () => zone.run(()=>{ /*this triggers an angular reload*/})
+    window["refresh"] = setInterval(() => zone.run(()=>{ /*this triggers an angular reload*/}), 200)
   }
 
   ngAfterContentInit(){

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

@@ -12,12 +12,12 @@ 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 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 browserAnimationsModule from "@angular/platform-browser/animations";
 
 SystemJS.set('@clr/angular', SystemJS.newModule(clarityModule));
 SystemJS.set('@angular/router', SystemJS.newModule(angularRouter));
@@ -26,16 +26,15 @@ 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/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/animations', SystemJS.newModule(browserAnimationsModule));
 SystemJS.set('@angular/platform-browser-dynamic', SystemJS.newModule(angularPlatformBrowserDynamic));
 SystemJS.set('frontblock-generic/Types', SystemJS.newModule(frontblockGenericTypes));
 
 SystemJS.config({ meta: { '*': { authorization: true } } });
 /** --------- */
 
-
 import { AfterViewInit, Component } from '@angular/core';
 import { SidebarComponent } from '../sidebar/sidebar.component';
 import { Router } from '@angular/router';

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

@@ -1,4 +1,4 @@
-<header class="header header-5">
+<header class="header header-1">
     <div class="branding">
         <span class="title">Frontblock</span>