diff --git a/app/Http/Controllers/K4Ranks/RanksController.php b/app/Http/Controllers/K4Ranks/RanksController.php index 66407f4..a952310 100644 --- a/app/Http/Controllers/K4Ranks/RanksController.php +++ b/app/Http/Controllers/K4Ranks/RanksController.php @@ -24,8 +24,9 @@ public function getPlayersList(Request $request) $orderDirection = $request->input('order.0.dir'); // Start building the query - $query = Ranks::query()->with('k4stats'); + // Define the subquery for calculating rank + $query = Ranks::selectRaw('*, (SELECT COUNT(*) + 1 FROM k4ranks AS kr WHERE kr.points > k4ranks.points) AS `position`'); // Apply search filter if (!empty($searchValue)) { $query->where('steam_id', 'like', '%' . $searchValue . '%') @@ -46,6 +47,7 @@ public function getPlayersList(Request $request) $player->player_steamid = $player->steam_id; $response = CommonHelper::steamProfile($player); $formattedData[] = [ + "position" => $player->position, "name" => $player->name, "player_steamid" => $player->steam_id, "points" => $player->points, diff --git a/package-lock.json b/package-lock.json index 1a3f252..4aa74a3 100755 --- a/package-lock.json +++ b/package-lock.json @@ -12,7 +12,8 @@ "@fortawesome/fontawesome-free": "^6.5.2", "@popperjs/core": "^2.11.8", "@types/datatables.net": "^1.10.28", - "@types/jquery": "^3.5.29" + "@types/jquery": "^3.5.29", + "datatables.net-responsive": "^3.0.2" }, "devDependencies": { "alpinejs": "^3.13.10", @@ -776,6 +777,15 @@ "jquery": ">=1.7" } }, + "node_modules/datatables.net-responsive": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/datatables.net-responsive/-/datatables.net-responsive-3.0.2.tgz", + "integrity": "sha512-OVsrTfcYvT8YtnOeCef51veKc+DABVPWOypvID+xFzCgyBDCIgcauTk+H5zItOscXw/CwSIbGN9zD6Sxa7lZPA==", + "dependencies": { + "datatables.net": "^2", + "jquery": ">=1.7" + } + }, "node_modules/dayjs": { "version": "1.11.11", "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.11.tgz", diff --git a/package.json b/package.json index 4f16681..9d54562 100755 --- a/package.json +++ b/package.json @@ -6,14 +6,10 @@ "build": "vite build" }, "devDependencies": { - "autoprefixer": "^10.4.19", - "axios": "^1.6.4", - "laravel-vite-plugin": "^1.0.0", - "postcss": "^8.4.38", - "tailwindcss": "^3.4.3", - "vite": "^5.0.0", "alpinejs": "^3.13.10", "apexcharts": "^3.49.0", + "autoprefixer": "^10.4.19", + "axios": "^1.6.4", "cleave.js": "^1.6.0", "datatables.net-dt": "^2.0.2", "datatables.net-fixedcolumns": "^5.0.0", @@ -25,14 +21,18 @@ "gridjs": "^6.2.0", "highlight.js": "^11.9.0", "jquery": "^3.7.1", + "laravel-vite-plugin": "^1.0.0", + "postcss": "^8.4.38", "quill": "^2.0.1", "simplebar": "^6.2.6", "sortablejs": "^1.15.2", "swiper": "^11.1.1", + "tailwindcss": "^3.4.3", "tippy.js": "^6.3.7", "toastify-js": "^1.12.0", "tom-select": "^2.3.1", - "ts-node": "^10.9.2" + "ts-node": "^10.9.2", + "vite": "^5.0.0" }, "dependencies": { "@alpinejs/collapse": "^3.13.10", @@ -42,6 +42,7 @@ "@fortawesome/fontawesome-free": "^6.5.2", "@popperjs/core": "^2.11.8", "@types/datatables.net": "^1.10.28", - "@types/jquery": "^3.5.29" + "@types/jquery": "^3.5.29", + "datatables.net-responsive": "^3.0.2" } } diff --git a/resources/css/app.css b/resources/css/app.css index 8751f65..845a8a0 100755 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -90,9 +90,6 @@ section { .select2 { width: 100% !important; } -.dt-scroll-body .dataTable thead { - display: none; -} .action-container { width: 100px; display: flex; @@ -169,7 +166,6 @@ html { } .list-profile { display: flex; - width: 127px; } .list-profile > img { diff --git a/resources/css/datatable.css b/resources/css/datatable.css new file mode 100644 index 0000000..db5b604 --- /dev/null +++ b/resources/css/datatable.css @@ -0,0 +1,192 @@ +table.dataTable.dtr-inline.collapsed > tbody > tr > td.child, +table.dataTable.dtr-inline.collapsed > tbody > tr > th.child, +table.dataTable.dtr-inline.collapsed > tbody > tr > td.dataTables_empty { + cursor: default !important; +} +table.dataTable.dtr-inline.collapsed > tbody > tr > td.child:before, +table.dataTable.dtr-inline.collapsed > tbody > tr > th.child:before, +table.dataTable.dtr-inline.collapsed > tbody > tr > td.dataTables_empty:before { + display: none !important; +} +table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control, +table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control { + cursor: pointer; +} +table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before, +table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before { + margin-right: 0.5em; + display: inline-block; + box-sizing: border-box; + content: ""; + border-top: 5px solid transparent; + border-left: 10px solid #14a44d; + border-bottom: 5px solid transparent; + border-right: 0px solid transparent; +} +table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control.arrow-right::before, +table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control.arrow-right::before { + border-top: 5px solid transparent; + border-left: 0px solid transparent; + border-bottom: 5px solid transparent; + border-right: 10px solid #14a44d; +} +table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > td.dtr-control:before, +table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > th.dtr-control:before { + border-top: 10px solid #14a44d; + border-left: 5px solid transparent; + border-bottom: 0px solid transparent; + border-right: 5px solid transparent; +} +table.dataTable.dtr-inline.collapsed.compact > tbody > tr > td.dtr-control, +table.dataTable.dtr-inline.collapsed.compact > tbody > tr > th.dtr-control { + padding-left: 0.333em; +} +table.dataTable.dtr-column > tbody > tr > td.dtr-control, +table.dataTable.dtr-column > tbody > tr > th.dtr-control, +table.dataTable.dtr-column > tbody > tr > td.control, +table.dataTable.dtr-column > tbody > tr > th.control { + cursor: pointer; +} +table.dataTable.dtr-column > tbody > tr > td.dtr-control:before, +table.dataTable.dtr-column > tbody > tr > th.dtr-control:before, +table.dataTable.dtr-column > tbody > tr > td.control:before, +table.dataTable.dtr-column > tbody > tr > th.control:before { + display: inline-block; + box-sizing: border-box; + content: ""; + border-top: 5px solid transparent; + border-left: 10px solid rgba(0, 0, 0, 0.5); + border-bottom: 5px solid transparent; + border-right: 0px solid transparent; +} +table.dataTable.dtr-column > tbody > tr > td.dtr-control.arrow-right::before, +table.dataTable.dtr-column > tbody > tr > th.dtr-control.arrow-right::before, +table.dataTable.dtr-column > tbody > tr > td.control.arrow-right::before, +table.dataTable.dtr-column > tbody > tr > th.control.arrow-right::before { + border-top: 5px solid transparent; + border-left: 0px solid transparent; + border-bottom: 5px solid transparent; + border-right: 10px solid rgba(0, 0, 0, 0.5); +} +table.dataTable.dtr-column > tbody > tr.dtr-expanded td.dtr-control:before, +table.dataTable.dtr-column > tbody > tr.dtr-expanded th.dtr-control:before, +table.dataTable.dtr-column > tbody > tr.dtr-expanded td.control:before, +table.dataTable.dtr-column > tbody > tr.dtr-expanded th.control:before { + border-top: 10px solid rgba(0, 0, 0, 0.5); + border-left: 5px solid transparent; + border-bottom: 0px solid transparent; + border-right: 5px solid transparent; +} +table.dataTable > tbody > tr.child { + padding: 0.5em 1em; +} +table.dataTable > tbody > tr.child:hover { + background: transparent !important; +} +table.dataTable > tbody > tr.child ul.dtr-details { + display: inline-block; + list-style-type: none; + margin: 0; + padding: 0; +} +table.dataTable > tbody > tr.child ul.dtr-details > li { + border-bottom: 1px solid #efefef; + padding: 0.5em 0; +} +table.dataTable > tbody > tr.child ul.dtr-details > li:first-child { + padding-top: 0; +} +table.dataTable > tbody > tr.child ul.dtr-details > li:last-child { + padding-bottom: 0; + border-bottom: none; +} +table.dataTable > tbody > tr.child span.dtr-title { + display: inline-block; + min-width: 75px; + font-weight: bold; +} +div.dtr-modal { + position: fixed; + box-sizing: border-box; + top: 0; + left: 0; + height: 100%; + width: 100%; + z-index: 100; + padding: 10em 1em; +} +div.dtr-modal div.dtr-modal-display { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + width: 50%; + height: fit-content; + max-height: 75%; + overflow: auto; + margin: auto; + z-index: 102; + overflow: auto; + background-color: #f5f5f7; + border: 1px solid black; + border-radius: 0.5em; + box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6); +} +div.dtr-modal div.dtr-modal-content { + position: relative; + padding: 2.5em; +} +div.dtr-modal div.dtr-modal-content h2 { + margin-top: 0; +} +div.dtr-modal div.dtr-modal-close { + position: absolute; + top: 6px; + right: 6px; + width: 22px; + height: 22px; + text-align: center; + border-radius: 3px; + cursor: pointer; + z-index: 12; +} +div.dtr-modal div.dtr-modal-background { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 101; + background: rgba(0, 0, 0, 0.6); +} +@media screen and (max-width: 767px) { + div.dtr-modal div.dtr-modal-display { + width: 95%; + } +} +html.dark table.dataTable > tbody > tr > td.dtr-control:before, +html[data-bs-theme="dark"] table.dataTable > tbody > tr > td.dtr-control:before { + border-left-color: rgba(255, 255, 255, 0.5) !important; +} +html.dark table.dataTable > tbody > tr > td.dtr-control.arrow-right::before, +html[data-bs-theme="dark"] table.dataTable > tbody > tr > td.dtr-control.arrow-right::before { + border-right-color: rgba(255, 255, 255, 0.5) !important; +} +html.dark table.dataTable > tbody > tr.dtr-expanded > td.dtr-control:before, +html.dark table.dataTable > tbody > tr.dtr-expanded > th.dtr-control:before, +html[data-bs-theme="dark"] table.dataTable > tbody > tr.dtr-expanded > td.dtr-control:before, +html[data-bs-theme="dark"] table.dataTable > tbody > tr.dtr-expanded > th.dtr-control:before { + border-top-color: rgba(255, 255, 255, 0.5) !important; + border-left-color: transparent !important; + border-right-color: transparent !important; +} +html.dark table.dataTable > tbody > tr.child ul.dtr-details > li, +html[data-bs-theme="dark"] table.dataTable > tbody > tr.child ul.dtr-details > li { + border-bottom-color: rgb(64, 67, 70); +} +html.dark div.dtr-modal div.dtr-modal-display, +html[data-bs-theme="dark"] div.dtr-modal div.dtr-modal-display { + background-color: rgb(33, 37, 41); + border: 1px solid rgba(255, 255, 255, 0.15); +} diff --git a/resources/js/admin/admins.ts b/resources/js/admin/admins.ts index db95cfa..e4c6063 100755 --- a/resources/js/admin/admins.ts +++ b/resources/js/admin/admins.ts @@ -3,12 +3,6 @@ import {formatDuration, calculateProgress} from '../utility/utility'; import 'datatables.net-fixedcolumns' const dataTable = new DataTable("#adminsList", { - fixedColumns: { - start: 0, - end: 3, - }, - scrollX: true, - scrollY: "800px", "processing": true, "serverSide": true, "ajax": { diff --git a/resources/js/bans/bans.ts b/resources/js/bans/bans.ts index a75f0f1..c713e56 100755 --- a/resources/js/bans/bans.ts +++ b/resources/js/bans/bans.ts @@ -1,19 +1,12 @@ import DataTable from 'datatables.net-dt'; import {formatDuration, calculateProgress} from '../utility/utility'; -import 'datatables.net-fixedcolumns' +import 'datatables.net-fixedcolumns'; +import 'datatables.net-responsive'; let dataTable = null; function loadBans() { - const fixedColumnsConfig = window.innerWidth > 768 ? { - fixedColumns: { - leftColumns: 0, // Number of columns to fix on the left - rightColumns: 3 // Number of columns to fix on the right - } - } : {}; dataTable = new DataTable("#bansList", { - ...fixedColumnsConfig, "processing": true, - scrollX: true, - scrollY: "800px", + responsive: true, "serverSide": true, "ajax": { "url": bansListUrl, @@ -56,7 +49,7 @@ function loadBans() { {"data": "server_id"}, {"data": "status"}, { - "data": "action", "width": "200px", "render": function (data, type, row, meta) { + "data": "action", "render": function (data, type, row, meta) { return '
' + data + '
'; } }, diff --git a/resources/js/mutes/mutes.ts b/resources/js/mutes/mutes.ts index bd32a75..d302971 100755 --- a/resources/js/mutes/mutes.ts +++ b/resources/js/mutes/mutes.ts @@ -1,21 +1,13 @@ import DataTable from 'datatables.net-dt'; import {formatDuration, calculateProgress} from '../utility/utility'; import 'datatables.net-fixedcolumns' - +import 'datatables.net-responsive'; let dataTable = null; loadMutes(); function loadMutes() { - const fixedColumnsConfig = window.innerWidth > 768 ? { - fixedColumns: { - leftColumns: 0, - rightColumns: 3 - } - } : {}; dataTable = new DataTable("#mutesList", { - ...fixedColumnsConfig, - scrollX: true, - scrollY: "800px", + "responsive": true, "processing": true, "serverSide": true, "ajax": { diff --git a/resources/js/ranks/ranks.ts b/resources/js/ranks/ranks.ts index 1caba96..cfb4f2b 100644 --- a/resources/js/ranks/ranks.ts +++ b/resources/js/ranks/ranks.ts @@ -1,9 +1,11 @@ import DataTable from 'datatables.net-dt'; +import 'datatables.net-responsive'; let dataTable = null; function loadRanks() { dataTable = new DataTable("#ranksList", { "processing": true, "serverSide": true, + "responsive" : true, pageLength: 25, "ajax": { "url": ranksListUrl, @@ -18,8 +20,9 @@ function loadRanks() { 'processing': '' }, - order: [[1, 'desc']], + order: [[2, 'desc']], "columns": [ + {"data": "position"}, { "data": "name" , "render": function (data, type, row, meta) { const truncatedName = truncatePlayerName(data); diff --git a/resources/views/admin/bans/list.blade.php b/resources/views/admin/bans/list.blade.php index 0cb62dc..4d2b4af 100755 --- a/resources/views/admin/bans/list.blade.php +++ b/resources/views/admin/bans/list.blade.php @@ -30,7 +30,7 @@
-
+
diff --git a/resources/views/admin/dashboard.blade.php b/resources/views/admin/dashboard.blade.php index 89f9104..bfd0c6c 100755 --- a/resources/views/admin/dashboard.blade.php +++ b/resources/views/admin/dashboard.blade.php @@ -120,7 +120,7 @@

