Progetto-m152-Angular/src/app/component/management/management.component.html

<h1>{{translations.users}}</h1>
<table>
  <thead>
  <tr>
    <th>{{ translations.username }}</th>
    <th>{{translations.password}}</th>
    <th>admin</th>
    <th></th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let user of users">
    <td>{{ user.username }}</td>
    <td>{{ user.password }}</td>
    <td *ngIf="user.admin==false">No</td>
    <td *ngIf="user.admin==true">Yes</td>
    <td> </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;">{{translations.add}}
  </button>
</div>

<div class="overlay" [style.display]="showUserForm ? 'block' : 'none'">
  <div class="form-container">
    <h2>{{translations.addUserButton}}</h2>
    <form (submit)="addUser(newUser.username, newUser.password)">
      <div>
        <label for="username">{{translations.username}}:</label>
        <input type="text" id="username" name="username" [(ngModel)]="newUser.username">
      </div>
      <div>
        <label for="password">{{translations.password}}:</label>
        <input type="password" id="password" name="password" [(ngModel)]="newUser.password">
      </div>
      <button type="submit">{{translations.addUserButton}}</button>
    </form>
    <button (click)="closeUserForm()">{{translations.close}}</button>
  </div>
</div>

<h1>{{translations.locations}}</h1>
<table>
  <thead>
  <tr>
    <th>{{translations.location}}</th>
    <th>{{translations.region}}</th>
    <th>{{translations.lat}}</th>
    <th>{{translations.lon}}</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let location of locations">
    <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;">{{translations.add}}
  </button>
</div>

<div class="overlay" [style.display]="showLocationForm ? 'block' : 'none'">
  <div class="form-container">
    <h2>{{translations.addLocationButton}}</h2>
    <form (submit)="addLocation(newLocation.location, newLocation.region, newLocation.lat ,newLocation.lon)">
      <div>
        <label for="location">{{translations.location}}:</label>
        <input type="text" id="location" name="location" [(ngModel)]="newLocation.location">
      </div>
      <div>
        <label for="region">{{translations.region}}:</label>
        <input type="text" id="region" name="region" [(ngModel)]="newLocation.region">
      </div>

      <div>
        <label for="lat">{{translations.lat}}:</label>
        <input type="number" id="lat" name="lat" [(ngModel)]="newLocation.lat">
      </div>

      <div>
        <label for="lon">{{translations.lon}}:</label>
        <input type="number" id="lon" name="lon" [(ngModel)]="newLocation.lon">
      </div>


      <button type="submit">{{translations.addLocationButton}}</button>
    </form>
    <button (click)="closeLocationForm()">{{translations.close}}</button>
  </div>
</div>

<h1>{{translations.waypoints}}</h1>
<table>
  <thead>
  <tr>
    <th>{{translations.name}}</th>
    <th>{{translations.lat}}</th>
    <th>{{translations.lon}}</th>
    <th>{{translations.description}}</th>
    <th>{{translations.locationName}}</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let waypoint of waypoints">
    <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;">{{translations.add}}
  </button>
</div>

<div class="overlay" [style.display]="showWaypointForm ? 'block' : 'none'">
  <div class="form-container">
    <h2>{{translations.addWaypointButton}}</h2>
    <form
      (submit)="addWaypoint(newWaypoint.name, newWaypoint.lat, newWaypoint.lon, newWaypoint.description, newWaypoint.img, newWaypoint.locationName)">
      <div>
        <label for="waypointName">{{translations.name}}:</label>
        <input type="text" id="waypointName" name="waypointName" [(ngModel)]="newWaypoint.name">
      </div>

      <div>
        <label for="waypointLat">{{translations.lat}}:</label>
        <input type="number" id="waypointLat" name="waypointLat" [(ngModel)]="newWaypoint.lat">
      </div>

      <div>
        <label for="waypointLon">{{translations.lon}}:</label>
        <input type="number" id="waypointLon" name="waypointLon" [(ngModel)]="newWaypoint.lon">
      </div>

      <div>
        <label for="description">{{translations.description}}:</label>
        <input type="text" id="description" name="description" [(ngModel)]="newWaypoint.description">
      </div>

      <div>
        <label for="image">{{translations.image}} (Base64):</label>
        <input type="text" id="image" name="image" [(ngModel)]="newWaypoint.img">
      </div>

      <div>
        <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">{{translations.addWaypointButton}}</button>
    </form>
    <button (click)="closeWaypointForm()">{{translations.close}}</button>
  </div>
</div>