As a user, I should be able to click on the update button and a modal should pop up with the input fields pre-filled with that logID information. I then can change the values in the input fields to the new log data that I want and click submit which will update the log information in the card.
AC
WHEN update button is clicked,
THEN bootstrap modal popup with corresponding data from firebase database populate in the fields and save changes button
AND when save changes button is clicked, update should be made both in firebase database and DOM.
Dev Notes
Add bootstrap modal with input field for destination, date, message, and crew to html file.
Add an event listener for the update button in the eventListeners.js that pops up the modal. a
create a variable at the top of logData.js file called const baseUrl = apiKeys.firebaseKeys.databaseURL;
Create a function in logData.js that will use an axios.get call to get a log by ID.
const getLogById = (logId) => axios.get(`${baseUrl}/logs/${logId}.json`);
Create a second function in logData.js called updateLog axios.put() function in LogData.js file that takes logID and the updatedLog object as parameters.
const updatedLog= (LogID, updatedLog) => axios.put(`${baseUrl}/LogId.json`, updatedLog);
Create logUpdate function inside logs.js file.
Grab the specific LogId that we are updating.
Inside logUpdate function call the getLogById function from logsData.js and pass LogId as parameter for update.
take promise data with a .then(response) and define the response with const logs = response.data
Call the modal input fields with jquery and set the value by using logs.destination, logs.date, logs.message, logs.crew
Inside logUpdate function call buildLog function to display update on dom.
Make a second function called finalLogUpdate that will grab the logID and then define the object called updatedLog.
The udpatedLog object will set each input field to .val().
Then call the updatedLog function from logsData.js and pass through the updatedLog object the parameters.
use a .then() to hide the modal and then reprint the logs function from logs.js.
export the finalLogUpdate function.
use an eventListener in eventListeners.js on the submit changes button that will call the finalLogUpdate function.
User Story
AC
WHEN update button is clicked, THEN bootstrap modal popup with corresponding data from firebase database populate in the fields and save changes button AND when save changes button is clicked, update should be made both in firebase database and DOM.
Dev Notes
const getLogById = (logId) => axios.get(`${baseUrl}/logs/${logId}.json`);const updatedLog= (LogID, updatedLog) => axios.put(`${baseUrl}/LogId.json`, updatedLog);.then(response)and define the response withconst logs = response.datalogs.destination, logs.date, logs.message, logs.crew