Challenge Overview
App environment:
- ASP.Net MVC Core
Basic requirements for this challenge:
- Continue build ASP.Net MVC Core application based on storyboard design with focus on Notifications and Printing
- Make sure your submission running okay on IE11, test existing and new pages
- Important: We running parallel challenge to build another pages on the frontend. Your updated code as possible need use separate folder for this challenge, to make easier for us when merge all codes later.
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 4th of Hoherberg Ski School Frontend Challenge Series. For this challenge we need you to focus specifically on the Manage Notifications & Printing 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/9e1f457
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.
- 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) Manage Notifications
- This is Manage Notification page (Screenshot: 01_1_Manage Notifications.png)
- On top of table there’s option to search, filter by Type, Format and active status
- This is when click dropdown (Screenshot: 01_2_Manage Notifications_Type Client Select.png)
- Table need displayed selected filter only (Screenshot: 01_3_Manage Notifications_Select Client.png, Screenshot: 01_4_Manage Notifications_Client Type.png, Screenshot: 01_5_Manage Notifications_Client Type_Delete.png)
- User need able to Turn on/off the notification by click the toggle
- Delete button need load this modal window (Screenshot: 01_6_Manage Notifications_Client Type_Confirm Delete.png)
- Click Duplicate button need duplicate the row and display success banner (Screenshot: 01_7_Manage Notifications_Client Type_Duplicate Success Notification.png)
- For edit button (Screenshot: 01_8_Manage Notifications_Edit.png)
- Need load the modal window (Screenshot: 01_9_Manage Notifications_Edit Popup.png)
- Important: Re-use HTML editor for Create Reservation page
- Display success/error message (Screenshot: 01_10_Manage Notifications_Edit Popup_Passed html Notification.png)
- HTML editor only show when user select the Template Format Email
- For text message, just need load the textarea (Screenshot: 01_12_Manage Notifications_Edit Popup_Template Format as Text Message.png)
- Save template button need load the success message (Screenshot: 01_14_Manage Notifications_Edit Popup_Template Format Text Message_Saved.png)
2) Add New Template
- You can re-use the same edit template, but should not displayed any default text.
- On this add new template need support Email and Text Message format
- Also there’s Template Type for Client and Employee
- Re-use existing functionalities.
3) Printing Features
- For this task you need make the print result in paper consistent with displayed in application.
- We need find way when click click a 'print' button in the app, that it goes to the default printer. Without going through the browser print options.
- Let us know if you need some clarifications
3a). Barcode
Screenshot: https://marvelapp.com/e683i7j/screen/47641061
- For this screen you just need print the Reservation, Booking Feed Paid and Barcode
3b). Instructor Current Date White Slips
Screenshot: https://marvelapp.com/9dd26a4/screen/48612711
- User will able to print this when click Instructor name, then pick the Print current date white slips
- Capture content on modal window
- It will printed on Receipt Paper. Please read these reference for technical solution related on ASP .NET:
-- POS Printer Class: https://docs.microsoft.com/en-us/previous-versions/windows/embedded/ms884868(v%3dwinembedded.11)
-- POS for .NET SDK: https://docs.microsoft.com/en-us/previous-versions/windows/embedded/bb429024(v=winembedded.4)
- Client use this printer: https://www.epson.co.uk/products/sd/pos-printer/epson-tm-t88v-series
3c). Instructor Current Date Schedule
Screenshot: https://marvelapp.com/9dd26a4/screen/48612714
- User will able to print this when click Instructor name, then pick the Print current date schedule
- Capture content on modal window
- It will printed on Receipt Paper. Read additional info about the technical solution above
3d). Multiple Instructor White Slips
Screenshot: https://marvelapp.com/9dd26a4/screen/48612709
- User will able to print this when click Print Reservations White Slips button on top
- Need able to capture the selected instructors for current date
- In paper you need list all white slips for the selected Instructor
- You might need separated each Instructor detail
- Each instructors need grab White Slips data similar like this: Screenshot: https://marvelapp.com/9dd26a4/screen/48612711
- It will printed on Receipt Paper. Read additional info about the technical solution above
3e). Daily Assignments
Screenshot: https://marvelapp.com/9dd26a4/screen/48612730
- This is Daily Assignments page
- Need able to print this page on standard paper
- Make sure all data captured
3f). Unassigned Privates Single Day
Screenshot: https://marvelapp.com/9dd26a4/screen/48612729
- This is Unassigned Privates page for Single Day
- Need able to print this page on standard paper
- Expand data for each row, when print the page
- Need able to expand the Skiers data on paper print
- Make sure all data captured
3g). Unassigned Privates Multi Day
Screenshot: https://marvelapp.com/9dd26a4/screen/48612726
- This is Unassigned Privates page for Multi Day
- Need able to print this page on standard paper
- Expand data for each row, when print the page
- Make sure all data captured
3h). Instructor Details
Screenshot: https://marvelapp.com/9dd26a4/screen/48612721
- This Instructor Details
- Need able to print this page on standard paper
Web Browsers Requirements
Your submission must look and work consistently across these following browsers on the latest versions:
- IE11
- Chrome,
- Edge,
- Safari,
- Firefox
- Patch file of updated source code based on the latest repo
- Upload your submission to live site for client review, Include the link on your README.md
- We need Video Demo of your submission!
- PDF Print Preview of all required pages
- ASP.Net MVC Core
Basic requirements for this challenge:
- Continue build ASP.Net MVC Core application based on storyboard design with focus on Notifications and Printing
- Make sure your submission running okay on IE11, test existing and new pages
- Important: We running parallel challenge to build another pages on the frontend. Your updated code as possible need use separate folder for this challenge, to make easier for us when merge all codes later.
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 4th of Hoherberg Ski School Frontend Challenge Series. For this challenge we need you to focus specifically on the Manage Notifications & Printing 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/9e1f457
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.
- 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) Manage Notifications
- This is Manage Notification page (Screenshot: 01_1_Manage Notifications.png)
- On top of table there’s option to search, filter by Type, Format and active status
- This is when click dropdown (Screenshot: 01_2_Manage Notifications_Type Client Select.png)
- Table need displayed selected filter only (Screenshot: 01_3_Manage Notifications_Select Client.png, Screenshot: 01_4_Manage Notifications_Client Type.png, Screenshot: 01_5_Manage Notifications_Client Type_Delete.png)
- User need able to Turn on/off the notification by click the toggle
- Delete button need load this modal window (Screenshot: 01_6_Manage Notifications_Client Type_Confirm Delete.png)
- Click Duplicate button need duplicate the row and display success banner (Screenshot: 01_7_Manage Notifications_Client Type_Duplicate Success Notification.png)
- For edit button (Screenshot: 01_8_Manage Notifications_Edit.png)
- Need load the modal window (Screenshot: 01_9_Manage Notifications_Edit Popup.png)
- Important: Re-use HTML editor for Create Reservation page
- Display success/error message (Screenshot: 01_10_Manage Notifications_Edit Popup_Passed html Notification.png)
- HTML editor only show when user select the Template Format Email
- For text message, just need load the textarea (Screenshot: 01_12_Manage Notifications_Edit Popup_Template Format as Text Message.png)
- Save template button need load the success message (Screenshot: 01_14_Manage Notifications_Edit Popup_Template Format Text Message_Saved.png)
2) Add New Template
- You can re-use the same edit template, but should not displayed any default text.
- On this add new template need support Email and Text Message format
- Also there’s Template Type for Client and Employee
- Re-use existing functionalities.
3) Printing Features
- For this task you need make the print result in paper consistent with displayed in application.
- We need find way when click click a 'print' button in the app, that it goes to the default printer. Without going through the browser print options.
- Let us know if you need some clarifications
3a). Barcode
Screenshot: https://marvelapp.com/e683i7j/screen/47641061
- For this screen you just need print the Reservation, Booking Feed Paid and Barcode
3b). Instructor Current Date White Slips
Screenshot: https://marvelapp.com/9dd26a4/screen/48612711
- User will able to print this when click Instructor name, then pick the Print current date white slips
- Capture content on modal window
- It will printed on Receipt Paper. Please read these reference for technical solution related on ASP .NET:
-- POS Printer Class: https://docs.microsoft.com/en-us/previous-versions/windows/embedded/ms884868(v%3dwinembedded.11)
-- POS for .NET SDK: https://docs.microsoft.com/en-us/previous-versions/windows/embedded/bb429024(v=winembedded.4)
- Client use this printer: https://www.epson.co.uk/products/sd/pos-printer/epson-tm-t88v-series
3c). Instructor Current Date Schedule
Screenshot: https://marvelapp.com/9dd26a4/screen/48612714
- User will able to print this when click Instructor name, then pick the Print current date schedule
- Capture content on modal window
- It will printed on Receipt Paper. Read additional info about the technical solution above
3d). Multiple Instructor White Slips
Screenshot: https://marvelapp.com/9dd26a4/screen/48612709
- User will able to print this when click Print Reservations White Slips button on top
- Need able to capture the selected instructors for current date
- In paper you need list all white slips for the selected Instructor
- You might need separated each Instructor detail
- Each instructors need grab White Slips data similar like this: Screenshot: https://marvelapp.com/9dd26a4/screen/48612711
- It will printed on Receipt Paper. Read additional info about the technical solution above
3e). Daily Assignments
Screenshot: https://marvelapp.com/9dd26a4/screen/48612730
- This is Daily Assignments page
- Need able to print this page on standard paper
- Make sure all data captured
3f). Unassigned Privates Single Day
Screenshot: https://marvelapp.com/9dd26a4/screen/48612729
- This is Unassigned Privates page for Single Day
- Need able to print this page on standard paper
- Expand data for each row, when print the page
- Need able to expand the Skiers data on paper print
- Make sure all data captured
3g). Unassigned Privates Multi Day
Screenshot: https://marvelapp.com/9dd26a4/screen/48612726
- This is Unassigned Privates page for Multi Day
- Need able to print this page on standard paper
- Expand data for each row, when print the page
- Make sure all data captured
3h). Instructor Details
Screenshot: https://marvelapp.com/9dd26a4/screen/48612721
- This Instructor Details
- Need able to print this page on standard paper
Web Browsers Requirements
Your submission must look and work consistently across these following browsers on the latest versions:
- IE11
- Chrome,
- Edge,
- Safari,
- Firefox
Final Submission Guidelines
What To Submit?- Patch file of updated source code based on the latest repo
- Upload your submission to live site for client review, Include the link on your README.md
- We need Video Demo of your submission!
- PDF Print Preview of all required pages