sensor and location wip

Sean/views/location.js

@@ -1,12 +1,32 @@
+$(document).ready(function () {
+    $('#allLocationLink').on('click', function () {
+      $('#locationContainer').show();
+      $('#createLocationForm').hide();
+      $('#updateLocationForm').hide();
+    });
+    $('#addLocationLink').on('click', function () {
+        $('#locationContainer').hide();
+        $('#createLocationForm').show();
+        $('#updateLocationForm').hide();
+      });
+      $('#updateLocationLink').on('click', function () {
+        $('#locationContainer').hide();
+        $('#createLocationForm').hide();
+        $('#updateLocationForm').show();
+        populateLocationDropdown();
+      });
+      
+  });
+
+  let locationArray = [];
+
 $(document).ready(function () {
     // Function to fetch and display locations
     function fetchLocations() {
         // Make a GET request to retrieve all locations
         fetch('/api/v0/location', {
             method: 'GET',
-            headers: {
+        
-                'Authorization': '2-eb0c08b0-250a-4249-8a87-11141e2ff8fb'
-            },
         })
             .then(response => {
                 if (response.ok) {
@@ -18,9 +38,16 @@ $(document).ready(function () {
             .then(locations => {
                 // Clear existing table rows
                 $('#locationTableBody').empty();
+                locationArray = [];
 
                 // Populate the table with location information
                 locations.forEach(location => {
+                    locationArray.push({
+                        id: location.id,
+                        name: location.name,
+                        description: location.description
+                    });
+
                     $('#locationTableBody').append(`
                         <tr>
                             <td>${location.id}</td>
@@ -39,25 +66,22 @@ $(document).ready(function () {
     fetchLocations();
 });
 
-$(document).ready(function () {
-    $('#allLocationLink').on('click', function () {
-      $('#locationContainer').show();
-      $('#createLocationForm').hide();
-    });
-    $('#addLocationLink').on('click', function () {
-        $('#locationContainer').hide();
-        $('#createLocationForm').show();
-      });
-  });
-
-
 $('#locationForm').on('submit', function (e) {
     e.preventDefault();
 
-    const location = $('#location').val();
+    const location= DOMPurify.sanitize($('#location').val().trim());
+    // Validate if the sanitized value is empty
+    if (location === '') {
+        alert('Location name cannot be empty');
+        return;
+    }
     const user = req.session.jobTitle
-    const description = $('#description').val();
+    const description= DOMPurify.sanitize($('#description').val().trim());
-   
+    // Validate if the sanitized value is empty
+    if (description === '') {
+        alert('description name cannot be empty');
+        return;
+    }
     fetch('/api/v0/location/new', {
       method: 'POST',
       headers: {
@@ -90,3 +114,69 @@ $('#locationForm').on('submit', function (e) {
     // Handle error as needed
 });
   });
+
+  function populateLocationDropdown() {
+    // Clear existing options
+    $('#locationDropdown').empty();
+
+    // Populate the dropdown with options from locationArray
+    locationArray.forEach(location => {
+        $('#locationDropdown').append(`<option value="${location.id}">${location.name}</option>`);
+    });
+}
+
+  $('#updateForm').on('submit', function (e) {
+    e.preventDefault();
+    const selectedLocationId = DOMPurify.sanitize($('#locationDropdown').val().trim());
+
+    // Validate if the selected location ID is empty
+    if (selectedLocationId === '') {
+        alert('Please select a location to update');
+        return;
+    }
+    const location= DOMPurify.sanitize($('#location').val().trim());
+    // Validate if the sanitized value is empty
+    if (location === '') {
+        alert('Location name cannot be empty');
+        return;
+    }
+    const user = req.session.jobTitle
+    const description= DOMPurify.sanitize($('#description').val().trim());
+    // Validate if the sanitized value is empty
+    if (description === '') {
+        alert('description name cannot be empty');
+        return;
+    }
+    fetch('/api/v0/location/update', {
+      method: 'POST',
+      headers: {
+          'Content-Type': 'application/json',
+          'Authorization': '1-1ec4ce9d-bcff-46c4-a023-c34171b9ca51'
+      },
+      body: JSON.stringify({
+          id:selectedLocationId,
+          name: location,
+          added_by: user,
+          description: description
+      }),
+  })
+  .then(response => {
+    if (response.ok) {
+        // Status 201 indicates successful creation
+        return response.json();
+    } else {
+        return response.json().then(data => {
+            throw new Error(data.message || `HTTP error! Status: ${response.status}`);
+        });
+    }
+})
+.then(data => {
+    console.log(`Location uppdated successfully. Message: ${data.message}`);
+    alert('Location updated successfully!');
+    resetFormFields();
+})
+.catch(error => {
+    console.error('Location not updated successfully', error);
+    // Handle error as needed
+});
+  });

Sean/views/locations.ejs

@@ -13,18 +13,19 @@
 
 <body>
   
-  <header>
+<header>
     <h1>ECOSAVER MANAGEMENT</h1>
 </header>
-
   <nav>
     <a href="#" id="allLocationLink">All Locations</a>
     <a href="#" id="addLocationLink">Add Locations</a>
-    <a href="#">Update Locations</a>
+    <a href="#" id="updateLocationLink">Update Locations</a>
     <a href="#">Delete Locations</a>
     <a href="/home" id="homeLink">Home</a>
   </nav>
-
+  <main>
+    <h2>Welcome to the Location Page</h2>
+  </main>
   <div id="locationContainer">
     <table class="nice-table">
       <thead>
@@ -38,7 +39,7 @@
     </table>
   </div>
 
-  <div id="createLocationForm" class="location-creation-container" style="display: none;">
+  <div id="createLocationForm" class="location-creation-container custom-location-form" style="display: none;">
     <h3>Add Location</h3>
     <div class="content">
       <form action="/api/v0/location/new" id="locationForm" method="post">
@@ -59,14 +60,36 @@
     </div>
   </div>
 
-
+  <div id="updateLocationForm" class="location-update-container" style="display: none;">
-
+    <h3>Add Location</h3>
-  <main>
+    <div class="content">
-    <h2>Welcome to the Location</h2>
+      <form action="/api/v0/location/update" id="updateForm" method="put">
-  </main>
+        <div class="Location-details">
+          <div class="input-box">
+            <span class="details">Location to Update</span>
+            <select name="location" id="locationDropdown" required>
+            </select>
+        </div>
+          <div class="input-box">
+            <span class="details">Location Name</span>
+            <input type="text" name="location"  id="location" placeholder="Enter Location name" required>
+          </div>
+          <div class="input-box">
+            <span class="details">Description</span>
+            <input type="text" name="description" id="description" placeholder="Enter the description here" required>
+          </div>
+        </div>
+        <div class="button">
+          <input type="submit" value="submit">
+        </div>
+      </form>
+    </div>
+  </div>
   <footer>
     Any Issue faced, Please contact the administrator at 11111111 or ecosaverAdmin@gmail.com
 </footer>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.3.3/purify.min.js"></script>
+<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
 <script src="location.js"></script>
 </body>
 

Sean/views/sensor.js

@@ -2,10 +2,12 @@ $(document).ready(function () {
     $('#allSensorLink').on('click', function () {
       $('#sensorContainer').show();
       $('#createSensorForm').hide();
+      $('#additional-text4').hide();
     });
     $('#addSensorLink').on('click', function () {
         $('#sensorContainer').hide();
         $('#createSensorForm').show();
+        $('#additional-text4').show();
       });
   });
     let locationsArray = [];
@@ -91,15 +93,39 @@ $(document).ready(function () {
 
 $('#sensorForm').on('submit', function (e) {
     e.preventDefault();
-
+       // Sanitize sensor input
-    const id = $('#id').val();
+       const sensor = DOMPurify.sanitize($('#sensor').val().trim());
-    const sensor = $('#sensor').val();
+       // Validate if the sanitized value is empty
-    const user = req.session.jobTitle
+       if (sensor === '') {
-    const macAddress = $('#macAddress').val();
+           alert('Sensor name cannot be empty');
-    const description = $('#description').val();
+           return;
+       }
+       // Sanitize user input (assuming req.session is available)
+       const user = DOMPurify.sanitize(req.session.jobTitle);
+       
+       // Validate if the sanitized value is missing
+       if (!user) {
+           alert('User information is missing');
+           return;
+       }
+       // Sanitize macAddress input
+       const macAddress = DOMPurify.sanitize($('#macAddress').val().trim());
+       // Validate macAddress format
+       const macAddressRegex = /^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})$/;
+       if (!macAddressRegex.test(macAddress)) {
+           alert('Invalid MAC Address format');
+           return;
+       }
+       // Sanitize description input
+       const description = DOMPurify.sanitize($('#description').val().trim());
+       // Validate if the sanitized value is empty
+       if (description === '') {
+           alert('Description cannot be empty');
+           return;
+       }
     const location = $('#location').val();
    
-    fetch('/api/v0/location/new', {
+    fetch('/api/v0/sensor/new', {
       method: 'POST',
       headers: {
           'Content-Type': 'application/json',

Sean/views/sensors.ejs

@@ -19,7 +19,7 @@
 
   <nav>
     <a href="#" id="allSensorLink">All Sensor</a>
-    <a href="#"id="addSensorLink">Add Sensor</a>
+    <a href="#" id="addSensorLink">Add Sensor</a>
     <a href="#">Update Sensor</a>
     <a href="#">Delete Sensor</a>
     <a href="/home" id="homeLink">Home</a>
@@ -47,12 +47,8 @@
 <div id="createSensorForm" class="sensor-creation-container" style="display: none;">
     <h3>Add Sensor</h3>
     <div class="content">
-        <form action="/api/v0/sensor/update" id="sensorForm" method="post">
+        <form action="/api/v0/sensor/new" id="sensorForm" method="post">
             <div class="Sensor-details">
-                <div class="input-box">
-                    <span class="details">ID</span>
-                    <input type="text" name="id" id="id" placeholder="Enter an ID Number" required>
-                </div>
                 <div class="input-box">
                     <span class="details">Sensor Name</span>
                     <input type="text" name="sensor" id="sensor" placeholder="Enter Sensor name" required>
@@ -78,10 +74,21 @@
         </form>
     </div>
 </div>
+<div id="additional-text4" style="display: none;">
+    <div class="condition">
+      <span>Conditions for creating a Sensor:</span>
+      <ul>
+        <li class="error">Please Remember to fill all inputs.</li>
+        <li class="error">Please ensure all inputs are correct before adding</li>
+      </ul>
+    </div>
+  </div>
 
   <footer>
     Any Issue faced, Please contact the administrator at 11111111 or ecosaverAdmin@gmail.com
 </footer>
 </body>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.3.3/purify.min.js"></script>
+<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
 <script src="sensor.js"></script>
 </html>

Sean/views/style.css

@@ -556,5 +556,83 @@ footer {
 	font-weight: bold; /* Make condition labels bold */
   }
   
- 
+  .sensor-creation-container {
-  
+    max-width: 600px;
+    margin: 10px auto;
+    background-color: #f9f9f9;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    margin-left: 20px; /* Adjust the value as needed */
+}
+
+.input-box {
+    margin-bottom: 15px;
+}
+
+.input-box input,
+.input-box select {
+    width: 100%;
+    padding: 8px;
+    box-sizing: border-box;
+}
+
+.button input {
+    background-color: #4CAF50;
+    color: white;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 16px;
+}
+
+.button input:hover {
+    background-color: #45a049;
+}
+#additional-text4 {
+	width: 30%; /* Adjust the width as needed */
+	margin-left: 500px; /* Push it to the right */
+	margin-top: -450px; /* Adjust the negative margin to move it up */
+	padding: 10px; /* Add padding for spacing */
+	background-color: #f4f4f4; /* Add background color if desired */
+	border-radius: 5px; /* Add border-radius for rounded corners */
+	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Add box shadow for a subtle effect */
+    border: 1px solid #ddd; /* Add a 1px solid border with light gray color */
+	font-family: 'Open Sans', sans-serif;
+  }
+#additional-text4 p {
+	font-size: 16px; /* Adjust font size as needed */
+	line-height: 1.6; /* Adjust line height for better readability */
+  }
+  
+  #additional-text4 .condition {
+	margin-bottom: 10px; /* Add space between conditions */
+  }
+  
+  #additional-text4 .condition span {
+	font-weight: bold; /* Make condition labels bold */
+  }
+  
+  #additional-text4 .condition.error {
+	color: red; /* Change text color for error conditions */
+  }
+  
+  #additional-text4 .condition.success {
+	color: green; /* Change text color for success conditions */
+  }
+  .custom-location-form {
+    max-width: 600px;
+    margin: 10px auto 20px; /* Adjust the top and bottom margins */
+    background-color: #f9f9f9;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    margin-left: 20px; /* Adjust the left margin as needed */
+    margin-top: 0px; /* Adjust the top margin to move it up */
+  }
+  
+  /* Add any other specific styles for this form */
+  .custom-location-form h3 {
+    color: #333; /* Customize the heading color */
+  }