The purpose of this project is to enable the user to easily select nodes of interest from large structure documents (XML, JSON, CSV)
Use the library from [url removed, login to view] with twilight theme (theme must be easy to change later)
Build a webpage
- top section has input to enter URL, HTTP(s) Basic Authentication, and GET/POST paramaters
- when user presses submit it keep these form input valus in an array and will XMLHTTPRequest the URL
- It will load the contents retrieved within the CodeMirror text editor
- The editor must support XML and JSON documents
- The editor must permit the collapse/expansion of trees in the XML/JSON structure
- The editor must permit double-click to select the word, and text highlihting
- It must handle different newline characters
Milestone 2 - Parsing and Marking
-After the user highlights text, make a hover menu appear with two buttons. The buttons will need special CSS styling. Allow for multiple buttons in future.
-When the user clicks the button, it will copy the XML/JSON full-path, node value, and line number, and save to an array, while deselecting the text. In the next milestone we will call another function after this array has been added to.
-One button will be 'Add Single Instance', the other button will be 'Add All Instances'
-Note in case an XML attribute is selected, it must save the full-path with that attribute specifically
-For the moment, make the contents of the array visible as plain text.
-The array should have another string for 'VizName' which is populated to be the name of the node AND its parent node (excluding the full path)
Milestone 3 - Display
-Make the editor window size adjustable
-On the right hand side of the editor window, create a new panel. This will be named the 'Selected' panel.
-Now for each item in the array, make the panel contain a tile, with the value from the Array.
-A tile in this case means a solid colored circle with white text. The text is the VizName
-On mousoever of a tile, it shows the XML/JSON full path and value for that particular tile, derived from the array.
-On click, the user can re-name the tile, which will update the 'VizName' column in the the array
-Tiles can be sized and coloured the same for this milestone.
-The tiles must look nice. Expect some work to arrange the tiles nicely with layout, color, shading, etc.
Milestone 4 - Saving
Provide a form field to capture 'Integration Name' and button on the webpage to 'Save'.
This button copies to the clipboard all the form fields (from all Milestones, especially first) and array of fullpaths as plain text. Perhaps this can be serialized.
DO NOT AUTOMATICALLY BID. IT IS A WASTE OF TIME.
To be awarded this project, please do the following:-
1. Estimate the number of hours needed for each milestone.
2. Send me one link to a large complex XML or JSON document.