Hercules Beacon Web App - Job and Trace screens

Challenge Objectives

• HTML Web app, targeting Dojo, JQuery, and all the latest browser versions (Firefox, Safari, IE, Chrome)

• ArcGIS will also be used (https://developers.arcgis.com/javascript/)

• This challenge will build the skeleton on top of an existing proof of concept.  This will be part of the conversion of a large set of storyboards to a full HTML prototype

 

Project Background

 

• The customer has an existing web application that is relatively unskinned.  We have worked to build them storyboards that implement a better UI

• This challenge will continue the conversion process.  We already have a proof of concept, with a basic header and side menu, and one side menu option, around an ArcGIS view.  

• Future challenges in this stream will convert more screens.

 

Technology Stack

 

• For this challenge, we are targeting static HTML that will work in all modern browsers, including Firefox, Safari, IE, and Chrome.

• In production, the code will run as JSP files on Apache Tomcat, but for this challenge, we are just building out the HTML

• We want to keep the deployment environment server as lightweight as possible.  The simpler the better. The existing proof of concept can just be opened in a browser from the file system, which is fine.

• ArcGIS integration will be required.  The proof of concept already implements this a bit, but the app will be built around an ArcGIS window.  

• ArcGIS requires Dojo (https://dojotoolkit.org/).  We can also use jQuery and related plugins, like jQuery UI and jQuery Date Picker.  The client has specifically asked that we do NOT use Bootstrap for this challenge, so Bootstrap usage is explicitly prohibited.

• For these prototype conversion challenges, you should use standard ArcGIS controls, where appropriate, skinning them through CSS.  This applies to things like the legend, layers, and filters. Do NOT re-create an ArcGIS control in HTML, as that will just make merging the design into the existing application harder.

Specific versions include:

 

• ESRI ArcGIS JS API 3.24  https://developers.arcgis.com/javascript/

• Dojo Toolkit that is imported into the page through the above mentioned ArcGIS JS API

 

Storyboards

The forum will contain a link to grant yourself access to the storyboard files, and a Marvel app link will also be available showing the web UI storyboards.

 

Individual requirements

These MarvelApp links are in scope:

• https://marvelapp.com/4hi5cia/screen/49146202 
• https://marvelapp.com/4hi5cia/screen/49145939
• https://marvelapp.com/4hi5cia/screen/49148987
• https://marvelapp.com/4hi5cia/screen/49148924
• https://marvelapp.com/4hi5cia/screen/49148925
• https://marvelapp.com/4hi5cia/screen/49148930
• https://marvelapp.com/4hi5cia/screen/49148932
• https://marvelapp.com/4hi5cia/screen/49148933  (Update warning text to just  "Please select materials first")
• https://marvelapp.com/4hi5cia/screen/47944623 (Just trace buttons on flyout)
• https://marvelapp.com/4hi5cia/screen/47944624
• https://marvelapp.com/4hi5cia/screen/47944626
• https://marvelapp.com/4hi5cia/screen/47968980 (Just results on right, not the map line)
• https://marvelapp.com/4hi5cia/screen/47944630
• https://marvelapp.com/4hi5cia/screen/47968981

Data

The data for the search panel, the job list view, the job details panel, and the trace results screens should be read from a JSON file.  Do not hard-code this into the prototype, since in the final integration this will be coming from API calls.

Trace Results

On these screens, the results shown under "Trace Result" should be scrollable, and the data should be read from a JSON file:

���https://marvelapp.com/4hi5cia/screen/47968981 
https://marvelapp.com/4hi5cia/screen/47968980

 

Existing screens

Do not do anything to break the existing screens.  They work as expected and we don't want to regress on anything.  Any breaks to the existing screens are in scope for this challenge, so please make sure you test your submission appropriately.

CSS and HTML

We won’t be doing the actual implementation of the functionality for the final app.  We are only doing the prototype conversion. Because of this, we need to ensure that the HTML is extremely well laid out, easily split into pieces for JSP conversion, and the CSS has to be portable, DRY (don’t repeat yourself), and easily editable / applied to new prototype elements as we convert further.

 

Images

Any images converted from the storyboard should support 2x resolution, in addition to 1x resolution.

 

Deployment guide and validation document

These files are required as part of your submission:

A README.md that covers:

• Basic deployment - how to run the app and view the results in a browser.  Plan on the reviewers having Windows or Mac.

Validation video / screencast

• Please show as many browsers working with the app as possible, ideally all 4 major ones:  Firefox, Safari, Chrome, and IE.

 

What To Submit

 

Please submit:

• The converted HTML, JS, and CSS

• A README.md

• A link to the validation video