add dstar metadata panel

htdocs/css/openwebrx.css

@@ -1049,7 +1049,8 @@ img.openwebrx-mirror-img
 }
 
 .openwebrx-meta-slot.active.direct .openwebrx-meta-user-image .directcall,
-#openwebrx-panel-metadata-ysf .openwebrx-meta-slot.active .openwebrx-meta-user-image .directcall {
+#openwebrx-panel-metadata-ysf .openwebrx-meta-slot.active .openwebrx-meta-user-image .directcall,
+#openwebrx-panel-metadata-dstar .openwebrx-meta-slot.active .openwebrx-meta-user-image .directall {
     display: initial;
 }
 
@@ -1082,6 +1083,18 @@ img.openwebrx-mirror-img
     content: "Down: ";
 }
 
+.openwebrx-dstar-yourcall:not(:empty):before {
+    content: "To: ";
+}
+
+.openwebrx-dstar-destination:not(:empty):before {
+    content: "Destination: ";
+}
+
+.openwebrx-dstar-departure:not(:empty):before {
+    content: "Departure: ";
+}
+
 .openwebrx-maps-pin svg {
     width: 15px;
     height: 15px;

htdocs/index.html

@@ -85,6 +85,18 @@
                         <div class="openwebrx-ysf-down"></div>
                     </div>
                 </div>
+                <div class="openwebrx-panel openwebrx-meta-panel" id="openwebrx-panel-metadata-dstar" style="display: none;" data-panel-name="metadata-dstar">
+                    <div class="openwebrx-meta-slot">
+                        <div class="openwebrx-meta-user-image">
+                            <img class="directcall" src="static/gfx/openwebrx-directcall.svg">
+                        </div>
+                        <div class="openwebrx-dstar-ourcall"><span class="location"></span><span class="callsign"></span></div>
+                        <div class="openwebrx-dstar-message"></div>
+                        <div class="openwebrx-dstar-yourcall"></div>
+                        <div class="openwebrx-dstar-departure"></div>
+                        <div class="openwebrx-dstar-destination"></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-slot openwebrx-dmr-timeslot-panel">
                         <div class="openwebrx-dmr-slot">Timeslot 1</div>

htdocs/lib/MetaPanel.js

@@ -162,9 +162,71 @@ YsfMetaPanel.prototype.setDown = function(down) {
     this.el.find('.openwebrx-ysf-down').text(down || '');
 }
 
+function DStarMetaPanel(el) {
+    MetaPanel.call(this, el);
+    this.modes = ['dstar'];
+    this.clear();
+}
+
+DStarMetaPanel.prototype = new MetaPanel();
+
+DStarMetaPanel.prototype.update = function(data) {
+    if (!this.isSupported(data)) return;
+
+    if (data['sync'] && data['sync'] == 'voice') {
+        this.el.find(".openwebrx-meta-slot").addClass("active");
+    }
+
+    this.setOurCall(data['ourcall']);
+    this.setYourCall(data['yourcall']);
+    this.setDeparture(data['departure']);
+    this.setDestination(data['destination']);
+    this.setMessage(data['message']);
+};
+
+DStarMetaPanel.prototype.setOurCall = function(ourcall) {
+    if (this.ourcall === ourcall) return;
+    this.ourcall = ourcall;
+    this.el.find('.openwebrx-dstar-ourcall').text(ourcall || '');
+};
+
+DStarMetaPanel.prototype.setYourCall = function(yourcall) {
+    if (this.yourcall === yourcall) return;
+    this.yourcall = yourcall;
+    this.el.find('.openwebrx-dstar-yourcall').text(yourcall || '');
+};
+
+DStarMetaPanel.prototype.setDeparture = function(departure) {
+    if (this.departure === departure) return;
+    this.departure = departure;
+    this.el.find('.openwebrx-dstar-departure').text(departure || '');
+};
+
+DStarMetaPanel.prototype.setDestination = function(destination) {
+    if (this.destination === destination) return;
+    this.destination = destination;
+    this.el.find('.openwebrx-dstar-destination').text(destination || '');
+};
+
+DStarMetaPanel.prototype.setMessage = function(message) {
+    if (this.message === message) return;
+    this.message = message;
+    this.el.find('.openwebrx-dstar-message').text(message || '');
+}
+
+DStarMetaPanel.prototype.clear = function() {
+    MetaPanel.prototype.clear.call(this);
+    this.setOurCall();
+    this.setYourCall();
+    this.setDeparture();
+    this.setDestination();
+    this.setMessage();
+};
+
 MetaPanel.types = {
     dmr: DmrMetaPanel,
-    ysf: YsfMetaPanel
+    ysf: YsfMetaPanel,
+    dstar: DStarMetaPanel,
 };
 
 $.fn.metaPanel = function() {