This commit is contained in:
Michele Artini 2023-01-24 14:11:39 +01:00
parent cfcd1493a1
commit 085c3123de
11 changed files with 100 additions and 27 deletions

View File

@ -3,11 +3,13 @@ import { RouterModule, Routes } from '@angular/router';
import { InfoComponent } from './info/info.component'; import { InfoComponent } from './info/info.component';
import { ProtocolsComponent } from './protocols/protocols.component'; import { ProtocolsComponent } from './protocols/protocols.component';
import { WfHistoryComponent } from './wf-history/wf-history.component'; import { WfHistoryComponent } from './wf-history/wf-history.component';
import { ResourcesComponent } from './resources/resources.component';
const routes: Routes = [ const routes: Routes = [
{ path:"info" , component:InfoComponent}, { path:"info" , component:InfoComponent},
{ path:"adv_resources/protocol" , component:ProtocolsComponent}, { path:"adv_resources/protocol" , component:ProtocolsComponent},
{ path:"wf_history" , component:WfHistoryComponent} { path:"wf_history" , component:WfHistoryComponent},
{ path:"resources/:type" , component:ResourcesComponent}
]; ];
@NgModule({ @NgModule({

View File

@ -1,5 +1,5 @@
<mat-sidenav-container class="sidenav-container"> <mat-sidenav-container class="sidenav-container">
<mat-sidenav #drawer class="sidenav" fixedInViewport <mat-sidenav #drawer class="sidenav mat-elevation-z8" fixedInViewport
[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'" [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
[mode]="(isHandset$ | async) ? 'over' : 'side'" [mode]="(isHandset$ | async) ? 'over' : 'side'"
[opened]="(isHandset$ | async) === false"> [opened]="(isHandset$ | async) === false">
@ -12,8 +12,7 @@
type="button" type="button"
aria-label="Toggle sidenav" aria-label="Toggle sidenav"
mat-icon-button mat-icon-button
(click)="drawer.toggle()" (click)="drawer.toggle()">
*ngIf="isHandset$ | async">
<mat-icon aria-label="Side nav toggle icon">menu</mat-icon> <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
</button> </button>
<span>{{title}}</span> <span>{{title}}</span>

View File

@ -25,7 +25,8 @@ import { MainMenuPanelsComponent } from './main-menu-panels/main-menu-panels.com
import { MatExpansionModule } from '@angular/material/expansion'; import { MatExpansionModule } from '@angular/material/expansion';
import { WfDialog, WfHistoryComponent } from './wf-history/wf-history.component'; import { WfDialog, WfHistoryComponent } from './wf-history/wf-history.component';
import { MatDialogModule } from '@angular/material/dialog'; import { MatDialogModule } from '@angular/material/dialog';
import {MatSortModule} from '@angular/material/sort' import {MatSortModule} from '@angular/material/sort';
import { ResourcesComponent } from './resources/resources.component'
@NgModule({ @NgModule({
@ -36,7 +37,8 @@ import {MatSortModule} from '@angular/material/sort'
InfoComponent, InfoComponent,
ProtocolsComponent, ProtocolsComponent,
WfHistoryComponent, WfHistoryComponent,
WfDialog WfDialog,
ResourcesComponent
], ],
imports: [ imports: [
BrowserModule, BrowserModule,

View File

@ -4,14 +4,35 @@
padding-left: 0.4em; padding-left: 0.4em;
padding-right: 0.4em; padding-right: 0.4em;
border-radius: 1em; border-radius: 1em;
font-size: 0.7em;
color: #fff; color: #fff;
background-color:cornflowerblue; background-color:cornflowerblue;
width: 2em;
text-align: center; text-align: center;
float: right;
} }
.collapse-buttons { text-align: right; } .collapse-buttons { text-align: right; }
.collapse-buttons button { font-size: 0.6em; } .collapse-buttons button { font-size: 0.6em; }
.mat-expansion-panel-spacing { margin: 0; } .mat-expansion-panel-spacing { margin: 0; }
.menu-item {
padding-top: 0.3em;
padding-bottom: 0.3em;
padding-left: 7%;
padding-right: 3%;
font-size: 0.9em;
width: 90%;
color: #696969;
text-decoration: none !important;
display: inline-block;
}
.menu-item:hover {
color: #999;
background-color: #eaeaea;
}
.menu-item .badge-label {
font-size: 0.6em;
float: right;
width: 2em;
}

View File

@ -9,15 +9,15 @@
<mat-expansion-panel-header> <mat-expansion-panel-header>
<mat-panel-title>Home</mat-panel-title> <mat-panel-title>Home</mat-panel-title>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<p>...</p> <div>...</div>
</mat-expansion-panel> </mat-expansion-panel>
<mat-expansion-panel> <mat-expansion-panel>
<mat-expansion-panel-header> <mat-expansion-panel-header>
<mat-panel-title>Datasources</mat-panel-title> <mat-panel-title>Datasources</mat-panel-title>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<mat-nav-list> <div>
<a mat-list-item [routerLink]="['ds/search']">Search</a> <a class="menu-item" [routerLink]="['ds/search']">Search</a>
</mat-nav-list> </div>
</mat-expansion-panel> </mat-expansion-panel>
@ -25,39 +25,49 @@
<mat-expansion-panel-header> <mat-expansion-panel-header>
<mat-panel-title>Simple Resources</mat-panel-title> <mat-panel-title>Simple Resources</mat-panel-title>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<mat-nav-list> <div>
<ng-container *ngFor="let r of resTypes"> <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> <div *ngIf="r.simple">
<a class="menu-item" [routerLink]="['resources/' + r.id]">
{{r.name}}
<span class="badge-label badge-info">{{r.count}}</span>
</a>
</div>
</ng-container> </ng-container>
</mat-nav-list> </div>
</mat-expansion-panel> </mat-expansion-panel>
<mat-expansion-panel> <mat-expansion-panel>
<mat-expansion-panel-header> <mat-expansion-panel-header>
<mat-panel-title>Advanced Resources</mat-panel-title> <mat-panel-title>Advanced Resources</mat-panel-title>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<mat-nav-list> <div>
<ng-container *ngFor="let r of resTypes"> <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> <div *ngIf="!r.simple">
<a class="menu-item" [routerLink]="['adv_resources/' + r.id]">
{{r.name}}
<span class="badge-label badge-info">{{r.count}}</span>
</a>
</div>
</ng-container> </ng-container>
</mat-nav-list> </div>
</mat-expansion-panel> </mat-expansion-panel>
<mat-expansion-panel> <mat-expansion-panel>
<mat-expansion-panel-header> <mat-expansion-panel-header>
<mat-panel-title>Logs</mat-panel-title> <mat-panel-title>Logs</mat-panel-title>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<mat-nav-list> <div>
<a mat-list-item [routerLink]="['wf_history']">Workflow History</a> <a class="menu-item" [routerLink]="['wf_history']">Workflow History</a>
</mat-nav-list> </div>
</mat-expansion-panel> </mat-expansion-panel>
<mat-expansion-panel> <mat-expansion-panel>
<mat-expansion-panel-header> <mat-expansion-panel-header>
<mat-panel-title>Info</mat-panel-title> <mat-panel-title>Info</mat-panel-title>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<mat-nav-list> <div>
<a mat-list-item [routerLink]="['info']">Container Info</a> <a class="menu-item" [routerLink]="['info']">Container Info</a>
</mat-nav-list> </div>
</mat-expansion-panel> </mat-expansion-panel>
</mat-accordion> </mat-accordion>

View File

@ -1,8 +1,9 @@
import {Component, ViewChild} from '@angular/core'; import {Component, ViewChild, ViewEncapsulation} from '@angular/core';
import { ResourceType } from '../model/controller.model'; import { ResourceType } from '../model/controller.model';
import { ISService } from '../is.service'; import { ISService } from '../is.service';
import {MatAccordion} from '@angular/material/expansion'; import {MatAccordion} from '@angular/material/expansion';
@Component({ @Component({
selector: 'app-main-menu-panels', selector: 'app-main-menu-panels',
templateUrl: './main-menu-panels.component.html', templateUrl: './main-menu-panels.component.html',

View File

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

View File

@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ResourcesComponent } from './resources.component';
describe('ResourcesComponent', () => {
let component: ResourcesComponent;
let fixture: ComponentFixture<ResourcesComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ ResourcesComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(ResourcesComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@ -0,0 +1,10 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-resources',
templateUrl: './resources.component.html',
styleUrls: ['./resources.component.css']
})
export class ResourcesComponent {
}

View File

@ -68,3 +68,7 @@ th, td {
.badge-warning { .badge-warning {
background-color:darkorange; background-color:darkorange;
} }
.badge-info {
background-color: cornflowerblue
}