yacs-rcos / yacs-web

Frontend for YACS!

Yacs Web

Yacs Web - The frontend for YACS!

Yacs Web is written in Typescript using Angular 5. This application is configured to be run in a Docker container. For more information about developing and running Yacs, visit and clone the yacs-orchestra repository.

---

Contributing

We encourage you to create issues and contribute to Yacs! To contribute fork the repo, comment on an issue, and submit a pull request to the master branch. Build checks and code reviews are required before merging. Once checks have passed, a project owner will merge the changes.

---

Code of Conduct

We strive to create and maintain an inclusive, welcoming and safe community for all. Please review our Code of Conduct in CODE_OF_CONDUCT.md before participating in the project.

---

License

Yacs Web is Open Source and is released under the MIT licnese. See LICENSE.md for details

---

yacs-web's Issues

Redesign selections view on schedule page

The selections view on the schedule page is currently just the regular courses view, placed below the schedule.

We need a better way to display and manipulate what courses / sections are currently selected. This new view should ideally be displayed alongside the schedule view. We can also consider displaying it regardless of which page the user is on, and possible having it be able to collapse/expand from the side of the page or something similar.

First, we need mock ups of what this could look like. Ultimately, we would like to redesign the courses view as well, so that can potentially be considered / included when designing the selections view.

Get heat-map plug-in for analytics and feedback

Get heat-map plug-in for analytics and feedback.

For example, we can use
smartlook

Style/complete school list and department components

Footer doesn't have horizontal padding

The page itself does, but text in the footer goes all the way to the left and right.

Clear, Download ICS, and Copy Schedule Link <button>s don't have cursor:pointer

They should be visually links when the mouse hovers, no?

Modify course-list component to use real data from the yacs service like the school-list currently does

Offset text alignment of hours on schedule page

Referencing the YACS-RCOS/yacs#264 issue posted by @sockofleas, the hour labels are not currently aligned with the lines that relate to each hour.

Featured courses page (for special topics)

We should have a page where courses that are tagged as 'featured' will be showcased. Here at RPI, these 'featured' courses will be new and special topics courses for the current semester, or any other course a professor wishes to have highlighted.

There should be a link to this page on the home page, and it should be possible to provide a URL to this page. Ultimately, this page may be able to replace the special topics courses PDF.

This will require adding a new route to the angular router.

This issue replaces YACS-RCOS/yacs#241

Facebook schedule sharing

I think share to Facebook will really be a hit, as many of our users take screenshots of their schedules and upload them to Facebook. I'm not sure if we should share the schedule URL or an image to Facebook, though. Either way the preview must show the schedule itself. Users will not need to log in to Facebook to share (see: https://developers.facebook.com/docs/sharing/reference/share-dialog)

See #12

Implement schedule view

Implement the schedule view to match the implementation in legacy YACS.

Design suggestion: move "Schedule" a bit to the right

The horizontal margin between "YACSbeta" and the search bar is greater than that between the search bar and "Schedule". Can you equalize them?

Specify English as document language in html

I ran YACS through the following accessibility checker: http://wave.webaim.org/report#/yacs.cs.rpi.edu

The first apparent issue was the lack of document language. Specifying the document language as English will not only make the page more accessible to people who use screen readers, but also to people whose first language is not English and may rely on automatic translation.

This can be done by adding a lang attribute to the html tag.

Redesign and implement header bar

We have a new design for the header bar that needs to be implemented.

Since we are transitioning over to bootstrap, bootstrap should be used for the layout, and the header should be responsive. i.e. it should display properly on a mobile screen or a screen of any size (the current header wraps if the screen is too small and looks bad).

The current iteration of the header design is as such:

I think the design (of the header) needs a little more refining though

Loading Indicator

Implement the loading indicator on all components. This should be done in a way that is reusable won't require us to put it in every component explicitly.

The loading indicator should be in the following components:

• school-list
• course-view
• schedule (when it exists)

The loading indicator should be present on each of these components until the API request completes, and it should have a short fade when it is removed.

Add tests for schedule component

There is some unit testing that should be done here, but the bulk of the necessary testing will be on the UI.

The tests should ensure that given some dummy data, the schedule renders as expected.

td.sidelink has cursor:pointer but isn't a link

If you hover your mouse in the top or bottom of the td, but not within the link, you still get cursor: pointer. Probably shouldn't.

