Challenge Overview
Welcome to Ops Frac Schedule Welcome Tours and Help Page Code Challenge
For this is challenge, you need to enhance current Angular application to support Welcome Tours and Help page explained on challenge specification below.
Let’s discuss any questions you have on challenge forum.
Challenge Assets
GDrive: https://drive.google.com/open?id=1gI5J6a6uc2Z4hmP0H2XDIVuAvmRYZta1
AngularApp Source Code
https://gitlab.com/quartz-energy/ops-frac-schedule/web-application
Application support 3 roles, make sure your updates affect all roles
operator/password
admin/password
user/password
REST API Source Code
https://gitlab.com/quartz-energy/ops-frac-schedule/api-services-alt
Postman Collection for API endpoints Testing
https://gitlab.com/quartz-energy/ops-frac-schedule/api-services-alt/tree/dev/docs
Submission Requirements
General Tasks
- For this challenge, you need update related AngularJS app only.
- We need support Welcome Tours and Help Page.
- You may need install the REST API on local SQL Server or on AWS to view the app data.
- Follow the instructions on REST API ReadMe file. Let us know if you face some issue related to the REST API
- We need make sure you make all updated codes to passed the unit testing scoring with minimum 90% coverage of the Angular App
- Double check your submission on required browsers explained below.
1). Welcome Tours
- Check the provided welcome-tours.zip for the Welcome Tours design flow
- This welcome tours need displayed for the 1st time user access the app for all separated roles.
- You can use one of these following library or come up with your own suggestions:
http://daftmonk.github.io/angular-tour/
https://code.mendhak.com/angular-intro.js/example/index.html
https://github.com/benmarch/angular-ui-tour
- But you must follow styling based on storyboard design
- It will be great if we can have smooth scrolling effect to any placement
- We need you highlight all required elements in page based on the storyboard flow
- Make sure all text are editable
- Make the position/placement is correct when resize browser
- Need make each highlight boxes using rounded corner
- Close help button OR press ESC via keyboard need stop the Welcome tours.
- Press arrow left and next button on keyboard need navigate each flow
- FYI: You need navigate to different page at some points
- No need display the “Role Hints” page
- Click Done button should close the Welcome Tours
- You need make sure welcome tours display correct content for all those 3 roles.
- Data for each role can be hardcoded for Welcome Tours
- Create config/way to make the Welcome tours can displayed at first time user logged in only or every time user logged in.
2). Help Page
- User access this page from the Help menu on the left sidebar.
- All the interaction/flow need to be done in single page
- Data for each role can be hardcoded for Help page
- Help & Support title placed on top
- Notice the background image is different than another page
- Tab placed on top. Match active/inactive state
- Match data/image for all tab/section rows
- On the bottom of page there are 3 user roles boxes that will displayed across the tab.
- All of them are clickable to display different section content below.
Dashboard Tab
Screenshot: 1.A.png
- Need make the 1st row to be open by default
- Just need 1 row expand at one time
- Make sure all images easy to swap for future updates
- This is screen when user navigate to different row (Screenshot: 1.B.png & Screenshot: 1.C.png)
Upload Data Tab
Screenshot: 2.A.png
- This is Upload data tab
- When user access to another sections (Screenshot: 2.B.png)
Company Page Tab
Screenshot: 3.A.png
- This is Company Page tab
- When user access to another sections (Screenshot: 3.B.png, Screenshot: 3.C.png)
Schedule Tab
Screenshot: 4.png
- This is for Company Page tab
- All source code that implement the challenge requirements.
- README in markup language (if Any)
- Challenge winner need responsible fix any merge conflicts
Web Browsers Requirements
- IE11
- Microsoft Edge
- Firefox latest version
- Safari latest version
- Chrome latest version
For this is challenge, you need to enhance current Angular application to support Welcome Tours and Help page explained on challenge specification below.
Let’s discuss any questions you have on challenge forum.
Challenge Assets
GDrive: https://drive.google.com/open?id=1gI5J6a6uc2Z4hmP0H2XDIVuAvmRYZta1
AngularApp Source Code
https://gitlab.com/quartz-energy/ops-frac-schedule/web-application
Application support 3 roles, make sure your updates affect all roles
operator/password
admin/password
user/password
REST API Source Code
https://gitlab.com/quartz-energy/ops-frac-schedule/api-services-alt
Postman Collection for API endpoints Testing
https://gitlab.com/quartz-energy/ops-frac-schedule/api-services-alt/tree/dev/docs
Submission Requirements
General Tasks
- For this challenge, you need update related AngularJS app only.
- We need support Welcome Tours and Help Page.
- You may need install the REST API on local SQL Server or on AWS to view the app data.
- Follow the instructions on REST API ReadMe file. Let us know if you face some issue related to the REST API
- We need make sure you make all updated codes to passed the unit testing scoring with minimum 90% coverage of the Angular App
- Double check your submission on required browsers explained below.
1). Welcome Tours
- Check the provided welcome-tours.zip for the Welcome Tours design flow
- This welcome tours need displayed for the 1st time user access the app for all separated roles.
- You can use one of these following library or come up with your own suggestions:
http://daftmonk.github.io/angular-tour/
https://code.mendhak.com/angular-intro.js/example/index.html
https://github.com/benmarch/angular-ui-tour
- But you must follow styling based on storyboard design
- It will be great if we can have smooth scrolling effect to any placement
- We need you highlight all required elements in page based on the storyboard flow
- Make sure all text are editable
- Make the position/placement is correct when resize browser
- Need make each highlight boxes using rounded corner
- Close help button OR press ESC via keyboard need stop the Welcome tours.
- Press arrow left and next button on keyboard need navigate each flow
- FYI: You need navigate to different page at some points
- No need display the “Role Hints” page
- Click Done button should close the Welcome Tours
- You need make sure welcome tours display correct content for all those 3 roles.
- Data for each role can be hardcoded for Welcome Tours
- Create config/way to make the Welcome tours can displayed at first time user logged in only or every time user logged in.
2). Help Page
- User access this page from the Help menu on the left sidebar.
- All the interaction/flow need to be done in single page
- Data for each role can be hardcoded for Help page
- Help & Support title placed on top
- Notice the background image is different than another page
- Tab placed on top. Match active/inactive state
- Match data/image for all tab/section rows
- On the bottom of page there are 3 user roles boxes that will displayed across the tab.
- All of them are clickable to display different section content below.
Dashboard Tab
Screenshot: 1.A.png
- Need make the 1st row to be open by default
- Just need 1 row expand at one time
- Make sure all images easy to swap for future updates
- This is screen when user navigate to different row (Screenshot: 1.B.png & Screenshot: 1.C.png)
Upload Data Tab
Screenshot: 2.A.png
- This is Upload data tab
- When user access to another sections (Screenshot: 2.B.png)
Company Page Tab
Screenshot: 3.A.png
- This is Company Page tab
- When user access to another sections (Screenshot: 3.B.png, Screenshot: 3.C.png)
Schedule Tab
Screenshot: 4.png
- This is for Company Page tab
Final Submission Guidelines
Deliverables- All source code that implement the challenge requirements.
- README in markup language (if Any)
- Challenge winner need responsible fix any merge conflicts
Web Browsers Requirements
- IE11
- Microsoft Edge
- Firefox latest version
- Safari latest version
- Chrome latest version