From 6e602470263234394bc61fed561972c812c49eaf Mon Sep 17 00:00:00 2001
From: Jakob Ketterl <jakob.ketterl@gmx.de>
Date: Tue, 19 Jan 2021 20:54:35 +0100
Subject: [PATCH] apply CSS magic to DMR, too

---
 htdocs/css/openwebrx.css | 13 +++++++++++--
 htdocs/lib/MetaPanel.js  | 25 +++++++++++++++++--------
 2 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/htdocs/css/openwebrx.css b/htdocs/css/openwebrx.css
index dc8cf61..a232c62 100644
--- a/htdocs/css/openwebrx.css
+++ b/htdocs/css/openwebrx.css
@@ -932,7 +932,8 @@ img.openwebrx-mirror-img
 
 .openwebrx-meta-slot > * {
     flex: 0;
-    flex-basis: 1.125em;
+    flex-basis: 1.2em;
+    line-height: 1.2em;
 }
 
 .openwebrx-meta-slot, .openwebrx-meta-slot.muted:before {
@@ -982,10 +983,18 @@ img.openwebrx-mirror-img
     background-image: url("../gfx/openwebrx-directcall.png");
 }
 
-.openwebrx-meta-slot.active .openwebrx-meta-user-image.group {
+.openwebrx-meta-slot.active.group .openwebrx-meta-user-image {
     background-image: url("../gfx/openwebrx-groupcall.png");
 }
 
+.openwebrx-meta-slot.group .openwebrx-dmr-target:not(:empty):before {
+    content: "Talkgroup: ";
+}
+
+.openwebrx-meta-slot.direct .openwebrx-dmr-target:not(:empty):before {
+    content: "Direct: ";
+}
+
 .openwebrx-dmr-timeslot-panel * {
     cursor: pointer;
 }
diff --git a/htdocs/lib/MetaPanel.js b/htdocs/lib/MetaPanel.js
index 86c5523..6ee9a8d 100644
--- a/htdocs/lib/MetaPanel.js
+++ b/htdocs/lib/MetaPanel.js
@@ -24,12 +24,8 @@ DmrMetaSlot.prototype.update = function(data) {
     if (data['sync'] && data['sync'] === "voice") {
         this.setId(data['additional'] && data['additional']['callsign'] || data['source']);
         this.setName(data['additional'] && data['additional']['fname']);
-        if (data['type'] === "group") {
-            this.setTalkgroup(data['target']);
-        }
-        if (data['type'] === "direct") {
-            this.setDirect(data['target']);
-        }
+        this.setMode(['group', 'direct'].includes(data['type']) ? data['type'] : undefined);
+        this.setTarget(data['target']);
         this.el.addClass("active");
     } else {
         this.clear();
@@ -48,6 +44,19 @@ DmrMetaSlot.prototype.setName = function(name) {
     this.el.find('.openwebrx-dmr-name').text(name || '');
 };
 
+DmrMetaSlot.prototype.setMode = function(mode) {
+    var classes = ['group', 'direct'].filter(function(c){
+        return c !== mode;
+    });
+    this.el.removeClass(classes.join(' ')).addClass(mode);
+}
+
+DmrMetaSlot.prototype.setTarget = function(target) {
+    if (this.target === target) return;
+    this.target = target;
+    this.el.find('.openwebrx-dmr-target').text(target || '');
+}
+
 DmrMetaSlot.prototype.setTalkgroup = function(talkgroup) {
     if (this.talkgroup === talkgroup && this.targetMode === 'talkgroup') return;
     this.talkgroup = talkgroup;
@@ -75,8 +84,8 @@ DmrMetaSlot.prototype.setDirect = function(call) {
 DmrMetaSlot.prototype.clear = function() {
     this.setId();
     this.setName();
-    this.setTalkgroup();
-    this.setDirect();
+    this.setMode();
+    this.setTarget();
     this.el.removeClass("active");
 };