Add modal to show details of host/clients

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()">

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>

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,
+      };
+    }
   }
 }