From 0627692616966405f194189028319ffa719470ea Mon Sep 17 00:00:00 2001 From: Dylan Hemsworth Date: Fri, 13 Oct 2023 21:37:58 -0700 Subject: [PATCH] Css cleanup for evac --- .../bans-widget/bans-widget.component.ts | 2 -- .../evacuations-widget.component.html | 11 +++++--- .../evacuations-widget.component.scss | 25 +++++++++++++++---- .../evacuations-widget.component.ts | 4 +-- .../wildfires-list-header.component.ts | 15 ++++++++--- .../assets/images/svg-icons/forward-arrow.svg | 3 +++ 6 files changed, 43 insertions(+), 17 deletions(-) create mode 100644 client/wfnews-war/src/main/angular/src/assets/images/svg-icons/forward-arrow.svg diff --git a/client/wfnews-war/src/main/angular/src/app/components/dashboard-component/widgets/bans-widget/bans-widget.component.ts b/client/wfnews-war/src/main/angular/src/app/components/dashboard-component/widgets/bans-widget/bans-widget.component.ts index 72733d848b..9f8199aeaf 100644 --- a/client/wfnews-war/src/main/angular/src/app/components/dashboard-component/widgets/bans-widget/bans-widget.component.ts +++ b/client/wfnews-war/src/main/angular/src/app/components/dashboard-component/widgets/bans-widget/bans-widget.component.ts @@ -32,8 +32,6 @@ export class BansWidget implements OnInit, AfterViewInit { this.startupComplete = true this.cdr.detectChanges() - console.log(cat1sld, cat2sld, cat3sld) - // Create map and append data to the map component const southWest = L.latLng(60.2, -116), northEast = L.latLng(49, -136.3), diff --git a/client/wfnews-war/src/main/angular/src/app/components/dashboard-component/widgets/evacuations-widget/evacuations-widget.component.html b/client/wfnews-war/src/main/angular/src/app/components/dashboard-component/widgets/evacuations-widget/evacuations-widget.component.html index cdc8a74ae6..c2edf12289 100644 --- a/client/wfnews-war/src/main/angular/src/app/components/dashboard-component/widgets/evacuations-widget/evacuations-widget.component.html +++ b/client/wfnews-war/src/main/angular/src/app/components/dashboard-component/widgets/evacuations-widget/evacuations-widget.component.html @@ -6,16 +6,16 @@
- Order + Total Evacuation Orders
- Total Evacuation Orders + Order {{evacOrders}}
- Alert + Total Evacuation Alerts
- Total Evacuation Alerts + Alert {{evacAlerts}}
@@ -34,5 +34,8 @@
+
+ View AllOrder +
diff --git a/client/wfnews-war/src/main/angular/src/app/components/dashboard-component/widgets/evacuations-widget/evacuations-widget.component.scss b/client/wfnews-war/src/main/angular/src/app/components/dashboard-component/widgets/evacuations-widget/evacuations-widget.component.scss index 667b4a0e8d..0045188ea7 100644 --- a/client/wfnews-war/src/main/angular/src/app/components/dashboard-component/widgets/evacuations-widget/evacuations-widget.component.scss +++ b/client/wfnews-war/src/main/angular/src/app/components/dashboard-component/widgets/evacuations-widget/evacuations-widget.component.scss @@ -53,12 +53,11 @@ .stat-text { display: flex; - flex-direction: column; + flex-direction: row; } .stat-box { - display: flex; - padding: 0px 20px 0px 20px; + padding: 16px 20px 0px 20px; align-items: center; gap: 32px; align-self: stretch; @@ -71,14 +70,14 @@ .stat-box-icon { display: flex; - padding: 12px; + padding: 12px 12px 12px 0px; flex-direction: column; justify-content: center; align-items: center; gap: 8px; border-radius: 60px; position: relative; - top: -5px; + top: 6px; } .stat-box-data { @@ -99,6 +98,7 @@ font-style: normal; font-weight: 500; line-height: normal; + margin-top: 16px; } .evac-list-box { @@ -150,3 +150,18 @@ font-weight: 500; line-height: 29px; /* 131.818% */ } + +.footer { + width: 100%; + text-align: end; +} + +.link { + color: var(--blues-blue-5, var(--Medium-Blue, #146FB4)); + font-family: Noto Sans; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 21px; /* 131.25% */ + text-decoration: none; +} diff --git a/client/wfnews-war/src/main/angular/src/app/components/dashboard-component/widgets/evacuations-widget/evacuations-widget.component.ts b/client/wfnews-war/src/main/angular/src/app/components/dashboard-component/widgets/evacuations-widget/evacuations-widget.component.ts index 833af329e3..0e79eacf25 100644 --- a/client/wfnews-war/src/main/angular/src/app/components/dashboard-component/widgets/evacuations-widget/evacuations-widget.component.ts +++ b/client/wfnews-war/src/main/angular/src/app/components/dashboard-component/widgets/evacuations-widget/evacuations-widget.component.ts @@ -21,7 +21,7 @@ export class EvacuationsWidget implements AfterViewInit { if (evacs && evacs.features) { this.evacOrders = evacs.features.filter(e => e.attributes.ORDER_ALERT_STATUS === 'Order').length - this.evacAlerts = evacs.features.filter(e => e.attributes.ORDER_ALERT_STATUS === 'Alerts').length + this.evacAlerts = evacs.features.filter(e => e.attributes.ORDER_ALERT_STATUS === 'Alert').length for (const element of evacs.features) { this.evacList.push({ @@ -37,7 +37,7 @@ export class EvacuationsWidget implements AfterViewInit { } // sort the list by date - this.evacList.sort((a,b) =>(a.issuedOnRaw > b.issuedOnRaw) ? 1 : ((b.issuedOnRaw > a.issuedOnRaw) ? -1 : 0)) + this.evacList.sort((a,b) =>(a.issuedOnRaw > b.issuedOnRaw) ? -1 : ((b.issuedOnRaw > a.issuedOnRaw) ? 1 : 0)) // only keep the first 4 or 5 if (this.evacList.length > 5) { this.evacList = this.evacList.slice(0, 5); diff --git a/client/wfnews-war/src/main/angular/src/app/components/wildfires-list-header/wildfires-list-header.component.ts b/client/wfnews-war/src/main/angular/src/app/components/wildfires-list-header/wildfires-list-header.component.ts index 0243142107..87166f8963 100644 --- a/client/wfnews-war/src/main/angular/src/app/components/wildfires-list-header/wildfires-list-header.component.ts +++ b/client/wfnews-war/src/main/angular/src/app/components/wildfires-list-header/wildfires-list-header.component.ts @@ -1,7 +1,7 @@ -import { ChangeDetectorRef, Component } from '@angular/core'; +import { ChangeDetectorRef, Component, OnInit } from '@angular/core'; import { MatDialog } from '@angular/material/dialog'; import { MatIconRegistry } from '@angular/material/icon'; -import { Router } from '@angular/router'; +import { ActivatedRoute, Router } from '@angular/router'; import { WFMapService } from '@app/services/wf-map.service'; import { isMobileView } from '@app/utils'; import { AppConfigService } from '@wf1/core-ui'; @@ -11,7 +11,7 @@ import { AppConfigService } from '@wf1/core-ui'; templateUrl: './wildfires-list-header.component.html', styleUrls: ['./wildfires-list-header.component.scss'] }) -export class WildfiresListHeaderComponent { +export class WildfiresListHeaderComponent implements OnInit { public selectedTab = 0 @@ -20,6 +20,7 @@ export class WildfiresListHeaderComponent { constructor( protected appConfigService: AppConfigService, protected router: Router, + private activatedRoute: ActivatedRoute, protected matIconRegistry: MatIconRegistry, protected cdr: ChangeDetectorRef, protected dialog: MatDialog, @@ -30,7 +31,13 @@ export class WildfiresListHeaderComponent { selectTab (tab: number) { this.selectedTab = tab // swap to the desired tab - this.cdr.detectChanges(); + this.cdr.detectChanges() } + ngOnInit() { + this.activatedRoute.queryParams.subscribe(params => { + const tab = params['tab'] + this.selectTab(Number(tab)) + }); + } } diff --git a/client/wfnews-war/src/main/angular/src/assets/images/svg-icons/forward-arrow.svg b/client/wfnews-war/src/main/angular/src/assets/images/svg-icons/forward-arrow.svg new file mode 100644 index 0000000000..bcf64e3a58 --- /dev/null +++ b/client/wfnews-war/src/main/angular/src/assets/images/svg-icons/forward-arrow.svg @@ -0,0 +1,3 @@ + + +