From 715a3ea78c5a158180a55c79b5b82db4db6b9226 Mon Sep 17 00:00:00 2001
From: Anurag Vats <anurag.vats@uibk.ac.at>
Date: Tue, 6 Dec 2022 14:27:50 +0100
Subject: [PATCH] Add modal to show details of host/clients
---
src/app/login/login.component.html | 2 +-
src/app/station/station.component.html | 35 ++++++++++++++--
src/app/station/station.component.ts | 55 +++++++++++++++++++++-----
3 files changed, 78 insertions(+), 14 deletions(-)
diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html
index 9b68571..eb944b5 100644
--- a/src/app/login/login.component.html
+++ b/src/app/login/login.component.html
@@ -3,7 +3,7 @@
<div class="col-md-6">
<div class="card">
<div class="text-center">
- <!-- <img src="https://www.w3schools.com/bootstrap4/img_avatar1.png" alt="John" style="width:20%">-->
+ <img src="https://www.w3schools.com/bootstrap4/img_avatar1.png" alt="John" style="width:20%">
<h1>Login</h1>
<h6>Enter your username and password</h6>
<form [formGroup]="formLogin" (ngSubmit)="login()">
diff --git a/src/app/station/station.component.html b/src/app/station/station.component.html
index 2d277d0..38a67c5 100644
--- a/src/app/station/station.component.html
+++ b/src/app/station/station.component.html
@@ -11,7 +11,8 @@
<th scope="col">Location</th>
<th scope="col">
<div class="btn btn-primary" class="btn btn-primary" type="button"
- data-bs-toggle="modal" data-bs-target="#stationModal" (click)="onOpenAddClient()">Add station</div>
+ data-bs-toggle="modal" data-bs-target="#stationModal" (click)="onOpenAddClient()">Add station
+ </div>
</th>
</tr>
</thead>
@@ -21,15 +22,24 @@
<td>{{row.diary}}</td>
<td>{{Date(row.createdDate)}}</td>
<td>{{Date(row.updatedDate)}}</td>
- <td>{{getHostName(row.host)}}</td>
+ <td>
+ <a type="button" data-bs-toggle="modal" data-bs-target="#detailModal"
+ (click)="onDetailsModal('host', row.host)">
+ {{getHostName(row.host)}}
+ </a>
+ </td>
<td>
<div *ngFor="let client of row.clients">
+ <a type="button" data-bs-toggle="modal" data-bs-target="#detailModal"
+ (click)="onDetailsModal('client', client)">
{{getClientName(client)}}
+ </a>
</div>
</td>
<td>{{row.location.latitude}}, {{row.location.longitude}}</td>
<td>
- <div class="btn btn-info m-1" data-bs-toggle="modal" data-bs-target="#stationModal" (click)="onOpenEditClient(row)">Edit
+ <div class="btn btn-info m-1" data-bs-toggle="modal" data-bs-target="#stationModal"
+ (click)="onOpenEditClient(row)">Edit
</div>
<div class="btn btn-danger">Delete</div>
</td>
@@ -102,3 +112,22 @@
</div>
</div>
</div>
+
+<!-- Details Modal -->
+<div class="modal fade" id="detailModal" tabindex="-1" role="dialog" aria-labelledby="detailModalLabel"
+ aria-hidden="true">
+ <div class="modal-dialog" role="document">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h5 class="modal-title" id="detailModalLabel">{{detailsModal.title}}</h5>
+ <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+ </div>
+ <div class="modal-body">
+ {{detailsModal.body | json}}
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" id="cancel-btn-details">Close</button>
+ </div>
+ </div>
+ </div>
+</div>
diff --git a/src/app/station/station.component.ts b/src/app/station/station.component.ts
index e6cfd39..0c77c75 100644
--- a/src/app/station/station.component.ts
+++ b/src/app/station/station.component.ts
@@ -18,22 +18,28 @@ export class StationComponent {
stationsData!: any;
clientData: clientDataType [] = [];
hostData: any = [];
+ sensorsData: any = [];
formStation!: FormGroup;
stationModel :StationModel = new StationModel();
clientIdsToBeAdded: string[] = [];
showAddButton!: boolean;
showUpdateButton!: boolean;
- displayStyle = "none";
+ detailsModal : any = {
+ title: '',
+ body: {},
+ }
constructor(private api: ApiService, private fb: FormBuilder) {
this.getAllStations();
this.getAllClients();
this.getAllHosts();
+ this.getAllSensors();
this.formStation = fb.group({
name: [''],
diary: [''],
host: [''],
clients: [''],
+ mac: [''],
longitude: [''],
latitude: [''],
altitude: [''],
@@ -117,21 +123,50 @@ export class StationComponent {
});
}
- openPopup() {
- // get modal element
- const modal = document.getElementById('clientDetailsModal');
-
+ onUpdateStation() {
}
- closePopup() {
- this.displayStyle = "none";
- }
- onUpdateStation() {
+ getAllSensors() {
+ this.api.get('http://localhost:8080/api/v1/sensor/all')
+ .subscribe(res => {
+ this.sensorsData = res;
+ });
+ }
+ getSensorName(sensorId: any) {
+ return this.sensorsData?.find((sensor: { id: any; }) => sensor.id === sensorId)?.name;
}
- goToClientPage() {
+ onDetailsModal(type:string, data: any) {
+ let sensors: any = [];
+ if (type === 'client') {
+ const sensorId: string[] = this.clientData?.find((client: { clientData: { id: any; }; }) =>
+ client.clientData.id === data)?.clientData.sensors;
+ sensorId.forEach((id: string) => {
+ sensors.push(this.getSensorName(id));
+ });
+ }
+
+ if (type === 'host') {
+ this.detailsModal.title = 'Host Details';
+ this.detailsModal.body = {
+ name: this.hostData?.find((host: { id: any; }) => host.id === data)?.name,
+ mac: this.hostData?.find((host: { id: any; }) => host.id === data)?.mac,
+ simId: this.hostData?.find((host: { id: any; }) => host.id === data)?.simId,
+ };
+ } else if (type === 'client') {
+ this.detailsModal.title = 'Client Details';
+ this.detailsModal.body = {
+ name: this.clientData?.find((client: { clientData: { id: any; }; }) =>
+ client.clientData.id === data)?.clientData.name,
+ mac: this.clientData?.find((client: { clientData: { id: any; }; }) =>
+ client.clientData.id === data)?.clientData.mac,
+ connectionType: this.clientData?.find((client: { clientData: { id: any; }; }) =>
+ client.clientData.id === data)?.clientData.connectionType,
+ sensors: sensors,
+ };
+ }
}
}
--
GitLab