Update client for api changes and nickname attr

plant-browser/src/app/dialogs/update-nickname-dialog/update-nickname-dialog.component.ts

@@ -9,7 +9,6 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatDialogModule } from '@angular/material/dialog';
 
 export interface UpdateNicknameData {
-  name: string;
   nickname?: string;
 }
 

plant-browser/src/app/models/device-dto.model.ts

@@ -0,0 +1,5 @@
+export interface deviceDto {
+    id: number;
+    deviceId: string;
+    nickname: string;
+}

plant-browser/src/app/models/soil-data.model.ts

@@ -1,6 +1,7 @@
 export interface SoilData {
-    timestamp: Date;
-    moisture: number;
-    name: string;
-    nickname: string;
-  }
+  id: number;
+  timestamp: Date;
+  moistureLevel: number;
+  deviceId: string;
+  nickname: string;
+}

plant-browser/src/app/plant-list/plant-list.component.html

@@ -1,10 +1,10 @@
 <div class="plant-container">
-<div class="plant-grid">
-  <div class="plant-card-container" *ngFor="let plant of plants">
-    <div class="plant-card">
-      <p class="moisture-level">{{ plant.moisture }}</p>
+  <div class="plant-grid">
+    <div class="plant-card-container" *ngFor="let plant of plants">
+      <div class="plant-card">
+        <p class="moisture-level">{{ plant.moistureLevel }}%</p>
+      </div>
+      <h3 class="plant-name" (click)="openUpdateDialog(plant)">{{ plant.nickname }}</h3>
     </div>
-    <h3 class="plant-name" (click)="openUpdateDialog(plant)">{{ plant.nickname }}</h3>
   </div>
-</div>
 </div>

plant-browser/src/app/plant-list/plant-list.component.ts

@@ -1,6 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
 import { SoilData } from '../models/soil-data.model';
+import { deviceDto } from '../models/device-dto.model';
 import { SoilDataService } from '../services/soil-data.service';
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { MatDialog } from '@angular/material/dialog';
@@ -10,7 +11,7 @@ import { UpdateNicknameDialogComponent, UpdateNicknameData } from '../dialogs/up
   selector: 'app-plant-list',
   templateUrl: './plant-list.component.html',
   styleUrls: ['./plant-list.component.scss'],
-  imports:[
+  imports: [
     CommonModule
   ]
 })
@@ -23,7 +24,7 @@ export class PlantListComponent {
   constructor(
     private plantService: SoilDataService,
     private dialog: MatDialog,
-  ) {}
+  ) { }
 
   ngOnInit(): void {
     this.fetchPlants();
@@ -45,25 +46,25 @@ export class PlantListComponent {
   openUpdateDialog(device: SoilData): void {
     const dialogRef = this.dialog.open(UpdateNicknameDialogComponent, {
       width: '300px',
-      data: { name: device.name, nickname: device.nickname }
+      data: { nickname: device.nickname }
     });
 
     dialogRef.afterClosed().subscribe(result => {
       if (result) {
-        this.updateNickname(device.name, result.nickname);
+        let deviceDto: deviceDto = {
+          id: device.id,
+          deviceId: device.deviceId,
+          nickname: result.nickname
+        };
+        this.updateNickname(deviceDto);
       }
     });
   }
 
-  updateNickname(name: string, nickname: string): void {
-    this.plantService.updateNickname(name, nickname).subscribe(
+  updateNickname(deviceDto: deviceDto): void {
+    this.plantService.updateNickname(deviceDto).subscribe(
       (response: any) => {
-        console.log(response.message);
-        // Update the local device list
-        const device = this.plants.find(d => d.name === name);
-        if (device) {
-          device.nickname = nickname;
-        }
+        this.fetchPlants();
       },
       (error: any) => {
         console.error('Error updating nickname:', error);

plant-browser/src/app/services/soil-data.service.ts

@@ -3,6 +3,7 @@ import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { SoilData } from '../models/soil-data.model';
 import { environment } from '../../environments/environment';
+import { deviceDto } from '../models/device-dto.model';
 
 @Injectable({
   providedIn: 'root'
@@ -17,9 +18,9 @@ export class SoilDataService {
   }
 
   // Update device nickname
-  updateNickname(name: string, nickname: string): Observable<any> {
-    const url = `${this.baseUrl}/Device/${encodeURIComponent(name)}/nickname`;
-    return this.http.put(url, { nickname: nickname });
+  updateNickname(deviceDto: deviceDto): Observable<any> {
+    const url = `${this.baseUrl}/Device/${deviceDto.id}/nickname`;
+    return this.http.put(url, deviceDto);
   }
 
 }

plant-browser/src/environments/environment.ts

@@ -1,4 +1,5 @@
 export const environment = {
     production: false,
-    apiUrl: 'http://localhost:8000/api' // For development
+    //apiUrl: 'http://localhost:8000/api' // For development
+    apiUrl: 'http://192.168.1.193:8000/api' // For development
 };