Commit 0c70aec2 authored by Michael Ochmann's avatar Michael Ochmann
Browse files

added dummy gui

parent fcadf50c
......@@ -10,64 +10,59 @@
</head>
<body>
<header></header>
<header>
<a href=#>Zurück</a>
<h2 class=title>HeightTracker</h2>
<a href=#>Info</a>
</header>
<main class=view>
asdadadasd
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
sdadasd
<ul class=UITableView>
<li><a href=#><b>Latitude:</b> <span id=lat></span></a></li>
<li><a href=#><b>Longitude:</b> <span id=lon></span></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#></a></li>
<li><a href=#><b>Altitude:</b> <span id=alt></span></a></li>
</ul>
</main>
<footer></footer>
......
import GeoPoint from "./GeoPoint.js";
import $ from "./smallQ.js";
class App {
constructor() {
let p = new GeoPoint(49.7416236,6.63362);
let distance = p.distance(new GeoPoint(49.7671887,6.6302828));
console.log(distance / 1000.0);
if (!navigator.geolocation)
alert("Your browser does not support geo data!");
setInterval(() => {
navigator.geolocation.getCurrentPosition(position => {
let p = new GeoPoint(position.coords.latitude, position.coords.longitude, position.coords.altitude);
$("#lon").html(p.longitude);
$("#lat").html(p.latitude);
$("#alt").html(p.altitude);
console.log(p);
});
}, 1000)
}
}
......
......@@ -18,18 +18,9 @@ if (typeof Number.prototype.squared === "undefined") {
*/
class GeoPoint {
constructor(lat = null, long = null, alt = null) {
if (lat === null && long === null) {
navigator.geolocation.getCurrentPosition(position => {
this.latitude = position.latitude;
this.longitude = position.longitude;
this.altitude = position.altitude;
this.accuracy = position.accuracy;
});
} else {
this.latitude = lat;
this.longitude = long;
this.altitude = alt;
}
this.latitude = lat;
this.longitude = long;
this.altitude = alt;
}
/**
......@@ -45,8 +36,8 @@ class GeoPoint {
if (geoPoint.constructor.name !== "GeoPoint")
throw new TypeError("an object of type 'GeoPoint' must be passed.");
let lat1 = this.latitude.toRadians();
let lat2 = geoPoint.latitude.toRadians();
let lat1 = this.latitude.toRadians();
let lat2 = geoPoint.latitude.toRadians();
let deltaLat = (geoPoint.latitude - this.latitude).toRadians();
let deltaLon = (geoPoint.longitude - this.longitude).toRadians();
......@@ -60,6 +51,7 @@ class GeoPoint {
return Math.round(GeoPoint.EARTH_RADIUS * c);
}
}
GeoPoint.EARTH_RADIUS = 6371e3;
export default GeoPoint;
\ No newline at end of file
......@@ -2,4 +2,6 @@
import App from "./App.js";
new App();
\ No newline at end of file
document.addEventListener("DOMContentLoaded", event => {
new App();
});
class smallQ {
constructor(selector) {
this.elements = document.querySelectorAll(selector);
}
html(content) {
if (!content)
return this.elements[0].innerHTML;
for (let element of this.elements) {
element.innerHTML = content;
}
return this;
}
}
function $(selector) {
return new smallQ(selector);
}
export default $;
\ No newline at end of file
.UITableView {
list-style: none;
padding: 0;
margin: 0;
li {
padding: 15px 12px;
border-bottom: solid 1px #eee;
}
}
\ No newline at end of file
$header-background: #fff;
$header-color : #1c1c1c;
$header-border : #b2b2b2;
\ No newline at end of file
footer {
background: lawngreen;
background: $header-background;
color: $header-color;
border-top: solid 1px $header-border;
box-shadow: 0 -1px 15px rgba(0,0,0,0.2);
}
\ No newline at end of file
header {
background: lawngreen;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 9px;
background: $header-background;
color: $header-color;
border-bottom: solid 1px $header-border;
padding: 0 8px;
align-items: center;
.title {
padding: 0;
margin: 0;
text-align: center;
font-size: 12pt;
font-weight: bold;
}
a {
color: $header-color;
&:last-child {
text-align: right;
}
}
}
\ No newline at end of file
.view {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
box-sizing: border-box;
padding: 8px;
background: white;
}
\ No newline at end of file
@import "colors";
@import "header";
@import "footer";
@import "UITableView";
@import "view";
a {
text-decoration: none;
outline: 0;
color: black;
}
body, html {
margin: 0;
padding: 0;
height: 100%;
background: yellow;
}
body {
padding-top: 20px;
display: grid;
grid-template-rows: 40px auto 40px;
grid-template-rows: 44px auto 49px;
background: $header-background;
font-family: sans-serif;
box-sizing: border-box;
}
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment