New RX Two Pane Mode thx Trip

This commit is contained in:
Max 2022-01-31 22:43:34 -05:00
parent 53490d0c8c
commit b9752d54bf
3 changed files with 2756 additions and 2691 deletions

View File

@ -35,6 +35,8 @@
<script src="jquery.alerts.js"></script>
</head>
<body onload="javascript:do_onload();">
<div class="row"> <!-- START OF 2 COLUMN LAYOUT -->
<div class="column" style="width: 740px;"> <!-- START FIRST COLUMN -->
<div class="main">
<form method="post" action="#" id="form_scan">
<!-- nav bar -->
@ -48,7 +50,8 @@
<li id="li5" class="nav-li"><input id="b5" class="nav-button" type="button" name="B5" value="View" onclick="this.blur(); javascript:toggleCSS();"></li>
<li id="li6" class="nav-li"><input id="b6" class="nav-button" type="button" name="B6" value="Popout" onclick="this.blur(); javascript:this.blur(); popOut();"></li>
<li id="li7" class="nav-li"><input id="b7" class="nav-button" type="button" name="B7" value="About" onclick="this.blur(); javascript:f_select('about');"></li>
<li id="li8">&nbsp;</li>
<li id="li8"> </li>
</ul>
</div>
<!-- end div nav-bar -->
@ -339,7 +342,7 @@
</td>
</tr>
<tr>
<td style="border-right: 0px solid;">&nbsp; </td>
<td style="border-right: 0px solid;">&#8212; </td>
<td style="border-left: 0px solid;">&nbsp;</td>
<td>
<input type="checkbox" id="showLast"> <label for="showLast"><span></span> Show Last Seen Time in Frequency Table</label>
@ -347,7 +350,7 @@
</tr>
<tr>
<td style="border-right: 0px solid;">&nbsp; </td>
<td style="border-right: 0px solid;">&#8212; </td>
<td style="border-left: 0px solid;">&nbsp;</td>
<td>
<input type="checkbox" id="colSlot2"> <label for="colSlot2"><span title="Collapses Slot 2 in Active Frequency Table after 2 minutes of inactivity."></span> Collapse Slot 2 Display After 2 min.</label>
@ -735,8 +738,8 @@
</div> <!-- end hide settings -->
</div> <!-- END FIRST COLUMN -->
<div class="column"> <!-- START SECOND COLUMN -->
<!-- end div_settings -->
<div id="div_rx" style="display: none; border: 0px solid black;">&nbsp; </div>
@ -845,5 +848,7 @@
<!-- end div log container 2 -->
</div>
<!-- end div_logs -->
</div> <!-- END SECOND COLUMN -->
</div> <!-- END OF 2 COLUMN LAYOUT -->
</body>
</html>

View File

@ -165,6 +165,38 @@ body {
background-color: var(--bg-color);
}
/* BEGIN 2 COLUMN LAYOUT ELEMENTS */
* {
box-sizing: border-box;
}
/* Create two equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding: 5px;
/* height: 300px; /* Should be removed. Only for demonstration */ */
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 740px) {
.column {
width: 100%;
}
}
/* END 2 COLUMN LAYOUT ELEMENTS */
.main {
margin-top: 5px;
/* make margin-top 60px for fixed nav-bar, see also .nav-bar below. */
@ -678,6 +710,18 @@ div.adjacent { /* adjacent sites container that holds the table */
font-weight: bold;
}
.nav-button2 {
background-color: var(--nav-background);
background: linear-gradient(var(--nav-grad-1), var(--nav-grad-2));
color: var(--button-text-2);
width: 15px;
border: 0px;
padding: 20px;
display: block;
font-size: 14px;
font-weight: bold;
}
.nav-button-active {
background-color: var(--button-grad-2);
background: linear-gradient(var(--button-grad-2), var(--button-grad-1));

View File

@ -48,6 +48,9 @@ var tgid_files = {};
var srcid_files = {};
var channel_id = {};
var freqTable = true;
var chsize = 1;
var evsize = 1;
var ersize = 1;
var event_source = null; // must be in global scope for Babysitter to work.
window.g_change_freq = [];
@ -288,7 +291,7 @@ function change_freq(d) { // d json_type = change_freq
html += '<td style="width: 422px;" colspan=2><span class="systgid" id="dTag">' + displayTag + '</span></td>';
html += '<td align="center" style="width: 88px;">';
html += '<span class="label-sm">Talkgroup ID</span><br><span class="value" id="dTgid">' + displayTgid + '</span>';
html += '<span class="label-sm">Talkgroup</span><br><span class="value" id="dTgid">' + displayTgid + '</span>';
html += '</td>';
html += '</tr>';
@ -1581,14 +1584,17 @@ function comma(x) {
}
document.onkeydown = function(evt) {
console.log(evt.altKey);
// keyboard shortcuts
evt = evt || window.event;
var x = document.activeElement.tagName;
if (x == "INPUT")
return; // don't do anything if user is typing in an input field
if (x == "INPUT" || evt.altKey == true || evt.ctrlKey == true)
return; // don't do anything if user is typing in an input field or if alt, ctrl key is bing used
switch (evt.keyCode) {
case 70:
// 'f' key - show/hide frequency table
$('#lastCommand').html('F - Freq Tbl<br><br>').show();
@ -1935,18 +1941,28 @@ function smartColor(t) {
} // end smartColor()
function divExpand(div) {
switch ($('#' + div).height()) {
case 1:
console.log(div);
var h = $('#' + div).height();
console.log(typeof(h));
switch (true) {
case (h < 2):
console.log('case 1:' + h);
$('#' + div).height(301);
$('#' + div).show();
break;
case 301:
case (h <= 301):
console.log('case 2:' + h);
$('#' + div).height(702);
break;
case 702:
case (h < 9999):
console.log('case 3:' + h);
$('#' + div).height(1);
$('#' + div).hide();
break;
default:
console.log(h < 2);
console.log(h < 301);
console.log(h < 9999);
}
}