Skip to content

Commit

Permalink
Evac widget content
Browse files Browse the repository at this point in the history
  • Loading branch information
dhlevi committed Oct 14, 2023
1 parent eecd5fa commit d3a9ed1
Show file tree
Hide file tree
Showing 3 changed files with 192 additions and 5 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,36 @@
<span>Evacuations</span>
</div>
<ng-template #loading><mat-spinner [diameter]="80" class="spinner-position"></mat-spinner></ng-template>
<div *ngIf="startupComplete; else loading"></div>
<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" />
<div class="stat-text">
<span class="stat-box-label">Total Evacuation Orders</span>
<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" />
<div class="stat-text">
<span class="stat-box-label">Total Evacuation Alerts</span>
<span class="stat-box-data">{{evacAlerts}}</span>
</div>
</div>
</div>
<div class="evac-list-box">
<div class="evac-list-title">Recent Notices</div>
<div class="evac-card" *ngFor="let evac of evacList">
<div class="evac-card-content">
<img *ngIf="evac.status === 'Order'" height="22" width="22" src="/assets/images/svg-icons/evacuation-order.svg" alt="Order" />
<img *ngIf="evac.status === 'Alert'" height="22" width="22" src="/assets/images/svg-icons/evacuation-alert.svg" alt="Alert" />
<span class="evac-card-title">{{evac.name}}</span>
</div>
<div class="evac-card-content">
<img height="22" width="22" src="/assets/images/svg-icons/calendar-pin.svg" alt="issued on" />
<span class="evac-card-text">{{evac.issuedOn}}</span>
</div>
</div>
</div>
</div>
</div>
Original file line number Diff line number Diff line change
Expand Up @@ -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% */
}
Original file line number Diff line number Diff line change
@@ -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')
}
}
}

0 comments on commit d3a9ed1

Please sign in to comment.