feat: Add sorting options for results table

This commit is contained in:
overflowerror 2024-08-03 21:52:58 +02:00
parent 459ddcd37d
commit 8c56dd8ec1
9 changed files with 88 additions and 18 deletions

1
html/fonts/fontawesome/css/.gitignore vendored Normal file
View file

@ -0,0 +1 @@
*

View file

@ -0,0 +1 @@
*

View file

@ -3,12 +3,32 @@
require_once __DIR__ . '/../../core.php';
require_once __DIR__ . '/../../lib/rating.php';
$mobs = getMobsWithMetaData();
$validOrderColumns = [
"position",
"name",
"rating",
"matches",
"wins",
"losses"
];
$orderColumn = $_GET["order"];
if (!in_array($orderColumn, $validOrderColumns)) {
$orderColumn = "position";
}
$orderDirection = $_GET["direction"] == "desc" ? "desc" : "asc";
$mobs = getMobsWithMetaData($orderColumn, $orderDirection);
$trends = getRatingTrends();
$title = "MobMash - Results";
$content = function () use ($mobs, $trends) {
if (isset($_GET["ajax"])) {
require __DIR__ . '/../../view/fragments/mobList.php';
} else {
$title = "MobMash - Results";
$content = function () use ($mobs, $trends) {
require __DIR__ . '/../../view/pages/results.php';
};
};
require_once __DIR__ . '/../../view/layout.php';
require_once __DIR__ . '/../../view/layout.php';
}

View file

@ -104,7 +104,12 @@ h1 {
margin-left: 2.5vw;
}
.results-list img, .results-list canvas {
.results-list img {
height: 100px;
}
.results-list .trend-container {
width: 400px;
height: 100px;
}

View file

@ -10,6 +10,7 @@
"license": "MIT",
"dependencies": {
"chart.js": "^4.4.3",
"font-awesome": "^4.7.0",
"htmx.org": "^2.0.1"
},
"devDependencies": {
@ -455,6 +456,14 @@
"@esbuild/win32-x64": "0.23.0"
}
},
"node_modules/font-awesome": {
"version": "4.7.0",
"resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
"integrity": "sha512-U6kGnykA/6bFmg1M/oT9EkFeIYv7JlX3bozwQJWiiLz6L0w3F5vBVPxHlwyX/vtNq1ckcpRKOB9f2Qal/VtFpg==",
"engines": {
"node": ">=0.10.3"
}
},
"node_modules/htmx.org": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/htmx.org/-/htmx.org-2.0.1.tgz",

View file

@ -4,13 +4,15 @@
"description": "",
"main": "index.js",
"scripts": {
"build": "esbuild index.js --bundle --outfile=../../html/js/bundle.js",
"build": "esbuild index.js --bundle --outfile=../../html/js/bundle.js && npm run install-fontawesome",
"install-fontawesome": "cp ./node_modules/font-awesome/fonts/* ../../html/fonts/fontawesome/fonts/ && cp ./node_modules/font-awesome/css/font-awesome.css ../../html/fonts/fontawesome/css/",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "MIT",
"dependencies": {
"chart.js": "^4.4.3",
"font-awesome": "^4.7.0",
"htmx.org": "^2.0.1"
},
"devDependencies": {

View file

@ -1,29 +1,55 @@
<?php
$mobs ??= [];
function makeSortButton(string $field): void {
global $orderColumn, $orderDirection;
$icon = "fa-sort";
$direction = "desc";
if ($field == $orderColumn) {
if ($orderDirection == "desc") {
$direction = "asc";
$icon = "fa-sort-up";
} else {
$icon = "fa-sort-down";
}
}
?>
<a href="?order=<?= $field ?>&direction=<?= $direction ?>" onclick="return false;"
data-hx-get="?ajax&order=<?= $field ?>&direction=<?= $direction ?>"
data-hx-target=".results-list" data-hx-swap="outerHTML"
>
<i class="fa <?= $icon ?>"></i>
</a>
<?php
}
?>
<table class="results-list">
<thead>
<tr>
<th>
Position
Position <?php makeSortButton("position"); ?>
</th>
<th>
<!-- image -->
</th>
<th>
Name
Name <?php makeSortButton("name"); ?>
</th>
<th>
Rating
Rating <?php makeSortButton("rating"); ?>
</th>
<th>
Matches
Matches <?php makeSortButton("matches"); ?>
</th>
<th>
Wins
Wins <?php makeSortButton("wins"); ?>
</th>
<th>
Losses
Losses <?php makeSortButton("losses"); ?>
</th>
<th>
Trend

View file

@ -1,13 +1,16 @@
<?php
$mob ??= [];
$trends ??= [];
// we need to have a request unique suffix for the trend canvas id
// - otherwise Chart.js will get confused
$uniqueSuffix = intval(microtime(true) * 1000) % 1000000;
?>
<tr>
<td>
<?= $mob["position"] ?>
</td>
<td>
<img src="/images/mobs/<?= $mob["image"] ?>" />
<img alt="<?= $mob["name"] ?>" src="/images/mobs/<?= $mob["image"] ?>" />
</td>
<td>
<?= $mob["name"] ?>
@ -25,7 +28,9 @@
<?= $mob["losses"] ?>
</td>
<td>
<canvas id="trend-<?= $mob["id"] ?>"></canvas>
<div class="trend-container">
<canvas id="trend-<?= $mob["id"] . $uniqueSuffix ?>"></canvas>
</div>
<script>
(function() {
const dates = JSON.parse('<?=
@ -34,7 +39,7 @@
const ratings = JSON.parse('<?=
json_encode(array_map(fn($datapoint) => doubleval($datapoint["rating"]), $trends[$mob["id"]]))
?>');
new Chart("trend-<?= $mob["id"] ?>", {
new Chart("trend-<?= $mob["id"] . $uniqueSuffix ?>", {
type: "line",
data: {
labels: dates,
@ -51,7 +56,7 @@
display: false,
},
},
aspectRatio: 5,
maintainAspectRatio: false,
animation: false,
}
});

View file

@ -4,6 +4,7 @@
<title><?= $title ?? ""; ?></title>
<link rel="stylesheet" type="text/css" href="/styles/main.css" />
<link rel="stylesheet" type="text/css" href="/styles/fonts.css" />
<link rel="stylesheet" type="text/css" href="/fonts/fontawesome/css/font-awesome.css" />
<script type="application/javascript" src="/js/bundle.js"></script>
</head>
<body>