Challenge Overview
Welcome to the Velos Admin - 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
Key Requirements:
- We have an existing prototype, you may use it as a base and reuse the styles css and overall design styles as these new screens are also a part of the base prototype
- 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 bottom footer.
Page Requirements:
We need below pages and sections in this challenge..
1) Header
Reference: Admin Dropdown.png, Admin Header.png
- Create the top header as seen in Admin Header.png..in the base prototype - you wont find the header, please create them!
Dropdown Menu
- - - User - Create the dropdown as seen in the “Reference: Admin Dropdown.png” example.
- - - Main 6 nav buttons - Provide a dropdown example (not shown in prototype) and also use the hover styles as shown in the Admin Dropdown.png.
- - - Choose the “Reports” button, and provide a dropdown similar to the “User” dropdown with two demo labels. “Report 1, Report 2”
2) Manage Account:
Reference: Admin 1.png
- Each sections can be collapsible (open or closed) at the same time as other sections.
SEARCH
- search box
- drop down with result types (place 4 example text areas)
- button
ADD ACCOUNT
* File Upload tool
- - If you use a file upload plugin, please make sure it is open source
- - File completion animation
- - examples (http://www.dropzonejs.com/, http://html5demos.com/dnd-upload)
- - Please look below for detailed explanation for what the screen should look like after file upload.
* Manual Account Entry
- - Should be able to “tab” through each input
PAGINATION
- - Need to be able to click through result pages"
- - Sort by: Account #, Street Address, City, Zip Code, Route #
- - Results: filter by the following amounts 10, 15, 20, 25, 50, 100
FILTER
* Dropdown
- - All Accounts, Active Accounts, Inactive Accounts
* 2 checkboxes w/labels
- - With work orders, Open work orders created by me, Deactivated Accounts
ACCOUNT
- [rows] - (all account rows should independently be allowed to be opened and closed, you can have several account sections opened at the same time)
Collapsed Account Section [When a row is closed/collapsed]
- Display information as the Admin 1.png image shows
Open Account Section [When a row is open/expanded]
i) BUTTONS
* Route
- - Opens a Modal - please use a map placeholder similar to the map on “Reference: Admin 3.png & Admin 1 - map modal.png”
* Location (Reference: Admin 1 - map modal.png)
- - Opens a Modal - map content will be styled the same way as it is on “Reference: Admin 3.png”
* Tip History
Opens a Modal - contains a filter with 2 sections & a table
- Multi-select dropdown - please use a few placeholder texts (35 Gallon, 65 Gallon)
- Date range - two date range dropdowns. Use same date picker as in provided base prototype.
- Table (Reference: Admin 1 - tip history - table style example.png)
- - - Use the reference from code sample (base prototype) to style this table.
- - - Table header will need to be filterable, you may reuse the same filter style as provided in the code base from the provided base prototype.
Edit:
Opens a Modal - Editable fields will be:
- Account # (text field)
- Route (text field)
- Address (text field)
- City(text field)
- State (dropdown)
- Zip (text field)
- Phone (3 boxes (3 digits, 3 digits, 4 digits
- Buttons (Save and Cancel Buttons): clicking on both these will hide the edit view.
Deactivate:
Opens a Modal - “Admin 1 - deactivate button modal.png”
- Buttons (Cancel and Request WO to Remove All Assets): clicking on both these will hide this view.
+ Add New WO
Opens a Modal - Editable fields will be
- Route # (text)
- Request (dropdown)
- Due Date (date picker)
- Status (dropdown)
- Comments (text)
- Save/Cancel buttons (clicking on both these will hide the modal view)
Edit WO:
Reference: Admin 1 - WO edit.png
- Select Resolution (this allows you select the resolution - you may use some dummy values)
- Add a text field for adding comments
- Buttons: Save and cancel: clicking on both these will hide the edit view.
ii) ACCOUNT (details)
- Use example in Reference: Admin 1.png example
iii) WORK ORDERS
- Use example in Reference: Admin 1.png
- - Closed Work order - collapsible section within a Work Order.
- Button - See above section under “buttons” for actions
iv) ASSETS
Each asset is a row with the information provided in the screen Reference: Admin 1.png and will have the button’s Action and Tip History.
- Action - Dropdowns that launch modals - please launch the map modal similar to the location button above.
- Tip History - Display the same tip history modal as above
3) Upload Accounts
Reference: Admin 2.png, Admin 3.png, Admin 4.png
- Admin 2 and 3 screens show the example of an upload process.
Map & Sidebar
Reference: Admin 3.png
Once the file is uploaded the user will be able to see the accounts on a map. You do not need to add the interactive map (just use an image placeholder) but we do need the left sidebar (all) and the container. Similar code exists in the base prototype and can be reused from the map section from the “dispatch code base” provided.
-
Sidebar show & hide toggle with animation - we need a show hide element added to the sidebar. We need to be able to use this on the previously built map as well so please reuse the codebase. See example Admin 3 - map - show-hide.png to see show/hide button location.
-
Button is alway in the upper left of the map and will animate with the sliding effect of the sidebar.
-
-
Buttons under map - create the buttons, no action is required by the buttons.
-
Upload Errors - Reference: Admin 4.png
-
Question mark is a tootip. Use “lorem ipsum” placeholder text
-
Replicate the rest of this section as seen in screen. State is a dropdown.
-
Button - no action
-
-
Duplicate Address
-
Question mark is a tootip. Use “lorem ipsum” placeholder text
-
Replicate the rest of this section as seen in screen.
-
-
Buttons
-
Cancel Account Add - no action
- Complete buttons - both take you back to “manage account” page.
-
���4) Make tables as sortable:
- Wherever you find the tables in the prototype, please make the header row sortable
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.