Merge pull request #27 from Mala1180/feature/update-device-rules

feature/update-device-rules
revue-org · Jan 31, 2024 · 1ac1f84 · 1ac1f84
2 parents a54ce31 + f4bcf5f
commit 1ac1f84
Show file tree

Hide file tree

Showing 6 changed files with 190 additions and 59 deletions.
diff --git a/frontend/src/components/devices/DeviceBadge.vue b/frontend/src/components/devices/DeviceBadge.vue
@@ -2,10 +2,56 @@
 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'
 
 defineProps<{
   device: Device
 }>()
+
+defineEmits<{
+  (e: 'delete-device'): void
+}>()
+
+const updatePopupVisible = ref<boolean>(false)
+
+const updateSensor = async (sensor: Sensor) => {
+  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
+    })
+    .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())
+    }
+  })
+    .then(async (res: any) => {
+      alert('devo aggiornare i devices')
+      //TODO A CONFIRM POPUP
+    })
+    .catch(error => {
+      console.log(error)
+    })
+}
 </script>
 
 <template>
@@ -50,24 +96,28 @@ 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>
           <q-btn
             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>
         </div>
       </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
@@ -7,7 +7,6 @@ import { DeviceFactoryImpl, DeviceIdFactoryImpl, ResolutionFactoryImpl } from '@
 import { MeasureConverter } from 'domain/dist/utils'
 
 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
@@ -0,0 +1,114 @@
+<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'
+
+const { device } = 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 measures: ref<Measure[]> = ref([])
+
+console.log((device as Camera).resolution)
+
+const options = ref([
+  {
+    label: 'Temperature',
+    value: Measure.TEMPERATURE
+  },
+  {
+    label: 'Humidity',
+    value: Measure.HUMIDITY
+  },
+  {
+    label: 'Pressure',
+    value: Measure.PRESSURE
+  }
+])
+
+const updateDevice = () => {
+  console.log(device)
+  if (device.deviceId.type == DeviceType.SENSOR) {
+    const updatedSensor: Sensor = deviceFactory.createSensor(
+      deviceIdFactory.createSensorId(device.deviceId.code),
+      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),
+      device.ipAddress,
+      resolutionFactory.createResolution(
+        (device as Camera).resolution.width,
+        (device as Camera).resolution.height
+      )
+    )
+    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-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="device.deviceId.type == DeviceType.CAMERA">
+        <q-card-section class="q-pt-none resolution">
+          <label>Resolution</label>
+          <q-input type="number" v-model="(device as Camera).resolution.width" placeholder="Width" />
+          <span>x</span>
+          <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="(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()" />
+      </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/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
@@ -2,26 +2,14 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
 
-import SensorBadge 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 { Camera, Sensor } from '@domain/device/core'
+import DeviceBadge from '@/components/devices/DeviceBadge.vue'
+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'
-
-const environmentDataFactory: EnvironmentDataFactory = new EnvironmentDataFactoryImpl()
+import { DeviceTypeConverter, MeasureConverter } from 'domain/dist/utils'
 
 const deviceIdFactory: DeviceIdFactory = new DeviceIdFactoryImpl()
 const deviceFactory: DeviceFactory = new DeviceFactoryImpl()
@@ -35,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]))
       }
     })
@@ -57,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,
@@ -116,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
@@ -129,57 +115,43 @@ 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()
   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"
-      @delete-sensor="deleteSensor"
+      @delete-device="deleteDevice(sensor)"
     />
   </div>
 
   <h2>Cameras</h2>
   <div class="cameras-container">
-    <sensor-badge
+    <device-badge
       v-for="camera in cameras"
       :key="camera.deviceId"
       :device="camera"
-      @delete-camera="deleteCamera"
+      @delete-device="deleteDevice(camera)"
     />
   </div>
 
-  <!--  to check!!-->
   <new-device-popup
-    v-model="popupVisible"
-    @update-devices="getSensors"
+    v-model="newPopupVisible"
     @insert-sensor="insertSensor"
     @insert-camera="insertCamera"
   ></new-device-popup>

diff --git 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>