-
Notifications
You must be signed in to change notification settings - Fork 2
Project Report 3
| # | Members Present | Date | Time | Topics Discussed |
|---|---|---|---|---|
| 1 | All | November 11, 2019 | 1:00pm - 4:00pm | Discussed and created a software architecture. Assigned roles for frontend development. |
| 2 | All | November 15, 2019 | 8:00pm-12:00am | Worked on Vue files for some front end features. Discussed roles to finish deliverable. Styling decisions. |
| 3 | Ryan, Caleb | November 16, 2019 | 4:00pm-8:00pm | Completed and reviewed documentation. Finalized software architecture. |
| 4 | Louca, George, Elias | November 17, 2019 | 9:30pm-12:00am | Finished all parts of front end. Submitted. |
Our website is made with Bootstrap v4 and as such is entirely responsive and the content scales to fit in mobile, tablet, laptop and desktop views with no issues and with all content appropriately fitted and scaled.
Some issues were encountered here, and solved with simple workarounds like making two copies of the component and only showing one for certain breakpoints.
The page uses the general light theming from Bootstrap, and all UI components follow a consistent style as provided by the front end. Icons are provided by Font awesome. It follows industry techniques of heros and splash pages, and has a navigation bar that changes with the context. A custom logo was also made and is showed on the sign up page and navigation page.
The basic workflow was basically first testing the frontend with rudimentary HTML pages. These rudimentary pages were then connected to the backend with Javascript data exported to the templates, and the Vue templates were made to read and display the repository data. After these basic testing pages were finished, our team worked on making a homogeneous website layout with a consistent style and consistent components. Besides the main homepage and other static pages, there are two types of dynamic pages that interact with the backend.
The first is the gallery, that is accessed for the desired repository by selecting the navbar element from the manager navbar on any manager page. This shows a collection of cards that each represent one database entry for the accessed repository. The cards stack in rows of a certain number of cards depending on the breakpoints, and the content is scroll-able. The important info of the entry is shown on the card, and there are sometimes buttons and input boxes in the card to interact with the db. If the entry has additional info relevant to the manager that cannot be displayed on a card (such as reviews or other associated objects), the entry has its on profile page that is navigable by clicking a link in the card
The second is the profile, that is accessed by clicking on a link in a card from the gallery view. The profile not only shows the info from the gallery card view, but also shows additional info such as reviews that can be edited etc.
After these types of pages had been made, they were extended to all repositories that are accessible in the manager navbar (at least the gallery and optionally the profile if necessary). Additional functionalities were added such as forms to add a card entry and save it to the repository, or buttons to delete a card entry, or an edit button for the reviews and the conditional rendering of stars. Work was done in parallel with the backend connectivity, such that either the UI was done first with placeholder that were filled in by the eventual javascript data exported to the vue template, or the data was made first and the template would simply access. This was often done in increments as new features were added. Because of this, the UI was usually built with hardcoded tested componenents to mimic the eventual vue data, with the actual vue binding part commented out until later used.
Since we are doing the Manager's point of view for the application. Our team, Focused mainly on the Manager Home page from which managers can access all their services. To access this page the manager is required to login from the main page using their email and password. To simplify things we assume that at least one manager is created.