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__ . '/../../core.php';
require_once __DIR__ . '/../../lib/rating.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(); $trends = getRatingTrends();
$title = "MobMash - Results"; if (isset($_GET["ajax"])) {
$content = function () use ($mobs, $trends) { require __DIR__ . '/../../view/fragments/mobList.php';
require __DIR__ . '/../../view/pages/results.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; margin-left: 2.5vw;
} }
.results-list img, .results-list canvas { .results-list img {
height: 100px;
}
.results-list .trend-container {
width: 400px;
height: 100px; height: 100px;
} }

View file

@ -10,6 +10,7 @@
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"chart.js": "^4.4.3", "chart.js": "^4.4.3",
"font-awesome": "^4.7.0",
"htmx.org": "^2.0.1" "htmx.org": "^2.0.1"
}, },
"devDependencies": { "devDependencies": {
@ -455,6 +456,14 @@
"@esbuild/win32-x64": "0.23.0" "@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": { "node_modules/htmx.org": {
"version": "2.0.1", "version": "2.0.1",
"resolved": "https://registry.npmjs.org/htmx.org/-/htmx.org-2.0.1.tgz", "resolved": "https://registry.npmjs.org/htmx.org/-/htmx.org-2.0.1.tgz",

View file

@ -4,13 +4,15 @@
"description": "", "description": "",
"main": "index.js", "main": "index.js",
"scripts": { "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" "test": "echo \"Error: no test specified\" && exit 1"
}, },
"author": "", "author": "",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"chart.js": "^4.4.3", "chart.js": "^4.4.3",
"font-awesome": "^4.7.0",
"htmx.org": "^2.0.1" "htmx.org": "^2.0.1"
}, },
"devDependencies": { "devDependencies": {

View file

@ -1,29 +1,55 @@
<?php <?php
$mobs ??= []; $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"> <table class="results-list">
<thead> <thead>
<tr> <tr>
<th> <th>
Position Position <?php makeSortButton("position"); ?>
</th> </th>
<th> <th>
<!-- image --> <!-- image -->
</th> </th>
<th> <th>
Name Name <?php makeSortButton("name"); ?>
</th> </th>
<th> <th>
Rating Rating <?php makeSortButton("rating"); ?>
</th> </th>
<th> <th>
Matches Matches <?php makeSortButton("matches"); ?>
</th> </th>
<th> <th>
Wins Wins <?php makeSortButton("wins"); ?>
</th> </th>
<th> <th>
Losses Losses <?php makeSortButton("losses"); ?>
</th> </th>
<th> <th>
Trend Trend

View file

@ -1,13 +1,16 @@
<?php <?php
$mob ??= []; $mob ??= [];
$trends ??= []; $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> <tr>
<td> <td>
<?= $mob["position"] ?> <?= $mob["position"] ?>
</td> </td>
<td> <td>
<img src="/images/mobs/<?= $mob["image"] ?>" /> <img alt="<?= $mob["name"] ?>" src="/images/mobs/<?= $mob["image"] ?>" />
</td> </td>
<td> <td>
<?= $mob["name"] ?> <?= $mob["name"] ?>
@ -25,7 +28,9 @@
<?= $mob["losses"] ?> <?= $mob["losses"] ?>
</td> </td>
<td> <td>
<canvas id="trend-<?= $mob["id"] ?>"></canvas> <div class="trend-container">
<canvas id="trend-<?= $mob["id"] . $uniqueSuffix ?>"></canvas>
</div>
<script> <script>
(function() { (function() {
const dates = JSON.parse('<?= const dates = JSON.parse('<?=
@ -34,7 +39,7 @@
const ratings = JSON.parse('<?= const ratings = JSON.parse('<?=
json_encode(array_map(fn($datapoint) => doubleval($datapoint["rating"]), $trends[$mob["id"]])) 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", type: "line",
data: { data: {
labels: dates, labels: dates,
@ -51,7 +56,7 @@
display: false, display: false,
}, },
}, },
aspectRatio: 5, maintainAspectRatio: false,
animation: false, animation: false,
} }
}); });

View file

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