menu with panels
This commit is contained in:
parent
93560e881e
commit
8791d61303
|
@ -4,7 +4,7 @@
|
||||||
[mode]="(isHandset$ | async) ? 'over' : 'side'"
|
[mode]="(isHandset$ | async) ? 'over' : 'side'"
|
||||||
[opened]="(isHandset$ | async) === false">
|
[opened]="(isHandset$ | async) === false">
|
||||||
<mat-toolbar>Menu</mat-toolbar>
|
<mat-toolbar>Menu</mat-toolbar>
|
||||||
<app-main-menu-tree></app-main-menu-tree>
|
<app-main-menu-panels></app-main-menu-panels>
|
||||||
</mat-sidenav>
|
</mat-sidenav>
|
||||||
<mat-sidenav-content>
|
<mat-sidenav-content>
|
||||||
<mat-toolbar color="primary">
|
<mat-toolbar color="primary">
|
||||||
|
|
|
@ -22,6 +22,8 @@ import { MatFormFieldModule } from '@angular/material/form-field';
|
||||||
import { MatInputModule } from '@angular/material/input'
|
import { MatInputModule } from '@angular/material/input'
|
||||||
import { MatTableModule } from '@angular/material/table';
|
import { MatTableModule } from '@angular/material/table';
|
||||||
import { ProtocolsComponent } from './protocols/protocols.component';
|
import { ProtocolsComponent } from './protocols/protocols.component';
|
||||||
|
import { MainMenuPanelsComponent } from './main-menu-panels/main-menu-panels.component';
|
||||||
|
import { MatExpansionModule } from '@angular/material/expansion';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [
|
declarations: [
|
||||||
|
@ -29,7 +31,8 @@ import { ProtocolsComponent } from './protocols/protocols.component';
|
||||||
InfoComponent,
|
InfoComponent,
|
||||||
DatafilterPipe,
|
DatafilterPipe,
|
||||||
MainMenuTreeComponent,
|
MainMenuTreeComponent,
|
||||||
ProtocolsComponent
|
ProtocolsComponent,
|
||||||
|
MainMenuPanelsComponent
|
||||||
],
|
],
|
||||||
imports: [
|
imports: [
|
||||||
BrowserModule,
|
BrowserModule,
|
||||||
|
@ -48,7 +51,8 @@ import { ProtocolsComponent } from './protocols/protocols.component';
|
||||||
MatCardModule,
|
MatCardModule,
|
||||||
MatFormFieldModule,
|
MatFormFieldModule,
|
||||||
MatInputModule,
|
MatInputModule,
|
||||||
MatTableModule
|
MatTableModule,
|
||||||
|
MatExpansionModule
|
||||||
],
|
],
|
||||||
providers: [],
|
providers: [],
|
||||||
bootstrap: [AppComponent]
|
bootstrap: [AppComponent]
|
||||||
|
|
|
@ -0,0 +1,13 @@
|
||||||
|
.menu-count {
|
||||||
|
padding-top: 0.1em;
|
||||||
|
padding-bottom: 0.1em;
|
||||||
|
padding-left: 0.4em;
|
||||||
|
padding-right: 0.4em;
|
||||||
|
border-radius: 1em;
|
||||||
|
font-size: 0.7em;
|
||||||
|
color: #fff;
|
||||||
|
background-color:cornflowerblue;
|
||||||
|
width: 2em;
|
||||||
|
text-align: center;
|
||||||
|
float: right;
|
||||||
|
}
|
|
@ -0,0 +1,57 @@
|
||||||
|
<mat-accordion>
|
||||||
|
<mat-expansion-panel>
|
||||||
|
<mat-expansion-panel-header>
|
||||||
|
<mat-panel-title>Home</mat-panel-title>
|
||||||
|
</mat-expansion-panel-header>
|
||||||
|
<p>...</p>
|
||||||
|
</mat-expansion-panel>
|
||||||
|
<mat-expansion-panel>
|
||||||
|
<mat-expansion-panel-header>
|
||||||
|
<mat-panel-title>Datasources</mat-panel-title>
|
||||||
|
</mat-expansion-panel-header>
|
||||||
|
<mat-nav-list>
|
||||||
|
<a mat-list-item [routerLink]="['ds/search']">Search</a>
|
||||||
|
</mat-nav-list>
|
||||||
|
</mat-expansion-panel>
|
||||||
|
|
||||||
|
|
||||||
|
<mat-expansion-panel>
|
||||||
|
<mat-expansion-panel-header>
|
||||||
|
<mat-panel-title>Simple Resources</mat-panel-title>
|
||||||
|
</mat-expansion-panel-header>
|
||||||
|
<mat-nav-list>
|
||||||
|
<ng-container *ngFor="let r of resTypes">
|
||||||
|
<a mat-list-item [routerLink]="['resources/' + r.id]" *ngIf="r.simple">{{r.name}} <span class="menu-count">{{r.count}}</span></a>
|
||||||
|
</ng-container>
|
||||||
|
</mat-nav-list>
|
||||||
|
</mat-expansion-panel>
|
||||||
|
|
||||||
|
<mat-expansion-panel>
|
||||||
|
<mat-expansion-panel-header>
|
||||||
|
<mat-panel-title>Advanced Resources</mat-panel-title>
|
||||||
|
</mat-expansion-panel-header>
|
||||||
|
<mat-nav-list>
|
||||||
|
<ng-container *ngFor="let r of resTypes">
|
||||||
|
<a mat-list-item [routerLink]="['adv_resources/' + r.id]" *ngIf="!r.simple">{{r.name}} <span class="menu-count">{{r.count}}</span></a>
|
||||||
|
</ng-container>
|
||||||
|
</mat-nav-list>
|
||||||
|
</mat-expansion-panel>
|
||||||
|
|
||||||
|
<mat-expansion-panel>
|
||||||
|
<mat-expansion-panel-header>
|
||||||
|
<mat-panel-title>Logs</mat-panel-title>
|
||||||
|
</mat-expansion-panel-header>
|
||||||
|
<mat-nav-list>
|
||||||
|
<a mat-list-item [routerLink]="['wf_history']">Workflow History</a>
|
||||||
|
</mat-nav-list>
|
||||||
|
</mat-expansion-panel>
|
||||||
|
|
||||||
|
<mat-expansion-panel>
|
||||||
|
<mat-expansion-panel-header>
|
||||||
|
<mat-panel-title>Info</mat-panel-title>
|
||||||
|
</mat-expansion-panel-header>
|
||||||
|
<mat-nav-list>
|
||||||
|
<a mat-list-item [routerLink]="['info']">Container Info</a>
|
||||||
|
</mat-nav-list>
|
||||||
|
</mat-expansion-panel>
|
||||||
|
</mat-accordion>
|
|
@ -0,0 +1,23 @@
|
||||||
|
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { MainMenuPanelsComponent } from './main-menu-panels.component';
|
||||||
|
|
||||||
|
describe('MainMenuPanelsComponent', () => {
|
||||||
|
let component: MainMenuPanelsComponent;
|
||||||
|
let fixture: ComponentFixture<MainMenuPanelsComponent>;
|
||||||
|
|
||||||
|
beforeEach(async () => {
|
||||||
|
await TestBed.configureTestingModule({
|
||||||
|
declarations: [ MainMenuPanelsComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
|
||||||
|
fixture = TestBed.createComponent(MainMenuPanelsComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,17 @@
|
||||||
|
import { Component } from '@angular/core';
|
||||||
|
import { ResourceType } from '../model/controller.model';
|
||||||
|
import { ISCommonService } from '../iscommon.service';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-main-menu-panels',
|
||||||
|
templateUrl: './main-menu-panels.component.html',
|
||||||
|
styleUrls: ['./main-menu-panels.component.css']
|
||||||
|
})
|
||||||
|
export class MainMenuPanelsComponent {
|
||||||
|
|
||||||
|
resTypes:ResourceType[] = [];
|
||||||
|
|
||||||
|
constructor(public service:ISCommonService) {
|
||||||
|
this.service.loadResourceTypes().subscribe((data:ResourceType[]) => this.resTypes = data);
|
||||||
|
}
|
||||||
|
}
|
|
@ -3,7 +3,7 @@
|
||||||
<mat-card-title>Harvesting Protocols</mat-card-title>
|
<mat-card-title>Harvesting Protocols</mat-card-title>
|
||||||
</mat-card-header>
|
</mat-card-header>
|
||||||
<mat-card-content>
|
<mat-card-content>
|
||||||
<div style="margin-top: 20px;" *ngFor="let prot of protDatasources">
|
<div style="margin-top: 3em;" *ngFor="let prot of protDatasources">
|
||||||
<h3>{{prot.protocol}}</h3>
|
<h3>{{prot.protocol}}</h3>
|
||||||
|
|
||||||
<table mat-table [dataSource]="prot.datasource" class="mat-elevation-z8">
|
<table mat-table [dataSource]="prot.datasource" class="mat-elevation-z8">
|
||||||
|
|
Loading…
Reference in New Issue