Add component for requesting shelter

Author: rohitrp

client/src/app/app-routing.module.ts

@@ -5,6 +5,7 @@ import { HomeComponent } from './home/home.component';
 import { LoginComponent } from './login/login.component';
 import { SheltersComponent } from './shelters/shelters.component';
 import { AuthGuard } from './_guards/auth.guard';
+import { RequestShelterComponent } from './request-shelter/request-shelter.component';
 
 const routes: Routes = [
   { 
@@ -41,6 +42,18 @@ const routes: Routes = [
       }
     }
   },
+  { 
+    path: 'request', 
+    component: RequestShelterComponent,
+    canActivate: [AuthGuard],
+    data: {
+      title: 'Request a Shelter',
+      metatags: {
+        desciption: 'Request a Shelter',
+        keywords: ''
+      }
+    }
+  },
   { 
     path: '', 
     component: HomeComponent,

client/src/app/app.module.ts

@@ -18,6 +18,7 @@ import { SheltersComponent } from './shelters/shelters.component';
 import { environment } from 'src/environments/environment.prod';
 import { AddShelterComponent } from './shelters/add-shelter/add-shelter.component';
 import { ShelterCardComponent } from './shelters/shelter-card/shelter-card.component';
+import { RequestShelterComponent } from './request-shelter/request-shelter.component';
 
 @NgModule({
   declarations: [
@@ -28,7 +29,8 @@ import { ShelterCardComponent } from './shelters/shelter-card/shelter-card.compo
     LoginComponent,
     SheltersComponent,
     AddShelterComponent,
-    ShelterCardComponent
+    ShelterCardComponent,
+    RequestShelterComponent
   ],
   imports: [
     BrowserModule,

client/src/app/home/home.component.css

@@ -1,4 +1,12 @@
 #map {
   width: 100%;
   height: 100vh;
+}
+
+.mapboxgl-popup {
+  max-width: 200px;
+}
+
+.mapboxgl-popup-content {
+  text-align: center;
 }

client/src/app/home/home.component.ts

@@ -56,12 +56,15 @@ export class HomeComponent implements AfterViewInit {
             shelterMarkerDiv.style.width = '50px';
             shelterMarkerDiv.style.height = '50px';
             shelterMarkerDiv.style.backgroundRepeat = 'no-repeat'
-            
+
             const shelter = res[i];
-            console.log(shelter);
 
             new mapboxgl.Marker(shelterMarkerDiv)
               .setLngLat(shelter.lngLat.split(','))
+              .setPopup(
+                new mapboxgl.Popup({ offset: 25 }) // add popups
+                  .setHTML('<h3 class="subtitle">' + shelter.name + '</h3><p>' + shelter.contact + '</p>')
+              )
               .addTo(map);
           }
         },

client/src/app/navbar/navbar.component.html

@@ -32,6 +32,13 @@
           </a>
         </div>
       </div>
+      <div class="navbar-item" *ngIf="authService.isAuthenticated()">
+        <div class="buttons">
+          <a class="button is-outlined is-info" routerLink="request">
+            <strong>Request a Shelter</strong>
+          </a>
+        </div>
+      </div>
       <div class="navbar-item" *ngIf="authService.isAuthenticated()">
         <div class="buttons">
           <a class="button is-danger" (click)="authService.logout()">

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

@@ -0,0 +1,18 @@
+.request-shelter-container {
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+}
+
+#map {
+  width: 100%;
+  flex: 1;
+}
+
+.mapboxgl-popup {
+  max-width: 200px;
+}
+
+.mapboxgl-popup-content {
+  text-align: center;
+}

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

@@ -0,0 +1,13 @@
+<div class="request-shelter-container">
+  <div class="columns has-background-primary is-marginless">
+    <div class="column">
+      <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>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div id="map"></div>
+</div>

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

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RequestShelterComponent } from './request-shelter.component';
+
+describe('RequestShelterComponent', () => {
+  let component: RequestShelterComponent;
+  let fixture: ComponentFixture<RequestShelterComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ RequestShelterComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RequestShelterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,38 @@
+import { Component, AfterViewInit } from '@angular/core';
+import { environment } from 'src/environments/environment';
+import * as mapboxgl from 'mapbox-gl';
+import * as MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';
+
+@Component({
+  selector: 'app-request-shelter',
+  templateUrl: './request-shelter.component.html',
+  styleUrls: ['./request-shelter.component.css']
+})
+export class RequestShelterComponent implements AfterViewInit {
+  mapboxAccessToken = environment.mapboxAccessToken;
+
+  constructor() { }
+
+  ngAfterViewInit() {
+    Object.getOwnPropertyDescriptor(mapboxgl, "accessToken").set(this.mapboxAccessToken);
+
+    var map = new mapboxgl.Map({
+      container: 'map',
+      style: 'mapbox://styles/mapbox/navigation-guidance-night-v4',
+      center: [72.914294, 19.130722],
+      zoom: 12
+    });
+
+    map.addControl(new mapboxgl.GeolocateControl({
+      positionOptions: {
+        enableHighAccuracy: true
+      },
+      trackUserLocation: true
+    }));
+
+    map.addControl(new MapboxGeocoder({
+      accessToken: mapboxgl.accessToken
+    }));
+  }
+
+}