devices half made

backend/Api/BusinessLogic/DeviceLogic.cs

@@ -29,12 +29,21 @@ namespace Api.BusinessLogic
             return new OkObjectResult(devices);
         }
 
-        public async Task<IActionResult> AddDevice(Device device, int userId)
+        public async Task<IActionResult> AddDevice(string referenceId, int userId)
         {
             var profile = await _dbAccess.ReadUser(userId);
 
             if (profile == null) { return new ConflictObjectResult(new { message = "Could not find user" }); }
 
+            Device device = new Device
+            {
+                Name = "Undefined",
+                TempHigh = 0,
+                TempLow = 0,
+                ReferenceId = referenceId,
+                Logs = new List<TemperatureLogs>(),
+            };
+
             return await _dbAccess.CreateDevice(device, userId);
         }
 

backend/Api/Controllers/DeviceController.cs

@@ -30,9 +30,9 @@ namespace Api.Controllers
 
         [Authorize]
         [HttpPost("adddevice/{userId}")]
-        public async Task<IActionResult> AddDevice([FromBody] Device device, int userId)
+        public async Task<IActionResult> AddDevice([FromBody] string referenceId, int userId)
         {
-            return await _deviceLogic.AddDevice(device, userId);
+            return await _deviceLogic.AddDevice(referenceId, userId);
         }
 
         [Authorize]
@@ -48,5 +48,13 @@ namespace Api.Controllers
         {
             return await _deviceLogic.EditDevice(device, deviceId);
         }
+
+
+        [Authorize]
+        [HttpDelete("Delete/{referenceId}")]
+        public async Task<IActionResult> EditDevice(string referenceId)
+        {
+            return await _deviceLogic.EditDevice(referenceId);
+        }
     }
 }

frontend/devices/index.html

@@ -24,16 +24,84 @@
             </div>
           </div>
           <div class="addDeviceContainer">
-            <button class="addDevice">Add Device</button>
+            <button id="addDevice">Add Device</button>
+          </div>
+          <div class="tableConatiner">
+            <table>
+              <tr>
+                <th>Id</th>
+                <th>Placement(name)</th>
+                <th>Set Temp High</th>
+                <th>Set Temp Low</th>
+                <th>Latest Meassurement</th>
+                <th></th>
+              </tr>
+              <tbody id="deviceTable"></tbody>
+            </table>
           </div>
-      <table>
-        <tr>
-          <th>Id</th>
-          <th>Placement</th>
-          <th>Latest Meassurement</th>
-        </tr>
-        <tbody id="deviceTable"></tbody>
-      </table>
     </div>
+
+
+    <div id="deleteModal" class="modal">
+      <form class="modal-content">
+        <div class="container">
+          <h1 class="deviceHeader" id="deleteDeviceHeader"></h1>
+          <p>Are you sure you want to delete this device from your account?</p>
+        
+          <div class="clearfix">
+            <button type="button" class="cancelbtn">Cancel</button>
+            <button type="button" id="deletebtn">Delete</button>
+          </div>
+        </div>
+      </form>
+    </div>
+
+    <div id="editModal" class="modal">
+      <div class="modal-content">
+        <div class="container">
+          <h1 class="deviceHeader" id="editDeviceHeader"></h1>
+          <form id="editForm">
+                <div class="form-container">
+                    <label for="name"><b>Name</b></label>
+                    <input type="text" placeholder="Enter a name for the placement" id="name" required>
+  
+                    <label for="tempHigh"><b>High Temperature</b></label>
+                    <input type="text" placeholder="Edit the high temperature" id="tempHigh" required>
+    
+                    <label for="tempLow"><b>Low Temperature</b></label>
+                    <input type="text" placeholder="Edit the low temperature" id="tempLow" required>
+    
+                    <div class="clearfix">
+                      <button type="button" class="cancelbtn">Cancel</button>
+                      <button type="button" id="editbtn">Save Changes</button>
+                    </div>
+    
+                    <div id="form-error"></div>
+                </div>
+            </form>
+        </div>
+      </div>
+  </div>
+
+  <div id="addModal" class="modal">
+    <div class="modal-content">
+      <div class="container">
+        <h1 class="deviceHeader">Add Device</h1>
+        <form id="editForm">
+              <div class="form-container">
+                  <label for="referenceId"><b>Device Id</b></label>
+                  <input type="text" placeholder="Enter the device Id" id="referenceId" required>  
+                  <div id="form-error"></div>
+              </div>
+              <div class="clearfix">
+                <button type="button" class="cancelbtn">Cancel</button>
+                <button type="button" id="addbtn">Add</button>
+              </div>
+
+              <div id="form-error"></div>
+          </form>
+      </div>
+    </div>
+</div>
   </body>
 </html>

