Environment Edit

[evangdesigns]

USER STORY As a user, I should be able to edit environmental readings.

AC WHEN I'm on the environments page I should see an EDIT on the far right of each row displaying an environment. THEN When I click on it AND a modal will pop up with fields for latitude, longitude, temperature, depth, current, and pressure populated with the respective info from the selected environment from the list. THEN when I click the SAVE button AND the form will update the environments data table.

DEV

• Create updatedEnvironment() calling addEnvironment() modal w/ADD button changed to UPDATE
• Input the information from the selected Environment into the form
• Axios call triggered by updatedEnvironment()

[evangdesigns]

Add 'EDIT` link inside domString loop inside printEnvironments() <button type="button" class="btn btn-danger add-environment-modal" data-toggle="modal" data-target="#uniModal">EDIT</button>

Add Event listener to the end of the printEnvironments() function $('#environments').on('click', '.update-environment', updatedEnvironmentl;

Add UpdatedEnvironment function inside of environments.js

const updatedEnvironment = (e) => {
  e.stopImmediatePropagation();
  const newEnvironment = {
      latitude: $('#envi-latitude').val(),
      longitude: $('#envi-longitude').val(),
      temperature: $('#envi-temperature').val(),
      depth: $('#envi-depth').val(),
      current:$('#envi-current').val(),
      pressure:$('#envi-pressure').val(),
  };
  environmentData.updateEnvironment(updatedEnvironment)
    .then(() => {
      $('#uniModal').modal('hide');
      // eslint-disable-next-line no-use-before-define
     printEnvironments();
    })
    .catch((error) => console.error(error));
}

Axios call for environmentData.js

const updateEnvironment = (environmentId, updatedEnvironment) => axios.put(`${baseUrl}/environments/${environmentId}.json`, updatedEnvironment);

[evangdesigns]