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",
|
||||
"check-password-strength": "2.0.7",
|
||||
"csvtojson": "2.0.10",
|
||||
"gridjs": "3.4.0",
|
||||
"localforage": "1.10.0",
|
||||
"marked": "4.3.0",
|
||||
"svelte": "3.58.0",
|
||||
|
|
|
|||
3706
pnpm-lock.yaml
3706
pnpm-lock.yaml
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>
|
||||
import "gridjs/dist/theme/mermaid.css";
|
||||
import { Route, router } from "tinro";
|
||||
router.subscribe((routeInfo) => {
|
||||
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 AddTrackModal from "./AddTrackModal.svelte";
|
||||
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>
|
||||
|
||||
<section class="container p-5">
|
||||
|
|
@ -18,9 +29,105 @@
|
|||
{$_("create-track")}
|
||||
</button>
|
||||
</span>
|
||||
<p class="mb-8 text-lg text-gray-500">
|
||||
{$_("configure-the-tracks-and-minimum-lap-times")}
|
||||
</p>
|
||||
<Tracks />
|
||||
{#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 />
|
||||
{: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>
|
||||
<AddTrackModal bind:modal_open />
|
||||
|
|
|
|||
|
|
@ -74,7 +74,6 @@
|
|||
"close": "Schließen",
|
||||
"code": "Code",
|
||||
"config-codes": "Konfigurations-Codes",
|
||||
"configure-the-tracks-and-minimum-lap-times": "Bearbeite die Tracks und ihre minimale Rundenzeit",
|
||||
"confirm": "Bestätigen",
|
||||
"confirm-delete": "Löschung Bestätigen",
|
||||
"confirm-delete-donor-with-all-donations": "Bestätigen, Sponsor mit allen Sponsorings löschen",
|
||||
|
|
|
|||
|
|
@ -74,7 +74,6 @@
|
|||
"close": "Close",
|
||||
"code": "Code",
|
||||
"config-codes": "Config codes",
|
||||
"configure-the-tracks-and-minimum-lap-times": "configure the tracks & minimum lap times",
|
||||
"confirm": "Confirm",
|
||||
"confirm-delete": "Confirm Delete",
|
||||
"confirm-delete-donor-with-all-donations": "Confirm, delete donor with all donations",
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import "./style.css";
|
||||
import "gridjs/dist/theme/mermaid.css";
|
||||
import App from "./App.svelte";
|
||||
|
||||
const app = new App({
|
||||
|
|
|
|||
Loading…
Reference in New Issue