frontend/home/index.html

@@ -26,16 +26,18 @@
       <div class="chartContainer">
         <canvas id="myChart" style="width: 49%; height: 49%;"></canvas>
       </div>
-      <table>
-        <tr>
-          <th>Name</th>
-          <th>Temperature</th>
-          <th>Date</th>
-          <th>TempHigh</th>
-          <th>TempLow</th>
-        </tr>
-        <tbody id="TemperatureTable"></tbody>
-      </table>
+      <div class="tableConatiner">
+        <table>
+          <tr>
+            <th>Name</th>
+            <th>Temperature</th>
+            <th>Date</th>
+            <th>TempHigh</th>
+            <th>TempLow</th>
+          </tr>
+          <tbody id="TemperatureTable"></tbody>
+        </table>
+      </div>
     </div>
   </body>
 </html>

frontend/mockdata/devices.mockdata.js

@@ -0,0 +1,3 @@
+export const devices = [
+    {referenceId: "DKOFG", name: "Kitchen", tempHigh: 23.0, tempLow: 23.0, latestLog: { id: 1, temperature: 18.9, date: "2025-03-19T17:00:00Z", tempHigh: 22.0, tempLow: 18.0 }}
+]

frontend/scripts/devices.js

@@ -1,26 +1,90 @@
-import { getDevicesOnUserId } from "./services/devices.service.js";
+import { getDevicesOnUserId, deleteDevice, update, add } from "./services/devices.service.js";
+import { devices } from "../mockdata/devices.mockdata.js";
 
-let idlocation = localStorage.getItem("rememberLogin")
-let id;
-if(idlocation){
-    id = localStorage.getItem("id");
-}   
-else{
-    id = localStorage.getItem("id");
-}
-getDevicesOnUserId(id).then(res => {
-    buildTable(res)
-})
+let id = localStorage.getItem("id");
+// getDevicesOnUserId(id).then(res => {
+//     buildTable(res)
+// })
+buildTable(devices);
 
