wmantly/mp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

sensor and location wip

Browse Source
This commit is contained in:
BIG2EYEZ 2024-01-23 15:33:16 +08:00
parent 2c62a2f0c0
commit 3dbfe5733b
5 changed files with 267 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

126
Sean/views/location.js
View File

@ -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
});
});

43
Sean/views/locations.ejs
View File

@ -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>
<main>
<h2>Welcome to the Location</h2>
</main>
<div id="updateLocationForm" class="location-update-container" style="display: none;">
<h3>Add Location</h3>
<div class="content">
<form action="/api/v0/location/update" id="updateForm" method="put">
<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>

40
Sean/views/sensor.js
View File

@ -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();
const id = $('#id').val();
const sensor = $('#sensor').val();
const user = req.session.jobTitle
const macAddress = $('#macAddress').val();
const description = $('#description').val();
// 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();
fetch('/api/v0/location/new', {
fetch('/api/v0/sensor/new', {
method: 'POST',
headers: {
'Content-Type': 'application/json',

19
Sean/views/sensors.ejs
View File

@ -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>

82
Sean/views/style.css
View File

@ -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 */
}