Skip to content

Commit

Permalink
Merge pull request #103 from swoocn/dev
Browse files Browse the repository at this point in the history 
Self approved for propagation.
  • Loading branch information
@swoocn
swoocn authored Mar 14, 2024
2 parents dfbdaf7 + 0ab0df1 commit b623baf
Show file tree
Hide file tree
Showing 2 changed files with 110 additions and 97 deletions.
18 changes: 14 additions & 4 deletions frontend/src/app/home/action-row/action-row.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ export class ActionRowComponent implements OnInit {
dialogRef.afterClosed().subscribe((result) => {
// console.log('The dialog was closed : ' + result);
if (result === 'true') {
console.log('user refused');
console.log('User refused');
} else if (result === 'false') {
localStorage.setItem('joined', 'true');
}
Expand All @@ -61,9 +61,19 @@ export class ActionRowComponent implements OnInit {
if (userJoined === 'true') {
return;
} else {
setTimeout(() => {
this.openDialog();
}, 6000);
if (this.currentUserService.getCurrentUser() !== undefined && this.currentUserService.getCurrentUser() !== null) {
setTimeout(() => {
// Load current user asynchronously and open dialog once loaded
this.currentUserService.getCurrentUser().subscribe((user: any) => {
if (user) {
this.currentUser = user;
this.openDialog();
}
});
}, 6000);
} else {
console.log('Failed to retrieve user');
}
}
}
}
189 changes: 96 additions & 93 deletions frontend/src/app/home/map/map.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -152,104 +152,107 @@ export class MapComponent implements OnInit {
const shopsToAdd = shops ?? this.allShops;

shopsToAdd.forEach((shop: any, index: number) => {
const markerLayer = marker([shop.coordinates[0], shop.coordinates[1]], {
icon: this.geolocationService.getMarkerIcon(),
}).bindPopup(this.generatePopupContent(shop))
.addTo(this.map)
.addEventListener('click', (e) => {
const commingBtn = document.querySelectorAll('#comming');
commingBtn.forEach((btn) => {
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 here`);
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-orange-600 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');
if (shop.coordinates && shop.coordinates.length === 2) {
const markerLayer = marker([shop.coordinates[0], shop.coordinates[1]], {
icon: this.geolocationService.getMarkerIcon(),
}).bindPopup(this.generatePopupContent(shop))
.addTo(this.map)
.addEventListener('click', (e) => {
const commingBtn = document.querySelectorAll('#comming');
commingBtn.forEach((btn) => {
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 here`);
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-orange-600 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 },
],
},
});
};

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);
console.log('from routing : ', { ...routeControl });
console.log('type of routes : ', typeof routeControl);
routeControl.addTo(this.map);
});
});
const buttonElement = document.getElementById(`${shop._id}`);
if (buttonElement) {
buttonElement.addEventListener('click', () => this.clicked(shop._id));
}
});

const buttonElement = document.getElementById(`${shop._id}`);
if (buttonElement) {
buttonElement.addEventListener('click', () => this.clicked(shop._id));
}
});
} else {
console.error(`Incomplete coordinates for shop ${shop.name}`);
}
});
}

Expand Down

0 comments on commit b623baf

Please sign in to comment.