Environment Add

[evangdesigns]

USER STORY As a user, I should be able to add environmental readings (latitude, longitude, temperature, depth, current, pressure)

AC WHEN I'm on the environments page I should see an ADD button just under the page heading. AND when I click on it THEN a modal will open with fields for latitude, longitude, temperature, depth, current, and pressure. AND clicking the ADD button in the form THEN Adds the information to the environments data table.

DEV

• Use utilities pirntModal
• Create Modal form
• Create addNewEnvironment()
• Create axios call in environmentData.js

[evangdesigns]

Add button to domString inside printEnvironments just under <h1> tags. <button type="button" class="btn btn-danger add-environment-modal" data-toggle="modal" data-target="#uniModal">ADD</button>

Add Event listeners to the end of the printEnvironments() function $('#environments').on('click', '.add-environment-modal', environmentModal; $('#environments').on('click', '.add-environment', addNewEnvironmentl;

Add Environments Modal using UniModal inside of environments.js

environmentModal = () => {
const title = 'Add Environment';
const form = '<form>
  <div class="form-group">
    <label for="envi-longitude">Longitude</label>
    <input type="number" class="form-control" id="envi-longitude" placeholder="Longitude">
  </div>
  <div class="form-group">
    <label for="envi-latitude">Latitude</label>
    <input type="number" class="form-control" id="envi-latitude" placeholder="Latitude">
  </div>
  <div class="form-group">
    <label for="envi-temperature">Temperature</label>
    <input type="number" class="form-control" id="envi-temperature" placeholder="Temperature">
  </div>
  <div class="form-group">
    <label for="envi-depth">Depth</label>
    <input type="number" class="form-control" id="envi-depth" placeholder="Depth">
  </div>
  <div class="form-group">
    <label for="envi-current">Current</label>
    <input type="number" class="form-control" id="envi-currente" placeholder="Current">
  </div>
  <div class="form-group">
    <label for="envi-pressure">Pressure</label>
    <input type="number" class="form-control" id="envi-pressure" placeholder="Pressure">
  </div>
  <button type="button" class="btn btn-primary" id="add-environment">ADD</button>
</form>';
printModal(title, form);
};

Add Environments Function inside of environments.js

const addNewEnvironment = (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.addEnvironment(newEnvironment)
    .then(() => {
      $('#uniModal').modal('hide');
      // eslint-disable-next-line no-use-before-define
     printEnvironments();
    })
    .catch((error) => console.error(error));
};

Axios call for environmentData.js const addNewEnvironment = (newEnvironment) => axios.post(${baseUrl}/environments.json, newEnvironment);

[evangdesigns]