\$\begingroup\$
\$\endgroup\$
Goal:
I have thought of a project to create and came up with this goal of: "To record temperatures for different Fridges or Freezers."
Current situation
I have a working method to get data from html and send it to MySQL. But I feel like it can be simplified, as I have way too much code.
I'd like to see if anyone has different methods and help me out if I am going anywhere wrong or using very old methods.
Html, Jquery and Javascript
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="/style.css">
</head>
<body>
<div class="container mt-4">
<div id="errors" class="mt-4">
</div>
<h1 class="text-left" style="margin-bottom: 50px">Daily Fridge & Freezer Monitoring Record</h1>
<form action="/auth/21-TEMP-01b" method="post" id="form">
<div class="form-group">
<label>Select Fridge Or Freezer</label>
<select class="form-control" id="fridgeFreezer" name="fridge">
<option value="fridge1">Fridge 1</option>
<option value="fridge2">Fridge 2</option>
<option value="fridge3">Fridge 3</option>
<option value="fridge4">Fridge 4</option>
<option value="fridge5">Fridge 5</option>
<option value="fridge6">Fridge 6</option>
<option value="fridge7">Fridge 7</option>
<option value="fridge8">Fridge 8</option>
<option value="fridge9">Fridge 9</option>
<option value="fridge10">Fridge 10</option>
<option value="freezer1">Freezer 1</option>
<option value="freezer2">Freezer 2</option>
<option value="freezer3">Freezer 3</option>
<option value="freezer4">Freezer 4</option>
<option value="freezer5">Freezer 5</option>
</select>
</div>
<!-- Fridges -->
<div class="form-group fridges fridge1">
<h4>Fridge 1</h4>
<label>Temperature °C</label>
<input class="form-control" type="number" id="temperature1" name="temperature1">
<input type="hidden" name="Fridge1" value="Fridge 1">
<label>Comments</label>
<textarea class="form-control" rows="3" id="comments1" name="comments1"></textarea>
</div>
<div class="form-group fridges fridge2">
<h4>Fridge 2</h4>
<label>Temperature °C</label>
<input class="form-control" type="number" id="temperature2" name="temperature2">
<input type="hidden" name="Fridge2" value="Fridge 2">
<label>Comments</label>
<textarea class="form-control" rows="3" id="comments2" name="comments2"></textarea>
</div>
<div class="form-group fridges fridge3">
<h4>Fridge 3</h4>
<label>Temperature °C</label>
<input class="form-control" type="number" id="temperature3" name="temperature3">
<input type="hidden" name="Fridge3" value="Fridge 3">
<label>Comments</label>
<textarea class="form-control" rows="3" id="comments3" name="comments3"></textarea>
</div>
<div class="form-group fridges fridge4">
<h4>Fridge 4</h4>
<label>Temperature °C</label>
<input class="form-control" type="number" id="temperature4" name="temperature4">
<input type="hidden" name="Fridge4" value="Fridge 4">
<label>Comments</label>
<textarea class="form-control" rows="3" id="comments4" name="comments4"></textarea>
</div>
<div class="form-group fridges fridge5">
<h4>Fridge 5</h4>
<label>Temperature °C</label>
<input class="form-control" type="number" id="temperature5" name="temperature5">
<input type="hidden" name="Fridge5" value="Fridge 5">
<label>Comments</label>
<textarea class="form-control" rows="3" id="comments5" name="comments5"></textarea>
</div>
<div class="form-group fridges fridge6">
<h4>Fridge 6</h4>
<label>Temperature °C</label>
<input class="form-control" type="number" id="temperature6" name="temperature6">
<input type="hidden" name="Fridge6" value="Fridge 6">
<label>Comments</label>
<textarea class="form-control" rows="3" id="comments6" name="comments6"></textarea>
</div>
<div class="form-group fridges fridge7">
<h4>Fridge 2</h4>
<label>Temperature °C</label>
<input class="form-control" type="number" id="temperature7" name="temperature7">
<input type="hidden" name="Fridge7" value="Fridge 7">
<label>Comments</label>
<textarea class="form-control" rows="3" id="comments7" name="comments7"></textarea>
</div>
<div class="form-group fridges fridge8">
<h4>Fridge 8</h4>
<label>Temperature °C</label>
<input class="form-control" type="number" id="temperature8" name="temperature8">
<input type="hidden" name="Fridge8" value="Fridge 8">
<label>Comments</label>
<textarea class="form-control" rows="3" id="comments8" name="comments8"></textarea>
</div>
<div class="form-group fridges fridge9">
<h4>Fridge 9</h4>
<label>Temperature °C</label>
<input class="form-control" type="number" id="temperature9" name="temperature9">
<input type="hidden" name="Fridge9" value="Fridge 9">
<label>Comments</label>
<textarea class="form-control" rows="3" id="comments9" name="comments9"></textarea>
</div>
<div class="form-group fridges fridge10">
<h4>Fridge 10</h4>
<label>Temperature °C</label>
<input class="form-control" type="number" id="temperature10" name="temperature10">
<input type="hidden" name="Fridge10" value="Fridge 10">
<label>Comments</label>
<textarea class="form-control" rows="3" id="comments10" name="comments10"></textarea>
</div>
<!-- Freezers -->
<div class="form-group fridges freezer1">
<h4>Freezer 1</h4>
<label>Temperature °C</label>
<input class="form-control" type="number" id="freezertemperature1" name="freezertemperature1">
<input type="hidden" name="Freezer1" value="Freezer 1">
<label>Comments</label>
<textarea class="form-control" rows="3" id="freezercomments1" name="freezercomments1"></textarea>
</div>
<div class="form-group fridges freezer2">
<h4>Freezer 2</h4>
<label>Temperature °C</label>
<input class="form-control" type="number" id="freezertemperature2" name="freezertemperature2">
<input type="hidden" name="Freezer2" value="Freezer 2">
<label>Comments</label>
<textarea class="form-control" rows="3" id="freezercomments2" name="freezercomments2"></textarea>
</div>
<div class="form-group fridges freezer3">
<h4>Freezer 3</h4>
<label>Temperature °C</label>
<input class="form-control" type="number" id="freezertemperature3" name="freezertemperature3">
<input type="hidden" name="Freezer3" value="Freezer 3">
<label>Comments</label>
<textarea class="form-control" rows="3" id="freezercomments3" name="freezercomments3"></textarea>
</div>
<div class="form-group fridges freezer4">
<h4>Freezer 4</h4>
<label>Temperature °C</label>
<input class="form-control" type="number" id="freezertemperature4" name="freezertemperature4">
<input type="hidden" name="Freezer4" value="Freezer 4">
<label>Comments</label>
<textarea class="form-control" rows="3" id="freezercomments4" name="freezercomments4"></textarea>
</div>
<div class="form-group fridges freezer5">
<h4>Freezer 5</h4>
<label>Temperature °C</label>
<input class="form-control" type="number" id="freezertemperature5" name="freezertemperature5">
<input type="hidden" name="Freezer5" value="Freezer 5">
<label>Comments</label>
<textarea class="form-control" rows="3" id="freezercomments5" name="freezercomments5"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function(){
$("select").change(function(){
$(this).find("option:selected").each(function(){
if($(this).attr("value")=="fridge1"){
$(".fridges").not(".fridge1").hide();
$(".fridge1").show();
}
else if($(this).attr("value")=="fridge2"){
$(".fridges").not(".fridge2").hide();
$(".fridge2").show();
}
else if($(this).attr("value")=="fridge3"){
$(".fridges").not(".fridge3").hide();
$(".fridge3").show();
}
else if($(this).attr("value")=="fridge4"){
$(".fridges").not(".fridge4").hide();
$(".fridge4").show();
}
else if($(this).attr("value")=="fridge5"){
$(".fridges").not(".fridge5").hide();
$(".fridge5").show();
}
else if($(this).attr("value")=="fridge6"){
$(".fridges").not(".fridge6").hide();
$(".fridge6").show();
}
else if($(this).attr("value")=="fridge7"){
$(".fridges").not(".fridge7").hide();
$(".fridge7").show();
}
else if($(this).attr("value")=="fridge8"){
$(".fridges").not(".fridge8").hide();
$(".fridge8").show();
}
else if($(this).attr("value")=="fridge9"){
$(".fridges").not(".fridge9").hide();
$(".fridge9").show();
}
else if($(this).attr("value")=="fridge10"){
$(".fridges").not(".fridge10").hide();
$(".fridge10").show();
}
else if($(this).attr("value")=="freezer1"){
$(".fridges").not(".freezer1").hide();
$(".freezer1").show();
}
else if($(this).attr("value")=="freezer2"){
$(".fridges").not(".freezer2").hide();
$(".freezer2").show();
}
else if($(this).attr("value")=="freezer3"){
$(".fridges").not(".freezer3").hide();
$(".freezer3").show();
}
else if($(this).attr("value")=="freezer4"){
$(".fridges").not(".freezer4").hide();
$(".freezer4").show();
}
else if($(this).attr("value")=="freezer5"){
$(".fridges").not(".freezer5").hide();
$(".freezer5").show();
}
else{
$(".fridges").hide();
}
});
})
.change();
// Checking if all information has been filled out
var form = document.getElementById('form');
// Get each individual temperature
var temp1 = document.getElementById('temperature1');
var temp2 = document.getElementById('temperature2');
var temp3 = document.getElementById('temperature3');
var temp4 = document.getElementById('temperature4');
var temp5 = document.getElementById('temperature5');
var temp6 = document.getElementById('temperature6');
var temp7 = document.getElementById('temperature7');
var temp8 = document.getElementById('temperature8');
var temp9 = document.getElementById('temperature9');
var temp10 = document.getElementById('temperature10');
var freezertemp1 = document.getElementById('freezertemperature1');
var freezertemp2 = document.getElementById('freezertemperature2');
var freezertemp3 = document.getElementById('freezertemperature3');
var freezertemp4 = document.getElementById('freezertemperature4');
var freezertemp5 = document.getElementById('freezertemperature5');
// Error element
var errorElement = document.getElementById('errors');
// Add event listener to form on submit
form.addEventListener('submit', function(e) {
// Combine all errors into 1
let messages = [];
// Fridge 1 - here we are checking if all fields are not empty
if(temp1.value === '' || temp1.value == null) {
messages.push('Fridge 1');
$('#fridgeFreezer').val("fridge1");
$('#fridgeFreezer').trigger("change"); // important line
}
// Fridge 2
if(temp2.value === '' || temp2.value == null) {
messages.push('Fridge 2');
$('#fridgeFreezer').val("fridge2");
$('#fridgeFreezer').trigger("change"); // important line
}
// Fridge 3
if(temp3.value === '' || temp3.value == null) {
messages.push('Fridge 3');
$('#fridgeFreezer').val("fridge3");
$('#fridgeFreezer').trigger("change"); // important line
}
// Fridge 4
if(temp4.value === '' || temp4.value == null) {
messages.push('Fridge 4');
$('#fridgeFreezer').val("fridge4");
$('#fridgeFreezer').trigger("change"); // important line
}
// Fridge 5
if(temp5.value === '' || temp5.value == null) {
messages.push('Fridge 5');
$('#fridgeFreezer').val("fridge5");
$('#fridgeFreezer').trigger("change"); // important line
}
// Fridge 6
if(temp6.value === '' || temp6.value == null) {
messages.push('Fridge 6');
$('#fridgeFreezer').val("fridge6");
$('#fridgeFreezer').trigger("change"); // important line
}
// Fridge 7
if(temp7.value === '' || temp7.value == null) {
messages.push('Fridge 7');
$('#fridgeFreezer').val("fridge7");
$('#fridgeFreezer').trigger("change"); // important line
}
// Fridge 8
if(temp8.value === '' || temp8.value == null) {
messages.push('Fridge 8');
$('#fridgeFreezer').val("fridge8");
$('#fridgeFreezer').trigger("change"); // important line
}
// Fridge 9
if(temp9.value === '' || temp9.value == null) {
messages.push('Fridge 9');
$('#fridgeFreezer').val("fridge9");
$('#fridgeFreezer').trigger("change"); // important line
}
// Fridge 10
if(temp10.value === '' || temp10.value == null) {
messages.push('Fridge 10');
$('#fridgeFreezer').val("fridge10");
$('#fridgeFreezer').trigger("change"); // important line
}
// Freezer 1
if(freezertemp1.value === '' || freezertemp1.value == null) {
messages.push('Freezer 1');
$('#fridgeFreezer').val("freezer1");
$('#fridgeFreezer').trigger("change"); // important line
}
// Freezer 2
if(freezertemp2.value === '' || freezertemp2.value == null) {
messages.push('Freezer 2');
$('#fridgeFreezer').val("freezer2");
$('#fridgeFreezer').trigger("change"); // important line
}
// Freezer 3
if(freezertemp3.value === '' || freezertemp3.value == null) {
messages.push('Freezer 3');
$('#fridgeFreezer').val("freezer3");
$('#fridgeFreezer').trigger("change"); // important line
}
// Freezer 4
if(freezertemp4.value === '' || freezertemp4.value == null) {
messages.push('Freezer 4');
$('#fridgeFreezer').val("freezer4");
$('#fridgeFreezer').trigger("change"); // important line
}
// Freezer 5
if(freezertemp5.value === '' || freezertemp5.value == null) {
messages.push('Freezer 5');
$('#fridgeFreezer').val("freezer5");
$('#fridgeFreezer').trigger("change"); // important line
}
if(messages.length > 0) {
e.preventDefault()
errorElement.innerHTML = '<div class="alert alert-danger" role="alert">' + messages.join(', <br/>') + "<br/>" + ' Not Recorded' + '</div>';
}
})
});
</script>
</body>
</html>NODE JS - Not fully done (Need to add more variables for all fridges and freezers)
// Send temperature records to MySQL
exports.tempSend = async function(req, res) {
var {
Fridge1,temperature1, comments1,
Fridge2, temperature2, comments2
} = req.body;
var values = [
[Fridge1, temperature1, comments1],
[Fridge2, temperature2, comments2]
]
db.query('insert into tempcheck (fridge, temp, comments) values ?', [values], function(error, result) {
if(error) {
console.log(error);
}
else{
console.log(result);
}
});
}
DeveloperLVDeveloperLV
asked Jul 17, 2020 at 11:39
1 Answer 1
\$\begingroup\$
\$\endgroup\$
Your Node side could be simplified by sending over the readings JSON as a singular list of objects.
// assuming readings looks like this
[
{
'fridge':'old sketchy fridge',
'temperature':-3,
'comment':'yup, still works'
},
{
'fridge':'new fancy fridge',
'temperature':-4,
'comment':'this one better be worth the money'
}
]
const {readings} = req.body;
const values = readings.map(
reading=>[reading.fridge,reading.temperature,reading.comment]
);
Your use case sounds ideal for React, but vanilla javascript can also help you remove duplicated code. Anytime you find yourself creating a variable with a number tacked on the end of the name, you should be suspicious.
answered Jul 18, 2020 at 11:11
default