functioning basic chat app

[hublib] / hubapps / first / index.js

diff --git a/hubapps/first/index.js b/hubapps/first/index.js
index 20d7101f2cf8885b9e7ea7b8d2fb1cd3b27c0d3b..f6fa9c7367a62c371053a2f9d74a03ddc03f3cfd 100644 (file)
--- a/hubapps/first/index.js
+++ b/hubapps/first/index.js
@@ -1,13 +1,80 @@
-"use strict";
-
 (function () {
-    document.addEventListener("readystatechange", function (event) {
-        if (!event) {
-            event = window.event;
-        }
-        if (event.target.readyState !== "complete") {
-            return;
+    "use strict";
+    var input_div = null;
+
+    function write(msg) {
+        common.write(input_div.previousSibling, msg);
+    }
+
+    function change_name_button(hub) {
+        var btn = document.createElement("button");
+        btn.append(document.createTextNode("change name"));
+        btn.addEventListener("click", function () {
+            setup_change_name(hub);
+        });
+        return btn;
+    }
+
+    function setup_chat(hub) {
+        input_div = document.createElement("div");
+        input_div.append(common.get_input(function () {
+            var input = input_div.getElementsByTagName("input")[0];
+            hub.send(input.value);
+            input.value = "";
+        }));
+        input_div.append(document.createTextNode(" "));
+        input_div.append(change_name_button(hub));
+
+        document.body.append(document.createElement("div"));
+        document.body.append(input_div);
+    }
+
+    function setup_change_name(hub) {
+        var div = document.createElement("div");
+        div.append(document.createTextNode("Enter name: "));
+        div.append(common.get_input(function () {
+            var client_name = div.children[0].value;
+            if (input_div.childNodes[0] !== input_div.children[0]) {
+                input_div.childNodes[0].remove();
+            }
+            input_div.insertBefore(
+                document.createTextNode(client_name + " "), input_div.children[0]
+            );
+            hub.send(JSON.stringify({"action": "set_name", "name": client_name}));
+            div.remove();
+            input_div.style.display = "";
+            input_div.children[0].focus();
+        }));
+        document.body.append(div);
+        input_div.style.display = "none";
+        div.children[0].focus();
+    }
+
+    function open() {
+        setup_chat(this);
+        write("connected to " + ws_uri);
+        setup_change_name(this);
+    }
+
+    function close() {
+        write("connection lost");
+    }
+
+    function message(msg) {
+        var obj = JSON.parse(msg.data);
+        if (obj.action === "join" || obj.action === "leave") {
+            write("[action]: " + obj.name + " " + obj.action + "s");
+        } else if (obj.action == "set_name") {
+            write(
+                "[action]: " +
+                obj.old_name +
+                " changes name to " +
+                obj.name
+            );
+        } else if (obj.hasOwnProperty("data")) {
+            write(obj.name + ": " + obj.data);
         }
-        document.body.append(document.createTextNode("(this is index.js) "));
-    });
+    }
+
+    common.setup(function () {new common.HubClient(ws_uri, open, close, message)});
 })();