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

Minor changes

improvements
Paul Mueller 2 years ago
parent
28f5f2684b
commit
4c75409729
6 changed files with 91 additions and 518 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 77
      browser.html~
  2. 86
      functions.js
  3. 31
      functions.js~
  4. 281
      index.html~
  5. 47
      map.js
  6. 87
      new.csv~

77
browser.html~
View File

@ -1,77 +0,0 @@
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<meta charset="utf-8">
<title>Track your bike</title>
</head>
<body>
<div id="logo">
<pre>
_ _ _ _ _
| | (_) | | | |
___ _ __| |__ _| |_ __| | |__
/ _ \| '__| '_ \| | __| / _\` | '_\
| (_) | | | |_) | | |_ | (_| | |_) |
\___/|_| |_.__/|_|\__| \__,_|_.__/
Peer-to-Peer Database for the Decentralized Web
</pre>
</div>
<button id="open" type="button" disabled>Open</button>
<button id="create" type="button" disabled>Open</button>
<button id="status" type="button" disabled>Open</button>
<script src="example.js"></script>
<script type="text/javascript" src="lib/orbitdb.js" charset="utf-8"></script>
<script type="text/javascript" src="lib/ipfs.js" charset="utf-8"></script>
<script type="text/javascript" src="functions.js">
<!-- <script src="https://unpkg.com/ipfs@0.35.0/dist/index.min.js"></script> -->
<script src="https://www.unpkg.com/orbit-db/dist/orbitdb.min.js"></script>
<script>
</script>
<script>
//const initIPFS = async (IPFS, ORBITDB) => {
// Create IPFS instance
// const ipfsOptions = { repo: '/orbitdb/examples/browser/new/ipfs/0.33.1', }
//const ipfs = await Ipfs.create(ipfsOptions)
// Create OrbitDB instance
//const orbitdb = await OrbitDB.createInstance(ipfs)
//}
//initIPFS()
// async function createDb(){
// Create database instance
// Create IPFS instance
//const ipfsOptions = { repo: '/orbitdb/examples/browser/new/ipfs/0.33.1.2', }
//const ipfs = await Ipfs.create(ipfsOptions)
//const orbitdb = await OrbitDB.createInstance(ipfs)
//const db = await orbitdb.keyvalue('first-database')
// const address = db.address
// console.log(address)
//console.log(db.address.toString())
//await db.put('timestamp', '4.9123123/-8.1231')
//const value = db.get('timestamp')
//console.log(value)
//}
initIPFS()
createDb()
</script>
</script>
<script type="text/javascript" charset="utf-8">
// Start the example
//main()
</script>
</body>
</html>

86
functions.js
View File

@ -19,13 +19,12 @@ async function createDb(){
const db = await orbitdb.keyvalue('routes')
const address = db.address
console.log(address)
console.log(db.address.toString())
//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:25','49.41084041/8.67651128')
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')
@ -62,16 +61,12 @@ async function createDb(){
return db
}
async function loadRoute(){
const db = await createDb()
await db.load()
console.log("loadroute ausgeführt")
const value = db.all
console.log(value)
//console.log(value)
return value;
}
async function connectDB(){
@ -82,19 +77,19 @@ async function createDb(){
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())
//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)
//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)
//console.log(latest_coordinate_str)
return latest_coordinate_str;
}
@ -106,48 +101,83 @@ async function createDb(){
//console.log(currentCoordinate)
var all_times = (Object.keys(currentCoordinate))
var lasttime = all_times[(all_times.length-1)]
console.log(lasttime)
//console.log(lasttime)
return lasttime;
}
var buffer_for_i = 0;
async function getAllCoordinates(){
var db2 = await createDb()
const all_coordinates = db2.all
const current_route = db2.all
// coordinates in this schema 49.123/8.2311
var coordinates = Object.values(all_coordinates)
var coordinates = Object.values(current_route)
// 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(',')
const comma_string = final_string.split(',')
// create new Array and put string back in to array for using paths/polylines with leafleat
var newArray =[];
var route0 =[];
var route1 = []
// use for loop for iterating over string and put it in the right order
//route 0
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
//console.log(comma_string[i])
if (comma_string[i] == "00"){
console.log("00 gefunden")
buffer_for_i = i +2;
//console.log(buffer_for_i)
break;
}
route0.push([comma_string[i], comma_string[i+1]])
i = i+1
}
// its only for converting the string array to a float array, because leaflethjs wants only a float array
(function(elem) {
var callee = arguments.callee;
return elem instanceof Array ? elem.map(function(elem2) { return callee(elem2); })
: parseFloat(elem);
})
route0 = route0.map(function(elem) {
return elem.map(function(elem2) {
return parseFloat(elem2);
});
});
//console.log("route0")
//console.log(route0)
//route 1
for (var i = buffer_for_i; i < comma_string.length; i++) {
console.log(buffer_for_i)
if (comma_string[i] == "00"){
//console.log("00 gefunden")
//console.log(buffer_for_i)
break;
}else if(comma_string[i] == "11"){
noroutes = 1;
//console.log("Ende gefunden")
}
route1.push([comma_string[i], comma_string[i+1]])
i = i+1
}
//console.log("route1")
//console.log(route1)
// its only for converting the string array to a float array, because leaflethjs wants only a float array
(function(elem) {
var callee = arguments.callee;
return elem instanceof Array ? elem.map(function(elem2) { return callee(elem2); })
: parseFloat(elem);
})
newArray = newArray.map(function(elem) {
route1 = route1.map(function(elem) {
return elem.map(function(elem2) {
return parseFloat(elem2);
});
});
console.log(newArray)
//console.log(newArray)
return newArray;
//console.log(route)
return [route0, route1];
}
async function createRouteObject(){
var currentime = await getCurrentTime()
var myBtn = document.createElement("p");

31
functions.js~
View File

@ -1,31 +0,0 @@
// needed for instantiation of ipfs
const initIPFS = async (IPFS, ORBITDB) => {
// Create IPFS instance
// const ipfsOptions = { repo: '/orbitdb/examples/browser/new/ipfs/0.33.1', }
//const ipfs = await Ipfs.create(ipfsOptions)
// Create OrbitDB instance
//const orbitdb = await OrbitDB.createInstance(ipfs)
}
initIPFS()
async function createDb(){
// Create database instance
// Create IPFS instance
const ipfsOptions = { repo: '/orbitdb/examples/browser/new/ipfs/0.33.1', }
const ipfs = await Ipfs.create(ipfsOptions)
const orbitdb = await OrbitDB.createInstance(ipfs)
const db = await orbitdb.keyvalue('route1')
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')
const value = db.all
console.log(value)
}
createDb()

281
index.html~
View File

@ -1,281 +0,0 @@
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"
integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"
integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
crossorigin=""></script>
<meta charset="utf-8">
<title>Track your bike</title>
</head>
<body>
<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">
<div class="d-flex flex-row">
<div class="ml-2">
<h4 class="mb-0">Route 1</h4>
<div class="about">
<span>Jan 21, 2020</span>
</div>
</div>
</div>
</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>
</div>
<div id="map"></div>
<div class="wrapper">
<div class="panel">
<div class="panel-header">
<h3 class="title">Statistics</h3>
<div class="routes">
<span>Route X</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>
<script src="example.js"></script>
<script type="text/javascript" src="lib/orbitdb.js" charset="utf-8"></script>
<script type="text/javascript" src="lib/ipfs.js" charset="utf-8"></script>
<script type="text/javascript" src="functions.js">
<!--<script src="https://unpkg.com/ipfs@0.35.0/dist/index.min.js"></script> -->
<script src="https://www.unpkg.com/orbit-db/dist/orbitdb.min.js"></script>
<script>
</script>
<script>
//const initIPFS = async (IPFS, ORBITDB) => {
// Create IPFS instance
// const ipfsOptions = { repo: '/orbitdb/examples/browser/new/ipfs/0.33.1', }
//const ipfs = await Ipfs.create(ipfsOptions)
// Create OrbitDB instance
//const orbitdb = await OrbitDB.createInstance(ipfs)
//}
//initIPFS()
// async function createDb(){
// Create database instance
// Create IPFS instance
//const ipfsOptions = { repo: '/orbitdb/examples/browser/new/ipfs/0.33.1.2', }
//const ipfs = await Ipfs.create(ipfsOptions)
//const orbitdb = await OrbitDB.createInstance(ipfs)
//const db = await orbitdb.keyvalue('first-database')
// const address = db.address
// console.log(address)
//console.log(db.address.toString())
//await db.put('timestamp', '4.9123123/-8.1231')
//const value = db.get('timestamp')
//console.log(value)
//}
initIPFS()
//createDb()
var map = L.map('map').setView([49.416075235, 8.6722049], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
zoom: 44,
attribution: '© OpenStreetMap'
}).addTo(map);
</script>
<script type="text/javascript" charset="utf-8">
// Start the example
//main()
</script>
<style> #map { height: 800px; width: 1400px; }</style>
<style>
* {
box-sizing: border-box;
}
html, body {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Roboto', sans-serif;
background: #d4d1d1;
overflow: hidden;
}
.panel {
width: 300px;
height: 400px;
background: #e68a43;
box-shadow: 1px 2px 3px 0px rgba(0,0,0,0.10);
border-radius: 6px;
overflow: hidden;
}
.panel-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 30px;
height: 60px;
background: rgb(241, 239, 239);
}
.title {
color: #5E6977;
font-weight: 500;
}
.panel-body {
display: flex;
height: 340px;
}
.categories {
display: flex;
flex-direction: column;
justify-content: space-between;
flex-basis: 25%;
padding: 39px 0px 41px 26px;
}
.category {
display: flex;
flex-direction: column;
}
.category span:first-child {
font-weight: 300;
font-size: 14px;
opacity: 0.6;
color: #fff;
margin-bottom: 6px;
}
.category span:last-child {
font-size: 32px;
font-weight: 300;
color: #fff;
}
.chart {
width: 100%;
height: 100%;
display: flex;
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;
}
</style>
<style>
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>

47
map.js
View File

@ -7,24 +7,43 @@ L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
// helper function for displayRoute()
async function prepare(){
var allcoordinates = getAllCoordinates('coordinates');
return allcoordinates;
console.log("prepare")
var route = getAllCoordinates('coordinates');
console.log(route);
return route;
}
async function displayRoute() {
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);
var currentime = await getCurrentTime()
var ul = document.getElementById("list");
var li = document.createElement("li");
li.appendChild(document.createTextNode("Last travelled route on: " +currentime+""));
//color array
let color = ["blue","red","green","purple","gray","yellow"];
var i = 0;
let current_route = await prepare();
console.log("after prepare");
console.log(current_route);
console.log("Current_route");
console.log(current_route);
const current_route0 = current_route[0];
const current_route1 = current_route[1];
console.log("Route 0");
console.log(current_route0);
console.log("Route 1");
console.log(current_route1);
//var marker = L.marker([49.41607523,8.67220049]).addTo(map);
polyline0 = L.polyline(current_route0, {color: color[i]}).addTo(map);
polyline1 = L.polyline(current_route1, {color: color[i+1]}).addTo(map);
var currentime = await getCurrentTime();
// does stuff ??
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
//important for maps
map.fitBounds(polyline0.getBounds());
map.fitBounds(polyline0.getBounds());
map.fitBounds(polyline1.getBounds());
map.fitBounds(polyline1.getBounds());
return currentime;
}
async function showBike(){

87
new.csv~
View File

@ -1,87 +0,0 @@
time,lat,lon
2022-07-01T10:49:07.000Z,49.41185089,8.67646861
2022-07-01T10:49:12.660Z,49.41166303,8.67652893
2022-07-01T10:49:20.000Z,49.41123636,8.67652849
2022-07-01T10:49:25.693Z,49.41084041,8.67651128
2022-07-01T10:49:31.870Z,49.41049801,8.67656948
2022-07-01T10:49:38.053Z,49.4102198,8.67658131
2022-07-01T10:49:44.222Z,49.40982577,8.67668618
2022-07-01T10:49:50.379Z,49.4095211,8.6767495
2022-07-01T10:49:59.000Z,49.40881224,8.67658343
2022-07-01T10:50:06.000Z,49.4083738,8.67664092
2022-07-01T10:50:13.000Z,49.4080936,8.676667
2022-07-01T10:50:20.000Z,49.40797358,8.67662421
2022-07-01T10:50:27.000Z,49.40791573,8.67663151
2022-07-01T10:50:32.673Z,49.40795257,8.6766228
2022-07-01T10:50:41.000Z,49.40798433,8.67665855
2022-07-01T10:50:46.645Z,49.4079701,8.67669428
2022-07-01T10:50:52.804Z,49.40799444,8.67669857
2022-07-01T10:51:01.000Z,49.40789121,8.6766631
2022-07-01T10:51:08.000Z,49.40755973,8.67658864
2022-07-01T10:51:17.000Z,49.40689473,8.67677555
2022-07-01T10:51:25.000Z,49.40620921,8.67697955
2022-07-01T10:51:33.000Z,49.40555543,8.67708163
2022-07-01T10:51:42.000Z,49.40499466,8.67692979
2022-07-01T10:51:47.669Z,49.40458895,8.67694948
2022-07-01T10:51:53.840Z,49.40416906,8.67702318
2022-07-01T10:52:00.005Z,49.40382355,8.67724113
2022-07-01T10:52:06.176Z,49.40350553,8.67751751
2022-07-01T10:52:12.341Z,49.40314888,8.67785638
2022-07-01T10:52:18.508Z,49.40273859,8.67812989
2022-07-01T10:52:24.674Z,49.40232416,8.67848992
2022-07-01T10:52:30.833Z,49.40220921,8.67911913
2022-07-01T10:52:36.988Z,49.40197856,8.67962545
2022-07-01T10:52:45.000Z,49.40163851,8.68023891
2022-07-01T10:52:50.662Z,49.40129879,8.68054592
2022-07-01T10:53:07.000Z,49.40050412,8.68132096
2022-07-01T10:53:12.700Z,49.40034406,8.68167395
2022-07-01T10:53:20.000Z,49.40029889,8.68197948
2022-07-01T10:53:27.000Z,49.4000934,8.68233753
2022-07-01T10:53:34.000Z,49.39977873,8.68282787
2022-07-01T10:53:39.676Z,49.39954051,8.68310713
2022-07-01T10:53:45.836Z,49.39926802,8.68338566
2022-07-01T10:53:52.006Z,49.39909119,8.68379701
2022-07-01T10:54:00.000Z,49.39877088,8.68459149
2022-07-01T10:54:05.692Z,49.39865451,8.68498273
2022-07-01T10:54:13.000Z,49.39838235,8.68510378
2022-07-01T10:54:20.000Z,49.39808397,8.6851097
2022-07-01T10:54:25.684Z,49.39778037,8.68529797
2022-07-01T10:54:33.000Z,49.39735536,8.6855275
2022-07-01T10:54:40.000Z,49.39701056,8.68558536
2022-07-01T10:54:49.000Z,49.39683103,8.6859003
2022-07-01T10:54:56.000Z,49.39672644,8.68651683
2022-07-01T10:55:03.000Z,49.3964463,8.68696265
2022-07-01T10:55:12.000Z,49.39620133,8.68741868
2022-07-01T10:55:19.000Z,49.39597341,8.6874125
2022-07-01T10:55:29.000Z,49.39537879,8.68760769
2022-07-01T10:55:37.000Z,49.3949609,8.68750202
2022-07-01T10:55:48.000Z,49.39423945,8.6877149
2022-07-01T10:55:55.000Z,49.39378364,8.68773376
2022-07-01T10:56:03.000Z,49.39340213,8.68778782
2022-07-01T10:56:10.000Z,49.39303098,8.68791288
2022-07-01T10:56:15.653Z,49.39268479,8.68795369
2022-07-01T10:56:21.852Z,49.39248838,8.68813889
2022-07-01T10:56:28.021Z,49.3921367,8.68808023
2022-07-01T10:56:34.192Z,49.39168962,8.68813309
2022-07-01T10:56:43.000Z,49.39117231,8.68814905
2022-07-01T10:56:50.000Z,49.39076199,8.68818273
2022-07-01T10:56:59.000Z,49.39058452,8.68776805
2022-07-01T10:57:04.656Z,49.39048152,8.68746322
2022-07-01T10:57:10.827Z,49.39009475,8.68742468
2022-07-01T10:57:18.000Z,49.38966856,8.68741891
2022-07-01T10:57:26.000Z,49.3896966,8.68683682
2022-07-01T10:57:34.000Z,49.38985798,8.68647962
2022-07-01T11:00:12.000Z,49.38983544,8.68654936
2022-07-01T11:00:19.000Z,49.38982943,8.68686349
2022-07-01T11:00:24.649Z,49.38988557,8.68711804
2022-07-01T11:00:32.000Z,49.38975355,8.68742027
2022-07-01T11:00:39.000Z,49.38968475,8.68789061
2022-07-01T11:00:47.000Z,49.38968741,8.68864464
2022-07-01T11:00:56.000Z,49.38981096,8.68935897
2022-07-01T11:01:03.000Z,49.38991498,8.6898232
2022-07-01T11:01:13.000Z,49.39008687,8.69005123
2022-07-01T11:01:20.000Z,49.39012705,8.69004198
2022-07-01T11:01:42.000Z,49.39012273,8.69044973
2022-07-01T11:03:13.000Z,49.39020013,8.69013153
2022-07-01T11:03:37.000Z,49.3902416,8.69011779
2022-07-01T11:06:03.000Z,49.39010871,8.68987621
Write Preview
Loading…
Cancel
Save