AFG/dump1090
3
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Merge pull request #3 from terribl/master

Browse source 
New settings div
This commit is contained in:
Brian Davenport 2013-05-21 12:36:21 -07:00
parent 8e23983c86 a1d4a9f320
commit 05c9ebbb76
3 changed files with 79 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
public_html/gmap.html
View file

@ -13,12 +13,17 @@
<div id="map_canvas" style="height:100%"></div>
<div id="info">
<div>
<h1>Dump1090 - <span id="utcTime">00:00:00</span> UTC</h1>
<h1 id="header">Dump1090 - <span id="utcTime">00:00:00</span> UTC</h1>
<p id="geninfo"></p>
<p id="selinfo">Click on a plane for info.</p>
<div id="tabinfo"></div>
</div>
<div id="info_footer"><a href="#" onClick="resetMap();">Reset Map</a></div>
<div id="info_settings">[<a href="#" onClick="toggleSettings();">Settings</a>]</div>
<div id="info_settings_area">
<h2>Settings</h2>
<input type="button" value="Reset Map" onClick="resetMap();toggleSettings();">
<input type="button" value="OK" style="position:absolute;bottom:0;right:2px;" onClick="toggleSettings();">
</div>
</div>
</body>
</html>

37
public_html/script.js
View file

@ -363,17 +363,25 @@ function printTime() {
}
}
function placeFooter() {
var windHeight = $(window).height();
var footerHeight = $('#info_footer').height();
var offset = parseInt(windHeight) - parseInt(footerHeight);
function placeSettings() {
// Settings link
var marginLeft = $('#header').width() - $('#info_settings').width();
$('#info_settings').css('left', marginLeft);
$('#info_settings').css('top', parseInt($('#utcTime').offset().top));
var footerWidth = parseInt($('#info_footer').width());
var infoWidth = parseInt($('#info').width());
var marginLeft = parseInt((infoWidth / 2) - (footerWidth / 2));
// Settings area
$('#info_settings_area').css('top', parseInt($('#geninfo').offset().top));
$('#info_settings_area').css('left', 5);
$('#info_settings_area').css('width', parseInt($('#info').width() - 40));
}
$('#info_footer').css('top', offset);
$('#info_footer').css('margin-left', marginLeft);
function toggleSettings() {
if ($('#info_settings_area').css('display') != 'none') {
$('#info_settings_area').hide(350);
} else {
// Open settings
$('#info_settings_area').show(350);
}
}
function resetMap() {
@ -381,7 +389,8 @@ function resetMap() {
localStorage['CenterLon'] = 9.0;
localStorage['ZoomLvl'] = 5;
Map.setZoom(parseInt(localStorage['ZoomLvl']));
Map.setCenter(new google.maps.LatLng(parseInt(localStorage['CenterLat']), parseInt(localStorage['CenterLon'])));
Map.setCenter(new google.maps.LatLng(parseInt(localStorage['CenterLat']),
parseInt(localStorage['CenterLon'])));
Selected = null;
refreshSelectedInfo();
}
@ -413,14 +422,14 @@ function initialize() {
maxZoom: 18
}));
// show footer at info-area
// show settings at info-area
$(function(){
$(window).resize(function(e){
placeFooter();
placeSettings();
});
placeFooter();
placeSettings();
// hide it before it's positioned
$('#info_footer').css('display','inline');
$('#info_settings').css('display','inline');
});
// Listener for newly created Map

77
public_html/style.css
View file

@ -1,49 +1,68 @@
html { height: 100%; }
body { height: 100%; margin: 0; padding: 0; font-size: small;}
a { color: blue; }
#map_canvas {
height: 100%;
margin-right:390px;
height: 100%;
margin-right: 390px;
}
#info {
position: absolute;
width:390px;
height:100%;
bottom:0px;
right:0px;
top:0px;
background-color: white;
border-left:1px #666 solid;
font-family:Helvetica;
position: absolute;
width: 390px;
height: 100%;
bottom: 0px;
right: 0px;
top: 0px;
background-color: white;
border-left: 1px #666 solid;
font-family: Helvetica, Sans-serif, Arial;
}
#info div {
padding:0px;
padding-left:10px;
padding-right:10px;
margin:0px;
padding: 0px;
padding-left: 10px;
padding-right: 10px;
margin: 0px;
}
#info div h1 {
margin-top:10px;
font-size:16px;
margin-top: 10px;
font-size: 16px;
}
#info_footer {
position: absolute;
display: none;
text-align: center;
padding:0px;
margin:0px;
#info div h2 {
margin-top: 10px;
font-size: 14px;
}
#info_settings {
position: absolute;
display: none;
}
#info_settings_area {
position: absolute;
display: none;
background-color: white;
border: 1px solid gray;
}
#tabinfo{
height: 400px;
overflow-y: auto;
height: 400px;
overflow-y: auto;
}
#tableinfo {
font-size: x-small;
font-family: monospace;
font-size: x-small;
font-family: monospace;
}
#tableinforow {
cursor: pointer;
cursor: pointer;
}
#tableinforow .bold {
font-weight:bold;
font-weight:bold;
}