+let selectedReferenceId = null; // Store the selected referenceId
 
 function buildTable(data) {
-    var table = document.getElementById(`deviceTable`);
+    var table = document.getElementById("deviceTable");
+    table.innerHTML = ""; // Clear existing rows before adding new ones
+
     data.forEach((device) => {
-      var row = `  <tr>
-                          <td>Name</td>
-                          <td class="${color}">${device.id}</td>
-                          <td>${device.name}</td>
-                      </tr>`;
-      table.innerHTML += row;
+        var row = document.createElement("tr");
+        row.innerHTML = `
+            <td>${device.referenceId}</td>
+            <td>${device.name}</td>
+            <td>${device.tempHigh}</td>
+            <td>${device.tempLow}</td>
+            <td>Temperature: ${device.latestLog.temperature}°C, Date: ${device.latestLog.date}</td>
+            <td style="width: 90px;">
+                <img class="editIconbtn tableIcons" src="/img/Edit.png" data-referenceid="${device.referenceId}">
+                <img class="trashBtn tableIcons" src="/img/Trash.png" data-referenceid="${device.referenceId}">
+            </td>
+        `;
+        table.appendChild(row);
     });
-  }
+
+    document.getElementById("addDevice").onclick = () => {
+      document.getElementById("addModal").style.display = "block";
+
+    }
+
+    // Attach click event to all trash buttons
+    document.querySelectorAll(".trashBtn").forEach((btn) => {
+        btn.onclick = function () {
+            selectedReferenceId = this.getAttribute("data-referenceid"); // Store referenceId
+            document.getElementById("deleteDeviceHeader").innerHTML = `Delete Device ${selectedReferenceId}`;
+            document.getElementById("deleteModal").style.display = "block";
+        };
+    });
+
+    // Attach click event to all trash buttons
+    document.querySelectorAll(".editIconbtn").forEach((btn) => {
+      btn.onclick = function () {
+          selectedReferenceId = this.getAttribute("data-referenceid"); // Store referenceId
+          document.getElementById("editDeviceHeader").innerHTML = `Edit Device ${selectedReferenceId}`;
+          document.getElementById("editModal").style.display = "block";
+      };
+  });
+}
+
+document.querySelectorAll(".cancelbtn").forEach(button => {
+  button.onclick = () => {
+      document.getElementById("deleteModal").style.display = "none";
+      document.getElementById("editModal").style.display = "none";
+      document.getElementById("addModal").style.display = "none";
+
+  };
+});
+// Delete button logic
+document.getElementById("deletebtn").onclick = () => {
+    if (selectedReferenceId) {
+        deleteDevice(selectedReferenceId); // Call delete function with referenceId
+        document.getElementById("deleteModal").style.display = "none";
+        window.location.reload();
+    }
+};
+
+document.getElementById("addbtn").onclick = () => {
+    const referenceId = document.getElementById("referenceId").value;
+      add(referenceId); // Call delete function with referenceId
+      document.getElementById("deleteModal").style.display = "none";
+      window.location.reload();
+};
+
+document.getElementById("editbtn").onclick = () => {
+  if (selectedReferenceId) {
+    const name = document.getElementById("name").value;
+    const tempHigh = document.getElementById("tempHigh").value;
+    const tempLow = document.getElementById("tempLow").value;
+
+    update(selectedReferenceId, name, tempHigh, tempLow); // Call delete function with referenceId
+      document.getElementById("deleteModal").style.display = "none";
+      window.location.reload();
+  }
+};

frontend/scripts/profile.js

