JoeKung/Progetto-m152-Angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/dev' into dev

Browse Source
This commit is contained in:
tito
2023-05-08 15:13:29 +02:00
parent 59870a07ad a0a2ffb6c1
commit 30d805ff28
7 changed files with 74 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/app/component/detail/detail.component.ts
View File

@@ -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<HTMLInputElement>;
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<string> {
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]);
}
}

6
src/app/component/list/list.component.html
View File

@@ -1,7 +1,7 @@
<div *ngIf="isNear" class="container">
<h1>
<h3>
{{translations.locationName}}: {{locationParams}}
</h1>
</h3>
<div class="container2">
<div class="left">
<div *ngFor="let locations of locations, let i = index" class="row">
@@ -9,7 +9,7 @@
<a class="link link-primary" href="location/{{locations.location}}">{{locations.location}}</a>
</h3>
<div class="distance">
<h4 *ngIf="locations.distance && !positionNotFound">{{translations.distance}}{{locations.distance}} km</h4>
<h4 *ngIf="locations.distance && !positionNotFound">{{translations.distance}}: {{locations.distance}} km</h4>
<h4 *ngIf="positionNotFound">{{translations.positionNotFoundErrorMessage}}</h4>
</div>
</div>

86
src/app/component/list/list.component.ts
View File

@@ -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)
}
}

5
src/app/component/login/login.component.ts
View File

@@ -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;

27
src/app/component/management/management.component.ts
View File

@@ -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: ""};

6
src/app/service/http/location.service.ts
View File

@@ -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<LocationEntity[]>(LOCATION);
}
// get location by location
getLocation(location: string) {
return this.http.get<LocationEntity>(LOCATION + "/" + location);
}
// create location
createLocation(location: LocationEntity) {
return this.http.post<LocationEntity>(LOCATION, location);
}
// update location
updateLocation(location: LocationEntity) {
return this.http.put<LocationEntity>(LOCATION+"/"+location.location, location);
}
// delete location
deleteLocation(location: string) {
return this.http.delete<LocationEntity>(LOCATION +"/"+ location);
}

4
src/app/service/http/user.service.ts
View File

@@ -18,11 +18,11 @@ export class UserService {
) {
}
// get all users
getUsers() {
return this.http.get<UserEntity[]>(USER);
}
getUser(username: string) {
return this.http.get<UserEntity>(USER + "/" + username).pipe(
catchError(error => {
@@ -35,8 +35,6 @@ export class UserService {
);
}
getUserById(id: number) {
return this.http.get<UserEntity>(GET_USER_BY_ID + "/" + id);
}