mirror of
https://github.com/sigmasternchen/mobmash.click
synced 2025-03-15 08:09:02 +00:00
feat: Add sorting options for results table
This commit is contained in:
parent
459ddcd37d
commit
8c56dd8ec1
9 changed files with 88 additions and 18 deletions
1
html/fonts/fontawesome/css/.gitignore
vendored
Normal file
1
html/fonts/fontawesome/css/.gitignore
vendored
Normal file
|
@ -0,0 +1 @@
|
|||
*
|
1
html/fonts/fontawesome/fonts/.gitignore
vendored
Normal file
1
html/fonts/fontawesome/fonts/.gitignore
vendored
Normal file
|
@ -0,0 +1 @@
|
|||
*
|
|
@ -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();
|
||||
|
||||
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';
|
||||
}
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
9
resources/js/package-lock.json
generated
9
resources/js/package-lock.json
generated
|
@ -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",
|
||||
|
|
|
@ -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": {
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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,
|
||||
}
|
||||
});
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue