Create header component for scheduler side panel #880

Destaq · 2024-02-10T19:39:17Z

Summary

We are now working on implementing the schedule generator, which requires a new tab on the sidebar. This new tab will have associated information with it, such as the semester for which a schedule is being generated, a list of requirements, and so on. This PR creates a component that has header information for this sidebar panel, as per the Figma design.

Currently UI-only; doesn't take in actual requirements.

See Notion task here.

Test Plan

Import SchedulerPanelHeader into e.g. RequirementGroup.vue and put just below the requirement-header element near the top of the HTML template. Confirm that UI is as shown on Figma.

Notes

Frontend tests are currently failing because of an unrelated breaking API change on CUReviews' parts; their failure should not block the merging of this PR.

dti-github-bot · 2024-02-10T19:39:29Z

[diff-counting] Significant lines: 277.

andxu282 · 2024-02-11T14:56:03Z

could you also provide screenshots of your change? or are you waiting on nidhi's PR first? #881

Destaq · 2024-02-11T15:38:50Z

could you also provide screenshots of your change? or are you waiting on nidhi's PR first? #881

No it's alright it's a standalone component file.

Here's an image:

(I manually added this in, currently there's no way that a user would ever see this component.)

(The bottom hr is not present in the component it is just because of the way that I was randomly calling in the component, I dumped it into RequirementsGroup and then inspect-element-deleted the other things.)

nidhi-mylavarapu

screenshot looks good! will attach to schedule builder icon to see changes on localhost, i'd just add the blue coloring for the "generate schedule" button incase we need it later

nidhi-mylavarapu · 2024-02-11T21:11:48Z

src/components/ScheduleGenerator/SchedulerPanelHeader.vue

+      </button>
+    </div>
+    <!-- NOTE: you cannot generate a schedule if you have not inputted any requirements. -->
+    <button class="generate-schedule-button" :disabled="generateScheduleButtonDisabled">


(probably not something we have to worry about right now since there is no functionality) add blue coloring for hover - i believe that the "generate schedule" button turns blue when the user has entered enough necessary info to generate schedules OR it's blue when hovered

Yep that's why I have the disabled check, if you look at the CSS then it will change color if it is not disabled.

I'm not actually sure what color it changes to, would have to examine the styles. There's a default style and then there's a style that applies when disabled is true.

Destaq · 2024-02-11T21:19:27Z

src/components/ScheduleGenerator/SchedulerPanelHeader.vue

+  color: $white;
+  margin-bottom: 12px;
+  border: 1px solid $emGreen;
+  background: $emGreen;


OK @nidhi-mylavarapu so by default it is green, however that is the color in the Figma so I think it should be ok.

elizabeth-tang · 2024-02-11T21:25:26Z

Looks really good so far Simon! Same thing as what I commented on Nidhi's PR #881 -- when she creates the new branch for the Scheduler Builder feature could you modify this PR to merge into that instead of main?

Destaq · 2024-02-16T18:50:13Z

@elizabeth-tang should I feature flag this too?

from #881 (comment)

elizabeth-tang · 2024-02-16T19:01:32Z

@elizabeth-tang should I feature flag this too?

from #881 (comment)

Hmm I think we should still have a feature branch too -- once Nidhi sets up the flag then the whole "scheduler" feature can be merged into a branch and be contained under the flag. @andxu282 thoughts?

github-actions · 2024-02-29T21:33:40Z

Visit the preview URL for this PR (updated for commit bc4cc53):

https://cornelldti-courseplan-dev--pr880-simon-scheduler-side-1z3lfocw.web.app

_{(expires Thu, 04 Apr 2024 14:12:38 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 6d4e0437c4559ed895272bbd63991394f1e0e933}

…r compatability

* chore: create schedule sidebar panel header * style: also define appearance property in SchedulerPanelHeader.vue for compatability * docs: add inline docs to SchedulerPanelHeader * link icon w/header * link icon w/header * fix: style schedule-gen sidebar background and padding --------- Co-authored-by: Andrew J Xu <[email protected]>

* added blue icon, need to adjust centering and add grey icon * Added grey icon, still need to adjust text centering and new width? * Formatting * feature flag schedule generator * added blue icon, need to adjust centering and add grey icon * Added grey icon, still need to adjust text centering and new width? * Formatting * Changed icon title to Generate, tried to fix spacing * Centered icon with Builder Label * Added mobile sched builder icon, fixed formatting and centering * Changed profile icon label in mobile * removed cypress * Create header component for scheduler side panel (#880) * chore: create schedule sidebar panel header * style: also define appearance property in SchedulerPanelHeader.vue for compatability * docs: add inline docs to SchedulerPanelHeader * link icon w/header * link icon w/header * fix: style schedule-gen sidebar background and padding --------- Co-authored-by: Andrew J Xu <[email protected]> * chore: create schedule sidebar panel header * style: also define appearance property in SchedulerPanelHeader.vue for compatability * docs: add inline docs to SchedulerPanelHeader * link icon w/header * Run Courses Script for FA23 (#856) * Run courses script for FA23 * Fix CS 1110 Frontend Test Corrects the CS 1110 frontend test with the new course title * Spring 2024 courses script (#864) * add header * fix header * fix header * move into folder * fix full-courses * link modal to schedule builder icon * modal * modal clickable * type fix and rename * rename * rename * [Schedule Generator] Courses Component (#893) * link icon w/header * fix: style schedule-gen sidebar background and padding * add schedules and courses sections * fix indent * chore: flesh out component for LHS of schedgen modal * fix * fix modal * fixes * fix --------- Co-authored-by: Simon Ilincev <[email protected]> * [Schedule Generator] Schedules Component (#904) * add schedules and courses sections * fix indent * chore: flesh out component for LHS of schedgen modal * fixes * schedule * refactoring * calculate minutes and labels * fix lint --------- Co-authored-by: Simon Ilincev <[email protected]> * Schedule Generator Algorithm: V1 (#909) * chore: rewrite basic java algorithm impl in ts * chore: create output format for algorithm * chore: update course-scheduling algorithm to use timeslots and 15-min gaps * "fix" 😈: get rid of ugly java-style syntax also checkpoint: progress towards dealing with days of the week & labs * refactor internal algorithm logic, improve pretty-print, handle days of the week * docs: add docs for new folder --------- Co-authored-by: Simon Ilincev <[email protected]> * [Schedule Generator] Add Requirements (#905) * add requirements component * fix dropdown * fixed dropdowns * fixed dropdowns * fixed dropdowns * fix lint * clean up styling * frontend for requirement courses (#914) * frontend for requirement courses * type fix * documentation --------- Co-authored-by: elizabeth-tang <[email protected]> * [Schedule Generator] Schedule Fixes (#913) * fix course height and flex box * fixes * [Schedule Generator] Read in Requirements (#918) * read in reqs * linting * fix linting * fix adding courses * documentation * add as many reqs as possible * Support schedule downloading + pagination in schedgen modal (#919) * add schedules and courses sections * fix indent * chore: flesh out component for LHS of schedgen modal * refactoring * create pdf schedule generator with table + headers + credits to work on: wrong data, calendar thingie * support passing around data into pdf schedule download now just missing calendar also need to fix formatting in download * hotfix overflow issue by shortening req names * fix typo * chore: add in docs for the new pdf schedule downloader * migrate styles from figma * almost fully styled / laid out just missing right-aligned download button * right-align download button * merge conflict fixes * revert changes * fixed download --------- Co-authored-by: Andrew J Xu <[email protected]> * comments * courses from user input show up on modal, schedule info passed into modal for gen request * log generated schedule * added random time generator for testing, logs schedule correctly * adjusted algorithm, mapped generated schedule to frontend * colors match on mapped sched q * changed testing * add reqs to top of list * side of modal is updated with course count / total credits * quick fixes * connected courses to fa24 firestore meeting times/patterns * fully connect sidebar to schedule * rename pdf output * finally integrate download pdf, but algo only ever returns one course * fix algo by correcting type parameters * fix overlap calculation and button size * add algo improvement note * FA24 Courses JSON (#924) * courses json * reqs * semi-working one course max per req * fix: always try to fulfill 1+ req for each * [Schedule Generator] Frontend Fixes (#925) * disable generate * Generating... when generating schedule and fix max hour bug * lint * cleanup * credit limit and overflow * courses overflow * change warning * fix fonts * padding and font fix * cleanup --------- Co-authored-by: Nidhi Mylavarapu <[email protected]> * [Schedule Generator] Filter courses by latest semester / requirement (#926) * started req/sem filtering logic * undo changes * fixes * filter courses by sem from json * read sem courses only * lint * lint * fix: only show unique courses in requirement groups * adjusted for courses without meeting times * cleanup * add no requirement * fix test.spec.ts * lint --------- Co-authored-by: andxu282 <[email protected]> Co-authored-by: Simon Ilincev <[email protected]> * fixes * import issue * lint * update ScheduleGenerate dir * prettier * update courses * reqs --------- Co-authored-by: Nidhi Mylavarapu <[email protected]> Co-authored-by: Simon Ilincev <[email protected]> Co-authored-by: Simon Ilincev <[email protected]> Co-authored-by: Zak Kent <[email protected]> Co-authored-by: Nidhi Mylavarapu <[email protected]> Co-authored-by: elizabeth-tang <[email protected]>

Destaq requested a review from a team as a code owner February 10, 2024 19:39

Destaq requested a review from nidhi-mylavarapu February 10, 2024 19:40

nidhi-mylavarapu requested changes Feb 11, 2024

View reviewed changes

Destaq commented Feb 11, 2024

View reviewed changes

andxu282 force-pushed the simon/scheduler-sidebar-panel-header branch from 5b4ccc5 to 4097857 Compare February 29, 2024 21:32

andxu282 changed the base branch from main to schedule_builder_icon February 29, 2024 21:33

andxu282 mentioned this pull request Mar 2, 2024

[Schedule Generator] Add Schedule Modal #892

Merged

andxu282 changed the base branch from schedule_generator_icon to schedule-generator March 5, 2024 14:08

Destaq and others added 6 commits March 5, 2024 09:11

chore: create schedule sidebar panel header

b2429e4

style: also define appearance property in SchedulerPanelHeader.vue fo…

e63fe42

…r compatability

docs: add inline docs to SchedulerPanelHeader

1fa6241

link icon w/header

aa69c8e

link icon w/header

fd7b511

fix: style schedule-gen sidebar background and padding

bc4cc53

andxu282 force-pushed the simon/scheduler-sidebar-panel-header branch from 06e2514 to bc4cc53 Compare March 5, 2024 14:11

Destaq merged commit c2b1c17 into schedule-generator Mar 5, 2024
10 of 11 checks passed

Destaq deleted the simon/scheduler-sidebar-panel-header branch March 5, 2024 20:37

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Create header component for scheduler side panel #880

Create header component for scheduler side panel #880

Destaq commented Feb 10, 2024 •

edited

Loading

dti-github-bot commented Feb 10, 2024 •

edited

Loading

andxu282 commented Feb 11, 2024

Destaq commented Feb 11, 2024 •

edited

Loading

nidhi-mylavarapu left a comment

nidhi-mylavarapu Feb 11, 2024

Destaq Feb 11, 2024

Destaq Feb 11, 2024

elizabeth-tang commented Feb 11, 2024

Destaq commented Feb 16, 2024 •

edited

Loading

elizabeth-tang commented Feb 16, 2024

github-actions bot commented Feb 29, 2024 •

edited

Loading

Create header component for scheduler side panel #880

Create header component for scheduler side panel #880

Conversation

Destaq commented Feb 10, 2024 • edited Loading

Summary

Test Plan

Notes

dti-github-bot commented Feb 10, 2024 • edited Loading

andxu282 commented Feb 11, 2024

Destaq commented Feb 11, 2024 • edited Loading

nidhi-mylavarapu left a comment

Choose a reason for hiding this comment

nidhi-mylavarapu Feb 11, 2024

Choose a reason for hiding this comment

Destaq Feb 11, 2024

Choose a reason for hiding this comment

Destaq Feb 11, 2024

Choose a reason for hiding this comment

elizabeth-tang commented Feb 11, 2024

Destaq commented Feb 16, 2024 • edited Loading

elizabeth-tang commented Feb 16, 2024

github-actions bot commented Feb 29, 2024 • edited Loading

Destaq commented Feb 10, 2024 •

edited

Loading

dti-github-bot commented Feb 10, 2024 •

edited

Loading

Destaq commented Feb 11, 2024 •

edited

Loading

Destaq commented Feb 16, 2024 •

edited

Loading

github-actions bot commented Feb 29, 2024 •

edited

Loading