added Update-Button

public/elotracker/chart-integration.js

@@ -276,3 +276,52 @@ function toggle_leaderboard_chart() {
 }
 document.querySelectorAll("button.open-general-graph").forEach(element => element.addEventListener("click", toggle_combined_chart));
 document.querySelectorAll("button.leaderboard-element").forEach(element => element.addEventListener("click", toggle_leaderboard_chart));
+
+async function update_leaderboard() {
+	this.disabled = true;
+	this.classList.add("button-updating")
+	let eventSource = new EventSource("./update.php");
+	eventSource.addEventListener("progress", e => {
+		this.style.setProperty("--button-loading-bar-width", `${e.data*100}%`);
+	})
+	eventSource.addEventListener("forbidden", e => {
+		const currenttime = new Date();
+		const updatetime = new Date(e.data);
+		let timediff = new Date(currenttime - updatetime);
+		let resttime = new Date(600000 - (currenttime - updatetime));
+		window.alert(`Das letzte Update wurde vor ${format_time_minsec(timediff)} durchgeführt. Versuche es in ${format_time_minsec(resttime)} noch einmal`);
+		reset_button(this);
+		eventSource.close();
+	})
+	eventSource.onerror = e => {
+		window.alert(`Beim Update ist ein Fehler aufgetreten. Versuche es später noch einmal`)
+		reset_button(this);
+		eventSource.close();
+	}
+	eventSource.addEventListener("done", e => {
+		reset_button(this);
+		eventSource.close();
+	})
+	function reset_button(button) {
+		button.disabled = false;
+		button.style.setProperty("--button-loading-bar-width", `0`);
+		button.classList.remove("button-updating");
+	}
+}
+
+document.querySelector("button.update-leaderboard").addEventListener("click", update_leaderboard);
+
+function format_time_minsec(date) {
+	let format, trenner = "", min = "", nullausgleich = "";
+	if (date.getMinutes() === 0) {
+		format = " Sekunden";
+	} else {
+		min = date.getMinutes();
+		format = " Minuten";
+		trenner = ":";
+		if (date.getSeconds() < 10) {
+			nullausgleich = "0";
+		}
+	}
+	return min + trenner + nullausgleich + date.getSeconds() + format;
+}

public/elotracker/index.php

@@ -18,6 +18,7 @@ $latest_patch = json_decode(file_get_contents("https://ddragon.leagueoflegends.c
 echo "<h1>UEM LoL Elo-Challenge</h1>";
 echo "<div class='uem-logo-header'><img class='uem-logo' src='./../img/uem-logo.png' alt=''></div>";
 echo "<div class='leaderboard'>";
+echo "<button type='button' class='update-leaderboard progress-button'>Ränge aktualisieren ".file_get_contents(__DIR__."/../img/material-symbols/sync_24dp_FILL1_wght300_GRAD0_opsz24.svg")."</button>";
 echo "<div class='combined-charts-buttons'>
         <button type='button' id='rank-graph' class='open-general-graph'>Rang-Vergleich</button>
         <button type='button' id='progress-graph' class='open-general-graph'>Fortschritt-Vergleich</button>

public/elotracker/styles.css

@@ -20,12 +20,17 @@ h1 {
 button {
 	background: none;
 	color: inherit;
-	border: none;
-	padding: 0;
+	border: solid 2px #68a8cc;
+	border-radius: 12px;
+	padding: 16px 24px;
 	font: inherit;
 	cursor: pointer;
 	outline: inherit;
 	text-align: unset;
+	transition: background-color 200ms ease-out;
+}
+button:hover {
+	background-color: #1f2931;
 }
 button[disabled] {
 	cursor: initial;
@@ -44,14 +49,34 @@ img.uem-logo {
 	height: 120px;
 }
 
-button.open-general-graph {
-	border: solid 2px #68a8cc;
-	border-radius: 12px;
-	padding: 16px 24px;
-	transition: background-color 200ms ease-out;
+button.update-leaderboard {
+	display: flex;
+	flex-direction: row;
+	gap: 4px;
+	align-items: center;
+	margin-bottom: 8px;
 }
-button.open-general-graph:hover {
-	background-color: #1f2931;
+button.progress-button {
+	position: relative;
+	overflow: hidden;
+	--button-loading-bar-width: 0;
+}
+button.progress-button::before {
+	content: '';
+	position: absolute;
+	width: var(--button-loading-bar-width);
+	height: 100%;
+	left: 0;
+	background-color: #294c87;
+	border-radius: 10px;
+	transition: width 400ms ease-out;
+	z-index: -1;
+}
+button.button-updating svg {
+	animation: ease_rotating 2s infinite;
+}
+@keyframes ease_rotating {
+	to { transform: rotate(-360deg)}
 }
 
 .leaderboard {
@@ -76,7 +101,7 @@ button.open-general-graph:hover {
 	border: solid 4px #6a818f;
 	border-radius: 20px;
 	padding: 16px 16px 16px 36px;
-	transition: background-color 200ms ease-out;
+	transition: background-color 200ms ease;
 }
 .leaderboard-element:hover {
 	background-color: #1f2931;

public/img/material-symbols/sync_24dp_FILL1_wght300_GRAD0_opsz24.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M173.08-173.08v-60H290l-29.08-27.84q-47.46-47.47-69.19-103.04Q170-419.54 170-477.23q0-103.69 60.73-185.96Q291.46-745.46 390-776.15v63.23q-72.39 28.3-116.19 92.73Q230-555.77 230-477.23q0 46.92 17.77 91.15 17.77 44.23 55.31 81.77l25.38 25.39v-109.54h60v215.38H173.08ZM570-183.85v-63.23q72.39-28.3 116.19-92.73Q730-404.23 730-482.77q0-46.92-17.77-91.15-17.77-44.23-55.31-81.77l-25.38-25.39v109.54h-60v-215.38h215.38v60H670l29.08 27.84q47.46 47.47 69.19 103.04Q790-540.46 790-482.77q0 103.69-60.73 185.96Q668.54-214.54 570-183.85Z"/></svg>

public/index.php

@@ -4,25 +4,6 @@
 	<meta charset="utf-8">
 	<link href="styles.css" rel="stylesheet">
 	<title>University eSports Mainz</title>
-	<script>
-		let eventSource = new EventSource("elotracker/update.php");
-		eventSource.onopen = evt => console.log("Open: ", evt);
-		eventSource.addEventListener("progress", evt => {
-			console.log("Progress: ", evt.data);
-		})
-		eventSource.addEventListener("forbidden", evt => {
-			console.log("Forbidden: ", evt.data);
-			eventSource.close();
-		})
-		eventSource.onerror = evt => {
-			console.log("Error: ", evt);
-			eventSource.close();
-		}
-		eventSource.addEventListener("done", evt => {
-			console.log("done: ", evt);
-			eventSource.close();
-		})
-	</script>
 </head>
 <body>
 <a href="elotracker">Zum Elo Tracker</a>