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

added function showroute

Browse Source
This commit is contained in:
Jens Wölpert 2022-07-22 10:51:04 +02:00
parent 36e529bbbd
commit 43b582ae1c
4 changed files with 155 additions and 180 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
execution.js
View File

@ -1,4 +1,6 @@
(async () =>{
//displayRoute();
//showBike()
//createDb()
getCurrentTime()
})();

228
functions.js
View File

@ -10,99 +10,145 @@
}
initIPFS()
async function createDb(){
const ipfs = await Ipfs.create({repo: 'ok' + Math.random()});
async function createDb(db_name){
// Create database instance
//const ipfsOptions = { repo: '/orbitdb/createdb1', }
const ipfs = await Ipfs.create()
const orbitdb = await OrbitDB.createInstance(ipfs)
// Create IPFS instance
const db = await orbitdb.keyvalue(db_name)
const address = db.address
console.log(address)
console.log(db.address.toString())
await db.put('2022-07-01T10:49:07', '49.41185089/8.67646861')
await db.put('2022-07-01T10:49:12', '49.41166303/8.67652893')
await db.put('2022-07-01T10:49:20','49.41123636/8.67652849')
await db.put(' 2022-07-01T10:49:25','49.41084041/8.67651128')
await db.put('2022-07-01T10:49:31','49.41049801/8.67656948')
let csv = "./new.csv"
const value = db.all
//console.log(value)
console.log('datenbank erstellt danke')
//console.log(value)
await db.close()
return db
}
// Create database instance
const orbitdb = await OrbitDB.createInstance(ipfs)
//const ipfsOptions = { repo: '/orbitdb/createdb1', }
async function loadRoute(db_name){
const ipfs = await Ipfs.create()
const orbitdb = await OrbitDB.createInstance(ipfs)
const db = await orbitdb.keyvalue(db_name)
await db.load()
console.log("loadroute ausgeführt")
const value = db.all
console.log(value)
return value;
}
async function connectDB(dbname){
const ipfsOptions = { repo: '/orbitdb/los', }
const ipfs = await Ipfs.create(ipfsOptions)
const orbitdb = await OrbitDB.createInstance(ipfs)
const db_route2 = await orbitdb.open('/orbitdb/zdpuAoog9p95yvwyGcL3xJsGcdMkxVdEDRwYwba1JrKNEgQod/'+dbname);
const route2 = db_route2.all
console.log(route2);
}
async function getCurrentCoordinate(){
var db_conn = await createDb('coordinates')
const currentCoordinate = db_conn.all
console.log(currentCoordinate)
var latest_coord_string = (currentCoordinate[Object.keys(currentCoordinate)[Object.keys(currentCoordinate).length - 1]])
var latest_coordinate_str = latest_coord_string.split("/")
latest_coordinate_str[0] = parseFloat(latest_coordinate_str[0])
latest_coordinate_str[1] = parseFloat(latest_coordinate_str[1])
console.log(latest_coordinate_str)
return latest_coordinate_str;
}
async function getAllCoordinates(dbname){
var db2 = await createDb(dbname)
const all_coordinates = db2.all
// coordinates in this schema 49.123/8.2311
var coordinates = Object.values(all_coordinates)
// parse to string for split and then split by /
var coordinate_string = coordinates.toString()
var between_string = coordinate_string.split("/")
var final_string = between_string.toString()
//comma string looks now like this : 49.1212,8.1231,49.1231, ...
var comma_string = final_string.split(',')
// create new Array and put string back in to array for using paths/polylines with leafleat
var newArray =[];
// use for loop for iterating over string and put it in the right order
for (var i = 0; i < comma_string.length; i++) {
var increment = i+1;
newArray.push([comma_string[i], comma_string[increment]])
increment = increment+1
i = i+1
}
(function(elem) {
var callee = arguments.callee;
return elem instanceof Array ? elem.map(function(elem2) { return callee(elem2); })
: parseFloat(elem);
})
newArray = newArray.map(function(elem) {
return elem.map(function(elem2) {
return parseFloat(elem2);
});
});
//console.log(newArray)
return newArray;
}
const db = await orbitdb.keyvalue('routes')
const address = db.address
console.log(address)
console.log(db.address.toString())
await db.put('2022-07-01T10:49:07', '49.41185089/8.67646861',{pin: true})
await db.put('2022-07-01T10:49:12', '49.41166303/8.67652893')
await db.put('2022-07-01T10:49:20','49.41123636/8.67652849')
await db.put(' 2022-07-01T10:49:25','49.41084041/8.67651128')
await db.put('2022-07-01T10:49:31','49.41049801/8.67656948')
await db.put('2022-07-01T10:49:31','49.41049801/8.67656948')
await db.put('2022-07-01T10:49:38','49.4102198/8.67658131')
await db.put('2022-07-01T10:49:44','49.40982577/8.67668618')
await db.put('2022-07-01T10:49:50','49.4095211/8.6767495')
// await db.put('0000','00/00');
await db.put('2022-07-01T10:56:43','49.39117231/8.68814905')
await db.put('2022-07-01T10:56:50','49.39076199/8.68818273')
await db.put('2022-07-01T10:56:59','49.39058452/8.68776805')
await db.put('2022-07-01T10:57:04','49.39048152/8.68746322')
await db.put('2022-07-01T10:57:10','49.39009475/8.68742468')
await db.put('2022-07-01T10:57:18','49.38966856/8.68741891')
await db.put('2022-07-01T10:57:26','49.3896966/8.68683682')
await db.put('2022-07-01T10:57:34','49.38985798/8.68647962')
await db.put('2022-07-01T11:00:12','49.38983544/8.68654936')
await db.put('2022-07-01T11:00:19','49.38982943/8.68686349')
await db.put('2022-07-01T11:00:24','49.38988557/8.68711804')
await db.put('2022-07-01T11:00:32','49.38975355/8.68742027')
await db.put('2022-07-01T11:00:39','49.38968475/8.68789061')
await db.put('2022-07-01T11:00:47','49.38968741/8.68864464')
await db.put('2022-07-01T11:00:56','49.38981096/8.68935897')
await db.put('2022-07-01T11:01:03','49.38991498/8.6898232')
await db.put('2022-07-01T11:01:13','49.39008687/8.69005123')
await db.put('2022-07-01T11:01:20','49.39012705/8.69004198')
await db.put('2022-07-01T11:01:42','49.39012273/8.69044973')
await db.put('2022-07-01T11:03:13','49.39020013/8.69013153')
await db.put('2022-07-01T11:03:37','49.3902416/8.69011779')
await db.put('2022-07-01T11:06:03','49.39010871/8.68987621')
let csv = "./new.csv"
const value = db.all
//console.log(value)
console.log('database connected!')
//console.log(value)
await db.close()
return db
}
async function loadRoute(){
const db = await createDb()
await db.load()
console.log("loadroute ausgeführt")
const value = db.all
console.log(value)
return value;
}
async function connectDB(){
//const ipfsOptions = { repo: '/orbitdb/los', }
//const ipfs = await Ipfs.create(ipfsOptions)
const ipfs = await Ipfs.create()
const orbitdb = await OrbitDB.createInstance(ipfs)
const db_route2 = await orbitdb.open('/orbitdb/zdpuApZ7pMKupZjmxPQk8xp34QdAEXHFFjmA3EPWuACN88DwB/coordinates');
//const route2 = db_route2.all
//console.log(OrbitDB.isValidAddress('/orbitdb/zdpuAqETvwNibieag6o5ahX4d6WKXi6QZvbar3XZPJEXz3vSE/coordinates'));
console.log(db_route2.all);
console.log(db_route2.address.toString())
return db_route2;
}
async function getCurrentCoordinate(){
var db_conn = await createDb()
const currentCoordinate = db_conn.all
console.log(currentCoordinate)
var latest_coord_string = (currentCoordinate[Object.keys(currentCoordinate)[Object.keys(currentCoordinate).length - 1]])
var latest_coordinate_str = latest_coord_string.split("/")
latest_coordinate_str[0] = parseFloat(latest_coordinate_str[0])
latest_coordinate_str[1] = parseFloat(latest_coordinate_str[1])
console.log(latest_coordinate_str)
return latest_coordinate_str;
}
async function getCurrentTime(){
var db_conn = await createDb()
const currentCoordinate = db_conn.all
//console.log(currentCoordinate)
var all_times = (Object.keys(currentCoordinate))
var lasttime = all_times[(all_times.length-1)]
console.log(lasttime)
//return lasttime;
}
async function getAllCoordinates(){
var db2 = await createDb()
const all_coordinates = db2.all
// coordinates in this schema 49.123/8.2311
var coordinates = Object.values(all_coordinates)
// parse to string for split and then split by /
var coordinate_string = coordinates.toString()
var between_string = coordinate_string.split("/")
var final_string = between_string.toString()
//comma string looks now like this : 49.1212,8.1231,49.1231, ...
var comma_string = final_string.split(',')
// create new Array and put string back in to array for using paths/polylines with leafleat
var newArray =[];
// use for loop for iterating over string and put it in the right order
for (var i = 0; i < comma_string.length; i++) {
var increment = i+1;
newArray.push([comma_string[i], comma_string[increment]])
increment = increment+1
i = i+1
}
(function(elem) {
var callee = arguments.callee;
return elem instanceof Array ? elem.map(function(elem2) { return callee(elem2); })
: parseFloat(elem);
})
newArray = newArray.map(function(elem) {
return elem.map(function(elem2) {
return parseFloat(elem2);
});
});
console.log(newArray)
//console.log(newArray)
return newArray;
}

