Continue working on channel settings

channel.js

@@ -74,8 +74,8 @@ var Channel = function(name) {
         allow_voteskip: true,
         voteskip_ratio: 0.5,
         pagetitle: this.name,
-        customcss: "",
+        externalcss: "",
-        customjs: "",
+        externaljs: "",
         chat_antiflood: false,
         show_public: false,
         enable_link_regex: true
@@ -170,8 +170,15 @@ Channel.prototype.loadDump = function() {
                 this.media.currentTime = data.currentTime;
             }
             for(var key in data.opts) {
+                // Gotta love backwards compatibility
+                if(key == "customcss" || key == "customjs") {
+                    var k = key.substring(6);
+                    this.opts[k] = data.opts[key];
+                }
+                else {
                     this.opts[key] = data.opts[key];
                 }
+            }
             for(var key in data.permissions) {
                 this.permissions[key] = data.permissions[key];
             }

user.js

@@ -343,7 +343,7 @@ User.prototype.initCallbacks = function() {
         }
     }.bind(this));
 
-    this.socket.on("channelOpts", function(data) {
+    this.socket.on("setOptions", function(data) {
         if(this.channel != null) {
             this.channel.tryUpdateOptions(this, data);
         }

www/assets/js/callbacks.js

@@ -194,28 +194,19 @@ Callbacks = {
     },
 
     channelOpts: function(opts) {
-        // TODO update if necessary when HTML admin stuff added
-        $("#opt_pagetitle").attr("placeholder", opts.pagetitle);
         document.title = opts.pagetitle;
         PAGETITLE = opts.pagetitle;
-        $("#opt_customcss").val(opts.customcss);
+        $("#chanexternalcss").remove();
-        $("#opt_customjs").val(opts.customjs);
+        if(opts.externalcss.trim() != "") {
-        $("#opt_chat_antiflood").prop("checked", opts.chat_antiflood);
-        $("#opt_show_public").prop("checked", opts.show_public);
-        $("#opt_enable_link_regex").prop("checked", opts.enable_link_regex);
-        $("#customCss").remove();
-        if(opts.customcss.trim() != "") {
             $("<link/>")
                 .attr("rel", "stylesheet")
-                .attr("href", opts.customcss)
+                .attr("href", opts.externalcss)
-                .attr("id", "customCss")
+                .attr("id", "chanexternalcss")
                 .appendTo($("head"));
         }
-        $("#opt_allow_voteskip").prop("checked", opts.allow_voteskip);
+        if(opts.externaljs.trim() != "") {
-        $("#opt_voteskip_ratio").val(opts.voteskip_ratio);
+            if(opts.externaljs != CHANNEL.opts.externaljs) {
-        if(opts.customjs.trim() != "") {
+                $.getScript(opts.externaljs);
-            if(opts.customjs != CHANNEL.opts.customjs) {
-                $.getScript(opts.customjs);
             }
         }
 
@@ -231,8 +222,7 @@ Callbacks = {
     setPermissions: function(perms) {
         CHANNEL.perms = perms;
         if(CLIENT.rank >= Rank.Admin)
-            1;
+            genPermissionsEditor();
-            //genPermissionsEditor();
         handlePermissionChange();
     },
 
@@ -466,7 +456,6 @@ Callbacks = {
     },
 
     drinkCount: function(count) {
-        console.log(count);
         if(count != 0) {
             var text = count + " drink";
             if(count != 1) {

www/assets/js/channelsettings.js

@@ -20,4 +20,50 @@
     clickHandler("#show_filteredit", "#filteredit");
     clickHandler("#show_cssedit", "#cssedit");
     clickHandler("#show_jsedit", "#jsedit");
+
+    genPermissionsEditor();
+
+    $("#chanopts_submit").click(function() {
+        socket.emit("setOptions", {
+            allow_voteskip: $("#opt_allow_voteskip").prop("checked"),
+            voteskip_ratio: parseFloat($("#opt_voteskip_ratio").val()),
+            pagetitle: $("#opt_pagetitle").val() || CHANNEL.name,
+            externalcss: $("#opt_externalcss").val(),
+            externaljs: $("#opt_externaljs").val(),
+            chat_antiflood: $("#opt_chat_antiflood").prop("checked"),
+            show_public: $("#opt_show_public").prop("checked"),
+            /* TODO Deprecate this in favour of per-filter toggle */
+            enable_link_regex: $("#opt_enable_link_regex").prop("checked")
+        });
+    });
+
+    $("#save_motd").click(function() {
+        socket.emit("setMotd", {
+            motd: $("#motdtext").val()
+        });
+    });
+    $("#csstext").keydown(function(ev) {
+        if(ev.keyCode == 9) {
+            $("#csstext").text($("#csstext").val() + "    ");
+            ev.preventDefault();
+            return false;
+        }
+    });
+    $("#save_css").click(function() {
+        socket.emit("setChannelCSS", {
+            css: $("#csstext").val()
+        });
+    });
+    $("#jstext").keydown(function(ev) {
+        if(ev.keyCode == 9) {
+            $("#jstext").text($("#jstext").val() + "    ");
+            ev.preventDefault();
+            return false;
+        }
+    });
+    $("#save_js").click(function() {
+        socket.emit("setChannelJS", {
+            js: $("#jstext").val()
+        });
+    });
 })();

www/assets/js/util.js

@@ -647,7 +647,17 @@ function handlePermissionChange() {
     }
 
     if(CLIENT.rank >= 2) {
+        if($("#channelsettingswrap").html() == "")
             $("#channelsettingswrap").load("channeloptions.html");
+        /* update channel controls */
+        $("#opt_pagetitle").val(CHANNEL.opts.pagetitle);
+        $("#opt_externalcss").val(CHANNEL.opts.externalcss);
+        $("#opt_externaljs").val(CHANNEL.opts.externaljs);
+        $("#opt_chat_antiflood").prop("checked", CHANNEL.opts.chat_antiflood);
+        $("#opt_show_public").prop("checked", CHANNEL.opts.show_public);
+        $("#opt_enable_link_regex").prop("checked", CHANNEL.opts.enable_link_regex);
+        $("#opt_allow_voteskip").prop("checked", CHANNEL.opts.allow_voteskip);
+        $("#opt_voteskip_ratio").val(CHANNEL.opts.voteskip_ratio);
     }
     else {
         $("#channelsettingswrap").html("");
@@ -1043,3 +1053,101 @@ function chatOnly() {
     $("#videowrap").remove();
     $("#chatwrap").removeClass("span5").addClass("span12");
 }
+
+/* channel administration stuff */
+
+function genPermissionsEditor() {
+    $("#permedit").html("");
+    var form = $("<form/>").addClass("form-horizontal")
+        .attr("action", "javascript:void(0)")
+        .appendTo($("#permedit"));
+    var fs = $("<fieldset/>").appendTo(form);
+
+    function makeOption(text, key, permset, defval) {
+        var group = $("<div/>").addClass("control-group")
+            .appendTo(fs);
+        $("<label/>").addClass("control-label")
+            .text(text)
+            .appendTo(group);
+        var controls = $("<div/>").addClass("controls")
+            .appendTo(group);
+        var select = $("<select/>").appendTo(controls);
+        select.data("key", key);
+        for(var i = 0; i < permset.length; i++) {
+            $("<option/>").attr("value", permset[i][1])
+                .text(permset[i][0])
+                .attr("selected", defval == permset[i][1])
+                .appendTo(select);
+        }
+    }
+
+    function addDivider(text) {
+        $("<hr/>").appendTo(fs);
+        $("<h3/>").text(text).appendTo(fs);
+    }
+
+    var standard = [
+        ["Anonymous"    , "-1"],
+        ["Guest"        , "0"],
+        ["Registered"   , "1"],
+        ["Leader"       , "1.5"],
+        ["Moderator"    , "2"],
+        ["Channel Admin", "3"]
+    ];
+
+    var modleader = [
+        ["Leader"       , "1.5"],
+        ["Moderator"    , "2"],
+        ["Channel Admin", "3"]
+    ];
+
+    var modplus = [
+        ["Moderator"    , "2"],
+        ["Channel Admin", "3"]
+    ];
+
+    addDivider("Open playlist permissions");
+    makeOption("Add to playlist", "oplaylistadd", standard, CHANNEL.perms.oplaylistadd+"");
+    makeOption("Add/move to next", "oplaylistnext", standard, CHANNEL.perms.oplaylistnext+"");
+    makeOption("Move playlist items", "oplaylistmove", standard, CHANNEL.perms.oplaylistmove+"");
+    makeOption("Delete playlist items", "oplaylistdelete", standard, CHANNEL.perms.oplaylistdelete+"");
+    makeOption("Jump to video", "oplaylistjump", standard, CHANNEL.perms.oplaylistjump+"");
+    makeOption("Queue playlist", "oplaylistaddlist", standard, CHANNEL.perms.oplaylistaddlist+"");
+
+    addDivider("General playlist permissions");
+    makeOption("Add to playlist", "playlistadd", standard, CHANNEL.perms.playlistadd+"");
+    makeOption("Add/move to next", "playlistnext", standard, CHANNEL.perms.playlistnext+"");
+    makeOption("Move playlist items", "playlistmove", standard, CHANNEL.perms.playlistmove+"");
+    makeOption("Delete playlist items", "playlistdelete", standard, CHANNEL.perms.playlistdelete+"");
+    makeOption("Jump to video", "playlistjump", standard, CHANNEL.perms.playlistjump+"");
+    makeOption("Queue playlist", "playlistaddlist", standard, CHANNEL.perms.playlistaddlist+"");
+    makeOption("Queue livestream", "playlistaddlive", standard, CHANNEL.perms.playlistaddlive+"");
+    makeOption("Add nontemporary media", "addnontemp", standard, CHANNEL.perms.addnontemp+"");
+    makeOption("Temp/untemp playlist item", "settemp", standard, CHANNEL.perms.settemp+"");
+    makeOption("Retrieve playlist URLs", "playlistgeturl", standard, CHANNEL.perms.playlistgeturl+"");
+    makeOption("Shuffle playlist", "playlistshuffle", standard, CHANNEL.perms.playlistshuffle+"");
+    makeOption("Clear playlist", "playlistclear", standard, CHANNEL.perms.playlistclear+"");
+
+    addDivider("Polls");
+    makeOption("Open/Close poll", "pollctl", modleader, CHANNEL.perms.pollctl+"");
+    makeOption("Vote", "pollvote", standard, CHANNEL.perms.pollvote+"");
+
+    addDivider("Moderation");
+    makeOption("Kick users", "kick", modleader, CHANNEL.perms.kick+"");
+    makeOption("Ban users", "ban", modplus, CHANNEL.perms.ban+"");
+    makeOption("Edit MOTD", "motdedit", modplus, CHANNEL.perms.motdedit+"");
+    makeOption("Edit chat filters", "filteredit", modplus, CHANNEL.perms.filteredit+"");
+
+    addDivider("Misc");
+    makeOption("Drink calls", "drink", modleader, CHANNEL.perms.drink+"");
+
+    var submit = $("<button/>").addClass("btn btn-primary").appendTo(fs);
+    submit.text("Save");
+    submit.click(function() {
+        var perms = {};
+        fs.find("select").each(function() {
+            perms[$(this).data("key")] = parseFloat($(this).val());
+        });
+        socket.emit("setPermissions", perms);
+    });
+}

www/channeloptions.html

@@ -77,11 +77,13 @@
                 <input type="checkbox" id="opt_show_public">
             </div>
         </div>
+        <!-- submit -->
+        <button class="btn btn-primary" id="chanopts_submit">Save</button>
+    </form>
 </div>
 <br>
 </div>
 <div id="permedit" class="span12">
-Permissions Here
 </div>
 <div id="motdedit" class="span12">
     <textarea rows="10" id="motdtext"></textarea>