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-01 15:35:55 +02:00
parent bf653186fd 564e392873
commit 452bf3febf
9 changed files with 174 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -73,21 +73,6 @@ export class ListComponent implements OnInit, OnChanges {
setTimeout(() => {
if (!this.positionCord) {
this.positionNotFound = true;
} else {
if (this.waypoints) {
if (!this.waypoints[0].distance) {
this.positionNotFound = true;
} else {
this.positionNotFound = false;
}
}
if (this.locations) {
if (!this.locations[0].distance) {
this.positionNotFound = true;
} else {
this.positionNotFound = false;
}
}
}
}, 5000);
}

94
src/app/component/management/management.component.html
View File

@@ -5,13 +5,25 @@
<title>Management</title>
</head>
<body>
<h1>Users</h1>
<div class="dropdown dropdown-hover" id="translate">
<label tabindex="0" class="btn m-1 bg-black border-neutral text-base-100"
id="translateLabel">{{translations.translate}}</label>
<ul tabindex="0" class="dropdown-content menu p-2 shadow rounded-box w-52" id="translateUl">
<li (click)="switchLanguage('DE')"><a>DE</a></li>
<li (click)="switchLanguage('FR')"><a>FR</a></li>
<li (click)="switchLanguage('IT')"><a>IT</a></li>
<li (click)="switchLanguage('EN')"><a>EN</a></li>
</ul>
</div>
<h1>{{translations.users}}</h1>
<table>
<thead>
<tr>
<th>Name</th>
<th>Username</th>
<th>Password</th>
<th>{{ translations.name }}</th>
<th>{{translations.username}}</th>
<th>{{translations.password}}</th>
</tr>
</thead>
<tbody>
@@ -26,40 +38,40 @@
<div class="button-container">
<button (click)="openUserForm()"
class="btn gap-2 border-primary bg-primary text-secondary hover:bg-secondary hover:text-primary hover:border-primary"
style="margin: 10px 10% 0 0;">Add
style="margin: 10px 10% 0 0;">{{translations.add}}
</button>
</div>
<div class="overlay" [style.display]="showUserForm ? 'block' : 'none'">
<div class="form-container">
<h2>Add User</h2>
<h2>{{translations.addUserButton}}</h2>
<form (submit)="addUser(newUser.name, newUser.username, newUser.password)">
<div>
<label for="name">Name:</label>
<label for="name">{{translations.name}}:</label>
<input type="text" id="name" name="name" [(ngModel)]="newUser.name">
</div>
<div>
<label for="username">Username:</label>
<label for="username">{{translations.username}}:</label>
<input type="text" id="username" name="username" [(ngModel)]="newUser.username">
</div>
<div>
<label for="password">Password:</label>
<label for="password">{{translations.password}}:</label>
<input type="password" id="password" name="password" [(ngModel)]="newUser.password">
</div>
<button type="submit">Add User</button>
<button type="submit">{{translations.addUserButton}}</button>
</form>
<button (click)="closeUserForm()">Close</button>
<button (click)="closeUserForm()">{{translations.close}}</button>
</div>
</div>
<h1>Locations</h1>
<h1>{{translations.locations}}</h1>
<table>
<thead>
<tr>
<th>Location</th>
<th>Region</th>
<th>Latitude</th>
<th>Longitude</th>
<th>{{translations.location}}</th>
<th>{{translations.region}}</th>
<th>{{translations.lat}}</th>
<th>{{translations.lon}}</th>
</tr>
</thead>
<tbody>
@@ -75,49 +87,49 @@
<div class="button-container">
<button (click)="openLocationForm()"
class="btn gap-2 border-primary bg-primary text-secondary hover:bg-secondary hover:text-primary hover:border-primary"
style="margin: 10px 10% 0 0;">Add
style="margin: 10px 10% 0 0;">{{translations.add}}
</button>
</div>
<div class="overlay" [style.display]="showLocationForm ? 'block' : 'none'">
<div class="form-container">
<h2>Add Location</h2>
<h2>{{translations.addLocationButton}}</h2>
<form (submit)="addLocation(newLocation.location, newLocation.region, newLocation.lat ,newLocation.lon)">
<div>
<label for="location">Location:</label>
<label for="location">{{translations.location}}:</label>
<input type="text" id="location" name="location" [(ngModel)]="newLocation.location">
</div>
<div>
<label for="region">Region:</label>
<label for="region">{{translations.region}}:</label>
<input type="text" id="region" name="region" [(ngModel)]="newLocation.region">
</div>
<div>
<label for="lat">Latitude:</label>
<label for="lat">{{translations.lat}}:</label>
<input type="number" id="lat" name="lat" [(ngModel)]="newLocation.lat">
</div>
<div>
<label for="lon">Longitude:</label>
<label for="lon">{{translations.lon}}:</label>
<input type="number" id="lon" name="lon" [(ngModel)]="newLocation.lon">
</div>
<button type="submit">Add Location</button>
<button type="submit">{{translations.addLocationButton}}</button>
</form>
<button (click)="closeLocationForm()">Close</button>
<button (click)="closeLocationForm()">{{translations.close}}</button>
</div>
</div>
<h1>Waypoints</h1>
<h1>{{translations.waypoints}}</h1>
<table>
<thead>
<tr>
<th>Name</th>
<th>Latitude</th>
<th>Longitude</th>
<th>Description</th>
<th>Location Name</th>
<th>{{translations.name}}</th>
<th>{{translations.lat}}</th>
<th>{{translations.lon}}</th>
<th>{{translations.description}}</th>
<th>{{translations.locationName}}</th>
</tr>
</thead>
<tbody>
@@ -134,50 +146,50 @@
<div class="button-container">
<button (click)="openWaypointForm()"
class="btn gap-2 border-primary bg-primary text-secondary hover:bg-secondary hover:text-primary hover:border-primary"
style="margin: 10px 10% 0 0;">Add
style="margin: 10px 10% 0 0;">{{translations.add}}
</button>
</div>
<div class="overlay" [style.display]="showWaypointForm ? 'block' : 'none'">
<div class="form-container">
<h2>Add Location</h2>
<h2>{{translations.addWaypointButton}}</h2>
<form
(submit)="addWaypoint(newWaypoint.name, newWaypoint.lat, newWaypoint.lon, newWaypoint.description, newWaypoint.image, newWaypoint.locationName)">
(submit)="addWaypoint(newWaypoint.name, newWaypoint.lat, newWaypoint.lon, newWaypoint.description, newWaypoint.img, newWaypoint.locationName)">
<div>
<label for="waypointName">Waypoint:</label>
<label for="waypointName">{{translations.name}}:</label>
<input type="text" id="waypointName" name="waypointName" [(ngModel)]="newWaypoint.name">
</div>
<div>
<label for="waypointLat">Latitude:</label>
<label for="waypointLat">{{translations.lat}}:</label>
<input type="number" id="waypointLat" name="waypointLat" [(ngModel)]="newWaypoint.lat">
</div>
<div>
<label for="waypointLon">Longitude:</label>
<label for="waypointLon">{{translations.lon}}:</label>
<input type="number" id="waypointLon" name="waypointLon" [(ngModel)]="newWaypoint.lon">
</div>
<div>
<label for="description">Description:</label>
<label for="description">{{translations.description}}:</label>
<input type="text" id="description" name="description" [(ngModel)]="newWaypoint.description">
</div>
<div>
<label for="image">Image (Base64):</label>
<label for="image">{{translations.image}} (Base64):</label>
<input type="text" id="image" name="image" [(ngModel)]="newWaypoint.img">
</div>
<div>
<label for="locationName">Location Name:</label>
<label for="locationName">{{translations.locationName}}:</label>
<select [(ngModel)]="newWaypoint.locationName" id="locationName" name="locationName">
<option *ngFor="let location of locations" [value]="location.location">{{ location.location }}</option>
</select>
</div>
<button type="submit">Add Waypoint</button>
<button type="submit">{{translations.addWaypointButton}}</button>
</form>
<button (click)="closeWaypointForm()">Close</button>
<button (click)="closeWaypointForm()">{{translations.close}}</button>
</div>
</div>
</body>

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

