sidebar entry rework

2019-08-11 19:46:34 +02:00
parent 51399c6968
commit b30a1eb696
23 changed files with 245 additions and 47 deletions
@@ -65,13 +65,13 @@ steps:
  settings:
    registry: registry.frontblock.me
    insecure: true
-    repo: registry.frontblock.me/vendor/pluginmanager
+    repo: registry.frontblock.me/vendor/dashboard
    tags: ${DRONE_BUILD_CREATED}

 - name: release container
  image: plugins/docker
  settings:
-    repo: frontblockme/pluginmanager
+    repo: frontblockme/dashboard
    tags: ${DRONE_TAG}
    username: frontblockme
    password:
@@ -3858,9 +3858,9 @@
      }
    },
    "frontblock-generic": {
-      "version": "0.12.0",
-      "resolved": "https://registry.npmjs.org/frontblock-generic/-/frontblock-generic-0.12.0.tgz",
-      "integrity": "sha512-yVPnj5AMZb2Baxs2ta/BfPdbN6PbG8RoovBcIARPuE83aknDV61xTMo7TKwxQiJ06tnVR13Ot5UiyjNkfXHObA==",
+      "version": "0.15.0",
+      "resolved": "https://registry.npmjs.org/frontblock-generic/-/frontblock-generic-0.15.0.tgz",
+      "integrity": "sha512-ec5ep0U45+y6e1FXMvxE1RvC78E7xRbUFTwY/9u9prxhQYNe79vu/E0vGCX/PLdbqAmkMfSbIOr1+zCHImoiQQ==",
      "requires": {
        "@types/node": "^12.7.1",
        "bsock": "^0.1.9",
@@ -33,7 +33,7 @@
    "bsock": "^0.1.9",
    "easy-unzip": "^1.1.0",
    "express": "^4.16.4",
-    "frontblock-generic": "^0.12.0",
+    "frontblock-generic": "^0.15.0",
    "hdkey": "^1.1.1",
    "http": "0.0.0",
    "key-file-storage": "^2.2.4",
@@ -1,5 +1,5 @@
 import { default as PluginManager } from "./PluginManager";
-import { Plugin } from "frontblock-generic/Plugin";
+import { Plugin, socketioRPC } from "frontblock-generic/Plugin";
 import * as Logger from 'log4js';

 Logger.configure({
@@ -24,7 +24,7 @@ export default class PluginManagerPlugin extends PluginManager implements Plugin
        this.loadedPlugins[this.name] = {backend: this, frontend: this.loadFrontend(this.name)}
    }
    
-    exportRPCs(): import("frontblock-generic/Plugin").socketioRPC[] {
+    exportRPCs(): socketioRPC[] {
        return [
            {
                name: "getAvailablePluginNames",
@@ -4294,9 +4294,9 @@
      }
    },
    "frontblock-generic": {
-      "version": "0.12.0",
-      "resolved": "https://registry.npmjs.org/frontblock-generic/-/frontblock-generic-0.12.0.tgz",
-      "integrity": "sha512-yVPnj5AMZb2Baxs2ta/BfPdbN6PbG8RoovBcIARPuE83aknDV61xTMo7TKwxQiJ06tnVR13Ot5UiyjNkfXHObA==",
+      "version": "0.15.0",
+      "resolved": "https://registry.npmjs.org/frontblock-generic/-/frontblock-generic-0.15.0.tgz",
+      "integrity": "sha512-ec5ep0U45+y6e1FXMvxE1RvC78E7xRbUFTwY/9u9prxhQYNe79vu/E0vGCX/PLdbqAmkMfSbIOr1+zCHImoiQQ==",
      "requires": {
        "@types/node": "^12.7.1",
        "bsock": "^0.1.9",
@@ -23,7 +23,7 @@
    "@clr/icons": "^2.1.1",
    "@clr/ui": "^2.1.1",
    "@webcomponents/custom-elements": "^1.0.0",
-    "frontblock-generic": "latest",
+    "frontblock-generic": "^0.15.0",
    "key-file-storage": "^2.2.4",
    "rxjs": "~6.5.2",
    "systemjs": "^0.21.3",
@@ -2,9 +2,13 @@ import { NgModule } from '@angular/core';
 import { Routes, RouterModule, Route } from '@angular/router';
 import { HomeComponent } from './home/home.component';
 import { ErrorDisplayComponent } from './error-display/error-display.component';
+import { PluginmanagerDevComponent } from './pluginmanager-dev/pluginmanager-dev.component';


 const routes: Routes = [{
+  path: "dev/pluginmanager",
+  component: PluginmanagerDevComponent
+},{
  path: "",
  component: HomeComponent
 },{
@@ -1,10 +1,4 @@
 <div class="main-container">
-  <header class="header-6">
-    <div class="branding">
-      <a class="nav-link">
-        <span class="title">Dashboard and Widgets</span>
-      </a>
-    </div>
-  </header>
+  <header-bar></header-bar>
  <app-dynamic-loader></app-dynamic-loader>
 </div>
@@ -14,6 +14,8 @@ import { MainComponent } from './main/main.component';
 import { DynamicLoaderComponent } from './dynamic-loader/dynamic-loader.component';
 import { HomeComponent } from './home/home.component';
 import { ErrorDisplayComponent } from './error-display/error-display.component';
+import { PluginmanagerDevComponent } from './pluginmanager-dev/pluginmanager-dev.component';
+import { HeaderBarComponent } from './header-bar/header-bar.component';

 export function createCompiler(fn: CompilerFactory): Compiler {
  return fn.createCompiler();
@@ -28,7 +30,9 @@ const entryComps = []
    MainComponent,
    DynamicLoaderComponent,
    HomeComponent,
-    ErrorDisplayComponent
+    ErrorDisplayComponent,
+    PluginmanagerDevComponent,
+    HeaderBarComponent
  ],
  imports: [
    BrowserModule,
@@ -33,7 +33,7 @@ import { AfterViewInit, Component, ViewContainerRef, ViewChild } from '@angular/
 import { SidebarComponent } from '../sidebar/sidebar.component';
 import { MainComponent } from '../main/main.component';
 import { Router } from '@angular/router';
-import { FrontendPlugin } from "frontblock-generic/Plugin"
+import { FrontendPlugin, SidebarEntries, SidebarEntry } from "frontblock-generic/Plugin"


@Component({
@@ -67,15 +67,37 @@ export class DynamicLoaderComponent implements AfterViewInit {
  private async installWidget(pluginName:string){
    const module: FrontendPlugin = await SystemJS.import("plugins/"+pluginName+".js");
    const plugin = new module['PluginModule']()
-    const entry = plugin.getSidebarEntry()
-    entry.route = 'page/' + entry.route
-    this.sidebar.entries.unshift(entry)
-
+    const entry:SidebarEntries | SidebarEntry = plugin.getSidebarEntry()
    const rc = this.router.config
-    rc.unshift({
-      path: "page",
-      loadChildren: async () => module['PluginModule']
-    })
+    
+    switch (typeof (<any>entry).links) {
+      case "undefined":
+        const e:SidebarEntry = <SidebarEntry>entry
+        e.route = "plugin/"  + e.route
+
+        this.sidebar.entries.push(e)
+        rc.unshift({
+          path: "plugin",
+          loadChildren: async () => module['PluginModule']
+        })
+        
+        break;
+      case "object":
+        const m:SidebarEntries = <SidebarEntries>entry
+
+        m.links = m.links.map(link => {
+          return {text: link.text, route: m.text + "/"  + link.route }
+        })
+
+        this.sidebar.multientires.push(m)
+        rc.unshift({
+          path: m.text,
+          loadChildren: async () => module['PluginModule']
+        })
+
+        console.log(this.sidebar.multientires)
+        break;        
+    }
    this.router.resetConfig(rc)
  }
 }
@@ -0,0 +1,19 @@
+<header class="header header-5">
+    <div class="branding">
+        <span class="title">Frontblock</span>
+        
+    </div>
+    <div class="header-actions">
+        <a href="javascript:setup()" class="nav-link nav-icon-text">
+            <clr-icon shape="bug"></clr-icon> 
+            <span class="nav-text">ALPHA</span>
+        </a>
+    </div>
+</header>
+<nav class="subnav">
+    <ul class="nav">
+        <li class="nav-item">
+            <a class="nav-link active" href="#">Dashboard</a>
+        </li>
+    </ul>
+</nav>
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeaderBarComponent } from './header-bar.component';
+
+describe('HeaderBarComponent', () => {
+  let component: HeaderBarComponent;
+  let fixture: ComponentFixture<HeaderBarComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HeaderBarComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HeaderBarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'header-bar',
+  templateUrl: './header-bar.component.html',
+  styleUrls: ['./header-bar.component.scss']
+})
+export class HeaderBarComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
@@ -0,0 +1 @@
+<p>pluginmanager-dev works!</p>
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PluginmanagerDevComponent } from './pluginmanager-dev.component';
+
+describe('PluginmanagerDevComponent', () => {
+  let component: PluginmanagerDevComponent;
+  let fixture: ComponentFixture<PluginmanagerDevComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PluginmanagerDevComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PluginmanagerDevComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,38 @@
+import { Component, OnInit } from '@angular/core';
+declare const fb
+@Component({
+  selector: 'pluginmanager', //!!!!
+  template: `
+  <div class="clr-row">
+    <div class="clr-col">
+        <div class="card">
+            <div class="card-header">
+                DEBUG
+            </div>
+            <div class="card-block">
+                <div class="card-title">
+                    SETUP
+                </div>
+                <div class="card-text">
+                  <p>
+                    Press this button to install all plugins.
+                    <br>
+                    Once the installation is done the page will refresh automatically
+                  </p>
+                </div>
+            </div>
+            <div class="card-footer">
+              <button class="btn btn-warning" onclick="setup()">SETUP</button>
+            </div>
+        </div>
+    </div>
+  </div>
+  `
+})
+export class PluginmanagerDevComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() { }
+
+}
@@ -1,6 +1,22 @@
 <clr-vertical-nav  [clrVerticalNavCollapsible]="true">
+    <clr-vertical-nav-group *ngFor="let e of multientires" routerLinkActive="active">
+        <clr-icon [attr.shape]="e.icon" clrVerticalNavIcon></clr-icon>
+        {{e.text}}
+        <clr-vertical-nav-group-children>
+            <a clrVerticalNavLink
+                *ngFor="let l of e.links"
+                [routerLink]="l.route"
+                routerLinkActive="active">
+                {{l.text}}
+            </a>
+        </clr-vertical-nav-group-children>
+    </clr-vertical-nav-group>
    <a *ngFor="let entry of entries" clrVerticalNavLink routerLinkActive="active" [routerLink]="entry.route">
        <clr-icon [attr.shape]="entry.icon" clrVerticalNavIcon></clr-icon>
        {{entry.text}}
    </a>
+
+    
+
+
 </clr-vertical-nav>
@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { SidebarEntries, SidebarEntry } from 'frontblock-generic/Plugin';

@Component({
  selector: 'app-sidebar',
@@ -7,12 +8,25 @@ import { Component, OnInit } from '@angular/core';
 })
 export class SidebarComponent implements OnInit {

-  entries:{text:string, icon:string, route:string}[] = []
+  entries:SidebarEntry[] = [{
+    type: "single",
+    icon: "wrench",
+    route: "dev/pluginmanager",
+    text: "DEV Plugin manager",
+  }]
+
+  multientires:SidebarEntries[] = [{
+    type: "multi",
+    icon: "times",
+    text: "HELP",
+    links: [{
+      route: "xd",
+      text: "XD"    
+    }]
+  }]

  constructor() { }

  ngOnInit() {
  }
-
-
-}
+}
@@ -1,9 +1,9 @@
 import { Component, OnInit } from '@angular/core';

@Component({
-  selector: 'exclamations',
+  selector: 'settings',
  template: `
-  <span style="color: blue">!!!</span>
+  <span style="color: red">!!!</span>
  `
 })
 export class ANestedComponent implements OnInit {
@@ -1,16 +1,29 @@
+
 import { Component, OnInit } from '@angular/core';
 declare const fb
@Component({
  selector: 'PLUGINMANAGER', //!!!!
  template: `
-  <div class="card">
-    <div class="card-block">
-      <div class="card-title">
-        PLUGINMANAGER <br> ${Object.keys(fb.PluginManager).join("<br>")}
-      </div>
-      <div class="card-text">
-        Hello World <exclamations></exclamations>
-      </div>
+  <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>
  </div>
  `
@@ -3,10 +3,10 @@ import { CommonModule } from '@angular/common';
 import { PluginComponent } from './component';
 import { ANestedComponent } from './a-nested.component';
 import { RouterModule } from '@angular/router';
-import { FrontendPlugin, SidebarEntry } from 'frontblock-generic/Plugin';
+import { FrontendPlugin, SidebarEntries } from 'frontblock-generic/Plugin';

@NgModule({
-  imports: [CommonModule, RouterModule.forChild([{path: "pluginmanager", component: PluginComponent}])],
+  imports: [CommonModule, RouterModule.forChild([{path: "debug", component: PluginComponent}])],
  exports: [RouterModule],
  declarations: [
    PluginComponent,
@@ -19,7 +19,15 @@ import { FrontendPlugin, SidebarEntry } from 'frontblock-generic/Plugin';
  }]
 })
 export class PluginModule implements FrontendPlugin{
-  getSidebarEntry(): SidebarEntry {
-    return {icon: 'check', text: 'Plugin manager', route: 'pluginmanager'}
+  getSidebarEntry(): SidebarEntries {
+    return {
+      icon: 'cog', 
+      text: 'pluginmanager', 
+      type: "multi", 
+      links: [{
+        route: 'debug',
+        text: 'DEBUG'
+      }]
+    }
  }
 }