Better roster controls

merge-requests/31/head
Sebastian Delmont 2020-11-02 09:57:06 -05:00
rodzic ce139e099a
commit 1fbea77f2f
3 zmienionych plików z 267 dodań i 256 usunięć

Wyświetl plik

@ -24,120 +24,99 @@
<script src="./lib/roster.js" type="text/javascript"></script> <script src="./lib/roster.js" type="text/javascript"></script>
<script src="./lib/screens.js"></script> <script src="./lib/screens.js"></script>
</head> </head>
<body onload="init();" onresize="resize();"> <body onload="init()" class="roster">
<div <div id="MainCallRoster">
id="main" <header id="RosterControls">
style=" <div id="MainRosterControls">
margin: 0px; <div id="TransmitControls">
top: 0; <div
left: 0; id="txrxdec"
width: 100%; style="
background-color: black; background-color: Green;
position: absolute; border-style: outset;
white-space: nowrap; border-color: yellow;
overflow: auto; border-width: 3px;
" margin: 2px;
> "
<div id="mainCallRoster"> class="roundBorder"
<div id="rosterHead" style="width: 100%; padding: 0; margin: 0"> >
<div id="viewDiv" class="controlItem" style="border: 1px solid #006; vertical-align: middle"> Waiting…
<table style="text-align: center; border-collapse: collapse"> </div>
<tr>
<td colspan="3"> <div class="button" style="margin: 3px" onclick="window.opener.haltAllTx(true);">Halt Tx</div>
<div
id="txrxdec"
style="
background-color: Green;
border-style: outset;
border-color: yellow;
border-width: 3px;
margin: 2px;
"
class="roundBorder"
>
waiting for message
</div>
</td>
</tr>
<tr>
<td colspan="3">
<div class="button" style="margin: 3px" onclick="window.opener.haltAllTx(true);">Halt Tx</div>
</td>
</tr>
<tr title="Logbook Reference">
<td align="right">Logbook</td>
<td align="left" colspan="2">
<select id="referenceNeed" onchange="valuesChanged();">
<option value="6">Award Tracker</option>
<option value="0">Live Band &amp; Mode</option>
<option value="1">Live Band, Mix Modes</option>
<option value="2">Live Band, Digi Modes</option>
<option value="3">Live Mode, Mix Band</option>
<option value="4">Mix Band &amp; Modes</option>
<option value="5">Mix Band &amp; Digi Modes</option>
</select>
</td>
</tr>
<tr id="awardHunterTr" style="display: none">
<td colspan="2">
<div class="button" style="margin: 5px" onclick="openAwardPopup()">Add Awards</div>
</td>
<!--td><div class="button" style="margin:5px" onclick="addAllAwards()">Add All!</div></td>
<td><div class="button" style="margin:5px" onclick="delAllAwards()">Del All!</div></td-->
</tr>
<tr id="callsignsTr">
<td align="right">Callsigns</td>
<td align="left" colspan="2">
<select id="callsignNeed" onchange="valuesChanged();">
<option value="worked">New</option>
<option value="confirmed">New+Unconfirmed</option>
<option value="all">All Traffic</option>
<option value="hits">All Traffic/Only Wanted</option>
</select>
</td>
</tr>
<tr id="huntingTr">
<td align="right">Hunting</td>
<td align="left">
<div id="huntModeTd" style="display: block">
<select id="huntMode" onchange="valuesChanged();" value="callsign">
<option value="callsign">Callsign</option>
<option value="grid">Grid</option>
<option value="dxcc">DXCC</option>
<option value="dxccs">DXCC (Single)</option>
<option value="cq">CQ Zone</option>
<option value="itu">ITU Zone</option>
<option value="usstates">US States (WAS)</option>
<option value="usstate">US State (Single)</option>
<option value="wpx">Prefix (WPX)</option>
</select>
</div>
<div id="huntNeedTd" style="display: block">
<select id="huntNeed" onchange="valuesChanged();">
<option value="worked">New</option>
<option value="confirmed">New+Unconfirmed</option>
</select>
</div>
<div id="huntStateTd" style="display: none">
<select id="stateSelect" style="margin-top: 2px" ;>
<option value="" selected="true">Select Territory</option>
</select>
</div>
<div id="huntDXCCsTd" style="display: none">
<select id="DXCCsSelect" style="margin-top: 2px" ;>
<option value="-1" selected="true">Select DXCC</option>
</select>
</div>
</td>
</tr>
<tr style="padding: 0; margin: 0">
<td colspan="2" style="padding: 0; margin: 0">
<div id="scriptIcon" style="display: none; padding: 0; margin: 0"></div>
</td>
</tr>
</table>
</div> </div>
<div id="awardWantedDiv" class="controlItem" style="border: none; overflow: auto; overflow-x: hidden"></div>
<div id="LogbookControls">
<label>Logbook</label>
<select id="referenceNeed" onchange="valuesChanged();">
<option value="6">Award Tracker</option>
<option value="0">Live Band &amp; Mode</option>
<option value="1">Live Band, Mix Modes</option>
<option value="2">Live Band, Digi Modes</option>
<option value="3">Live Mode, Mix Band</option>
<option value="4">Mix Band &amp; Modes</option>
<option value="5">Mix Band &amp; Digi Modes</option>
</select>
</div>
<div id="CallsignsControls">
<label>Callsigns</label>
<select id="callsignNeed" onchange="valuesChanged();">
<option value="worked">New</option>
<option value="confirmed">New+Unconfirmed</option>
<option value="all">All Traffic</option>
<option value="hits">All Traffic/Only Wanted</option>
</select>
</div>
<div id="HuntingControls">
<label>Hunting</label>
<div id="HuntModeControls">
<select id="huntMode" onchange="valuesChanged();" value="callsign">
<option value="callsign">Callsign</option>
<option value="grid">Grid</option>
<option value="dxcc">DXCC</option>
<option value="dxccs">DXCC (Single)</option>
<option value="cq">CQ Zone</option>
<option value="itu">ITU Zone</option>
<option value="usstates">US States (WAS)</option>
<option value="usstate">US State (Single)</option>
<option value="wpx">Prefix (WPX)</option>
</select>
</div>
<div id="HuntNeedControls">
<select id="huntNeed" onchange="valuesChanged();">
<option value="worked">New</option>
<option value="confirmed">New+Unconfirmed</option>
</select>
</div>
<div id="HuntStateControls">
<select id="stateSelect" style="margin-top: 2px" ;>
<option value="" selected="true">Select Territory</option>
</select>
</div>
<div id="HuntDXCCsControls" style="display: none">
<select id="DXCCsSelect" style="margin-top: 2px" ;>
<option value="-1" selected="true">Select DXCC</option>
</select>
</div>
</div>
<div id="scriptIcon" style="display: none; padding: 0; margin: 0"></div>
<div id="MoreLessControls">
<div class="link" onclick="toggleMoreControls()" id="ShowMoreControlsLink">More Controls</div>
<div class="link" onclick="toggleMoreControls()" id="ShowFewerControlsLink">Fewer Controls</div>
</div>
</div>
<div id="SecondaryRosterControls">
<div id="AwardTrackerControls" class="controlItem" style="border: none; overflow: auto; overflow-x: hidden">
<div id="AwardWantedList"></div>
<div class="button" onclick="openAwardPopup()">Add Awards</div>
</div>
<div id="huntingMatrixDiv" class="controlItem" style="border: 1px solid #066"> <div id="huntingMatrixDiv" class="controlItem" style="border: 1px solid #066">
<table style="border-collapse: collapse" title="Wanted"> <table style="border-collapse: collapse" title="Wanted">
<tr> <tr>
@ -393,60 +372,59 @@
</div> </div>
<div id="instancesDiv" style="display: none"></div> <div id="instancesDiv" style="display: none"></div>
</div> </div>
</header>
<div oncontextmenu="handleContextMenu(event);"> <main id="RosterTable" oncontextmenu="handleContextMenu(event);"></main>
<div id="rosterTable" style="overflow: auto; overflow-x: hidden"></div> </div>
</div>
</div>
<div
id="editView"
class="roundBorder"
style="height: 100%; border: 3px solid #066; padding: 10px; margin: 10px; display: none"
>
<div style="display: block; font-size: larger">Callsign, CQ and DXCC Ignores</div>
<br />
<div id="editTables"></div>
<div class="button" style="margin-top: 5px" onclick="closeEditIgnores()">Close</div>
</div>
<div <div
id="awardHunterDiv" id="editView"
class="mapItem" class="roundBorder"
style=" style="height: 100%; border: 3px solid #066; padding: 10px; margin: 10px; display: none"
background-color: black; >
display: block; <div style="display: block; font-size: larger">Callsign, CQ and DXCC Ignores</div>
position: absolute; <br />
z-index: -499; <div id="editTables"></div>
top: 10px; <div class="button" style="margin-top: 5px" onclick="closeEditIgnores()">Close</div>
left: 10px; </div>
margin: auto;
" <div
> id="awardHunterDiv"
<table style="padding: 15px"> class="mapItem"
<tr> style="
<th align="center">New Award Tracker</th> background-color: black;
</tr> display: block;
<tr> position: absolute;
<td align="left"> z-index: -499;
<select id="awardSponsor" onchange="awardSponsorChanged();"> top: 10px;
<option value="" disabled selected>Sponsor</option> left: 10px;
</select> margin: auto;
</td> "
</tr> >
<tr> <table style="padding: 15px">
<td align="left"> <tr>
<select id="awardName" onchange="awardNameChanged();"> <th align="center">New Award Tracker</th>
<option value="" disabled selected>Name</option> </tr>
</select> <tr>
</td> <td align="left">
</tr> <select id="awardSponsor" onchange="awardSponsorChanged();">
<tr> <option value="" disabled selected>Sponsor</option>
<td align="center"> </select>
<div class="button" style="margin: 3px" onclick="closeAwardPopup()">Done</div> </td>
</td> </tr>
</tr> <tr>
</table> <td align="left">
</div> <select id="awardName" onchange="awardNameChanged();">
<option value="" disabled selected>Name</option>
</select>
</td>
</tr>
<tr>
<td align="center">
<div class="button" style="margin: 3px" onclick="closeAwardPopup()">Done</div>
</td>
</tr>
</table>
</div> </div>
</body> </body>
</html> </html>

