added management page
This commit is contained in:
grata
@@ -3,11 +3,13 @@ import {RouterModule} from '@angular/router';
|
|||||||
import {HomeComponent} from './home/home.component';
|
import {HomeComponent} from './home/home.component';
|
||||||
import {DetailComponent} from "./detail/detail.component";
|
import {DetailComponent} from "./detail/detail.component";
|
||||||
import {ListComponent} from "./list/list.component";
|
import {ListComponent} from "./list/list.component";
|
||||||
|
import {ManagementComponent} from "./management/management.component";
|
||||||
|
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports: [RouterModule.forRoot([
|
imports: [RouterModule.forRoot([
|
||||||
{path: 'home', component: HomeComponent},
|
{path: 'home', component: HomeComponent},
|
||||||
|
{path: 'management', component: ManagementComponent},
|
||||||
{path: 'location/:location', component: ListComponent},
|
{path: 'location/:location', component: ListComponent},
|
||||||
{path: 'location/:location/:id', component: DetailComponent},
|
{path: 'location/:location/:id', component: DetailComponent},
|
||||||
{path: '**', redirectTo: 'home'}
|
{path: '**', redirectTo: 'home'}
|
||||||
|
|||||||
@@ -9,13 +9,14 @@ import { DetailComponent } from './detail/detail.component';
|
|||||||
import {FormsModule} from "@angular/forms";
|
import {FormsModule} from "@angular/forms";
|
||||||
import { HttpClientModule} from "@angular/common/http";
|
import { HttpClientModule} from "@angular/common/http";
|
||||||
import { SafePipe } from './pipes/safe.pipe';
|
import { SafePipe } from './pipes/safe.pipe';
|
||||||
|
import { ManagementComponent } from './management/management.component';
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [
|
declarations: [
|
||||||
AppComponent,
|
AppComponent,
|
||||||
HomeComponent,
|
HomeComponent,
|
||||||
ListComponent,
|
ListComponent,
|
||||||
DetailComponent,
|
DetailComponent,
|
||||||
|
ManagementComponent,
|
||||||
SafePipe,
|
SafePipe,
|
||||||
],
|
],
|
||||||
imports: [
|
imports: [
|
||||||
|
|||||||
141
src/app/management/management.component.css
Normal file
141
src/app/management/management.component.css
Normal file
@@ -0,0 +1,141 @@
|
|||||||
|
body {
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin:2% 0 1% 10%;
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tabella degli utenti */
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
width: 80%;
|
||||||
|
margin: 0 10% 0 10%;
|
||||||
|
}
|
||||||
|
|
||||||
|
th, td {
|
||||||
|
padding: 8px;
|
||||||
|
text-align: left;
|
||||||
|
border-bottom: 1px solid #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
background-color: #f2f2f2;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Form di aggiunta utente */
|
||||||
|
.overlay {
|
||||||
|
position: fixed;
|
||||||
|
z-index: 1;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: rgba(0, 0, 0, 0.4);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-container {
|
||||||
|
background-color: #fefefe;
|
||||||
|
border-radius: 5px;
|
||||||
|
padding: 20px;
|
||||||
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
|
||||||
|
width: 400px;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-container h2 {
|
||||||
|
margin: 0 0 10px 0;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-container div {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-container label {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-container input {
|
||||||
|
width: 100%;
|
||||||
|
padding: 8px;
|
||||||
|
border-radius: 5px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-container select{
|
||||||
|
width: 100%;
|
||||||
|
padding: 8px;
|
||||||
|
border-radius: 5px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-container button {
|
||||||
|
background-color: #4CAF50;
|
||||||
|
color: white;
|
||||||
|
padding: 8px 16px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-container button[type="submit"] {
|
||||||
|
background-color: #008CBA;
|
||||||
|
margin-top:10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-container button[type="submit"]:hover {
|
||||||
|
background-color: #0d8bf2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-container button[type="submit"]:active {
|
||||||
|
background-color: #0a5a8d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-container button[type="submit"]:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-container button[type="submit"]:disabled {
|
||||||
|
background-color: #cccccc;
|
||||||
|
cursor: not-allowed;
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-container button[type="submit"]:disabled:hover {
|
||||||
|
background-color: #cccccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-container button:not([type="submit"]) {
|
||||||
|
background-color: #f44336;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-container button:not([type="submit"]):hover {
|
||||||
|
background-color: #d30f0f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-container button:not([type="submit"]):active {
|
||||||
|
background-color: #8b0c0c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-container button:not([type="submit"]):focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-container{
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
174
src/app/management/management.component.html
Normal file
174
src/app/management/management.component.html
Normal file
@@ -0,0 +1,174 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Management</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Users</h1>
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>Username</th>
|
||||||
|
<th>Password</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr *ngFor="let user of userList">
|
||||||
|
<td>{{ user.name }}</td>
|
||||||
|
<td>{{ user.username }}</td>
|
||||||
|
<td>{{ user.password }}</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="overlay" [style.display]="showUserForm ? 'block' : 'none'">
|
||||||
|
<div class="form-container">
|
||||||
|
<h2>Add User</h2>
|
||||||
|
<form (submit)="addUser(newUser.name, newUser.username, newUser.password)">
|
||||||
|
<div>
|
||||||
|
<label for="name">Name:</label>
|
||||||
|
<input type="text" id="name" name="name" [(ngModel)]="newUser.name">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="username">Email:</label>
|
||||||
|
<input type="text" id="username" name="username" [(ngModel)]="newUser.username">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="password">Password:</label>
|
||||||
|
<input type="password" id="password" name="password" [(ngModel)]="newUser.password">
|
||||||
|
</div>
|
||||||
|
<button type="submit">Add User</button>
|
||||||
|
</form>
|
||||||
|
<button (click)="closeUserForm()">Close</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1>Locations</h1>
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Location</th>
|
||||||
|
<th>Region</th>
|
||||||
|
<th>Latitude</th>
|
||||||
|
<th>Longitude</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr *ngFor="let location of locationList">
|
||||||
|
<td>{{ location.location }}</td>
|
||||||
|
<td>{{ location.region }}</td>
|
||||||
|
<td>{{ location.lat }}</td>
|
||||||
|
<td>{{ location.lon }}</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</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>
|
||||||
|
</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)">
|
||||||
|
<div>
|
||||||
|
<label for="location">Location:</label>
|
||||||
|
<input type="text" id="location" name="location" [(ngModel)]="newLocation.location">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="region">Region:</label>
|
||||||
|
<input type="text" id="region" name="region" [(ngModel)]="newLocation.region">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="lat">Latitude:</label>
|
||||||
|
<input type="text" id="lat" name="lat" [(ngModel)]="newLocation.lat">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="lon">Longitude:</label>
|
||||||
|
<input type="text" id="lon" name="lon" [(ngModel)]="newLocation.lon">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<button type="submit">Add Location</button>
|
||||||
|
</form>
|
||||||
|
<button (click)="closeLocationForm()">Close</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1>Waypoints</h1>
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>Latitude</th>
|
||||||
|
<th>Longitude</th>
|
||||||
|
<th>Description</th>
|
||||||
|
<th>Location Name</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr *ngFor="let waypoint of waypointList">
|
||||||
|
<td>{{ waypoint.name }}</td>
|
||||||
|
<td>{{ waypoint.lat }}</td>
|
||||||
|
<td>{{ waypoint.lon }}</td>
|
||||||
|
<td>{{ waypoint.description }}</td>
|
||||||
|
<td>{{ waypoint.locationName }}</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</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>
|
||||||
|
</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)">
|
||||||
|
<div>
|
||||||
|
<label for="waypointName">Waypoint:</label>
|
||||||
|
<input type="text" id="waypointName" name="waypointName" [(ngModel)]="newLocation.location">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="waypointLat">Latitude:</label>
|
||||||
|
<input type="text" id="waypointLat" name="waypointLat" [(ngModel)]="newLocation.location">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="waypointLon">Longitude:</label>
|
||||||
|
<input type="text" id="waypointLon" name="waypointLon" [(ngModel)]="newLocation.location">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="description">Description:</label>
|
||||||
|
<input type="text" id="description" name="description" [(ngModel)]="newLocation.location">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="image">Image (Base64):</label>
|
||||||
|
<input type="text" id="image" name="image" [(ngModel)]="newLocation.location">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="locationName">Location Name:</label>
|
||||||
|
<select [(ngModel)]="newWaypoint.locationName" id="locationName">
|
||||||
|
<option *ngFor="let location of locationList" [value]="location.location">{{ location.location }}</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="submit">Add Waypoint</button>
|
||||||
|
</form>
|
||||||
|
<button (click)="closeWaypointForm()">Close</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
119
src/app/management/management.component.ts
Normal file
119
src/app/management/management.component.ts
Normal file
@@ -0,0 +1,119 @@
|
|||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-home',
|
||||||
|
templateUrl: './management.component.html',
|
||||||
|
styleUrls: ['./management.component.css']
|
||||||
|
})
|
||||||
|
|
||||||
|
export class ManagementComponent implements OnInit, AfterViewInit, OnDestroy {
|
||||||
|
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() {
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit(): void {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
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.showUserForm = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
|
addWaypoint(name: string, lat: string, lon: string, description: string, image: string, locationName: string) {
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
|
openUserForm() {
|
||||||
|
this.showUserForm = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
closeUserForm() {
|
||||||
|
this.showUserForm = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
openLocationForm() {
|
||||||
|
this.showLocationForm = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
closeLocationForm() {
|
||||||
|
this.showLocationForm = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
openWaypointForm() {
|
||||||
|
this.showWaypointForm = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
closeWaypointForm() {
|
||||||
|
this.showWaypointForm = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user