html/tutorial/java/index.html

<!DOCTYPE html>
<html>
 <head>
  <title>CloudI Java Tutorial</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <!-- http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css -->
  <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" />
  <!-- http://code.jquery.com/jquery-1.11.1.min.js -->
  <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
  <!-- http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js -->
  <script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>
 </head>
 <body>
  <!-- start of recommendation page -->
  <div data-role="page" id="recommendation_page">
   <!-- start of header -->
   <div data-role="header" data-theme="b">
    <h1>CloudI Java Tutorial</h1>
   </div>
   <!-- end header -->
   <form name="recommendation_form" id="recommendation_form"
         onsubmit="return false;">
    <!-- start of content -->
    <div data-role="content" data-theme="a">
     <!-- controls -->
     <div class="ui-field-contain">
      <label for="user_id">user_id </label>
      <input type="text" name="user_id" id="user_id" value="" />
     </div>
     <div class="ui-field-contain">
      <label for="language">language </label>
      <select name="language" id="language">
       <option value="0" selected></option>
      </select>
     </div>
     <div class="ui-field-contain">
      <label for="subject">subject </label>
      <select name="subject" id="subject">
       <option value="0" selected></option>
      </select>
     </div>
     <div class="ui-field-contain">
      <a data-role="button" id="item_refresh"
         data-icon="refresh" data-inline="true"
         onclick="item_refresh_request(); return false;">
       Refresh gutenberg.org Items
      </a>
      <a data-role="button" id="recommendation_refresh"
         data-icon="refresh" data-inline="true"
         onclick="recommendation_refresh_request(); return false;">
       Refresh Recommendation Model
      </a>
     </div>
     <!-- display recommendations -->
     <div name="recommendation_list_content" id="recommendation_list_content"
          style="border:2px solid red; padding: 4px; margin-bottom: 40px;">
      <h2>Recommendations Based On Previous Ratings</h2>
      <div name="recommendation_list" id="recommendation_list">
      </div>
     </div>
     <!-- display rating list -->
     <div name="item_list_content" id="item_list_content"
          style="border:2px solid green; padding: 4px;">
      <h2>Items Available</h2>
      <div name="item_list" id="item_list">
      </div> 
     </div>
    </div>
    <!-- end of content -->
   </form>
   <!-- start footer -->
   <div data-role="footer">
    <p align="right" id="connection_status"></p>
   </div>
  </div>
   <!-- end footer -->

  </div>
  <!-- end of recommendation page -->
  <script type="text/javascript">

var RATING_MIN = "0.5";
var RATING_MAX = "5.0";
var RATING_STEP = "0.5";
var UPDATE_USER_ID_TIMER_DELAY = 2000; // milliseconds
var websocket = undefined;
var update_user_id_timer = undefined;
var item_refresh_pending = false;
var recommendation_refresh_pending = false;
var recommendation_list_first = undefined;

function element_event_send(element, event_name) {
    var standard_browser = document.createEvent;
    var e;
    if (standard_browser) {
        e = document.createEvent("HTMLEvents");
        e.initEvent(event_name, true, true);
    }
    else {
        e = document.createEventObject();
        e.eventType = event_name;
    }
    e.eventName = event_name;
    if (standard_browser) {
        element.dispatchEvent(e);
    }
    else {
        element.fireEvent("on" + e.eventType, e);
    }
}

function element_event_handler_add(element, event_name, f) {
    if (element.attachEvent) {
        element["e" + event_name + f] = f;
        element[event_name + f] = function() {
            element["e" + event_name + f](window.event);
        }
        element.attachEvent("on" + event_name, element[event_name + f]);
    }
    else {
        element.addEventListener(event_name, f, false);
    }
}

function element_event_handler_remove(element, event_name, f) {
    if (element.detachEvent) {
        element.detachEvent("on" + event_name, element[event_name + f]);
        element[event_name + f] = null;
        element["e" + event_name + f] = null;
    }
    else {
        element.removeEventListener(event_name, f, false);
    }
}

function options_set_first(id, value) {
    var select = document.getElementById(id);
    var option = select.options[0];
    option.text = value;
    element_event_send(select, "change");
}

function options_update(id, list, field) {
    var select = document.getElementById(id);
    var current = select.options[select.selectedIndex].text;
    var i;
    // remove all the current entries
    for(i = select.options.length - 1; i >= 0; i--) {
        select.remove(i);
    }
    // add all the new entries
    var current_i = undefined;
    for (i = 0; i < list.length; i++) {
        var value = list[i][field];
        var option = document.createElement("option");
        option.value = i;
        option.text = value;
        if (value == current) {
            option.selected = true;
            current_i = i;
        }
        select.add(option, i);
    }
    // use the old selection as the current selection, if present
    if (typeof current_i != "undefined") {
        select.selectedIndex = current_i;
    }
    else {
        select.selectedIndex = 0;
    }
    element_event_send(select, "change");
}

