199 lines
8.5 KiB
Svelte
199 lines
8.5 KiB
Svelte
<script>
|
|
import { _, json } from "svelte-i18n";
|
|
import Toastify from "toastify-js";
|
|
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";
|
|
$: 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;
|
|
Toastify({
|
|
text: $_('track-is-being-updated'),
|
|
duration: 500,
|
|
}).showToast();
|
|
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) => {
|
|
Toastify({
|
|
text: $_('track-was-updated'),
|
|
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
|
duration: 1000,
|
|
}).showToast();
|
|
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}
|