Css cleanup for evac

bcgov · Oct 14, 2023 · 0627692 · 0627692
1 parent d3a9ed1
commit 0627692
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 17 deletions.
diff --git a/...gular/src/app/components/dashboard-component/widgets/bans-widget/bans-widget.component.ts b/...gular/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/...mponents/dashboard-component/widgets/evacuations-widget/evacuations-widget.component.html b/...mponents/dashboard-component/widgets/evacuations-widget/evacuations-widget.component.html
@@ -6,16 +6,16 @@
   <div class="content" *ngIf="startupComplete; else loading">
     <div class="counts-box">
       <div class="stat-box">
-        <img height="36" width="36" src="/assets/images/svg-icons/evacuation-order.svg" alt="Order" class="stat-box-icon" />
+        <span class="stat-box-label">Total Evacuation Orders</span>
         <div class="stat-text">
-          <span class="stat-box-label">Total Evacuation Orders</span>
+          <img height="36" width="36" src="/assets/images/svg-icons/evacuation-order.svg" alt="Order" class="stat-box-icon" />
           <span class="stat-box-data">{{evacOrders}}</span>
         </div>
       </div>
       <div class="stat-box">
-        <img height="36" width="36" src="/assets/images/svg-icons/evacuation-alert.svg" alt="Alert" class="stat-box-icon" />
+        <span class="stat-box-label">Total Evacuation Alerts</span>
         <div class="stat-text">
-          <span class="stat-box-label">Total Evacuation Alerts</span>
+          <img height="36" width="36" src="/assets/images/svg-icons/evacuation-alert.svg" alt="Alert" class="stat-box-icon" />
           <span class="stat-box-data">{{evacAlerts}}</span>
         </div>
       </div>
@@ -34,5 +34,8 @@
         </div>
       </div>
     </div>
+    <div class="footer">
+      <a class="link" routerLink="../list" [queryParams]="{tab: 1}">View All<img height="20" width="20" style="position: relative; top: 5px; margin-left: 5px;" src="/assets/images/svg-icons/forward-arrow.svg" alt="Order" /></a>
+    </div>
   </div>
 </div>
diff --git a/...mponents/dashboard-component/widgets/evacuations-widget/evacuations-widget.component.scss b/...mponents/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/...components/dashboard-component/widgets/evacuations-widget/evacuations-widget.component.ts b/...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/.../main/angular/src/app/components/wildfires-list-header/wildfires-list-header.component.ts b/.../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