diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 7b3d26f..244efd3 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -64,6 +64,7 @@ export class AppComponent implements OnInit { this.listTranslations.distance = await this.translateService.getData(this.listTranslations.distance, lang); this.listTranslations.locationName = await this.translateService.getData(this.listTranslations.locationName, lang); this.listTranslations.positionNotFoundErrorMessage = await this.translateService.getData(this.listTranslations.positionNotFoundErrorMessage, lang); + this.listTranslations.waypointVisitedPercentage = await this.translateService.getData(this.listTranslations.waypointVisitedPercentage, lang); // Load Management Page Translations this.managementTranslation.users = await this.translateService.getData(this.managementTranslation.users, lang); @@ -83,6 +84,7 @@ export class AppComponent implements OnInit { this.managementTranslation.addLocationButton = await this.translateService.getData(this.managementTranslation.addLocationButton, lang); this.managementTranslation.addUserButton = await this.translateService.getData(this.managementTranslation.addUserButton, lang); this.managementTranslation.addWaypointButton = await this.translateService.getData(this.managementTranslation.addWaypointButton, lang); + this.managementTranslation.edit = await this.translateService.getData(this.managementTranslation.edit, lang); this.managementTranslation.add = await this.translateService.getData(this.managementTranslation.add, lang); this.managementTranslation.close = await this.translateService.getData(this.managementTranslation.close, lang); diff --git a/src/app/component/list/list.component.css b/src/app/component/list/list.component.css index a709ef5..636c4eb 100644 --- a/src/app/component/list/list.component.css +++ b/src/app/component/list/list.component.css @@ -45,8 +45,6 @@ h4 { } .right { width: 60%; - display: flex; - justify-content: center; } #radial { @@ -57,3 +55,26 @@ h4 { display: flex; flex-direction: row; } + +.radial-container{ + display: flex; + justify-content: center; +} + +#radialTitle{ + margin-top: 20px; + margin-bottom: 20px; + text-align: center; +} + +#location-name{ + display: flex; + flex-direction: row; +} + +#check{ + height: 100%; + align-self: center; + margin-left: 10px; + color: #519903; +} diff --git a/src/app/component/list/list.component.html b/src/app/component/list/list.component.html index 1c53ba3..6e7f75c 100644 --- a/src/app/component/list/list.component.html +++ b/src/app/component/list/list.component.html @@ -24,8 +24,11 @@
-

+

{{waypoint.name}} + + +

{{translations.distance}}: {{waypoint.distance}} km

@@ -35,10 +38,14 @@
-
+

{{translations.waypointVisitedPercentage}}

+
+
{{percentage}}% +
diff --git a/src/app/component/login/login.component.ts b/src/app/component/login/login.component.ts index 3d6c50a..3bcd943 100644 --- a/src/app/component/login/login.component.ts +++ b/src/app/component/login/login.component.ts @@ -4,7 +4,7 @@ import {TranslateService} from "../../service/language/translate.service"; 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 {newUser, UserEntity} from "../../interface/UserEntity"; import {loginTranslations} from "../../interface/translations"; @Component({ @@ -35,7 +35,7 @@ export class LoginComponent implements OnInit { this.loginTranslation = this.readTranslationJsonService.getLoginTranslations(); } - createNewUser(createUser: UserEntity) { + createNewUser(createUser: newUser) { console.log(createUser.username+" "+createUser.password); if (createUser.username == '' || createUser.password == '') { this.errorCreateUser = true; diff --git a/src/app/component/management/management.component.css b/src/app/component/management/management.component.css index ecd7c54..b66c9c2 100644 --- a/src/app/component/management/management.component.css +++ b/src/app/component/management/management.component.css @@ -139,3 +139,22 @@ th { display: flex; justify-content: flex-end; } + +.btn-container{ + display: flex; +} + +.edit{ + background-color: #008CBA; + padding: 5px; + border-radius: 5px; + color: white; +} + +.delete{ + background-color: #f44336; + margin-left: 10px; + padding: 5px; + border-radius: 5px; + color: white; +} diff --git a/src/app/component/management/management.component.html b/src/app/component/management/management.component.html index 37c1bdb..2918ee1 100644 --- a/src/app/component/management/management.component.html +++ b/src/app/component/management/management.component.html @@ -5,7 +5,7 @@ {{ translations.username }} {{translations.password}} admin - + Edit @@ -14,7 +14,27 @@ {{ user.password }} No Yes - + +
+ + + +
+ @@ -29,7 +49,7 @@

{{translations.addUserButton}}

-
+
@@ -38,7 +58,11 @@
- +
@@ -52,6 +76,7 @@ {{translations.region}} {{translations.lat}} {{translations.lon}} + Edit @@ -60,6 +85,27 @@ {{ location.region }} {{ location.lat }} {{ location.lon }} + +
+ + + +
+ @@ -74,7 +120,7 @@

{{translations.addLocationButton}}

-
+
@@ -95,7 +141,10 @@
- +
@@ -110,6 +159,7 @@ {{translations.lon}} {{translations.description}} {{translations.locationName}} + Edit @@ -119,6 +169,27 @@ {{ waypoint.lon }} {{ waypoint.description }} {{ waypoint.locationName }} + +
+ + + +
+ @@ -134,7 +205,7 @@

{{translations.addWaypointButton}}

+ (submit)="formWaypoint(newWaypoint.name, newWaypoint.lat, newWaypoint.lon, newWaypoint.description, newWaypoint.img, newWaypoint.locationName)">
@@ -156,7 +227,7 @@
- +
@@ -167,9 +238,13 @@
- + - +
+ diff --git a/src/app/component/management/management.component.ts b/src/app/component/management/management.component.ts index 560bac3..ed51a89 100644 --- a/src/app/component/management/management.component.ts +++ b/src/app/component/management/management.component.ts @@ -1,5 +1,5 @@ import {Component, OnInit} from '@angular/core'; -import {UserEntity} from "../../interface/UserEntity"; +import {newUser, UserEntity} from "../../interface/UserEntity"; import {LocationEntity} from "../../interface/LocationEntity"; import {newWaypoint, WaypointsEntity} from "../../interface/WaypointsEntity"; import {Router} from "@angular/router"; @@ -23,8 +23,10 @@ export class ManagementComponent implements OnInit { showUserForm: boolean = false; showLocationForm: boolean = false; showWaypointForm: boolean = false; + edit: boolean = false; + id: number = 0; - newUser: UserEntity = { password: "", username: ""}; + newUser: newUser = {password: "", username: ""}; newLocation: LocationEntity = {location: "", lat: 0, lon: 0, region: ""}; newWaypoint: newWaypoint = {description: "", img: "", lat: 0, locationName: "", lon: 0, name: ""}; @@ -53,7 +55,7 @@ export class ManagementComponent implements OnInit { if (user.admin == false) { this.route.navigate(['/home']); } - }else { + } else { this.cookieService.deleteUsername(); this.route.navigate(['/login']); } @@ -70,12 +72,50 @@ export class ManagementComponent implements OnInit { }); } - addUser( username: string, password: string) { - this.newUser = { username: username, password: password}; + formUser(username: string, password: string) { + if (this.edit) { + const user: UserEntity = {id: this.id, username: username, password: password}; + this.editUser(user); + this.edit = false; + } else { + this.addUser(username, password); + } + } + + formLocation(name: string, region: string, lat: number, lon: number) { + if (this.edit) { + const location: LocationEntity = {location: name, region: region, lat: lat, lon: lon}; + this.editLocation(location); + this.edit = false; + } else { + this.addLocation(name, region, lat, lon); + } + } + + formWaypoint(name: string, lat: number, lon: number, description: string, image: string, locationName: string) { + if (this.edit) { + const waypoint: WaypointsEntity = { + id: this.id, + name: name, + lat: lat, + lon: lon, + description: description, + img: image, + locationName: locationName + }; + this.editWaypoint(waypoint); + this.edit = false; + } else { + this.addWaypoint(name, lat, lon, description, image, locationName); + } + } + + addUser(username: string, password: string) { + this.newUser = {username: username, password: password}; this.userService.createUser(this.newUser).subscribe(user => { this.users?.push(user); }); - this.showUserForm = false; + this.closeUserForm(); } addLocation(name: string, region: string, lat: number, lon: number) { @@ -85,7 +125,7 @@ export class ManagementComponent implements OnInit { this.locationService.createLocation(this.newLocation).subscribe(location => { this.locations?.push(location); }); - this.showLocationForm = false; + this.closeLocationForm() } addWaypoint(name: string, lat: number, lon: number, description: string, image: string, locationName: string) { @@ -100,11 +140,11 @@ export class ManagementComponent implements OnInit { this.waypointService.createWaypoint(this.newWaypoint).subscribe(waypoint => { this.waypoints?.push(waypoint); }); - this.showWaypointForm = false; + this.closeWaypointForm(); } - deleteLocation(id: number) { - this.locationService.deleteLocation(id).subscribe(location => { + deleteLocation(location: string) { + this.locationService.deleteLocation(location).subscribe(location => { this.locations?.splice(this.locations?.indexOf(location), 1); }); } @@ -121,27 +161,71 @@ export class ManagementComponent implements OnInit { }); } - openUserForm() { - this.showUserForm = true; + editLocation(location: LocationEntity) { + this.locationService.updateLocation(location).subscribe(location => { + this.locations?.splice(this.locations?.indexOf(location), 1, location); + }); + this.closeLocationForm() } - closeUserForm() { - this.showUserForm = false; + editWaypoint(waypoint: WaypointsEntity) { + this.waypointService.updateWaypoint(waypoint, waypoint.id).subscribe(waypoint => { + this.waypoints?.splice(this.waypoints?.indexOf(waypoint), 1, waypoint); + }); + this.closeWaypointForm() } - openLocationForm() { + editUser(user: UserEntity) { + this.userService.updateUser(user, user.id).subscribe(user => { + this.users?.splice(this.users?.indexOf(user), 1, user); + }); + this.closeUserForm() + } + + openEditLocationForm(location: LocationEntity) { + this.newLocation = location; + this.edit = true; this.showLocationForm = true; } - closeLocationForm() { - this.showLocationForm = false; + openEditWaypointForm(waypoint: WaypointsEntity) { + this.newWaypoint = waypoint; + this.id = waypoint.id; + this.edit = true; + this.showWaypointForm = true; + } + + openEditUserForm(user: UserEntity) { + this.newUser = user; + this.id = user.id; + this.edit = true; + this.showUserForm = true; + } + + openUserForm() { + this.showUserForm = true; } openWaypointForm() { this.showWaypointForm = true; } + openLocationForm() { + this.showLocationForm = true; + } + + closeUserForm() { + this.showUserForm = false; + this.newUser = {username: '', password: ''}; + } + + closeLocationForm() { + this.showLocationForm = false; + this.newLocation = {location: '', region: '', lat: 0, lon: 0}; + } + closeWaypointForm() { this.showWaypointForm = false; + this.newWaypoint = {description: "", img: "", lat: 0, locationName: "", lon: 0, name: ""}; } } diff --git a/src/app/interface/UserEntity.ts b/src/app/interface/UserEntity.ts index 43e8afd..0ffa1ab 100644 --- a/src/app/interface/UserEntity.ts +++ b/src/app/interface/UserEntity.ts @@ -1,6 +1,11 @@ export interface UserEntity { - id?: number; + id: number; username: string; password: string; admin?: boolean; } + +export interface newUser { + username: string; + password: string; +} diff --git a/src/app/interface/translations.ts b/src/app/interface/translations.ts index 4790151..f9e4967 100644 --- a/src/app/interface/translations.ts +++ b/src/app/interface/translations.ts @@ -11,6 +11,7 @@ export interface listTranslations { locationName: string; distance: string; positionNotFoundErrorMessage: string; + waypointVisitedPercentage: string; } export interface managementTranslations { @@ -31,6 +32,7 @@ export interface managementTranslations { addUserButton: string; addLocationButton: string; addWaypointButton: string; + edit: string; add: string; close: string; } diff --git a/src/app/service/http/location.service.ts b/src/app/service/http/location.service.ts index 5de754f..ae9a035 100644 --- a/src/app/service/http/location.service.ts +++ b/src/app/service/http/location.service.ts @@ -29,11 +29,10 @@ export class LocationService { } updateLocation(location: LocationEntity) { - return this.http.put(LOCATION, location); + return this.http.put(LOCATION+"/"+location.location, location); } - deleteLocation(id: number) { - return this.http.delete(LOCATION + id); + 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 26bb379..2d356a8 100644 --- a/src/app/service/http/user.service.ts +++ b/src/app/service/http/user.service.ts @@ -1,6 +1,6 @@ import {Injectable} from "@angular/core"; import {HttpClient} from "@angular/common/http"; -import {UserEntity} from "../../interface/UserEntity"; +import {newUser, UserEntity} from "../../interface/UserEntity"; import {catchError, of} from "rxjs"; const BASE_URL = "progetto152"; @@ -41,17 +41,17 @@ export class UserService { return this.http.get(GET_USER_BY_ID + "/" + id); } - createUser(user: UserEntity) { + createUser(user: newUser) { console.log("create " + user); return this.http.post(USER, user); } updateUser(user: UserEntity, id: number) { - return this.http.put(USER + id, user); + return this.http.put(USER + "/"+id, user); } deleteUser(id: number) { - return this.http.delete(USER + id); + return this.http.delete(USER+"/" + id); } } diff --git a/src/app/service/http/waypoint.service.ts b/src/app/service/http/waypoint.service.ts index 0a67d1b..53550f3 100644 --- a/src/app/service/http/waypoint.service.ts +++ b/src/app/service/http/waypoint.service.ts @@ -44,6 +44,6 @@ export class WaypointService { } deleteWaypoint(id: number) { - return this.http.delete(WAYPOINT + id); + return this.http.delete(WAYPOINT+"/" + id); } } diff --git a/src/app/service/language/readTranslateJson.service.ts b/src/app/service/language/readTranslateJson.service.ts index ccdc8d2..bfb6060 100644 --- a/src/app/service/language/readTranslateJson.service.ts +++ b/src/app/service/language/readTranslateJson.service.ts @@ -34,6 +34,7 @@ export class ReadTranslateJsonService { this.listTranslation.distance = data.distance; this.listTranslation.locationName = data.locationName; this.listTranslation.positionNotFoundErrorMessage = data.positionNotFoundErrorMessage; + this.listTranslation.waypointVisitedPercentage = data.waypointVisitedPercentage; }); this.http.get('assets/i18n/management/en.json').subscribe(data => { @@ -54,6 +55,7 @@ export class ReadTranslateJsonService { this.managementTransaltion.addUserButton = data.addUserButton; this.managementTransaltion.addLocationButton = data.addLocationButton; this.managementTransaltion.addWaypointButton = data.addWaypointButton; + this.managementTransaltion.edit = data.edit; this.managementTransaltion.add = data.add; this.managementTransaltion.close = data.close; }); diff --git a/src/assets/i18n/list/en.json b/src/assets/i18n/list/en.json index 040580c..abad012 100644 --- a/src/assets/i18n/list/en.json +++ b/src/assets/i18n/list/en.json @@ -2,5 +2,6 @@ "translate": "Translate", "locationName": "Position not found", "distance": "Distance", - "positionNotFoundErrorMessage": "Could not retrieve position" + "positionNotFoundErrorMessage": "Could not retrieve position", + "waypointVisitedPercentage": "Percentage of waypoints visited" } diff --git a/src/assets/i18n/management/en.json b/src/assets/i18n/management/en.json index ab6df28..be56393 100644 --- a/src/assets/i18n/management/en.json +++ b/src/assets/i18n/management/en.json @@ -11,11 +11,12 @@ "lon": "Longitude", "description": "Description", "locationName": "Location Name", - "image": "Image", + "image": "Image (Direct Link)", "translate": "Translate", "addUserButton": "Add User", "addLocationButton": "Add Location", "addWaypointButton": "Add Waypoint", + "edit": "Edit", "add": "Add", "close": "Close" }