From e47ee0231d458150aeede0cfe316ec7f45984f97 Mon Sep 17 00:00:00 2001 From: grata Date: Sun, 7 May 2023 20:12:59 +0200 Subject: [PATCH 1/3] Added check if waypoint is visited and label with translation for radial percentage --- src/app/component/list/list.component.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/component/list/list.component.html b/src/app/component/list/list.component.html index 6e7f75c..a854a50 100644 --- a/src/app/component/list/list.component.html +++ b/src/app/component/list/list.component.html @@ -1,7 +1,7 @@
-

+

{{translations.locationName}}: {{locationParams}} -

+
From 26c10b9e1766e2a9e0623636aa6bf5fdcd994bb2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joe=20Ku=CC=88ng?= Date: Sun, 7 May 2023 21:08:17 +0200 Subject: [PATCH 2/3] changes --- src/app/component/list/list.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/component/list/list.component.html b/src/app/component/list/list.component.html index 6e7f75c..d4054a9 100644 --- a/src/app/component/list/list.component.html +++ b/src/app/component/list/list.component.html @@ -9,7 +9,7 @@ {{locations.location}}
-

{{translations.distance}}{{locations.distance}} km

+

{{translations.distance}}: {{locations.distance}} km

{{translations.positionNotFoundErrorMessage}}

