update on sensor

Sean/views/location.js

@@ -20,78 +20,48 @@ $(document).ready(function () {
 
   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',
-        
-        })
-            .then(response => {
-                if (response.ok) {
-                    return response.json();
-                } else {
-                    throw new Error(`HTTP error! Status: ${response.status}`);
-                }
-            })
-            .then(locations => {
-                // Clear existing table rows
-                $('#locationTableBody').empty();
-                locationArray = [];
+  function populateTableAndArray(data) {
+    const tableBody = document.getElementById("locationTableBody");
 
-                // Populate the table with location information
-                locations.forEach(location => {
-                    locationArray.push({
-                        id: location.id,
-                        name: location.name,
-                        description: location.description
-                    });
+    // Clear existing rows and array
+    tableBody.innerHTML = "";
+    locationArray.length = 0;
 
-                    $('#locationTableBody').append(`
-                        <tr>
-                            <td>${location.id}</td>
-                            <td>${location.name}</td>
-                            <td>${location.description}</td>
-                        </tr>
-                    `);
-                });
-            })
-            .catch(error => {
-                console.error('Error fetching locations:', error);
-                // Handle error as needed
-            });
-    }
-    // Call the fetchLocations function when the page loads
-    fetchLocations();
-});
+    // Loop through the data and create table rows
+    data.forEach(location => {
+      const row = document.createElement("tr");
+      row.innerHTML = `
+        <td>${location.id}</td>
+        <td>${location.location}</td>
+        <td>${location.description}</td>
+      `;
+      tableBody.appendChild(row);
+
+      // Push location data to the array
+      locationArray.push(location);
+    });
+  }
+  populateTableAndArray(locationsData);
+  console.log(locationArray);
 
 $('#locationForm').on('submit', function (e) {
     e.preventDefault();
 
-    const location= DOMPurify.sanitize($('#location').val().trim());
-    // Validate if the sanitized value is empty
-    if (location === '') {
-        alert('Location name cannot be empty');
-        return;
-    }
+    const location= $('#location').val();
     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/new', {
+    const description= $('#description').val();
+    const csrf_token = $('#userForm input[name="csrf_token"]').val();
+   
+    fetch('/location/new', {
       method: 'POST',
       headers: {
           'Content-Type': 'application/json',
-          'Authorization': '2-eb0c08b0-250a-4249-8a87-11141e2ff8fb'
       },
       body: JSON.stringify({
           name: location,
           added_by: user,
-          description: description
+          description: description,
+          csrf_token: csrf_token
       }),
   })
   .then(response => {
@@ -127,37 +97,23 @@ $('#locationForm').on('submit', function (e) {
 
   $('#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 selectedLocationId = $('#locationDropdown').val();
+    const location= $('#location').val();
     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', {
+    const description=$('#description').val();
+    const csrf_token = $('#userForm input[name="csrf_token"]').val();
+
+    fetch('/location/update', {
       method: 'POST',
       headers: {
-          'Content-Type': 'application/json',
-          'Authorization': '1-1ec4ce9d-bcff-46c4-a023-c34171b9ca51'
+          'Content-Type': 'application/json'
       },
       body: JSON.stringify({
           id:selectedLocationId,
           name: location,
           added_by: user,
-          description: description
+          description: description,
+          csrf_token: csrf_token
       }),
   })
   .then(response => {

Sean/views/locations.ejs

@@ -42,7 +42,7 @@
   <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">
+      <form action="/location/new" id="locationForm" method="post">
         <div class="Location-details">
           <div class="input-box">
             <span class="details">Location Name</span>
@@ -53,6 +53,7 @@
             <input type="text" name="description" id="description" placeholder="Enter the description here" required>
           </div>
         </div>
+        <input type="hidden" name="csrf_token" value="<%= csrfToken %>">
         <div class="button">
           <input type="submit" value="submit">
         </div>
@@ -79,6 +80,7 @@
             <input type="text" name="description" id="description" placeholder="Enter the description here" required>
           </div>
         </div>
+        <input type="hidden" name="csrf_token" value="<%= csrfToken %>">
         <div class="button">
           <input type="submit" value="submit">
         </div>
@@ -88,6 +90,9 @@
   <footer>
     Any Issue faced, Please contact the administrator at 11111111 or ecosaverAdmin@gmail.com
 </footer>
+<script>
+   const locationsData = <%- JSON.stringify(locationsData) %>;
+</script>
 <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>

Sean/views/sensor.js

@@ -10,126 +10,67 @@ $(document).ready(function () {
         $('#additional-text4').show();
       });
   });
-    let locationsArray = [];
+  function populateTableAndArray(data, locationsArray) {
+    const tableBody = document.getElementById("sensorTableBody");
+    // Clear existing rows and array
+    tableBody.innerHTML = "";
+    sensorArray.length = 0;
+    // Loop through the data and create table rows
+    data.forEach(sensor => {
+      const location = locationsArray.find(loc => loc.id === sensor.location);
+  
+      const row = document.createElement("tr");
+      row.innerHTML = `
+        <td>${sensor.id}</td>
+        <td>${sensor.sensorname}</td>
+        <td>${sensor.added_by}</td>
+        <td>${sensor.description}</td>
+        <td>${location ? location.name : 'Unknown Location'}</td>
+      `;
+      tableBody.appendChild(row);
+      // Push sensor data to the array
+      sensorArray.push(sensor);
+    });
+  }
+  // Assuming locationsArray is defined elsewhere in your code
+  populateTableAndArray(sensorData);
+  console.log(sensorArray);
 
-    // Function to fetch and store locations in the array
-    function fetchLocations() {
-        // Make a GET request to retrieve all locations
-        fetch('/api/v0/location', {
-            method: 'GET',
-        })
-            .then(response => {
-                if (response.ok) {
-                    return response.json();
-                } else {
-                    throw new Error(`HTTP error! Status: ${response.status}`);
-                }
-            })
-            .then(locations => {
-                // Reset the array
-                locationsArray = [];
+  function populateLocationDropdown() {
+    const locationDropdown = document.getElementById('locationDropdown');
 
-                // Populate the array with location information
-                locations.forEach(location => {
-                    // Store in the array
-                    locationsArray.push({
-                        id: location.id,
-                        location: location.name,
-                    });
-                });
-            })
-            .catch(error => {
-                console.error('Error fetching locations:', error);
-                // Handle error as needed
-            });
-    }
-    // Call the fetchLocations function when the page loads
-    fetchLocations();
+    // Clear existing options
+    locationDropdown.innerHTML = '';
 
-    // Function to fetch sensor data and populate the table
-    function fetchAndPopulateSensorTable() {
-        // Fetch sensor data from the API
-        fetch('/api/v0/sensor', {
-            method: 'GET',
-            headers: {
-                'Authorization': '1-1ec4ce9d-bcff-46c4-a023-c34171b9ca51'
-            },
-        })
-            .then(response => response.json())
-            .then(sensorData => {
-                // Get the table body
-                const tableBody = document.getElementById('sensorTableBody');
+    // Add a default option
+    const defaultOption = document.createElement('option');
+    defaultOption.text = 'Select a Location';
+    defaultOption.value = '';
+    locationDropdown.add(defaultOption);
 
-                // Clear existing rows
-                tableBody.innerHTML = '';
-
-                // Iterate through each sensor data
-                sensorData.forEach(sensor => {
-                    // Find the corresponding location object
-                    const location = locationsArray.find(loc => loc.id === sensor.location);
-
-                    // Create a new row
-                    const row = tableBody.insertRow();
-
-                    // Insert cells with sensor data
-                    row.insertCell(0).textContent = sensor.id;
-                    row.insertCell(1).textContent = sensor.sensorname;
-                    row.insertCell(2).textContent = sensor.added_by;
-                    row.insertCell(3).textContent = sensor.mac_address;
-                    row.insertCell(4).textContent = sensor.description;
-
-                    // Insert location cell with corresponding location name
-                    const locationCell = row.insertCell(5);
-                    locationCell.textContent = location ? location.location : 'Unknown';
-                });
-            })
-            .catch(error => {
-                console.error('Error fetching sensor data:', error);
-            });
-    }
-
-    // Call the function to fetch and populate the table
-    fetchAndPopulateSensorTable();
+    // Add locations as options
+    locationsArray.forEach(location => {
+        const option = document.createElement('option');
+        option.text = location.location;
+        option.value = location.id;
+        locationDropdown.add(option);
+    });
+}
+populateLocationDropdown();
 
 $('#sensorForm').on('submit', function (e) {
     e.preventDefault();
-       // Sanitize sensor input
-       const sensor = DOMPurify.sanitize($('#sensor').val().trim());
-       // Validate if the sanitized value is empty
-       if (sensor === '') {
-           alert('Sensor name cannot be empty');
-           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();
+       const sensor = $('#sensor').val();
+       const user = req.session.jobTitle;
+       const macAddress = $('#macAddress').val();
+       const description = $('#description').val();
+       const location = $('#location').val();
+       const csrf_token = $('#userForm input[name="csrf_token"]').val();
    
-    fetch('/api/v0/sensor/new', {
+    fetch('sensor/new', {
       method: 'POST',
       headers: {
-          'Content-Type': 'application/json',
-          'Authorization': '2-eb0c08b0-250a-4249-8a87-11141e2ff8fb'
+          'Content-Type': 'application/json'
       },
       body: JSON.stringify({
           id: id,
@@ -137,7 +78,8 @@ $('#sensorForm').on('submit', function (e) {
           added_by: user,
           mac_address: macAddress,
           description: description,
-          location: location
+          location: location,
+          csrf_token: csrf_token
       }),
   })
   .then(response => {
@@ -160,27 +102,3 @@ $('#sensorForm').on('submit', function (e) {
     // Handle error as needed
 });
   });
-
-  function populateLocationDropdown() {
-    const locationDropdown = document.getElementById('locationDropdown');
-
-    // Clear existing options
-    locationDropdown.innerHTML = '';
-
-    // Add a default option
-    const defaultOption = document.createElement('option');
-    defaultOption.text = 'Select a Location';
-    defaultOption.value = '';
-    locationDropdown.add(defaultOption);
-
-    // Add locations as options
-    locationsArray.forEach(location => {
-        const option = document.createElement('option');
-        option.text = location.location;
-        option.value = location.id;
-        locationDropdown.add(option);
-    });
-}
-
-// Call the function to populate the dropdown when the page loads
-populateLocationDropdown();

Sean/views/sensors.ejs

@@ -64,10 +64,10 @@
                 <div class="input-box">
                     <span class="details">Location</span>
                     <select name="location" id="locationDropdown" required>
-                        
                     </select>
                 </div>
             </div>
+            <input type="hidden" name="csrf_token" value="<%= csrfToken %>">
             <div class="button">
                 <input type="submit" value="Submit">
             </div>
@@ -88,6 +88,10 @@
     Any Issue faced, Please contact the administrator at 11111111 or ecosaverAdmin@gmail.com
 </footer>
 </body>
+<script>
+const locationsArray = <%=-JSON.stringify(locationsData) %>;
+const sensorArray = <%- JSON.stringify(sensorData) %>;
+</script>
 <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>