minor css bug fixes, moved to OSM(TODO elevation)

css/style.css

@@ -1,6 +1,9 @@
html, body {
    height: 100%;
    width: 100%;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
#container {
@@ -24,9 +27,14 @@ html, body {
}
#rightNav {
	display: flex;
	flex-direction: column;
    width: calc(100% - 450px);
    width: -moz-calc(100% - 450px);
    width: calc(100% - 450px);
	overflow: hidden;
	box-sizing: border-box;
	height:100%;
}
#footer {
@@ -50,7 +58,7 @@ html, body {
}
input[type=number] {
    width: 40px;
    width: 70px;
}
table tr td {
@@ -75,3 +83,9 @@ table tr td {
.glyphicon-left {
    margin-right: 7px;
}
#lmap {
	overflow: hidden;
	width: 100%;
	height: 100%;
}

index.html

@@ -6,9 +6,18 @@
    <link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css">
    <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB3FKjZo6Fe6Lg--EU1Ci7V4rHIiU9Igb4"></script>
	<!-- Leaflet -->
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
		  integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
		  crossorigin=""/>
	<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"
			integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
			crossorigin=""></script> 
	
    <!--<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB3FKjZo6Fe6Lg--EU1Ci7V4rHIiU9Igb4"></script>-->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
    <script src="js/ng-map.min.js"></script>
    <!-- <script src="js/ng-map.min.js"></script> -->
    <script src="js/moment.min.js"></script>
    <script src="js/satellite.min.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
@@ -23,12 +32,12 @@
                        <td><b>Latitude</b></td>
                        <td><b>Longitude</b></td>
                        <td><b>Minimum AoA</b></td>
                        <td></td>
						<td></td>
                    </tr>
                    <tr ng-repeat="point in places">
                        <td>{{$index + 1}}</td>
                        <td>{{point.marker.position.lat().toFixed(6)}}</td>
                        <td>{{point.marker.position.lng().toFixed(6)}}</td>
                        <td>{{point.marker.getLatLng().lat.toFixed(6)}}</td>
                        <td>{{point.marker.getLatLng().lng.toFixed(6)}}</td>
                        <td><input type="number" min="0" max="90" ng-model="point.angle"> deg</td>
                        <td><button type="button" class="btn btn-danger" ng-click="removePoint($index)">Remove</button></td>
                    </tr>
@@ -64,8 +73,8 @@
                    </table><br>
                    <div id="footer">
                        <center>
                            Developed by Stephen Downward, callsign VA1QLE.<br>
                            <a href="https://git.scd31.com/laptopdude90/multipoint-satellite-tracker">Git repository</a><br><br>
                            Developed by Stephen VE9QLE<br>
                            <a href="https://git.scd31.com/stephen/multipoint-satellite-tracker">Git repository</a><br><br>
                        </center>
                    </div>
                </div>
@@ -77,7 +86,9 @@
                        </ul>
                    </div>
                    <div id="map" ng-show="selectedTab == 'map'">
                        <ng-map center="39.82, -77.01" zoom="4" style="height:100%"></ng-map>
						<div id="lmap"></div>
                        <!--<ng-map center="39.82, -77.01" zoom="4" style="height:100%"></ng-map>-->
						
                    </div>
                    <div id="config" ng-show="selectedTab == 'config'">
                        <center>

js/main.js

@@ -1,139 +1,171 @@
$(function () {
    var now = new Date();
    var then = new Date();
    then.setDate(now.getDate() + 7);
    $("#fromDate").datepicker().datepicker("setDate", now);
    $("#toDate").datepicker().datepicker("setDate", then);
	var now = new Date();
	var then = new Date();
	then.setDate(now.getDate() + 7);
	$("#fromDate").datepicker().datepicker("setDate", now);
	$("#toDate").datepicker().datepicker("setDate", then);
});
var app = angular.module('satTrackApp', ['ngMap']);
app.controller('satTrack-ctrl', function($scope, NgMap) {
    $scope.places = [];
    $scope.passes = [];
    $scope.isGettingPasses = false;
    $scope.selectedTab = 'map';
    $scope.satellites = [];
    $scope.selectAllSats = true;
    loadSatelliteData(function(satList) {
        $scope.satellites = satList;
    });
    var elevator;
    $scope.removePoint = function(id) {
        $scope.places[id].marker.setMap(null);
        $scope.places[id].marker = null;
        $scope.places.splice(id, 1);
        for(var i = 0; i < $scope.places.length; i++) {
            $scope.places[i].marker.setLabel((i + 1).toString());
        }
    }
    NgMap.getMap().then(function(map) {
        google.maps.event.addListener(map, 'click', function(event) {
            var marker = new google.maps.Marker({
                position: event.latLng,
                map: map,
                label: ($scope.places.length + 1).toString(),
                draggable: true
            });
            elevator = new google.maps.ElevationService;
            google.maps.event.addListener(marker, 'dragend', function () {
                $scope.$apply();
            });
            $scope.places.push({marker: marker, angle: 10});
            $scope.$apply();
        });
    });
    $scope.getPasses = function() {
        $scope.isGettingPasses = true;
        callsRemaining = $scope.places.length;
        for(var i = 0; i < $scope.places.length; i++) {
            let place = $scope.places[i];
            elevator.getElevationForLocations({locations: [$scope.places[i].marker.position]}, function(results, status) {
                if(status === 'OK' && results[0]) {
                    place.height = Math.max(results[0].elevation / 1000, 0);
                    callsRemaining--;
                    if(callsRemaining <= 0) sendCoords();
                } else {
                    alert('Something went very wrong');
                }
            });
        }
        var sendCoords = function() {
            var coords = $scope.places.map(function(a) {
                return {
                    lat: a.marker.position.lat(),
                    lng: a.marker.position.lng(),
                    height: a.height,
                    angle: a.angle
                };
            });
            var worker = new Worker('js/calc.js');
            worker.addEventListener('message', function(e) {
                $scope.passes = e.data;
                $scope.isGettingPasses = false;
                $scope.$apply();
            }, false);
            var fromDate = $("#fromDate").datepicker('getDate');
            var toDate = $("#toDate").datepicker('getDate');
            var duration = Math.abs(moment(toDate).diff(fromDate) / 1000) + 86400;
            worker.postMessage({coords: coords, satellites: $scope.satellites, fromDate: minDate(fromDate, toDate), toDuration: duration});
        }
    }
    $scope.getDate = function(date) {
        //console.log(date);
        return moment(date).format("MMM D");
    }
    $scope.getTime = function(date) {
        return moment(date).format("HH:mm:ss");
    }
    $scope.getDifferenceInMinutes = function(a, b) {
        var d = moment.duration(moment(a).diff(moment(b)));
        return (d / 60000) + " minutes";
    }
    $scope.getTimezone = function() {
        offset = new Date().getTimezoneOffset();
        halfHour = offset % 60;
        halfHourStr = halfHour > 9 ? "" + halfHour : "0" + halfHour;
        return "GMT" + (offset > 0 ? "-" : "+") + Math.floor(offset / 60) + halfHourStr;
    }
    $scope.toggleEnabled = function(val) {
        for(var i = 0; i < $scope.satellites.length; i++) {
            $scope.satellites[i].enabled = val;
        }
    }
var app = angular.module('satTrackApp',[] /*, ['ngMap']*/);
app.controller('satTrack-ctrl', function($scope) {
	$scope.places = [];
	$scope.passes = [];
	$scope.isGettingPasses = false;
	$scope.selectedTab = 'map';
	$scope.satellites = [];
	$scope.selectAllSats = true;
	loadSatelliteData(function(satList) {
		$scope.satellites = satList;
	});
	//Init leaflet map
	var lmap = L.map('lmap').setView([39.82, -77.01], 4);
	L.tileLayer('https://a.tile.openstreetmap.org/{z}/{x}/{y}.png', {
		attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
		maxZoom: 20,
		//id: 'mapbox.streets',
		//accessToken: 'your.mapbox.access.token'
	}).addTo(lmap);
	//var elevator;
	$scope.removePoint = function(id) {
		lmap.removeLayer($scope.places[id].marker);
		$scope.places[id].marker = null;
		$scope.places.splice(id, 1);
		for(var i = 0; i < $scope.places.length; i++) {
			$scope.places[i].marker.setLabel((i + 1).toString());
		}
	}
	function onMapClick(map)
	{
		var marker = new L.marker(map.latlng, {draggable: 'true'}).addTo(lmap);
		marker.on('dragend', function(e) {
			$scope.$apply();
		});
		marker.bindTooltip(($scope.places.length + 1).toString()).openTooltip();
		$scope.places.push({marker: marker, angle:10});
		$scope.$apply();
	}
	lmap.on('click', onMapClick);
	/*NgMap.getMap().then(function(map) {
		google.maps.event.addListener(map, 'click', function(event) {
			var marker = new google.maps.Marker({
				position: event.latLng,
				map: map,
				label: ($scope.places.length + 1).toString(),
				draggable: true
			});
			elevator = new google.maps.ElevationService;
			google.maps.event.addListener(marker, 'dragend', function () {
				$scope.$apply();
			});
			$scope.places.push({marker: marker, angle: 10});
			$scope.$apply();
		});
	});*/
	$scope.getPasses = function() {
		$scope.isGettingPasses = true;
		//callsRemaining = $scope.places.length;
		//Get elevations
		for(var i = 0; i < $scope.places.length; i++) {
			let place = $scope.places[i];
			place.height = 10; /* ------------TODO-------------- */
			/*elevator.getElevationForLocations({locations: [$scope.places[i].marker.position]}, function(results, status) {
				if(status === 'OK' && results[0]) {
					place.height = Math.max(results[0].elevation / 1000, 0);
					callsRemaining--;
					if(callsRemaining <= 0) sendCoords();
				} else {
					alert('Something went very wrong');
				}
			});*/
		}
		var coords = $scope.places.map(function(a) {
			return {
				lat: a.marker.getLatLng().lat,
				lng: a.marker.getLatLng().lng,
				height: a.height,
				angle: a.angle
			};
		});
		var worker = new Worker('js/calc.js');
		worker.addEventListener('message', function(e) {
			$scope.passes = e.data;
			$scope.isGettingPasses = false;
			$scope.$apply();
		}, false);
		var fromDate = $("#fromDate").datepicker('getDate');
		var toDate = $("#toDate").datepicker('getDate');
		var duration = Math.abs(moment(toDate).diff(fromDate) / 1000) + 86400;
		worker.postMessage({coords: coords, satellites: $scope.satellites, fromDate: minDate(fromDate, toDate), toDuration: duration});
	}
	$scope.getDate = function(date) {
		//console.log(date);
		return moment(date).format("MMM D");
	}
	$scope.getTime = function(date) {
		return moment(date).format("HH:mm:ss");
	}
	$scope.getDifferenceInMinutes = function(a, b) {
		var d = moment.duration(moment(a).diff(moment(b)));
		return (d / 60000) + " minutes";
	}
	$scope.getTimezone = function() {
		offset = new Date().getTimezoneOffset();
		halfHour = offset % 60;
		halfHourStr = halfHour > 9 ? "" + halfHour : "0" + halfHour;
		return "GMT" + (offset > 0 ? "-" : "+") + Math.floor(offset / 60) + halfHourStr;
	}
	$scope.toggleEnabled = function(val) {
		for(var i = 0; i < $scope.satellites.length; i++) {
			$scope.satellites[i].enabled = val;
		}
	}
});
function loadSatelliteData(callback) {
    $.get("nasabare.txt", function(data) {
        var splitLines = data.split(/\r?\n/);
        var satellites = []
        for(var i = 0; i < splitLines.length; i += 3) { //3 lines per satellite, so advance by 1 satellite each time
            if(splitLines[i] != '') {
                var sat = satellite.twoline2satrec(splitLines[i + 1], splitLines[i + 2]);
                var name = splitLines[i];
                satellites.push({name: name, satrec: sat, enabled: true});
            }
        }
        callback(satellites);
    });
	$.get("nasabare.txt", function(data) {
		var splitLines = data.split(/\r?\n/);
		var satellites = []
		for(var i = 0; i < splitLines.length; i += 3) { //3 lines per satellite, so advance by 1 satellite each time
			if(splitLines[i] != '') {
				var sat = satellite.twoline2satrec(splitLines[i + 1], splitLines[i + 2]);
				var name = splitLines[i];
				satellites.push({name: name, satrec: sat, enabled: true});
			}
		}
		//sort satellites by name
		satellites.sort(function(a, b) {
			return a.name.localeCompare(b.name);
		});
		
		callback(satellites);
	});
}
function minDate(date1, date2) {
    return date1 < date2 ? date1 : date2;
	return date1 < date2 ? date1 : date2;
}