drop gridjs (TracksOverview Actions will need to be re-implemented)
This commit is contained in:
parent
4c81e3c432
commit
8b922309b9
GPG Key ID:
3BB9ADD52DCA4314
@ -48,7 +48,6 @@
|
|||||||
"bwip-js": "^3.4.0",
|
"bwip-js": "^3.4.0",
|
||||||
"check-password-strength": "2.0.7",
|
"check-password-strength": "2.0.7",
|
||||||
"csvtojson": "2.0.10",
|
"csvtojson": "2.0.10",
|
||||||
"gridjs": "3.4.0",
|
|
||||||
"localforage": "1.10.0",
|
"localforage": "1.10.0",
|
||||||
"marked": "4.3.0",
|
"marked": "4.3.0",
|
||||||
"svelte": "3.58.0",
|
"svelte": "3.58.0",
|
||||||
|
|||||||
3706
pnpm-lock.yaml
generated
3706
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@ -1,5 +1,4 @@
|
|||||||
<script>
|
<script>
|
||||||
import "gridjs/dist/theme/mermaid.css";
|
|
||||||
import { Route, router } from "tinro";
|
import { Route, router } from "tinro";
|
||||||
router.subscribe((routeInfo) => {
|
router.subscribe((routeInfo) => {
|
||||||
window.scrollTo(0, 0);
|
window.scrollTo(0, 0);
|
||||||
|
|||||||
@ -1,193 +0,0 @@
|
|||||||
<script>
|
|
||||||
import { _, json } from "svelte-i18n";
|
|
||||||
import TracksEmptyState from "./TracksEmptyState.svelte";
|
|
||||||
import { TrackService } from "@odit/lfk-client-js";
|
|
||||||
const tracks_promise = TrackService.trackControllerGetAll();
|
|
||||||
import { getlang } from "../base/datatable_i18n";
|
|
||||||
import { Grid, html } from "gridjs";
|
|
||||||
import { tracks as tracksstore } from "../../store.js";
|
|
||||||
import toast from "svelte-french-toast";
|
|
||||||
$: trackscache = [];
|
|
||||||
$: blocked = [];
|
|
||||||
let table;
|
|
||||||
let datatable;
|
|
||||||
let datatable_inited = false;
|
|
||||||
tracksstore.subscribe((val) => {
|
|
||||||
trackscache = val;
|
|
||||||
setTimeout(() => {
|
|
||||||
if (val.length > 0) {
|
|
||||||
renderdatatable();
|
|
||||||
}
|
|
||||||
}, 100);
|
|
||||||
});
|
|
||||||
tracks_promise.then((data) => {
|
|
||||||
tracksstore.set(data);
|
|
||||||
});
|
|
||||||
window.track__edit_cancel = () => renderdatatable();
|
|
||||||
window.track__edit_save = () => {
|
|
||||||
const trackid = parseInt(window.event.target.getAttribute("data-trackid"));
|
|
||||||
if (blocked.includes(trackid)) {
|
|
||||||
//
|
|
||||||
} else {
|
|
||||||
blocked.push(trackid);
|
|
||||||
const elem = document.querySelector(
|
|
||||||
`[data-id="triggered_table_actions_${trackid}"]`
|
|
||||||
).parentNode.parentNode.parentNode;
|
|
||||||
toast.loading($_("track-is-being-updated"));
|
|
||||||
TrackService.trackControllerPut(trackid, {
|
|
||||||
id: trackid,
|
|
||||||
name: elem.childNodes[0].childNodes[0].value,
|
|
||||||
distance: parseInt(elem.childNodes[1].childNodes[0].value),
|
|
||||||
minimumLapTime: parseInt(elem.childNodes[2].childNodes[0].value),
|
|
||||||
})
|
|
||||||
.then((r) => {
|
|
||||||
toast.dismiss();
|
|
||||||
toast.success($_("track-was-updated"));
|
|
||||||
blocked = blocked.filter((e) => e !== trackid);
|
|
||||||
document
|
|
||||||
.querySelector(`[data-id="default_table_actions_${trackid}"]`)
|
|
||||||
.classList.remove("hidden");
|
|
||||||
document
|
|
||||||
.querySelector(`[data-id="triggered_table_actions_${trackid}"]`)
|
|
||||||
.classList.add("hidden");
|
|
||||||
//
|
|
||||||
elem.childNodes[0].innerHTML = `<td data-column-id="trackName" class="gridjs-td">${elem.childNodes[0].childNodes[0].value}</td>`;
|
|
||||||
elem.childNodes[1].innerHTML = `<td data-column-id="trackName" class="gridjs-td">${elem.childNodes[1].childNodes[0].value}</td>`;
|
|
||||||
elem.childNodes[2].innerHTML = `<td data-column-id="trackName" class="gridjs-td">${elem.childNodes[2].childNodes[0].value}</td>`;
|
|
||||||
})
|
|
||||||
.catch((err) => {});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
window.track__delete_handler = () => {
|
|
||||||
const trackid = parseInt(window.event.target.getAttribute("data-trackid"));
|
|
||||||
document
|
|
||||||
.querySelector(`[data-id="default_table_actions_${trackid}"]`)
|
|
||||||
.classList.add("hidden");
|
|
||||||
document
|
|
||||||
.querySelector(`[data-id="deleteconfirmation_table_actions_${trackid}"]`)
|
|
||||||
.classList.remove("hidden");
|
|
||||||
};
|
|
||||||
window.track__delete_cancel = () => {
|
|
||||||
const trackid = parseInt(window.event.target.getAttribute("data-trackid"));
|
|
||||||
document
|
|
||||||
.querySelector(`[data-id="default_table_actions_${trackid}"]`)
|
|
||||||
.classList.remove("hidden");
|
|
||||||
document
|
|
||||||
.querySelector(`[data-id="deleteconfirmation_table_actions_${trackid}"]`)
|
|
||||||
.classList.add("hidden");
|
|
||||||
};
|
|
||||||
window.track__delete_confirm = () => {
|
|
||||||
const trackid = parseInt(window.event.target.getAttribute("data-trackid"));
|
|
||||||
TrackService.trackControllerRemove(trackid)
|
|
||||||
.then(() => {
|
|
||||||
const newStoreVal = trackscache.filter((obj) => obj.id !== trackid);
|
|
||||||
tracksstore.set(newStoreVal);
|
|
||||||
renderdatatable();
|
|
||||||
})
|
|
||||||
.catch((err) => {});
|
|
||||||
};
|
|
||||||
window.track__edit_handler = () => {
|
|
||||||
const trackid = parseInt(window.event.target.getAttribute("data-trackid"));
|
|
||||||
document
|
|
||||||
.querySelector(`[data-id="default_table_actions_${trackid}"]`)
|
|
||||||
.classList.add("hidden");
|
|
||||||
document
|
|
||||||
.querySelector(`[data-id="triggered_table_actions_${trackid}"]`)
|
|
||||||
.classList.remove("hidden");
|
|
||||||
const elem = document.querySelector(
|
|
||||||
`[data-id="triggered_table_actions_${trackid}"]`
|
|
||||||
).parentNode.parentNode.parentNode;
|
|
||||||
const trackname = elem.childNodes[0].textContent;
|
|
||||||
const tracklength = parseInt(elem.childNodes[1].textContent);
|
|
||||||
const trackmintime = parseInt(elem.childNodes[2].textContent);
|
|
||||||
elem.childNodes[0].innerHTML = `<input type="text" value="${trackname}" name="trackname" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2">`;
|
|
||||||
elem.childNodes[1].innerHTML = `<input type="text" value="${tracklength}" name="tracklength" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2">`;
|
|
||||||
elem.childNodes[2].innerHTML = `<input type="text" value="${trackmintime}" name="trackmintime" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2">`;
|
|
||||||
};
|
|
||||||
//
|
|
||||||
function renderdatatable() {
|
|
||||||
let tabledata = [];
|
|
||||||
trackscache.forEach((track) => {
|
|
||||||
tabledata.push([
|
|
||||||
track.name,
|
|
||||||
track.distance,
|
|
||||||
track.minimumLapTime || 0,
|
|
||||||
html(`
|
|
||||||
<div class="hidden" data-id="triggered_table_actions_${track.id}">
|
|
||||||
<button class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-400 text-base font-medium text-white sm:w-auto sm:text-sm" data-trackid="${
|
|
||||||
track.id
|
|
||||||
}" onclick="track__edit_save()">${$_("save")}</button>
|
|
||||||
<button class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-500 text-base font-medium text-white sm:w-auto sm:text-sm" data-trackid="${
|
|
||||||
track.id
|
|
||||||
}" onclick="track__edit_cancel()">${$_("cancel")}</button>
|
|
||||||
</div>
|
|
||||||
<div data-id="default_table_actions_${track.id}">
|
|
||||||
<button class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-400 text-base font-medium text-white sm:w-auto sm:text-sm" data-trackid="${
|
|
||||||
track.id
|
|
||||||
}" onclick="track__edit_handler()">${$_("edit")}</button>
|
|
||||||
<button class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-500 text-base font-medium text-white sm:w-auto sm:text-sm" data-trackid="${
|
|
||||||
track.id
|
|
||||||
}" onclick="track__delete_handler()">${$_("delete")}</button>
|
|
||||||
</div>
|
|
||||||
<div class="hidden" data-id="deleteconfirmation_table_actions_${
|
|
||||||
track.id
|
|
||||||
}">
|
|
||||||
<button class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-400 text-base font-medium text-white sm:w-auto sm:text-sm" data-trackid="${
|
|
||||||
track.id
|
|
||||||
}" onclick="track__delete_cancel()">${$_("cancel")}</button>
|
|
||||||
<button class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-500 text-base font-medium text-white sm:w-auto sm:text-sm" data-trackid="${
|
|
||||||
track.id
|
|
||||||
}" onclick="track__delete_confirm()">${$_("confirm")}</button>
|
|
||||||
</div>
|
|
||||||
`),
|
|
||||||
]);
|
|
||||||
});
|
|
||||||
|
|
||||||
if (datatable_inited === false) {
|
|
||||||
datatable = new Grid({
|
|
||||||
columns: [
|
|
||||||
$_("track-name"),
|
|
||||||
$_("track-length-in-m"),
|
|
||||||
$_("minimum-lap-time-in-s"),
|
|
||||||
$_("action"),
|
|
||||||
],
|
|
||||||
language: getlang($json("datatable")),
|
|
||||||
sort: true,
|
|
||||||
search: { enabled: true },
|
|
||||||
data: tabledata,
|
|
||||||
pagination: {
|
|
||||||
enabled: true,
|
|
||||||
limit: 25,
|
|
||||||
summary: false,
|
|
||||||
},
|
|
||||||
}).render(table);
|
|
||||||
datatable_inited = true;
|
|
||||||
} else {
|
|
||||||
datatable.updateConfig({ data: tabledata }).forceRender();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
{#if trackscache.length > 0}
|
|
||||||
<div bind:this={table} />
|
|
||||||
{/if}
|
|
||||||
{#await tracks_promise}
|
|
||||||
<div
|
|
||||||
class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
|
|
||||||
role="alert"
|
|
||||||
>
|
|
||||||
<p class="font-bold">{$_("track-data-is-being-loaded")}</p>
|
|
||||||
<p class="text-sm">{$_("this-might-take-a-moment")}</p>
|
|
||||||
</div>
|
|
||||||
{:then}
|
|
||||||
{#if trackscache.length === 0}
|
|
||||||
<TracksEmptyState />
|
|
||||||
{/if}
|
|
||||||
{:catch error}
|
|
||||||
<div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
|
|
||||||
<span class="inline-block align-middle mr-8">
|
|
||||||
<b class="capitalize">{$_("general_promise_error")}</b>
|
|
||||||
{error}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
{/await}
|
|
||||||
@ -2,7 +2,18 @@
|
|||||||
import { _ } from "svelte-i18n";
|
import { _ } from "svelte-i18n";
|
||||||
import AddTrackModal from "./AddTrackModal.svelte";
|
import AddTrackModal from "./AddTrackModal.svelte";
|
||||||
let modal_open = false;
|
let modal_open = false;
|
||||||
import Tracks from "./Tracks.svelte";
|
import TracksEmptyState from "./TracksEmptyState.svelte";
|
||||||
|
import { TrackService } from "@odit/lfk-client-js";
|
||||||
|
const tracks_promise = TrackService.trackControllerGetAll();
|
||||||
|
import { tracks as tracksstore } from "../../store.js";
|
||||||
|
import toast from "svelte-french-toast";
|
||||||
|
$: trackscache = [];
|
||||||
|
tracksstore.subscribe((val) => {
|
||||||
|
trackscache = val;
|
||||||
|
});
|
||||||
|
tracks_promise.then((data) => {
|
||||||
|
tracksstore.set(data);
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<section class="container p-5">
|
<section class="container p-5">
|
||||||
@ -18,9 +29,105 @@
|
|||||||
{$_("create-track")}
|
{$_("create-track")}
|
||||||
</button>
|
</button>
|
||||||
</span>
|
</span>
|
||||||
<p class="mb-8 text-lg text-gray-500">
|
{#await tracks_promise}
|
||||||
{$_("configure-the-tracks-and-minimum-lap-times")}
|
<div
|
||||||
</p>
|
class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
|
||||||
<Tracks />
|
role="alert"
|
||||||
|
>
|
||||||
|
<p class="font-bold">{$_("track-data-is-being-loaded")}</p>
|
||||||
|
<p class="text-sm">{$_("this-might-take-a-moment")}</p>
|
||||||
|
</div>
|
||||||
|
{:then}
|
||||||
|
{#if trackscache.length === 0}
|
||||||
|
<TracksEmptyState />
|
||||||
|
{:else}
|
||||||
|
<div
|
||||||
|
class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll mt-4"
|
||||||
|
>
|
||||||
|
<table class="divide-y divide-gray-200 w-full">
|
||||||
|
<thead class="bg-gray-50">
|
||||||
|
<tr class="odd:bg-white even:bg-gray-100">
|
||||||
|
<th
|
||||||
|
scope="col"
|
||||||
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
||||||
|
>
|
||||||
|
ID
|
||||||
|
</th>
|
||||||
|
<th
|
||||||
|
scope="col"
|
||||||
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
||||||
|
>
|
||||||
|
{$_("track-name")}
|
||||||
|
</th>
|
||||||
|
<th
|
||||||
|
scope="col"
|
||||||
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
||||||
|
>
|
||||||
|
{$_("distance")}
|
||||||
|
</th>
|
||||||
|
<th
|
||||||
|
scope="col"
|
||||||
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
||||||
|
>
|
||||||
|
{$_("minimum-lap-time-in-s")}
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody class="divide-y divide-gray-200">
|
||||||
|
{#each trackscache as t}
|
||||||
|
<tr
|
||||||
|
class="odd:bg-white even:bg-gray-100"
|
||||||
|
data-rowid="station_{t.id}"
|
||||||
|
>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="ml-4">
|
||||||
|
<div class="text-sm font-medium text-gray-900">
|
||||||
|
#{t.id}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="ml-4">
|
||||||
|
<div class="text-sm font-medium text-gray-900">
|
||||||
|
{t.name}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="ml-4">
|
||||||
|
<div class="text-sm font-medium text-gray-900">
|
||||||
|
{t.distance}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="ml-4">
|
||||||
|
<div class="text-sm font-medium text-gray-900">
|
||||||
|
{t.minimumLapTime}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{/each}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
{:catch error}
|
||||||
|
<div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
|
||||||
|
<span class="inline-block align-middle mr-8">
|
||||||
|
<b class="capitalize">{$_("general_promise_error")}</b>
|
||||||
|
{error}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{/await}
|
||||||
</section>
|
</section>
|
||||||
<AddTrackModal bind:modal_open />
|
<AddTrackModal bind:modal_open />
|
||||||
|
|||||||
@ -74,7 +74,6 @@
|
|||||||
"close": "Schließen",
|
"close": "Schließen",
|
||||||
"code": "Code",
|
"code": "Code",
|
||||||
"config-codes": "Konfigurations-Codes",
|
"config-codes": "Konfigurations-Codes",
|
||||||
"configure-the-tracks-and-minimum-lap-times": "Bearbeite die Tracks und ihre minimale Rundenzeit",
|
|
||||||
"confirm": "Bestätigen",
|
"confirm": "Bestätigen",
|
||||||
"confirm-delete": "Löschung Bestätigen",
|
"confirm-delete": "Löschung Bestätigen",
|
||||||
"confirm-delete-donor-with-all-donations": "Bestätigen, Sponsor mit allen Sponsorings löschen",
|
"confirm-delete-donor-with-all-donations": "Bestätigen, Sponsor mit allen Sponsorings löschen",
|
||||||
|
|||||||
@ -74,7 +74,6 @@
|
|||||||
"close": "Close",
|
"close": "Close",
|
||||||
"code": "Code",
|
"code": "Code",
|
||||||
"config-codes": "Config codes",
|
"config-codes": "Config codes",
|
||||||
"configure-the-tracks-and-minimum-lap-times": "configure the tracks & minimum lap times",
|
|
||||||
"confirm": "Confirm",
|
"confirm": "Confirm",
|
||||||
"confirm-delete": "Confirm Delete",
|
"confirm-delete": "Confirm Delete",
|
||||||
"confirm-delete-donor-with-all-donations": "Confirm, delete donor with all donations",
|
"confirm-delete-donor-with-all-donations": "Confirm, delete donor with all donations",
|
||||||
|
|||||||
@ -1,5 +1,4 @@
|
|||||||
import "./style.css";
|
import "./style.css";
|
||||||
import "gridjs/dist/theme/mermaid.css";
|
|
||||||
import App from "./App.svelte";
|
import App from "./App.svelte";
|
||||||
|
|
||||||
const app = new App({
|
const app = new App({
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user