Update client for api changes and nickname attr

SoilMoistureAPI/Controllers/DeviceController.cs

@@ -56,9 +56,9 @@ namespace SoilMoistureAPI.Controllers
 
         // PUT: api/Device/{id}/nickname
         [HttpPut("{id}/nickname")]
-        public async Task<IActionResult> UpdateNickname(string id, [FromBody] string newNickname)
+        public async Task<IActionResult> UpdateNickname(int id, [FromBody] DeviceDto deviceUpdate)
         {
-            if (string.IsNullOrEmpty(newNickname))
+            if (string.IsNullOrEmpty(deviceUpdate.Nickname))
             {
                 return BadRequest("Nickname cannot be empty.");
             }
@@ -69,7 +69,7 @@ namespace SoilMoistureAPI.Controllers
                 return NotFound("Device not found.");
             }
 
-            device.Nickname = newNickname;
+            device.Nickname = deviceUpdate.Nickname;
             _context.Entry(device).State = EntityState.Modified;
 
             try
@@ -106,9 +106,9 @@ namespace SoilMoistureAPI.Controllers
             return NoContent(); // 204 No Content
         }
 
-        private bool DeviceExists(string id)
+        private bool DeviceExists(int id)
         {
-            return _context.SoilMoisturesFlat.Any(e => e.DeviceId == id);
+            return _context.SoilMoisturesFlat.Any(e => e.Id == id);
         }
     }
 }

SoilMoistureAPI/Program.cs

@@ -25,7 +25,7 @@ builder.Services.AddCors(options =>
     options.AddPolicy("AllowClient",
         builder =>
         {
-            //builder.WithOrigins("http://localhost:3000", "http://soilmoisture_client:80")
+            //builder.WithOrigins("http://localhost:3000", "http://localhost:4200", "http://soilmoisture_client:80")
             builder.AllowAnyOrigin()
                    .AllowAnyHeader()
                    .AllowAnyMethod();

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;
+  id: number;
-    moisture: number;
+  timestamp: Date;
-    name: string;
+  moistureLevel: number;
-    nickname: string;
+  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-grid">
-  <div class="plant-card-container" *ngFor="let plant of plants">
+    <div class="plant-card-container" *ngFor="let plant of plants">
-    <div class="plant-card">
+      <div class="plant-card">
-      <p class="moisture-level">{{ plant.moisture }}</p>
+        <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 {
+  updateNickname(deviceDto: deviceDto): void {
-    this.plantService.updateNickname(name, nickname).subscribe(
+    this.plantService.updateNickname(deviceDto).subscribe(
       (response: any) => {
-        console.log(response.message);
+        this.fetchPlants();
-        // Update the local device list
-        const device = this.plants.find(d => d.name === name);
-        if (device) {
-          device.nickname = nickname;
-        }
       },
       (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> {
+  updateNickname(deviceDto: deviceDto): Observable<any> {
-    const url = `${this.baseUrl}/Device/${encodeURIComponent(name)}/nickname`;
+    const url = `${this.baseUrl}/Device/${deviceDto.id}/nickname`;
-    return this.http.put(url, { nickname: 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
 };