From a0a2ffb6c14c956a3b73e61ee8360f8c333bc47f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joe=20Ku=CC=88ng?= Date: Mon, 8 May 2023 14:20:37 +0200 Subject: [PATCH 3/3] changes --- src/app/component/detail/detail.component.ts | 68 ++++----------- src/app/component/list/list.component.ts | 86 ++++--------------- src/app/component/login/login.component.ts | 5 ++ .../management/management.component.ts | 27 +++++- src/app/service/http/location.service.ts | 6 ++ src/app/service/http/user.service.ts | 4 +- 6 files changed, 71 insertions(+), 125 deletions(-) diff --git a/src/app/component/detail/detail.component.ts b/src/app/component/detail/detail.component.ts index 6934833..4c1f71e 100755 --- a/src/app/component/detail/detail.component.ts +++ b/src/app/component/detail/detail.component.ts @@ -1,5 +1,5 @@ import {Component, OnInit, ViewChild, ElementRef} from '@angular/core'; -import { Router } from '@angular/router'; +import {Router} from '@angular/router'; import {ActivatedRoute} from "@angular/router"; import {positionService} from "../../service/position.service"; import {WaypointService} from "../../service/http/waypoint.service" @@ -10,9 +10,6 @@ import {WaypointsVisitedEntity} from "../../interface/WaypointsVisitedEntity"; import {ReadTranslateJsonService} from "../../service/language/readTranslateJson.service"; import {cookieService} from "../../service/cookie.service"; import {UserService} from "../../service/http/user.service"; -import {UserEntity} from "../../interface/UserEntity"; -import { trigger, state, transition, animate } from '@angular/animations'; - @Component({ selector: 'app-detail', @@ -21,32 +18,30 @@ import { trigger, state, transition, animate } from '@angular/animations'; }) export class DetailComponent implements OnInit { + @ViewChild('myModal', {static: true}) myModal!: ElementRef; + private location: string | undefined; private id: number | undefined; - private URLParams: any; + waypointInfo: any; embed: any; cord: any; - detailTranslations: detailTranslations = {} as detailTranslations; - - /* - showNav = true; - */ distance: number | undefined; - displayedDistance = 0; - img: any; - - iframeLoded: boolean = false; - intervalID: any; - constructor(private route: ActivatedRoute, private positionService: positionService, private waypointService: WaypointService, private waypointVisitedService: WaypointVisitedService, private readTranslationJsonService: ReadTranslateJsonService, - private userService: UserService, private cookieService: cookieService, private router: Router) { - + constructor( + private route: ActivatedRoute, + private positionService: positionService, + private waypointService: WaypointService, + private waypointVisitedService: WaypointVisitedService, + private readTranslationJsonService: ReadTranslateJsonService, + private userService: UserService, + private cookieService: cookieService, + private router: Router) { } async ngOnInit() { @@ -55,16 +50,12 @@ export class DetailComponent implements OnInit { this.URLParams = params; console.log("params", params); }); - - console.log("params", this.URLParams.location); // {location: "lugano", id: "1"} - this.waypointService.getWaypoint(this.URLParams.location, this.URLParams.id).subscribe(waypoint => { console.log("waypoint", waypoint) this.waypointInfo = waypoint; console.log("waypointInfo", this.waypointInfo.locationName) }); - //this.URLParams = this.route.snapshot.url.slice(-2).map(segment => segment.path); console.log("getting your location: wait..."); this.cord = await this.positionService.getLocation(); @@ -84,10 +75,9 @@ export class DetailComponent implements OnInit { } } - async checkDistanceTimer() { //set interval - this.intervalID = setInterval(() => { + this.intervalID = setInterval(() => { this.cord = this.positionService.getLocationWithoutPromise(); this.embed = `https://www.google.com/maps/embed/v1/directions?key=AIzaSyBJL4FWmG032BG6KXxTb4faxpO_ccyaP3o&origin=${this.cord.lat},${this.cord.lon}&destination=${this.waypointInfo?.lat},${this.waypointInfo?.lon}`; this.myModal.nativeElement.checked = false; @@ -99,7 +89,7 @@ export class DetailComponent implements OnInit { this.myModal.nativeElement.checked = true; this.userService.getUser(this.cookieService.getUsername()).subscribe(user => { if (user?.id !== undefined) { - let waypointVisited: WaypointsVisitedEntity = {userId: user.id , waypointId: this.waypointInfo.id} + let waypointVisited: WaypointsVisitedEntity = {userId: user.id, waypointId: this.waypointInfo.id} console.log("waypointVisited", waypointVisited) this.waypointVisitedService.createWaypoint(waypointVisited).subscribe(waypointVisited => { console.log("waypointVisited request return", waypointVisited) @@ -128,14 +118,13 @@ export class DetailComponent implements OnInit { throw new Error('Error generating QR code'); } } + async addSvgToImage(imageUrl: string, svgString: string): Promise { const image = new Image(); image.crossOrigin = 'anonymous'; image.src = imageUrl; - const svgBlob = new Blob([svgString], {type: 'image/svg+xml'}); const svgUrl = URL.createObjectURL(svgBlob); - const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); if (!ctx) { @@ -147,10 +136,8 @@ export class DetailComponent implements OnInit { image.onload = () => { canvas.width = image.width; canvas.height = image.height; - ctx.drawImage(image, 0, 0); const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); - let isAllWhite = true; for (let i = 0; i < imageData.data.length; i += 4) { if (imageData.data[i] !== 255 || imageData.data[i + 1] !== 255 || imageData.data[i + 2] !== 255) { @@ -158,21 +145,17 @@ export class DetailComponent implements OnInit { break; } } - if (isAllWhite) { const svgImage = new Image(); svgImage.crossOrigin = 'anonymous'; svgImage.src = svgUrl; - svgImage.onload = () => { canvas.width = svgImage.width; canvas.height = svgImage.height; - ctx.drawImage(svgImage, 0, 0); const outputImageUrl = canvas.toDataURL('image/png'); resolve(outputImageUrl); }; - svgImage.onerror = () => { reject('Error loading SVG'); }; @@ -180,22 +163,18 @@ export class DetailComponent implements OnInit { const svgImage = new Image(); svgImage.crossOrigin = 'anonymous'; svgImage.src = svgUrl; - svgImage.onload = () => { const x = image.width - (image.width * 0.2 + 5); const y = image.height - (image.width * 0.2 + 5); ctx.drawImage(svgImage, x, y, image.width * 0.2, image.width * 0.2); - const outputImageUrl = canvas.toDataURL('image/png'); resolve(outputImageUrl); }; - svgImage.onerror = () => { reject('Error loading SVG'); }; } }; - image.onerror = () => { reject('Error loading image'); }; @@ -203,32 +182,19 @@ export class DetailComponent implements OnInit { } catch (err) { console.error(err); } - return canvas.toDataURL('image/png'); } - - - - async generateQR() { console.log("generating QR code"); - //console.log(this.URLParams.value); let url = `http://localhost:4200/location/${this.URLParams.location}/${this.URLParams.id}`; - let qrCode = await this.generateQRCode(url); - - //console.log(qrCode); - const imageUrl = this.waypointInfo.img; - this.addSvgToImage(imageUrl, qrCode).then((outputImageUrl) => { this.img = outputImageUrl // Output the URL of the output image - //console.log(outputImageUrl); }).catch((error) => { console.error(error); // Handle any errors that occur }); - } public downloadImage(): void { @@ -243,6 +209,4 @@ export class DetailComponent implements OnInit { this.myModal.nativeElement.checked = false; this.router.navigate(['/location/', this.URLParams.location]); } - - } diff --git a/src/app/component/list/list.component.ts b/src/app/component/list/list.component.ts index 8bd59b2..4a1285b 100644 --- a/src/app/component/list/list.component.ts +++ b/src/app/component/list/list.component.ts @@ -1,5 +1,5 @@ import {Component, OnChanges, OnInit, SimpleChanges} from '@angular/core'; -import {ActivatedRoute, Router} from "@angular/router"; +import {ActivatedRoute} from "@angular/router"; import {positionService} from "../../service/position.service"; import {listTranslations} from "../../interface/translations"; import {LocationService} from "../../service/http/location.service"; @@ -10,7 +10,6 @@ import {cookieService} from "../../service/cookie.service"; import {UserService} from "../../service/http/user.service"; import {WaypointVisitedService} from "../../service/http/waypointVisited.service"; import {ReadTranslateJsonService} from "../../service/language/readTranslateJson.service"; -import {filter} from "rxjs"; @Component({ selector: 'app-list', @@ -18,21 +17,16 @@ import {filter} from "rxjs"; styleUrls: ['./list.component.css'] }) export class ListComponent implements OnInit, OnChanges { + percentage: number = 0; username: string = ''; locationParams: string | undefined locations: LocationEntity[] | undefined; location: LocationEntity | undefined; - waypoints: WaypointsEntity[] | undefined; - positionCord: any; - isNear: boolean = true; - - translations: listTranslations = {} as listTranslations - positionNotFound: boolean = false; @@ -49,15 +43,19 @@ export class ListComponent implements OnInit, OnChanges { } async ngOnInit() { + // get translations this.translations = this.readTranslationJsonService.getListTransaltions(); + // get username by cookie this.username = this.cookieService.getUsername(); this.route.params.subscribe(params => { this.locationParams = params['location']; }); + // get location by locationParams this.locationService.getLocation(this.locationParams ?? "").subscribe(location => { this.location = location; if (this.location.location != null || this.location.location != undefined) { this.isNear = false; + // get waypoints by location this.waypointService.getWaypoints(this.location.location).subscribe(waypoints => { this.waypoints = waypoints; console.log("waypoints", this.waypoints); @@ -65,29 +63,35 @@ export class ListComponent implements OnInit, OnChanges { this.setDistance(); }); } - }); + // get locations this.locationService.getLocations().subscribe(locations => { this.locations = locations; console.log("locations", this.locations) this.setDistance() }); + // get position of user this.getPosition(); + // set percentage of visited waypoints this.positionNotFoundFunction(); + // set distance between user and waypoints this.setDistance(); } - + // set percentage of visited waypoints positionNotFoundFunction() { if (!this.positionNotFound) { - setTimeout(() => { + setInterval(() => { if (!this.positionCord) { this.positionNotFound = true; + }else { + this.positionNotFound = false; } }, 5000); } } + // check if positionCord is changed ngOnChanges(changes: SimpleChanges) { if (changes['positionCord'] && (changes['positionCord'])) { console.log("onChanges") @@ -95,6 +99,7 @@ export class ListComponent implements OnInit, OnChanges { } } + // get position of user getPosition(): any { setInterval(async () => { this.positionCord = await this.positionService.getLocation(); @@ -102,21 +107,7 @@ export class ListComponent implements OnInit, OnChanges { }, 2000); } - private checkDataPopulated(): void { - if (this.locations && this.location) { - console.log("Dati popolati correttamente:", this.locations, this.location); - for (let i = 0; i < this.locations.length; i++) { - if (this.locations[i].location === this.locationParams) { - this.location = this.locations[i]; - console.log("Location trovata:", this.location); - this.isNear = false; - this.setDistance(); - break; - } - } - } - } - + // set distance between user and waypoints private setDistance(): void { if (this.waypoints) { for (let i = 0; i < this.waypoints.length; i++) { @@ -131,6 +122,7 @@ export class ListComponent implements OnInit, OnChanges { } } + // set visited waypoints by user private setVisited(): void { console.log("setVisited") if (this.username && this.waypoints) { @@ -139,53 +131,15 @@ export class ListComponent implements OnInit, OnChanges { this.waypointVisitedService.getWaypointByUserAndWaypoint(this.username, this.waypoints[i].id).subscribe((waypointVisited: any) => { if (this.waypoints) { this.waypoints[i].visited = waypointVisited; - console.log(this.waypoints[i].visited); this.setPercentage(); } }); } } } - } - /* - private setVisited(): void { - if (this.username && this.waypoints) { - for (let i = 0; i < this.waypoints.length; i++) { - if (this.waypoints[i].id !== undefined) { - this.waypoints[i].visited == this.waypointVisitedService.getWaypointByUserAndWaypoint(this.username, this.waypoints[i].id); - } - } - } - } - */ - - /* - private setVisited(): void { - this.userService.getUser(this.username).subscribe((user: any) => { - if (this.waypoints && user.id) { - let userid: string = user.id.toString(); - for (let i = 0; i < this.waypoints.length; i++) { - let waypoint: number; - if (this.waypoints[i].id!==undefined) { - waypoint = this.waypoints[i].id; - } else { - waypoint = 0; - } - this.waypointVisitedService.getWaypointByUserAndWaypoint(userid, waypoint).subscribe((waypointVisited: any) => { - if (waypointVisited) { - this.waypoints[i].visited = true; - this.setPercentage(); - } - }); - } - } - }); - } - - */ - + // set percentage of visited waypoints by user setPercentage(): void { if (this.waypoints) { let count: number = 0; @@ -196,7 +150,5 @@ export class ListComponent implements OnInit, OnChanges { } this.percentage = parseFloat((count / this.waypoints.length * 100).toFixed(0)); } - console.log("percentage", this.percentage) } - } diff --git a/src/app/component/login/login.component.ts b/src/app/component/login/login.component.ts index 3bcd943..18b9475 100644 --- a/src/app/component/login/login.component.ts +++ b/src/app/component/login/login.component.ts @@ -32,9 +32,11 @@ export class LoginComponent implements OnInit { } ngOnInit(): void { + // get login translations this.loginTranslation = this.readTranslationJsonService.getLoginTranslations(); } + // create new user createNewUser(createUser: newUser) { console.log(createUser.username+" "+createUser.password); if (createUser.username == '' || createUser.password == '') { @@ -57,6 +59,7 @@ export class LoginComponent implements OnInit { }); } + // login function loginFunction(username: string, password: string) { this.userService.getUser(username).subscribe(user => { console.log(user); @@ -73,6 +76,7 @@ export class LoginComponent implements OnInit { }); } + // submit function submit() { if (this.login) { this.loginFunction(this.newUser.username, this.newUser.password); @@ -81,6 +85,7 @@ export class LoginComponent implements OnInit { } } + // switch between login and create user switch() { this.errorCreateUser = false; this.errorLogin = false; diff --git a/src/app/component/management/management.component.ts b/src/app/component/management/management.component.ts index ed51a89..d1fb426 100644 --- a/src/app/component/management/management.component.ts +++ b/src/app/component/management/management.component.ts @@ -29,11 +29,9 @@ export class ManagementComponent implements OnInit { newUser: newUser = {password: "", username: ""}; newLocation: LocationEntity = {location: "", lat: 0, lon: 0, region: ""}; newWaypoint: newWaypoint = {description: "", img: "", lat: 0, locationName: "", lon: 0, name: ""}; - locations: LocationEntity[] | undefined; waypoints: WaypointsEntity[] | undefined; users: UserEntity[] | undefined; - translations: managementTranslations = {} as managementTranslations constructor( @@ -50,6 +48,7 @@ export class ManagementComponent implements OnInit { ngOnInit(): void { this.translations = this.readTranslationJsonService.getManagementTranslations(); this.username = this.cookieService.getUsername(); + // check if user is admin this.userService.getUser(this.username).subscribe(user => { if (user !== null) { if (user.admin == false) { @@ -59,8 +58,8 @@ export class ManagementComponent implements OnInit { this.cookieService.deleteUsername(); this.route.navigate(['/login']); } - }); + // get all locations, waypoints and users this.locationService.getLocations().subscribe(locations => { this.locations = locations; }); @@ -72,6 +71,7 @@ export class ManagementComponent implements OnInit { }); } + // show user form formUser(username: string, password: string) { if (this.edit) { const user: UserEntity = {id: this.id, username: username, password: password}; @@ -82,6 +82,7 @@ export class ManagementComponent implements OnInit { } } + // show location form formLocation(name: string, region: string, lat: number, lon: number) { if (this.edit) { const location: LocationEntity = {location: name, region: region, lat: lat, lon: lon}; @@ -92,6 +93,7 @@ export class ManagementComponent implements OnInit { } } + // show waypoint form formWaypoint(name: string, lat: number, lon: number, description: string, image: string, locationName: string) { if (this.edit) { const waypoint: WaypointsEntity = { @@ -110,6 +112,7 @@ export class ManagementComponent implements OnInit { } } + // add user to database addUser(username: string, password: string) { this.newUser = {username: username, password: password}; this.userService.createUser(this.newUser).subscribe(user => { @@ -118,6 +121,7 @@ export class ManagementComponent implements OnInit { this.closeUserForm(); } + // add location to database addLocation(name: string, region: string, lat: number, lon: number) { this.newLocation = {location: name, region: region, lat: lat, lon: lon}; console.log("newLocation") @@ -128,6 +132,7 @@ export class ManagementComponent implements OnInit { this.closeLocationForm() } + // add waypoint to database addWaypoint(name: string, lat: number, lon: number, description: string, image: string, locationName: string) { this.newWaypoint = { description: description, @@ -143,24 +148,28 @@ export class ManagementComponent implements OnInit { this.closeWaypointForm(); } + // delete location from database deleteLocation(location: string) { this.locationService.deleteLocation(location).subscribe(location => { this.locations?.splice(this.locations?.indexOf(location), 1); }); } + // delete waypoint from database deleteWaypoint(id: number) { this.waypointService.deleteWaypoint(id).subscribe(waypoint => { this.waypoints?.splice(this.waypoints?.indexOf(waypoint), 1); }); } + // delete user from database deleteUser(id: number) { this.userService.deleteUser(id).subscribe(user => { this.users?.splice(this.users?.indexOf(user), 1); }); } + // edit location in database editLocation(location: LocationEntity) { this.locationService.updateLocation(location).subscribe(location => { this.locations?.splice(this.locations?.indexOf(location), 1, location); @@ -168,6 +177,7 @@ export class ManagementComponent implements OnInit { this.closeLocationForm() } + // edit waypoint in database editWaypoint(waypoint: WaypointsEntity) { this.waypointService.updateWaypoint(waypoint, waypoint.id).subscribe(waypoint => { this.waypoints?.splice(this.waypoints?.indexOf(waypoint), 1, waypoint); @@ -175,6 +185,7 @@ export class ManagementComponent implements OnInit { this.closeWaypointForm() } + // edit user in database editUser(user: UserEntity) { this.userService.updateUser(user, user.id).subscribe(user => { this.users?.splice(this.users?.indexOf(user), 1, user); @@ -182,12 +193,15 @@ export class ManagementComponent implements OnInit { this.closeUserForm() } + + // open edit location forms openEditLocationForm(location: LocationEntity) { this.newLocation = location; this.edit = true; this.showLocationForm = true; } + // open edit waypoint forms openEditWaypointForm(waypoint: WaypointsEntity) { this.newWaypoint = waypoint; this.id = waypoint.id; @@ -195,6 +209,7 @@ export class ManagementComponent implements OnInit { this.showWaypointForm = true; } + // open edit user forms openEditUserForm(user: UserEntity) { this.newUser = user; this.id = user.id; @@ -202,28 +217,34 @@ export class ManagementComponent implements OnInit { this.showUserForm = true; } + // open user form openUserForm() { this.showUserForm = true; } + // open waypoint form openWaypointForm() { this.showWaypointForm = true; } + // open location form openLocationForm() { this.showLocationForm = true; } + // close user forms closeUserForm() { this.showUserForm = false; this.newUser = {username: '', password: ''}; } + // close location forms closeLocationForm() { this.showLocationForm = false; this.newLocation = {location: '', region: '', lat: 0, lon: 0}; } + // close waypoint forms closeWaypointForm() { this.showWaypointForm = false; this.newWaypoint = {description: "", img: "", lat: 0, locationName: "", lon: 0, name: ""}; diff --git a/src/app/service/http/location.service.ts b/src/app/service/http/location.service.ts index ae9a035..67b72d1 100644 --- a/src/app/service/http/location.service.ts +++ b/src/app/service/http/location.service.ts @@ -10,28 +10,34 @@ const LOCATION = BASE_URL + "/location"; providedIn: 'root', }) + export class LocationService { constructor( private http: HttpClient, ) { } + // get all locations getLocations() { return this.http.get(LOCATION); } + // get location by location getLocation(location: string) { return this.http.get(LOCATION + "/" + location); } + // create location createLocation(location: LocationEntity) { return this.http.post(LOCATION, location); } + // update location updateLocation(location: LocationEntity) { return this.http.put(LOCATION+"/"+location.location, location); } + // delete location deleteLocation(location: string) { return this.http.delete(LOCATION +"/"+ location); } diff --git a/src/app/service/http/user.service.ts b/src/app/service/http/user.service.ts index 2d356a8..50b0ffb 100644 --- a/src/app/service/http/user.service.ts +++ b/src/app/service/http/user.service.ts @@ -18,11 +18,11 @@ export class UserService { ) { } +// get all users getUsers() { return this.http.get(USER); } - getUser(username: string) { return this.http.get(USER + "/" + username).pipe( catchError(error => { @@ -35,8 +35,6 @@ export class UserService { ); } - - getUserById(id: number) { return this.http.get(GET_USER_BY_ID + "/" + id); }