Hoherberg Ski School Frontend Code Challenge Series #2 - Scheduler Build

App environment:
- ASP.Net MVC Core

Basic requirements for this challenge:
- Continue build ASP.Net MVC Core application based with focus on Scheduler page
- Make sure your submission running okay on IE11, test existing and new pages
- Create endpoints that can be re-usable when we swap with proper REST API on next development phase

Challenge Overview
Hoherberg Ski School is very excited to see how the application look on real life based on previous winning storyboard. This web application need build using ASP.Net MVC Core with focus on desktop resolution only.

This is the 2nd of Hoherberg Ski School Frontend Challenge Series. For this challenge we need you to focus specifically on the Scheduler section and remain use "code structure" from previous challenge. Expected submission from this challenge need appear as one set of application that follow existing code format and rules.

Good luck and let's discuss any questions you have. See you in the challenge forum!

Technology Stack
- ASP.Net MVC Core
- HTML5
- CSS3
- Javascript
- Jquery
- Do not use Bootstrap!

Deployment environment requirements
- localhost
- heroku

Ragnar: Check challenge forum to see the url.

Challenge Assets:
Source File: https://drive.google.com/open?id=0BxNVnWK-ZGA6bl80eVdjVWZDTVk
Fonts: https://fonts.google.com/?selection.family=Roboto:300,400,500
Note:
Adobe XD is free and cross-platform (MacOS and Windows)
You can download Adobe XD for FREE here: https://www.adobe.com/products/xd.html

MarvelApp Flow
https://marvelapp.com/9dd26a4

General Requirements:

• You must use ASP.Net MVC Core for this base of app.
• Getting started on ASP.Net MVC Core here: https://docs.microsoft.com/en-us/aspnet/core/getting-started/?view=aspnetcore-2.1&tabs=macos
• You can choose some ASP.Net MVC Core library to help build your submission. As long they are open source.
• Suggest best practice developing this application on ASP.Net MVC Core. You can start read this article and implement on your submission: https://www.codemag.com/article/1405071/10-Good-Practices-for-ASP.NET-MVC-Apps
• You may use open source frameworks/libraries (MIT or similar licensed). Let us know if need confirmation. You can start from this url: https://github.com/quozd/awesome-dotnet
• Use SCSS variables and mixins from the global stylesheets.
• Data used in page can be statics
• Make sure you submission support unit testings
• Right now you can set min-width for 1366px as storyboard screen, but application must support fluid width.
• Important: Application performance must fast and lightweight! Keep in mind when you build the app.

Individual Requirements
1). Scheduler

Weekly View

• By default need display this weekly view
• This scheduler will display all products based on Instructor name on calendar view
• No need display tooltips by default. Tool tips can be hidden unless click on tooltip icon (Screenshot: 06_Scheduler_A_1.png) need able to close the tooltips by click x button.
• Multiple instructors and days can be selected by using the Control + Click. (Screenshot: 06_Scheduler_A_2.png)
• Selected cell, need make unselected cell become less transparent
• All Dropdown in this application must able to load the option
• All modal window need to be moveable
• Cell colors need generated from product category data
• Multi Assign Instructors become enabled after select more than one Instructor
• There will be modal window show up to let user pick the category (Screenshot: 06_Scheduler_A_3.png)
• Click dropdown need able show the dropdown list (Screenshot: 06_Scheduler_A_4.png)
• Need able detect if there’s conflicts in when select the product (Screenshot: 06_Scheduler_A_5.png)
• This reassign modal window show after click the reassign link on selected cell (Screenshot: 06_Scheduler_A_6.png)
• Reassign link only appears for private (PVT) and seasonal cell type
• If the assignment that needs reassigning is in the "other" assignment grouping then the cell stays highlighted and can be DRAG and DROP within the same date column into another instructor's 'green' available cell if no conflict of time.
• Create similar function works similarly on daily screen.
• Print Reservations WhiteSlips button on top allow user to select instructors on current date (Screenshot: 06_Scheduler_A_7.png)
• Update Assign title button to Print
• Click on Employee cell, need load this options(Screenshot: 06_Scheduler_A_8.png)
• Make sure we make other select dimmed.
• Make sure each link options working
• Click checkout / check in instructor need change the Employee color to red. Also text need updated to check in instructor and vice versa
• Click Show Instructor details need load modal window to show Instructor details
• Click Print current date white slips need load modal window (Screenshot: 06_Scheduler_A_9.png)
• Click Print current date schedule need load modal window (Screenshot: 06_Scheduler_A_10.png)
• On calendar, click different colored cell will display different content. Capture that on each cell. This is when click green cell  (Screenshot: 06_Scheduler_A_11.png)
• For this green cell, update title next to toggle button to set off. Click the button need change the cell to red color
• Make sure the dropdown hidden after set off
• Important: Update the flyout placement to the right or left side of selected date column. You need set dynamic placement based on browser screen width.
• Important: All flyout and modal window need to be moveable and have the close button next to drag button. Apply to all flyout on existing and new pages
• This is when click yellow cell  (Screenshot: 06_Scheduler_A_12.png)
• This is when click blue cell (Screenshot: 06_Scheduler_A_13.png)
• This is when click pink cell (Screenshot: 06_Scheduler_A_14.png)

