/AngularEventPlanner

Javascript Week #3 and #4 Independent Project

Primary LanguageTypeScript

Mark Strickland

GitHub avatar for author MarkStrickland562

MarkStrickland562

eHappenings Event Planner (Angular)

Created April 5, 2019. Finalized April 12, 2019.

Description

This project is a re-development of a C#-based team project from the Epicodus C# class called eHappenings. The C# code has been converted to javascript and Angular and the C# Model/View/Controller structure has been converted to the Angular Model/View/Component structure. Much of the styling has been kept from the C# project and credit for the styling goes to Clara Munro and Micaela Jawor. Credit for the format of this README largely goes to Shawn Lunsford.

The application can be accessed through this URL: https://angulareventplanner-386c7.firebaseapp.com

Technical Features

  • Angular 5
  • Typescript
  • Bootstrap
  • jQuery
  • Numerous external styling resources
  • 7 model classes
  • 45 child components
  • 7 pipes
  • 39 routes
  • 8 services
  • 1 API

Known Bugs

User authentication is installed but it's getting blocked by Google, apparently, so the Login button on the splash page will take the end-user into the Main page.

Project Plan

Part One (Week #1)

1) Develop technical architecture.
2) Set up the project.
Click Here for Details This assumes that node is already installed, but verify with "node -v".

1) Install the required projects by executing the following commands at the bash prompt:

$ npm install typescript -g
$ npm install bootstrap --save
$ apm install atom-typescript
$ npm install -g @angular/cli@1.6.5
$ cd desktop
$ ng new AngularEventPlanner
$ npm install bootstrap --save

2) Populate .gitignore with:

node_modules/
.DS_Store
dist/
.env

3) Point Angular to the installed Bootstrap node module by adding the following to .angular-cli.json in the styles array so that it looks like this:

"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],

4) Add the Forms Module to app.module.ts. In the top section of imports add "import { FormsModule } from '@angular/forms'". In the @ngModule section in the imports array, add ", FormsModule" after "BrowserModule".
3) Create model classes for the data.
Click Here for Details Create and populate the following scripts for the model classes:
Class Name File Name Class Code
Event src/models/event.model.ts export class Event {
constructor (public eventName: string
public eventDate: Date = new Date(),
public eventLocation: string,
public menusId: number) {}
}
Menu src/models/menu.model.ts export class Menu {
constructor (public menuTheme: string){}
}
MenuItem src/models/menuItem.model.ts export class MenuItem {
constructor(number,
public menuItemDescription: string) {}
}
MenuItemIngredient src/models/menuItemIngredient.model.ts export class MenuItemIngredient {
constructor(public ingredientDescription: string,
public menuItemsId: number,
public storeId: number) {}
}
Task src/models/task.model.ts export class Task {
constructor(public taskDescription: string,
public taskPlannedStartDateTime: Date = new Date()) {}
}
Invitee src/models/invitee.model.ts export class Invitee {
constructor(number,
public inviteeName: string,
public inviteeEmailAddress: string) {}
}
4) Develop mock data for each class.
5) Create component templates for showing, adding, editing, deleting and searching for model-related objects.
Click Here for Details
Component Area Commands
Welcome, About and Main $ ng generate component welcome
$ ng generate component main
$ ng generate component about
Event $ ng generate component show-events
$ ng generate component new-event
$ ng generate component edit-event
$ ng generate component delete-event
$ ng generate component search-event
Menu $ ng generate component show-menus
$ ng generate component new-menu
$ ng generate component edit-menu
$ ng generate component delete-menu
$ ng generate component search-menu
Task $ ng generate component show-tasks
$ ng generate component new-task
$ ng generate component edit-task
$ ng generate component delete-task
$ ng generate component search-task
MenuItem $ ng generate component show-menu-items
$ ng generate component new-menu-item
$ ng generate component edit-menu-item
$ ng generate component delete-menu-item
$ ng generate component search-menu-item
MenuItemIngredient $ ng generate component show-menu-item-ingredients
$ ng generate component new-menu-item-ingredient
$ ng generate component edit-menu-item-ingredient
$ ng generate component delete-menu-item-ingredient
$ ng generate component search-menu-item-ingredient
Store $ ng generate component show-stores
$ ng generate component new-store
$ ng generate component edit-store
$ ng generate component delete-store
$ ng generate component search-store
Invitee $ ng generate component show-invitees
$ ng generate component new-invitee
$ ng generate component edit-invitee
$ ng generate component delete-invitee
$ ng generate component search-invitee
Shared HTML Components $ ng generate component app-header
$ ng generate component app-script-sidebar
$ ng generate component app-sidenav
$ ng generate component app-top-right-nav
Recipe Search $ ng generate component recipe-search
6) Develop views for showing data for all model classes.
7) Develop functional CRUD views for Events.
8) Create pipes for use by the Search components.
9) Add basic styling in a single page.

