Update more styling of the page. Add legend to table highlighting
Fix some indentation issues
This commit is contained in:
James Wilson
parent
c2c43b9f6b
commit
924bcaa044
|
|
@ -224,19 +224,19 @@
|
|||
</tr>
|
||||
|
||||
<tr class="infoblock_body">
|
||||
<td>Aircraft (total): <span id="dump1090_total_ac">n/a</span></td>
|
||||
<td>Messages: <span id="dump1090_message_rate">n/a</span>/sec</td>
|
||||
<td><span class="infoBlockTitleText">Total Aircraft:</span> <span id="dump1090_total_ac">n/a</span></td>
|
||||
<td><span class="infoBlockTitleText">Messages:</span> <span id="dump1090_message_rate">n/a</span>/sec</td>
|
||||
</tr>
|
||||
|
||||
<tr class="infoblock_body">
|
||||
<td>(with positions): <span id="dump1090_total_ac_positions">n/a</span></td>
|
||||
<td>History: <span id="dump1090_total_history">n/a</span> positions</td>
|
||||
<td><span class="infoBlockTitleText">With Positions:</span> <span id="dump1090_total_ac_positions">n/a</span></td>
|
||||
<td><span class="infoBlockTitleText">History:</span> <span id="dump1090_total_history">n/a</span> positions</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div> <!-- dump1090_infoblock -->
|
||||
|
||||
<div id="units_container">
|
||||
<label for="units_selector">Units:</label>
|
||||
<label for="units_selector"><span class="infoBlockTitleText">Units:</span></label>
|
||||
<select name="units_selector" id="units_selector">
|
||||
<option value="nautical">Aeronautical</option>
|
||||
<option value="metric">Metric</option>
|
||||
|
|
@ -245,7 +245,7 @@
|
|||
</div>
|
||||
|
||||
<form id="altitude_filter_form">
|
||||
<label>Filter by altitude:</label>
|
||||
<label><span class="infoBlockTitleText">Filter by Altitude:</span></label>
|
||||
<input id="altitude_filter_min" name="minAltitude" type="text" class="altitudeFilterInput" maxlength="5">
|
||||
<label for="minAltitude" class="altitudeUnit"></label>
|
||||
<span> to </span>
|
||||
|
|
@ -306,6 +306,16 @@
|
|||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="legend">
|
||||
<div class="legendBox vPosition"></div>
|
||||
<div class="legendTitle">ADS-B</div>
|
||||
<div class="legendBox mlat"></div>
|
||||
<div class="legendTitle">MLAT</div>
|
||||
<div class="legendBox other"></div>
|
||||
<div class="legendTitle">Other</div>
|
||||
<div class="legendBox tisb"></div>
|
||||
<div class="legendTitle">TIS-B</div>
|
||||
</div>
|
||||
</div> <!-- planes_table -->
|
||||
|
||||
</div> <!-- sidebar_canvas -->
|
||||
|
|
|
|||
|
|
@ -900,75 +900,82 @@ function removeHighlight() {
|
|||
|
||||
// Refreshes the larger table of all the planes
|
||||
function refreshTableInfo() {
|
||||
var show_squawk_warning = false;
|
||||
var show_squawk_warning = false;
|
||||
|
||||
TrackedAircraft = 0
|
||||
TrackedAircraftPositions = 0
|
||||
TrackedHistorySize = 0
|
||||
TrackedAircraft = 0
|
||||
TrackedAircraftPositions = 0
|
||||
TrackedHistorySize = 0
|
||||
|
||||
$(".altitudeUnit").text(get_unit_label("altitude", DisplayUnits));
|
||||
$(".speedUnit").text(get_unit_label("speed", DisplayUnits));
|
||||
$(".distanceUnit").text(get_unit_label("distance", DisplayUnits));
|
||||
$(".verticalRateUnit").text(get_unit_label("verticalRate", DisplayUnits));
|
||||
$(".altitudeUnit").text(get_unit_label("altitude", DisplayUnits));
|
||||
$(".speedUnit").text(get_unit_label("speed", DisplayUnits));
|
||||
$(".distanceUnit").text(get_unit_label("distance", DisplayUnits));
|
||||
$(".verticalRateUnit").text(get_unit_label("verticalRate", DisplayUnits));
|
||||
|
||||
for (var i = 0; i < PlanesOrdered.length; ++i) {
|
||||
var tableplane = PlanesOrdered[i];
|
||||
TrackedHistorySize += tableplane.history_size;
|
||||
if (tableplane.seen >= 58 || tableplane.isFiltered()) {
|
||||
tableplane.tr.className = "plane_table_row hidden";
|
||||
} else {
|
||||
TrackedAircraft++;
|
||||
var classes = "plane_table_row";
|
||||
for (var i = 0; i < PlanesOrdered.length; ++i) {
|
||||
var tableplane = PlanesOrdered[i];
|
||||
TrackedHistorySize += tableplane.history_size;
|
||||
if (tableplane.seen >= 58 || tableplane.isFiltered()) {
|
||||
tableplane.tr.className = "plane_table_row hidden";
|
||||
} else {
|
||||
TrackedAircraft++;
|
||||
var classes = "plane_table_row";
|
||||
|
||||
if (tableplane.position !== null && tableplane.seen_pos < 60) {
|
||||
++TrackedAircraftPositions;
|
||||
if (tableplane.position_from_mlat)
|
||||
classes += " mlat";
|
||||
else
|
||||
classes += " vPosition";
|
||||
}
|
||||
if (tableplane.icao == SelectedPlane)
|
||||
classes += " selected";
|
||||
|
||||
if (tableplane.squawk in SpecialSquawks) {
|
||||
classes = classes + " " + SpecialSquawks[tableplane.squawk].cssClass;
|
||||
show_squawk_warning = true;
|
||||
}
|
||||
|
||||
// ICAO doesn't change
|
||||
if (tableplane.flight) {
|
||||
tableplane.tr.cells[2].innerHTML = getFlightAwareModeSLink(tableplane.icao, tableplane.flight, tableplane.flight);
|
||||
} else {
|
||||
tableplane.tr.cells[2].innerHTML = "";
|
||||
}
|
||||
tableplane.tr.cells[3].textContent = (tableplane.registration !== null ? tableplane.registration : "");
|
||||
tableplane.tr.cells[4].textContent = (tableplane.icaotype !== null ? tableplane.icaotype : "");
|
||||
tableplane.tr.cells[5].textContent = (tableplane.squawk !== null ? tableplane.squawk : "");
|
||||
tableplane.tr.cells[6].innerHTML = format_altitude_brief(tableplane.altitude, tableplane.vert_rate, DisplayUnits);
|
||||
tableplane.tr.cells[7].textContent = format_speed_brief(tableplane.speed, DisplayUnits);
|
||||
tableplane.tr.cells[8].textContent = format_vert_rate_brief(tableplane.vert_rate, DisplayUnits);
|
||||
tableplane.tr.cells[9].textContent = format_distance_brief(tableplane.sitedist, DisplayUnits);
|
||||
tableplane.tr.cells[10].textContent = format_track_brief(tableplane.track);
|
||||
tableplane.tr.cells[11].textContent = tableplane.messages;
|
||||
tableplane.tr.cells[12].textContent = tableplane.seen.toFixed(0);
|
||||
tableplane.tr.cells[13].textContent = (tableplane.rssi !== null ? tableplane.rssi : "");
|
||||
tableplane.tr.cells[14].textContent = (tableplane.position !== null ? tableplane.position[1].toFixed(4) : "");
|
||||
tableplane.tr.cells[15].textContent = (tableplane.position !== null ? tableplane.position[0].toFixed(4) : "");
|
||||
tableplane.tr.cells[16].textContent = format_data_source(tableplane.getDataSource());
|
||||
tableplane.tr.cells[17].innerHTML = getAirframesModeSLink(tableplane.icao);
|
||||
tableplane.tr.cells[18].innerHTML = getFlightAwareModeSLink(tableplane.icao, tableplane.flight);
|
||||
tableplane.tr.cells[19].innerHTML = getFlightAwarePhotoLink(tableplane.registration);
|
||||
tableplane.tr.className = classes;
|
||||
if (tableplane.position !== null && tableplane.seen_pos < 60) {
|
||||
++TrackedAircraftPositions;
|
||||
}
|
||||
}
|
||||
|
||||
if (show_squawk_warning) {
|
||||
$("#SpecialSquawkWarning").css('display','block');
|
||||
if (tableplane.getDataSource() === "adsb") {
|
||||
classes += " vPosition";
|
||||
} else if (tableplane.getDataSource() === "tisb") {
|
||||
classes += " tisb";
|
||||
} else if (tableplane.getDataSource() === "mlat") {
|
||||
classes += " mlat";
|
||||
} else {
|
||||
$("#SpecialSquawkWarning").css('display','none');
|
||||
classes += " other";
|
||||
}
|
||||
|
||||
resortTable();
|
||||
if (tableplane.icao == SelectedPlane)
|
||||
classes += " selected";
|
||||
|
||||
if (tableplane.squawk in SpecialSquawks) {
|
||||
classes = classes + " " + SpecialSquawks[tableplane.squawk].cssClass;
|
||||
show_squawk_warning = true;
|
||||
}
|
||||
|
||||
// ICAO doesn't change
|
||||
if (tableplane.flight) {
|
||||
tableplane.tr.cells[2].innerHTML = getFlightAwareModeSLink(tableplane.icao, tableplane.flight, tableplane.flight);
|
||||
} else {
|
||||
tableplane.tr.cells[2].innerHTML = "";
|
||||
}
|
||||
tableplane.tr.cells[3].textContent = (tableplane.registration !== null ? tableplane.registration : "");
|
||||
tableplane.tr.cells[4].textContent = (tableplane.icaotype !== null ? tableplane.icaotype : "");
|
||||
tableplane.tr.cells[5].textContent = (tableplane.squawk !== null ? tableplane.squawk : "");
|
||||
tableplane.tr.cells[6].innerHTML = format_altitude_brief(tableplane.altitude, tableplane.vert_rate, DisplayUnits);
|
||||
tableplane.tr.cells[7].textContent = format_speed_brief(tableplane.speed, DisplayUnits);
|
||||
tableplane.tr.cells[8].textContent = format_vert_rate_brief(tableplane.vert_rate, DisplayUnits);
|
||||
tableplane.tr.cells[9].textContent = format_distance_brief(tableplane.sitedist, DisplayUnits);
|
||||
tableplane.tr.cells[10].textContent = format_track_brief(tableplane.track);
|
||||
tableplane.tr.cells[11].textContent = tableplane.messages;
|
||||
tableplane.tr.cells[12].textContent = tableplane.seen.toFixed(0);
|
||||
tableplane.tr.cells[13].textContent = (tableplane.rssi !== null ? tableplane.rssi : "");
|
||||
tableplane.tr.cells[14].textContent = (tableplane.position !== null ? tableplane.position[1].toFixed(4) : "");
|
||||
tableplane.tr.cells[15].textContent = (tableplane.position !== null ? tableplane.position[0].toFixed(4) : "");
|
||||
tableplane.tr.cells[16].textContent = format_data_source(tableplane.getDataSource());
|
||||
tableplane.tr.cells[17].innerHTML = getAirframesModeSLink(tableplane.icao);
|
||||
tableplane.tr.cells[18].innerHTML = getFlightAwareModeSLink(tableplane.icao, tableplane.flight);
|
||||
tableplane.tr.cells[19].innerHTML = getFlightAwarePhotoLink(tableplane.registration);
|
||||
tableplane.tr.className = classes;
|
||||
}
|
||||
}
|
||||
|
||||
if (show_squawk_warning) {
|
||||
$("#SpecialSquawkWarning").css('display','block');
|
||||
} else {
|
||||
$("#SpecialSquawkWarning").css('display','none');
|
||||
}
|
||||
|
||||
resortTable();
|
||||
}
|
||||
|
||||
//
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
html, body {
|
||||
margin: 0; padding: 0; background-color: #ffffff; font-family: Tahoma, Sans-Serif;
|
||||
margin: 0; padding: 0; background-color: #ffffff; font-family: Helvetica Neue, Sans-Serif;
|
||||
font-size: 10pt; overflow: auto; height: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -235,7 +235,7 @@ div#loader { z-index: 99; position: absolute; left: 0; top: 0; bottom: 0; right:
|
|||
}
|
||||
|
||||
.aircraft_table_header {
|
||||
background-color: #409EDF;
|
||||
background-color: #002F5D;
|
||||
color: #FFFFFF;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -254,18 +254,22 @@ div#loader { z-index: 99; position: absolute; left: 0; top: 0; bottom: 0; right:
|
|||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.vPosition { background-color: #C3FFDF; }
|
||||
.mlat { background-color: #C7EAFC; }
|
||||
.vPosition { background-color: #E5F6FC; }
|
||||
.mlat { background-color: #FDF2E5; }
|
||||
.other { background-color: #E6E6E6; }
|
||||
.tisb { background-color: #CCD5DF; }
|
||||
.squawk7500 { font-weight: bold; background-color: #ff5555; }
|
||||
.squawk7600 { font-weight: bold; background-color: #00ffff; }
|
||||
.squawk7700 { font-weight: bold; background-color: #ffff00; }
|
||||
.selected { background-color: #dddddd; }
|
||||
.plane_table_row { cursor: pointer; }
|
||||
.plane_table_row {
|
||||
cursor: pointer;
|
||||
font-family: Helvetica Neue;
|
||||
}
|
||||
.hidden { display: none; }
|
||||
|
||||
.infoblock_heading { font-size: larger; }
|
||||
.infoblock_heading a { text-decoration: none; color: blue; font-size: x-small;}
|
||||
.infoblock_body { font-size: small; }
|
||||
|
||||
.dim { opacity: 0.3; filter:alpha(opacity=30); /* For IE8 and earlier */ }
|
||||
|
||||
|
|
@ -342,10 +346,13 @@ select.error, textarea.error, input.error {
|
|||
.legend
|
||||
{
|
||||
font-family: Helvetica Neue;
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
color: #000000;
|
||||
color: rgb(0, 0, 0);
|
||||
display: inline-flex;
|
||||
justify-content: flex-end;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.settingsHeading
|
||||
|
|
@ -581,3 +588,49 @@ select.error, textarea.error, input.error {
|
|||
.fourColumnSection4 {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
#dump1090_infoblock {
|
||||
font-family: Helvetica Neue;
|
||||
}
|
||||
|
||||
.infoBlockTitleText {
|
||||
font-weight: bold;
|
||||
color: #002F5D;
|
||||
}
|
||||
|
||||
.legendBox {
|
||||
/*margin-top: 5px;*/
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
/*line-height: 15px*/
|
||||
border: 1px solid #efefef;
|
||||
/*display: inline-block;*/
|
||||
border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
-webkit-border-radius: 4px;
|
||||
/*margin-left: auto;*/
|
||||
}
|
||||
|
||||
#adsbLegendBox {
|
||||
background-color: #E5F6FC;
|
||||
}
|
||||
|
||||
#mlatLegendBox {
|
||||
background-color: #FDF2E5;
|
||||
}
|
||||
|
||||
#otherLegendBox {
|
||||
background-color: #E6E6E6;
|
||||
}
|
||||
|
||||
#tisbLegendBox {
|
||||
background-color: #CCD5DF;
|
||||
}
|
||||
|
||||
.legendTitle {
|
||||
/*margin-left: auto;*/
|
||||
line-height: 19px;
|
||||
display: inline-block;
|
||||
padding-right: 20px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
Loading…
Reference in a new issue