{{ $player->name }}

-

Last seen: {{ \Carbon\Carbon::parse($player->lastseen)->diffForHumans() }}

+

Last seen: {{ \Carbon\Carbon::parse($player->k4stats->lastseen)->diffForHumans() }}

diff --git a/resources/views/k4Ranks/list.blade.php b/resources/views/k4Ranks/list.blade.php index 1ebc76f..0b6db41 100644 --- a/resources/views/k4Ranks/list.blade.php +++ b/resources/views/k4Ranks/list.blade.php @@ -29,6 +29,7 @@
+ diff --git a/resources/views/partials/header.blade.php b/resources/views/partials/header.blade.php index d673586..cddfff6 100755 --- a/resources/views/partials/header.blade.php +++ b/resources/views/partials/header.blade.php @@ -17,4 +17,5 @@ crossorigin="anonymous"> + @vite(['resources/css/datatable.css']) diff --git a/vite.config.js b/vite.config.js index 6e167e4..d0c6e98 100755 --- a/vite.config.js +++ b/vite.config.js @@ -28,7 +28,8 @@ export default defineConfig({ 'resources/js/groups/groups.ts', 'resources/js/groups/list.ts', 'resources/js/groups/edit.ts', - 'resources/js/ranks/ranks.ts' + 'resources/js/ranks/ranks.ts', + 'resources/css/datatable.css' ], refresh: true, }),
Position Player CS Rating Rank