From 262110434be8b05f526c51e565eadc200bd8ad13 Mon Sep 17 00:00:00 2001
From: Alberto Paganelli <alberto.paganelli3@studio.unibo.it>
Date: Tue, 30 Jan 2024 17:52:15 +0100
Subject: [PATCH 1/5] wip: update popup

---
 .../src/components/devices/DeviceBadge.vue    |  28 ++++-
 .../src/components/devices/NewDevicePopup.vue |   1 -
 .../components/devices/UpdateDevicePopup.vue  | 117 ++++++++++++++++++
 frontend/src/views/DevicesView.vue            |  19 +--
 4 files changed, 154 insertions(+), 11 deletions(-)
 create mode 100644 frontend/src/components/devices/UpdateDevicePopup.vue

diff --git a/frontend/src/components/devices/DeviceBadge.vue b/frontend/src/components/devices/DeviceBadge.vue
index 727116157..441b33f63 100644
--- a/frontend/src/components/devices/DeviceBadge.vue
+++ b/frontend/src/components/devices/DeviceBadge.vue
@@ -2,10 +2,30 @@
 import type { Device, Sensor, Camera } from '@domain/device/core'
 import { Measure, DeviceType } from '@domain/device/core'
 import { getMeasureColor } from '@/utils/MeasureUtils'
+import { ref } from "vue";
+import UpdateDevicePopup from "@/components/devices/UpdateDevicePopup.vue";
 
 defineProps<{
   device: Device
 }>()
+
+const updatePopupVisible = ref<boolean>(false)
+
+const openPopup = (device: Device) => {
+  updatePopupVisible.value = true
+  console.log(device)
+}
+const updateSensor = () => {
+  /*
+    updatePopupVisible.value = true
+  */
+}
+
+const updateCamera = () => {
+  /*
+    updatePopupVisible.value = true
+  */
+}
 </script>
 
 <template>
