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

layouting (I LIKE BIG BOXES)

Browse Source
This commit is contained in:
peter
2019-08-14 10:53:23 +02:00
parent 9de85cf1f4
commit 434cce25f2
14 changed files with 163 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/frontend/dashboard/src/app/ApiClient/apiclient-consumptions.component.ts
+38 -36
View File
@@ -31,45 +31,47 @@ const fb = !isDevMode() ? window["fb"] : {
@Component({ @Component({
selector: 'consumptions', selector: 'consumptions',
template: ` template: `
<div class="card"> <div class="clr-row">
<div class="card-header"> <div class="card clr-col-12 clr-col-sm-12 clr-col-md-12 clr-col-lg-12 clr-col-xl-12">
Consumptions <div class="card-header">
</div> Consumptions
<clr-alert *ngFor="let entry of alerts" [clrAlertType]="entry.severity"> </div>
<clr-alert-item> <clr-alert *ngFor="let entry of alerts" [clrAlertType]="entry.severity">
<span class="alert-text"> <clr-alert-item>
{{entry.message}} <span class="alert-text">
</span> {{entry.message}}
</clr-alert-item> </span>
</clr-alert> </clr-alert-item>
</clr-alert>
<div *ngIf="loading" class="card-block"> <div *ngIf="loading" class="card-block">
<span class="spinner spinner-inline"></span> <span class="spinner spinner-inline"></span>
</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">
<clr-datagrid> <clr-datagrid>
<clr-dg-column>UUID</clr-dg-column> <clr-dg-column>UUID</clr-dg-column>
<clr-dg-column>Expiry</clr-dg-column> <clr-dg-column>Expiry</clr-dg-column>
<clr-dg-column>Creation</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-row *ngFor="let line of entries">
<clr-dg-cell>{{line.uid}}</clr-dg-cell> <clr-dg-cell>{{line.uid}}</clr-dg-cell>
<clr-dg-cell>{{line.expiry}}</clr-dg-cell> <clr-dg-cell>{{line.expiry}}</clr-dg-cell>
<clr-dg-cell>{{line.created | date}}</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-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-footer> </clr-dg-row-detail>
</clr-dg-row>
{{entries.length}} entries</clr-dg-footer> <clr-dg-footer>
</clr-datagrid> {{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>
<div class="card-footer">
<button *ngIf="!loading" class="btn btn-sm btn-link" (click)="load()">{{actionName}}</button>
</div>
</div> </div>
` `
}) })
src/frontend/dashboard/src/app/ApiClient/apiclient-settings-form.component.ts
+50 -50
View File
@@ -17,58 +17,58 @@ const fb = !isDevMode ? window["fb"] : {
@Component({ @Component({
selector: 'settings', selector: 'settings',
template: ` template: `
<div class="card"> <div class="clr-row">
<div class="card-header"> <div class="card clr-col-12 clr-col-sm-12 clr-col-md-12 clr-col-lg-auto clr-col-xl-auto">
Settings <div class="card-header">
</div> Settings
<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">
<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 class="clr-col-12 clr-col-md-8" [(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> <div class="card-block">
<div class="card-footer"> <div class="card-text">
<button *ngIf="!saving" class="btn btn-success-outline" (click)="save()"> <form clrForm clrLayout="horizontal">
<span>Save</span> <div class="clr-row clr-form-control ng-star-inserted">
</button> <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>
<button *ngIf="saving" class="btn btn-disabled" (click)="save()" disabled> <div class="clr-row clr-form-control ng-star-inserted" *ngIf="advanced">
<span class="spinner spinner-inline"></span> <label class="clr-col-12 clr-col-md-4 clr-control-label">Use TLS</label>
</button> <div class="clr-col-12 clr-col-md-8">
<button *ngIf="!advanced" class="btn btn-sm btn-link" (click)="setAdvanced()">Advanced</button> <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>
</div> </div>
` `
src/frontend/dashboard/src/app/ApiClient/apiclient-subscriptions.component.ts
+43 -40
View File
@@ -32,46 +32,49 @@ const fb = !isDevMode() ? window["fb"] : {
@Component({ @Component({
selector: 'subscriptions', selector: 'subscriptions',
template: ` template: `
<div class="card"> <div class="clr-row">
<div class="card-header"> <div class="card clr-col-12 clr-col-sm-12 clr-col-md-12 clr-col-lg-12 clr-col-xl-12">
Subscriptions <div class="card-header">
</div> Subscriptions
<clr-alert *ngFor="let entry of alerts" [clrAlertType]="entry.severity"> </div>
<clr-alert-item> <clr-alert *ngFor="let entry of alerts" [clrAlertType]="entry.severity">
<span class="alert-text"> <clr-alert-item>
{{entry.message}} <span class="alert-text">
</span> {{entry.message}}
</clr-alert-item> </span>
</clr-alert> </clr-alert-item>
</clr-alert>
<div *ngIf="loading" class="card-block">
<span class="spinner spinner-inline"></span> <div *ngIf="loading" class="card-block">
</div> <span class="spinner spinner-inline"></span>
<div *ngIf="entries.length !== 0 && !loading" class="card-block"> </div>
<div class="card-text"> <div *ngIf="entries.length !== 0 && !loading" class="card-block">
<clr-datagrid> <div class="card-text">
<clr-dg-column>UUID</clr-dg-column> <clr-datagrid>
<clr-dg-column>Expiry</clr-dg-column> <clr-dg-column>UUID</clr-dg-column>
<clr-dg-column>Creation</clr-dg-column> <clr-dg-column>Expiry</clr-dg-column>
<clr-dg-column> </clr-dg-column> <clr-dg-column>Creation</clr-dg-column>
<clr-dg-row *ngFor="let line of entries"> <clr-dg-row *ngFor="let line of entries">
<clr-dg-cell>{{line.uid}}</clr-dg-cell> <clr-dg-cell>{{line.uid}}</clr-dg-cell>
<clr-dg-cell>{{line.expiry}}</clr-dg-cell> <clr-dg-cell>{{line.expiry}}</clr-dg-cell>
<clr-dg-cell>{{line.created | date}}</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-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-footer> </clr-dg-row-detail>
</clr-dg-row>
{{entries.length}} entries</clr-dg-footer> <clr-dg-footer>
</clr-datagrid> {{entries.length}} entries
</div> </clr-dg-footer>
</div> </clr-datagrid>
<div class="card-footer"> </div>
<button *ngIf="!loading" class="btn btn-sm btn-link" (click)="load()">{{actionName}}</button> </div>
<div class="card-footer">
</div> <button *ngIf="!loading" class="btn btn-sm btn-link" (click)="load()">{{actionName}}</button>
</div>
</div>
</div> </div>
` `
}) })
src/frontend/dashboard/src/app/PluginManager/plugins.component.ts
+7 -9
View File
@@ -26,15 +26,13 @@ declare const fb
<clr-accordion-panel *ngFor="let entry of plugins"> <clr-accordion-panel *ngFor="let entry of plugins">
<clr-accordion-title>{{entry.name}}</clr-accordion-title> <clr-accordion-title>{{entry.name}}</clr-accordion-title>
<clr-accordion-content *clrIfExpanded> <clr-accordion-content *clrIfExpanded>
<div class="btn-group btn-primary"> <button *ngIf="entry.status === 'Stopped'" class="btn btn-icon btn-success-outline" (click)="start(entry.name)"><clr-icon shape="play"></clr-icon></button>
<button *ngIf="entry.status === 'Stopped'" class="btn btn-icon btn-success-outline" (click)="start(entry.name)"><clr-icon shape="play"></clr-icon></button> <button *ngIf="entry.status === 'Running'" class="btn btn-icon btn-warning-outline" (click)="stop(entry.name)"><clr-icon shape="stop"></clr-icon></button>
<button *ngIf="entry.status === 'Running'" class="btn btn-icon btn-warning-outline" (click)="stop(entry.name)"><clr-icon shape="stop"></clr-icon></button> <button *ngIf="entry.status === 'Stopped'" class="btn btn-icon btn-danger-outline" (click)="delete(entry.name)"><clr-icon shape="trash"></clr-icon></button>
<button *ngIf="entry.status === 'Stopped'" class="btn btn-icon btn-danger-outline" (click)="delete(entry.name)"><clr-icon shape="trash"></clr-icon></button> <button *ngIf="entry.status === 'Available'" class="btn btn-icon btn-info-outline" (click)="showConfirmation(entry.name)"><clr-icon shape="download"></clr-icon></button>
<button *ngIf="entry.status === 'Available'" class="btn btn-icon btn-info-outline" (click)="showConfirmation(entry.name)"><clr-icon shape="download"></clr-icon></button> <button *ngIf="entry.available !== entry.installed && entry.status === 'Stopped'" class="btn btn-icon btn-outline " (click)="showConfirmation(entry.name)">
<button *ngIf="entry.available !== entry.installed && entry.status === 'Stopped'" class="btn btn-icon btn-outline " (click)="showConfirmation(entry.name)"> <clr-icon shape="sync"></clr-icon>
<clr-icon shape="sync"></clr-icon> </button>
</button>
</div>
</clr-accordion-content> </clr-accordion-content>
</clr-accordion-panel> </clr-accordion-panel>
</clr-accordion> </clr-accordion>
src/frontend/dashboard/src/app/app.component.html
+3 -6
View File
@@ -1,8 +1,5 @@
<div class="main-container"> <clr-main-container >
<header-bar></header-bar> <header-bar></header-bar>
<subnav></subnav> <subnav></subnav>
<div class="content-container"> <dynamic-loader style="height: 100%;"></dynamic-loader>
<sidebar></sidebar> </clr-main-container>
<dynamic-loader></dynamic-loader>
</div>
</div>
src/frontend/dashboard/src/app/app.component.scss
+3
View File
@@ -0,0 +1,3 @@
.heightmax{
height: 100%
}
src/frontend/dashboard/src/app/content-area/main.component.html
+1 -2
View File
@@ -1,4 +1,3 @@
<div class="content-area clr-col-12 clr-col-sm-12 clr-col-lg-12 clr-col-xl-12">
<div class="content-area">
<router-outlet></router-outlet> <router-outlet></router-outlet>
</div> </div>
src/frontend/dashboard/src/app/dynamic-loader/dynamic-loader.component.html
+3 -2
View File
@@ -1,3 +1,4 @@
<div class="content-container"> <div class="content-container" style="height: 100%;">
<content-area></content-area> <sidebar></sidebar>
<content-area style="height: 100%; width: 100%"></content-area>
</div> </div>
src/frontend/dashboard/src/app/dynamic-loader/dynamic-loader.component.scss
+3
View File
@@ -0,0 +1,3 @@
.heightmax{
height: 100%!important;
}
src/frontend/dashboard/src/app/dynamic-loader/dynamic-loader.component.ts
+4 -13
View File
@@ -35,7 +35,7 @@ SystemJS.set('frontblock-generic/Types', SystemJS.newModule(frontblockGenericTyp
SystemJS.config({ meta: { '*': { authorization: true } } }); SystemJS.config({ meta: { '*': { authorization: true } } });
/** --------- */ /** --------- */
import { AfterViewInit, Component } from '@angular/core'; import { AfterViewInit, Component, ViewChild } 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';
import { FrontendPlugin, SidebarEntries, SidebarEntry } from "frontblock-generic/Plugin" import { FrontendPlugin, SidebarEntries, SidebarEntry } from "frontblock-generic/Plugin"
@@ -54,25 +54,16 @@ const fb = environment.production ? window["fb"] : {
styleUrls: ['./dynamic-loader.component.scss'] styleUrls: ['./dynamic-loader.component.scss']
}) })
export class DynamicLoaderComponent implements AfterViewInit { export class DynamicLoaderComponent implements AfterViewInit {
sidebar: SidebarComponent @ViewChild(SidebarComponent, {static:false})
private sidebar:SidebarComponent
constructor( constructor(
private router: Router, private router: Router,
private sidebarService: SidebarEntryService
) { ) {
} }
ngAfterViewInit() { ngAfterViewInit() {
const _this = this; this.loadWidgets()
(function awaitSidebar() {
const sb = _this.sidebarService.getSidebar()
if (sb != null) {
_this.sidebar = sb
_this.loadWidgets()
return
}
setTimeout(awaitSidebar, 25)
})()
} }
private async loadWidgets() { private async loadWidgets() {
src/frontend/dashboard/src/app/header-bar/header-bar.component.html
+3 -3
View File
@@ -1,4 +1,4 @@
<header class="header header-1"> <clr-header class="header header-1">
<div class="branding"> <div class="branding">
<span class="title">Frontblock</span> <span class="title">Frontblock</span>
@@ -6,7 +6,7 @@
<div class="header-actions"> <div class="header-actions">
<a class="nav-link nav-icon-text"> <a class="nav-link nav-icon-text">
<clr-icon shape="bug"></clr-icon> <clr-icon shape="bug"></clr-icon>
<span class="nav-text">ALPHA</span> <span class="nav-text">ALPHA {{devmode}}</span>
</a> </a>
</div> </div>
</header> </clr-header>
src/frontend/dashboard/src/app/header-bar/header-bar.component.ts
+2 -2
View File
@@ -1,4 +1,4 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit, isDevMode } from '@angular/core';
@Component({ @Component({
selector: 'header-bar', selector: 'header-bar',
@@ -6,7 +6,7 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./header-bar.component.scss'] styleUrls: ['./header-bar.component.scss']
}) })
export class HeaderBarComponent implements OnInit { export class HeaderBarComponent implements OnInit {
devmode = isDevMode()?"{ DEV }":""
constructor() { } constructor() { }
ngOnInit() { ngOnInit() {
src/frontend/dashboard/src/app/sidebar/sidebar.component.html
+1 -2
View File
@@ -1,4 +1,4 @@
<clr-vertical-nav style="height: 100%" class="nav-trigger--bottom" [clrVerticalNavCollapsible]="true" [(clrVerticalNavCollapsed)]="collapsed"> <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-vertical-nav-group *ngFor="let e of multientires" routerLinkActive="active">
<clr-icon [attr.shape]="e.icon" clrVerticalNavIcon></clr-icon> <clr-icon [attr.shape]="e.icon" clrVerticalNavIcon></clr-icon>
{{e.text}} {{e.text}}
@@ -16,5 +16,4 @@
<clr-icon [attr.shape]="entry.icon" clrVerticalNavIcon></clr-icon> <clr-icon [attr.shape]="entry.icon" clrVerticalNavIcon></clr-icon>
{{entry.text}} {{entry.text}}
</a> </a>
</clr-vertical-nav> </clr-vertical-nav>
src/frontend/dashboard/src/app/sidebar/sidebar.component.ts
+2
View File
@@ -9,6 +9,8 @@ import { environment } from 'src/environments/environment';
}) })
export class SidebarComponent implements OnInit { export class SidebarComponent implements OnInit {
collapsed = true
entries:SidebarEntry[] = [ entries:SidebarEntry[] = [
] ]