Add a Mission

[ToddSpainhour]

User Story - As a user, I should be able to add (create) a new mission.

AC -

WHEN the missions page loads THEN I should see a button to create a new mission AND a form should appear AND I should be able to create a mission name AND pick a mission enemy AND pick the personnel to take on the mission (ticket #113) AND pick a mission sector (ticket #114) AND pick the weapons to take on the mission

Dev Notes

• When the missions navbar button is clicked and the missions load onto the screen, there should also be a fontaswesome plus icon which will have the id of open-create-new-mission-form-button

• form in it's own div or modal?

• When the open-create-new-mission-form-button is clicked, it will run a function called createNewMissionFormBuilder() $('body').on('click', '#open-create-new-mission-form-button', createNewMissionFormBuilder)

• createNewMissionFormBuilder() domstring will have...

  -a text field for manually entering a mission name -a drop down to pick a single enemy - getAllEnemies() -a drop down to pick a single sector getAllPlanetarySectors() (ticket #114) -a drop down to pick multiple weapons if desired - getAllWeapons() -a drop down to pick multiple personnel if desired (ticket #113)

• need more info here about pulling above values from previously created databases...

• There will be a button at the bottom of the form that says Create New Form with the id of create-new-form-submit-button

• When the create-new-form-submit-button is clicked it will send the newly created mission info to firebase $('body').on(''click', #create-new-form-submit-button, makeNewMission)

• the page will then reprint and display the new card with missionComponent.buildMission

• the following function should live inside the missionData.js file

  const makeNewMission = (e) => {
  e.preventDefault();
  
  // 1. make new sector object
  const newMission = {
  name: $('#user-selected-mission-name').val(),
  sector: $(',#user-selected-mission-sector').val(),
  enemy: $(',#user-selected-mission-enemy').val(),
  personnel: $(',#user-selected-mission-personnel').val(),
  personnel: $(',#user-selected-mission-weapons').val(),
  uid: firebase.auth().currentUser.uid,
  };
  // 2. save to firebase with axios post
  missionData.addMission(newMission)
  .then(() => {
    // 3. reprint sectors and hide form
    buildMissions();
    utils.printToDom('whichever div we pick', '');
  })
  .catch((err) => console.error('make new mission broke', err));
  };