Wyświetl plik

@ -1873,10 +1873,10 @@ function viewRoster() {
if (g_rosterSettings.compact == false) { if (g_rosterSettings.compact == false) {
worker += "</table>"; worker += "</table>";
rosterTable.innerHTML = worker; RosterTable.innerHTML = worker;
callTable.style.width = parseInt(window.innerWidth) - 6 + "px"; callTable.style.width = parseInt(window.innerWidth) - 6 + "px";
} else { } else {
rosterTable.innerHTML = worker + "</div>"; RosterTable.innerHTML = worker + "</div>";
buttonsDiv.style.width = parseInt(window.innerWidth) - 6 + "px"; buttonsDiv.style.width = parseInt(window.innerWidth) - 6 + "px";
} }
@ -2194,7 +2194,7 @@ function updateAwardList(target = null) {
worker += "</table>"; worker += "</table>";
awardWantedDiv.innerHTML = worker; AwardWantedList.innerHTML = worker;
var keys = Object.keys(g_awardTracker).sort(); var keys = Object.keys(g_awardTracker).sort();
@ -2378,11 +2378,26 @@ function closeAwardPopup() {
resetAwardAdd(); resetAwardAdd();
} }
function setVisual() { function toggleMoreControls() {
huntNeedTd.style.display = "none"; g_rosterSettings.controls = !g_rosterSettings.controls;
huntStateTd.style.display = "none";
huntDXCCsTd.style.display = "none";
if (g_rosterSettings.controls) {
RosterControls.className = "extended"
} else {
RosterControls.className = "normal"
}
}
function setVisual() {
HuntNeedControls.style.display = "none";
HuntStateControls.style.display = "none";
HuntDXCCsControls.style.display = "none";
if (g_rosterSettings.controls) {
RosterControls.className = "extended"
} else {
RosterControls.className = "normal"
}
// Award Hunter // Award Hunter
if (referenceNeed.value == 6) { if (referenceNeed.value == 6) {
/*for ( key in g_rosterSettings.wanted ) /*for ( key in g_rosterSettings.wanted )
@ -2393,10 +2408,9 @@ function setVisual() {
g_rosterSettings.columns[t] = true; g_rosterSettings.columns[t] = true;
}*/ }*/
huntingTr.style.display = "none"; HuntingControls.style.display = "none";
callsignsTr.style.display = "none"; CallsignsControls.style.display = "none";
awardHunterTr.style.display = ""; AwardTrackerControls.style.display = "";
awardWantedDiv.style.display = "";
huntingMatrixDiv.style.display = ""; huntingMatrixDiv.style.display = "";
updateAwardList(); updateAwardList();
} else { } else {
@ -2405,34 +2419,33 @@ function setVisual() {
document.getElementById(key).checked = g_rosterSettings.wanted[key]; document.getElementById(key).checked = g_rosterSettings.wanted[key];
} }
awardHunterTr.style.display = "none"; AwardTrackerControls.style.display = "none";
awardWantedDiv.style.display = "none"; HuntingControls.style.display = "";
huntingTr.style.display = ""; CallsignsControls.style.display = "";
callsignsTr.style.display = "";
closeAwardPopup(); closeAwardPopup();
if (callsignNeed.value == "all" || callsignNeed.value == "hits") { if (callsignNeed.value == "all" || callsignNeed.value == "hits") {
huntingMatrixDiv.style.display = ""; huntingMatrixDiv.style.display = "";
huntNeedTd.style.display = "block"; HuntNeedControls.style.display = "block";
huntModeTd.style.display = "none"; HuntModeControls.style.display = "none";
} else { } else {
huntingMatrixDiv.style.display = "none"; huntingMatrixDiv.style.display = "none";
huntModeTd.style.display = "block"; HuntModeControls.style.display = "block";
if ( if (
huntMode.value != "callsign" && huntMode.value != "callsign" &&
huntMode.value != "usstate" && huntMode.value != "usstate" &&
huntMode.value != "dxccs" huntMode.value != "dxccs"
) { ) {
huntNeedTd.style.display = "block"; HuntNeedControls.style.display = "block";
} }
if (huntMode.value == "usstate") { if (huntMode.value == "usstate") {
huntStateTd.style.display = "block"; HuntStateControls.style.display = "block";
} }
if (huntMode.value == "usstates") { if (huntMode.value == "usstates") {
huntNeedTd.style.display = "block"; HuntNeedControls.style.display = "block";
} }
if (huntMode.value == "dxccs") { if (huntMode.value == "dxccs") {
huntDXCCsTd.style.display = "block"; HuntDXCCsControls.style.display = "block";
} }
} }
} }
@ -2876,12 +2889,6 @@ function checkForEnter(ele) {
} }
function resize() { function resize() {
rosterTable.style.height = window.innerHeight - (rosterHead.clientHeight + 8);
awardWantedDiv.style.height = exceptionDiv.clientHeight;
if (typeof callTable != "undefined")
callTable.style.width = parseInt(window.innerWidth) - 6 + "px";
if (editView.style.display == "inline-block") openIgnoreEdit(); if (editView.style.display == "inline-block") openIgnoreEdit();
window.opener.goProcessRoster(); window.opener.goProcessRoster();
@ -2923,51 +2930,6 @@ function init() {
g_menu = new nw.Menu(); g_menu = new nw.Menu();
g_compactMenu = new nw.Menu(); g_compactMenu = new nw.Menu();
// Bind a callback to item
var item = new nw.MenuItem({
type: "normal",
label: g_rosterSettings.controls ? "Hide Controls" : "Show Controls",
click: function () {
if (this.label == "Hide Controls") {
this.label = "Show Controls";
rosterHead.style.display = "none";
g_rosterSettings.controls = false;
} else {
this.label = "Hide Controls";
rosterHead.style.display = "block";
g_rosterSettings.controls = true;
}
g_compactMenu.items[0].label = g_rosterSettings.controls
? "Hide Controls"
: "Show Controls";
localStorage.rosterSettings = JSON.stringify(g_rosterSettings);
resize();
},
});
g_menu.append(item);
item = new nw.MenuItem({
type: "normal",
label: g_rosterSettings.controls ? "Hide Controls" : "Show Controls",
click: function () {
if (this.label == "Hide Controls") {
this.label = "Show Controls";
rosterHead.style.display = "none";
g_rosterSettings.controls = false;
} else {
this.label = "Hide Controls";
rosterHead.style.display = "block";
g_rosterSettings.controls = true;
}
g_menu.items[0].label = g_rosterSettings.controls
? "Hide Controls"
: "Show Controls";
localStorage.rosterSettings = JSON.stringify(g_rosterSettings);
resize();
},
});
g_compactMenu.append(item);
item = new nw.MenuItem({ item = new nw.MenuItem({
type: "normal", type: "normal",
label: "Compact Mode", label: "Compact Mode",
@ -2990,8 +2952,6 @@ function init() {
}); });
g_compactMenu.append(item); g_compactMenu.append(item);
rosterHead.style.display = g_rosterSettings.controls ? "block" : "none";
g_callMenu = new nw.Menu(); g_callMenu = new nw.Menu();
item = new nw.MenuItem({ item = new nw.MenuItem({

Wyświetl plik

@ -1,3 +1,4 @@
/* == General Elements ==================================== */
table, table,
th, th,
td { td {
@ -27,7 +28,6 @@ td {
} }
input[type="checkbox"] { input[type="checkbox"] {
-webkit-appearance: checkbox !important;
appearance: checkbox !important; appearance: checkbox !important;
margin: 0; margin: 0;
margin-right: 1px; margin-right: 1px;
@ -36,14 +36,13 @@ input[type="checkbox"] {
top: 0px; top: 0px;
} }
input[type="checkbox"]:checked { /* input[type="checkbox"]:checked {
// -webkit-appearance: checkbox !important; appearance: checkbox !important;
// appearance: checkbox !important; } */
}
select { select {
-webkit-appearance: none; appearance: none;
-webkit-border-radius: 6px; border-radius: 6px;
text-indent: 0.2px; text-indent: 0.2px;
text-overflow: ""; text-overflow: "";
padding: 2px; padding: 2px;
@ -72,10 +71,7 @@ select option {
background: #000; background: #000;
color: #eee; color: #eee;
text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
-moz-appearance: none; appearance: none;
-webkit-appearance: none;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px; border-radius: 8px;
text-indent: 0.2px; text-indent: 0.2px;
text-overflow: ""; text-overflow: "";
@ -91,8 +87,84 @@ option:disabled {
color: #666; color: #666;
} }
/* == Layout ============================================== */
body.roster {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
padding: 0;
background-color: black;
white-space: nowrap;
overflow: auto;
}
#MainCallRoster {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
}
#MainCallRoster header {
flex: 0;
}
#MainCallRoster main {
flex: 1;
}
#MainRosterControls {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 2px;
justify-content: space-evenly;
align-items: center;
}
#MainRosterControls > div {
display: flex;
flex-direction: row;
align-items: center;
}
#MainRosterControls label {
margin-right: 4px;
}
#RosterControls.normal #ShowFewerControlsLink { display: none; }
#RosterControls.normal #ShowMoreControlsLink { display: block; }
#RosterControls.normal #SecondaryRosterControls { display: none; }
#RosterControls.extended #ShowFewerControlsLink { display: block; }
#RosterControls.extended #ShowMoreControlsLink { display: none; }
#RosterControls.extended #SecondaryRosterControls { display: block; }
/* == Other Elements ====================================== */
#txrxdec {
width: 100px;
}
.link {
cursor: hand;
color: #FFFFAA;
}
.link:hover {
color: #FFFF00;
text-decoration: underline;
}
.controlItem { .controlItem {
-webkit-appearance: none; appearance: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
padding-top: 1px; padding-top: 1px;
@ -101,9 +173,9 @@ option:disabled {
border-width: 1px; border-width: 1px;
border-color: #aaa; border-color: #aaa;
border-style: inset; border-style: inset;
-webkit-border-radius: 4px; border-radius: 4px;
display: inline-block; display: inline-block;
-webkit-transition: border-color; transition: border-color;
vertical-align: top; vertical-align: top;
} }
@ -142,6 +214,7 @@ table.rosterTable {
border: 1px solid #555; border: 1px solid #555;
background-color: black; background-color: black;
text-align: center; text-align: center;
width: 100%;
} }
table.rosterTable td, table.rosterTable td,
@ -204,8 +277,8 @@ table.rosterTable thead th:first-child {
min-height: 2em; min-height: 2em;
display: inline-block; display: inline-block;
color: #eee; color: #eee;
-webkit-transition: border-style; transition: border-style;
-webkit-border-radius: 4px; border-radius: 4px;
} }
.compact:active { .compact:active {