From 8c56dd8ec12311035dc6490ec1707ecfe84ce1d5 Mon Sep 17 00:00:00 2001 From: overflowerror Date: Sat, 3 Aug 2024 21:52:58 +0200 Subject: [PATCH] feat: Add sorting options for results table --- html/fonts/fontawesome/css/.gitignore | 1 + html/fonts/fontawesome/fonts/.gitignore | 1 + html/results/index.php | 32 +++++++++++++++++---- html/styles/main.css | 7 ++++- resources/js/package-lock.json | 9 ++++++ resources/js/package.json | 4 ++- view/fragments/mobList.php | 38 +++++++++++++++++++++---- view/fragments/mobListItem.php | 13 ++++++--- view/layout.php | 1 + 9 files changed, 88 insertions(+), 18 deletions(-) create mode 100644 html/fonts/fontawesome/css/.gitignore create mode 100644 html/fonts/fontawesome/fonts/.gitignore diff --git a/html/fonts/fontawesome/css/.gitignore b/html/fonts/fontawesome/css/.gitignore new file mode 100644 index 0000000..f59ec20 --- /dev/null +++ b/html/fonts/fontawesome/css/.gitignore @@ -0,0 +1 @@ +* \ No newline at end of file diff --git a/html/fonts/fontawesome/fonts/.gitignore b/html/fonts/fontawesome/fonts/.gitignore new file mode 100644 index 0000000..f59ec20 --- /dev/null +++ b/html/fonts/fontawesome/fonts/.gitignore @@ -0,0 +1 @@ +* \ No newline at end of file diff --git a/html/results/index.php b/html/results/index.php index cabd98a..1abca42 100644 --- a/html/results/index.php +++ b/html/results/index.php @@ -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) { - require __DIR__ . '/../../view/pages/results.php'; -}; +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'; \ No newline at end of file + require_once __DIR__ . '/../../view/layout.php'; +} \ No newline at end of file diff --git a/html/styles/main.css b/html/styles/main.css index 02ec7bb..6d2e67b 100644 --- a/html/styles/main.css +++ b/html/styles/main.css @@ -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; } diff --git a/resources/js/package-lock.json b/resources/js/package-lock.json index 7bd821c..039d6d4 100644 --- a/resources/js/package-lock.json +++ b/resources/js/package-lock.json @@ -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", diff --git a/resources/js/package.json b/resources/js/package.json index 53bb30b..0bdc0d1 100644 --- a/resources/js/package.json +++ b/resources/js/package.json @@ -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": { diff --git a/view/fragments/mobList.php b/view/fragments/mobList.php index cd6428c..1d576a5 100644 --- a/view/fragments/mobList.php +++ b/view/fragments/mobList.php @@ -1,29 +1,55 @@ + + + +
- Position + Position - Name + Name - Rating + Rating - Matches + Matches - Wins + Wins - Losses + Losses Trend diff --git a/view/fragments/mobListItem.php b/view/fragments/mobListItem.php index 4c58e35..b8eec09 100644 --- a/view/fragments/mobListItem.php +++ b/view/fragments/mobListItem.php @@ -1,13 +1,16 @@
- " /> + <?= $mob[" src="/images/mobs/" /> @@ -25,7 +28,9 @@ - "> +
+ "> +