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 3b422d3e79..cdc8a74ae6 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 @@ -3,5 +3,36 @@ Evacuations -
+
+
+
+ Order +
+ Total Evacuation Orders + {{evacOrders}} +
+
+
+ Alert +
+ Total Evacuation Alerts + {{evacAlerts}} +
+
+
+
+
Recent Notices
+
+
+ Order + Alert + {{evac.name}} +
+
+ issued on + {{evac.issuedOn}} +
+
+
+
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 447a2e710a..667b4a0e8d 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 @@ -38,3 +38,115 @@ width: 100%; padding-bottom: 16px; } + +.content { + width: 100%; + height: 100%; +} + +.counts-box { + display: flex; + width: 100%; + gap: 24px; + margin-top: 10px; +} + +.stat-text { + display: flex; + flex-direction: column; +} + +.stat-box { + display: flex; + padding: 0px 20px 0px 20px; + align-items: center; + gap: 32px; + align-self: stretch; + border-radius: var(--16, 16px); + background: linear-gradient(0deg, #F5F6F9, #F5F6F9), linear-gradient(0deg, #DEDEDE, #DEDEDE); + border: 1.5px solid #DEDEDE; + height: 116px; + width: calc(50% - 24px); +} + +.stat-box-icon { + display: flex; + padding: 12px; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 8px; + border-radius: 60px; + position: relative; + top: -5px; +} + +.stat-box-data { + color: #242424; + font-feature-settings: 'clig' off, 'liga' off; + font-family: 'Noto sans', 'BCSans', 'Open Sans', Verdana, Arial, sans-serif; + font-size: 48px; + font-style: normal; + font-weight: 500; + line-height: normal; + letter-spacing: 0.35px; +} + +.stat-box-label { + color: var(--Black-2, #484848); + font-family: 'Noto sans', 'BCSans', 'Open Sans', Verdana, Arial, sans-serif; + font-size: 18px; + font-style: normal; + font-weight: 500; + line-height: normal; +} + +.evac-list-box { + +} + +.evac-card-content { + display: flex; +} + +.evac-card-title { + overflow: hidden; + color: var(--grays-gray-1, #242424); + text-overflow: ellipsis; + font-family: Noto Sans; + font-size: 18px; + font-style: normal; + font-weight: 500; + line-height: normal; + margin-left: 8px; +} + +.evac-card-text { + color: var(--grays-gray-3, #666); + font-family: Noto Sans; + font-size: 15px; + font-style: normal; + font-weight: 400; + line-height: 22px; /* 146.667% */ + letter-spacing: -0.408px; + margin-left: 8px; +} + +.evac-card { + border-bottom: 1px solid #DEDEDE; + display: flex; + padding: 10px 0px; + flex-direction: column; + align-items: flex-start; + gap: 6px; + align-self: stretch; +} + +.evac-list-title { + color: var(--Black-2, #484848); + font-family: 'Noto sans', 'BCSans', 'Open Sans', Verdana, Arial, sans-serif; + font-size: 22px; + font-style: normal; + font-weight: 500; + line-height: 29px; /* 131.818% */ +} 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 d94cd04d22..833af329e3 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 @@ -1,12 +1,56 @@ -import { Component } from "@angular/core" +import { AfterViewInit, Component } from "@angular/core" +import { AGOLService } from "@app/services/AGOL-service" +import moment from "moment" @Component({ selector: 'evacuations-widget', templateUrl: './evacuations-widget.component.html', styleUrls: ['./evacuations-widget.component.scss'] }) -export class EvacuationsWidget { +export class EvacuationsWidget implements AfterViewInit { public startupComplete = false - - constructor() { } + public evacOrders = 0 + public evacAlerts = 0 + public evacList = [] + + constructor(private agolService: AGOLService) { } + + ngAfterViewInit (): void { + this.agolService.getEvacOrders(null, null, { returnCentroid: false, returnGeometry: false}) + .toPromise().then(evacs => { + 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 + + for (const element of evacs.features) { + this.evacList.push({ + name: element.attributes.EVENT_NAME, + eventType: element.attributes.EVENT_TYPE, + status: element.attributes.ORDER_ALERT_STATUS, + agency: element.attributes.ISSUING_AGENCY, + preOcCode: element.attributes.PREOC_CODE, + emrgOAAsysID: element.attributes.EMRG_OAA_SYSID, + issuedOn: this.convertToDate(element.attributes.DATE_MODIFIED), + issuedOnRaw: element.attributes.DATE_MODIFIED + }) + } + + // sort the list by date + 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); + } + } + + this.startupComplete = true + }) + } + + convertToDate(value: string) { + if (value) { + return moment(value).format('YYYY-MM-DD HH:mm:ss') + } + } }