diff --git a/backend/Api/BusinessLogic/DeviceLogic.cs b/backend/Api/BusinessLogic/DeviceLogic.cs index 506316c..ceb386b 100644 --- a/backend/Api/BusinessLogic/DeviceLogic.cs +++ b/backend/Api/BusinessLogic/DeviceLogic.cs @@ -29,12 +29,21 @@ namespace Api.BusinessLogic return new OkObjectResult(devices); } - public async Task AddDevice(Device device, int userId) + public async Task 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(), + }; + return await _dbAccess.CreateDevice(device, userId); } diff --git a/backend/Api/Controllers/DeviceController.cs b/backend/Api/Controllers/DeviceController.cs index d936fdb..31b3188 100644 --- a/backend/Api/Controllers/DeviceController.cs +++ b/backend/Api/Controllers/DeviceController.cs @@ -30,9 +30,9 @@ namespace Api.Controllers [Authorize] [HttpPost("adddevice/{userId}")] - public async Task AddDevice([FromBody] Device device, int userId) + public async Task 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 EditDevice(string referenceId) + { + return await _deviceLogic.EditDevice(referenceId); + } } } diff --git a/frontend/devices/index.html b/frontend/devices/index.html index 9348c45..9fe9dcc 100644 --- a/frontend/devices/index.html +++ b/frontend/devices/index.html @@ -24,16 +24,84 @@
- + +
+
+ + + + + + + + + + +
IdPlacement(name)Set Temp HighSet Temp LowLatest Meassurement
- - - - - - - -
IdPlacementLatest Meassurement
+ + + + + + + diff --git a/frontend/home/index.html b/frontend/home/index.html index 1072dd0..b960d84 100644 --- a/frontend/home/index.html +++ b/frontend/home/index.html @@ -26,16 +26,18 @@
- - - - - - - - - -
NameTemperatureDateTempHighTempLow
+
+ + + + + + + + + +
NameTemperatureDateTempHighTempLow
+
diff --git a/frontend/img/Edit.png b/frontend/img/Edit.png new file mode 100644 index 0000000..f0f9e79 Binary files /dev/null and b/frontend/img/Edit.png differ diff --git a/frontend/img/Trash.png b/frontend/img/Trash.png new file mode 100644 index 0000000..0c36d08 Binary files /dev/null and b/frontend/img/Trash.png differ diff --git a/frontend/mockdata/devices.mockdata.js b/frontend/mockdata/devices.mockdata.js new file mode 100644 index 0000000..00f74bf --- /dev/null +++ b/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 }} +] \ No newline at end of file diff --git a/frontend/scripts/devices.js b/frontend/scripts/devices.js index 821c1c0..e958d0f 100644 --- a/frontend/scripts/devices.js +++ b/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 = ` - Name - ${device.id} - ${device.name} - `; - table.innerHTML += row; + var row = document.createElement("tr"); + row.innerHTML = ` + ${device.referenceId} + ${device.name} + ${device.tempHigh} + ${device.tempLow} + Temperature: ${device.latestLog.temperature}°C, Date: ${device.latestLog.date} + + + + + `; + table.appendChild(row); }); - } \ No newline at end of file + + 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(); + } +}; diff --git a/frontend/scripts/profile.js b/frontend/scripts/profile.js index 9587ac4..f0962a7 100644 --- a/frontend/scripts/profile.js +++ b/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 diff --git a/frontend/scripts/services/devices.service.js b/frontend/scripts/services/devices.service.js index bcef00a..50211b8 100644 --- a/frontend/scripts/services/devices.service.js +++ b/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)) diff --git a/frontend/styles/devices.css b/frontend/styles/devices.css index 68dcbb1..bc0b68f 100644 --- a/frontend/styles/devices.css +++ b/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; -} \ No newline at end of file +} + +.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; + } diff --git a/frontend/styles/home.css b/frontend/styles/home.css index ece1235..a28e4d5 100644 --- a/frontend/styles/home.css +++ b/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; +}