Frontend Website Documentation

Our frontend application is deployed to: https://librarysystem-frontend-321.herokuapp.com/#/

This website was built using Vue.js

Example credentials:

Type	Username	Password
HeadLibrarian	admin	admin
Librarian	Jeff	Jeff
Patron	bob	bobpassword

Not Logged In
Homepage When a user opens the website for the first time, they see a page showcasing the library’s opening hours, as well as the current featured item.
Browse Items Without logging in, any visitor to the library website can browse the items at the library. Since they are not logged in, they can only view the item and it’s details.
Browse Rooms Without logging in, any visitor to the library website can browse the rooms at the library. Since they are not logged in, they can only view the rooms and its capacity. The homepage looks the same when logged in as a patron as well.
Sign Up Initially, when one opens the website, they are not logged in - this is evidenced by the fact that on the homepage, they only see the ability to ‘see more items.’ The user can create a new account by navigating to the ‘Sign up’ option in the navigation bar, in which they must input their first name, last name, desired username, password, a confirmation of the password, their e-mail, their address, as well as if they are a resident of Montreal or not. They can submit these changes, or sign into an existing account if they already have an account.

Logged In As Patron
Browse Items On the browse items page, the patron is able to view all the items in the library as well as it’s details. The patron also has a button under each item which allows them to reserve that specific item.
Browse Rooms On the browse rooms page, the patron is able to view all the rooms in the library as well as it’s capacity. The patron is able to click on a button under each room to book that specific room.
Browse Item Reservations On the browse item reservations page, the patron is able to view all of their item reservations. In addition, for each of their item reservations, the patron is able to either renew or cancel the reservation. Upon renewal, the item reservation is extended for 2 weeks.
Browse Room Bookings On the browse room bookings page, the patron is able to view all of their room bookings. In addition, for each of their room bookings, the patron is able to either modify or cancel the booking.
Settings When logged in as a patron, an option called “Settings” appears in the navigation bar. This gives the logged in user the opportunity to change information stored on their account. This includes their first name, last name, email, and permanent address. There are also options for the user to change their password, and to delete their account

Logged In As Any Librarian
Browse Items On the browse items page, librarians are able to view all the items in the library as well as its details. The librarian has 3 buttons for each item. They can reserve an item for a patron, return the item from a reservation or delete the item from the library.
Reserve Item When a librarian clicks on the “reserve item” button, they are redirected to the reserve item page where they can enter the Patron’s idNumber to reserve the item for that specific patron.
Browse Rooms On the browse rooms page, the librarian is able to view all the rooms in the library as well as its capacity. The librarian has 3 buttons for each room. They can reserve a room for a patron, update the room capacity or delete the room from the library.
Reserve Room When the librarian clicks on the “reserve room” button, they are redirected to the reserve room page where they can enter the Patron’s idNumber and the date to reserve the room for that specific patron.
Browse Item Reservations On the item reservations page, the librarian is able to view all the item reservations and renew each item if necessary.
Create Patron Once a librarian is signed in, they are redirected to the homepage. From there, to add an in-person patron, they will need to hover over the ‘Manage Patrons’ option in the navigation bar and select ‘Sign Up for Patron.’ From there, they can input the client’s first name, last name, address, as well as residency status.
Browse Room Bookings On this page, the librarian is able to view all the room bookings as well as modify the room bookings and cancel the room bookings if necessary.
View Librarians An option under “Manage Librarians” in the nav bar, called “View Librarians” becomes available when logged in as a librarian. Upon selecting this option, the user is routed to a page that features a list of librarians, with their names, emails, and addresses listed. There is also a "View Shifts" button, which shows the user a list of that particular librarian's shifts.
View A Librarian's Shifts On the "View Librarians" page, each librarian listed has a "View Shifts" button. Upon selecting this option, the user is routed to a page that features a list of the shifts for the selected librarian. Underneath the list, there is a button, "Back to View Librarians", that returns the user to the "View Librarians" page.
View Shifts An option under “Manage Librarians” in the nav bar, called “Browse Shifts” becomes available when logged in as a librarian. Upon selecting this option, the user is routed to a page that features a calendar showcasing all of the different librarians' shifts. The areas shaded in red indicate time periods in which the library is open, but no librarian is scheduled to work.
Settings As for patrons when logged in, Librarians have access to a "Settings" page in the navigation bar. This page features all the same options as for patrons, however librarians and head librarians cannot delete their accounts. A head librarian can "fire" a librarian through the "Manage Librarians" page shown below.

Logged in as HeadLibrarian (admin)
Homepage If the user is logged in a Head Librarian, they will also see the options to add, remove, or modify library hours.
Modify Shifts As Head Librarian, you may modify any librarian’s shifts, you may go to “Manage Librarians” in the navigation bar, and select “View Librarians”. From here, you can select “View Shifts” for a particular librarian, and add or remove their shifts.
Create Librarian Once the head librarian is signed in, they are redirected to the homepage. From there, to add a librarian, they will need to hover over the ‘Manage Librarians’ option in the navigation bar and select ‘View Librarians.’ From there, they can scroll down to the bottom of the page, click ‘Add Librarian,’ in which they can either go back to viewing the list of librarians, or they can input the new librarian’s first name, last name, username, password (and its confirmation), their e-mail, address, and ‘create’ a new librarian by clicking ‘Add Librarian.’
View & Modify Librarians Once the head librarian is signed in, they are redirected to the homepage. From there, to add a librarian, they will need to hover over the ‘Manage Librarians’ option in the navigation bar and select ‘View Librarians.’ Once this option is selected, the head librarian has the ability to search for librarians, as well as view each librarian’s shifts, delete (fire) each librarian, or to create a new librarian (hire) by clicking ‘Add Librarian’ at the bottom of the page.