Style/complete Navbar component

Fix the clear button

The clear button isn't currently working. Pressing it should clear all of the user's sections. There should be a method in the selections service to handle this already. It should simply be a matter of calling that method.

Add tests for schedule-view component

The schedule view is entirely untested.

This component has a significant amount of logic to fetch and transform data, and all of its methods should be unit tested.

The UI for switching between schedules should also be tested, as should any other buttons on the page.

Implement Angular Universal for SEO

YACS is not search optimized. We would like all pages to be indexed, especially the courses views.

The de-facto way to do this with Angular seems to be using Angular Universal. See: https://github.com/angular/angular-cli/wiki/stories-universal-rendering

The slightly tricky part will be making Angular Universal work in production with nginx.

Show section status if available, and only show seat information if available

As per YACS-RCOS/university#8 a new field status will be available on sections. We want to display this if it is available (if it is not null), either alongside or in place of the seats and seats_taken fields.

Additionally, if either seats or seats_taken are null, that information should not be displayed, and only the status should be displayed.

If status, seats, and seats_taken are all null, then neither of them should be displayed.

Before implementing this (or during), please post a screenshot or mockup of what it will look like in all four cases.

This issue will require editing the section template, and possibly the section controller.

Add Bootstrap for customized styles.

Using ngx-bootstrap for Angular and Bootstrap compatibility.

Add a Moorthy easter egg

Moorthy deserves a very clever YACS easter egg. We must create one for him / of him. It is of the utmost importance.

If you have any ideas feel free to post them :)

Migrate existing work to use sass

Title. The prereq stuff now uses it and this definitely should as well.

See this post for help:
https://stackoverflow.com/questions/36220256/angular2-angular-cli-sass-options

Update the past and current developers on the About page

Title says it all! Many of the current developers need to be moved to past, and everyone who is working on YACS this semester needs to be added to the current developers!

Schedule Sharing

Many students ask us about sharing and exporting their schedules, even now that we support ICS exporting and sharing links. We need to add more sharing options, and refine the UI because users often don't understand how the existing features work.

There should be one unified share button, similar to how you would see on a mobile app or site, that will expand or drop down with a list of sharing options.

We should aim to support the following:

• Download Image
• Download iCal
• Copy Sharing URL
• Share to Facebook

I think share to Facebook will really be a hit, as many of our users take screenshots of their schedules and upload them to Facebook. I'm not sure if we should share the schedule URL or an image to Facebook, though. Either way the preview must show the schedule itself. Users will not need to log in to Facebook to share (see: https://developers.facebook.com/docs/sharing/reference/share-dialog)

We should also look into directly importing to google calendar.

Creating a hyperlink to course website

1. Create a hyperlink to a course website to introduce more about the course, maybe even course
   guidelines such as grading criteria or scheduling.
2. Proposed to be located at the end of the course description.

Typeahead search bar

People have asked us for a live 'search-as-you-type' dropdown search bar for a long time. We should implement it!

