Challenge Overview
Challenge Introduction:
Welcome to the Velos Dispatch Prototype Challenge! In this challenge, we are looking for a clean and easily scalable code base to bring the included designs to life. We hope to see a working prototype with test data to support the clickable actions.
As part of this challenge we need you to document your HTML5/CSS3/JavaScript code (using best practices). We are looking for a clear explanation of the code to allow us the ability to quickly update and integrate with future development. We will allow documentation updates during final fixes (but still required).
Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
Competition Task Overview:
The main task of this competition is to develop an HTML5 prototype based on the provided storyboard designs. Your prototype must work properly in all the required browsers.
Project Background:
This tool will allow trucks to be dispatched to in neighborhoods and cities in order to perform maintenance and collect information on the containers the company supports. The tool will be used by someone at a home base (a dispatch administrator who helps coordinate truck routes) that will manage routes and work orders for the drivers who are on the road. There will be additional phases to this project therefore for some sections of this applications, we’ll ask that you simply leave a placeholder for future development.
Screens:
- This application should work on 1280 x 800 screen size for desktop (You might need to adjust the layouts accordingly)!
Key Requirements:
- We would like to ensure the prototype is responsive, please use Bootstrap (latest version) as your css framework
- Browser Compatibility: Current version of Chrome, Firefox and Safari, IE9 and above.
- Ensure your submission is clear of validation errors and warnings (HTML, CSS, JS).
- style.css - use this name for all custom css
- Please use proper id’s and classes in your naming conventions
- If you use additional frameworks/plugins, please make sure they are available for use under open source
Will be ported to Salesforce.com platform
- Do not develop the top blue navigation area or the bottom footer. Only develop the grey center portion of the screens provided (see attached help.png in forums).
Page Requirements:
We need below pages in this challenge..
1) Route All:
Reference: Dispatch-01.png
- Display rows with route information as seen on screen
- Entire row will link user to its related “route-detail” page (“Dispatch-02.png”)
- Header with Sorting (not seen in design), we need there to be a header using the column titles as the following (5 total). This header should be able to sort using the following:
**** ID - Ascending/Descending,
**** Date - Ascending/Descending,
**** Work Orders - Ascending/Descending,
**** Status - type,
**** Hot Tickets - Ascending/Descending
Each row will have these values (follow the storyboards)...
ID, Date, Work Orders, Status, Hot Tickets
- ID - Not in design but please make the first column an alphanumeric 10 digit placeholder
- Date - Day Name, MMM/DD/YYYY
- Work Orders - Number
- Status - In Progress, Planned, Cancelled, Completed
- Hot Tickets - Number
Buttons & Actions
- New Route - will open to “route-new” configuration page
- Show Completed Route - open to “route-completed” page
- Date Selection - Not seen in design, please add a date selection input to the left of the “New Route” button.
2) Route Completed:
No visual image is available for this page. Please refer “Dispatch-01”.
- Display rows exactly like Routes All page (Dispatch-01.png)
- No buttons on this page
3) Route Details:
Reference: Dispatch-02.png
This page is the individual route detail page. When clicking on a row from route-all page (Dispatch-01.png) you should land here.
Breadcrumb
- First link (Dispatch) should return user to route-all page (Dispatch-01.png)
- Instead of a date please use the alphanumeric 10 digit id
Buttons
- Cancel Changes: Make these a dead link
- Update Route Make these a dead link
Hot Ticket:
- This is an accordian style dropdown section, clicking on the hot tickets bar shows the expanded pane as shown in Dispatch-04.png, clicking again will collapse the view to Dispatch-03.png
- Number next to title (dynamically counts how many items are in dropdown)
- Dispatch-08.png - shows no “hot tickets” and displaying list view (please create this page as well)
View Options / Checkboxes:
- List View: Current view (Dispatch-01.png), while switching between tabs show a spinner (pre-loader).
- Map View: Clicking on this takes the user to Dispatch-03.png, while switching between tabs show a spinner (pre-loader).
- Checkboxes - placeholders
- Export to Excel Button - Make it as a dead link
List Section
Reference: Dispatch-02.png
- In list view, clicking on map view..shows Dispatch-03.png
- This will work as an accordion, show the first item expanded by default. Dispatch-08.png shows a version where the first item is collapsed.
- Make the "Move to" button as a dead link
- Have "Cancel Changes" and "Update Route" buttons (make these dead links)
Map Section:
Reference: Dispatch-03.png
- DO NOT create the map. Only develop the buttons and exterior portions
- In map view, clicking on list view..shows Dispatch-02.png
- We don't have these button in the storyboards but please add them "Cancel Changes" and "Update Route" in the prototype for this view!
- - So, when user switch from dispatch-02 to 03, we need to show the left sidebar that is shown in 04 (Dispatch-04.png), currently in Dispatch-03.png - we don't see the left-sidebar but please include them
Left Sidebar:
Reference: Dispatch-04.png
- Left sidebar can scroll independent of the map.
- By default, the left sidebar is shown as Dispatch-04.png
- Within the left sidebar when a block is selected, action buttons should be displayed "Insert Before, Insert After, Save", these buttons will be toggle buttons, i.e. on click it shows
the clicked style as Dispatch-06.png and clicking again it gets back to its normal state Dispatch-05.png.
- MAP - Leave a placeholder for a map, you can either fill this area with a background color or temporary map placeholder.
4) Route New:
Reference: Dispatch-09.png
This page allows users to create a new route, they can use a profile to jumpstart their route with predefined selections or create a new profile to use in the future.
1) Select Profile (Reference: Dispatch-09.png)
- Click on row to select and deselect (Reference: Dispatch-11.png)
Edit:
Triggers bootstrap modal window to edit profile
- all fields in editable state, use “dispatch-10” inputs as example
- “Advance” button - displays additional hidden inputs/choices. Please add a few placeholders, use “label” for label and add a blank input, dropdown, radio placeholder. Onclick, smoothly open and close options (like an accordion)
- Save button - Spinner animation (pre-loader) before it returns back to screen
Delete - placeholder (dead link)
Add New Profile (Dispatch-10.png)
- Create inputs as seen in storyboard
- "Advance" button - displays additional hidden inputs/choices. Please add a few placeholders fields, use “label” for label and add a blank input, dropdown, radio placeholder. Onclick, smoothly open and close this advanced section like an accordion.
2) Select Route Day and Work order Section
- Create radio inputs and date fields - come up with a date-picker (We need a CHANGE here - please have it as checkboxes instead of radio boxes here)
- ? tooltip icon - make sure it works with “lorem ipsum” text placeholder (we don’t have a style for this, so please show a simple tool tip with dummy text).
3) Run Inventory Check:
Reference: “Dispatch-12.png”
- User clicks on “Run Inventory Check” and we show spinner animation (pre-loader) for loading screen.
- Once Inventory Check content has loaded, show the content as shown in “Dispatch-12.png” & “Dispatch-13.png”. Both are the same view, one with error warning and one without errors.
- We would like you to show both the error and no-error views, may be on clicking "Run Inventory Check" for the first time should show Dispatch-12.png and on clicking "Run Inventory Check" again in the error view (Dispatch-12.png) should show the no-error view (Dispatch-13.png)
* Errors example
- Create all sections, static text, warning message, regular text..
- Table Section:
- - - This section works like the table shown in Dispatch-01.png
- - - Toggle List and Map View - same as Dispatch-01.png (Map - DO NOT develop, have it as a placeholder)
- - - Remove buttons on click return to page 1 (Dispatch-01.png - Route All)
- - - Table data must be selectable and de-selectable (selected style is shown in Dispatch-12.png).
* No Errors
- Display rows with example data as in design
- These are accordion style dropdowns will display similar information as the Hot Tickets data in “Dispatch-02.png”
Specific HTML/CSS/JavaScript Requirements:
HTML/CSS Requirements:
- Your HTML code must be valid HTML5 and follow best practices
- Validate your code - reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to layout your page. Only use table tags for tables of data/information and not for page layout.
- No inline CSS styles - all styles must be placed in an external style-sheet.
- Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent)
- Label all CSS, JavaScript, or HTML hacks with explanations so others will understand.
- Your code must render properly in all browsers listed in the scorecard in both Mac and PC environments.
JavaScript Requirements:
- All JavaScript used must not have any copyrights to any third party. 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.
- You are allowed to use JQuery (MIT License) for this contest.
Browsers Requirements:
- Internet Explorer 9+ on PC
- Firefox on Mac / PC
- Chrome on Mac / PC
- Safari on Mac
Documentation Provided:
- Storyboard and Source files
Final Submission Guidelines
Submission Deliverables:
- A complete list of deliverables can be viewed in the UI Prototype Competitions Tutorial.
Final Submission:
- For each member, the final submission should be uploaded to the Online Review Tool.