Part Two (Week #2)

1) Add routes for the components and convert to routing.
2) Complete development of CRUD and Search functionality for all classes.
3) Convert the mock data into JSON and load the data into a Firebase database.
4) Add services and dependency-injection for accessing the database.
5) Add deployment to Firebase.
6) Add an API call.
7) Add user authentication
8) Incorporate the styling from the C# project.
9) Move the shared HTML into separate components.
10) Add an API service for supporting recipe search.
11) Add the Recipe Search component.
12) Deploy to firebase
Click Here for Deployment Steps
Install Required Packages:

$ npm install -g firebase-tools

Setup Firebase:

$ firebase login
$ firebase init

Deploy to Firebase:

$ ng build --env=prod
$ firebase deploy

Run the Application:

$ firebase open

Part Three (Future TBD)

1) Add CRUD support for referential integrity of the data.
2) Add user authentication.
3) Add route guards.
4) Add tests.

Technical Architecture

Click Here for an Overview of the Data Model
Model Properties Typescript Data Types
Event eventName
eventLocation
menusId		 string
string
number
Menu menuTheme string
Task taskDescription
taskPlannedStartDateTime		 string
Date
Menu Item menuItemDescription string
Menu Item Ingredient ingredientDescription
menuItemsId
storeId		 string
number
number
Store storeName string
Invitee inviteeName
inviteeEmailAddress		 string
string
Click Here for an Overview of the Components and Routes
General Components
Component Selector Route URL Description
AppComponent app-root N/A/ Default root component
WelcomeComponent app-welcome http:/localhost:4200/ Displays the Welcome page
MainComponent app-main http:/localhost:4200/main Displays the main navigation page
AboutComponent app-about http:/localhost:4200/about Displays the About page
Shared HTML Components
Component Selector Route URL Description
AppHeaderComponent app-app-header N/A Shared HEAD HTML
AppScriptSidebarComponent app-app-script-sidebar N/A Shared jQuery
AppSidenavComponent app-app-sidenav N/A Shared Navigation Sidebar HTML
AppTopRightNavComponent app-app-top-right-nav N/A Shared About and Exit button HTML
Event Components
Component Selector Route URL Description
ShowEventsComponent app-show-events http:/localhost:4200/events Displays the list of events
NewEventComponent app-new-event http:/localhost:4200/new-event Displays a form for adding a new event
EditEventComponent app-edit-event http:/localhost:4200/edit-event/:id Displays a form for editing an event
DeleteEventComponent app-delete-event http:/localhost:4200/delete-event/:id Responds to a button click to delete an event
SearchEventComponent app-search-event http:/localhost:4200/search-event Displays a form for searching for an event by event name
Menu Components
Component Selector Route URL Description
ShowMenusComponent app-show-menus http:/localhost:4200/menus Displays the list of menus
NewMenuComponent app-new-menu http:/localhost:4200/new-menu Displays a form for adding a new menu
EditMenuComponent app-edit-menu http:/localhost:4200/edit-menu/:id Displays a form for editing an menu
DeleteMenuComponent app-delete-menu http:/localhost:4200/delete-menu/:id Responds to a button click to delete an menu
SearchMenuComponent app-search-menu http:/localhost:4200/search-menu Displays a form for searching for an menu by menu theme
MenuItem Components
Component Selector Route URL Description
ShowMenuItemsComponent app-show-menu-items http:/localhost:4200/menus Displays the list of menus
NewMenuItemComponent app-new-menu-item http:/localhost:4200/new-menu Displays a form for adding a new menu
EditMenuItemComponent app-edit-menu-item http:/localhost:4200/edit-menu/:id Displays a form for editing an menu
DeleteMenuItemComponent app-delete-menu-item http:/localhost:4200/delete-menu/:id Responds to a button click to delete an menu
SearchMenuItemComponent app-search-menu-item http:/localhost:4200/search-menu Displays a form for searching for an menu by menu item description
MenuItemIngredient Components
Component Selector Route URL Description
ShowMenuItemIngredientsComponent app-show-menu-item-ingredients http:/localhost:4200/menus Displays the list of menus
NewMenuItemIngredientComponent app-new-menu-item-ingredient http:/localhost:4200/new-menu Displays a form for adding a new menu
EditMenuItemIngredientComponent app-edit-menu-item-ingredient http:/localhost:4200/edit-menu/:id Displays a form for editing an menu
DeleteMenuItemIngredientComponent app-delete-menu-item-ingredient http:/localhost:4200/delete-menu/:id Responds to a button click to delete an menu
SearchMenuItemIngredientComponent app-search-menu-item-ingredient http:/localhost:4200/search-menu Displays a form for searching for an menu by ingredient description
Task Components
Component Selector Route URL Description
ShowTasksComponent app-show-tasks http:/localhost:4200/menus Displays the list of menus
NewTaskComponent app-new-task http:/localhost:4200/new-menu Displays a form for adding a new menu
EditTaskComponent app-edit-task http:/localhost:4200/edit-menu/:id Displays a form for editing an menu
DeleteTaskComponent app-delete-task http:/localhost:4200/delete-menu/:id Responds to a button click to delete an menu
SearchTaskComponent app-search-task http:/localhost:4200/search-menu Displays a form for searching for an menu by task description
Store Components
Component Selector Route URL Description
ShowStoresComponent app-show-stores http:/localhost:4200/menus Displays the list of menus
NewStoreComponent app-new-store http:/localhost:4200/new-menu Displays a form for adding a new menu
EditStoreComponent app-edit-store http:/localhost:4200/edit-menu/:id Displays a form for editing an menu
DeleteStoreComponent app-delete-store http:/localhost:4200/delete-menu/:id Responds to a button click to delete an menu
SearchStoreComponent app-search-store http:/localhost:4200/search-menu Displays a form for searching for an menu by task description
Invitee Components
Component Selector Route URL Description
ShowInviteesComponent app-show-invitees http:/localhost:4200/menus Displays the list of menus
NewInviteeComponent app-new-invitee http:/localhost:4200/new-menu Displays a form for adding a new menu
EditInviteeComponent app-edit-invitee http:/localhost:4200/edit-menu/:id Displays a form for editing an menu
DeleteInviteeComponent app-delete-invitee http:/localhost:4200/delete-menu/:id Responds to a button click to delete an menu
SearchInviteeComponent app-search-invitee http:/localhost:4200/search-menu Displays a form for searching for an menu by task description
Recipe Search Component
Component Selector Route URL Description
RecipeSearchComponent app-recipe-search http:/localhost:4200/recipes Displays a search page for recipes and displays the results