@@ -50,7 +70,7 @@ defineProps<{
           <q-tooltip :offset="[0, 8]">Enable</q-tooltip>
         </div>
         <div>
-          <q-btn color="secondary" icon="edit" />
+          <q-btn color="secondary" icon="edit" @click="updatePopupVisible = true"/>
           <q-tooltip :offset="[0, 8]">Edit</q-tooltip>
         </div>
         <div>
@@ -68,6 +88,12 @@ defineProps<{
       </li>
     </ul>
   </div>
+  <update-device-popup
+    v-model="updatePopupVisible"
+    :device="device"
+    @update-sensor="updateSensor"
+    @update-camera="updateCamera"
+  ></update-device-popup>
 </template>
 
 <style scoped lang="scss">
diff --git a/frontend/src/components/devices/NewDevicePopup.vue b/frontend/src/components/devices/NewDevicePopup.vue
index dc6c5aaa4..6bce697f4 100644
--- a/frontend/src/components/devices/NewDevicePopup.vue
+++ b/frontend/src/components/devices/NewDevicePopup.vue
@@ -6,7 +6,6 @@ import type { DeviceFactory, DeviceIdFactory, ResolutionFactory } from '@domain/
 import { DeviceFactoryImpl, DeviceIdFactoryImpl, ResolutionFactoryImpl } from '@domain/device/factories'
 
 const emit = defineEmits<{
-  (e: 'update-devices'): void
   (e: 'insert-camera', camera: Camera): void
   (e: 'insert-sensor', sensor: Sensor): void
 }>()
diff --git a/frontend/src/components/devices/UpdateDevicePopup.vue b/frontend/src/components/devices/UpdateDevicePopup.vue
new file mode 100644
index 000000000..690e79531
--- /dev/null
+++ b/frontend/src/components/devices/UpdateDevicePopup.vue
@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import { Measure } from 'domain/dist/domain/device/core/impl/enum/Measure'
+import { ref } from 'vue'
+import { type Camera, type Device, DeviceType, type Sensor } from "@domain/device/core";
+import type { DeviceFactory, DeviceIdFactory, ResolutionFactory } from '@domain/device/factories'
+import { DeviceFactoryImpl, DeviceIdFactoryImpl, ResolutionFactoryImpl } from '@domain/device/factories'
+
+defineProps<{
+  device: Device
+}>()
+
+const emit = defineEmits<{
+  (e: 'update-camera', camera: Camera): void
+  (e: 'update-sensor', sensor: Sensor): void
+}>()
+
+const deviceIdFactory: DeviceIdFactory = new DeviceIdFactoryImpl()
+const deviceFactory: DeviceFactory = new DeviceFactoryImpl()
+const resolutionFactory: ResolutionFactory = new ResolutionFactoryImpl()
+
+const deviceType: ref<DeviceType> = ref(DeviceType.SENSOR)
+const code: ref<String> = ref('')
+const ipAddress: ref<String> = ref('')
+const width: ref<number> = ref()
+const height: ref<number> = ref()
+const intervalMillis: ref<number> = ref()
+const measures: ref<Measure[]> = ref([Measure.TEMPERATURE])
+const options = ref([
+  {
+    label: 'Temperature',
+    value: Measure.TEMPERATURE
+  },
+  {
+    label: 'Humidity',
+    value: Measure.HUMIDITY
+  },
+  {
+    label: 'Pressure',
+    value: Measure.PRESSURE
+  }
+])
+
+const updateDevice = () => {
+  if (deviceType.value == DeviceType.SENSOR) {
+    const updatedSensor: Sensor = deviceFactory.createSensor(
+      deviceIdFactory.createSensorId(code.value),
+      ipAddress.value,
+      intervalMillis.value,
+      measures.value
+    )
+    emit('update-sensor', updatedSensor)
+  } else if (deviceType.value == DeviceType.CAMERA) {
+    const updatedCamera: Camera = deviceFactory.createCamera(
+      deviceIdFactory.createCameraId(code.value),
+      ipAddress.value,
+      resolutionFactory.createResolution(width.value, height.value)
+    )
+    emit('update-camera', updatedCamera)
+  }
+}
+</script>
+
+<template>
+  <q-dialog>
+    <q-card style="width: 700px; max-width: 80vw">
+      <q-card-section>
+        <h3 class="text-h5">Update Device:</h3>
+      </q-card-section>
+      <q-card-section class="q-gutter-md">
+        <q-radio dense v-model="deviceType" :val="DeviceType.SENSOR" disabled label="Sensor" />
+        <q-radio dense v-model="deviceType" :val="DeviceType.CAMERA" disabled label="Camera" />
+      </q-card-section>
+      <q-card-section class="q-pt-none">
+        <label>Code</label>
+        <q-input dense v-model="device.deviceId.code" disable autofocus />
+      </q-card-section>
+      <q-card-section class="q-pt-none">
+        <label>IP Address</label>
+        <q-input dense v-model="device.ipAddress" />
+      </q-card-section>
+      <div v-if="deviceType == DeviceType.CAMERA">
+        <q-card-section class="q-pt-none resolution">
+          <label>Resolution</label>
+          <q-input type="number" v-model="width" placeholder="Width" />
+          <span>x</span>
+          <q-input type="number" v-model="height" placeholder="Height" />
+        </q-card-section>
+      </div>
+
+      <div v-if="deviceType == DeviceType.SENSOR">
+        <q-card-section class="q-pt-none">
+          <label>Acquisition rate (ms)</label>
+          <q-input type="number" v-model="(device as Sensor).intervalMillis" />
+        </q-card-section>
+        <q-option-group style="display: flex" v-model="measures" :options="options" type="checkbox" />
+      </div>
+
+      <q-card-actions align="right">
+        <q-btn flat label="Cancel" v-close-popup class="text-primary" />
+        <q-btn flat label="OK" v-close-popup class="bg-white text-teal" @click="updateDevice" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped lang="scss">
+div.resolution {
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-start;
+  gap: 15px;
+
+  input {
+    height: 50px !important;
+  }
+}
+</style>
diff --git a/frontend/src/views/DevicesView.vue b/frontend/src/views/DevicesView.vue
index 8c410e3cb..4feb5e9df 100644
--- a/frontend/src/views/DevicesView.vue
+++ b/frontend/src/views/DevicesView.vue
@@ -2,7 +2,7 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
 
-import SensorBadge from '@/components/devices/DeviceBadge.vue'
+import DeviceBadge from '@/components/devices/DeviceBadge.vue'
 import type {
   DeviceFactory,
   DeviceIdFactory,
@@ -15,11 +15,12 @@ import {
   EnvironmentDataFactoryImpl,
   ResolutionFactoryImpl
 } from '@domain/device/factories'
-import type { Camera, Sensor } from '@domain/device/core'
+import type { Camera, Device, Sensor } from "@domain/device/core";
 import { Measure } from '@domain/device/core'
 import NewDevicePopup from '@/components/devices/NewDevicePopup.vue'
 import RequestHelper, { monitoringHost, monitoringPort } from '@/utils/RequestHelper'
 import { MeasureConverter } from 'domain/dist/utils'
+import UpdateDevicePopup from "@/components/devices/UpdateDevicePopup.vue";
 
 const environmentDataFactory: EnvironmentDataFactory = new EnvironmentDataFactoryImpl()
 
@@ -147,18 +148,19 @@ onMounted(async () => {
   await getCameras()
 })
 
-const popupVisible = ref<boolean>(false)
+const newPopupVisible = ref<boolean>(false)
+
 </script>
 
 <template>
   <div class="new-device">
-    <q-btn label="Add a device" color="primary" @click="popupVisible = true" />
+    <q-btn label="Add a device" color="primary" @click="newPopupVisible = true" />
   </div>
 
   <h2>Sensors</h2>
 
   <div class="sensors-container">
-    <sensor-badge
+    <device-badge
       v-for="sensor in sensors"
       :key="sensor.deviceId"
       :device="sensor"
@@ -168,7 +170,7 @@ const popupVisible = ref<boolean>(false)
 
   <h2>Cameras</h2>
   <div class="cameras-container">
-    <sensor-badge
+    <device-badge
       v-for="camera in cameras"
       :key="camera.deviceId"
       :device="camera"
@@ -176,13 +178,12 @@ const popupVisible = ref<boolean>(false)
     />
   </div>
 
-  <!--  to check!!-->
   <new-device-popup
-    v-model="popupVisible"
-    @update-devices="getSensors"
+    v-model="newPopupVisible"
     @insert-sensor="insertSensor"
     @insert-camera="insertCamera"
   ></new-device-popup>
+
 </template>
 
 <style scoped lang="scss">

From 4eced8d05d5e942413811eebf3d86c60eeeb8f1c Mon Sep 17 00:00:00 2001
From: Alberto Paganelli <alberto.paganelli3@studio.unibo.it>
Date: Tue, 30 Jan 2024 18:21:57 +0100
Subject: [PATCH 2/5] feature: update sensor

---
 .../src/components/devices/DeviceBadge.vue    | 53 ++++++++++++++++---
 .../components/devices/UpdateDevicePopup.vue  | 35 ++++++------
 2 files changed, 60 insertions(+), 28 deletions(-)

diff --git a/frontend/src/components/devices/DeviceBadge.vue b/frontend/src/components/devices/DeviceBadge.vue
index 441b33f63..49200855a 100644
--- a/frontend/src/components/devices/DeviceBadge.vue
+++ b/frontend/src/components/devices/DeviceBadge.vue
@@ -4,6 +4,8 @@ import { Measure, DeviceType } from '@domain/device/core'
 import { getMeasureColor } from '@/utils/MeasureUtils'
 import { ref } from "vue";
 import UpdateDevicePopup from "@/components/devices/UpdateDevicePopup.vue";
+import RequestHelper, { monitoringHost, monitoringPort } from "@/utils/RequestHelper";
+import { MeasureConverter } from "domain/dist/utils";
 
 defineProps<{
   device: Device
@@ -15,16 +17,51 @@ const openPopup = (device: Device) => {
   updatePopupVisible.value = true
   console.log(device)
 }
-const updateSensor = () => {
-  /*
-    updatePopupVisible.value = true
-  */
+
+const updateSensor = async (sensor: Sensor) => {
+  console.log("sensor")
+  console.log(sensor)
+  console.log({
+    code: sensor.deviceId.code,
+    ipAddress: sensor.ipAddress,
+    intervalMillis: sensor.intervalMillis,
+    measures: sensor.measures.map((m: Measure) => {
+      return MeasureConverter.convertToString(m)
+    })})
+    await RequestHelper.put(`http://${monitoringHost}:${monitoringPort}/devices/sensors`, {
+      code: sensor.deviceId.code,
+      ipAddress: sensor.ipAddress,
+      intervalMillis: sensor.intervalMillis,
+      measures: sensor.measures.map((m: Measure) => {
+        return MeasureConverter.convertToString(m)
+      })
+    })
+      .then(async (res: any) => {
+        //TODO A CONFIRM POPUP
+       // await getSensors()
+      })
+      .catch(error => {
+        console.log(error)
+      })
 }
 
-const updateCamera = () => {
-  /*
-    updatePopupVisible.value = true
-  */
+const updateCamera = async (camera: Camera) => {
+  console.log(camera)
+    await RequestHelper.post(`http://${monitoringHost}:${monitoringPort}/devices/cameras`, {
+      code: camera.deviceId.code,
+      ipAddress: camera.ipAddress,
+      resolution: {
+        width: camera.resolution.width,
+        height: camera.resolution.height
+      }
+    })
+      .then(async (res: any) => {
+        //TODO A CONFIRM POPUP
+        await getCameras()
+      })
+      .catch(error => {
+        console.log(error)
+      })
 }
 </script>
 
diff --git a/frontend/src/components/devices/UpdateDevicePopup.vue b/frontend/src/components/devices/UpdateDevicePopup.vue
index 690e79531..0c3c808f3 100644
--- a/frontend/src/components/devices/UpdateDevicePopup.vue
+++ b/frontend/src/components/devices/UpdateDevicePopup.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { Measure } from 'domain/dist/domain/device/core/impl/enum/Measure'
 import { ref } from 'vue'
-import { type Camera, type Device, DeviceType, type Sensor } from "@domain/device/core";
+import { type Camera, type Device, DeviceType, type Sensor } from '@domain/device/core'
 import type { DeviceFactory, DeviceIdFactory, ResolutionFactory } from '@domain/device/factories'
 import { DeviceFactoryImpl, DeviceIdFactoryImpl, ResolutionFactoryImpl } from '@domain/device/factories'
 
-defineProps<{
+const { device } = defineProps<{
   device: Device
 }>()
 
@@ -18,13 +18,12 @@ const deviceIdFactory: DeviceIdFactory = new DeviceIdFactoryImpl()
 const deviceFactory: DeviceFactory = new DeviceFactoryImpl()
 const resolutionFactory: ResolutionFactory = new ResolutionFactoryImpl()
 
-const deviceType: ref<DeviceType> = ref(DeviceType.SENSOR)
-const code: ref<String> = ref('')
-const ipAddress: ref<String> = ref('')
+const ipAddress: ref<String> = ref(device.ipAddress)
 const width: ref<number> = ref()
 const height: ref<number> = ref()
-const intervalMillis: ref<number> = ref()
+const intervalMillis: ref<number> = ref((device as Sensor).intervalMillis)
 const measures: ref<Measure[]> = ref([Measure.TEMPERATURE])
+
 const options = ref([
   {
     label: 'Temperature',
@@ -40,18 +39,18 @@ const options = ref([
   }
 ])
 
-const updateDevice = () => {
-  if (deviceType.value == DeviceType.SENSOR) {
+const updateDevice = (device: Device) => {
+  if (device.deviceId.type == DeviceType.SENSOR) {
     const updatedSensor: Sensor = deviceFactory.createSensor(
-      deviceIdFactory.createSensorId(code.value),
+      deviceIdFactory.createSensorId(device.deviceId.code),
       ipAddress.value,
       intervalMillis.value,
       measures.value
     )
     emit('update-sensor', updatedSensor)
-  } else if (deviceType.value == DeviceType.CAMERA) {
+  } else if (device.deviceId.type == DeviceType.CAMERA) {
     const updatedCamera: Camera = deviceFactory.createCamera(
-      deviceIdFactory.createCameraId(code.value),
+      deviceIdFactory.createCameraId(device.deviceId.code),
       ipAddress.value,
       resolutionFactory.createResolution(width.value, height.value)
     )
@@ -66,19 +65,15 @@ const updateDevice = () => {
       <q-card-section>
         <h3 class="text-h5">Update Device:</h3>
       </q-card-section>
-      <q-card-section class="q-gutter-md">
-        <q-radio dense v-model="deviceType" :val="DeviceType.SENSOR" disabled label="Sensor" />
-        <q-radio dense v-model="deviceType" :val="DeviceType.CAMERA" disabled label="Camera" />
-      </q-card-section>
       <q-card-section class="q-pt-none">
         <label>Code</label>
         <q-input dense v-model="device.deviceId.code" disable autofocus />
       </q-card-section>
       <q-card-section class="q-pt-none">
         <label>IP Address</label>
-        <q-input dense v-model="device.ipAddress" />
+        <q-input dense v-model="ipAddress" />
       </q-card-section>
-      <div v-if="deviceType == DeviceType.CAMERA">
+      <div v-if="device.deviceId.type == DeviceType.CAMERA">
         <q-card-section class="q-pt-none resolution">
           <label>Resolution</label>
           <q-input type="number" v-model="width" placeholder="Width" />
@@ -87,17 +82,17 @@ const updateDevice = () => {
         </q-card-section>
       </div>
 
-      <div v-if="deviceType == DeviceType.SENSOR">
+      <div v-if="device.deviceId.type == DeviceType.SENSOR">
         <q-card-section class="q-pt-none">
           <label>Acquisition rate (ms)</label>
-          <q-input type="number" v-model="(device as Sensor).intervalMillis" />
+          <q-input type="number" v-model="intervalMillis" value="2" />
         </q-card-section>
         <q-option-group style="display: flex" v-model="measures" :options="options" type="checkbox" />
       </div>
 
       <q-card-actions align="right">
         <q-btn flat label="Cancel" v-close-popup class="text-primary" />
-        <q-btn flat label="OK" v-close-popup class="bg-white text-teal" @click="updateDevice" />
+        <q-btn flat label="OK" v-close-popup class="bg-white text-teal" @click="updateDevice(device)" />
       </q-card-actions>
     </q-card>
   </q-dialog>

From 3da89b99c2ce7f9c760298d980a33f07d6f49370 Mon Sep 17 00:00:00 2001
From: Alberto Paganelli <alberto.paganelli3@studio.unibo.it>
Date: Tue, 30 Jan 2024 18:50:15 +0100
Subject: [PATCH 3/5] feature: update cameras

---
 .../src/components/devices/DeviceBadge.vue    | 11 +++----
 .../components/devices/UpdateDevicePopup.vue  | 29 +++++++++----------
 2 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/frontend/src/components/devices/DeviceBadge.vue b/frontend/src/components/devices/DeviceBadge.vue
index 49200855a..2a7f0e70a 100644
--- a/frontend/src/components/devices/DeviceBadge.vue
+++ b/frontend/src/components/devices/DeviceBadge.vue
@@ -37,6 +37,7 @@ const updateSensor = async (sensor: Sensor) => {
       })
     })
       .then(async (res: any) => {
+        alert("devo aggiornare i devices")
         //TODO A CONFIRM POPUP
        // await getSensors()
       })
@@ -46,18 +47,18 @@ const updateSensor = async (sensor: Sensor) => {
 }
 
 const updateCamera = async (camera: Camera) => {
-  console.log(camera)
-    await RequestHelper.post(`http://${monitoringHost}:${monitoringPort}/devices/cameras`, {
+    await RequestHelper.put(`http://${monitoringHost}:${monitoringPort}/devices/cameras`, {
       code: camera.deviceId.code,
       ipAddress: camera.ipAddress,
       resolution: {
-        width: camera.resolution.width,
-        height: camera.resolution.height
+        width: parseInt(camera.resolution.width.toString()),
+        height: parseInt(camera.resolution.height.toString())
       }
     })
       .then(async (res: any) => {
+        alert("devo aggiornare i devices")
         //TODO A CONFIRM POPUP
-        await getCameras()
+        //await getCameras()
       })
       .catch(error => {
         console.log(error)
diff --git a/frontend/src/components/devices/UpdateDevicePopup.vue b/frontend/src/components/devices/UpdateDevicePopup.vue
index 0c3c808f3..f77186d1d 100644
--- a/frontend/src/components/devices/UpdateDevicePopup.vue
+++ b/frontend/src/components/devices/UpdateDevicePopup.vue
@@ -18,11 +18,9 @@ const deviceIdFactory: DeviceIdFactory = new DeviceIdFactoryImpl()
 const deviceFactory: DeviceFactory = new DeviceFactoryImpl()
 const resolutionFactory: ResolutionFactory = new ResolutionFactoryImpl()
 
-const ipAddress: ref<String> = ref(device.ipAddress)
-const width: ref<number> = ref()
-const height: ref<number> = ref()
-const intervalMillis: ref<number> = ref((device as Sensor).intervalMillis)
-const measures: ref<Measure[]> = ref([Measure.TEMPERATURE])
+const measures: ref<Measure[]> = ref([])
+
+console.log((device as Camera).resolution)
 
 const options = ref([
   {
@@ -39,20 +37,21 @@ const options = ref([
   }
 ])
 
-const updateDevice = (device: Device) => {
+const updateDevice = () => {
+  console.log(device)
   if (device.deviceId.type == DeviceType.SENSOR) {
     const updatedSensor: Sensor = deviceFactory.createSensor(
       deviceIdFactory.createSensorId(device.deviceId.code),
-      ipAddress.value,
-      intervalMillis.value,
+      device.ipAddress,
+      (device as Sensor).intervalMillis,
       measures.value
     )
     emit('update-sensor', updatedSensor)
   } else if (device.deviceId.type == DeviceType.CAMERA) {
     const updatedCamera: Camera = deviceFactory.createCamera(
       deviceIdFactory.createCameraId(device.deviceId.code),
-      ipAddress.value,
-      resolutionFactory.createResolution(width.value, height.value)
+      device.ipAddress,
+      resolutionFactory.createResolution((device as Camera).resolution.width, (device as Camera).resolution.height)
     )
     emit('update-camera', updatedCamera)
   }
@@ -71,28 +70,28 @@ const updateDevice = (device: Device) => {
       </q-card-section>
       <q-card-section class="q-pt-none">
         <label>IP Address</label>
-        <q-input dense v-model="ipAddress" />
+        <q-input dense v-model="device.ipAddress" />
       </q-card-section>
       <div v-if="device.deviceId.type == DeviceType.CAMERA">
         <q-card-section class="q-pt-none resolution">
           <label>Resolution</label>
-          <q-input type="number" v-model="width" placeholder="Width" />
+          <q-input type="number" v-model="(device as Camera).resolution.width" placeholder="Width" />
           <span>x</span>
-          <q-input type="number" v-model="height" placeholder="Height" />
+          <q-input type="number" v-model="(device as Camera).resolution.height" placeholder="Height" />
         </q-card-section>
       </div>
 
       <div v-if="device.deviceId.type == DeviceType.SENSOR">
         <q-card-section class="q-pt-none">
           <label>Acquisition rate (ms)</label>
-          <q-input type="number" v-model="intervalMillis" value="2" />
+          <q-input type="number" v-model="(device as Sensor).intervalMillis" value="2" />
         </q-card-section>
         <q-option-group style="display: flex" v-model="measures" :options="options" type="checkbox" />
       </div>
 
       <q-card-actions align="right">
         <q-btn flat label="Cancel" v-close-popup class="text-primary" />
-        <q-btn flat label="OK" v-close-popup class="bg-white text-teal" @click="updateDevice(device)" />
+        <q-btn flat label="OK" v-close-popup class="bg-white text-teal" @click="updateDevice()" />
       </q-card-actions>
     </q-card>
   </q-dialog>

From 23b406589611fbbe33a7389491dfdaf85fc7cce5 Mon Sep 17 00:00:00 2001
From: Alberto Paganelli <alberto.paganelli3@studio.unibo.it>
Date: Tue, 30 Jan 2024 19:06:20 +0100
Subject: [PATCH 4/5] feat: update devices

---
 .../src/components/devices/DeviceBadge.vue    | 72 ++++++++-----------
 .../components/devices/UpdateDevicePopup.vue  |  5 +-
 frontend/src/views/DevicesView.vue            |  7 +-
 3 files changed, 33 insertions(+), 51 deletions(-)

diff --git a/frontend/src/components/devices/DeviceBadge.vue b/frontend/src/components/devices/DeviceBadge.vue
index 2a7f0e70a..1092160f6 100644
--- a/frontend/src/components/devices/DeviceBadge.vue
+++ b/frontend/src/components/devices/DeviceBadge.vue
@@ -2,10 +2,10 @@
 import type { Device, Sensor, Camera } from '@domain/device/core'
 import { Measure, DeviceType } from '@domain/device/core'
 import { getMeasureColor } from '@/utils/MeasureUtils'
-import { ref } from "vue";
-import UpdateDevicePopup from "@/components/devices/UpdateDevicePopup.vue";
-import RequestHelper, { monitoringHost, monitoringPort } from "@/utils/RequestHelper";
-import { MeasureConverter } from "domain/dist/utils";
+import { ref } from 'vue'
+import UpdateDevicePopup from '@/components/devices/UpdateDevicePopup.vue'
+import RequestHelper, { monitoringHost, monitoringPort } from '@/utils/RequestHelper'
+import { MeasureConverter } from 'domain/dist/utils'
 
 defineProps<{
   device: Device
@@ -13,56 +13,40 @@ defineProps<{
 
 const updatePopupVisible = ref<boolean>(false)
 
-const openPopup = (device: Device) => {
-  updatePopupVisible.value = true
-  console.log(device)
-}
-
 const updateSensor = async (sensor: Sensor) => {
-  console.log("sensor")
-  console.log(sensor)
-  console.log({
+  await RequestHelper.put(`http://${monitoringHost}:${monitoringPort}/devices/sensors`, {
     code: sensor.deviceId.code,
     ipAddress: sensor.ipAddress,
     intervalMillis: sensor.intervalMillis,
     measures: sensor.measures.map((m: Measure) => {
       return MeasureConverter.convertToString(m)
-    })})
-    await RequestHelper.put(`http://${monitoringHost}:${monitoringPort}/devices/sensors`, {
-      code: sensor.deviceId.code,
-      ipAddress: sensor.ipAddress,
-      intervalMillis: sensor.intervalMillis,
-      measures: sensor.measures.map((m: Measure) => {
-        return MeasureConverter.convertToString(m)
-      })
     })
-      .then(async (res: any) => {
-        alert("devo aggiornare i devices")
-        //TODO A CONFIRM POPUP
-       // await getSensors()
-      })
-      .catch(error => {
-        console.log(error)
-      })
+  })
+    .then(async (res: any) => {
+      alert('devo aggiornare i devices')
+      //TODO A CONFIRM POPUP
+    })
+    .catch(error => {
+      console.log(error)
+    })
 }
 
 const updateCamera = async (camera: Camera) => {
-    await RequestHelper.put(`http://${monitoringHost}:${monitoringPort}/devices/cameras`, {
-      code: camera.deviceId.code,
-      ipAddress: camera.ipAddress,
-      resolution: {
-        width: parseInt(camera.resolution.width.toString()),
-        height: parseInt(camera.resolution.height.toString())
-      }
+  await RequestHelper.put(`http://${monitoringHost}:${monitoringPort}/devices/cameras`, {
+    code: camera.deviceId.code,
+    ipAddress: camera.ipAddress,
+    resolution: {
+      width: parseInt(camera.resolution.width.toString()),
+      height: parseInt(camera.resolution.height.toString())
+    }
+  })
+    .then(async (res: any) => {
+      alert('devo aggiornare i devices')
+      //TODO A CONFIRM POPUP
+    })
+    .catch(error => {
+      console.log(error)
     })
-      .then(async (res: any) => {
-        alert("devo aggiornare i devices")
-        //TODO A CONFIRM POPUP
-        //await getCameras()
-      })
-      .catch(error => {
-        console.log(error)
-      })
 }
 </script>
 
@@ -108,7 +92,7 @@ const updateCamera = async (camera: Camera) => {
           <q-tooltip :offset="[0, 8]">Enable</q-tooltip>
         </div>
         <div>
-          <q-btn color="secondary" icon="edit" @click="updatePopupVisible = true"/>
+          <q-btn color="secondary" icon="edit" @click="updatePopupVisible = true" />
           <q-tooltip :offset="[0, 8]">Edit</q-tooltip>
         </div>
         <div>
diff --git a/frontend/src/components/devices/UpdateDevicePopup.vue b/frontend/src/components/devices/UpdateDevicePopup.vue
index f77186d1d..cca162a7a 100644
--- a/frontend/src/components/devices/UpdateDevicePopup.vue
+++ b/frontend/src/components/devices/UpdateDevicePopup.vue
@@ -51,7 +51,10 @@ const updateDevice = () => {
     const updatedCamera: Camera = deviceFactory.createCamera(
       deviceIdFactory.createCameraId(device.deviceId.code),
       device.ipAddress,
-      resolutionFactory.createResolution((device as Camera).resolution.width, (device as Camera).resolution.height)
+      resolutionFactory.createResolution(
+        (device as Camera).resolution.width,
+        (device as Camera).resolution.height
+      )
     )
     emit('update-camera', updatedCamera)
   }
diff --git a/frontend/src/views/DevicesView.vue b/frontend/src/views/DevicesView.vue
index 4feb5e9df..1060e396b 100644
--- a/frontend/src/views/DevicesView.vue
+++ b/frontend/src/views/DevicesView.vue
@@ -15,14 +15,11 @@ import {
   EnvironmentDataFactoryImpl,
   ResolutionFactoryImpl
 } from '@domain/device/factories'
-import type { Camera, Device, Sensor } from "@domain/device/core";
+import type { Camera, Device, Sensor } from '@domain/device/core'
 import { Measure } from '@domain/device/core'
 import NewDevicePopup from '@/components/devices/NewDevicePopup.vue'
 import RequestHelper, { monitoringHost, monitoringPort } from '@/utils/RequestHelper'
 import { MeasureConverter } from 'domain/dist/utils'
-import UpdateDevicePopup from "@/components/devices/UpdateDevicePopup.vue";
-
-const environmentDataFactory: EnvironmentDataFactory = new EnvironmentDataFactoryImpl()
 
 const deviceIdFactory: DeviceIdFactory = new DeviceIdFactoryImpl()
 const deviceFactory: DeviceFactory = new DeviceFactoryImpl()
@@ -149,7 +146,6 @@ onMounted(async () => {
 })
 
 const newPopupVisible = ref<boolean>(false)
-
 </script>
 
 <template>
@@ -183,7 +179,6 @@ const newPopupVisible = ref<boolean>(false)
     @insert-sensor="insertSensor"
     @insert-camera="insertCamera"
   ></new-device-popup>
-
 </template>
 
 <style scoped lang="scss">

From f4bcf5f0f312a63ab1b098a3012f35db5beea0a6 Mon Sep 17 00:00:00 2001
From: Alberto Paganelli <alberto.paganelli3@studio.unibo.it>
Date: Wed, 31 Jan 2024 11:26:37 +0100
Subject: [PATCH 5/5] other: removed warning, merged delete functions

---
 .../src/components/devices/DeviceBadge.vue    |  8 ++--
 .../security-rule/SecurityRuleBadge.vue       | 14 +++----
 frontend/src/views/DevicesView.vue            | 40 ++++---------------
 frontend/src/views/SecurityRuleView.vue       |  4 +-
 4 files changed, 20 insertions(+), 46 deletions(-)

diff --git a/frontend/src/components/devices/DeviceBadge.vue b/frontend/src/components/devices/DeviceBadge.vue
index 1092160f6..f8b114264 100644
--- a/frontend/src/components/devices/DeviceBadge.vue
+++ b/frontend/src/components/devices/DeviceBadge.vue
@@ -11,6 +11,10 @@ defineProps<{
   device: Device
 }>()
 
+defineEmits<{
+  (e: 'delete-device'): void
+}>()
+
 const updatePopupVisible = ref<boolean>(false)
 
 const updateSensor = async (sensor: Sensor) => {
@@ -100,9 +104,7 @@ const updateCamera = async (camera: Camera) => {
             color="negative"
             icon="delete"
             @click="
-              device.deviceId.type == DeviceType.SENSOR
-                ? $emit('delete-sensor', device)
-                : $emit('delete-camera', device)
+              device.deviceId.type == DeviceType.SENSOR ? $emit('delete-device') : $emit('delete-device')
             "
           />
           <q-tooltip :offset="[0, 8]">Delete</q-tooltip>
diff --git a/frontend/src/components/security-rule/SecurityRuleBadge.vue b/frontend/src/components/security-rule/SecurityRuleBadge.vue
index 37b64d5fd..d38a83527 100644
--- a/frontend/src/components/security-rule/SecurityRuleBadge.vue
+++ b/frontend/src/components/security-rule/SecurityRuleBadge.vue
@@ -11,6 +11,10 @@ import {
 defineProps<{
   securityRule: SecurityRule
 }>()
+
+defineEmits<{
+  (e: 'delete-security-rule'): void
+}>()
 </script>
 
 <template>
@@ -60,15 +64,7 @@ defineProps<{
           <q-tooltip :offset="[0, 8]">Edit</q-tooltip>
         </div>
         <div>
-          <q-btn
-            color="negative"
-            icon="delete"
-            @click="
-              securityRule.deviceId.type == DeviceType.SENSOR
-                ? $emit('delete-exceeding-rule', securityRule)
-                : $emit('delete-intrusion-rule', securityRule)
-            "
-          />
+          <q-btn color="negative" icon="delete" @click="$emit('delete-security-rule')" />
           <q-tooltip :offset="[0, 8]">Delete</q-tooltip>
         </div>
       </li>
diff --git a/frontend/src/views/DevicesView.vue b/frontend/src/views/DevicesView.vue
index 1060e396b..1f40890fb 100644
--- a/frontend/src/views/DevicesView.vue
+++ b/frontend/src/views/DevicesView.vue
@@ -3,23 +3,13 @@
 import { onMounted, ref } from 'vue'
 
 import DeviceBadge from '@/components/devices/DeviceBadge.vue'
-import type {
-  DeviceFactory,
-  DeviceIdFactory,
-  EnvironmentDataFactory,
-  ResolutionFactory
-} from '@domain/device/factories'
-import {
-  DeviceFactoryImpl,
-  DeviceIdFactoryImpl,
-  EnvironmentDataFactoryImpl,
-  ResolutionFactoryImpl
-} from '@domain/device/factories'
+import type { DeviceFactory, DeviceIdFactory, ResolutionFactory } from '@domain/device/factories'
+import { DeviceFactoryImpl, DeviceIdFactoryImpl, ResolutionFactoryImpl } from '@domain/device/factories'
 import type { Camera, Device, Sensor } from '@domain/device/core'
 import { Measure } from '@domain/device/core'
 import NewDevicePopup from '@/components/devices/NewDevicePopup.vue'
 import RequestHelper, { monitoringHost, monitoringPort } from '@/utils/RequestHelper'
-import { MeasureConverter } from 'domain/dist/utils'
+import { DeviceTypeConverter, MeasureConverter } from 'domain/dist/utils'
 
 const deviceIdFactory: DeviceIdFactory = new DeviceIdFactoryImpl()
 const deviceFactory: DeviceFactory = new DeviceFactoryImpl()
@@ -33,7 +23,6 @@ const getSensors = async () => {
     .then((res: any) => {
       sensors.value = []
       for (let i = 0; i < res.data.length; i++) {
-        console.log(res.data[i])
         sensors.value.push(composeSensor(res.data[i]))
       }
     })
@@ -55,7 +44,6 @@ const getCameras = async () => {
 }
 
 const composeSensor = (sensor: any): Sensor => {
-  console.log(composeMeasure(sensor.measures))
   return deviceFactory.createSensor(
     deviceIdFactory.createSensorId(sensor._id.code),
     sensor.ipAddress,
@@ -114,10 +102,10 @@ const insertCamera = async (camera: Camera) => {
     })
 }
 
-const deleteSensor = async (sensor: Sensor) => {
-  console.log(sensor.deviceId.type, sensor.deviceId.code)
+const deleteDevice = async (device: Device) => {
   await RequestHelper.delete(
-    `http://${monitoringHost}:${monitoringPort}/devices/sensors/` + sensor.deviceId.code
+    `http://${monitoringHost}:${monitoringPort}/devices/${DeviceTypeConverter.convertToString(device.deviceId.type).toLowerCase()}s/` +
+      device.deviceId.code
   )
     .then(async (res: any) => {
       //TODO A CONFIRM POPUP
@@ -127,18 +115,6 @@ const deleteSensor = async (sensor: Sensor) => {
       console.log(error)
     })
 }
-const deleteCamera = async (camera: Camera) => {
-  await RequestHelper.delete(
-    `http://${monitoringHost}:${monitoringPort}/devices/cameras/` + camera.deviceId.code
-  )
-    .then(async (res: any) => {
-      //TODO A CONFIRM POPUP
-      await getCameras()
-    })
-    .catch(error => {
-      console.log(error)
-    })
-}
 
 onMounted(async () => {
   await getSensors()
@@ -160,7 +136,7 @@ const newPopupVisible = ref<boolean>(false)
       v-for="sensor in sensors"
       :key="sensor.deviceId"
       :device="sensor"
-      @delete-sensor="deleteSensor"
+      @delete-device="deleteDevice(sensor)"
     />
   </div>
 
@@ -170,7 +146,7 @@ const newPopupVisible = ref<boolean>(false)
       v-for="camera in cameras"
       :key="camera.deviceId"
       :device="camera"
-      @delete-camera="deleteCamera"
+      @delete-device="deleteDevice(camera)"
     />
   </div>
 
diff --git a/frontend/src/views/SecurityRuleView.vue b/frontend/src/views/SecurityRuleView.vue
index d50eec00a..dce769af8 100644
--- a/frontend/src/views/SecurityRuleView.vue
+++ b/frontend/src/views/SecurityRuleView.vue
@@ -175,7 +175,7 @@ const popupVisible = ref<boolean>(false)
     <security-rule-badge
       v-for="exceedingRule in exceedingsSecurityRules"
       :security-rule="exceedingRule"
-      @delete-exceeding-rule="deleteExceedingRule(exceedingRule)"
+      @delete-security-rule="deleteExceedingRule(exceedingRule)"
     />
   </div>
 
@@ -184,7 +184,7 @@ const popupVisible = ref<boolean>(false)
     <security-rule-badge
       v-for="intrusionRule in intrusionsSecurityRules"
       :security-rule="intrusionRule"
-      @delete-intrusion-rule="deleteIntrusionRule(intrusionRule)"
+      @delete-security-rule="deleteIntrusionRule(intrusionRule)"
     />
   </div>