We should use the ng-bootstrap typeahead component (https://ng-bootstrap.github.io/#/components/typeahead/examples) to implement this.

The typeahead should make requests to the search API (/courses?search={search}), and display the names of the results in the dropdown. If a course is selected from the dropdown, we should navigate to the page /courses?id={selected id}. Otherwise, we should make the search query as we normally do now.

Please make sure there are tests included with this feature, and post screenshots of the results for feedback 🙂

Incorrect test color on schedule view

On the Schedule view for a test schedule created, there was a class with a blue background, but red text

Search Bar Clear

When something is typed in the search bar and the user goes to a different page (schedule or home), the search bar still contains the query.

After a search, when a new page is navigated to, the search bar should clear to avoid the user having to delete the query themselves.

Add tutorial to give new users an introduction

Many websites have tutorials for first-time visitors demonstrating how to use the site.

It is know that there are many features of YACS that are not the most intuitive, and many users don't aren't aware of all the features.

We should create such a tutorial that is run once when a user first visits the site, and again if we ever introduce big changes.

We will start a thread here with potential items to be included in the tutorial.

Design new Notifications view and Selections view

We are finally going to implement the event/notifications system!

But first, we need to figure out how this fits into the UI. This issue will build off of the work presented in #34 to find a layout and design that accommodates both a selections view and a notifications view in an elegant way.

The primary purpose of this issue is to serve as a thread for posting and discussing design ideas, soliciting feedback, and reaching a final design.

This issue can be closed when the design has been finalized.

Add fade out to notice bar

When the last notice from the notice bar (YACS-RCOS/yacs#232) is dismissed, it should fade out.

Upgrade to Angular 5

We are currently using Angular 4. Angular 5 has some decent improvements. Let's update to it! It isn't LTS like Angular 4, so we will want to be sure to upgrade to Angular 6 when it comes out.

Add UI login and logout

Login (and logout) buttons should be added to the header as per #26.

Before implementing the UI, mockups should be created demonstrating the UI changes and login / logout flow.

Please post mockups as a comment here for feedback. Once a design is decided, implementation can begin.

Note: This issue is only for the UI changes.

About Page

Port the about page over from legacy frontend

Typeahead Search Bar Test Cases

The implementation of the typeahead search bar has been merged without any test cases. We should fix that.

<course-description>s shouldn't have cursor:pointer

They're not links, so they shouldn't be shown visually as being clickable.

Tip: you have .course { cursor: pointer; }, but it might need to be applied to only the parts of it that need that.

Install MaterialUI and themes

https://yacs.cs.rpi.edu/#/schedules forever loads if you have no courses

🤕

Notice Bar Test Cases

The implementation for the front end of the notice bar has been merged without test cases. We should add some.

Inline Conflicts

Port the inline conflicts display feature over from the legacy frontend

Add link and create request change form for Professors

1. Create a google form that allows Professors to request a change in the description of the course.
2. The validation of the request forms are to be manual for now
3. Create a link to that Google form from the YACS website to allow Professors to access the form at all
   times
4. The current proposed place for the link is near the GITHUB link at the bottom of the YACS
   homepage.

Move models to their own separate model folder.

Currently the models in the yacs-web/src/app folder are not well organized; they are all in their own separate folders. We should create a new model folder where all models will be saved and use the convention:
name.model.ts
This should be placed in the folder:
yacs-web/src/app/models
This would mean that we also need to update all the file locations that use these models.

The current models are:

• course-list/course/course.ts
• course-list/section/period.ts
• course-list/section/section.ts
• schedule-view/schedule/schedule.ts
• schedule-view/schedule-event/schedule-event.ts
• school-list/department/department.ts
• school-list/school/school.ts

Add notice for cookie policy

YACS uses cookies for storage and authentication. We should add a notice informing our users of this.

This should use the notice interface created in YACS-RCOS/yacs#232

This should be a one time notification, and should never appear again once dismissed.

Display location of each period

YACS-RCOS/yacs#277 Adds location data to the API.

We should display this data in the courses page or in the schedules page for users to see.

If we cannot fit it in the existing courses view, we should put it in the schedule blocks on the schedule page, and add it to the courses view when implementing the next design iteration.

Add Login and Logout functionality

The yacs-web core frontend should be integrated with the yacs-users service, allowing users to log in and out from the core frontend.

The flow for this is the following:

1. User clicks "Log In" button on yacs-web (requires implementation)
2. User is redirected to yacs-users login page (already implemented)
3. User uses the form on yacs-users login page (already implemented)
4. Upon submitting login info or registering, user is redirected to yacs-web (already implemented), with a bearer token
5. The bearer token is passed in the request of all subsequent API calls.
6. yacs-web UI should reflect that the user is logged in. (requires implementation)

The logout flow is following:

1. User clicks "Log Out" button on yacs-web (requires implementation)
2. User is redirected to the yacs-users logout page (requires implementation)
3. yacs-users logs the user out and redirects back to yacs-web (already implemented)
4. yacs-web UI should reflect that the user is not logged in. (requires implementation)

The following subtasks should be completed in order for this issue to be marked as completed:

• UI changes #27
• Token capturing logic (issue TBA)

Install Bootstrap 4

To facilitate our move to a responsive design, we will be using Bootstrap 4. We need to install Bootstrap 4 and its Angular implementation ng-bootstrap.

Implement selection

needs logic in both course component and section component

• selection service with methods to add and remove selections
• course (all sections) selection
• single section selection

Add alt text in search icon

I ran YACS through http://wave.webaim.org and we are missing alt text for the search icon.

Add alt text to the search icon so that screenreader users can understand the search bar.