Show zip code status for every shelter

Author: rohitrp

client/src/app/_services/shelters.service.ts

@@ -80,4 +80,10 @@ export class SheltersService {
       }
     );
   }
+
+  public getZipcodeStatus(): Observable<any> {
+    return this.http.get(
+      `${this.apiBaseUrl}/zipcode/status`
+    );
+  }
 }

client/src/app/shelters/add-shelter/add-shelter.component.ts

@@ -33,8 +33,6 @@ export class AddShelterComponent implements AfterViewInit {
       return;
     }
 
-    console.log(this.shelter);
-
     this.shelterService.addShelter(this.shelter)
       .subscribe(
         (res) => this.alertService.success('Shelter successfully added'),

client/src/app/shelters/shelter-card/shelter-card.component.css

@@ -1,15 +1,15 @@
-.shelter-danger {
-  background: #FF416C;  /* fallback for old browsers */
-  background: -webkit-linear-gradient(to right, #FF4B2B, #FF416C);  /* Chrome 10-25, Safari 5.1-6 */
-  background: linear-gradient(to right, #FF4B2B, #FF416C); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
-}
-
 .shelter-safe {
   background: #11998e;  /* fallback for old browsers */
   background: -webkit-linear-gradient(to right, #38ef7d, #11998e);  /* Chrome 10-25, Safari 5.1-6 */
   background: linear-gradient(to right, #38ef7d, #11998e); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */  
 }
 
+.shelter-danger {
+  background: #FF416C;  /* fallback for old browsers */
+  background: -webkit-linear-gradient(to right, #FF4B2B, #FF416C);  /* Chrome 10-25, Safari 5.1-6 */
+  background: linear-gradient(to right, #FF4B2B, #FF416C); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+}
+
 .shelter-warning {
   background: #fceabb;  /* fallback for old browsers */
   background: -webkit-linear-gradient(to right, #f8b500, #fceabb);  /* Chrome 10-25, Safari 5.1-6 */

client/src/app/shelters/shelter-card/shelter-card.component.html

@@ -1,6 +1,6 @@
 <div class="columns">
   <div class="column is-1">
-    <div class="shelter-danger is-pulled-right shelter-status-info"></div>
+    <div class="is-pulled-right shelter-status-info" [ngClass]="{'shelter-danger': shelterStatus === 0, 'shelter-warning': shelterStatus === 1, 'shelter-safe': shelterStatus === 2}"></div>
   </div>
   <div class="column">
     <div class="card">

client/src/app/shelters/shelter-card/shelter-card.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { Shelter } from '../shelter';
 import { SheltersService } from 'src/app/_services/shelters.service';
 import { AlertService } from 'src/app/_services/alert.service';
+import * as $ from 'jquery';
 
 @Component({
   selector: 'app-shelter-card',
@@ -11,8 +12,10 @@ import { AlertService } from 'src/app/_services/alert.service';
 export class ShelterCardComponent implements OnInit {
   @Input() shelter: Shelter;
   @Input() user: any;
+  @Input() zipcodeStatus: any;
   @Output() updateUserDetails = new EventEmitter<any>();
   bingMapUrl = '';
+  shelterStatus = 2;
 
   joinShelter() {
     this.shelterService.joinShelter(this.shelter['_id'])
@@ -35,16 +38,19 @@ export class ShelterCardComponent implements OnInit {
         (err) => this.alertService.error(err)
       );
   }
+  
   constructor(
     private shelterService: SheltersService,
     private alertService: AlertService
   ) { }
 
-  ngOnInit() {    
-    // this.shelterService.getHospitalDetails(this.shelter.lngLat, 10)
-    //   .subscribe(
-    //     (res) => console.log(res)
-    //   )
+  ngOnInit() {
+    if ($.inArray(+this.shelter.zipcode, this.zipcodeStatus.dangerous) !== -1) {
+      this.shelterStatus = 0;
+    } else if ($.inArray(+this.shelter.zipcode, this.zipcodeStatus.warning) !== -1) {
+      this.shelterStatus = 1;
+    }
+
     this.bingMapUrl = `http://bing.com/maps/default.aspx?cp=${this.shelter.lngLat.split(',').reverse().join('~')}&sp=point.${this.shelter.lngLat.split(',').reverse().join('_')}_${this.shelter.name}_Shelter&lvl=15`
   }
 

client/src/app/shelters/shelters.component.html

@@ -19,7 +19,7 @@ <h1 class="has-text-grey-lighter">No shelters available</h1>
         </div>
         <div class="columns" *ngFor="let shelter of shelters">
           <div class="column">
-            <app-shelter-card [shelter]="shelter" [user]="user" (updateUserDetails)="updateUserDetails($event)"></app-shelter-card>
+            <app-shelter-card [shelter]="shelter" [user]="user" [zipcodeStatus]="zipcodeStatus" (updateUserDetails)="updateUserDetails($event)"></app-shelter-card>
           </div>
         </div>
       </div>

client/src/app/shelters/shelters.component.ts

@@ -12,6 +12,7 @@ export class SheltersComponent implements OnInit {
   tab = 0;
   shelters = [];
   user: any;
+  zipcodeStatus = {};
 
   constructor(
     private alertService: AlertService,
@@ -31,6 +32,12 @@ export class SheltersComponent implements OnInit {
         (res) => this.shelters = res,
         (err) => this.alertService.error(err)
       );
+
+    this.shelterService.getZipcodeStatus()
+      .subscribe(
+        (res) => this.zipcodeStatus = res[0],
+        this.alertService.error
+      );
   }
 
   updateUserDetails(user) {

server/api/shelters/model/ZipcodeStatus.js

@@ -0,0 +1,10 @@
+const mongoose = require('mongoose')
+const Schema = mongoose.Schema;
+
+const ZipcodeStatusModel = new Schema({
+  dangerous: [{ type: Number }],
+  warning: [{ type: Number }],
+  safe: [{ type: Number }]
+})
+
+module.exports = mongoose.model('Zipcodestatus', ZipcodeStatusModel)

server/api/shelters/routes/getZipcodeStatus.js

@@ -0,0 +1,14 @@
+const ZipcodeStatus = require('../model/ZipcodeStatus')
+
+module.exports = {
+  method: 'GET',
+  path: '/api/zipcode/status',
+  options: {
+    handler: async (request, h) => {
+      const zipCodeStatus = await ZipcodeStatus.find({})
+
+      return zipCodeStatus;
+    },
+    description: 'Returns zip code status'
+  }
+}