Sectors: Create

[mariabrock]

User Story

As a user, I should be able to add a Planetary Sector.

AC

WHEN I click on the Add Data button THEN I should see a modal that has a form nested inside it AND I can enter information about a new sector AND when I click the create/save button there will be a new entry added to the database

Dev Notes

*this satisfies the CREATE component of C.R.U.D.

1. Wireframe

   • see wireframe below for how the modal should appear after a user clicks on the Add Data button

2. Modal and Form

   • use a bootstrap modal and a form nested within the modal to allow a user to fill in form categories for a new sector

• for styling please reference the Imperial style guide below

• the modal should be on index.html, and remain hidden until called for.

• the event listener for the Add Data button should look something like this: $('#sectors').on('click', '.print-sector', buildSector);

3. Saving Data
   • when save button is clicked, write a function named createNewSector in sectors.js

• createNewSector will add a new entry in the JSON in firebase to be accessed

• the createNewSector function should add your new data entry to the list of sectors that can be selected

[mariabrock]

Button: https://getbootstrap.com/docs/4.3/components/buttons/#examples Form: https://getbootstrap.com/docs/4.3/components/forms/#layout Modal: https://getbootstrap.com/docs/4.3/components/modal/#modal-components

Style guide: https://imperialstyleguide.com/

[mariabrock]

[ConnorSullivan10]

CREATE functionality works, but the "Add Data" button should only display when the user is logged in. Newly added data should display at the top of the page.

1. Add this as the first statement under addSectors in sectors.js: e.stopImmediatePropagation();

2. Move event listener to the very end of the displayAllSectors function, as the displayAllSectors function will be called upon login AND logout, and thus the CRUD buttons will only print after logging in: $('#save-button').on('click', addNewSector);