Fixed client order and several client/channel icons

js/ui/channel.ts

@@ -108,8 +108,8 @@ class ChannelEntry {
         return result;
     }
 
-    clients(deep = false) {
+    clients(deep = false) : ClientEntry[] {
-        const result = [];
+        const result: ClientEntry[] = [];
         if(this.channelTree == null) return [];
 
         const self = this;
@@ -152,14 +152,17 @@ class ChannelEntry {
         let iconTag = $.spawn("span").addClass("icons");
         iconTag.appendTo(this._tag_channel);
 
-        //Default icon (4)
+        //Default icon (5)
         iconTag.append($.spawn("div").addClass("channel_only_normal").append($.spawn("div").addClass("icon_entry icon_default icon client-channel_default").attr("title", "Default channel")));
-        //Password icon (3)
+        //Password icon (4)
         iconTag.append($.spawn("div").addClass("channel_only_normal").append($.spawn("div").addClass("icon_entry icon_password icon client-register").attr("title", "The channel is password protected")));
-        //Music icon (2)
+        //Music icon (3)
         iconTag.append($.spawn("div").addClass("channel_only_normal").append($.spawn("div").addClass("icon_entry icon_music icon client-music").attr("title", "Music quality")));
+        //Channel moderated (2)
+        iconTag.append($.spawn("div").addClass("channel_only_normal").append($.spawn("div").addClass("icon_entry icon_moderated icon client-moderated").attr("title", "Channel is moderated")));
         //Channel Icon (1)
-        iconTag.append($.spawn("div").addClass("channel_only_normal").addClass("icon_entry channel_icon").attr("title", "Channel icon"));
+        //iconTag.append($.spawn("div").addClass("channel_only_normal").addClass("icon_entry channel_icon").attr("title", "Channel icon"));
+        iconTag.append($.spawn("div").addClass("channel_only_normal").append($.spawn("div").addClass("icon_entry channel_icon").attr("title", "Channel icon")));
         //Default no sound (0)
         let container = $.spawn("div");
         let noSound = $.spawn("div").addClass("icon_entry icon_no_sound icon client-conflict-icon").attr("title", "You don't support the channel codec");
@@ -211,6 +214,34 @@ class ChannelEntry {
         return this._tag_clients;
     }
 
+    reorderClients() {
+        let clients = this.clients();
+
+        if(clients.length > 1) {
+            clients.sort((a, b) => {
+                if(a.properties.client_talk_power < b.properties.client_talk_power)
+                    return 1;
+                if(a.properties.client_talk_power > b.properties.client_talk_power)
+                    return -1;
+
+                if(a.properties.client_nickname > b.properties.client_nickname)
+                    return 1;
+                if(a.properties.client_nickname < b.properties.client_nickname)
+                    return -1;
+
+                return 0;
+            });
+            clients.reverse();
+
+            for(let index = 0; index + 1 < clients.length; index++)
+                clients[index].tag.before(clients[index + 1].tag);
+
+            for(let client of clients) {
+                console.log("- %i %s", client.properties.client_talk_power, client.properties.client_nickname);
+            }
+        }
+    }
+
     adjustSize(parent = true) {
         const size = this.originalHeight;
         let subSize = 0;
@@ -428,7 +459,8 @@ class ChannelEntry {
                 (this.properties.channel_flag_default ? $.fn.show : $.fn.hide).apply(this.channelTag().find(".icons .icon_default"));
             } else if(key == "channel_flag_password")
                 (this.properties.channel_flag_password ? $.fn.show : $.fn.hide).apply(this.channelTag().find(".icons .icon_password"));
-
+            else if(key == "channel_needed_talk_power")
+                (this.properties.channel_needed_talk_power > 0 ? $.fn.show : $.fn.hide).apply(this.channelTag().find(".icons .icon_moderated"));
             if(key == "channel_maxclients" || key == "channel_maxfamilyclients" || key == "channel_flag_private" || key == "channel_flag_password")
                 this.updateChannelTypeIcon();
         }

js/ui/client.ts

@@ -40,6 +40,8 @@ class ClientProperties {
 
     client_teaforum_id: number = 0;
     client_teaforum_name: string = "";
+
+    client_talk_power: number = 0;
 }
 
 class ClientEntry {
@@ -241,6 +243,7 @@ class ClientEntry {
         tag.append($.spawn("div").addClass("away").text(this.clientNickName()));
 
         let clientIcons = $.spawn("span");
+        clientIcons.append($.spawn("div").addClass("icon icon_talk_power client-input_muted").hide());
         tag.append(clientIcons);
 
         return this._tag = tag;
@@ -282,10 +285,18 @@ class ClientEntry {
     set speaking(flag) {
         if(flag == this._speaking) return;
         this._speaking = flag;
-        this.updateClientIcon();
+        this.updateClientSpeakIcon();
     }
 
-    updateClientIcon() {
+    updateClientStatusIcons() {
+        let talk_power = this.properties.client_talk_power >= this._channel.properties.channel_needed_talk_power;
+        if(talk_power)
+            this.tag.find("span").find(".icon_talk_power").hide();
+        else
+            this.tag.find("span").find(".icon_talk_power").show();
+    }
+
+    updateClientSpeakIcon() {
         let icon: string = "";
         let clicon: string = "";
         if(this.properties.client_away) {
@@ -340,7 +351,7 @@ class ClientEntry {
                 if(chat) chat.name = variable.value;
             }
             if(variable.key == "client_away" || variable.key == "client_output_muted" || variable.key == "client_input_hardware" || variable.key == "client_input_muted" || variable.key == "client_is_channel_commander"){
-                this.updateClientIcon();
+                this.updateClientSpeakIcon();
             }
             if(variable.key == "client_away_message" || variable.key == "client_away") {
                 this.updateAwayMessage();
@@ -350,6 +361,13 @@ class ClientEntry {
                 console.error("Updated volume from config " + this.audioController.volume + " - " + "volume_client_" + this.clientUid() + " - " + settings.server("volume_client_" + this.clientUid(), "1"));
                 console.log(this.avatarId());
             }
+            if(variable.key == "client_talk_power") {
+                if(this._channel) {
+                    this._channel.reorderClients();
+                    this.updateClientStatusIcons();
+                }
+
+            }
         }
 
         group.end();

js/ui/view.ts

@@ -183,6 +183,7 @@ class ChannelTree {
         let tag = client.tag.css({display: "none"}).fadeIn("slow");
         tag.appendTo(channel.clientTag());
         channel.adjustSize(true);
+        client.currentChannel().reorderClients();
         client.initializeListener();
 
         channel.updateChannelTypeIcon();
@@ -195,6 +196,11 @@ class ChannelTree {
         client.initializeListener();
     }
 
+    reorderAllClients() {
+        for(let channel of this.channels)
+            channel.reorderClients();
+    }
+
     moveClient(client: ClientEntry, channel: ChannelEntry) {
         let oldChannel = client.currentChannel();
         client["_channel"] = channel;
@@ -208,8 +214,10 @@ class ChannelTree {
         }
         if(client.currentChannel()) {
             client.currentChannel().adjustSize();
+            client.currentChannel().reorderClients();
             client.currentChannel().updateChannelTypeIcon();
         }
+        client.updateClientStatusIcons();
     }
 
     findClient?(clientId: number) : ClientEntry {

templates.html

@@ -645,10 +645,12 @@
                     <td>Name:</td>
                     <td><node key="channel_name"/></td>
                 </tr>
+                {{if property_channel_topic}}
                 <tr>
                     <td>Topic:</td>
                     <td>{{>property_channel_topic}}</td>
                 </tr>
+                {{/if}}
                 <tr>
                     <td>Codec:</td>
                     <td>{{>property_channel_codec}}</td>