woelpert/biketrack-plainjs
2
0
Fork 0
Code Issues Pull Requests repo.project_board Releases Wiki Activity

print last travelled route

Browse Source
This commit is contained in:
Jens Wölpert 2022-07-22 13:03:03 +02:00
parent 43b582ae1c
commit 9efdc88086
4 changed files with 35 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
execution.js
View File

@ -2,5 +2,5 @@
//displayRoute(); //displayRoute();
//showBike() //showBike()
//createDb() //createDb()
getCurrentTime() //getCurrentTime()
})(); })();

18
functions.js
View File

@ -107,7 +107,7 @@ await db.put('2022-07-01T11:06:03','49.39010871/8.68987621')
var all_times = (Object.keys(currentCoordinate)) var all_times = (Object.keys(currentCoordinate))
var lasttime = all_times[(all_times.length-1)] var lasttime = all_times[(all_times.length-1)]
console.log(lasttime) console.log(lasttime)
//return lasttime; return lasttime;
} }
@ -148,7 +148,17 @@ await db.put('2022-07-01T11:06:03','49.39010871/8.68987621')
//console.log(newArray) //console.log(newArray)
return newArray; return newArray;
} }
async function createRouteObject(){
var currentime = await getCurrentTime()
var myBtn = document.createElement("p");
myBtn.innerHTML = "<ul><li><div><h4 >Last traveled Route</h4><div><p>" +currentime+"</p></div></div></li></ul>";
document.ul.appendChild(myBtn);
}
async function createlistitem() {
var currentime = await getCurrentTime();
var ul = document.getElementById("list");
var li = document.createElement("li");
li.appendChild(document.createTextNode("Last travelled route on: " +currentime+""));
ul.appendChild(li);
}

74
index.html
View File

@ -14,64 +14,19 @@
<script src="jquery-csv.js"> </script> <script src="jquery-csv.js"> </script>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Track your bike</title> <title>Track your bike</title>
</head> </head>
<body> <body>
<button onclick="showBike()"> Locate your Bike!</button> <button onclick="showBike()"> Locate your Bike!</button>
<button onclick="loadRoute()"> LoadRoute</button <button onclick="displayRoute()"> Show last travelled route</button>
<ul> <button onclick="createlistitem()"> create route</button>
<li>
<div class="wrapper">
<div class="panel">
<div class="panel-header">
<h3 class="title">Statistics</h3>
<div class="routes"> <ul id="list">
<span>Last traveled route</span>
</div>
</div>
<div class="panel-body">
<div class="categories">
<div class="category">
<span>kilometers traveled</span>
<span>2 Km</span>
</div>
<div class="category">
<span>traveled time</span>
<span>2 min</span>
</div>
</div>
<div class="chart">
<div class="operating-systems">
</div>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="container d-flex justify-content-center">
<ul class="list-group mt-5 text-white">
<li class="list-group-item d-flex justify-content-between align-content-center" onclick="displayRoute()">
<div class="d-flex flex-row">
<div class="ml-2">
<h4 class="mb-0">Last traveled Route</h4>
<div class="about">
<span id="time">Jan 21, 2020</span>
</div>
</div>
</div>
</li>
</ul> </ul>
@ -79,7 +34,6 @@
</div> </div>
</li> </li>
</ul> </ul>
<div id="map"></div> <div id="map"></div>
<script type="text/javascript" src="lib/orbitdb.js" charset="utf-8"></script> <script type="text/javascript" src="lib/orbitdb.js" charset="utf-8"></script>
@ -94,21 +48,15 @@
<script type="file" src="new.csv"></script> <script type="file" src="new.csv"></script>
<script> <script>
//var currentime = getCurrentTime(); async function prepare_time(){
//document.write(getCurrentTime()) var currentime = await getCurrentTime();
//document.getElementById("time").innerHTML = currentime return currentime
</script> } //document.write(getCurrentTime())
<script> // var currentime = prepare_time()
//v//ar csv = './new.csv' //document.getElementById("time").innerHTML = currentime
// var data = $.csv.toObjects(csv);
//console.log(data)
//const res = d3.csvParse(csv);
//console.log(res);
</script> </script>
</script>
<style> #map { height: 600px; width: 600px; margin: auto }</style> <style> #map { height: 600px; width: 600px; margin: auto }</style>
<style> <style>
/* /*

15
map.js
View File

@ -1,8 +1,4 @@
var map = L.map('map').setView([49.41607523, 8.672200499], 19); var map = L.map('map').setView([49.41607523, 8.672200499], 19);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 44, maxZoom: 44,
@ -20,8 +16,15 @@ var allcoordinates = await prepare();
console.log(allcoordinates); console.log(allcoordinates);
//var marker = L.marker([49.41607523,8.67220049]).addTo(map); //var marker = L.marker([49.41607523,8.67220049]).addTo(map);
var polyline = L.polyline(allcoordinates, {color: 'red'}).addTo(map); var polyline = L.polyline(allcoordinates, {color: 'red'}).addTo(map);
map.fitBounds(polyline.getBounds());
map.fitBounds(polyline.getBounds()); var currentime = await getCurrentTime()
var ul = document.getElementById("list");
var li = document.createElement("li");
li.appendChild(document.createTextNode("Last travelled route on: " +currentime+""));
ul.appendChild(li);
map.fitBounds(polyline.getBounds());
map.fitBounds(polyline.getBounds())
return currentime
} }
async function showBike(){ async function showBike(){