nss-evening-cohort-12 / nutshell-elk Goto Github PK

View Code? Open in Web Editor NEW

0.0 1.0 3.0 235 KB

Renaissance Faire

HTML 1.80% JavaScript 88.19% CSS 10.01%

nutshell-elk's Introduction

nutshell-elk

Renaissance Faire

nutshell-elk's People

Contributors

Watchers

Forkers

bnemchak psihanorak markyaaronyoung

nutshell-elk's Issues

User Story

As a developer, when I create this repo, I should set up with webpack and implement firebase

AC

WHEN the Dev opens this repo
THEN I should have an index.html, main.scss, and main.js files for starters
AND there should be all of the necessary webpack files and installs

Dev Notes

Create setup branch
Create firebase project on firebase.google.com
One person creates these files - MUST BE DONE FIRST

Authentication (Logged Out)

As a user when I am logged out I will not be able to access the Events dashboard.

AC

When logged out I will see displayed the Food/Souvenirs/Shows/Staff module
Then I will no longer see the Events module for me to click and access

Dev Notes

If (user) logged out hideEvents()

Enable Google Authentication for Login

User Story

As a developer, I need to enable Google authentication for the site login

AC

WHEN the user clicks the "login" button in the navbar
THEN a popup should appear
AND they should be able to log in to the site using their google credentials
AND once they are logged in, the "login" button should not be visible
AND once logged in they should be able to perform all actions on the dashboard (full CRUD).
AND the "logout" button should be visible

Dev Notes

Enable Google in the authentication section of Firebase
Make auth.js, authData.js files
For login, use const logIn and const loginButton on auth.js, and const checkLoginStatus on authData.js
For logout, use const logoutEvent on navbar.js

Ability to Edit a Show

User Story

As a user, I should be able to edit my spellin' mistakes on Shows.

AC

WHEN the logged-in user visits the Shows section of the site via the homepage
THEN they should see all of the current shows on display
AND there should also be a visible option to edit the shows
AND once they edit the item, it should be changed in the firebase database
AND they should see it change on the display when they hit the update button
AND if the user is not logged in, they should not see an option to edit

Dev Notes

use a const getShows function and axios.get in showData.js to obtain the showId
easier option: use dataset or modal to bring up the edit form on the same page
challenge option: inline editing
create an editShow.js file
use this function in the showData.js file:

const updateShow = (showId, editedShow) => axios.put(`${baseUrl}/show/${showId}.json`, editedShow);

use bootstrap form to edit shows

<form>
  <div class="form-group">
    <label for="editShow-name">Name</label>
    <input type="text" class="form-control" id="editShow-name">
  </div>
  <div class="form-group">
    <label for="editShow-time">Scheduled Time</label>
    <input type="text" class="form-control" id="editShow-time">
  </div>
  <div class="form-group">
    <label for="editShow-desc">Description</label>
    <input type="text" class="form-control" id="editShow-desc">
  </div>
<div class="form-group">
    <label for="editShow-imageUrl">Image Url</label>
    <input type="text" class="form-control" id="editShow-imageUrl">
  </div>
  <button type="submit" class="btn btn-primary" id="show-editor">Update!</button>
</form>

use a click event to show the edit form that takes the showId
use a click event to update the information from the edit form

Seed Data for Souvenirs

User Story

As a developer I need to be able to access my seeded data for each module in firebase

AC

WHEN I visit the page I should see it populated with the data stored in firebase
AND upon login, it should be CRUD compatible

Dev Notes

create a souvenirs.json file and upload to firebase

{
  "souvenir1": {
      "name": "Sword",
      "price": 15,
      "description": "blah blah blah blah"
      "imageUrl": "http://www.coolpic.net"
  },
  "souvenir2": {
      "name": "Crown",
      "price": 20,
      "description": "blah blah blah blah"
      "imageUrl": "http://www.coolpic.net"
  },
  "souvenir3": {
      "name": "goblet",
      "price": 100,
      "description": "blah blah blah blah"
      "imageUrl": "http://www.coolpic.net"
  }
}

Ability to Edit Staff

User Story

As a user, I should be able to edit my spellin' mistakes on Staff.

AC

WHEN the logged-in user visits the Staff section of the site via the homepage
THEN they should see all of the current staff on display
AND there should also be a visible option to edit the staff
AND once they edit the item, it should be changed in the firebase database
AND they should see it change on the display when they hit the update button
AND if the user is not logged in, they should not see an option to edit

Dev Notes

use a const getStaff function and axios.get in staffData.js to obtain the staffId
easier option: use dataset or modal to bring up the edit form on the same page
challenge option: inline editing
create an editStaff.js file
use this function in the staffData.js file:

