sidebar entry rework

.drone.yml

@@ -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:

package-lock.json

@@ -3858,9 +3858,9 @@
       }
     },
     "frontblock-generic": {
-      "version": "0.12.0",
+      "version": "0.15.0",
-      "resolved": "https://registry.npmjs.org/frontblock-generic/-/frontblock-generic-0.12.0.tgz",
+      "resolved": "https://registry.npmjs.org/frontblock-generic/-/frontblock-generic-0.15.0.tgz",
-      "integrity": "sha512-yVPnj5AMZb2Baxs2ta/BfPdbN6PbG8RoovBcIARPuE83aknDV61xTMo7TKwxQiJ06tnVR13Ot5UiyjNkfXHObA==",
+      "integrity": "sha512-ec5ep0U45+y6e1FXMvxE1RvC78E7xRbUFTwY/9u9prxhQYNe79vu/E0vGCX/PLdbqAmkMfSbIOr1+zCHImoiQQ==",
       "requires": {
         "@types/node": "^12.7.1",
         "bsock": "^0.1.9",

package.json

@@ -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",

src/backend/PluginManager/Plugin.ts

@@ -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",

src/frontend/dashboard/package-lock.json

@@ -4294,9 +4294,9 @@
       }
     },
     "frontblock-generic": {
-      "version": "0.12.0",
+      "version": "0.15.0",
-      "resolved": "https://registry.npmjs.org/frontblock-generic/-/frontblock-generic-0.12.0.tgz",
+      "resolved": "https://registry.npmjs.org/frontblock-generic/-/frontblock-generic-0.15.0.tgz",
-      "integrity": "sha512-yVPnj5AMZb2Baxs2ta/BfPdbN6PbG8RoovBcIARPuE83aknDV61xTMo7TKwxQiJ06tnVR13Ot5UiyjNkfXHObA==",
+      "integrity": "sha512-ec5ep0U45+y6e1FXMvxE1RvC78E7xRbUFTwY/9u9prxhQYNe79vu/E0vGCX/PLdbqAmkMfSbIOr1+zCHImoiQQ==",
       "requires": {
         "@types/node": "^12.7.1",
         "bsock": "^0.1.9",

src/frontend/dashboard/package.json

@@ -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",

src/frontend/dashboard/src/app/app-routing.module.ts

@@ -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
 },{

src/frontend/dashboard/src/app/app.component.html

@@ -1,10 +1,4 @@
 <div class="main-container">
-  <header class="header-6">
+  <header-bar></header-bar>
-    <div class="branding">
-      <a class="nav-link">
-        <span class="title">Dashboard and Widgets</span>
-      </a>
-    </div>
-  </header>
   <app-dynamic-loader></app-dynamic-loader>
 </div>

src/frontend/dashboard/src/app/app.module.ts

@@ -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,

src/frontend/dashboard/src/app/dynamic-loader/dynamic-loader.component.ts

@@ -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()
+    const entry:SidebarEntries | SidebarEntry = plugin.getSidebarEntry()
-    entry.route = 'page/' + entry.route
-    this.sidebar.entries.unshift(entry)
-
     const rc = this.router.config
-    rc.unshift({
+    
-      path: "page",
+    switch (typeof (<any>entry).links) {
-      loadChildren: async () => module['PluginModule']
+      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)
   }
 }

src/frontend/dashboard/src/app/header-bar/header-bar.component.html

@@ -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>

src/frontend/dashboard/src/app/header-bar/header-bar.component.spec.ts

@@ -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();
+  });
+});

src/frontend/dashboard/src/app/header-bar/header-bar.component.ts

@@ -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() {
+  }
+
+}

src/frontend/dashboard/src/app/pluginmanager-dev/pluginmanager-dev.component.html

@@ -0,0 +1 @@
+<p>pluginmanager-dev works!</p>

src/frontend/dashboard/src/app/pluginmanager-dev/pluginmanager-dev.component.spec.ts

@@ -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();
+  });
+});

src/frontend/dashboard/src/app/pluginmanager-dev/pluginmanager-dev.component.ts

@@ -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() { }
+
+}

src/frontend/dashboard/src/app/sidebar/sidebar.component.html

@@ -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>

src/frontend/dashboard/src/app/sidebar/sidebar.component.ts

@@ -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() {
   }
-
-
 }

src/frontend/widget/widget/a-nested.component.ts

@@ -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 {

src/frontend/widget/widget/component.ts

@@ -1,16 +1,29 @@
+
 import { Component, OnInit } from '@angular/core';
 declare const fb
 @Component({
   selector: 'PLUGINMANAGER', //!!!!
   template: `
-  <div class="card">
+  <div class="clr-row">
-    <div class="card-block">
+    <div class="clr-col-lg-5 clr-col-md-8 clr-col-12">
-      <div class="card-title">
+        <div class="card">
-        PLUGINMANAGER <br> ${Object.keys(fb.PluginManager).join("<br>")}
+            <div class="card-header">
-      </div>
+                Plugin manager
-      <div class="card-text">
+            </div>
-        Hello World <exclamations></exclamations>
+            <div class="card-block">
-      </div>
+                <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>
   `

src/frontend/widget/widget/module.ts

@@ -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 {
+  getSidebarEntry(): SidebarEntries {
-    return {icon: 'check', text: 'Plugin manager', route: 'pluginmanager'}
+    return {
+      icon: 'cog', 
+      text: 'pluginmanager', 
+      type: "multi", 
+      links: [{
+        route: 'debug',
+        text: 'DEBUG'
+      }]
+    }
   }
 }