Merge remote-tracking branch 'origin/dev' into additions-revisions-1

frontend/package.json

@@ -32,6 +32,7 @@
     "@pinetwork-js/sdk": "^0.7.0",
     "axios": "^1.6.7",
     "leaflet": "^1.9.4",
+    "leaflet-routing-machine": "^3.2.12",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.3"

frontend/src/app/core/service/geolocation.service.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed } from '@angular/core/testing';
+import { GeolocationService } from './geolocation.service';
+
+describe('GeolocationService', () => {
+  let service: GeolocationService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(GeolocationService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

frontend/src/app/core/service/geolocation.service.ts

@@ -7,7 +7,7 @@ import axios from 'axios';
   providedIn: 'root',
 })
 export class GeolocationService {
-  private readonly initZoomLevel = 15;
+  private readonly initZoomLevel = 18;
   initCoords: number[] = [];
   private readonly geolocationTrigger = new Subject<void>();
   private readonly maxZoomLevel = 18;
@@ -74,6 +74,18 @@ export class GeolocationService {
       shadowUrl: 'assets/marker-shadow.png',
     });
   }
+  getMiddleIcon(): Icon {
+    return icon({
+      ...Icon.Default.prototype.options,
+      iconUrl: 'assets/images/map/yellow.png',
+      iconRetinaUrl: 'assets/marker-icon.png',
+      shadowUrl: 'assets/marker-shadow.png',
+      iconSize: [41, 41],
+      iconAnchor: [12, 41],
+      popupAnchor: [1, -34],
+      shadowSize: [41, 41],
+    });
+  }
 
   async getUserPositionManualy() {
     const response = await axios.get('https://ipapi.co/json/');

frontend/src/app/dialogs/social/social.component.html

@@ -1,33 +1,32 @@
 <h2 mat-dialog-title class="text-2xl font-bold text-center relative">
-  <span>Map Of Pi Invitation</span>
-  <span
-    mat-dialog-close="true"
-    class="absolute top-4 right-4 py-2 px-4 bg-blue-500 rounded-full"
-    >X</span
-  >
+  <span>Map of Pi Invitation</span>
 </h2>
-<mat-dialog-content class="text-lg mb-6">
+<mat-dialog-content class="text-lg mb-6" style="color:#000">
   <p>
-    Dear <span class="font-extrabold">{{ data.name }}</span
-    >,
+    Greetings <span class="font-extrabold" style="color:#1D724B">{{ data.name }}!</span>,
   </p>
   <p class="mb-2">
-    We're excited to have you on board! Please keep in mind that Map of Pi is
-    still a work in progress, but together, we can make it even better.
+    We're excited to welcome you aboard!
+    As Map of Pi continues to evolve, we appreciate your patience and support during this ongoing journey.
+    Together, we can enhance the Map of Pi experience even further.
   </p>
   <p class="mb-2">
-    We invite you to join our social media community, where you can:
+    Join our vibrant social media community, where you can:
   </p>
-  <ul class="list-disc pl-6 mb-4">
-    <li>Report any issues or bugs you encounter.</li>
-    <li>Suggest new features you'd like to see in the app.</li>
+  <ul class="list-disc pl-6 mb-4" style="color:#1D724B">
+    <li>Engage in discussions about Map of Pi's features and functionalities.</li>
+    <li>Share any issues or bugs you come across for swift resolution.</li>
+    <li>Propose exciting new features or improvements to enhance the Map of Pi experience.</li>
+    <li>Explore partnership opportunities and collaborations.</li>
+    <li>Connect with like-minded individuals for community fun and companionship.</li>
   </ul>
   <p>Let's build Map of Pi together!</p>
 </mat-dialog-content>
-<div class="flex justify-center items-center">
+<div class="flex justify-center items-center pb-5">
   <mat-dialog-actions class="flex justify-center items-center">
     <button mat-button mat-dialog-close mat-dialog-close="false">
-      <span class="px-4 py-2 bg-yellow-600 text-white rounded-md">Join Us</span>
+      <a href="https://twitter.com/mapofpi" target="_blank" class="px-4 py-2 bg-yellow-600 text-white rounded-md">Start
+        Here with Twitter X!</a>
     </button>
   </mat-dialog-actions>
-</div>
+</div>

frontend/src/app/home/action-row/action-row.component.scss

@@ -8,4 +8,3 @@
     justify-content: center;
     z-index: 5;
 }