function options_selected_store(id, field) {
    var select = document.getElementById(id);
    var current = select.options[select.selectedIndex].text;
    if (current == localStorage[field])
        return false;
    localStorage[field] = current;
    return true;
}

function update_stored_user_id_set() {
    var user_id = document.getElementById("user_id").value;
    if (user_id == "") {
        return;
    }
    else if (user_id !== "" + parseInt(user_id, 10)) {
        alert("user_id is an integer value! (Java long)");
        return;
    }
    else if (user_id == localStorage.user_id) {
        return;
    }
    localStorage.user_id = user_id;
    if (typeof update_user_id_timer == "undefined") {
        var update_function = function() {
            recommendation_list_request();
            item_list_request();
            update_user_id_timer = undefined;
        };
        update_user_id_timer = setTimeout(update_function,
                                          UPDATE_USER_ID_TIMER_DELAY);
    }
}

function update_stored_language_set() {
    if (! options_selected_store("language", "language"))
        return;
    else if (typeof update_user_id_timer != "undefined")
        return;
    item_list_request();
}

function update_stored_subject_set() {
    if (! options_selected_store("subject", "subject"))
        return;
    else if (typeof update_user_id_timer != "undefined")
        return;
    item_list_request();
}

function connection_status_set(value) {
    var p = document.getElementById("connection_status");
    p.innerHTML = value;
}

function html_item_list(list) {
    // add items to the list
    var html = "";
    var i;
    for (i = 0; i < list.length; i++) {
        var item = list[i];
        var slider_id;
        var button_id;
        var recommendation = typeof item.rating_expected == "number";
        if (recommendation) {
            slider_id = "slider" + item.item_id + "_recommendation";
            button_id = "button" + item.item_id + "_recommendation";
            html_language_subject =
"[" + item.languages.join(", ") + "] [" + item.subjects.join(", ") + "]" +
"<br />";
        }
        else {
            slider_id = "slider" + item.item_id + "_item";
            button_id = "button" + item.item_id + "_item";
            html_language_subject = "";
        }
        var html_creator;
        if (item.creator_link != null) {
            html_creator =
"<a href=\"" + item.creator_link + "\" target=\"_blank\">" +
item.creator +
"</a>";
        }
        else {
            html_creator = item.creator;
        }
        var html_language_subject;
        var button_icon;
        var button_text;
        var rating;
        if (item.rating != null) {
            button_icon = "refresh";
            button_text = "Update";
            rating = item.rating;
        }
        else if (recommendation) {
            button_icon = "check";
            button_text = "Rate (expecting " + item.rating_expected + ")";
            rating = RATING_MIN;
        }
        else {
            button_icon = "check";
            button_text = "Rate";
            rating = RATING_MIN;
        }
        html +=
"<div class=\"ui-field-contain\">" +
"<div data-role=\"rangeslider\">" +
"<label for=\"" + slider_id + "\">" +
"<a href=\"http://www.gutenberg.org/ebooks/" + item.item_id +
  "\" target=\"_blank\">" + item.title + "</a><br />" +
"by&nbsp;" + html_creator + "<br />" +
html_language_subject +
"(added&nbsp;on&nbsp;" + item.date_created + ")" +
"</label>" +
"<input type=\"range\" name=\""  + slider_id + "\" id=\"" + slider_id +
  "\" value=\"" + rating +
  "\" min=\"" + RATING_MIN + "\" max=\"" + RATING_MAX +
  "\" step=\"" + RATING_STEP +
  "\" data-highlight=\"true\" data-id=\"" + item.item_id +
  "\" data-mini=\"true\" />" +
"</div>" +
"<div data-role=\"fieldcontain\">" +
"<a data-role=\"button\" id=\"" + button_id +
  "\" data-icon=\"" + button_icon + "\" data-inline=\"true\" " +
  "onclick=\"" +
    "recommendation_update_request(" +
      item.item_id + ",'" + slider_id + "','" + button_id + "');" +
    "return false;\">" +
button_text +
"</a>" +
"</div>" +
"</div>";
    }
    return html;
}

function item_refresh_request() {
    // refresh the current gutenberg.org items stored in the database
    if (item_refresh_pending) {
        alert("item_refresh in-progress");
        return;
    }
    item_refresh_pending = true;
    $("#item_refresh").buttonMarkup({icon: "clock"})
                      .trigger("refresh");
    var item_refresh = {
        message_name: "item_refresh"
    }; 
    websocket_send(item_refresh);
}

