This project was generated with Angular CLI version 10.2.0.
The application allows users to request and confirm or deny appointments with other users as well as request and confirm cancellations for confirmed appointments.
When first creating an appointment it will populate under "Pending Appointments" on the dashboard. A pending appointment will only confirmed when the invited user confirms the appointment from their dashboard.
The user who creates the appointment may cancel it before the invited user confirms it.
Once confirmed, the apointment will move from "Pending Appointments" to "Appointments" and can only be cancelled (deleted) when a user requests it and the other attending user accepts the request.
When a user requests an appointment be cancelled, it will move from "Appointments" to "Appointments Pending Cancellation" where they can cancel the cancellation request (return the appointment to the confirmed appointments list) and the other attending user can accept or decline the request to cancel.
Pending appointments can also be declined. Once declined, for the guest (invited user) the appointment will be deleted. For the host (appointment creator) the appointment will move from "Pending Appointments" to "Declined Appointments" where it can then be permanently deleted.
The view for each set of appointments can be toggled between a block view and a table view.
FRONT END Modules AppModule - root module, declares all three components AppRoutingModule - manages the routes and routing logic, implements the route guards
Components App - root component, parent to [Login] and [Dashboard] - contains the nav bar and the main router outlet Login - child to [App], sibling to [Dashboard] - logs the user in using the UserService, contains login form Dashboard - child to [App], sibling to [Login] - contains all logic for interacting with the cloud functions and the primary functionality and UI of the application
Models UserModel - simple interface for type checking the users AppointmentModel - model class used for instantiating new appointment objects and type checking
Services UserService - holds user data, manages loggedIn state and the active user
Guards LoginGuard - prevents already logged in users from viewing the login page DashboardGuard - prevents users not logged in from viewing the dashboard page
Validators DateDirective - validates that the date is not in the past or too far in the future InvalidTimesDirective - validates that the new appointment start time is before the end time
Important 3rd Party Packages AngularFireFunctions ngx-toastr ngx-bootstrap
Environment Environment - holds firebase config including the api key
BACK END Cloud Functions Index - contains all cloud functions for interacting with the firebase firestore database
Run npm install from the root first as all node_modules have been deleted
Run npm install from the functions folder next
Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
Run firebase emulators:start for emulated firestore, function, and hosting funtionality. Navigate to http://localhost:4000/functions to view function logs and http://localhost:4000/firestore to view and manipulate data in the emulated firestore database.
You must run all three commands to test the application.
Run ng build then firebase deploy if you've updated the cloud functions in the CloudFunctions file
-
After starting the development server process outlined above, begin by logging in to one of the user accounts using the password "password" (it's the same for all three users).
-
Create your first appointment by clicking the "Add Appointment" button, filling out the required information in the modal that opens, and clicking "Send Invite".
-
Repeat step 2 four more times.
-
Cancel one of the pending appointments.
-
Log out by clicking on the drop down menu in the top right corner, and log into the user account which you invited.
-
Decline one of the appointment invitation, accept two of the invitations, and leave the other in 'Pending'.
-
Log out, and log back into the first user which you were logged in as.
-
You should now have two confirmed appointments, one pending appointment, and one declined appointment.
-
View the appointments in table view.
-
Request a cancellation of one of the confirmed appointments. You should now have one appointment in each of the different appointment types.
-
Delete the declined request.
-
Log out, and log back in as the other user you've been interacting as. Decline the cancellation request.
-
Request the appointment be cancelled again from the user you're currently logged in as. Cancel the request, and then request it once more.
-
Log out, and log back in as the other user you've been interacting as. Accept the cancellation request.
-
Congratulations! You have successfully sampled everything this little app has to offer.
Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.
Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.
Run ng test to execute the unit tests via Karma.
NOTE: This project currently has no tests.
Run ng e2e to execute the end-to-end tests via Protractor.
NOTE: This project currently has no tests.
To get more help using or testing the application, please contact Matt Mittelsted(https://www.linkedin.com/in/matthew-m-39b475169/) by emailing him at mattmittelsted@gmail.com.
To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.
- Implement real user authentication and replace the hokey simulated authentication currently in place
- Write firebase rules in line with the authentication
- Build back end logic to prevent race conditions
- Allow users to invite more than one user to their appointments
- Implement confirmations for user actions
- Order appointments by start date
- Design and implement a better looking UI