const updateStaff = (staffId, editedStaff) => axios.put(`${baseUrl}/staff/${staffId}.json`, editedStaff);

use bootstrap form to edit staff

<form>
  <div class="form-group">
    <label for="editStaff-name">Name</label>
    <input type="text" class="form-control" id="editStaff-name">
  </div>
  <div class="form-group">
    <label for="editStaff-jobTitle">Job Title</label>
    <input type="text" class="form-control" id="editStaff-jobTitle">
  </div>
<div class="form-group">
    <label for="editStaff-imageUrl">Image Url</label>
    <input type="text" class="form-control" id="editStaff-imageUrl">
  </div>
  <button type="submit" class="btn btn-primary" id="staff-editor">Update!</button>
</form>

use a click event to show the edit form that takes the staffId
use a click event to update the information from the edit form

General Requirements Part 2

Renaissance Faire Part 2

The owners of FreeLancer were very pleased with the results of V1 of their website but didn't have enough money to continue paying the same developers so they hired you. Now that they are able to perform full CRUD on Food, Souvenirs, Shows, and Staff they would like to be able to bring all the modules together and create events that get Food, Souvenirs, Shows, and Staff assigned to them. They would also like to be able to do some financial reporting and graphing to easily visualize how much revenue they are bringing in both per event and for all events. This application will mainly be used by the companies event planners.

Project Manager

Your Project Manager is LUKE

Due Date

The demo for this project will take place on Tuesday August 4th

Requirements

See Part 1 General Requirements Ticket - all those general requirements still apply.

High Level MVP

Authenticated user is the Event planner
Event Module
Financial Reporting
Graphing

User Stories

Authentication

As a user, when I am logged in I should have access to an events dashboard.
As a user, when I am logged out I should NOT have access to an events dashboard.
As a user, when I am on the Events page I should only be able to modify or delete events I have created

Events

As a user, I should be able to add Renaissance Fair Events.
As a user, I should be able to add Staff to an Event I have created.
As a user, I should be able to add Food to an Event I have created.
As a user, I should be able to add Shows to an Event I have created.
As a user, I should be able to add Souvenirs from an Event I have created.
As a user, I should be able to delete Staff from an Event I have created.
As a user, I should be able to delete Food from an Event I have created.
As a user, I should be able to delete Shows from an Event I have created.
As a user, I should be able to delete Souvenirs from an Event I have created.
As a user, I should be able to see(READ) entire Event with all the Staff, food, Shows, and Souvenirs.

Financial Reporting

As a user, I should be able to see a detail page for a specific event.
As a user, I should be able to see financial reporting broken up per module (Food, Shows, Souvenirs, Staff) for a specific event.
As a user, I should be able to see financial totals broken up per module (Food, Shows, Souvenirs, Staff) for a specific event.
As a user, I should be able to see the total cost of a specific event.
STRETCH GOAL: As a user, I should be able to filter a list of all costs for all modules by module name or by price range

Graphing

As a user, I would like to be able to see a column chart on the specific event page that displays the cost for each module (ie module on the x axis cost on the y axis).
As a user, I would like to see a graph on the Events dashboard that shows costs across ALL events.
As a developer, I would like to use AmCharts to make all charts - use the free version.

NOTE - If your group finishes everything please ask your Project Owner for stretch goals - DO NOT MAKE UP YOUR OWN

Ability to See All Available Souvenirs

