WebFund 2016W: Assignment 6

In this assignment you will create ajaxLogs, a version of analyzeLogs written to work as a single-page application, in the style of interactive-graphs.

You may base your version either on your solutions to Assignment 5 or on the supplied solutions.

Submit your program as a zip file via cuLearn. The assignment is officially due on April 7th; however, you may submit it until April 9th without penalty.

Tasks

ajaxLogs should behave just as analyzeLogs, except that the button presses should not cause a new page to be loaded; instead, the page should be updated with the new output. Specifically:

Uploading a file should indicate success or failure without causing a new page to be loaded. For example, text could appear beside the upload button saying "upload succeeded" or "upload failed". You may want to use something like this jQuery upload file plugin.
Downloading the log file should cause the file to be saved to disk through a save dialog box without causing a new page to be loaded. See FileSaver.js.
The Show logs functionality should cause a scrollable widget to be displayed at the bottom of the page with the retrieved logs.
The Visualize logs functionality should cause the frequency graph to be displayed at the bottom of the page.

Note that you may change the interface to make the new functionality more clear, e.g., change the "Submit Query" button to be "Retrieve Logs". You are also allowed to make other improvements, so long as your application runs entirely from a single page. In other words, while it will make GET and POST requests in the background, the contents of the address bar won't change and the page should never do a full reload because of user actions (other than hitting the reload button in the browser).

Scoring

This assignment is worth a total of 10 points. Points will be awarded as follows:

2 for uploading logs without loading a new page
2 for downloading logs without loading a new page
2 for displaying logs in a widget without loading a new page
2 for graphing logs without loading a new page
2 for the overall aesthetics and functionality of the application

You may implement extra functionality. Extra functionality may be awarded up to 2 extra points.

Points may be deducted for disorganized, hard to read/understand, or otherwise problematic code EVEN IF THE CODE FUNCTIONS PROPERLY.

Good luck!

Hints

Saving files

With FileSaver.js, saving data stored in a string to a file can be as simple as:

     saveAs(new Blob([selectedlogdata],
                     {type: "text/plain;charset=utf-8"}),
                       "selected.log");

Solutions

ajaxLogs