Merge pull request #515 from ever-co/feature/EV-1160

Feature/ev 1160

admin/website-angular/src/app/@core/data/warehouses.service.ts

@@ -77,13 +77,43 @@ export class WarehousesService {
 						getAllStores {
 							id
 							_createdAt
+							geoLocation {
+								loc {
+									coordinates
+								}
+							}
 						}
 					}
 				`
 			})
 			.pipe(map((res) => res.data.getAllStores));
 	}
 
+	getStoreLivePosition() {
+		return this._apollo
+			.watchQuery<{ getAllStores: Warehouse[] }>({
+				query: gql`
+					query GetAllStores {
+						getAllStores {
+							id
+							_createdAt
+							name
+							logo
+							geoLocation {
+								loc {
+									coordinates
+								}
+								city
+								countryId
+							}
+						}
+					}
+				`,
+				pollInterval: 5000
+			})
+			.valueChanges.pipe(map((res) => res.data.getAllStores));
+	}
+
 	getStores(pagingOptions?: IPagingOptions): Observable<Warehouse[]> {
 		return this._apollo
 			.watchQuery<{ warehouses: IWarehouse[] }>({

admin/website-angular/src/app/pages/+warehouses/+warehouse-track/warehouse-track.component.html

@@ -0,0 +1,149 @@
+<div class="row">
+	<div class="col-12">
+		<div class="row">
+			<div class="col-8">
+				<nb-card>
+					<nb-card-header>
+						Track all merchants
+					</nb-card-header>
+					<nb-card-body>
+						<div #gmap class="googleMap"></div>
+					</nb-card-body>
+				</nb-card>
+			</div>
+
+			<div class="col-4">
+				<nb-card>
+					<nb-card-header>
+						Filter Merchants
+					</nb-card-header>
+					<nb-card-body style="overflow:inherit;">
+						<div>
+							<ng-select
+								[items]="listOfMerchants"
+								placeholder="Filter by Name"
+								[clearable]="true"
+								bindLabel="name"
+								[(ngModel)]="merchantName"
+								style="width:100%;margin-bottom:30px;"
+								(change)="filterByName($event)"
+							>
+								<ng-template ng-label-tmp let-item="item">
+									<img
+										*ngIf="item.logo"
+										height="15"
+										width="15"
+										class="mr-2"
+										[src]="item.logo"
+									/>
+									<b>{{ item }}</b>
+								</ng-template>
+							</ng-select>
+							<ng-select
+								[items]="listOfCities"
+								[(ngModel)]="merchantCity"
+								[clearable]="true"
+								placeholder="Filter by City"
+								bindLabel="city"
+								style="width:100%; margin-bottom:30px;"
+								(change)="filterByCity($event)"
+							>
+								<ng-template
+									ng-option-tmp
+									let-item="item"
+									let-index="index"
+								>
+									<h6 class="card-title">
+										<img
+											*ngIf="item.logo"
+											height="40"
+											width="40"
+											class="mr-1"
+											[src]="item.logo"
+										/>
+										{{ item }}
+									</h6>
+								</ng-template>
+							</ng-select>
+							<ng-select
+								[items]="listOfCountries"
+								[clearable]="true"
+								placeholder="Filter by City"
+								bindLabel="city"
+								[(ngModel)]="merchantCountry"
+								style="width:100%; margin-bottom:30px;"
+								(change)="filterByCountry($event)"
+							>
+								<ng-template
+									ng-option-tmp
+									let-item="item"
+									let-index="index"
+								>
+									<h6 class="card-title">
+										<img
+											*ngIf="item.logo"
+											height="40"
+											width="40"
+											class="mr-1"
+											[src]="item.logo"
+										/>
+										{{ item }}
+									</h6>
+								</ng-template>
+							</ng-select>
+						</div>
+						<nb-card-footer>
+							<div class="details">
+								<div class="warehouse" *ngIf="selectedStore">
+									<h5>
+										<b>{{ selectedStore.name }}</b>
+									</h5>
+									<ul>
+										<li>
+											Phone:
+											{{ selectedStore.contactPhone }}
+										</li>
+										<li>
+											Email:
+											{{ selectedStore.contactEmail }}
+										</li>
+										<li>
+											Address:
+											{{
+												selectedStore.geoLocation
+													.streetAddress
+											}}
+										</li>
+									</ul>
+								</div>
+								<div class="carrier" *ngIf="selectedCarrier">
+									<h5>
+										<b>{{ selectedCarrier.fullName }}</b>
+									</h5>
+									<ul>
+										<li>
+											Delivery Count:
+											{{
+												selectedCarrier.numberOfDeliveries
+											}}
+										</li>
+										<li>
+											Phone: {{ selectedCarrier.phone }}
+										</li>
+										<li>
+											Address:
+											{{
+												selectedCarrier.geoLocation
+													.streetAddress
+											}}
+										</li>
+									</ul>
+								</div>
+							</div>
+						</nb-card-footer>
+					</nb-card-body>
+				</nb-card>
+			</div>
+		</div>
+	</div>
+</div>

admin/website-angular/src/app/pages/+warehouses/+warehouse-track/warehouse-track.component.scss

@@ -0,0 +1,3 @@
+.googleMap {
+	height: 700px;
+}

admin/website-angular/src/app/pages/+warehouses/+warehouse-track/warehouse-track.component.ts

@@ -0,0 +1,183 @@
+import { Component, ViewChild, OnInit } from '@angular/core';
+import { WarehousesService } from 'app/@core/data/warehouses.service';
+import { environment } from 'environments/environment';
+import { Marker } from '@agm/core/services/google-maps-types';
+import Warehouse from '@modules/server.common/entities/Warehouse';
+import {
+	getCountryName,
+	CountryName
+} from '@modules/server.common/entities/GeoLocation';
+
+@Component({
+	templateUrl: './warehouse-track.component.html',
+	styleUrls: ['./warehouse-track.component.scss']
+})
+export class WarehouseTrackComponent implements OnInit {
+	@ViewChild('gmap')
+	gmapElement: any;
+	map: google.maps.Map;
+
+	merchantMarkers: any[] = [];
+	merchants: Warehouse[] = [];
+	listOfCities: string[] = [];
+	listOfCountries: CountryName[] = [];
+	listOfMerchants: string[];
+	merchantCity: string;
+	merchantName: string;
+	merchantCountry: CountryName;
+
+	constructor(private warehouseService: WarehousesService) {}
+
+	ngOnInit(): void {
+		this.showMap();
+
+		const warehouseService = this.warehouseService
+			.getStoreLivePosition()
+			.subscribe((store) => {
+				this.merchants = store;
+
+				if (this.merchantMarkers.length === 0) {
+					this.listOfCities = Array.from(
+						new Set(store.map((mer) => mer.geoLocation.city))
+					).sort();
+					this.listOfCountries = Array.from(
+						new Set(
+							store.map((mer) =>
+								getCountryName(mer.geoLocation.countryId)
+							)
+						)
+					).sort();
+					this.listOfMerchants = this.setSort(
+						store.map((mer) => mer.name)
+					);
+					this.populateMarkers(store, this.merchantMarkers);
+				} else if (store.length === this.merchantMarkers.length) {
+					this.updateMarkers(store);
+				} else {
+					this.updateMarkers(store);
+				}
+			});
+	}
+
+	setSort(arr: any): any[] {
+		return Array.from(new Set(arr)).sort();
+	}
+
+	showMap() {
+		const mapProp = {
+			center: new google.maps.LatLng(42.642941, 23.334149),
+			zoom: 15,
+			mapTypeId: google.maps.MapTypeId.ROADMAP
+		};
+		this.map = new google.maps.Map(this.gmapElement.nativeElement, mapProp);
+	}
+
+	filterByName(event) {
+		if (event) {
+			this.merchantName = event;
+
+			this.deleteMarkerStorage();
+			const filteredMerchants = this.merchants.filter(
+				(mer) => mer.name === this.merchantName
+			);
+			this.populateMarkers(filteredMerchants, this.merchantMarkers);
+		} else {
+			this.deleteMarkerStorage();
+			this.populateMarkers(this.merchants, this.merchantMarkers);
+		}
+	}
+
+	filterByCity(event) {
+		if (event) {
+			this.merchantCity = event;
+			this.merchantName = undefined;
+			this.deleteMarkerStorage();
+			const filteredMerchants = this.merchants.filter(
+				(mer) => mer.geoLocation.city === this.merchantCity
+			);
+			this.populateMarkers(filteredMerchants, this.merchantMarkers);
+			this.listOfMerchants = this.setSort(
+				filteredMerchants.map((mer) => mer.name)
+			);
+		} else {
+			this.deleteMarkerStorage();
+			this.populateMarkers(this.merchants, this.merchantMarkers);
+		}
+	}
+
+	filterByCountry(event) {
+		if (event) {
+			this.merchantCountry = event;
+			this.merchantCity = undefined;
+			this.merchantName = undefined;
+			this.deleteMarkerStorage();
+			const filteredMerchants = this.merchants.filter(
+				(mer) =>
+					getCountryName(mer.geoLocation.countryId) ===
+					this.merchantCountry
+			);
+			this.listOfCities = this.setSort(
+				filteredMerchants.map((mer) => mer.geoLocation.city)
+			);
+			this.listOfMerchants = this.setSort(
+				filteredMerchants.map((mer) => mer.name)
+			);
+			this.populateMarkers(filteredMerchants, this.merchantMarkers);
+		} else {
+			this.deleteMarkerStorage();
+			this.populateMarkers(this.merchants, this.merchantMarkers);
+		}
+	}
+
+	populateMarkers(merchantArray, markerStorage) {
+		merchantArray.forEach((mer) => {
+			const coords = new google.maps.LatLng(
+				mer.geoLocation.loc.coordinates[1],
+				mer.geoLocation.loc.coordinates[0]
+			);
+			const storeIcon = environment.MAP_MERCHANT_ICON_LINK;
+			const marker = this.addMarker(coords, this.map, storeIcon);
+			markerStorage.push({ marker, id: mer.id });
+		});
+	}
+
+	updateMarkers(merchantArray: Warehouse[]) {
+		merchantArray.forEach((mer, index) => {
+			const newCoords = new google.maps.LatLng(
+				mer.geoLocation.loc.coordinates[1],
+				mer.geoLocation.loc.coordinates[0]
+			);
+			let markerIndex;
+			const marker = this.merchantMarkers.find((markerItem, i) => {
+				if (markerItem.id === mer.id) {
+					markerIndex = i;
+					return true;
+				} else {
+					return false;
+				}
+			});
+			if (marker) {
+				if (!newCoords.equals(marker.marker.getPosition())) {
+					this.merchantMarkers[markerIndex].marker.setPosition(
+						newCoords
+					);
+				}
+			}
+		});
+	}
+
+	deleteMarkerStorage() {
+		this.merchantMarkers.forEach((mar) => {
+			mar.marker.setMap(null);
+		});
+		this.merchantMarkers = [];
+	}
+
+	addMarker(position, map, icon) {
+		return new google.maps.Marker({
+			position,
+			map,
+			icon
+		});
+	}
+}