diff --git a/projects/nshmp-apps/src/app/dashboard/app.component.html b/projects/nshmp-apps/src/app/dashboard/app.component.html
index 1af2d35269911115d5000a7cb6a4b39a077f68db..359771f0cf78859edf2227f65f72dd9d8846b394 100644
--- a/projects/nshmp-apps/src/app/dashboard/app.component.html
+++ b/projects/nshmp-apps/src/app/dashboard/app.component.html
@@ -1,113 +1,9 @@
<nshmp-lib-ng-template #template [navigationList]="navigationList" [title]="">
- <div
- class="dashboard grid-row"
- style="background-image: url(assets/dashboard-background.png)"
- >
- <div class="grid-col-12 tablet-lg:grid-col-6">
- <div class="grid-col-10 grid-offset-1">
- <div class="dashboard--title">
- USGS Earthquake
- <br />
- Hazard Toolbox
- </div>
- </div>
-
- <div class="grid-col-10 grid-offset-1">
- <div class="dashboard--description">
- Web applications for querying
- <br />
- and computing hazard from USGS
- <br />
- national seismic hazard models.
- </div>
- </div>
-
- <div class="grid-col-12 tablet-lg:grid-col-10 tablet-lg:grid-offset-1">
- <!-- Main apps -->
- <div class="app-section">
- @for (app of mainApps; track app) {
- <div class="grid-col-12">
- <mat-card
- [routerLink]="app.routerLink"
- class="dashboard-mat-card pointer"
- (click)="template.onRoute(app)"
- >
- <mat-card-content>{{ app.display }}</mat-card-content>
- </mat-card>
- </div>
- }
- </div>
-
- <!-- Design maps -->
- <div class="app-section padding-top-6">
- <div class="app-section--title">Design Maps</div>
- @for (app of designMapApps; track app) {
- <div class="grid-col-12">
- <mat-card
- [routerLink]="app.routerLink"
- class="dashboard-mat-card pointer"
- (click)="template.onRoute(app)"
- >
- <mat-card-content>{{ app.display }}</mat-card-content>
- </mat-card>
- </div>
- }
- </div>
- </div>
- </div>
-
- <div class="grid-col-12 tablet-lg:grid-col-6 center-y">
- <div class="grid-col-12 tablet-lg:grid-col-10 tablet-lg:grid-offset-1">
- <!-- Source models -->
- <div class="app-section">
- <div class="app-section--title">Source Models</div>
- @for (app of sourceModelApps; track app) {
- <div class="grid-col-12">
- <mat-card
- [routerLink]="app.routerLink"
- class="dashboard-mat-card pointer"
- (click)="template.onRoute(app)"
- >
- <mat-card-content>{{ app.display }}</mat-card-content>
- </mat-card>
- </div>
- }
- </div>
-
- <!-- GMMs -->
- <div class="app-section">
- <div class="app-section--title">Ground Motion Models</div>
- @for (app of gmmApps; track app) {
- <div class="grid-col-12">
- <mat-card
- [routerLink]="app.routerLink"
- class="dashboard-mat-card pointer"
- (click)="template.onRoute(app)"
- >
- <mat-card-content>{{ app.display }}</mat-card-content>
- </mat-card>
- </div>
- }
- </div>
-
- <!-- NCM apps -->
- <div class="app-section">
- <div class="app-section--title">National Crustal Model</div>
- @for (app of ncmApps; track app) {
- <div class="grid-col-12">
- <mat-card
- [routerLink]="app.routerLink"
- class="dashboard-mat-card pointer"
- (click)="template.onRoute(app)"
- >
- <mat-card-content>{{ app.display }}</mat-card-content>
- </mat-card>
- </div>
- }
- </div>
- </div>
- </div>
- </div>
+ <!-- Dashboard -->
+ <nshmp-lib-ng-dashboard [sections]="sections">
+ <nshmp-lib-ng-dashboard-title />
+ <nshmp-lib-ng-dashboard-description />
+ </nshmp-lib-ng-dashboard>
<!-- About page -->
<nshmp-lib-ng-about-page>
diff --git a/projects/nshmp-apps/src/app/dashboard/app.component.ts b/projects/nshmp-apps/src/app/dashboard/app.component.ts
index c7b5cecc8823bbb0c6475a9b1653b2493059558e..3e9a33fcf43eefb51c0fafe66df7628254d526bb 100644
--- a/projects/nshmp-apps/src/app/dashboard/app.component.ts
+++ b/projects/nshmp-apps/src/app/dashboard/app.component.ts
@@ -1,8 +1,12 @@
import {Component} from '@angular/core';
-import {MatCard, MatCardContent} from '@angular/material/card';
-import {RouterLink} from '@angular/router';
import {NshmpLibNgAboutPageComponent} from '@ghsc/nshmp-lib-ng/about';
-import {NshmpLibNgTemplateComponent} from '@ghsc/nshmp-lib-ng/nshmp';
+import {
+ ApplicationSections,
+ NshmpLibNgDashboardComponent,
+ NshmpLibNgDashboardDescriptionComponent,
+ NshmpLibNgDashboardTitleComponent,
+ NshmpLibNgTemplateComponent,
+} from '@ghsc/nshmp-lib-ng/nshmp';
import {
designMapApps,
@@ -23,9 +27,9 @@ import {AboutComponent} from './components/about/about.component';
imports: [
NshmpLibNgTemplateComponent,
NshmpLibNgAboutPageComponent,
- MatCard,
- RouterLink,
- MatCardContent,
+ NshmpLibNgDashboardComponent,
+ NshmpLibNgDashboardTitleComponent,
+ NshmpLibNgDashboardDescriptionComponent,
AboutComponent,
],
selector: 'app-app',
@@ -38,15 +42,45 @@ export class AppComponent {
navigationList = navigation();
/** Design map apps */
- designMapApps = designMapApps();
+ private designMapApps = designMapApps();
/** The GMM applications */
- gmmApps = gmmApps();
+ private gmmApps = gmmApps();
/** The main applications */
- mainApps = mainApps();
+ private mainApps = mainApps();
/** NCM apps */
- ncmApps = ncmApps();
+ private ncmApps = ncmApps();
/** Source model applications */
- sourceModelApps = sourceModelApps();
+ private sourceModelApps = sourceModelApps();
+
+ sections: ApplicationSections[] = [
+ {
+ sections: [
+ {
+ applications: this.mainApps.map(navigation => ({navigation})),
+ },
+ {
+ applications: this.designMapApps.map(navigation => ({navigation})),
+ title: 'Design Maps',
+ },
+ ],
+ },
+ {
+ sections: [
+ {
+ applications: this.sourceModelApps.map(navigation => ({navigation})),
+ title: 'Source Model',
+ },
+ {
+ applications: this.gmmApps.map(navigation => ({navigation})),
+ title: 'Ground Motion Models',
+ },
+ {
+ applications: this.ncmApps.map(navigation => ({navigation})),
+ title: 'National Crustal Model',
+ },
+ ],
+ },
+ ];
constructor() {}
}
diff --git a/projects/nshmp-apps/src/app/dev/dashboard/app.component.html b/projects/nshmp-apps/src/app/dev/dashboard/app.component.html
index fbc959b6d58d48f089be2a8d9c31d059d2ca7b59..6f4c9fe7c54551bdb0dfab21166edcfa4eb98424 100644
--- a/projects/nshmp-apps/src/app/dev/dashboard/app.component.html
+++ b/projects/nshmp-apps/src/app/dev/dashboard/app.component.html
@@ -1,62 +1,15 @@
<nshmp-lib-ng-template #template [navigationList]="navigationList">
- <div
- class="dashboard grid-row"
- style="background-image: url(assets/dashboard-background.png)"
- >
- <div class="grid-col-12 tablet-lg:grid-col-6">
- <div class="grid-col-10 grid-offset-1">
- <div class="dashboard--title">
- USGS Earthquake
- <br />
- Development
- <br />
- Hazard Toolbox
- </div>
- </div>
-
- <div class="grid-col-10 grid-offset-1">
- <div class="dashboard--description">
- Web applications for querying and computing hazard from USGS national
- seismic hazard models
- </div>
- </div>
-
- <div class="grid-col-10 grid-offset-1">
- <div class="app-section">
- @for (app of mainApps; track app) {
- <div class="grid-col-12">
- <mat-card
- [routerLink]="app.routerLink"
- class="dashboard-mat-card pointer"
- (click)="template.onRoute(app)"
- >
- <mat-card-content>{{ app.display }}</mat-card-content>
- </mat-card>
- </div>
- }
- </div>
- </div>
- </div>
-
- <div class="grid-col-12 tablet-lg:grid-col-6 center-y">
- <div class="grid-col-10 grid-offset-1">
- <div class="app-section">
- <div class="app-section--title">AWS</div>
- @for (app of awsApps; track app) {
- <div class="grid-col-12">
- <mat-card
- [routerLink]="app.routerLink"
- class="dashboard-mat-card pointer"
- (click)="template.onRoute(app)"
- >
- <mat-card-content>{{ app.display }}</mat-card-content>
- </mat-card>
- </div>
- }
- </div>
- </div>
- </div>
- </div>
+ <!-- Dashboard -->
+ <nshmp-lib-ng-dashboard [sections]="sections">
+ <nshmp-lib-ng-dashboard-title>
+ USGS Earthquake
+ <br />
+ Development
+ <br />
+ Hazard Toolbox
+ </nshmp-lib-ng-dashboard-title>
+ <nshmp-lib-ng-dashboard-description />
+ </nshmp-lib-ng-dashboard>
<!-- About page -->
<nshmp-lib-ng-about-page>
diff --git a/projects/nshmp-apps/src/app/dev/dashboard/app.component.ts b/projects/nshmp-apps/src/app/dev/dashboard/app.component.ts
index 01e98cdf3fc639bc1d64aafdd5391f46cdedee4e..28957cbc6c6725d3896d6cab826b2369d53f2b85 100644
--- a/projects/nshmp-apps/src/app/dev/dashboard/app.component.ts
+++ b/projects/nshmp-apps/src/app/dev/dashboard/app.component.ts
@@ -1,11 +1,15 @@
import {Component} from '@angular/core';
-import {MatCard, MatCardContent} from '@angular/material/card';
-import {RouterLink} from '@angular/router';
import {
NshmpLibNgAboutContentComponent,
NshmpLibNgAboutPageComponent,
} from '@ghsc/nshmp-lib-ng/about';
-import {NshmpLibNgTemplateComponent} from '@ghsc/nshmp-lib-ng/nshmp';
+import {
+ ApplicationSections,
+ NshmpLibNgDashboardComponent,
+ NshmpLibNgDashboardDescriptionComponent,
+ NshmpLibNgDashboardTitleComponent,
+ NshmpLibNgTemplateComponent,
+} from '@ghsc/nshmp-lib-ng/nshmp';
import * as nav from '../../../shared/utils/navigation.utils';
@@ -17,9 +21,9 @@ import * as nav from '../../../shared/utils/navigation.utils';
NshmpLibNgTemplateComponent,
NshmpLibNgAboutPageComponent,
NshmpLibNgAboutContentComponent,
- MatCard,
- RouterLink,
- MatCardContent,
+ NshmpLibNgDashboardComponent,
+ NshmpLibNgDashboardTitleComponent,
+ NshmpLibNgDashboardDescriptionComponent,
],
selector: 'app-app',
standalone: true,
@@ -27,12 +31,31 @@ import * as nav from '../../../shared/utils/navigation.utils';
templateUrl: './app.component.html',
})
export class AppComponent {
- /** AWS applications */
- awsApps = nav.devAwsApps();
- /** Main development applications */
- mainApps = nav.devMainApps();
/** Navigation list for menu */
navigationList = nav.devNavigation();
+ /** AWS applications */
+ private awsApps = nav.devAwsApps();
+ /** Main development applications */
+ private mainApps = nav.devMainApps();
+
+ sections: ApplicationSections[] = [
+ {
+ sections: [
+ {
+ applications: this.mainApps.map(navigation => ({navigation})),
+ },
+ ],
+ },
+ {
+ sections: [
+ {
+ applications: this.awsApps.map(navigation => ({navigation})),
+ title: 'AWS',
+ },
+ ],
+ },
+ ];
+
constructor() {}
}