woelpert
/
biketrack-plainjs
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

print last travelled route

master
Jens Wölpert 2 years ago
parent
43b582ae1c
commit
9efdc88086
4 changed files with 35 additions and 74 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      execution.js
  2. 18
      functions.js
  3. 70
      index.html
  4. 15
      map.js

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);
}

70
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
<ul>
<li>
<div class="wrapper">
<div class="panel">
<div class="panel-header">
<h3 class="title">Statistics</h3>
<div class="routes">
<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()">
<button onclick="displayRoute()"> Show last travelled route</button>
<button onclick="createlistitem()"> create route</button>
<div class="d-flex flex-row">
<ul id="list">
<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();
//document.write(getCurrentTime())
async function prepare_time(){
var currentime = await getCurrentTime();
return currentime
} //document.write(getCurrentTime())
// var currentime = prepare_time()
//document.getElementById("time").innerHTML = currentime //document.getElementById("time").innerHTML = currentime
</script>
<script>
//v//ar csv = './new.csv'
// 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(){

Write Preview
Loading…
Cancel
Save