Setup and Use

Required Packages

Click Here for Required Packages
  • @angular/animations 5.2.0
  • @angular/common 5.2.0
  • @angular/compiler 5.2.0
  • @angular/cli 1.6.5
  • @angular/core 5.2.0
  • @angular/forms 5.2.0
  • @angular/http 5.2.0
  • @angular/language-service 5.2.0
  • @angular/platform-browser 5.2.0
  • @angular/platform-browser-dynamic 5.2.0
  • @angular/router 5.2.0
  • angularfire2 4.0.0-rc.0
  • bootstrap 4.3.1
  • core-js 2.4.1
  • firebase 3.9.0
  • codelyzer 4.0.1
  • jasmine-core 2.8.0
  • jasmine-spec-reporter 4.2.1
  • karma 2.0.0
  • karma-chrome-launcher 2.2.0
  • karma-coverage-istanbul-reporter 1.2.1
  • karma-jasmine 1.1.0
  • karma-jasmine-html-reporter 0.2.2
  • protractor 5.1.2
  • rxjs 5.5.6
  • ts-node 4.1.0
  • tslint 5.9.1
  • @types/jasmine 2.8.3
  • @types/jasminewd2 2.0.2
  • @types/node 6.0.60
  • typescript 2.5.3
  • zone.js 0.8.19

Download the Repository

  1. Clone this repository:

    $ git clone https://github.com/MarkStrickland562/AngularEventPlanner.git

Install, build and run the application

  1. Navigate to the application root directory:

    $ cd AngularEventPlanner

  2. Install the required packages:

    $ npm install

  3. Build the application:

    $ ng build

  4. Run the application:

    $ ng serve

Test the application

  1. Execute the tests with Jasmine and Karma:

    $ ng test

Built With

  • Windows 10.1
  • iMac OS X El Capitan 10.11.6
  • Atom (IDE)

Support and contact details

If you have any feedback or concerns, please contact Mark Strickland.

License

This project is licensed under the MIT License. Copyright (C) 2019 Mark Strickland. All Rights Reserved.

MIT License

Copyright (c) 2019 Mark Strickland

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.