Planetary System Mission: Read

[ConnorSullivan10]

User Story

As a user, I'd like to see the available Planetary Systems when choosing mission options.

AC

GIVEN a user is on the Missions page WHEN they click the "View Details" button on the mission THEN they should see a "System" card with a "View Details" button AND when they click the "View Details" button THEN On READ, they should only be able to see the one planetary system attributed to the mission.

Dev Notes

• inside the div that will pop up upon clicking the "View Details" button on each mission card, create a div with the id="systemMissions"
• in planetSystem.js, create a const systemMissionCard function that will print a card to the div with the id="systemMissions", with an h2 of "Planetary Systems", a planetary system image of the planetary system attached to the mission, and a "View Details" button similar to the format pictured below. Should look something along the lines of:

const systemMissionCard = (mission) => {
let domString = '';
    domString += `
          <div id="${mission.planetaryId}" class="card foodCard card-body text-center" style=" width: 20em; max-width: 500px; height: 100%; margin: 2em;">
              <h2>Planetary System</h2>
  smash.getAllPlanetarySystemById(mission.planetaryID);
        .then ( (planetSystem) {
            domstring+= <img src="${planetSystem.planetaryImg}" class="card-img-top" style="width: 100%; height: auto;" alt="..."/>
         });
      domString += <button type="button" class="btn view-system-details" " id="${mission.planetaryId}" style="background-color: red;"> View Details</button>
          </div>`;
  utilities.printToDom('systemMissions', domString);
};

• then export systemMissionCard and import it into missions.js where you will create an event listener at the bottom of the function that prints all missions, which will call systemMissionCard on click of the "View Details" button of each individual mission. Should look similar to: $(document.body).on('click', '.mission-view-details', systemMissionCard);
• finally we need to create a larger card of the full Planetary System details based on targeting the planetSystemId which will be defined as the id of the "View Details" button in the systemMissionCard function above. First, inside the div that will pop up upon clicking the "View Details" button on each mission card, create a div with the id="bigSystem" that we can target and print our big card to :

const bigSystemCard = (e) => {
const planetSystemId = e.target.id;
smash.getAllPlanetarySystemById(mission.planetaryID);
 .then ( (planetSystem) {
let domString = '';
      domString += `
      <div class=" system-bigCard text-center ${planetSystemId}">
         <button class="close-system d-flex justify-content-end" style="color:red;">X</button>
         <h2>${planetSystem.name}</h2>
         <img src="${planetSystem.planetaryImg}"/>
         <h5>Size = ${planetSystem.size}</h5>
         <h5>Ally? = ${planetSystem.isAlly}</h5>
         <p>${planetSystem.info}</p>
     </div>
        `;
});
  utilities.printToDom('bigSystem', domString);
};

• Now you'll need to create an event listener at the bottom of const systemMissionCard, so that upon clicking class="view-system-details" the bigSystemCard function will be called. Should look something along the lines of: $(document.body).on('click', '.view-system-details', bigSystemCard);
• Finally we want the big card to be able to close so we can go back to the mission details, so we'll need one more event listener to call at the bottom of const systemMissionCard, that upon click of the "X" button in the top right corner of the bigSystemCard, will close out the big card, and reprint the original mission details cards:

const closeBigSystemCard = () => {
  $('body').on('click', '.close-system', () => {
    utilities.printToDom('bigSystemCard', '');
    *insert function that prints all component cards inside the mission after clicking "View Details*
  });
};

[gregkorte]

In AC: On READ, they should only be able to see the one planetary system attributed to the mission.