Files
fb-admin/src/frontend/dashboard/src/app/ApiClient/apiclient-settings-form.component.ts
T
2019-08-14 01:13:49 +02:00

142 lines
4.8 KiB
TypeScript

import { Component, OnInit } from '@angular/core';
import { FrontblockApiConf } from 'frontblock';
import { environment } from "../../environments/environment"
const fb = environment.production ? window["fb"] : {
ApiClient: {
setConfig: async () => {
await new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Promise A win!');
}, 500)
})
}
}
}
@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: FrontblockApiConf = {
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
}
}