UEM
/
university-esports-mainz.de
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: UEM:3af92a2d0e645b1c52651ad97e030c0b466304c7
Branches Tags
UEM:main
..
compare: UEM:731f6a5a05a8cd2423ad14e16e3273bebdafaa77
Branches Tags
UEM:main

2 Commits
3af92a2d0e ... 731f6a5a05

Author SHA1 Message Date
Simon Lang 731f6a5a05 added zoom and pan to charts
5 months ago
Simon Lang 0543f78354 used month name instead of number
5 months ago
4 changed files with 49 additions and 26 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats
  1. 34
      public/elotracker/chart-integration.js
  2. 36
      public/elotracker/index.php
  3. 4
      public/elotracker/styles.css
  4. 1
      public/util/mysql_connect.php

34
public/elotracker/chart-integration.js
Unescape View File

@ -16,15 +16,30 @@ const x_scale = {
ticks: { ticks: {
callback: (value, index, ticks) => { callback: (value, index, ticks) => {
let tickdate = new Date(value); let tickdate = new Date(value);
if (index === 0) return `${tickdate.getDate()}.${tickdate.getMonth() + 1}.`; if (index === 0) return `${tickdate.getDate()}.${month_names[tickdate.getMonth()]}`;
let prev_tickdate = new Date(ticks[index-1].value); let prev_tickdate = new Date(ticks[index-1].value);
if (prev_tickdate.getDate() === tickdate.getDate()) { if (prev_tickdate.getDate() === tickdate.getDate()) {
return null; return null;
} }
return `${tickdate.getDate()}.${tickdate.getMonth() + 1}.`; return `${tickdate.getDate()}.${month_names[tickdate.getMonth()]}`;
} }
} }
} }
const zoom_plugin = {
zoom: {
wheel: {
enabled: true,
},
pinch: {
enabled: true,
},
mode: "x",
},
pan: {
enabled: true,
mode: "x",
},
}
window.onload = create_charts; window.onload = create_charts;
@ -108,7 +123,8 @@ async function create_charts() {
return context[0].dataset.label; return context[0].dataset.label;
}, },
} }
} },
zoom: zoom_plugin,
}, },
scales: { scales: {
x: x_scale, x: x_scale,
@ -142,7 +158,8 @@ async function create_charts() {
return context[0].dataset.label; return context[0].dataset.label;
}, },
} }
} },
zoom: zoom_plugin,
}, },
scales: { scales: {
x: x_scale, x: x_scale,
@ -190,7 +207,8 @@ async function create_charts() {
return context[0].dataset.label; return context[0].dataset.label;
}, },
} }
} },
zoom: zoom_plugin,
}, },
scales: { scales: {
x: x_scale, x: x_scale,
@ -286,15 +304,16 @@ function toggle_combined_chart() {
chart.classList.add("closed"); chart.classList.add("closed");
} }
} }
function toggle_leaderboard_chart() { function toggle_leaderboard_chart(event) {
if (this.classList.contains("closed")) { if (this.classList.contains("closed")) {
this.classList.remove("closed"); this.classList.remove("closed");
} else { } else {
if (event.target.nodeName === "CANVAS") return;
this.classList.add("closed"); this.classList.add("closed");
} }
} }
document.querySelectorAll("button.open-general-graph").forEach(element => element.addEventListener("click", toggle_combined_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)); document.querySelectorAll("button.leaderboard-element").forEach(element => element.addEventListener("mousedown", toggle_leaderboard_chart));
async function update_leaderboard_entries() { async function update_leaderboard_entries() {
this.disabled = true; this.disabled = true;
@ -345,6 +364,7 @@ function format_time_minsec(date) {
} }
return min + trenner + nullausgleich + date.getSeconds() + format; return min + trenner + nullausgleich + date.getSeconds() + format;
} }
const month_names = ["Jan","Feb","Mär","Apr","Mai","Jun","Jul","Aug","Sep","Okt","Nov","Dez"];
async function update_leaderboard_elements() { async function update_leaderboard_elements() {
fetch(`./leaderboard_list.php`, { fetch(`./leaderboard_list.php`, {

36
public/elotracker/index.php
Unescape View File

@ -4,27 +4,25 @@
<meta charset="utf-8"> <meta charset="utf-8">
<link href="styles.css" rel="stylesheet"> <link href="styles.css" rel="stylesheet">
<title>UEM Elo Tracker</title> <title>UEM Elo Tracker</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4/dist/chart.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@3.0/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0/hammer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@2.0/dist/chartjs-plugin-zoom.min.js"></script>
</head> </head>
<body> <body>
<?php <h1>UEM LoL Elo-Challenge</h1>
<div class='uem-logo-header'><img class='uem-logo' src='./../img/uem-logo.png' alt=''></div>
echo "<h1>UEM LoL Elo-Challenge</h1>"; <div class='leaderboard'>
echo "<div class='uem-logo-header'><img class='uem-logo' src='./../img/uem-logo.png' alt=''></div>"; <button type='button' class='update-leaderboard progress-button'>Ränge aktualisieren <?php echo file_get_contents(__DIR__."/../img/material-symbols/sync_24dp_FILL1_wght300_GRAD0_opsz24.svg")?></button>
echo "<div class='leaderboard'>"; <div class='combined-charts-buttons'>
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>"; <button type='button' id='rank-graph' class='open-general-graph'>Rang-Vergleich</button>
echo "<div class='combined-charts-buttons'> <button type='button' id='progress-graph' class='open-general-graph'>Fortschritt-Vergleich</button>
<button type='button' id='rank-graph' class='open-general-graph'>Rang-Vergleich</button> </div>
<button type='button' id='progress-graph' class='open-general-graph'>Fortschritt-Vergleich</button> <div class='graph-wrapper rank-graph closed'><canvas id="progress-chart-combined" style="width:100%;max-width:700px"></canvas></div>
</div>"; <div class='graph-wrapper progress-graph closed'><canvas id="progress-chart-combined-progress" style="width:100%;max-width:700px"></canvas></div>
echo "<div class='graph-wrapper rank-graph closed'><canvas id=\"progress-chart-combined\" style=\"width:100%;max-width:700px\"></canvas></div>"; <?php include "leaderboard_list.php"; ?>
echo "<div class='graph-wrapper progress-graph closed'><canvas id=\"progress-chart-combined-progress\" style=\"width:100%;max-width:700px\"></canvas></div>"; </div>
include "leaderboard_list.php"; <script src="chart-integration.js"></script>
echo "</div>";
?>
<script src="chart-integration.js"></script>
</body> </body>
</html> </html>

4
public/elotracker/styles.css
Unescape View File

@ -106,6 +106,10 @@ button.button-updating svg {
.leaderboard-element:hover { .leaderboard-element:hover {
background-color: #1f2931; background-color: #1f2931;
} }
.leaderboard-element:has(canvas:hover) {
background-color: transparent;
cursor: initial;
}
.leaderboard-element.place-1 { .leaderboard-element.place-1 {
border: solid 4px var(--gold-1); border: solid 4px var(--gold-1);
} }

1
public/util/mysql_connect.php
Unescape View File

@ -22,6 +22,7 @@ class MySQLConnection {
private function createConn(): void { private function createConn(): void {
$this->mysqli = new mysqli($this->host . ":" . $this->port, $this->user, $this->pass, $this->dbName); $this->mysqli = new mysqli($this->host . ":" . $this->port, $this->user, $this->pass, $this->dbName);
$this->mysqli->set_charset("utf8");
} }
public function query($sql): mysqli_result|bool { public function query($sql): mysqli_result|bool {

Write Preview
Loading…
Cancel
Save