102
index.html
View File

@ -9,12 +9,15 @@
crossorigin=""></script>
<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<script type="javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"> </script>
<script src="jquery-csv.js"> </script>
<meta charset="utf-8">
<title>Track your bike</title>
</head>
<body>
<button onclick="showBike()"> Locate your Bike!</button>
<button onclick="loadRoute()"> LoadRoute</button
<ul>
<li>
<div class="wrapper">
@ -23,7 +26,7 @@
<h3 class="title">Statistics</h3>
<div class="routes">
<span>Route X</span>
<span>Last traveled route</span>
</div>
</div>
@ -53,15 +56,16 @@
<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">
<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">Route 1</h4>
<h4 class="mb-0">Last traveled Route</h4>
<div class="about">
<span>Jan 21, 2020</span>
<span id="time">Jan 21, 2020</span>
</div>
</div>
</div>
@ -69,20 +73,6 @@
</li>
<li class="list-group-item d-flex justify-content-between align-content-center">
<div class="d-flex flex-row">
<div class="ml-2">
<h4 class="mb-0">Route 2</h4>
<div class="about">
<span>Jan 22, 2020</span>
</div>
</div>
</div>
</li>
</ul>
@ -103,7 +93,11 @@
<script type="text/javascript" src="execution.js"></script>
<script type="file" src="new.csv"></script>
<script>
//var currentime = getCurrentTime();
//document.write(getCurrentTime())
//document.getElementById("time").innerHTML = currentime
</script>
<script>
//v//ar csv = './new.csv'
@ -190,72 +184,4 @@ html, body {
flex-direction: column;
flex-grow: 2;
position: relative;
}
.operating-systems {
display: flex;
justify-content: space-between;
width: 215px;
margin-top: 30px;
margin-bottom: 50px;
}
.android-os span {
background: #80B354;
}
.ios-os span {
background: #F5A623;
}
.windows-os span {
background: #F8E71C;
}
.calendar-views span:hover {
border: 2px solid #BDC6CF;
cursor: pointer;
border-radius: 15px;
}
body{
background: #e68a43;
}
ul{
list-style-type: none;
}
.list-group{
width: 250px !important;
}
.list-group-item{
margin-top:16px;
border-radius: none;
background: #e68a43;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
.list-group-item:hover{
transform: scaleX(1.1);
}
.check{
opacity: 0;
transition: all 0.6s ease-in-out;
}
.list-group-item:hover .check {
opacity: 1;
}
.about span{
font-size: 16px;
margin-right: 10px;
}
*/
</style>
</body>
</html>
}

3
map.js
View File

@ -2,6 +2,7 @@
var map = L.map('map').setView([49.41607523, 8.672200499], 19);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 44,
@ -19,7 +20,7 @@ var allcoordinates = await prepare();
console.log(allcoordinates);
//var marker = L.marker([49.41607523,8.67220049]).addTo(map);
var polyline = L.polyline(allcoordinates, {color: 'red'}).addTo(map);
map.fitBounds(polyline.getBounds());
map.fitBounds(polyline.getBounds());
map.fitBounds(polyline.getBounds());
}