3
\$\begingroup\$

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


}
\$\endgroup\$
1
\$\begingroup\$

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.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.