@@ -6,6 +6,10 @@ import {ActivatedRoute} from "@angular/router";
import {LocationService} from "../../service/http/location.service";
import {UserService} from "../../service/http/user.service";
import {WaypointService} from "../../service/http/waypoint.service";
import {toNumbers} from "@angular/compiler-cli/src/version_helpers";
import {managementTranslations} from "../../interface/translations";
import {TranslateService} from "../../service/language/translate.service";
import {ReadTranslateJsonService} from "../../service/language/readTranslateJson.service";
@Component({
selector: 'app-home',
@@ -18,24 +22,29 @@ export class ManagementComponent implements OnInit {
showLocationForm: boolean = false;
showWaypointForm: boolean = false;
newUser: UserEntity;
newLocation: LocationEntity;
newWaypoint: WaypointsEntity;
newUser: UserEntity = {name: "", password: "", username: ""};
newLocation: LocationEntity = {lat: 0, location: "", lon: 0, region: ""};
newWaypoint: WaypointsEntity = {description: "", img: "", lat: 0, locationName: "", lon: 0, name: ""};
locations: LocationEntity[] | undefined;
waypoints: WaypointsEntity[] | undefined;
users: UserEntity[] | undefined;
translations: managementTranslations = {} as managementTranslations
constructor(
private route: ActivatedRoute,
private locationService: LocationService,
private waypointService: WaypointService,
private userService: UserService,
private translateService: TranslateService,
private readTranslationJsonService: ReadTranslateJsonService,
) {
}
ngOnInit(): void {
this.translations = this.readTranslationJsonService.getManagementTranslations();
this.locationService.getLocations().subscribe(locations => {
this.locations = locations;
});
@@ -56,15 +65,15 @@ export class ManagementComponent implements OnInit {
}
addLocation(name: string, region: string, lat: number, lon: number) {
this.newLocation = {name: name, region: region, lat: lat, lon: lon};
this.newLocation = {location: name, region: region, lat: lat, lon: lon};
this.locationService.createLocation(this.newLocation).subscribe(location => {
this.locations?.push(location);
});
this.showLocationForm = false;
}
addWaypoint(name: string, lat: string, lon: string, description: string, image: string, locationName: string) {
this.newWaypoint = {name: name, lat: lat, lon: lon, description: description, img: image, locationName: locationName};
addWaypoint(name: string, lat: number, lon: number, description: string, image: string, locationName: string) {
this.newWaypoint = {description: description, img: image, lat: lat, locationName: locationName, lon: lon, name: name}
this.waypointService.createWaypoint(this.newWaypoint).subscribe(waypoint => {
this.waypoints?.push(waypoint);
});
@@ -94,4 +103,28 @@ export class ManagementComponent implements OnInit {
closeWaypointForm() {
this.showWaypointForm = false;
}
async switchLanguage(lang: string) {
this.translations.users = await this.translateService.getData(this.translations.users, lang);
this.translations.locations = await this.translateService.getData(this.translations.locations, lang);
this.translations.waypoints = await this.translateService.getData(this.translations.waypoints, lang);
this.translations.name = await this.translateService.getData(this.translations.name, lang);
this.translations.username = await this.translateService.getData(this.translations.username, lang);
this.translations.password = await this.translateService.getData(this.translations.password, lang);
this.translations.location = await this.translateService.getData(this.translations.location, lang);
this.translations.region = await this.translateService.getData(this.translations.region, lang);
this.translations.lat = await this.translateService.getData(this.translations.lat, lang);
this.translations.lon = await this.translateService.getData(this.translations.lon, lang);
this.translations.description = await this.translateService.getData(this.translations.description, lang);
this.translations.locationName = await this.translateService.getData(this.translations.locationName, lang);
this.translations.image = await this.translateService.getData(this.translations.image, lang);
this.translations.translate = await this.translateService.getData(this.translations.translate, lang);
this.translations.addLocationButton = await this.translateService.getData(this.translations.addLocationButton, lang);
this.translations.addUserButton = await this.translateService.getData(this.translations.addUserButton, lang);
this.translations.addWaypointButton = await this.translateService.getData(this.translations.addWaypointButton, lang);
this.translations.add = await this.translateService.getData(this.translations.add, lang);
this.translations.close = await this.translateService.getData(this.translations.close, lang);
}
protected readonly String = String;
}

19
src/app/home/home.component.css
View File

@@ -1,12 +1,7 @@
.search {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: absolute;
top: 35%;
left: 50%;
transform: translate(-50%, -50%);
}
input {
@@ -16,10 +11,8 @@ input {
}
#list {
position: absolute;
top: 46%;
left: 44%;
transform: translate(-50%, -50%);
align-self: center;
height: auto;
justify-content: center;
align-items: center;
align-content: center;
@@ -40,13 +33,13 @@ input {
}
.bg-image {
padding-top: 25%;
background-image: url('src/assets/img/mountains.png');
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
height: 100vh;
height: 94vh;
display: flex;
flex-direction: column;
}
#translate{
margin: 100px 10px 10px 10px;
}

5
src/app/home/home.component.html
View File

@@ -1,6 +1,6 @@
<div [ngClass]="{'background-color': backgroundColor}">
<div class="alert alert-warning shadow-lg" *ngIf="allert">
<div class="alert alert-warning shadow-lg" *ngIf="allert" id="alert">
<div>
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current flex-shrink-0 h-6 w-6" fill="none"
viewBox="0 0 24 24">
@@ -11,7 +11,7 @@
</div>
</div>
<div class="dropdown dropdown-hover">
<div class="dropdown dropdown-hover" id="translate">
<label tabindex="0" class="btn m-1 bg-black border-neutral text-base-100">{{translations.translate}}</label>
<ul tabindex="0" class="dropdown-content menu p-2 shadow rounded-box w-52">
<li (click)="switchLanguage('DE')"><a>DE</a></li>
@@ -22,6 +22,7 @@
</div >
<div class="bg-image">
<div class="search">
<div class="inputElements">

2
src/app/interface/WaypointsEntity.ts
View File

@@ -1,5 +1,5 @@
export interface WaypointsEntity {
id: number;
id?: number;
name: string;
lat: number;
lon: number;

21
src/app/interface/translations.ts
View File

@@ -13,3 +13,24 @@ export interface listTranslations {
positionNotFoundErrorMessage: string;
}
export interface managementTranslations {
users: string;
locations: string;
waypoints: string;
name: string;
username: string;
password: string;
location: string;
region: string;
lat: string;
lon: string;
description: string;
locationName: string;
image: string;
translate: string;
addUserButton: string;
addLocationButton: string;
addWaypointButton: string;
add: string;
close: string;
}

30
src/app/service/language/readTranslateJson.service.ts
View File

@@ -1,6 +1,6 @@
import {Injectable} from '@angular/core';
import {HttpClient} from "@angular/common/http";
import {homeTranslations} from "../../interface/translations";
import {homeTranslations, managementTranslations} from "../../interface/translations";
import {listTranslations} from "../../interface/translations";
@Injectable({
@@ -9,6 +9,7 @@ import {listTranslations} from "../../interface/translations";
export class ReadTranslateJsonService {
private homeTranslations: homeTranslations = {} as homeTranslations; // declares a private object to hold the home translations
private listTranslation: listTranslations = {} as listTranslations; // declares a private object to hold the list translations
private managementTransaltion: managementTranslations = {} as managementTranslations; // declares a private object to hold the management translations
constructor(private http: HttpClient) {
// loads the home translations from the assets file for the English language
@@ -29,6 +30,29 @@ export class ReadTranslateJsonService {
this.listTranslation.positionNotFoundErrorMessage = data.positionNotFoundErrorMessage;
console.log("data loaded", this.homeTranslations)
});
this.http.get<managementTranslations>('assets/i18n/management/en.json').subscribe(data => {
this.managementTransaltion.translate = data.translate;
this.managementTransaltion.users = data.users;
this.managementTransaltion.locations = data.locations;
this.managementTransaltion.waypoints = data.waypoints;
this.managementTransaltion.name = data.name;
this.managementTransaltion.username = data.username;
this.managementTransaltion.password = data.password;
this.managementTransaltion.location = data.location;
this.managementTransaltion.region = data.region;
this.managementTransaltion.lat = data.lat;
this.managementTransaltion.lon = data.lon;
this.managementTransaltion.description = data.description;
this.managementTransaltion.locationName = data.locationName;
this.managementTransaltion.image = data.image;
this.managementTransaltion.addUserButton = data.addUserButton;
this.managementTransaltion.addLocationButton = data.addLocationButton;
this.managementTransaltion.addWaypointButton = data.addWaypointButton;
this.managementTransaltion.add = data.add;
this.managementTransaltion.close = data.close;
console.log("data loaded", this.homeTranslations)
});
}
// returns the home translations object
@@ -40,4 +64,8 @@ export class ReadTranslateJsonService {
getListTransaltions(): listTranslations {
return this.listTranslation;
}
getManagementTranslations(): managementTranslations {
return this.managementTransaltion;
}
}

21
src/assets/i18n/management/en.json Normal file
View File

@@ -0,0 +1,21 @@
{
"users": "Users",
"locations": "Locations",
"waypoints": "Waypoints",
"name": "Name",
"username": "Username",
"password": "Password",
"location": "Location",
"region": "Region",
"lat": "Latitude",
"lon": "Longitude",
"description": "Description",
"locationName": "Location Name",
"image": "Image",
"translate": "Translate",
"addUserButton": "Add User",
"addLocationButton": "Add Location",
"addWaypointButton": "Add Waypoint",
"add": "Add",
"close": "Close"
}