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__ . '/../../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';
|
||||||
|
}
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
9
resources/js/package-lock.json
generated
9
resources/js/package-lock.json
generated
|
@ -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",
|
||||||
|
|
|
@ -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": {
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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,
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue