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

managment component logic

Browse Source
This commit is contained in:
Joe Küng
2023-04-30 14:10:58 +02:00
parent 0aad60bab3
commit a68d48e065
5 changed files with 92 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,4 @@
import {Component, OnInit, SimpleChanges, OnChanges} from '@angular/core';
import {Component, OnChanges, OnInit, SimpleChanges} from '@angular/core';
import {ActivatedRoute} from "@angular/router";
import {positionService} from "../../service/position.service";
import {listTranslations} from "../../interface/translations";
@@ -7,7 +7,7 @@ import {ReadTranslateJsonService} from "../../service/language/readTranslateJson
import {LocationService} from "../../service/http/location.service";
import {LocationEntity} from "../../interface/LocationEntity";
import {WaypointsEntity} from "../../interface/WaypointsEntity";
import {WaypointService} from "../../service/http/waypoint.service";
import {WaypointService} from "../../service/http/waypoint.service"
@Component({
selector: 'app-list',
@@ -100,6 +100,19 @@ export class ListComponent implements OnInit, OnChanges {
}
}
getPosition(): any {
setInterval(async () => {
this.positionCord = await this.positionService.getLocation();
this.setDistance();
}, 2000);
}
async switchLanguage(lang: string) {
this.translations.translate = await this.translateService.getData(this.translations.translate, lang);
this.translations.distance = await this.translateService.getData(this.translations.distance, lang);
this.translations.locationName = await this.translateService.getData(this.translations.locationName, lang);
this.translations.positionNotFoundErrorMessage = await this.translateService.getData(this.translations.positionNotFoundErrorMessage, lang);
}
private checkDataPopulated(): void {
if (this.locations && this.location) {
@@ -129,18 +142,4 @@ export class ListComponent implements OnInit, OnChanges {
}
}
}
getPosition(): any {
setInterval(async () => {
this.positionCord = await this.positionService.getLocation();
this.setDistance();
}, 2000);
}
async switchLanguage(lang: string) {
this.translations.translate = await this.translateService.getData(this.translations.translate, lang);
this.translations.distance = await this.translateService.getData(this.translations.distance, lang);
this.translations.locationName = await this.translateService.getData(this.translations.locationName, lang);
this.translations.positionNotFoundErrorMessage = await this.translateService.getData(this.translations.positionNotFoundErrorMessage, lang);
}
}

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

@@ -15,7 +15,7 @@
</tr>
</thead>
<tbody>
<tr *ngFor="let user of userList">
<tr *ngFor="let user of users">
<td>{{ user.name }}</td>
<td>{{ user.username }}</td>
<td>{{ user.password }}</td>
@@ -24,7 +24,10 @@
</table>
<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</button>
<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
</button>
</div>
<div class="overlay" [style.display]="showUserForm ? 'block' : 'none'">
@@ -60,7 +63,7 @@
</tr>
</thead>
<tbody>
<tr *ngFor="let location of locationList">
<tr *ngFor="let location of locations">
<td>{{ location.location }}</td>
<td>{{ location.region }}</td>
<td>{{ location.lat }}</td>
@@ -70,13 +73,16 @@
</table>
<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</button>
<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
</button>
</div>
<div class="overlay" [style.display]="showLocationForm ? 'block' : 'none'">
<div class="form-container">
<h2>Add Location</h2>
<form (submit)="addLocation(newLocation.location, newLocation.region, newLocation.lat, newLocation.lon)">
<form (submit)="addLocation(newLocation.location, newLocation.region, newLocation.lat ,newLocation.lon)">
<div>
<label for="location">Location:</label>
<input type="text" id="location" name="location" [(ngModel)]="newLocation.location">
@@ -88,12 +94,12 @@
<div>
<label for="lat">Latitude:</label>
<input type="text" id="lat" name="lat" [(ngModel)]="newLocation.lat">
<input type="number" id="lat" name="lat" [(ngModel)]="newLocation.lat">
</div>
<div>
<label for="lon">Longitude:</label>
<input type="text" id="lon" name="lon" [(ngModel)]="newLocation.lon">
<input type="number" id="lon" name="lon" [(ngModel)]="newLocation.lon">
</div>
@@ -115,7 +121,7 @@
</tr>
</thead>
<tbody>
<tr *ngFor="let waypoint of waypointList">
<tr *ngFor="let waypoint of waypoints">
<td>{{ waypoint.name }}</td>
<td>{{ waypoint.lat }}</td>
<td>{{ waypoint.lon }}</td>
@@ -126,13 +132,17 @@
</table>
<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</button>
<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
</button>
</div>
<div class="overlay" [style.display]="showWaypointForm ? 'block' : 'none'">
<div class="form-container">
<h2>Add Location</h2>
<form (submit)="addWaypoint(newWaypoint.name, newWaypoint.lat, newWaypoint.lon, newWaypoint.description, newWaypoint.image, newWaypoint.locationName)">
<form
(submit)="addWaypoint(newWaypoint.name, newWaypoint.lat, newWaypoint.lon, newWaypoint.description, newWaypoint.image, newWaypoint.locationName)">
<div>
<label for="waypointName">Waypoint:</label>
<input type="text" id="waypointName" name="waypointName" [(ngModel)]="newWaypoint.name">
@@ -140,12 +150,12 @@
<div>
<label for="waypointLat">Latitude:</label>
<input type="text" id="waypointLat" name="waypointLat" [(ngModel)]="newWaypoint.lat">
<input type="number" id="waypointLat" name="waypointLat" [(ngModel)]="newWaypoint.lat">
</div>
<div>
<label for="waypointLon">Longitude:</label>
<input type="text" id="waypointLon" name="waypointLon" [(ngModel)]="newWaypoint.lon">
<input type="number" id="waypointLon" name="waypointLon" [(ngModel)]="newWaypoint.lon">
</div>
<div>
@@ -155,13 +165,13 @@
<div>
<label for="image">Image (Base64):</label>
<input type="text" id="image" name="image" [(ngModel)]="newWaypoint.image">
<input type="text" id="image" name="image" [(ngModel)]="newWaypoint.img">
</div>
<div>
<label for="locationName">Location Name:</label>
<select [(ngModel)]="newWaypoint.locationName" id="locationName" name="locationName">
<option *ngFor="let location of locationList" [value]="location.location">{{ location.location }}</option>
<option *ngFor="let location of locations" [value]="location.location">{{ location.location }}</option>
</select>
</div>

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

