shows rec which pizza is best value for money.

1 files changed, 59 insertions, 11 deletions

diff --git a/index.html b/index.html
index 6da5d91..a8ef5c1 100644
--- a/index.html
+++ b/index.html
@@ -100,7 +100,7 @@
 		</div>
 	</form>
 
-	<div id="rec">
+	<div id="rec" class="alert alert-info hidden">
 	</div>
 	<div id="result" class="hidden">
 		<table class="table table-striped table-responsive-sm">
@@ -121,14 +121,14 @@
 			<tbody>
 				<tr>
 					<th>
-						Flächeninhalt inklusive Rand:
+						Flächeninhalt<span class="Rand"> inklusive Rand</span>:
 					</th>
 					<td id="flächeninhalt1">
 					</td>
 					<td id="flächeninhalt2">
 					</td>
 				</tr>
-				<tr>
+				<tr class="Rand">
 					<th>
 						Flächeninhalt ohne Rand (nur Pizzabelag):
 					</th>
@@ -193,6 +193,10 @@
 				</tr>
 			</tbody>
 		</table>
+
+		<div id="keinenRandAlert" class="hidden alert" style="padding-left: 0;">
+			<em>Für genauere Angaben gib einen geschätzen Rand an.</em>
+		</div>
 	</div>
 
 	<br>
@@ -207,6 +211,9 @@
 
 	<script>
 	var hatKeinenRand = true;
+	var bestRatioMitRand = [];
+	var bestRatio = [];
+	var rec = "";
 	function calc(id) {
 			d = document.getElementById('d' + id).value.replace(",", ".");
 			p = document.getElementById('p' + id).value.replace(",", ".");
@@ -227,8 +234,10 @@
 			document.getElementById('nurRand' + id).innerHTML =  frpp.toFixed(2) + " cm²";
 
 			document.getElementById('verhältnis' + id).innerHTML =  "1 : " + v.toFixed(2);
+			bestRatio.push(v.toFixed(2));
 
 			document.getElementById('kostenVerhältnisMitRand' + id).innerHTML =  fp.toFixed(2) + " <math><mfrac><mi>cm²</mi><mi>€</mi></math><!-- <br><br> (entspricht " + pf.toFixed(2) + " <math><mfrac><mi>€</mi><mi>cm²</mi></math>)-->";
+			bestRatioMitRand.push(fp.toFixed(2));
 			document.getElementById('kostenVerhältnisOhneRand' + id).innerHTML =  frp.toFixed(2) + " <math><mfrac><mi>cm²</mi><mi>€</mi></math><!-- <br><br> (entspricht " + pf.toFixed(2) + " <math><mfrac><mi>€</mi><mi>cm²</mi></math>)-->";
 
 			document.getElementById('kostenOhneRand' + id).innerHTML =  fpr.toFixed(2) + " €";
@@ -243,14 +252,13 @@
 			}
 
 	};
-	function clicked() {
+	function clicked(both = false) {
 			document.getElementById('result').classList.remove("hidden");
 			document.getElementById('pizza-wrap').classList.remove("hidden");
 			calc("1");
-
-			document.getElementById('result').scrollIntoView({
-				behavior: 'smooth'
-			});
+			if( both ) {
+				calc("2");
+			}
 
 			if ( hatKeinenRand ) {
 				// Keinen Rand angegeben, muss also auch nicht angezeigt werden
@@ -264,7 +272,48 @@
 				});
 			}
 
-			hatKeinenRand = true; // back to default
+			if ( bestRatioMitRand.length > 1 && bestRatioMitRand[0] != bestRatioMitRand[1] ) {
+				if ( bestRatioMitRand[0] > bestRatioMitRand[1] ) {
+					rec = "Das beste Preis-Leistungs-Verhältnis hat <strong>Pizza 1</strong>.";
+				} else {
+					rec = "Das beste Preis-Leistungs-Verhältnis hat <strong>Pizza 2</strong>.";
+				}
+
+				if ( ! hatKeinenRand && bestRatio[0] != bestRatio[1] ) {
+					if ( bestRatio[0] > bestRatio[1] ) {
+						rec = rec + " Das beste Verhältnis zwischen Rand und Belag hat <strong>Pizza 1</strong>.";
+					} else {
+						rec = rec + " Das beste Verhältnis zwischen Rand und Belag hat <strong>Pizza 2</strong>.";
+					}
+				}
+			}
+
+			if ( "" != rec ) {
+				// Zeig Empfehlung an
+				document.getElementById('rec').classList.remove("hidden");
+				document.getElementById('rec').innerHTML = rec;
+
+				// Scrolle zur korrekten Stelle
+				document.getElementById('rec').scrollIntoView({
+					behavior: 'smooth'
+				});
+			} else {
+				// Scrolle zur korrekten Stelle, wenn keine Rec angezeigt wird
+				document.getElementById('result').scrollIntoView({
+					behavior: 'smooth'
+				});
+			}
+
+			if ( hatKeinenRand ) {
+				document.getElementById('keinenRandAlert').classList.remove("hidden");
+			} else {
+				document.getElementById('keinenRandAlert').classList.add("hidden");
+			}
+
+			// back to default
+			bestRatio = [];
+			bestRatioMitRand = [];
+			hatKeinenRand = true;
 	};
 	window.addEventListener("load",function() {
 		document.getElementById('preis').addEventListener("submit",function(e) {
@@ -283,8 +332,7 @@
 			document.getElementById('pizza-head-2').classList.remove("hidden");
 			document.getElementById('pizza2').classList.remove("hidden");
 
-			calc("2");
-			clicked();
+			clicked(true);
 		});
 	});
 	</script>