blocked by (#23)

User

As a user, when I visit the Souvenirs page not logged in I should see rows of cards of each available souvenir member.

AC

WHEN the user visits the Souvenir section of the site via the homepage
THEN they should only see the available items displayed

WHEN the user is Logged-in they should see all of the items displayed
AND there should also be a visible option to edit the souvenir and delete the souvenir
AND there should be a add souvenir button at the top of the page

dev notes

create a buildSouv folder
create a buildSouv.js file in that folder
use souvData.js to populate the cards (#23)
use a bootstrap card

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Name</h5>
    <h5 class="card-title">Price</h5>
    <h5 class="card-title">Description</h5>
</div>

edit button

<button type="button" class="btn btn-dark" id="edit"><i class="fas fa-user-edit"></i></button>

delete button

<button type="button" class="btn btn-dark" id="delete"><i class="fas fa-trash-alt"></i></button>

# Delete Events Collection

User Story

As a user, I should be able to delete only the events I've created as well as delete souvenirs, shows, staff, and food items I've added to that event

AC

When a user is authenticated
And Then they click on an event page
Then the user can delete an entire event
When they click on a delete button on the specific event page

Dev Notes

create an event collection div
AddClass.hide unless user is authenticated
src/javascripts/components/deleteEvent/deleteEvent.js
src/javascripts/components/deleteEventItems/deleteEventItems.js
*$('body'). on('click', '.delete-event', deleteEvent)
Use axios.delete() to remove events from firebase. src/javascripts/helpers/data/eventData

Ability to See All Available Foods

User Story

As a user, I should be able to see all possible Foods at my Renaissance Fair.

AC

WHEN the logged-in user visits the Food section of the site via the homepage
THEN they should see all of the current food on display
AND there should also be visible options to edit and delete the food
AND there should be an add food button at the top of the page
AND if the user is not logged in, they should not see any modifying buttons.

dev notes

create a foodList folder
create a foodList.js file in that folder
use foodData.js to populate the cards
use a bootstrap table

<table class="table">
  <thead>
    <tr>
      <th scope="col">Food</th>
      <th scope="col">Price</th>
      <th scope="col">Edit</th>
      <th scope="col">Delete</th>
     <th scope="col">Is Available?</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">${food.imageUrl}</th>
      <td>${food.name}</td>
      <td>${food.price}</td>
      <td><button type="button" class="btn btn-dark"><i class="fas fa-user-edit"></i></button></td>
      <td><button type="button" class="btn btn-dark"><i class="fas fa-trash-alt"></i></button></td>
     <td><div>
     <input type="checkbox" id="food" name="food">
      <label for="food"></label>
      </div></td>
    </tr>
  </tbody>
</table>

edit button

<button type="button" class="btn btn-dark"><i class="fas fa-user-edit"></i></button>

delete button

<button type="button" class="btn btn-dark"><i class="fas fa-trash-alt"></i></button>

Ability to Add a Souvenir

User Story

As a user, I should be able to add possible souvenirs to my Renaissance Fair.

WHEN the logged-id user visits the souvenirs section of the site via the homepage
THEN they should see all of the available souvenirs on display
AND there should be an option to add a souvenir on the page
AND there should be a form to add the souvenir
AND they should see it change on the display when they hit the add button
AND if the user is not logged in, they should not see an option to add

Dev Notes

create addSouvenir.js
use bootstrap form to fill in data

<form>
  <div class="form-group">
    <label for="addSouvenir-name">Souvenir name</label>
    <input type="text" class="form-control" id="addSouvenir-name">
  </div>
  <div class="form-group">
    <label for="addSouvenir-price">Price</label>
    <input type="text" class="form-control" id="addSouvenir-price">
  </div>
<div class="form-group">
    <label for="addFSouvenir-imageUrl">Image Url</label>
    <input type="text" class="form-control" id="addSouvenir-imageUrl">
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Is Currently Available</label>
  </div>
  <button type="submit" class="btn btn-primary" id="souvenir-adder">Update!</button>
</form>

in souvenirData.js use Axios to post a food to the firebase database

const addsouvenir = (newItem) => axios.post(`${baseUrl}/souvenirs.json`, newItem);

Landing Page

User

As a User, I should see a landing page with Cards of Categories.

AC

When I visit the Page, I should see Cards of Categories,
Then I should see a way to login
Then Then I should see buttons to open up each category

dev notes

cards should be from bootstrap
boot strap cards are hardCoded

  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Ability to see All Staff

blocked by (#7 )

User

As a user, when I visit the staff page I should see rows of cards of each staff member.

AC

WHEN the logged-in user visits the Staff section of the site via the homepage
THEN they should see all of the current staff on display
AND there should also be a visible option to edit the staff and delete the staff member
AND there should be a add staff button at the top of the page
AND if the user is not logged in, they should not see any modifying buttons.

dev notes

create a buildStaff folder
create a buildStaff.js file in that folder
use staffData.js to populate the cards
use a bootstrap card

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Name</h5>
    <h5 class="card-title">Job</h5>
    <h5 class="card-title">Id Number</h5>
</div>

edit button

<button type="button" class="btn btn-dark"><i class="fas fa-user-edit"></i></button>

delete button

<button type="button" class="btn btn-dark"><i class="fas fa-trash-alt"></i></button>

Ability to Add a Show

User Story

As a user, I should be able to add shows to my Renaissance Fair.

WHEN the logged-in user visits the shows section of the site via the homepage
THEN they should see all of the currently scheduled shows on display
AND there should be a button to add shows on the page
AND there should be a form to add the show
AND they should see it change on the display when they hit the add button
AND if the user is not logged in, they should not see an option to add

Dev Notes

create addShow.js
use bootstrap form to fill in data

<form>
  <div class="form-group">
    <label for="addShow-name">Name</label>
    <input type="text" class="form-control" id="addShow-name">
  </div>
  <div class="form-group">
    <label for="addShow-scheduledTime">Job Title</label>
    <input type="text" class="form-control" id="addShow-scheduledTime">
  </div>
<div class="form-group">
    <label for="addShow-description">Description</label>
    <input type="text" class="form-control" id="addShow-description">
  </div>
<div class="form-group">
    <label for="addShow-imageUrl">Image Url</label>
    <input type="text" class="form-control" id="addShow-imageUrl">
  </div>
  <button type="submit" class="btn btn-primary" id="show-adder">Update!</button>
</form>

in showData.js use Axios to post a food to the firebase database

const addShow = (newShow) => axios.post(`${baseUrl}/shows.json`, newShow);

Seed data for staff

User Story

As a developer I need to be able to access my seeded data for each module in firebase

AC

WHEN I visit the page I should see it populated with the data stored in firebase
AND upon login, it should be CRUD compatible

Dev Notes

create a staff.json file and upload to firebase

{
  "staff1": {
      "name": "Inigo Montoya",
      "jobTitle":  "Entertainer",
      "imageUrl": "http://www.coolpic.net"
  },
  "staff2": {
      "name": "Fezzik",
      "jobTitle": "Security",
      "imageUrl": "http://www.coolpic.net"
  },
  "staff3": {
      "name": "Buttercup",
      "jobTitle": "Queen",
      "imageUrl": "http://www.coolpic.net"
  }
}

General Requirements

Renaissance Faire Dashboard

Welcome to FreeLancer the worlds go to organizer of Renaissance Fairs. Now that your company has proven its worth at staffing all sorts of different Renaissance events the owners have decided to come out of the dark ages and build one of those FANCY things on the World Wide Web.

Your task is to create a dashboard for the owners to keep track of the Food, Souvenirs, Shows, and Staff they have available across all locations. They should be able to perform full CRUD on each of those 4 topics. Additionally they should be able to authenticate into the application - if they are not authenticated the website should perform READ only operations.

The owners of FreeLancer are expecting to see some great branding but they aren't sure what they want so make it flashy and make it remind them about why they fell in love with Renaissance Fairs in the first place.

Due Date

The demo for this project will take place on Monday July 20th

Requirements

Labor Division

Everyone on your team is responsible for CRUD on one collection.
If your project requires more collections than you have people it is expected that you evenly distribute the remaining work
We expect everyone's code contributions to be close (within 200 lines of code) by the end of the project
Are you a CSS wizard? If so you shouldn't be doing CSS on this project. Pick tickets that are outside your comfort zone.

Planning Requirements

Each team has been assigned a Project Manager. Your Project Manager is Luke
Your product owner is the only person you can ask requirement questions - none of the other Project Managers know your project
You can ask any instructor coding questions
Your site should be fully branded - so you should have wireframes as needed
You MUST show your Product Manager your ERD and wireframes before you begin writing tickets
Your team should be writing good tickets. Instructors will NOT be checking tickets but if you come asking for help and the ticket you are working on doesn't have dev notes we will send you back to your team.

Technical Requirements

The only link that you can demo is a deployed firebase link
Create 1 firebase project - team leads will own this (add everyone else on your team)
You can use ANY technology we have used so far - jquery, bootstrap, es6 modules, etc
Properly use github - a branch for each feature. Test each others PRs.
CLEAN CODE - there should be no eslint errors or warnings on a PR and functions should obey single responsibility principle

High Level MVP

Authentication for (CUD)
Food Module
Souvenirs Module
Shows Module
Staff Module
Fully branded webpage

NOTE - If your group finishes everything please ask your Project Owner for stretch goals - DO NOT MAKE UP YOUR OWN

Ability to Delete a Souvenir

User Story

As a user, I should be able to delete a staff member from the Renaissance Fair.

WHEN the logged-in user visits the Souvenirs section of the site via the homepage
THEN they should see all of the Souvenirs on display
AND there should be a button to delete a souv on the page
AND if the user is not logged in, they should not see an option to delete

Dev Notes

in souvData.js use Axios to delete staff from the firebase database

const deleteSouv = (souvId) => axios.delete(`${baseUrl}/souvenir/${souvId}.json`);

Ability to See All Available Shows

blocked by (#20)

User

As a user, when I visit the Shows page not logged in I should see rows of cards of each available Show.
As a user, when I visit the Shows page logged in I should see rows of cards of each Show.

AC

WHEN the user visits the Show section of the site via the homepage
THEN they should only see the available Shows displayed

WHEN the user is Logged-in they should see all of the Shows displayed
AND there should also be a visible option to edit the Show and delete the Show
AND there should be a add Show button at the top of the page

dev notes

create a buildShow folder
create a buildShow.js file in that folder
use showData.js to populate the cards (#20)
use a bootstrap card

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Name</h5>
    <h5 class="card-title">Scheduled Time</h5>
    <h5 class="card-title">Description</h5>
</div>

edit button

<button type="button" class="btn btn-dark" id="edit"><i class="fas fa-user-edit"></i></button>

delete button

<button type="button" class="btn btn-dark" id="delete"><i class="fas fa-trash-alt"></i></button>

Ability to Edit a Food

User Story

As a user, I should be able to edit my spellin' mistakes on Foods.

AC

WHEN the logged in user visits the Foods section of the site via the homepage
THEN they should see all of the available foods on display
AND there should also be a visible option to edit the foods
AND once they edit the item, it should be changed in the firebase database
AND they should see it change on the display when they hit the update button
AND if the user is not logged in, they should not see an option to edit

Dev Notes

create an editFoods.js file
use a const getFoods function and axios.get in foodData.js to obtain the foodId
easier option: use dataset or modal to bring up the edit form on the same page
challenge option: inline editing within the table
use this function in the foodData.js file:

const updateFood = (foodId, editedFood) => axios.put(`${baseUrl}/foods/${foodId}.json`, editedFood);

use bootstrap form to fill in data

<form>
  <div class="form-group">
    <label for="food-name">Food name</label>
    <input type="text" class="form-control" id="food-name">
  </div>
  <div class="form-group">
    <label for="food-price">Price</label>
    <input type="text" class="form-control" id="food-price">
  </div>
<div class="form-group">
    <label for="food-imageUrl">Image Url</label>
    <input type="text" class="form-control" id="food-imageUrl">
  </div>
<div class="form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Is Currently Available</label>
  </div>
  <button type="submit" class="btn btn-primary" id="food-editor">Update!</button>
</form>

use a click event to show the edit form that takes the foodId
use a click event to update the information from the edit form

Food Collection

User Stories

As a user, I should be able to add possible Foods to my Renaissance Fair. (#16)
As a user, I should be able to see all possible Foods at my Renaissance Fair. ( #21 )
As a user, I should be able to edit my spellin' mistakes on Foods. ( #17 )
As a user, I should be able to delete a crappy Food from my Renaissance Fair. (#18)

# Create Financial Reporting Per Module/Component for Event

User Story

As a user, I should be able to see financial reporting broken up per module (Food, Shows, Souvenirs, Staff) for a specific event.

AC

When a user is authenticated
And is on the financial reporting page for a specific event
Then they should see a table
And each column will be a component (food, souvenir, show, staff) and the total
And a row for each component's cost

Dev Notes

Create a table to display data/costs
Create a smash function that grabs price by component Id (foodId, souvenirId, showId, staffId) for example see issue 108

Ability to Add Staff

User Story

As a user, I should be able to add staff to my Renaissance Fair.

WHEN the logged-in user visits the Staff section of the site via the homepage
THEN they should see all of the currently employed staff on display
AND there should be an button to add staff on the page
AND there should be a form to add the staff
AND they should see it change on the display when they hit the add button
AND if the user is not logged in, they should not see an option to add

Dev Notes

create addStaff.js
use bootstrap form to fill in data

<form>
  <div class="form-group">
    <label for="addStaff-name">Name</label>
    <input type="text" class="form-control" id="addStaff-name">
  </div>
  <div class="form-group">
    <label for="addStaff-jobTitle">Job Title</label>
    <input type="text" class="form-control" id="addStaff-jobTitle">
  </div>
<div class="form-group">
    <label for="addStaff-imageUrl">Image Url</label>
    <input type="text" class="form-control" id="addStaff-imageUrl">
  </div>
  <button type="submit" class="btn btn-primary" id="staff-adder">Update!</button>
</form>

in staffData.js use Axios to post a food to the firebase database

const addStaff = (newEmployee) => axios.post(`${baseUrl}/staff.json`, newEmployee);

Site Style/Theme

User Story

As a user, I need to see a b-e-a-utiful website

AC

WHEN the user visits the site
THEN they should see a cohesive theme across the pages
AND it should be styled with good-looking fonts, colors, and images

Dev Notes

use https://coolors.co/a44200-75b8c8-f7e8a4-455f48-646b61 for color palette
use Bootsrap, Sass, Fontawesome, and Google fonts
consider https://unsplash.com/s/photos/castle
fonts.google.com Fondamento font family for headers

Ability to Add A Food

User Story

As a user, I should be able to add possible Foods to my Renaissance Fair.

WHEN the logged-id user visits the Foods section of the site via the homepage
THEN they should see all of the available foods on display
AND there should be an option to add a food on the page
AND there should be a form to add the food
AND they should see it change on the display when they hit the add button
AND if the user is not logged in, they should not see an option to add

Dev Notes

create addFood.js
use bootstrap form to fill in data

<form>
  <div class="form-group">
    <label for="addFood-name">Food name</label>
    <input type="text" class="form-control" id="addFood-name">
  </div>
  <div class="form-group">
    <label for="addFood-price">Price</label>
    <input type="text" class="form-control" id="addFood-price">
  </div>
<div class="form-group">
    <label for="addFood-imageUrl">Image Url</label>
    <input type="text" class="form-control" id="addFood-imageUrl">
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Is Currently Available</label>
  </div>
  <button type="submit" class="btn btn-primary" id="food-adder">Update!</button>
</form>

in foodData.js use Axios to post a food to the firebase database

const addFood = (newFoods) => axios.post(`${baseUrl}/foods.json`, newFoods);

Shows Collection

User Stories

As a user, I should be able to add possible shows to my Renaissance Fair. (#31)
As a user, I should be able to see all possible shows at my Renaissance Fair. ( #20 )
As a user, I should be able to edit my spellin' mistakes on shows. #28
As a user, I should be able to delete a crappy show from my Renaissance Fair #30

# Bugs Found

user can't view food when logged out. User should be able to view food when logged out.
uncaught error type

Graph Chart All Events

As a user when I click on the Events page I want to see all the events and the associated graph charts for each event.

AC

When logged in and on the homepage I can see an events button that I can click
And once I click the events button I will be taken to the events page viewing all events
And I can see graph charts associated to each event showing the cost of each event.

Dev Notes

src/javascript/helpers/data/chartAllEventData
https://www.amcharts.com/demos/clustered-column-chart/?theme=moonrisekingdom
https://www.npmjs.com/package/@amcharts/amcharts4

Re-printing Landing Page

User Story

As a User, When I view a category, I should not see the landing page.

AC

When a user clicks on view
Then the landing page should disappear
Then the chosen category should appear

Dev Notes

Delete hide classes and reprint the dom instead.

Ability to Delete a Food

User Story

As a user, I should be able to delete a food from the menu.

WHEN the logged-in user visits the Food section of the site via the homepage
THEN they should see all of the currently available food on display
AND there should be an button to delete food on the page
AND if the user is not logged in, they should not see an option to delete

Dev Notes

in foodData.js use Axios to delete staff from the firebase database

const deleteFood = (foodId) => axios.delete(`${baseUrl}/food/${foodId}.json`);

Authentication

User Stories

As a user, when I am unauthenticated I should be able to see the dashboard (Read only). (#12)
As a user, when I am authenticated I should be able to perform all actions on the dashboard (full CRUD).
As a user, I should be able to login via google. (#13 )
As a user, I should be able to logout(#22)

Create Navbar

User Story

As a user, I should see a navbar on every page with a logo and a authentication log in button\

AC

WHEN the user is navigating the site
THEN they should always see a navbar at the top of the page
THEN they should see a clickable logo
THEN they should see a login button to the right

Dev Notes

hard code navbar

bootstrap navbar

  <nav class="navbar navbar-light bg-light">
    <a class="navbar-brand " href="#">
      <i class="fab fa-fort-awesome-alt"></i>
    </a>
    <div id="auth"></div>
    <button class="nav-link btn btn-danger" id="navbar-logout-button">Logout!</button>
  </nav>

create navBar component folder
create navbar.js file in the folder
add logout function in the file

import firebase from 'firebase/app';
import 'firebase/auth';

const logoutEvent = () => {
  $('#navbar-logout-button').click((e) => {
    e.preventDefault();
    firebase.auth().signOut();
  });
};

export default { logoutEvent };

# Read Events Page

User Story

As a user, I should be able to see(READ) entire Event with all the Staff, Food, Shows, and Souvenirs.

AC

When a user is authenticated
And they click on the Event Page button
Then they can see a specific event
And all the Staff, Food, Shows, and Souvenirs added/pinned to that event

Dev Notes

Create a landing page/container div for events.js
src/javascripts/component/events.js
src/javascripts/components/eventsList.js
printToDom using #events-page
Create an Events Page button
create events.json

name:
food:
show:
staff:
souvenirs:
cost:

Addclass.hide unless the user is logged in
create axios.put() commands to firebase to add to data

Seed Data for Shows

User Story

As a developer I need to be able to access my seeded data for each module in firebase

AC

WHEN I visit the page I should see it populated with the data stored in firebase
AND upon login, it should be CRUD compatible

Dev Notes

create a shows.json file and upload to firebase

{
  "show1": {
      "name": "Sword Swallower",
      "scheduledTime": 12:00,
      "description": "blah blah blah blah blah",
      "imageUrl": "http://www.coolpic.net"
  },
  "show2": {
      "name": "Joust",
      "scheduledTime": 2:00,
      "description": "blah blah blah blah blah",
      "imageUrl": "http://www.coolpic.net"
  },
  "show3": {
      "name": "Glass Blowing",
      "scheduledTime": 4:00,
      "description": "blah blah blah blah blah",
      "imageUrl": "http://www.coolpic.net"
  }
}

# Create Financial Reporting Page

User

As a user, I should be able to see a detail page for a specific event.

AC

When a user is authenticated
And clicks on a financial reporting button
That is located on a specific event page
Then they will be taking to a financial reporting page for that specific event

Dev Notes

create Financial Reporting landing page/div for finances.js
printToDom using #finances-page
Create a Financial Reports button
Addclass.hide unless the user is logged in
src/javascripts/component/finances/finances.js
$('body').on('click', '.finances-page, finances)
Form will print to #finances-page div using utils.printToDom('#finances-page, domString); function

Ability to Delete a Staff member

User Story

As a user, I should be able to delete a staff member from the Renaissance Fair.

WHEN the logged-in user visits the Staff section of the site via the homepage
THEN they should see all of the currently employed staff on display
AND there should be an button to delete staff on the page
AND if the user is not logged in, they should not see an option to delete

Dev Notes

in staffData.js use Axios to delete staff from the firebase database

const deleteShow = (staffId) => axios.delete(`${baseUrl}/staff/${staffId}.json`);

Souvenirs Collection

User Stories

As a user, I should be able to view all the Souvenirs in the Faire ( #23 )
As a user, I should be able to create a new souvenir. (#27)
As a user, I should be able to edit a souvenir. (#33)
As a user, I should be able to delete a souvenir (#24)

Seed Data for Food

User Story

As a developer I need to be able to access my seeded data for each module in firebase

AC

WHEN I visit the page I should see it populated with the data stored in firebase
AND upon login, it should be CRUD compatible

Dev Notes

create a foods.json file and upload to firebase

{
  "food1": {
      "name": "Elephant Ear",
      "price": 8,
      "imageUrl": "http://www.coolpic.net",
      "isAvailable": true
  },
  "food2": {
      "name": "Funnel Cake",
      "price": 6,
      "imageUrl": "http://www.coolpic.net",
      "isAvailable": true
  },
  "food3": {
      "name": "Turkey Leg",
      "price": 10,
      "imageUrl": "http://www.coolpic.net",
      "isAvailable": false
  }
}

Staff Collection

As a user, I should be able to add possible Staff to my Renaissance Fair. (#11 )
As a user, I should be able to see all possible Staff at my Renaissance Fair. ( #7 )
As a user, I should be able to edit my spellin' mistakes on Staff. ( #9 )
As a user, I should be able to delete a crappy Staff from my Renaissance Fair. (#10 )

Ability to Edit a Souvenir

User Story

As a user, I should be able to edit my spellin' mistakes on Souvenirs.

AC

WHEN the logged-in user visits the Souvenirs section of the site via the homepage
THEN they should see all of the current souvenirs on display
AND there should also be a visible option to edit the souvenirs
AND once they edit the item, it should be changed in the firebase database
AND they should see it change on the display when they hit the update button
AND if the user is not logged in, they should not see an option to edit

Dev Notes

use a const getSouvenirs function and axios.get in souvenirData.js to obtain the souvenirId
easier option: use dataset or modal to bring up the edit form on the same page
challenge option: inline editing
create an editSouvenirs.js file
use this function in the souvenirData.js file:

const updateStaff = (souvenirId, editedSouvenir) => axios.put(`${baseUrl}/souvenir/${souvenirId}.json`, editedSouvenir);

use bootstrap form to edit souvenir

<form>
  <div class="form-group">
    <label for="editSouvenir-name">Name</label>
    <input type="text" class="form-control" id="editSouvenir-name">
  </div>
  <div class="form-group">
    <label for="editSouvenir-price">Price</label>
    <input type="text" class="form-control" id="editSouvenir-price">
  </div>
  <div class="form-group">
    <label for="editSouvenir-desc">Description</label>
    <input type="text" class="form-control" id="editSouvenir-desc">
  </div>
<div class="form-group">
    <label for="editSouvenir-imageUrl">Image Url</label>
    <input type="text" class="form-control" id="editSouvenir-imageUrl">
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Is Currently Available</label>
  </div>
  <button type="submit" class="btn btn-primary" id="souvenir-editor">Update!</button>
</form>

use a click event to show the edit form that takes the souvenirId
use a click event to update the information from the edit form

Authentication (Logged In)

As a user when I am logged in I should be able to access the Events dashboard.

AC

When logged in I should be on the home page which displays Food/Souvenirs/Shows/Staff modules
And I should see an Events module that is accessible
Then once I click the view button on the Events module I can then view all events available.

Dev Notes

If (user) logged in showEvents() on click id="viewEvents"
events will print out on domString

Issue : Landing Page Bug Nest

Landing Page 🐛

The Landing page currently Hides by adding a display class to it when a component is viewed. This needs to be changed so that the Landing Page reprints to the dom with nothing in it.

Steps to reproduce

Go to landingPage.js
Create a new function

 const hideLanding = () => {
  const domString = '<div class="empty-landing"></div>';
  utils.printToDom('#landingPage', domString);
};

got to each component and import the landing page component
Go into each component and replace

$('#landingPage').addClass('hide')

with

 landingPage.hideLanding();

if the component has

$('#landingPage').removeClass('hide')

use

 landingPage.buildLandingPage();

Ability to Delete a Show

User Story

As a user, I should be able to delete a staff member from the Renaissance Fair.

WHEN the logged-in user visits the Show section of the site via the homepage
THEN they should see all of the currently scheduled shows on display
AND there should be an button to delete shows on the page
AND if the user is not logged in, they should not see an option to delete

Dev Notes

in showData.js use Axios to delete staff from the firebase database

const deleteShow = (showId) => axios.delete(`${baseUrl}/show/${showId}.json`);

Give User Logout Ability

completed on #22

# Update/Edit items on Events Collection

User Story

As a user, I should be able update the quantities (remove/add) individual souvenir items, show items, staff members, and food items that have been added to the event without deleting/adding them completely from Firebase.

AC

When a user is authenticated
And on an event page
Then a user can click on an individual component (staff, souvenir, show, food)
And change the quantity.

Dev Notes

Create a component to edit an entire event - src/javascripts/components/editEvent/editEvent.js
Create individual components to edit each item on an event -src/javascripts/components/editEventFood/editEventFood.js

src/javascripts/components/editEventStaff/editEventStaff.js
src/javascripts/components/editEventShow/editEventShow.js
src/javascripts/components/editEventSouvenirs/editEventSouvenirs.js

$('body'). on('click', '.edit-eventStaff', editEventStaff)
$('body'). on('click', '.edit-eventSouvenirs', editEventSouvenirs)
$('body'). on('click', '.edit-eventFoods', editEventFoods)
$('body').on('click', '.edit-eventShows', editEventShows)

create !base.json

User Story

As a developer I need a roadmap for how my data will be seeded in firebase

AC

WHEN I visit the page, I should see it populated with the data stored on firebase
AND and when I log in, it should be CRUD compatible

Dev Notes

create a !base.json file that will serve as a template for how the data will be stored in firebase

{
  "food": "cool",
  "souvenirs": "cooler",
  "shows": "coolerer",
  "staff": "coolest"
}

# Add Events Collection

User Story

As a user, I should able to add events to my event page

AC

When a user is authenticated
Then clicks on a "Add New Event" button
Then it should create a page container
Where I can add staff, souvenirs, food, and show items onto

Dev Notes

Create a landing page/container div for events.js
printToDom using #events-page
Create a single Create Event button
Addclass.hide unless the user is logged in
Create addEventForm() use bootstrap form bootstrap form
src/javascripts/component/addEventForm/addEventForm.js
$('body').on('click', '.add-event-form', addEventForm)
Form will print to #new-event div using utils.printToDom('#new-event, domString); function
Create addEvent() that takes values from form and creates new event object
$('body').on('click', '.submit-event-form', addEvent)
create axios.post() commands to firebase to add to data
Dropdown example code, see example

# ERD

Graph Chart Per Event

As a user when I click and view a certain event I will also see a chart graph showing the cost of the event.

AC

When logged in and on the homepage I can see an events button that I can click
And once I click the events button I can view all events available.
Then I can view each event individually and be able to delete and price will update
And once I click to view that event I can see food/souvenirs/shows/staff pertaining to that event
And I can see the total cost of modules that make up that event

Dev Notes

Each event will have its own id.
src/javascript/helpers/data/chartPerEventData
https://www.amcharts.com/demos/clustered-column-chart/?theme=moonrisekingdom
https://www.npmjs.com/package/@amcharts/amcharts4