serve other hubapps too, consolidate and a lot more...

[hublib] / webroot / first / master.js

diff --git a/webroot/first/master.js b/webroot/first/master.js
new file mode 100644 (file)
index 0000000..ada5f96
--- /dev/null
+++ b/webroot/first/master.js
@@ -0,0 +1,166 @@
+(function () {
+    "use strict";
+    var input_div = null;
+    var clients_list = null;
+
+    function write(msg) {
+        common.write(input_div.previousSibling, msg);
+    }
+
+    function master_send(hub, client_ids, client_id, obj) {
+        obj.client_ids = client_ids;
+        obj.client_id = client_id;
+        hub.send(JSON.stringify(obj));
+    }
+
+    function ClientsList() {
+        function Client(clients_list, client_id, name) {
+            var client_label;
+
+            this.clients_list = clients_list;
+            this.id = client_id;
+            this.get_label = function () {
+                return "client-" + this.id.toString();
+            };
+            client_label = this.get_label();
+            this.name = name || client_label;
+
+            this.li = common.tag("li")
+            this.checkbox = common.tag(
+                "input",
+                {
+                    "type": "checkbox",
+                    "id": "checkbox-" + client_label,
+                    "checked": "",
+                },
+            );
+            this.li.append(this.checkbox);
+            clients_list.ul.append(this.li);
+            this.set_name = function (new_name) {
+                var old_name = this.name;
+                this.name = new_name;
+                while (this.checkbox.nextSibling)
+                    this.checkbox.nextSibling.remove();
+                this.checkbox.parentNode.append(document.createTextNode(new_name));
+                return old_name;
+            };
+            this.set_name(client_label);
+        }
+        this.clients = {};
+        this.ul = common.tag("ul");
+        document.body.append(this.ul);
+
+        this.append = function (client_id) {
+            var client = new Client(this, client_id);
+            this.clients[client_id.toString()] = client;
+            return client;
+        };
+        this.remove = function (client_id) {
+            var client = this.clients[client_id];
+            if (client) {
+                client.li.remove();
+                delete this.clients[client_id];
+            }
+            return client;
+        };
+        this.all = function () {
+            var key;
+            var result = [];
+            for (key in this.clients) {
+                result.push(this.clients[key].id);
+            }
+            return result;
+        };
+        this.selected = function () {
+            var key;
+            var client;
+            var result = [];
+            for (key in this.clients) {
+                client = this.clients[key];
+                if (client.checkbox.checked) {
+                    result.push(client.id);
+                }
+            }
+            return result;
+        };
+    }
+
+    function open() {
+        var hub = this;
+        clients_list = new ClientsList();
+        input_div = common.tag("div");
+        input_div.append(document.createTextNode("MASTER "));
+        input_div.append(
+            common.input_with_keydown_event(
+                function (event, target, keycode) {
+                    if (keycode !== "Enter" && keycode !== "NumpadEnter") {
+                        return;
+                    }
+                    hub.send(JSON.stringify({
+                        "client_ids": clients_list.selected(),
+                        "name": "MASTER",
+                        "data": target.value,
+                    }));
+                    write("MASTER: " + target.value);
+                    target.value = "";
+                }
+            )
+        );
+
+        document.body.append(common.tag("div")); // output
+        document.body.append(input_div);
+        write("connected to " + ws_uri);
+    }
+
+    function close() {
+        write("connection lost");
+        input_div.remove();
+    }
+
+    function join_leave_broadcast(hub, client, action) {
+        if (!client) {
+            return;
+        }
+        write("[action]: " + client.name + " " + action + "s");
+        master_send(hub, clients_list.all(), client.id, {
+            "action": action,
+            "name": client.name,
+        });
+    }
+
+    function message(msg) {
+        var obj = JSON.parse(msg.data);
+        var client;
+        if (obj.action === "join") {
+            join_leave_broadcast(this, clients_list.append(obj.client_id), obj.action);
+            return;
+        } else if (obj.action === "leave") {
+            join_leave_broadcast(this, clients_list.remove(obj.client_id), obj.action);
+            return;
+        }
+        client = clients_list.clients[obj.client_id.toString()];
+
+        if (obj.action == "set_name") {
+            write(
+                "[action]: " +
+                client.name +
+                " changes name to " +
+                obj.name
+            );
+            master_send(this, clients_list.all(), client.id, {
+                "action": "set_name",
+                "old_name": client.name,
+                "name": obj.name,
+            });
+            client.set_name(obj.name);
+        } else if (obj.hasOwnProperty("data")) {
+            write(client.name + " [" + client.id + "]: " + obj.data);
+            master_send(this, clients_list.all(), client.id, {
+                "name": client.name,
+                "data": obj.data,
+            });
+        }
+    }
+
+    common.setup(function () { new common.HubClient(ws_uri, open, close, message); });
+})();