Environment Read

[evangdesigns]

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

AC WHEN I arrive on the environments page THEN I should see a list of all environments in the database

DEV

• Use Promise and print code below. Adjust as needed.
• Use bootstrap table and table-striped classes https://getbootstrap.com/docs/4.0/content/tables/#table-head-options

[evangdesigns]

Print The Environments

const printEnvironments = () => {
  boards.getEnvironments()
    .then((id) => {
      let domString = '<h1 class="text-center">Environments</h1>
<table class="table table-striped">
  <thead class="header">
    <tr>
      <th scope="col">Latitude</th>
      <th scope="col">Longitude</th>
      <th scope="col">Temperature</th>
      <th scope="col">Depth</th>
      <th scope="col">Current</th>
      <th scope="col">Pressure</th>
      <th scope="col">Edit | Delete</th>
    </tr>
  </thead>
  <tbody>';
      id.forEach((envi) => {
        domString += `<tr>
      <th scope="row">${id.logitude}</th>
      <td>${envi.logitude}</td>
      <td>$envi.latitude}</td>
      <td>${envi.temperature}</td>
      <td>${envi.depth}</td>
      <td>${envi.current}</td>
      <td>${envi.pressure}</td>
      <td><button type="link" class="btn btn-ink edit-environments" id="edit-${envi.id}">EDIT</button> | 
        <button type="link" class="btn btn-link delete-environment" id="delete-${envi.id}">DELETE</button></td>
    </tr>
      });
      domString += '</tbody></table>';
      utilities.printToDom('environments', domString);
      $('#boards').on('click', 'edit-environments', editEnvironment);
      $('#boards').on('click', '.delete-environments, deleteEnvironment);
    })
    .catch((error) => console.error(error));
};

[evangdesigns]

Environment Promise

const baseUrl = apiKeys.firebaseKeys.databaseURL;

const getEnvironments = () => new Promise((resolve, reject) => {
  axios.get(`${baseUrl}/environments.json`)
    .then((response) => {
      const demEnvis = response.data;
      const environments = [];
      Object.keys(demEnvis).forEach((fbId) => {
        demEnvis[fbId].id = fbId;
        environments.push(demEnvis[fbId]);
      });
      resolve(environments);
    })
    .catch((error) => reject(error));
});

[evangdesigns]