Inline page into website

1 files changed, 160 insertions, 0 deletions

diff --git a/index.html b/index.html
new file mode 100644
index 0000000..a060ad4
--- /dev/null
+++ b/index.html
@@ -0,0 +1,160 @@
+{% extends "snippets/layout.html" %}
+
+{% block title "Beats per Minute | Maximilian Möhring" %}
+
+{% block css %}
+	.main {
+		font-size: inherit !important;
+	}
+	.jumbotron {
+		background-color: inherit !important;
+		border: 1px solid grey;
+	}
+{% endblock %}
+
+{% block main %}
+<div class="container text-center">
+	<span id="countBpm">
+		<div class="jumbotron">
+			<div class="flavor-text">
+				<h1>Hier klicken um die BPMs zu zählen:</h1>
+				<em>Ist das Lied tanzbar? Was kann man dazu tanzen?</em>
+			</div>
+			<h2><span id="showBpm">0</span> BPM</h2>
+			<button class="btn btn-primary">Click</button>
+			<div class="mt-5 mb-5 container" id="showDances">
+				<div class="row mb-2" id="showDances-standard">
+				</div>
+				<div class="row mb-2" id="showDances-latein"></div>
+			</div>
+		</div>
+	</span>
+	<button id="reset" class="btn btn-secondary">Reset</button>
+
+	<div class="row">
+{% set type = "" %}
+{% for dance in dances %}
+	{% if dance.type != type %}
+		{% set type = dance.type %}
+		<div class="col-12 mt-4 mb-2"> <h2>{{ type|capitalize }}</h2> </div>
+	{% endif %}
+
+	<div class="col" id="{{ dance.name }}">
+		<h3> {{ dance.name }} </h3>
+		{{ dance.minBarspm }} bis {{ dance.maxBarspm }} Takte pM
+		<br>
+		{{ dance.minBpm }} bis {{ dance.maxBpm }} BpM
+		<br>
+		{{ dance.bar }} Takt
+	</div>
+
+{% endfor %}
+	</div>
+</div>
+
+<script>
+	var lastClick = 0;
+	var bpm = [];
+	var dances = {{ dump_dances() }};
+	var appendedDances = [];
+	var appendedHeader = [];
+	function median(values){
+		if ( values.length === 0 ) {
+			return 0;
+		}
+
+		values.sort(function(a,b){
+			return a-b;
+		});
+
+		var half = Math.floor(values.length / 2);
+
+		if (values.length % 2) {
+			return values[half];
+		}
+
+		return (values[half - 1] + values[half]) / 2.0;
+	}
+	function reset() {
+		lastClick = 0;
+		bpm = [];
+		appendedDances = [];
+		appendedHeader = [];
+		document.getElementById("showBpm").innerHTML = 0;
+		document.getElementById("showDances-standard").innerHTML = "";
+		document.getElementById("showDances-latein").innerHTML = "";
+	}
+	function getBpm(bpm) {
+		/* slice() copies by value, not by reference, so the median() doesn't mess with the array */
+		return Math.round(median(bpm.slice()));
+	}
+	function display(bpm) {
+		document.getElementById("showBpm").innerHTML = getBpm(bpm.slice());
+	}
+	window.addEventListener("load",function() {
+		document.getElementById("countBpm").addEventListener("click", function(e){
+			var d = new Date();
+			var t = d.getTime();
+			var seconds = ( t - lastClick ) / 1000;
+
+			if ( 0 != lastClick ) {
+
+				if ( seconds > 10 ) {
+					// reset after 10 seconds delay
+					reset();
+				} else {
+					var _bpm = 60 / seconds
+					bpm.push( _bpm );
+					if ( bpm.length > 25 ) {
+						// keep only last 10 clicks
+						bpm.shift();
+					}
+					display(bpm);
+				}
+
+			}
+			lastClick = t;
+
+			if ( bpm.length >= 5 ) {
+				for ( i = 0; i < dances.length; i++ ) {
+					var dance = dances[i];
+					if ( ( (dance.minBpm-3) <= getBpm(bpm) ) && ( getBpm(bpm) <= (dance.maxBpm+3) ) && -1 == appendedDances.indexOf( dance.name ) ) {
+						var danceDiv = document.createElement("div");
+						danceDiv.innerHTML = document.getElementById( dance.name ).innerHTML;
+						danceDiv.classList.add("dance-created");
+						danceDiv.classList.add("col");
+
+						if ( -1 == appendedHeader.indexOf( dance.type ) ) {
+							var danceHeader = document.createElement("div");
+							danceHeader.classList.add("col-12");
+							danceHeader.classList.add("mb-2");
+							danceHeader.classList.add("mt-4");
+							danceHeader.innerHTML = "<h3> Mögliche " + dance.type[0].toUpperCase() + dance.type.substr(1) + "-Tänze</h3>";
+							document.getElementById( "showDances-" + dance.type ).appendChild(danceHeader);
+							appendedHeader.push( dance.type );
+						}
+
+						appendedDances.push( dance.name );
+
+						document.getElementById( "showDances-" + dance.type ).appendChild(danceDiv);
+					}
+				}
+			}
+
+		});
+		document.getElementById("reset").addEventListener("click", function(e){
+			reset();
+		});
+	});
+	if ('serviceWorker' in navigator){
+		navigator.serviceWorker.register('serviceworker.js').then(function(registration){
+			console.log('ServiceWorker registration successful with scope: ', registration.scope);
+		}).catch(function(err){
+			console.log('ServiceWorker registration failed: ', err);
+		});
+	} else {
+		console.log('no service worker found. offline access is not granted.');
+	}
+
+</script>
+{% endblock %}