Initial commit

Lts/Tools/JustusTimeline/index.html

@@ -0,0 +1,148 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Quick Start - Leaflet</title>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+		<link rel="stylesheet" href="../include/leaflet/leaflet.css" />
+		<script src="../include/leaflet/leaflet.js"></script>
+		<script src="../include/leaflet/gpx/gpx.js"></script>
+		<script src="./js/GPXParser.js"></script>
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
+		<link rel="stylesheet" href="style.css">
+	</head>
+
+	<body>
+		<div>
+			<div>
+				<div class="contenta">
+					<h1>Participant Timeline</h1>
+				</div>
+				<ul class="list-unstyled">
+					<div class= "contenta">
+						<form action="Salchau/" method="POST" enctype="multipart/form-data">
+							<label for="fileupload">Wähle eine Datei aus:</label>
+							<input type="file" id="fileupload" name="fileupload">
+							<input type="submit" value="Datei hochladen">
+						</form>
+						<button id="clear">Clear</button>
+						<select name="ddParticipants" id="ddParticipants">
+							<option value="">Track</option>
+							<option value="">Waypoints</option>
+							<option value="">Beides</option>
+						</select>
+					</div>
+				</ul>
+				<div class="map-content">
+					<div class="contenta" id="map" style="height: 890px;width: 90% ;">
+				</div>
+			</div>
+		</div>
+	<script>
+		var mymap = L.map('map').setView([53.052797857017,8.89316441712249], 20); //52.487646, 11.610097
+
+		L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+			maxZoom: 22,
+			maxNativeZoom: 19,
+			attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+		}).addTo(mymap);
+
+	//var gpx = 'mtb/OutputToolThorsten.gpx';
+	var gpx = 'Salchau/excon_999_BT_575_ohne_IPS_Empfang.gpx'; // excon_999_BT_575_ohne_IPS_Empfang.gpxmydata.gpx
+	new L.GPX(gpx, {async: true}).on('loaded', function(e) {
+	mymap.fitBounds(e.target.getBounds());
+	}).addTo(mymap);
+
+	const xmlDoc = 'Datei';
+	const points = xmlDoc.getElemantByTagName('trkpt');
+	let coordinates = [];
+
+	for (let i = 0; i < point.length; i++) {
+		const lat = point[i].getAttribute('lat');
+		const lon = point[i].getAttribute('lon');
+		const time = point[i].getAttribute('time')
+		const ele = point[i].getAttribute('ele')
+		coordinates.push({lat: parseFloat(lat), lon: parseFloat(lon)});
+	}
+
+	</script>
+		<div class="contenta">
+			<h1>Timeline</h1>
+		</div>
+		<div class="content">
+			<canvas id="myChart" style="height: 500px; width:100%;max-width:100%"></canvas>
+		</div>
+
+		<script>
+			/*
+			document.getElementById('loadGpx').addEventListener('click',function(){
+
+				const gpxfile = 'Salchau/mydata.gpx';
+
+				fetch(gpxfile)
+					.then(response => {
+						if (!response.ok){
+							throw new Error('ne');
+						}
+						return response.text();
+					})
+					.then(gpxText => {
+						const parser = new DOMParser();
+
+						const xmlDoc = 'Dtatei';
+
+						const trackpoint = xmlDoc.getElemantByTagName('wpt');
+						const points = [];
+						for (let i = 0; i< point.length; i++){
+							const time = point.getElemantByTagName('time')[0];
+							points.push({time});
+						}
+
+						const gpxData = points;
+
+						dokument.getElementById('output').textContent = JSON.stringify(gpxData, null, 2);
+
+					})
+					.catch(error =>{
+						console.error('',error);
+					});
+			});
+
+			*/
+
+			const xyValues = [
+				{x:50, y:7},
+				{x:60, y:8},
+				{x:70, y:8},
+				{x:80, y:9},
+				{x:90, y:9},
+				{x:100, y:9},
+				{x:110, y:10},
+				{x:120, y:11},
+				{x:130, y:14},
+				{x:140, y:14},
+				{x:150, y:15}
+			];
+
+			new Chart("myChart", {
+				type: "scatter",
+				data: {
+				datasets: [{
+					pointRadius: 4,
+					pointBackgroundColor: "rgb(123,0,255)",
+					data: xyValues
+				}]
+				},
+				options: {
+				legend: {display: true},
+				scales: {
+					xAxes: [{ticks: {min: 0, max:800}}],
+					yAxes: [{ticks: {min: 0, max:16}}],
+				}
+				}
+			});
+		</script>
+
+	</body>
+</html>