function item_refresh_response(obj) {
    if (! obj.success) {
        $("#item_refresh").buttonMarkup({icon: "refresh"})
                          .trigger("refresh");
        item_refresh_pending = false;
        alert("item_refresh error: " + obj.error);
    }
}

function item_refresh_occurred_notification(obj) {
    var item_refresh_caused = item_refresh_pending;
    if (item_refresh_pending) {
        $("#item_refresh").buttonMarkup({icon: "refresh"})
                          .trigger("refresh");
        item_refresh_pending = false;
    }
    websocket_send({}); // notification response required, i.e., transactional
    if (obj.success) {
        item_list_request();
    }
    else if (item_refresh_caused) {
        alert("item_refresh Failed!");
    }
}

function item_list_request() {
    // get the current list of items
    var item_list = {
        message_name: "item_list",
        user_id: localStorage.user_id,
        language: localStorage.language,
        subject: localStorage.subject
    }; 
    websocket_send(item_list);
}

function item_list_response(obj) {
    // display the current list of items
    html = html_item_list(obj.items);
    if (html != "") {
        document.getElementById("item_list").innerHTML = html;
        $("#item_list").enhanceWithin();
        $("#item_list_content").show();
    }
    else {
        $("#item_list_content").hide();
    }
}

function language_list_request() {
    // get the list of languages based on the items that exist
    var language_list = {
        message_name: "language_list"
    }; 
    websocket_send(language_list);
}

function language_list_response(obj) {
    // display the current list of languages
    options_update("language", obj.languages, "language");
}

function subject_list_request() {
    // get the list of subjects based on the items that exist
    var subject_list = {
        message_name: "subject_list"
    }; 
    websocket_send(subject_list);
}

function subject_list_response(obj) {
    // display the current list of subjects
    options_update("subject", obj.subjects, "subject");
}

function recommendation_refresh_request() {
    // refresh the lenskit recommendation model
    if (recommendation_refresh_pending) {
        alert("recommendation_refresh in-progress");
        return;
    }
    recommendation_refresh_pending = true;
    $("#recommendation_refresh").buttonMarkup({icon: "clock"})
                                .trigger("refresh");
    var recommendation_refresh = {
        message_name: "recommendation_refresh"
    }; 
    websocket_send(recommendation_refresh);
}

function recommendation_refresh_response(obj) {
    // use the updated lenskit recommendation model
    $("#recommendation_refresh").buttonMarkup({icon: "refresh"})
                                .trigger("refresh");
    recommendation_refresh_pending = false;
    if (! obj.success) {
        alert("recommendation_refresh Failed!");
    }
}

function recommendation_refresh_occurred_notification(obj) {
    websocket_send({}); // notification response required, i.e., transactional
    recommendation_list_request();
}

function recommendation_list_request() {
    // get the current list of recommendations
    var recommendation_list = {
        message_name: "recommendation_list",
        user_id: localStorage.user_id
    }; 
    websocket_send(recommendation_list);
}

function recommendation_list_response(obj) {
    // display the current list of recommendations
    recommendation_update_response(obj);
}

function recommendation_update_request(item_id, slider_id, button_id) {
    // change button to "Update" mode
    $("#" + button_id).buttonMarkup({icon: "refresh"})
                      .text("Update")
                      .trigger("refresh");
    // update rating value and get an updated list of recommendations
    var rating = $("#" + slider_id).val();
    var recommendation_update = {
        message_name: "recommendation_update",
        user_id: localStorage.user_id,
        item_id: item_id,
        rating: rating
    }; 
    websocket_send(recommendation_update);
}

function recommendation_update_response(obj) {
    // display the current list of recommendations
    var recommendation_first = obj.recommendations[0];
    var recommendation_list_focus =
        (typeof recommendation_list_first == "undefined" &&
         typeof recommendation_first != "undefined") ||
        (typeof recommendation_list_first != "undefined" &&
         typeof recommendation_first != "undefined" &&
         recommendation_list_first.item_id != recommendation_first.item_id);
    recommendation_list_first = recommendation_first;
    html = html_item_list(obj.recommendations);
    if (html != "") {
        document.getElementById("recommendation_list").innerHTML = html;
        $("#recommendation_list").enhanceWithin();
        $("#recommendation_list_content").show();
        if (recommendation_list_focus) {
            document.getElementById("recommendation_page").scrollIntoView();
        }
    }
    else {
        $("#recommendation_list_content").hide();
    }
}

function websocket_send(data_object) {
    if (websocket == undefined) {
        alert("Not connected!");
        return;
    }
    var data = JSON.stringify(data_object, null, 2);
    websocket.send(data);
    console.log("websocket sent: " + data);
}

