Challenge Overview
Welcome to Quartz Energy - Offset Operator Frac Schedule AngularJS Challenge
For this is challenge, you need to build provided design into Angular 5 application. Your submission need to support responsive solution, but for this challenge you can support on Desktop only.
Let’s discuss any questions you have on challenge forum.
- Application to be developed using Angular 5
- Each page will have its own specific url suffix
- The page content shall be modular so that we can create new page and renders appropriately.
- AngularJS codes written to be modular and should contain necessary factory/service methods to
ensure code design & best practices.
- Use separated JSON files to load the datas
- Important! Create best practice JSON Services that will be easy to swap with the actual REST API service on the next development.
- Requests parameters to be encapsulated as object rather than individual parameters.
- This application need build using Responsive Web, we can focus on Desktop only for now.
Important!
- Make sure to always read the challenge specs and design carefully and ask for clarifications in the challenge forum as soon as possible. Don't hesitate to not ask questions and don't just assume how to implement any possible vague requirement.
- Provide a detailed documentation on how to setup, deploy and test your submission (preferably in a README.md file). Writing clean code is very important but providing detailed instructions on how to run your code is also an important part of your submission
- Create clear documentation about how to set up your submission locally and on Heroku.
- Upload your submission to Heroku for client review, Include the link on your README.md
- Remove unnecessary / unused code from your application. You should always make sure you submit what you are required to submit.
- Create a clean folder structure and follow the latest best practices for the technology you are using.
Downloadable Files: https://drive.google.com/open?id=1FvIukDFyw08cTQu4_XDjlQ0-unNnL2Tr
MarvelApp: https://marvelapp.com/cb7ggce
Submission Requirements
1). Login
Screenshot: 00_1_login.png
- This is login page
- Login title need to be editable
- Display login page with fixed width and height to be centered on page
- Create login function.
- Get the username data from JSON file
- Learn more need take to separated page
- Request access can be dead link.
2). Learn More
Screenshot: 00_2_learn_more.png
- This is Learn More page
- Click x button on top right need take user to previous screen
- Display login page with fixed width and height to be centered on page
3). Dashboard - Map View
Screenshot: 01_1_Dashboard_map.png
- This is Dashboard screen after user logged in.
- Please check the general styling for some element in page:
Header
- Header need to be in fixed on top
- Header must use fluid width
- Client logo placed on left side
- Application title need to be editable
- On the right side, there is a search input and upload field button
Left Sidebar
- Use fixed width for left sidebar
- Left sidebar height need follow browser screen height
- Set active and inactive state for the main navigation
- On the bottom of left sidebar you need display the user thumbnail and Logout button
Body
- Content on the body area need to be fluid
- On this dashboard page, you need display map view
- There is floating area for button views
- Map view need displayed by default
- There’s Schedule Summary below the view options
- Display row with animated progress
- And number of items placed on the right side
- Match different color of progress
- Display setting button on top right of map
- Display zoom in/out button on the right bottom side
- There are some marker in map with different numbers and marker icons
- Click on marker need display the tooltip (Screenshot: 01_2_Dashboard_map.png)
- Match color based on legend (Screenshot: 01_3_Dashboard_map.png)
- Click filter button need load this flyout (Screenshot: 01_4_Dashboard_filter.png)
- x button need hide the flyout
- There are custom dropdown look
- Also range slider
- Reset button need reset the filter values
- Apply filters need change the map with filtered options
- Click Custom Date need load From and To datepicker (Screenshot: 01_5_Dashboard_filter.png)
- Click the input need load the calendar flyout (Screenshot: 01_6_Dashboard_filter.png)
- Match calendar styling
- Click Select by Upcoming Date need take to previous screen before user select Custom Date
4). Dashboard - List View
Screenshot: 02_Dashboard_list.png
- This screen will be display Well information on table format
- Need able to sort the table
- When user scrolling down need load more datasets
- Match data like storyboard
5). Dashboard - Chart View
Screenshot: 03_1_Dashboard_chart.png
- This is the screen when user click on Chart view
- The 1st Well name column need to be freeze
- You can create animation when load the chart
- User can scroll the table vertically
- Hover on chart need load the tooltips (Screenshot: 03_2_Dashboard_chart.png)
- Match different content when hover to another chart (Screenshot: 03_3_Dashboard_chart.png)
6) Upload Data
Screenshot: 04_1_upload_data.png
- This is upload data page when user click the green button on the right side of header bar
- There are 2 columns for Single Upload and Batch Upload
- On single upload there are some fields user need to filled before can submit
- Wellname input will use autosuggest (Screenshot: 04_2_upload_data.png)
- Blue colored input background will be auto filled when user select the Well Name (Screenshot: 04_3_upload_data.png)
- Start and End Date need load the datepicker
- On the Batch upload, need able to load the browser open file
- Download CSV template can be dead link
- Clear button need reset input text on Single Upload or Batch Upload
- This is Progress upload look, display upload information (Screenshot: 04_4_upload_data.png)
- Cancel button need take to previous screen
7). Company Page
Screenshot: 05_1_company.png
- User landed to this page from the left sidebar
- Page contains companies column and detail
- Add Company button always placed on the bottom
- Change to different company need load another company contact
- Hover on the company row need display hidden edit and delete button (Screenshot: 05_2_company.png)
- Click on Add contact button will load the Add Contact overlay (Screenshot: 05_3_company.png)
- User can drag & drop the image on the placeholder area,
- Match Add contact fields based on storyboard
8). Company Page - Card View
Screenshot: Screenshot: 06_company_option.png
- Create this alternate version of Company page.
9). Upcoming Schedule
Screenshot: 07_calendar.png
- User landed to this page from calendar button on the left sidebar
- There are dropdown filter on top right side
- We need create section on table per 1 month.
- When user scrolling down need load another data set.
CODE REQUIREMENTS:
HTML5
- Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts or errors.
CSS3
- Provide comments on the SCSS code. We need comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all code so developers can follow.
- All SCSS naming should not have any conflicts.
- As possible use CSS3 style when create all styling.
Javascript
- You must using Typescript (.ts) file format
- Use Linter, Jest and other best practice library to maintain your code quality.
- Your submission must follow Angular Coding guidelines
- Put clear comment/documentation for all AngularJS components
- All JavaScript must not have a copyright by a third party.
- It is fine to use GPL/MIT/Open Source code.
- You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
IMAGES/SVG
- Images should be properly compressed while still having good visual quality.
- Please use best practice repetition usage of background based image.
- Please use sprites when using icons for your submission.
- If any icons are required, ask and they will be provided
Web Browsers Requirements
- IE11
- Microsoft Edge
- Firefox latest version
- Safari latest version
- Chrome latest version
For this is challenge, you need to build provided design into Angular 5 application. Your submission need to support responsive solution, but for this challenge you can support on Desktop only.
Let’s discuss any questions you have on challenge forum.
Final Submission Guidelines
Overall Requirements- Application to be developed using Angular 5
- Each page will have its own specific url suffix
- The page content shall be modular so that we can create new page and renders appropriately.
- AngularJS codes written to be modular and should contain necessary factory/service methods to
ensure code design & best practices.
- Use separated JSON files to load the datas
- Important! Create best practice JSON Services that will be easy to swap with the actual REST API service on the next development.
- Requests parameters to be encapsulated as object rather than individual parameters.
- This application need build using Responsive Web, we can focus on Desktop only for now.
Important!
- Make sure to always read the challenge specs and design carefully and ask for clarifications in the challenge forum as soon as possible. Don't hesitate to not ask questions and don't just assume how to implement any possible vague requirement.
- Provide a detailed documentation on how to setup, deploy and test your submission (preferably in a README.md file). Writing clean code is very important but providing detailed instructions on how to run your code is also an important part of your submission
- Create clear documentation about how to set up your submission locally and on Heroku.
- Upload your submission to Heroku for client review, Include the link on your README.md
- Remove unnecessary / unused code from your application. You should always make sure you submit what you are required to submit.
- Create a clean folder structure and follow the latest best practices for the technology you are using.
Downloadable Files: https://drive.google.com/open?id=1FvIukDFyw08cTQu4_XDjlQ0-unNnL2Tr
MarvelApp: https://marvelapp.com/cb7ggce
Submission Requirements
1). Login
Screenshot: 00_1_login.png
- This is login page
- Login title need to be editable
- Display login page with fixed width and height to be centered on page
- Create login function.
- Get the username data from JSON file
- Learn more need take to separated page
- Request access can be dead link.
2). Learn More
Screenshot: 00_2_learn_more.png
- This is Learn More page
- Click x button on top right need take user to previous screen
- Display login page with fixed width and height to be centered on page
3). Dashboard - Map View
Screenshot: 01_1_Dashboard_map.png
- This is Dashboard screen after user logged in.
- Please check the general styling for some element in page:
Header
- Header need to be in fixed on top
- Header must use fluid width
- Client logo placed on left side
- Application title need to be editable
- On the right side, there is a search input and upload field button
Left Sidebar
- Use fixed width for left sidebar
- Left sidebar height need follow browser screen height
- Set active and inactive state for the main navigation
- On the bottom of left sidebar you need display the user thumbnail and Logout button
Body
- Content on the body area need to be fluid
- On this dashboard page, you need display map view
- There is floating area for button views
- Map view need displayed by default
- There’s Schedule Summary below the view options
- Display row with animated progress
- And number of items placed on the right side
- Match different color of progress
- Display setting button on top right of map
- Display zoom in/out button on the right bottom side
- There are some marker in map with different numbers and marker icons
- Click on marker need display the tooltip (Screenshot: 01_2_Dashboard_map.png)
- Match color based on legend (Screenshot: 01_3_Dashboard_map.png)
- Click filter button need load this flyout (Screenshot: 01_4_Dashboard_filter.png)
- x button need hide the flyout
- There are custom dropdown look
- Also range slider
- Reset button need reset the filter values
- Apply filters need change the map with filtered options
- Click Custom Date need load From and To datepicker (Screenshot: 01_5_Dashboard_filter.png)
- Click the input need load the calendar flyout (Screenshot: 01_6_Dashboard_filter.png)
- Match calendar styling
- Click Select by Upcoming Date need take to previous screen before user select Custom Date
4). Dashboard - List View
Screenshot: 02_Dashboard_list.png
- This screen will be display Well information on table format
- Need able to sort the table
- When user scrolling down need load more datasets
- Match data like storyboard
5). Dashboard - Chart View
Screenshot: 03_1_Dashboard_chart.png
- This is the screen when user click on Chart view
- The 1st Well name column need to be freeze
- You can create animation when load the chart
- User can scroll the table vertically
- Hover on chart need load the tooltips (Screenshot: 03_2_Dashboard_chart.png)
- Match different content when hover to another chart (Screenshot: 03_3_Dashboard_chart.png)
6) Upload Data
Screenshot: 04_1_upload_data.png
- This is upload data page when user click the green button on the right side of header bar
- There are 2 columns for Single Upload and Batch Upload
- On single upload there are some fields user need to filled before can submit
- Wellname input will use autosuggest (Screenshot: 04_2_upload_data.png)
- Blue colored input background will be auto filled when user select the Well Name (Screenshot: 04_3_upload_data.png)
- Start and End Date need load the datepicker
- On the Batch upload, need able to load the browser open file
- Download CSV template can be dead link
- Clear button need reset input text on Single Upload or Batch Upload
- This is Progress upload look, display upload information (Screenshot: 04_4_upload_data.png)
- Cancel button need take to previous screen
7). Company Page
Screenshot: 05_1_company.png
- User landed to this page from the left sidebar
- Page contains companies column and detail
- Add Company button always placed on the bottom
- Change to different company need load another company contact
- Hover on the company row need display hidden edit and delete button (Screenshot: 05_2_company.png)
- Click on Add contact button will load the Add Contact overlay (Screenshot: 05_3_company.png)
- User can drag & drop the image on the placeholder area,
- Match Add contact fields based on storyboard
8). Company Page - Card View
Screenshot: Screenshot: 06_company_option.png
- Create this alternate version of Company page.
9). Upcoming Schedule
Screenshot: 07_calendar.png
- User landed to this page from calendar button on the left sidebar
- There are dropdown filter on top right side
- We need create section on table per 1 month.
- When user scrolling down need load another data set.
CODE REQUIREMENTS:
HTML5
- Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts or errors.
CSS3
- Provide comments on the SCSS code. We need comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all code so developers can follow.
- All SCSS naming should not have any conflicts.
- As possible use CSS3 style when create all styling.
Javascript
- You must using Typescript (.ts) file format
- Use Linter, Jest and other best practice library to maintain your code quality.
- Your submission must follow Angular Coding guidelines
- Put clear comment/documentation for all AngularJS components
- All JavaScript must not have a copyright by a third party.
- It is fine to use GPL/MIT/Open Source code.
- You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
IMAGES/SVG
- Images should be properly compressed while still having good visual quality.
- Please use best practice repetition usage of background based image.
- Please use sprites when using icons for your submission.
- If any icons are required, ask and they will be provided
Web Browsers Requirements
- IE11
- Microsoft Edge
- Firefox latest version
- Safari latest version
- Chrome latest version