re-package code for meta panels into classes
This commit is contained in:
parent
13215960c4
commit
41f9407024
@ -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;
|
||||
|
@ -65,7 +65,6 @@
|
||||
<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-ysf-mode openwebrx-meta-autoclear"></div>
|
||||
<div class="openwebrx-meta-user-image"></div>
|
||||
@ -74,9 +73,7 @@
|
||||
<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-dmr-slot">Timeslot 1</div>
|
||||
<div class="openwebrx-meta-user-image"></div>
|
||||
@ -92,7 +89,6 @@
|
||||
<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;">
|
||||
<div class="openwebrx-panel-inner nano" id="openwebrx-log-scroll">
|
||||
<div class="nano-content">
|
||||
|
@ -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() {
|
||||
|
119
htdocs/lib/MetaPanel.js
Normal file
119
htdocs/lib/MetaPanel.js
Normal file
@ -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');
|
||||
});
|
||||
};
|
@ -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)';
|
||||
|
@ -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",
|
||||
|
Loading…
Reference in New Issue
Block a user