// called when the web page has finished loading    
$(document).ready(function () {
    console.log("loaded, running javascript...");

    $("#item_list_content").hide();
    $("#recommendation_list_content").hide();

    // get the user data from HTML5 storage if it has been stored
    var user_id = "1";
    var language = "en";
    var subject = "Philosophy";
    if (typeof Storage != "undefined") {
        // Web Storage support available
        var user_id_stored = localStorage.user_id;
        if (typeof user_id_stored == "string") {
            user_id = user_id_stored;
        }
        else {
            localStorage.user_id = user_id;
        }
        var language_stored = localStorage.language;
        if (typeof language_stored == "string") {
            language = language_stored;
        }
        else {
            localStorage.language = language;
        }
        var subject_stored = localStorage.subject;
        if (typeof subject_stored == "string") {
            subject = subject_stored;
        }
        else {
            localStorage.subject = subject;
        }
    }
    else {
        // Web Storage support unavailable
        alert("HTML5 is required!");
        return;
    }
    document.getElementById("user_id").value = user_id;
    options_set_first("language", language);
    options_set_first("subject", subject);
    console.log("user_id = " + user_id);
    console.log("language = " + language);
    console.log("subject = " + subject);
    // create a WebSocket connection for protocol usage
    var host = "127.0.0.1";
    var port = "8080";
    var service_name = "/tutorial/java/service/client";
    if (typeof WebSocket != "function") {
        alert("WebSocket support is required!");
        return;
    }
    var websocket_url = "ws://" + host + ":" + port + service_name;
    websocket = new WebSocket(websocket_url);
    console.log("websocket connecting to " + websocket_url);
    connection_status_set("Connecting");
    websocket.onopen = function() {
        console.log("websocket connected");
        connection_status_set("Connected");
        language_list_request();
        subject_list_request();
        recommendation_list_request();
        item_list_request();

        // add update events
        element_event_handler_add(document.getElementById("user_id"),
                                  "input", update_stored_user_id_set);
        element_event_handler_add(document.getElementById("language"),
                                  "change", update_stored_language_set);
        element_event_handler_add(document.getElementById("subject"),
                                  "change", update_stored_subject_set);
    };
    websocket_message = function (data) {
        console.log("websocket received: " + data);
        var data_object = JSON.parse(data);
        if (data_object.success !== true) {
            if (typeof data_object.error == "string") {
                switch (data_object.message_name) {
                    case "item_refresh":
                        item_refresh_response(data_object);
                        break;
                    case "item_refresh_occurred":
                        item_refresh_occurred_notification(data_object);
                        break;
                    case "recommendation_refresh":
                        recommendation_refresh_response(data_object);
                        break;
                    default:
                        console.log("websocket error: " + data_object.error);
                        break;
                }
            }
            else {
                console.log("websocket invalid message: " + data);
            }
            return;
        }
        switch (data_object.message_name) {
            case "item_list":
                item_list_response(data_object);
                break;
            case "item_refresh":
                item_refresh_response(data_object);
                break;
            case "item_refresh_occurred":
                item_refresh_occurred_notification(data_object);
                break;
            case "language_list":
                language_list_response(data_object);
                break;
            case "subject_list":
                subject_list_response(data_object);
                break;
            case "recommendation_update":
                recommendation_update_response(data_object);
                break;
            case "recommendation_list":
                recommendation_list_response(data_object);
                break;
            case "recommendation_refresh":
                recommendation_refresh_response(data_object);
                break;
            case "recommendation_refresh_occurred":
                recommendation_refresh_occurred_notification(data_object);
                break;
            default:
                console.log("websocket message \"" +
                            data_object.message_name + "\" not implemented");
                break;
        }
    };
    websocket.onmessage = function (evt) {
        var data = evt.data;
        if (data instanceof Blob) {
            // binary is received and used as text
            var reader = new FileReader();
            reader.readAsText(data, "text/plain");
            reader.onload = function (reader_evt) {
                data = reader_evt.target.result;
                websocket_message(data);
            };
        }
        else {
            // text is received
            websocket_message(data);
        }
    };
    websocket.onclose = function() {
        websocket = undefined;
        console.log("websocket disconnected");
        connection_status_set("Disconnected");
        // remove update events
        element_event_handler_remove(document.getElementById("user_id"),
                                     "input", update_stored_user_id_set);
        element_event_handler_remove(document.getElementById("language"),
                                     "change", update_stored_language_set);
        element_event_handler_remove(document.getElementById("subject"),
                                     "change", update_stored_subject_set);
    };
});

  </script>
 </body>
</html>