re-package code for meta panels into classes

htdocs/css/openwebrx.css

@@ -908,10 +908,15 @@ img.openwebrx-mirror-img
     border-color: Red;
 }
 
+.openwebrx-meta-panel {
+    display: flex;
+    flex-direction: row;
+}
+
 .openwebrx-meta-slot {
+    flex: 1;
     width: 145px;
     height: 196px;
-    float: left;
     margin-right: 10px;
 
     background-color: #676767;

htdocs/index.html

@@ -65,32 +65,28 @@
             <div class="openwebrx-panel openwebrx-message-panel" id="openwebrx-panel-packet-message" style="display: none; width: 619px;" data-panel-name="aprs-message"></div>
             <div class="openwebrx-panel openwebrx-message-panel" id="openwebrx-panel-pocsag-message" style="display: none; width: 619px;" data-panel-name="pocsag-message"></div>
             <div class="openwebrx-panel openwebrx-meta-panel" id="openwebrx-panel-metadata-ysf" style="display: none;" data-panel-name="metadata-ysf">
-                <div class="openwebrx-meta-frame">
+                <div class="openwebrx-meta-slot">
-                    <div class="openwebrx-meta-slot">
+                    <div class="openwebrx-ysf-mode openwebrx-meta-autoclear"></div>
-                        <div class="openwebrx-ysf-mode openwebrx-meta-autoclear"></div>
+                    <div class="openwebrx-meta-user-image"></div>
-                        <div class="openwebrx-meta-user-image"></div>
+                    <div class="openwebrx-ysf-source openwebrx-meta-autoclear"></div>
-                        <div class="openwebrx-ysf-source openwebrx-meta-autoclear"></div>
+                    <div class="openwebrx-ysf-up openwebrx-meta-autoclear"></div>
-                        <div class="openwebrx-ysf-up openwebrx-meta-autoclear"></div>
+                    <div class="openwebrx-ysf-down openwebrx-meta-autoclear"></div>
-                        <div class="openwebrx-ysf-down openwebrx-meta-autoclear"></div>
-                    </div>
                 </div>
             </div>
             <div class="openwebrx-panel openwebrx-meta-panel" id="openwebrx-panel-metadata-dmr" style="display: none;" data-panel-name="metadata-dmr">
-                <div class="openwebrx-meta-frame">
+                <div class="openwebrx-meta-slot openwebrx-dmr-timeslot-panel">
-                    <div class="openwebrx-meta-slot openwebrx-dmr-timeslot-panel">
+                    <div class="openwebrx-dmr-slot">Timeslot 1</div>
-                        <div class="openwebrx-dmr-slot">Timeslot 1</div>
+                    <div class="openwebrx-meta-user-image"></div>
-                        <div class="openwebrx-meta-user-image"></div>
+                    <div class="openwebrx-dmr-id openwebrx-meta-autoclear"></div>
-                        <div class="openwebrx-dmr-id openwebrx-meta-autoclear"></div>
+                    <div class="openwebrx-dmr-name openwebrx-meta-autoclear"></div>
-                        <div class="openwebrx-dmr-name openwebrx-meta-autoclear"></div>
+                    <div class="openwebrx-dmr-target openwebrx-meta-autoclear"></div>
-                        <div class="openwebrx-dmr-target openwebrx-meta-autoclear"></div>
+                </div>
-                    </div>
+                <div class="openwebrx-meta-slot openwebrx-dmr-timeslot-panel">
-                    <div class="openwebrx-meta-slot openwebrx-dmr-timeslot-panel">
+                    <div class="openwebrx-dmr-slot">Timeslot 2</div>
-                        <div class="openwebrx-dmr-slot">Timeslot 2</div>
+                    <div class="openwebrx-meta-user-image"></div>
-                        <div class="openwebrx-meta-user-image"></div>
+                    <div class="openwebrx-dmr-id openwebrx-meta-autoclear"></div>
-                        <div class="openwebrx-dmr-id openwebrx-meta-autoclear"></div>
+                    <div class="openwebrx-dmr-name openwebrx-meta-autoclear"></div>
-                        <div class="openwebrx-dmr-name openwebrx-meta-autoclear"></div>
+                    <div class="openwebrx-dmr-target openwebrx-meta-autoclear"></div>
-                        <div class="openwebrx-dmr-target openwebrx-meta-autoclear"></div>
-                    </div>
                 </div>
             </div>
             <div class="openwebrx-panel" id="openwebrx-panel-log" data-panel-name="debug" style="width: 619px;">

htdocs/lib/DemodulatorPanel.js

@@ -165,10 +165,13 @@ DemodulatorPanel.prototype.updatePanels = function() {
 
     modulation = this.getDemodulator().get_modulation();
     var showing = 'openwebrx-panel-metadata-' + modulation;
-    $(".openwebrx-meta-panel").each(function (_, p) {
+    var metaPanels = $(".openwebrx-meta-panel");
+    metaPanels.each(function (_, p) {
         toggle_panel(p.id, p.id === showing);
     });
-    clear_metadata();
+    metaPanels.metaPanel().each(function() {
+        this.clear();
+    });
 };
 
 DemodulatorPanel.prototype.getDemodulator = function() {

htdocs/lib/MetaPanel.js

@@ -0,0 +1,119 @@
+function MetaPanel(el) {
+    this.el = el;
+    this.modes = [];
+}
+
+MetaPanel.prototype.update = function(data) {
+};
+
+MetaPanel.prototype.isSupported = function(data) {
+    return this.modes.includes(data.protocol);
+};
+
+MetaPanel.prototype.clear = function() {
+    this.el.find(".openwebrx-meta-autoclear").text("");
+    this.el.find(".openwebrx-meta-slot").removeClass("active").removeClass("sync");
+};
+
+function DmrMetaSlot(el) {
+    this.el = $(el);
+}
+
+DmrMetaSlot.prototype.update = function(data) {
+    var id = "";
+    var name = "";
+    var target = "";
+    var group = false;
+    this.el[data['sync'] ? "addClass" : "removeClass"]("sync");
+    if (data['sync'] && data['sync'] === "voice") {
+        id = (data['additional'] && data['additional']['callsign']) || data['source'] || "";
+        name = (data['additional'] && data['additional']['fname']) || "";
+        if (data['type'] === "group") {
+            target = "Talkgroup: ";
+            group = true;
+        }
+        if (data['type'] === "direct") target = "Direct: ";
+        target += data['target'] || "";
+        this.el.addClass("active");
+    } else {
+        this.el.removeClass("active");
+    }
+    this.el.find(".openwebrx-dmr-id").text(id);
+    this.el.find(".openwebrx-dmr-name").text(name);
+    this.el.find(".openwebrx-dmr-target").text(target);
+    this.el.find(".openwebrx-meta-user-image")[group ? "addClass" : "removeClass"]("group");
+}
+
+function DmrMetaPanel(el) {
+    MetaPanel.call(this, el);
+    this.modes = ['DMR'];
+    this.slots = this.el.find('.openwebrx-meta-slot').toArray().map(function(el){
+        return new DmrMetaSlot(el);
+    });
+}
+
+DmrMetaPanel.prototype = new MetaPanel();
+
+DmrMetaPanel.prototype.update = function(data) {
+    if (!this.isSupported(data)) return;
+    if (data['slot']) {
+        var slot = this.slots[data['slot']];
+        slot.update(data);
+    } else {
+        this.clear();
+    }
+}
+
+DmrMetaPanel.prototype.clear = function() {
+    MetaPanel.prototype.clear.call(this);
+    this.el.find(".openwebrx-dmr-timeslot-panel").removeClass("muted");
+};
+
+function YsfMetaPanel(el) {
+    MetaPanel.call(this, el);
+    this.modes = ['YSF'];
+}
+
+YsfMetaPanel.prototype = new MetaPanel();
+
+YsfMetaPanel.prototype.update = function(data) {
+    if (!this.isSupported(data)) return;
+
+    var mode = " ";
+    var source = "";
+    var up = "";
+    var down = "";
+    if (data['mode'] && data['mode'] !== "") {
+        mode = "Mode: " + data['mode'];
+        source = data['source'] || "";
+        if (data['lat'] && data['lon'] && data['source']) {
+            source = "<a class=\"openwebrx-maps-pin\" href=\"map?callsign=" + data['source'] + "\" target=\"_blank\"></a>" + source;
+        }
+        up = data['up'] ? "Up: " + data['up'] : "";
+        down = data['down'] ? "Down: " + data['down'] : "";
+        this.el.find(".openwebrx-meta-slot").addClass("active");
+    } else {
+        this.el.find(".openwebrx-meta-slot").removeClass("active");
+    }
+    this.el.find(".openwebrx-ysf-mode").text(mode);
+    this.el.find(".openwebrx-ysf-source").html(source);
+    this.el.find(".openwebrx-ysf-up").text(up);
+    this.el.find(".openwebrx-ysf-down").text(down);
+}
+
+MetaPanel.types = {
+    dmr: DmrMetaPanel,
+    ysf: YsfMetaPanel
+};
+
+$.fn.metaPanel = function() {
+    return this.map(function() {
+        var $self = $(this);
+        if (!$self.data('metapanel')) {
+            var matches = /^openwebrx-panel-metadata-([a-z]+)$/.exec($self.prop('id'));
+            var constructor = matches && MetaPanel.types[matches[1]] || MetaPanel;
+            $self.data('metapanel', new constructor($self));
+        }
+        return $self.data('metapanel');
+    });
+};

htdocs/openwebrx.js

@@ -790,7 +790,9 @@ function on_ws_recv(evt) {
                         Modes.setFeatures(json['value']);
                         break;
                     case "metadata":
-                        update_metadata(json['value']);
+                        $('.openwebrx-meta-panel').metaPanel().each(function(){
+                            this.update(json['value']);
+                        });
                         break;
                     case "js8_message":
                         $("#openwebrx-panel-js8-message").js8().pushMessage(json['value']);
@@ -900,75 +902,6 @@ function on_ws_recv(evt) {
     }
 }
 
-function update_metadata(meta) {
-    var el;
-    if (meta['protocol']) switch (meta['protocol']) {
-        case 'DMR':
-            if (meta['slot']) {
-                el = $("#openwebrx-panel-metadata-dmr").find(".openwebrx-dmr-timeslot-panel").get(meta['slot']);
-                var id = "";
-                var name = "";
-                var target = "";
-                var group = false;
-                $(el)[meta['sync'] ? "addClass" : "removeClass"]("sync");
-                if (meta['sync'] && meta['sync'] === "voice") {
-                    id = (meta['additional'] && meta['additional']['callsign']) || meta['source'] || "";
-                    name = (meta['additional'] && meta['additional']['fname']) || "";
-                    if (meta['type'] === "group") {
-                        target = "Talkgroup: ";
-                        group = true;
-                    }
-                    if (meta['type'] === "direct") target = "Direct: ";
-                    target += meta['target'] || "";
-                    $(el).addClass("active");
-                } else {
-                    $(el).removeClass("active");
-                }
-                $(el).find(".openwebrx-dmr-id").text(id);
-                $(el).find(".openwebrx-dmr-name").text(name);
-                $(el).find(".openwebrx-dmr-target").text(target);
-                $(el).find(".openwebrx-meta-user-image")[group ? "addClass" : "removeClass"]("group");
-            } else {
-                clear_metadata();
-            }
-            break;
-        case 'YSF':
-            el = $("#openwebrx-panel-metadata-ysf");
-
-            var mode = " ";
-            var source = "";
-            var up = "";
-            var down = "";
-            if (meta['mode'] && meta['mode'] !== "") {
-                mode = "Mode: " + meta['mode'];
-                source = meta['source'] || "";
-                if (meta['lat'] && meta['lon'] && meta['source']) {
-                    source = "<a class=\"openwebrx-maps-pin\" href=\"map?callsign=" + meta['source'] + "\" target=\"_blank\"></a>" + source;
-                }
-                up = meta['up'] ? "Up: " + meta['up'] : "";
-                down = meta['down'] ? "Down: " + meta['down'] : "";
-                $(el).find(".openwebrx-meta-slot").addClass("active");
-            } else {
-                $(el).find(".openwebrx-meta-slot").removeClass("active");
-            }
-            $(el).find(".openwebrx-ysf-mode").text(mode);
-            $(el).find(".openwebrx-ysf-source").html(source);
-            $(el).find(".openwebrx-ysf-up").text(up);
-            $(el).find(".openwebrx-ysf-down").text(down);
-
-            break;
-    } else {
-        clear_metadata();
-    }
-
-}
-
-function clear_metadata() {
-    $(".openwebrx-meta-panel .openwebrx-meta-autoclear").text("");
-    $(".openwebrx-meta-slot").removeClass("active").removeClass("sync");
-    $(".openwebrx-dmr-timeslot-panel").removeClass("muted");
-}
-
 var waterfall_measure_minmax_now = false;
 var waterfall_measure_minmax_continuous = false;
 
@@ -1301,6 +1234,8 @@ function digimodes_init() {
         $(e.currentTarget).toggleClass("muted");
         update_dmr_timeslot_filtering();
     });
+
+    $('.openwebrx-meta-panel').metaPanel();
 }
 
 function update_dmr_timeslot_filtering() {
@@ -1348,7 +1283,7 @@ function toggle_panel(what, on) {
         item.style.transitionProperty = 'transform';
     } else {
         item.movement = 'expand';
-        item.style.display = 'block';
+        item.style.display = null;
         setTimeout(function(){
             item.style.transitionProperty = 'transform';
             item.style.transform = 'perspective(600px) rotateX(0deg)';

owrx/controllers/assets.py

@@ -129,6 +129,7 @@ class CompiledAssetsController(GzipMixin, ModificationAwareController):
             "lib/MessagePanel.js",
             "lib/Js8Threads.js",
             "lib/Modes.js",
+            "lib/MetaPanel.js",
         ],
         "map.js": [
             "lib/jquery-3.2.1.min.js",