fix widget
This commit is contained in:
peter
@@ -13,7 +13,7 @@ declare const fb
|
||||
<div class="card-header">
|
||||
Consumptions
|
||||
</div>
|
||||
<clr-alert *ngFor="let entry of alerts" [clrAlertType]="entry.severity" (clrAlertClosedChange)="onClose()">
|
||||
<clr-alert *ngFor="let entry of alerts" [clrAlertType]="entry.severity">
|
||||
<clr-alert-item>
|
||||
<span class="alert-text">
|
||||
{{entry.message}}
|
||||
@@ -73,6 +73,9 @@ export class ApiclientConsumptionComponent implements OnInit {
|
||||
async load(){
|
||||
this.loading = true
|
||||
this.entries = await fb.ApiClient.getConsumptions()
|
||||
if(this.entries.length === 0){
|
||||
this.alerts.push({ severity: "warning", message: "0 results were returned"})
|
||||
}
|
||||
this.loading = false
|
||||
this.actionName = "refresh"
|
||||
}
|
||||
|
||||
@@ -14,7 +14,7 @@ declare const fb
|
||||
Subscriptions
|
||||
</div>
|
||||
|
||||
<clr-alert *ngFor="let entry of alerts" [clrAlertType]="entry.severity" (clrAlertClosedChange)="onClose()">
|
||||
<clr-alert *ngFor="let entry of alerts" [clrAlertType]="entry.severity">
|
||||
<clr-alert-item>
|
||||
<span class="alert-text">
|
||||
{{entry.message}}
|
||||
@@ -70,6 +70,9 @@ export class ApiclientSubscriptionComponent implements OnInit {
|
||||
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"
|
||||
}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import resolve from 'rollup-plugin-node-resolve';
|
||||
import typescript from 'rollup-plugin-typescript2';
|
||||
import externals from 'rollup-plugin-node-externals'
|
||||
|
||||
export default {
|
||||
input: 'src/frontend/widget/main.ts',
|
||||
@@ -20,6 +21,8 @@ export default {
|
||||
})
|
||||
],
|
||||
external: [
|
||||
"frontblock",
|
||||
"frontblock-generic",
|
||||
'plugins-core',
|
||||
'@angular/core',
|
||||
'@angular/common',
|
||||
|
||||
@@ -12,4 +12,4 @@ export class ANestedComponent implements OnInit {
|
||||
|
||||
ngOnInit() { }
|
||||
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,89 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
|
||||
declare const fb
|
||||
|
||||
@Component({
|
||||
selector: 'consumptions',
|
||||
template: `
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Consumptions
|
||||
</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 ApiclientConsumptionComponent implements OnInit {
|
||||
loading:boolean = false
|
||||
actionName:string = "load"
|
||||
entries:any[] = [{
|
||||
uid: "1231",
|
||||
message: "",
|
||||
result: "Success"
|
||||
}]
|
||||
alerts: {
|
||||
severity: "danger" | "warning" | "success"
|
||||
message: string
|
||||
}[] = []
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() { }
|
||||
|
||||
async load(){
|
||||
this.loading = true
|
||||
this.entries = await fb.ApiClient.getConsumptions()
|
||||
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)
|
||||
if(r.uid != null){
|
||||
this.alerts.push({ severity: "success", message: "Quit consuming "+uid})
|
||||
this.load()
|
||||
}else{
|
||||
this.alerts.push({ severity: "danger", message: "Error "+r.message})
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,129 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
declare const fb
|
||||
|
||||
@Component({
|
||||
selector: 'settings',
|
||||
template: `
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Settings
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<div class="card-text">
|
||||
<form clrForm clrLayout="vertical">
|
||||
<clr-input-container>
|
||||
<label>testnet</label>
|
||||
<clr-control-error>We need your first name for legal compliance</clr-control-error>
|
||||
</clr-input-container>
|
||||
<input type="checkbox" [(ngModel)]="testnet" (change)="updateTestnet($event)" name="testnetToggle" clrToggle />
|
||||
|
||||
<clr-input-container *ngIf="!testnet">
|
||||
<label>API key</label>
|
||||
<input 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>
|
||||
<input 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" >
|
||||
<input [(ngModel)]="data.tls" type="checkbox" clrCheckbox value="tls" name="options" />
|
||||
<label>Use TLS</label>
|
||||
</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>
|
||||
</clr-input-container>
|
||||
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button *ngIf="!saving" class="btn btn-success" (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>
|
||||
`
|
||||
})
|
||||
export class ApiclientFormComponent implements OnInit {
|
||||
testnet:boolean = true
|
||||
saving:boolean = false
|
||||
advanced:boolean = false
|
||||
data = {
|
||||
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(obj){
|
||||
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()){
|
||||
const conf = await fb.ApiClient.setConfig(this.data)
|
||||
console.log(conf)
|
||||
}else{
|
||||
//show error in gui
|
||||
console.error("bad data :(")
|
||||
}
|
||||
this.saving = false
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,86 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
declare const fb
|
||||
|
||||
@Component({
|
||||
selector: 'subscriptions',
|
||||
template: `
|
||||
<div class="card">
|
||||
<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">
|
||||
<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 {
|
||||
loading:boolean = false
|
||||
actionName:string = "load"
|
||||
entries:any[] = []
|
||||
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)
|
||||
if(r.uid != null){
|
||||
this.alerts.push({ severity: "success", message: "Stopped subscription "+uid})
|
||||
this.load()
|
||||
}else{
|
||||
this.alerts.push({ severity: "danger", message: "Error "+r.message})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,29 +1,20 @@
|
||||
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
declare const fb
|
||||
@Component({
|
||||
selector: 'PLUGINMANAGER', //!!!!
|
||||
selector: 'apiclient', //!!!!
|
||||
template: `
|
||||
<div class="clr-row">
|
||||
<div class="clr-col-lg-5 clr-col-md-8 clr-col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Plugin manager
|
||||
</div>
|
||||
<div class="card-block">
|
||||
<div class="card-title">
|
||||
Block
|
||||
</div>
|
||||
<div class="card-text">
|
||||
${Object.keys(fb.PluginManager).join("<br>")}
|
||||
<button class="btn btn-success">Success</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button class="btn btn-sm btn-link">Footer Action 1</button>
|
||||
<button class="btn btn-sm btn-link">Footer Action 2</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clr-col-lg-auto">
|
||||
<settings></settings>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clr-row">
|
||||
<div class="clr-col">
|
||||
<consumptions></consumptions>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clr-row">
|
||||
<div class="clr-col">
|
||||
<subscriptions></subscriptions>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
|
||||
@@ -1,16 +1,25 @@
|
||||
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, SidebarEntries } from 'frontblock-generic/Plugin';
|
||||
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 { ANestedComponent } from './a-nested.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [CommonModule, RouterModule.forChild([{path: "debug", component: PluginComponent}])],
|
||||
imports: [
|
||||
CommonModule,
|
||||
RouterModule.forChild([{path: "pluginmanager", component: PluginComponent}]),
|
||||
],
|
||||
exports: [RouterModule],
|
||||
declarations: [
|
||||
PluginComponent,
|
||||
ANestedComponent
|
||||
// ANestedComponent,
|
||||
ApiclientFormComponent,
|
||||
ApiclientConsumptionComponent,
|
||||
ApiclientSubscriptionComponent
|
||||
],
|
||||
entryComponents: [PluginComponent],
|
||||
providers: [{
|
||||
@@ -19,15 +28,11 @@ import { FrontendPlugin, SidebarEntries } from 'frontblock-generic/Plugin';
|
||||
}]
|
||||
})
|
||||
export class PluginModule implements FrontendPlugin{
|
||||
getSidebarEntry(): SidebarEntries {
|
||||
getSidebarEntry(): SidebarEntry {
|
||||
return {
|
||||
icon: 'cog',
|
||||
text: 'Plugin Manager',
|
||||
parentRoute: 'pluginmanager',
|
||||
links: [{
|
||||
route: 'debug',
|
||||
text: 'DEBUG'
|
||||
}]
|
||||
icon: "wrench",
|
||||
route: "pluginmanager",
|
||||
text: "Plugin manager",
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user