Implement functionality to request shelters

Author: rohitrp

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

@@ -41,4 +41,17 @@ export class SheltersService {
       { shelter: shelter }
     );
   }
+
+  public requestShelter(lngLat): Observable<any> {
+    return this.http.post(
+      `${this.apiBaseUrl}/users/request`,
+      { lngLat: lngLat }
+    );
+  }
+
+  public getShelterRequest(): Observable<any> {
+    return this.http.get(
+      `${this.apiBaseUrl}/users/request`
+    );
+  }
 }

client/src/app/request-shelter/request-shelter.component.html

@@ -4,10 +4,12 @@
       <div class="container">
         <div class="section content">
           <h2 class="has-text-white">Locate your position on map</h2>
-          <button class="button is-info">Clear</button>
+          <button class="button is-info" (click)="submitRequest()">Submit Request</button>&nbsp;
+          <button class="button is-info" (click)="clearRequest()">Clear</button>
         </div>
       </div>
     </div>
   </div>
+  <input type="hidden" id="lnglat" name="lnglat">
   <div id="map"></div>
 </div>

client/src/app/request-shelter/request-shelter.component.ts

@@ -1,19 +1,32 @@
-import { Component, AfterViewInit } from '@angular/core';
+import { Component, AfterViewInit, OnInit } from '@angular/core';
 import { environment } from 'src/environments/environment';
 import * as mapboxgl from 'mapbox-gl';
 import * as MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';
+import { SheltersService } from '../_services/shelters.service';
+import * as $ from 'jquery';
+import { AlertService } from '../_services/alert.service';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-request-shelter',
   templateUrl: './request-shelter.component.html',
   styleUrls: ['./request-shelter.component.css']
 })
-export class RequestShelterComponent implements AfterViewInit {
+export class RequestShelterComponent implements AfterViewInit, OnInit {
   mapboxAccessToken = environment.mapboxAccessToken;
+  requestCoordinates: any;
 
-  constructor() { }
+  constructor(
+    private sheltersService: SheltersService,
+    private alertService: AlertService,
+    private router: Router
+  ) { }
+
+  ngOnInit() {
+  }
 
   ngAfterViewInit() {
+    console.log(this.requestCoordinates);
     Object.getOwnPropertyDescriptor(mapboxgl, "accessToken").set(this.mapboxAccessToken);
 
     var map = new mapboxgl.Map({
@@ -33,6 +46,61 @@ export class RequestShelterComponent implements AfterViewInit {
     map.addControl(new MapboxGeocoder({
       accessToken: mapboxgl.accessToken
     }));
+
+    var personMarkerDiv = document.createElement('div');
+    personMarkerDiv.style.backgroundImage = 'url("../../assets/person.png")';
+    personMarkerDiv.style.width = '100px';
+    personMarkerDiv.style.height = '100px';
+    personMarkerDiv.style.backgroundRepeat = 'no-repeat'
+
+    this.sheltersService.getShelterRequest()
+      .subscribe(
+        (res) => {
+          this.requestCoordinates = res.lngLat;
+
+          if (this.requestCoordinates) {
+            new mapboxgl.Marker(personMarkerDiv)
+              .setLngLat(this.requestCoordinates.split(','))
+              .addTo(map);
+          }
+        },
+        (err) => this.alertService.error(err)
+      )
+
+    map.on('click', function (e) {
+      if (this.shelterMarker) {
+        this.shelterMarker.remove();
+      }
+
+      this.shelterMarker = new mapboxgl.Marker(personMarkerDiv)
+        .setLngLat(e.lngLat)
+        .addTo(map);
+
+      $('#lnglat').val(`${e.lngLat.lng},${e.lngLat.lat}`);
+    });
+  }
+
+  submitRequest() {
+    if (!$('#lnglat').val()) {
+      this.alertService.errorWithMessage('Location is needed')
+      return;
+    }
+
+    this.sheltersService.requestShelter($('#lnglat').val())
+      .subscribe(
+        (res) => this.alertService.success('Request submitted'),
+        (err) => this.alertService.error(err)
+      )
   }
 
+  clearRequest() {
+    this.sheltersService.requestShelter('')
+      .subscribe(
+        () => {
+          this.alertService.success('Request cleared');
+          window.location.reload();
+        },
+        (err) => this.alertService.error(err)
+      );
+  }
 }