nitowa/fb-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

portable check for dev mode

Browse Source
This commit is contained in:
peter
2019-08-14 05:56:16 +02:00
parent fed2b455ce
commit 9de85cf1f4
10 changed files with 140 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/frontend/dashboard/angular.json
+1 -1
View File
@@ -30,7 +30,7 @@
"styles": [ "styles": [
"src/styles.scss", "src/styles.scss",
"node_modules/@clr/icons/clr-icons.min.css", "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": [ "scripts": [
"node_modules/systemjs/dist/system.js", "node_modules/systemjs/dist/system.js",
src/frontend/dashboard/src/app/ApiClient/apiclient-consumptions.component.ts
+28 -36
View File
@@ -1,28 +1,26 @@
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 { 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 () => { setConfig: async () => {
await new Promise((resolve, reject) => { await new Promise((resolve, reject) => {
setTimeout(() => { setTimeout(() => {
resolve('Promise A win!'); resolve('Promise A win!');
}, 500) }, 500)
}) })
}, },
getConsumptions: async () => { getConsumptions: async () => {
return await new Promise((resolve, reject) => { return await new Promise((resolve, reject) => {
setTimeout(() => { setTimeout(() => {
resolve([new SubscriptionResponse("654", "321"), new SubscriptionResponse("456", "123")]); resolve([new SubscriptionResponse("654", "321"), new SubscriptionResponse("456", "123")]);
}, 500) }, 500)
}) })
}, },
getSubscriptions: async () => { getSubscriptions: async () => {
return await new Promise((resolve, reject) => { return await new Promise((resolve, reject) => {
setTimeout(() => { setTimeout(() => {
resolve([new SubscriptionResponse("321"), new SubscriptionResponse("123")]); resolve([new SubscriptionResponse("321"), new SubscriptionResponse("123")]);
}, 500) }, 500)
}) })
}, },
@@ -50,29 +48,27 @@ const fb = environment.production?window["fb"]:{
</div> </div>
<div *ngIf="entries.length !== 0 && !loading" class="card-block"> <div *ngIf="entries.length !== 0 && !loading" class="card-block">
<div class="card-text"> <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> </div>
<div class="card-footer"> <div class="card-footer">
<button *ngIf="!loading" class="btn btn-sm btn-link" (click)="load()">{{actionName}}</button> <button *ngIf="!loading" class="btn btn-sm btn-link" (click)="load()">{{actionName}}</button>
</div> </div>
</div> </div>
` `
@@ -80,11 +76,7 @@ const fb = environment.production?window["fb"]:{
export class ApiclientConsumptionComponent implements OnInit { export class ApiclientConsumptionComponent implements OnInit {
loading:boolean = false loading:boolean = false
actionName:string = "load" actionName:string = "load"
entries:SubscriptionResponse[] = [{ entries:SubscriptionResponse[] = []
uid: "1231",
message: "",
result: "Success"
}]
alerts: { alerts: {
severity: "danger" | "warning" | "success" severity: "danger" | "warning" | "success"
message: string message: string
src/frontend/dashboard/src/app/ApiClient/apiclient-settings-form.component.ts
+25 -24
View File
@@ -1,8 +1,8 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { FrontblockApiConf } from 'frontblock'; 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: { ApiClient: {
setConfig: async () => { setConfig: async () => {
await new Promise((resolve, reject) => { await new Promise((resolve, reject) => {
@@ -23,33 +23,35 @@ const fb = environment.production ? window["fb"] : {
</div> </div>
<div class="card-block"> <div class="card-block">
<div class="card-text"> <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 />
<input type="checkbox" [(ngModel)]="testnet" (change)="updateTestnet($event)" name="testnetToggle" clrToggle /> </div>
</div>
<clr-input-container *ngIf="!testnet"> <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>
<clr-input-container *ngIf="advanced"> <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-control-error>This field is required!</clr-control-error>
</clr-input-container> </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 class="clr-col-12 clr-col-md-8" [(ngModel)]="data.tls" type="checkbox" clrCheckbox value="tls" name="options" />
</div>
</div>
<clr-checkbox-wrapper *ngIf="advanced" > <clr-input-container class="clr-row" *ngIf="advanced">
<input [(ngModel)]="data.tls" type="checkbox" clrCheckbox value="tls" name="options" /> <label class="clr-col-12 clr-col-md-4">Port</label>
<label>Use TLS</label> <input class="clr-col-12 clr-col-md-8" [(ngModel)]="data.apiPort" clrInput type="number" name="lastName" required />
</clr-checkbox-wrapper>
<clr-input-container *ngIf="advanced">
<label>Port</label>
<input [(ngModel)]="data.apiPort" clrInput type="number" name="lastName" required />
<clr-control-error>Valid range 1024 - 65536 <clr-control-error>Valid range 1024 - 65536
</clr-control-error> </clr-control-error>
</clr-input-container> </clr-input-container>
@@ -59,7 +61,7 @@ const fb = environment.production ? window["fb"] : {
</div> </div>
</div> </div>
<div class="card-footer"> <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> <span>Save</span>
</button> </button>
@@ -67,7 +69,6 @@ const fb = environment.production ? window["fb"] : {
<span class="spinner spinner-inline"></span> <span class="spinner spinner-inline"></span>
</button> </button>
<button *ngIf="!advanced" class="btn btn-sm btn-link" (click)="setAdvanced()">Advanced</button> <button *ngIf="!advanced" class="btn btn-sm btn-link" (click)="setAdvanced()">Advanced</button>
</div> </div>
</div> </div>
` `
src/frontend/dashboard/src/app/ApiClient/apiclient-subscriptions.component.ts
+43 -47
View File
@@ -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 { 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: { ApiClient: {
setConfig: async () => { setConfig: async () => {
await new Promise((resolve, reject) => { await new Promise((resolve, reject) => {
@@ -34,50 +32,48 @@ const fb = environment.production ? window["fb"] : {
@Component({ @Component({
selector: 'subscriptions', selector: 'subscriptions',
template: ` template: `
<div class="card"> <div class="card">
<div class="card-header"> <div class="card-header">
Subscriptions 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>Expiry</clr-dg-column>
<clr-dg-column>Creation</clr-dg-column>
<clr-dg-column> </clr-dg-column>
<clr-dg-row *ngFor="let line of entries">
<clr-dg-cell>{{line.uid}}</clr-dg-cell>
<clr-dg-cell>{{line.expiry}}</clr-dg-cell>
<clr-dg-cell>{{line.created | date}}</clr-dg-cell>
<clr-dg-cell><button class="btn btn-sm btn-link" (click)="quit(line.uid)"><clr-icon shape="times"></clr-icon></button></clr-dg-cell>
</clr-dg-row>
<clr-dg-footer>
{{entries.length}} entries</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>
`
<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">
<table class="table table-noborder">
<thead>
<tr>
<th class="left">UUID</th>
<th>Expiry</th>
<th>Creation</th>
<th class="left"></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let line of entries" >
<td class="left">{{line.uid}}</td>
<td>{{line.expiry}}</td>
<td>{{line.created}}</td>
<td class="left"><button class="btn btn-link btn-sm" (click)="quit(line.uid)">Quit</button></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="card-footer">
<button *ngIf="!loading" class="btn btn-sm btn-link" (click)="load()">{{actionName}}</button>
</div>
</div>
`
}) })
export class ApiclientSubscriptionComponent implements OnInit { export class ApiclientSubscriptionComponent implements OnInit {
loading: boolean = false loading: boolean = false
src/frontend/dashboard/src/app/ApiClient/module.ts
+16 -4
View File
@@ -7,7 +7,7 @@ import { ApiclientFormComponent } from './apiclient-settings-form.component';
import { ApiclientConsumptionComponent } from './apiclient-consumptions.component'; import { ApiclientConsumptionComponent } from './apiclient-consumptions.component';
import { ApiclientSubscriptionComponent } from './apiclient-subscriptions.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 { ClarityModule } from '@clr/angular';
import { FormsModule } from '@angular/forms'; import { FormsModule } from '@angular/forms';
@@ -19,7 +19,9 @@ import { FormsModule } from '@angular/forms';
CommonModule, CommonModule,
RouterModule.forChild([ RouterModule.forChild([
{path: "apiclient", component: ApiclientComponent}, {path: "settings", component: ApiclientFormComponent},
{path: "subscriptions", component: ApiclientSubscriptionComponent},
{path: "consumptions", component: ApiclientConsumptionComponent},
]), ]),
], ],
exports: [RouterModule], exports: [RouterModule],
@@ -31,11 +33,21 @@ import { FormsModule } from '@angular/forms';
] ]
}) })
export class PluginModule implements FrontendPlugin{ export class PluginModule implements FrontendPlugin{
getSidebarEntry(): SidebarEntry { getSidebarEntry(): SidebarEntries {
return { return {
icon: "key", icon: "key",
route: "apiclient", parentRoute: "apiclient",
text: "Api client", 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
+1 -1
View File
@@ -23,7 +23,7 @@ declare const fb
</div> </div>
</div> </div>
<div class="card-footer"> <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> </div>
</div> </div>
src/frontend/dashboard/src/app/PluginManager/plugins.component.ts
+20 -30
View File
@@ -1,28 +1,18 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { SidebarEntry } from 'frontblock-generic/Plugin';
declare const fb declare const fb
@Component({ @Component({
selector: 'plugins', //!!!! selector: 'plugins', //!!!!
template: ` template: `
<div class="modal" *ngIf="!updatepending"> <clr-modal [(clrModalOpen)]="updatepending">
<div class="modal-dialog fadeDown in" role="dialog" aria-hidden="true"> <h3 class="modal-title">Confirm installation</h3>
<div class="modal-content"> <div class="modal-body">
<div class="modal-header"> <p>{{updateCandidate}} But not much to say...</p>
<h3 class="modal-title">Confirm installation</h3>
</div>
<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>
</div>
</div> </div>
</div> <div class="modal-footer">
<div class="modal-backdrop fade in" aria-hidden="true" *ngIf="!updatepending"></div> <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="clr-row">
<div class="clr-col"> <div class="clr-col">
@@ -64,48 +54,48 @@ export class PluginsComponent implements OnInit {
available: "0.0.1", available: "0.0.1",
installed: "0.0.1", installed: "0.0.1",
status: "Running" status: "Running"
},{ }, {
name: "test II: Return of test", name: "test II: Return of test",
available: "0.0.1", available: "0.0.1",
installed: "0.0.1", installed: "0.0.1",
status: "Available" status: "Available"
},{ }, {
name: "test 3", name: "test 3",
available: "0.0.2", available: "0.0.2",
installed: "0.0.1", installed: "0.0.1",
status: "Stopped" status: "Stopped"
},] },]
updatepending = true updatepending = false
updateCandidate = "" updateCandidate = ""
constructor() { } constructor() { }
start(name){ start(name) {
this.plugins.find((el) => el.name === name).status = "Running" this.plugins.find((el) => el.name === name).status = "Running"
} }
stop(name){ stop(name) {
this.plugins.find((el) => el.name === name).status = "Stopped" this.plugins.find((el) => el.name === name).status = "Stopped"
} }
delete(name){ delete(name) {
this.plugins.find((el) => el.name === name).status = "Available" this.plugins.find((el) => el.name === name).status = "Available"
} }
showConfirmation(name){ showConfirmation(name) {
this.updateCandidate = name this.updateCandidate = name
this.updatepending = !this.updatepending this.updatepending = !this.updatepending
} }
download(name){ download(name) {
let plugin = this.plugins.find((el) => el.name === name) let plugin = this.plugins.find((el) => el.name === name)
plugin.status = "Stopped" plugin.status = "Stopped"
plugin.installed = plugin.available plugin.installed = plugin.available
this.updatepending = !this.updatepending this.updatepending = !this.updatepending
} }
cancelModal(){ cancelModal() {
this.updateCandidate = "" this.updateCandidate = ""
this.updatepending = !this.updatepending this.updatepending = !this.updatepending
} }
src/frontend/dashboard/src/app/app.component.ts
+1 -1
View File
@@ -14,7 +14,7 @@ export class AppComponent implements AfterContentInit {
sidebar: SidebarComponent sidebar: SidebarComponent
constructor(private zone:NgZone, private sidebarService: SidebarEntryService){ 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(){ ngAfterContentInit(){
src/frontend/dashboard/src/app/dynamic-loader/dynamic-loader.component.ts
+4 -5
View File
@@ -12,12 +12,12 @@ import * as angularCommon from '@angular/common';
import * as angularCommonHttp from '@angular/common/http'; import * as angularCommonHttp from '@angular/common/http';
import * as angularForms from '@angular/forms'; import * as angularForms from '@angular/forms';
import * as angularAnimations from '@angular/animations'; 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 angularPlatformBrowser from '@angular/platform-browser';
import * as angularPlatformBrowserDynamic from '@angular/platform-browser-dynamic'; import * as angularPlatformBrowserDynamic from '@angular/platform-browser-dynamic';
import * as clarityModule from '@clr/angular'; import * as clarityModule from '@clr/angular';
import * as frontblockGenericTypes from 'frontblock-generic/Types.js' 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('@clr/angular', SystemJS.newModule(clarityModule));
SystemJS.set('@angular/router', SystemJS.newModule(angularRouter)); 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/common/http', SystemJS.newModule(angularCommonHttp));
SystemJS.set('@angular/forms', SystemJS.newModule(angularForms)); SystemJS.set('@angular/forms', SystemJS.newModule(angularForms));
SystemJS.set('@angular/animations', SystemJS.newModule(angularAnimations)); 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', 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('@angular/platform-browser-dynamic', SystemJS.newModule(angularPlatformBrowserDynamic));
SystemJS.set('frontblock-generic/Types', SystemJS.newModule(frontblockGenericTypes)); SystemJS.set('frontblock-generic/Types', SystemJS.newModule(frontblockGenericTypes));
SystemJS.config({ meta: { '*': { authorization: true } } }); SystemJS.config({ meta: { '*': { authorization: true } } });
/** --------- */ /** --------- */
import { AfterViewInit, Component } from '@angular/core'; import { AfterViewInit, Component } from '@angular/core';
import { SidebarComponent } from '../sidebar/sidebar.component'; import { SidebarComponent } from '../sidebar/sidebar.component';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
src/frontend/dashboard/src/app/header-bar/header-bar.component.html
+1 -1
View File
@@ -1,4 +1,4 @@
<header class="header header-5"> <header class="header header-1">
<div class="branding"> <div class="branding">
<span class="title">Frontblock</span> <span class="title">Frontblock</span>