-

frontend/src/app/home/map/map.component.scss

@@ -2,3 +2,57 @@
   height: calc(100vh - var(--mat-toolbar-mobile-height));
   z-index: 0;
 }
+
+/* Customize the route popup */
+.leaflet-routing-container {
+  background-color: white; /* Change background color */
+  border: 2px solid #ca1010; /* Add border */
+  border-radius: 5px; /* Add border radius */
+  padding: 10px; /* Add padding */
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Add shadow */
+}
+
+.leaflet-routing-container .leaflet-routing-instructions {
+  margin-bottom: 5px; /* Adjust margin */
+}
+
+.leaflet-routing-container .leaflet-routing-instructions ul {
+  list-style: none; /* Remove list styles */
+  padding: 0; /* Remove padding */
+  margin: 0; /* Remove margin */
+}
+
+.leaflet-routing-container .leaflet-routing-instructions ul li {
+  padding: 5px 0; /* Add padding */
+}
+
+.leaflet-routing-container
+  .leaflet-routing-instructions
+  ul
+  li
+  span.leaflet-routing-text {
+  font-weight: bold; /* Make text bold */
+}
+
+.leaflet-routing-container
+  .leaflet-routing-instructions
+  ul
+  li
+  span.leaflet-routing-icon {
+  margin-right: 5px; /* Adjust margin */
+}
+
+/* Customize the close button */
+.leaflet-routing-container .leaflet-routing-popup .leaflet-popup-close-button {
+  color: #333; /* Change color */
+  font-size: 16px; /* Adjust font size */
+  top: 5px; /* Adjust top position */
+  right: 5px; /* Adjust right position */
+}
+
+/* Hover effect for close button */
+.leaflet-routing-container
+  .leaflet-routing-popup
+  .leaflet-popup-close-button:hover {
+  color: #000; /* Change color on hover */
+}

frontend/src/app/home/map/map.component.ts

@@ -3,11 +3,12 @@ import { LeafletModule } from '@asymmetrik/ngx-leaflet';
 import { Map, marker, Layer } from 'leaflet';
 import { GeolocationService } from '../../core/service/geolocation.service';
 import { SnackService } from '../../core/service/snack.service';
-import { take } from 'rxjs';
 import { dummyCoordinates } from '../../core/model/business';
 import { Router, RouterModule } from '@angular/router';
 import { ShopService } from '../../core/service/shop.service';
 import axios from 'axios';