@@ -22,11 +22,11 @@ table.innerHTML += `
 
 var pswModal = document.getElementById("PasswordModal");
 var editModal = document.getElementById("editModal");
-var editBtn = document.getElementById("openEditModal");
+var editIconbtn = document.getElementById("openEditModal");
 var passwordBtn = document.getElementById("openPasswordModal");
 
 // Open modals
-editBtn.onclick = () => (editModal.style.display = "block");
+editIconbtn.onclick = () => (editModal.style.display = "block");
 passwordBtn.onclick = () => (pswModal.style.display = "block");
 
 // Close modals when clicking on any close button

frontend/scripts/services/devices.service.js

@@ -12,13 +12,39 @@ export function getDevicesOnUserId(userId) {
     .catch(error => console.error("Error:", error));
 }
 
-export function update(ids) {
-    fetch(`${address}/get-on-user-id`, {
-        method: "PATCH",
+export function add(id) {
+    fetch(`${address}/device`, {
+        method: "CREATE",
+        headers: {
+            "Content-Type": "application/json"
+        },
+        body: JSON.stringify({ referenceId: id})
+    })
+    .then(response => response.json())
+    .then(data => console.log("Success:", data))
+    .catch(error => console.error("Error:", error));
+}
+
+export function update(id, name, tempHigh, tempLow) {
+    fetch(`${address}/device/${id}`, {
+        method: "PUT",
+        headers: {
+            "Content-Type": "application/json"
+        },
+        body: JSON.stringify({ name: name, tempHigh: tempHigh, tempLow: tempLow })
+    })
+    .then(response => response.json())
+    .then(data => console.log("Success:", data))
+    .catch(error => console.error("Error:", error));
+}
+
+export function deleteDevice(referenceId) {
+    console.log(referenceId)
+    fetch(`${address}/device/${referenceId}`, {
+        method: "DELETE",
         headers: {
             "Content-Type": "application/json"
         },
-        body: JSON.stringify({ ids: ids })
     })
     .then(response => response.json())
     .then(data => console.log("Success:", data))

frontend/styles/devices.css

@@ -2,7 +2,7 @@ table {
     margin: 20px;
     font-family: arial, sans-serif;
     border-collapse: collapse;
-    width: 100%;
+    width: 95%;
   }
   
   td,
@@ -22,7 +22,129 @@ table {
     justify-content: flex-end;
 }
 
-.addDevice{
+#addDevice{
     width: 120px;
     margin: 0 20px 0 0;
-}
+}
+
+.tableConatiner{
+  display: flex;
+  justify-content: center;
+}
+
+.tableIcons{
+  margin-inline: 5px;
+  width: 30px;
+  height: 30px;
+}
+
+  .tableIcons:hover {
+    background-color: #ddd;
+    color: black;
+    cursor: pointer;
+  }
+
+
+  button {
+    background-color: #04AA6D;
+    color: white;
+    padding: 14px 20px;
+    margin: 8px 0;
+    border: none;
+    cursor: pointer;
+    width: 100%;
+    opacity: 0.9;
+  }
+  
+  button:hover {
+    opacity:1;
+  }
+  
+  /* Float cancel and delete buttons and add an equal width */
+  .cancelbtn, #addbtn, #deletebtn, #editbtn{
+    float: left;
+    width: 50%;
+  }
+  
+  /* Add a color to the cancel button */
+  .cancelbtn {
+    background-color: #ccc;
+    color: black;
+  }
+  
+  /* Add a color to the delete button */
+  #deletebtn {
+    background-color: #f44336;
+  }
+  
+  /* Add padding and center-align text to the container */
+  .container {
+    padding: 16px;
+  }
+  
+  /* The Modal (background) */
+  .modal {
+    display: none; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 1; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: #474e5d;
+    padding-top: 50px;
+  }
+  
+  /* Modal Content/Box */
+  .modal-content {
+    background-color: #fefefe;
+    margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
+    border: 1px solid #888;
+    width: 80%; /* Could be more or less, depending on screen size */
+  }
+  
+  /* Style the horizontal ruler */
+  hr {
+    border: 1px solid #f1f1f1;
+    margin-bottom: 25px;
+  }
+   
+  /* The Modal Close Button (x) */
+  #close {
+    position: absolute;
+    right: 35px;
+    top: 15px;
+    font-size: 40px;
+    font-weight: bold;
+    color: #f1f1f1;
+  }
+  
+  #close:hover,
+  #close:focus {
+    color: #f44336;
+    cursor: pointer;
+  }
+  
+  /* Clear floats */
+  .clearfix::after {
+    content: "";
+    clear: both;
+    display: table;
+  }
+  
+  /* Change styles for cancel button and delete button on extra small screens */
+  @media screen and (max-width: 300px) {
+    .cancelbtn, .deletebtn {
+       width: 100%;
+    }
+  }
+
+  .form-container{
+    width: 90%;
+  }
+
+  .deviceHeader{
+    display: flex;
+    text-align: center;
+  }

frontend/styles/home.css

@@ -11,7 +11,7 @@ table {
   margin: 20px;
   font-family: arial, sans-serif;
   border-collapse: collapse;
-  width: 100%;
+  width: 95%;
 }
 
 td,
@@ -53,3 +53,8 @@ tr:nth-child(even) {
 .chartContainer{
   margin: 20px;
 }
+
+.tableConatiner{
+  display: flex;
+  justify-content: center;
+}