Daily View

• This screen need use same functionality like Weekly view. Check the flow below (Screenshot: 06_Scheduler_B_1.png)
• But calendar view need capture 1 hour increment for selected day
• Notice there’s “(0)” link that take to Scheduler Unassigned View
• On multi-select cell need highlight the row and make the Multi Assign button enabled (Screenshot: 06_Scheduler_B_2.png)
• Click the button load the modal window (Screenshot: 06_Scheduler_B_3.png)
• Dropdown options (Screenshot: 06_Scheduler_B_4.png)
• Conflict for selected Instructors (Screenshot: 06_Scheduler_B_5.png)
• This is when click Reassign link then load the modal window (Screenshot: 06_Scheduler_B_6.png)
• This is when click Print Reservation White Slips button (Screenshot: 06_Scheduler_B_7.png)
• Click the employee need load the flyout options (Screenshot: 06_Scheduler_B_8.png)
• Click Show Instructor link need load modal window that capture instructor details
• Click Print current date white slips need load modal window (Screenshot: 06_Scheduler_B_9.png)
• Click Print current date schedule need load modal window (Screenshot: 06_Scheduler_B_10.png)
• On calendar, click different colored cell will display different data. Capture that on each cell. This is when click green cell  (Screenshot: 06_Scheduler_B_11.png)
• For this green cell, update title next to toggle button to set off. Click the button need change the cell to red color
• Make sure the dropdown hidden after set off
• Click on red cell need load this flyout (Screenshot: 06_Scheduler_B_12.png). When toggle the button change text to Set off and selected cell need turn to green
• We need set dynamic placement, for long cell, display flyout on the left side
• This is red cell for short cell, apply same functions for Weekly and daily view (Screenshot: 06_Scheduler_B_13.png)
• This is when click purple cell (Screenshot: 06_Scheduler_B_14.png)
• Important: Update the flyout placement to the right or left side of selected date column. You need set dynamic placement based on browser screen width
• Overall we need same functionalities like on Daily view

2). Daily Assignment Report

• User landed to this screen after click Daily Assignment button on Scheduler page
• This is Daily Assignment report grouped by (Screenshot: 06_Scheduler_D_1.png)
• Private,
• Adult Instructor,
• Child Instructor
• Instructor Apprentices
• Supervisor
• Manager
• Reservationist
• Put dead link for Print button

3). Unassigned View
This is page to see all Private Lessons that not assigned yet. User landed on this page after click Unassigned view button (Screenshot: 06_Unassigment_A.png)

Single Day

• This is single-day view will be displayed by default
• On top user need able to navigate the date
• There are filter for Age range, Skill Level, Start time and P-Code
• Pending status need highlighted on page
• Click the #Skiers link need expand the details (Screenshot: 06_Unassigment_B.png)
• When you select the row this populates the drop down below grid for the available instructors (that match date, time, skill, and teachable age range availability).
• If user checks 'Show all available instructors' - the the drop down would build with all the instructors that are available by date and time.
• If 'Tentative' is checked, it matches the private lesson with the selected instructor tentatively - not removing the instructor's availability and giving a grey box on the scheduler side.
• Once the assign button is clicked, the private lesson is put into the instructors schedule (check for tentative check box) and it is removed from the unassigned privates grid.
• On # Skiers, user see all Skier Details
• Assign button become active after select the row and suggested instructors
• Multi Day
• This is multi-day view (Screenshot: 06_Unassigment_C.png)
• Multi date range work on top for this multi-day view
• User can user Shift+Click to select specific dates or range of dates on a specific reservation OR full row select grabs all days to assign.
• This is the selected state (Screenshot: 06_Unassigment_D.png)
• Click the #Skiers link need expand the details (Screenshot: 06_Unassigment_E.png)

 

Final Submission Guidelines

Web Browsers Requirements
Your submission must look and work consistently across these following browsers on the latest versions:  
- IE11,
- Edge, 
- Chrome,
- Safari, 
- Firefox

What To Submit?
- Create clear documentation about how to set up your submission locally and on live site. 
- Upload your submission to live site for client review, Include the link on your README.md