+import 'leaflet-routing-machine';
+import * as L from 'leaflet';
 
 @Component({
   selector: 'app-map',
@@ -49,34 +50,10 @@ export class MapComponent implements OnInit {
   }
 
   locateMe(): void {
-    this.geolocationService
-      .getCurrentPosition()
-      .pipe(take(1))
-      .subscribe({
-        next: (coords: GeolocationCoordinates) => {
-          this.layer = marker([coords.latitude, coords.longitude], {
-            icon: this.geolocationService.getUserMarkerIcon(),
-          })
-            .bindPopup('A pretty CSS popup.<br> Easily customizable.')
-            .openPopup();
-
-          this.map.addLayer(this.layer);
-          this.map.flyTo([coords.latitude, coords.longitude], 15);
-
-          // Add all other coordinates to the map
-          this.addAllCoordinatesToMap();
-
-          this.cdr.detectChanges();
-        },
-        error: (error: string) => {
-          this.snackService.showError(`Geolocation error: ${error}`);
-        },
-      });
+    this.track();
   }
 
   async track() {
-    this.snackService.showMessage(`Locating your position`);
-
     console.log('Coordinates from shop in track: ', this.shopService.getUserPosition());
 
     const location = await axios.get('https://ipapi.co/json/');
@@ -89,7 +66,7 @@ export class MapComponent implements OnInit {
       const userMarker = marker([coord[0], coord[1]], {
         icon: this.geolocationService.getUserMarkerIcon(),
       })
-        .bindPopup('User location')
+        .bindPopup(`<div class=""> You're Here</div>`)
         .openPopup();
 
       this.map.addLayer(userMarker);
@@ -150,8 +127,89 @@ export class MapComponent implements OnInit {
         .addEventListener('click', (e) => {
           const commingBtn = document.querySelectorAll('#comming');
           commingBtn.forEach((btn) => {
-            btn.addEventListener('click', () => {
-              this.snackService.showMessage('This feature is in development');
+            btn.addEventListener('click', async () => {
+              const location = await axios.get('https://ipapi.co/json/');
+
+              const { data } = location;
+
+              const userLocation = [[data.latitude, data.longitude]];
+
+              const shopLocation = [shop.coordinates[0], shop.coordinates[1]];
+
+              this.map.closePopup();
+
+              const creatingMarkers = (i: number, waypoints: any, n: number) => {
+                let icon;
+
+                if (i === 0) {
+                  icon = this.geolocationService.getUserMarkerIcon();
+                } else if (i === n - 1) {
+                  icon = this.geolocationService.getMarkerIcon();
+                } else {
+                  icon = this.geolocationService.getMiddleIcon();
+                }
+
+                const newMarker = L.marker(waypoints.latLng, {
+                  icon: icon,
+                }).addTo(this.map);
+
+                newMarker.getElement()?.setAttribute('data-custom-type', i === 0 ? 'user' : i === n - 1 ? 'shop' : 'middle');
+
+                newMarker.addEventListener('click', (e) => {
+                  const customType = e.target.getElement()?.getAttribute('data-custom-type');
+
+                  switch (customType) {
+                    case 'user':
+                      this.snackService.showMessage(`Dear Soleil00 You"re located her`);
+                      break;
+                    case 'shop':
+                      newMarker.bindPopup(`
+                            <div class="p-4">
+                                <div class="text-lg font-bold mb-2">${shop.name}</div>
+                                <div>${shop.name} is located here and you are about to take routes towards it. It will approximately take you 23 min by car.</div>
+                                <button id="cancelBtn" class="mt-4 px-4 py-2 bg-blue-500 text-white rounded-md">Cancel</button>
+                            </div>
+                        `);
+
+                      // Wait for the popup to open before attaching the event listener
+                      newMarker.on('popupopen', () => {
+                        const cancelBtn = document.getElementById('cancelBtn');
+                        if (cancelBtn) {
+                          cancelBtn.addEventListener('click', () => {
+                            // routeControl.removeFrom(this.map);
+                            this.map.removeControl(routeControl);
+                            newMarker.removeFrom(this.map);
+                            console.log('Button clicked');
+                          });
+                        }
+                      });
+
+                      break;
+                    case 'middle':
+                      this.snackService.showMessage('Middle clicked');
+                      break;
+                    default:
+                      this.snackService.showMessage('Unknown marker clicked');
+                  }
+                });
+              };
+
+              const routeControl = (window as any).L.Routing.control({
+                waypoints: [(window as any).L.latLng(userLocation[0], userLocation[1]), (window as any).L.latLng(shopLocation[0], shopLocation[1])],
+                showAlternatives: true,
+                createMarker: creatingMarkers,
+                altLineOptions: {
+                  styles: [
+                    { color: 'black', opacity: 0.15, weight: 9 },
+                    { color: 'white', opacity: 0.8, weight: 6 },
+                    { color: 'blue', opacity: 0.5, weight: 2 },
+                  ],
+                },
+              });
+
+              console.log('from routing : ', { ...routeControl });
+              console.log('type of routes : ', typeof routeControl);
+              routeControl.addTo(this.map);
             });
           });