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
3 months ago
Simon Lang 0543f78354 used month name instead of number
3 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
Split 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: {
callback: (value, index, ticks) => {
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);
if (prev_tickdate.getDate() === tickdate.getDate()) {
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;
@ -108,7 +123,8 @@ async function create_charts() {
return context[0].dataset.label;
},
}
}
},
zoom: zoom_plugin,
},
scales: {
x: x_scale,
@ -142,7 +158,8 @@ async function create_charts() {
return context[0].dataset.label;
},
}
}
},
zoom: zoom_plugin,
},
scales: {
x: x_scale,
@ -190,7 +207,8 @@ async function create_charts() {
return context[0].dataset.label;
},
}
}
},
zoom: zoom_plugin,
},
scales: {
x: x_scale,
@ -286,15 +304,16 @@ function toggle_combined_chart() {
chart.classList.add("closed");
}
}
function toggle_leaderboard_chart() {
function toggle_leaderboard_chart(event) {
if (this.classList.contains("closed")) {
this.classList.remove("closed");
} else {
if (event.target.nodeName === "CANVAS") return;
this.classList.add("closed");
}
}
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() {
this.disabled = true;
@ -345,6 +364,7 @@ function format_time_minsec(date) {
}
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() {
fetch(`./leaderboard_list.php`, {

36
public/elotracker/index.php
Unescape View File

@ -4,27 +4,25 @@
<meta charset="utf-8">
<link href="styles.css" rel="stylesheet">
<title>UEM Elo Tracker</title>
<script src="https://cdn.jsdelivr.net/npm/chart.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/chart.js@4.4/dist/chart.umd.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>
<body>
<?php
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>
</div>";
echo "<div class='graph-wrapper rank-graph closed'><canvas id=\"progress-chart-combined\" style=\"width:100%;max-width:700px\"></canvas></div>";
echo "<div class='graph-wrapper progress-graph closed'><canvas id=\"progress-chart-combined-progress\" style=\"width:100%;max-width:700px\"></canvas></div>";
include "leaderboard_list.php";
echo "</div>";
?>
<script src="chart-integration.js"></script>
<h1>UEM LoL Elo-Challenge</h1>
<div class='uem-logo-header'><img class='uem-logo' src='./../img/uem-logo.png' alt=''></div>
<div class='leaderboard'>
<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>
<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>
</div>
<div class='graph-wrapper rank-graph closed'><canvas id="progress-chart-combined" style="width:100%;max-width:700px"></canvas></div>
<div class='graph-wrapper progress-graph closed'><canvas id="progress-chart-combined-progress" style="width:100%;max-width:700px"></canvas></div>
<?php include "leaderboard_list.php"; ?>
</div>
<script src="chart-integration.js"></script>
</body>
</html>

4
public/elotracker/styles.css
Unescape View File

@ -106,6 +106,10 @@ button.button-updating svg {
.leaderboard-element:hover {
background-color: #1f2931;
}
.leaderboard-element:has(canvas:hover) {
background-color: transparent;
cursor: initial;
}
.leaderboard-element.place-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 {
$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 {

Write Preview
Loading…
Cancel
Save