@@ -1,30 +1,11 @@
import {AfterViewInit, Component, ElementRef, OnDestroy, OnInit, ViewChild} from '@angular/core';
interface User {
id: number;
name: string;
username: string;
password: string;
}
interface Location {
id: number;
location: string;
region: string;
lat: string;
lon: string;
}
interface Waypoint {
id: number;
name: string;
lat: string;
lon: string;
description: string;
image: string;
locationName: string;
}
import {Component, OnInit} from '@angular/core';
import {UserEntity} from "../../interface/UserEntity";
import {LocationEntity} from "../../interface/LocationEntity";
import {WaypointsEntity} from "../../interface/WaypointsEntity";
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";
@Component({
selector: 'app-home',
@@ -32,71 +13,62 @@ interface Waypoint {
styleUrls: ['./management.component.css']
})
export class ManagementComponent implements OnInit, AfterViewInit, OnDestroy {
export class ManagementComponent implements OnInit {
showUserForm: boolean = false;
showLocationForm: boolean = false;
showWaypointForm: boolean = false;
newUser: User = {id: 0, name: '', username: '', password: ''};
newLocation: Location = {id: 0, location: '', region: '', lat: '', lon: ''};
newWaypoint: Waypoint = {id: 0, name: '', lat: '', lon: '', description: '', image: '', locationName: ''};
constructor() {
newUser: UserEntity;
newLocation: LocationEntity;
newWaypoint: WaypointsEntity;
locations: LocationEntity[] | undefined;
waypoints: WaypointsEntity[] | undefined;
users: UserEntity[] | undefined;
constructor(
private route: ActivatedRoute,
private locationService: LocationService,
private waypointService: WaypointService,
private userService: UserService,
) {
}
ngOnInit(): void {
this.locationService.getLocations().subscribe(locations => {
this.locations = locations;
});
this.waypointService.getAllWaypoints().subscribe(waypoints => {
this.waypoints = waypoints;
});
this.userService.getUsers().subscribe(users => {
this.users = users;
});
}
ngOnDestroy() {
}
ngAfterViewInit() {
}
userList: User[] = [
{id: 1, name: 'John', username: 'john@test.com', password: '0790000000'},
{id: 2, name: 'Jane', username: 'jane@test.com', password: '0790000001'},
{id: 3, name: 'Bob', username: 'bob@test.com', password: '0790000002'},
];
locationList: Location[] = [
{id: 1, location: 'New York', region: "US", lat: "40.7128", lon: "74.0060"},
{id: 2, location: 'London', region: "UK", lat: "51.5074", lon: "0.1278"},
{id: 3, location: 'Paris', region: "FR", lat: "48.8566", lon: "2.3522"},
];
waypointList: Waypoint[] = [
{id: 1, name: 'Statue of Liberty', lat: "40.6892", lon: "74.0445", description: "Statue of Liberty", image: "", locationName: "New York"},
{id: 2, name: 'Big Ben', lat: "51.5007", lon: "0.1246", description: "Big Ben", image: "", locationName: "London"},
{id: 3, name: 'Eiffel Tower', lat: "48.8584", lon: "2.2945", description: "Eiffel Tower", image: "", locationName: "Paris"},
];
addUser(name: string, username: string, password: string) {
const id = this.userList.length + 1;
const newUser: User = {id, name, username: username, password: password};
this.userList.push(newUser);
this.newUser = { name: name, username: username, password: password};
this.userService.createUser(this.newUser).subscribe(user => {
this.users?.push(user);
});
this.showUserForm = false;
this.newUser = {id: 0, name: '', username: '', password: ''};
}
addLocation(name: string, region: string, lat: string, lon: string) {
const id = this.locationList.length + 1;
const newLocation: Location = {id, location: name, region: region, lat: lat, lon: lon};
this.locationList.push(newLocation);
addLocation(name: string, region: string, lat: number, lon: number) {
this.newLocation = {name: name, region: region, lat: lat, lon: lon};
this.locationService.createLocation(this.newLocation).subscribe(location => {
this.locations?.push(location);
});
this.showLocationForm = false;
this.newLocation = {id: 0, location: '', region: '', lat: '', lon: ''};
}
addWaypoint(name: string, lat: string, lon: string, description: string, image: string, locationName: string) {
console.log(locationName)
const id = this.waypointList.length + 1;
const newWaypoint: Waypoint = {id, name, lat: lat, lon: lon, description: description, image: image, locationName: locationName};
this.waypointList.push(newWaypoint);
this.newWaypoint = {name: name, lat: lat, lon: lon, description: description, img: image, locationName: locationName};
this.waypointService.createWaypoint(this.newWaypoint).subscribe(waypoint => {
this.waypoints?.push(waypoint);
});
this.showWaypointForm = false;
this.newWaypoint = {id: 0, name: '', lat: '', lon: '', description: '', image: '', locationName: ''};
}
openUserForm() {

4
src/app/interface/UserEntity.ts
View File

@@ -1,6 +1,8 @@
export interface UserEntity {
id: number;
id?: number;
name: string;
username: string;
password: string;
}

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

@@ -18,6 +18,10 @@ export class WaypointService {
) {
}
getAllWaypoints() {
return this.http.get<WaypointsEntity[]>(WAYPOINT);
}
getWaypoints(location: string) {
return this.http.get<WaypointsEntity[]>(WAYPOINT + "/" + location)