formatting, full migration to svelte-french-toast
This commit is contained in:
@@ -1,195 +1,206 @@
|
||||
<script>
|
||||
import { _ } from "svelte-i18n";
|
||||
import { clickOutside } from "../base/outsideclick";
|
||||
|
||||
import {
|
||||
RunnerService,
|
||||
ScanService,
|
||||
} from "@odit/lfk-client-js";
|
||||
import Select from "svelte-select";
|
||||
import Toastify from "toastify-js";
|
||||
import { createEventDispatcher } from "svelte";
|
||||
export let modal_open;
|
||||
const getRunnerLabel = (option) =>
|
||||
option.firstname + " " + (option.middlename || "") + " " + option.lastname;
|
||||
const filterRunners = (label, filterText, option) =>
|
||||
label.toLowerCase().includes(filterText.toLowerCase()) ||
|
||||
option.value.id.toString().startsWith(filterText.toLowerCase());
|
||||
function focus(el) {
|
||||
el.focus();
|
||||
}
|
||||
const dispatch = createEventDispatcher();
|
||||
$: runner = 0;
|
||||
$: runners = [];
|
||||
RunnerService.runnerControllerGetAll().then((val) => {
|
||||
runners = val.map(r => {return {label: getRunnerLabel(r), value: r}});
|
||||
});
|
||||
$: distance_input = 0;
|
||||
$: processed_last_submit = true;
|
||||
$: is_distance_valid = distance_input > 0;
|
||||
$: createbtnenabled = is_distance_valid;
|
||||
(() => {
|
||||
document.onkeydown = (e) => {
|
||||
e = e || window.event;
|
||||
if (e.key === "Escape") {
|
||||
modal_open = false;
|
||||
}
|
||||
if (e.keyCode === 13) {
|
||||
if (createbtnenabled === true) {
|
||||
createbtnenabled = false;
|
||||
submit();
|
||||
}
|
||||
}
|
||||
};
|
||||
})();
|
||||
function submit() {
|
||||
if (processed_last_submit === true) {
|
||||
processed_last_submit = false;
|
||||
const toast = Toastify({
|
||||
text: $_('adding-scan'),
|
||||
duration: -1,
|
||||
}).showToast();
|
||||
let postdata = {
|
||||
runner,
|
||||
distance: distance_input,
|
||||
};
|
||||
ScanService.scanControllerPost(postdata)
|
||||
.then((result) => {
|
||||
runner = 0;
|
||||
distance_input = 0;
|
||||
modal_open = false;
|
||||
//
|
||||
Toastify({
|
||||
text: $_('scan-added'),
|
||||
duration: 500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
dispatch("created", { scans: [result] });
|
||||
})
|
||||
.catch((err) => {
|
||||
//
|
||||
})
|
||||
.finally(() => {
|
||||
processed_last_submit = true;
|
||||
//
|
||||
toast.hideToast();
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if modal_open}
|
||||
<div
|
||||
class="fixed z-10 inset-0 overflow-y-auto"
|
||||
|
||||
use:clickOutside
|
||||
on:click_outside={() => {
|
||||
modal_open = false;
|
||||
}}>
|
||||
<div
|
||||
class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
|
||||
<div class="fixed inset-0 transition-opacity" aria-hidden="true">
|
||||
<div
|
||||
class="absolute inset-0 bg-gray-500 opacity-75"
|
||||
data-id="modal_backdrop" />
|
||||
</div>
|
||||
<span
|
||||
class="hidden sm:inline-block sm:align-middle sm:h-screen"
|
||||
aria-hidden="true">​</span>
|
||||
<div
|
||||
class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="modal-headline">
|
||||
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
||||
<div class="sm:flex sm:items-start">
|
||||
<div
|
||||
class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
|
||||
<svg
|
||||
class="h-6 w-6 text-blue-600"
|
||||
fill="currentColor"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
height="24"><path fill="none" d="M0 0h24v24H0z" />
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M2 4h2v16H2V4zm4 0h1v16H6V4zm2 0h2v16H8V4zm3 0h2v16h-2V4zm3 0h2v16h-2V4zm3 0h1v16h-1V4zm2 0h3v16h-3V4z" /></svg>
|
||||
</div>
|
||||
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
|
||||
<h3 class="text-lg leading-6 font-medium text-gray-900">
|
||||
{$_('create-a-new-scan-fixed-only')}
|
||||
</h3>
|
||||
<div class="mt-2 mb-6">
|
||||
<p class="text-sm text-gray-500">
|
||||
{$_('please-provide-the-nessecary-information-to-create-a-new-scan')}
|
||||
</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-6 gap-6">
|
||||
<div class="col-span-6">
|
||||
<label
|
||||
for="donor"
|
||||
class="block text-sm font-medium text-gray-700">{$_('runner')}</label>
|
||||
<Select
|
||||
containerClasses="rounded-l-md 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"
|
||||
itemFilter={(label, filterText, option) => filterRunners(label, filterText, option)}
|
||||
items={runners}
|
||||
showChevron={true}
|
||||
placeholder={$_('search-for-runner-by-name-or-id')}
|
||||
noOptionsMessage={$_('no-runners-found')}
|
||||
on:select={(selectedValue) => (runner = selectedValue.detail.value.id)}
|
||||
on:clear={() => (runner = null)} />
|
||||
</div>
|
||||
<div class="col-span-6">
|
||||
<label
|
||||
for="donation_amount_eur"
|
||||
class="block text-sm font-medium text-gray-700">
|
||||
{$_('distance')}</label>
|
||||
<div class="mt-1 flex rounded-md shadow-sm">
|
||||
<input
|
||||
autocomplete="off"
|
||||
class:border-red-500={!is_distance_valid}
|
||||
class:focus:border-red-500={!is_distance_valid}
|
||||
class:focus:ring-red-500={!is_distance_valid}
|
||||
bind:value={distance_input}
|
||||
type="number"
|
||||
step="1"
|
||||
name="donation_amount_eur"
|
||||
class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 p-2"
|
||||
placeholder="400" />
|
||||
<span
|
||||
class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 text-sm">m</span>
|
||||
</div>
|
||||
{#if !is_distance_valid}
|
||||
<span
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||
{$_('the-scans-distance-must-be-greater-than-0m')}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
|
||||
<button
|
||||
disabled={!createbtnenabled}
|
||||
class:opacity-50={!createbtnenabled}
|
||||
on:click={submit}
|
||||
type="button"
|
||||
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
|
||||
{$_('create')}
|
||||
</button>
|
||||
<button
|
||||
on:click={() => {
|
||||
modal_open = false;
|
||||
}}
|
||||
type="button"
|
||||
class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
|
||||
{$_('cancel')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
<script>
|
||||
import { _ } from "svelte-i18n";
|
||||
import { clickOutside } from "../base/outsideclick";
|
||||
|
||||
import { RunnerService, ScanService } from "@odit/lfk-client-js";
|
||||
import Select from "svelte-select";
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import toast from "svelte-french-toast";
|
||||
export let modal_open;
|
||||
const getRunnerLabel = (option) =>
|
||||
option.firstname + " " + (option.middlename || "") + " " + option.lastname;
|
||||
const filterRunners = (label, filterText, option) =>
|
||||
label.toLowerCase().includes(filterText.toLowerCase()) ||
|
||||
option.value.id.toString().startsWith(filterText.toLowerCase());
|
||||
const dispatch = createEventDispatcher();
|
||||
$: runner = 0;
|
||||
$: runners = [];
|
||||
RunnerService.runnerControllerGetAll().then((val) => {
|
||||
runners = val.map((r) => {
|
||||
return { label: getRunnerLabel(r), value: r };
|
||||
});
|
||||
});
|
||||
$: distance_input = 0;
|
||||
$: processed_last_submit = true;
|
||||
$: is_distance_valid = distance_input > 0;
|
||||
$: createbtnenabled = is_distance_valid;
|
||||
(() => {
|
||||
document.onkeydown = (e) => {
|
||||
e = e || window.event;
|
||||
if (e.key === "Escape") {
|
||||
modal_open = false;
|
||||
}
|
||||
if (e.keyCode === 13) {
|
||||
if (createbtnenabled === true) {
|
||||
createbtnenabled = false;
|
||||
submit();
|
||||
}
|
||||
}
|
||||
};
|
||||
})();
|
||||
function submit() {
|
||||
if (processed_last_submit === true) {
|
||||
processed_last_submit = false;
|
||||
toast.loading($_("adding-scan"));
|
||||
let postdata = {
|
||||
runner,
|
||||
distance: distance_input,
|
||||
};
|
||||
ScanService.scanControllerPost(postdata)
|
||||
.then((result) => {
|
||||
runner = 0;
|
||||
distance_input = 0;
|
||||
modal_open = false;
|
||||
//
|
||||
toast.dismiss();
|
||||
toast.success($_("scan-added"));
|
||||
dispatch("created", { scans: [result] });
|
||||
})
|
||||
.catch((err) => {
|
||||
//
|
||||
})
|
||||
.finally(() => {
|
||||
processed_last_submit = true;
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if modal_open}
|
||||
<div
|
||||
class="fixed z-10 inset-0 overflow-y-auto"
|
||||
use:clickOutside
|
||||
on:click_outside={() => {
|
||||
modal_open = false;
|
||||
}}
|
||||
>
|
||||
<div
|
||||
class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
|
||||
>
|
||||
<div class="fixed inset-0 transition-opacity" aria-hidden="true">
|
||||
<div
|
||||
class="absolute inset-0 bg-gray-500 opacity-75"
|
||||
data-id="modal_backdrop"
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
class="hidden sm:inline-block sm:align-middle sm:h-screen"
|
||||
aria-hidden="true">​</span
|
||||
>
|
||||
<div
|
||||
class="inline-block align-bottom bg-white rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="modal-headline"
|
||||
>
|
||||
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
||||
<div class="sm:flex sm:items-start">
|
||||
<div
|
||||
class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
|
||||
>
|
||||
<svg
|
||||
class="h-6 w-6 text-blue-600"
|
||||
fill="currentColor"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
height="24"
|
||||
><path fill="none" d="M0 0h24v24H0z" />
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M2 4h2v16H2V4zm4 0h1v16H6V4zm2 0h2v16H8V4zm3 0h2v16h-2V4zm3 0h2v16h-2V4zm3 0h1v16h-1V4zm2 0h3v16h-3V4z"
|
||||
/></svg
|
||||
>
|
||||
</div>
|
||||
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
|
||||
<h3 class="text-lg leading-6 font-medium text-gray-900">
|
||||
{$_("create-a-new-scan-fixed-only")}
|
||||
</h3>
|
||||
<div class="mt-2 mb-6">
|
||||
<p class="text-sm text-gray-500">
|
||||
{$_(
|
||||
"please-provide-the-nessecary-information-to-create-a-new-scan"
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-6 gap-6">
|
||||
<div class="col-span-6">
|
||||
<label
|
||||
for="donor"
|
||||
class="block text-sm font-medium text-gray-700"
|
||||
>{$_("runner")}</label
|
||||
>
|
||||
<Select
|
||||
containerClasses="rounded-l-md 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"
|
||||
itemFilter={(label, filterText, option) =>
|
||||
filterRunners(label, filterText, option)}
|
||||
items={runners}
|
||||
showChevron={true}
|
||||
placeholder={$_("search-for-runner-by-name-or-id")}
|
||||
noOptionsMessage={$_("no-runners-found")}
|
||||
on:select={(selectedValue) =>
|
||||
(runner = selectedValue.detail.value.id)}
|
||||
on:clear={() => (runner = null)}
|
||||
/>
|
||||
</div>
|
||||
<div class="col-span-6">
|
||||
<label
|
||||
for="donation_amount_eur"
|
||||
class="block text-sm font-medium text-gray-700"
|
||||
>
|
||||
{$_("distance")}</label
|
||||
>
|
||||
<div class="mt-1 flex rounded-md shadow-sm">
|
||||
<input
|
||||
autocomplete="off"
|
||||
class:border-red-500={!is_distance_valid}
|
||||
class:focus:border-red-500={!is_distance_valid}
|
||||
class:focus:ring-red-500={!is_distance_valid}
|
||||
bind:value={distance_input}
|
||||
type="number"
|
||||
step="1"
|
||||
name="donation_amount_eur"
|
||||
class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 p-2"
|
||||
placeholder="400"
|
||||
/>
|
||||
<span
|
||||
class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 text-sm"
|
||||
>m</span
|
||||
>
|
||||
</div>
|
||||
{#if !is_distance_valid}
|
||||
<span
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
||||
>
|
||||
{$_("the-scans-distance-must-be-greater-than-0m")}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
|
||||
<button
|
||||
disabled={!createbtnenabled}
|
||||
class:opacity-50={!createbtnenabled}
|
||||
on:click={submit}
|
||||
type="button"
|
||||
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
|
||||
>
|
||||
{$_("create")}
|
||||
</button>
|
||||
<button
|
||||
on:click={() => {
|
||||
modal_open = false;
|
||||
}}
|
||||
type="button"
|
||||
class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
|
||||
>
|
||||
{$_("cancel")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -1,11 +1,8 @@
|
||||
<script>
|
||||
import { _ } from "svelte-i18n";
|
||||
import store from "../../store";
|
||||
import {
|
||||
RunnerService,
|
||||
ScanService,
|
||||
} from "@odit/lfk-client-js";
|
||||
import Toastify from "toastify-js";
|
||||
import { RunnerService, ScanService } from "@odit/lfk-client-js";
|
||||
|
||||
import PromiseError from "../base/PromiseError.svelte";
|
||||
import Select from "svelte-select";
|
||||
let data_loaded = false;
|
||||
@@ -31,14 +28,12 @@
|
||||
original_data = Object.assign(original_data, data);
|
||||
original_data.runner = original_data.runner.id;
|
||||
editable = Object.assign(editable, original_data);
|
||||
RunnerService.runnerControllerGetAll().then(
|
||||
(val) => {
|
||||
current_runners = val.map((r) => {
|
||||
return { label: getRunnerLabel(r), value: r };
|
||||
});
|
||||
runner = current_runners.find(r => r.value.id == editable.runner);
|
||||
}
|
||||
);
|
||||
RunnerService.runnerControllerGetAll().then((val) => {
|
||||
current_runners = val.map((r) => {
|
||||
return { label: getRunnerLabel(r), value: r };
|
||||
});
|
||||
runner = current_runners.find((r) => r.value.id == editable.runner);
|
||||
});
|
||||
}
|
||||
);
|
||||
const getRunnerLabel = (option) =>
|
||||
@@ -49,10 +44,7 @@
|
||||
|
||||
function submit() {
|
||||
if (data_loaded === true && save_enabled) {
|
||||
Toastify({
|
||||
text: $_('scan-is-being-updated'),
|
||||
duration: 2500,
|
||||
}).showToast();
|
||||
toast($_("scan-is-being-updated"));
|
||||
let postdata = {};
|
||||
if (original_data.responseType === "TRACKSCAN") {
|
||||
postdata = Object.assign(postdata, editable);
|
||||
@@ -61,11 +53,7 @@
|
||||
.then((resp) => {
|
||||
Object.assign(original_data, editable);
|
||||
original_data = original_data;
|
||||
Toastify({
|
||||
text: $_('updated-scan'),
|
||||
duration: 2500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
toast.success($_("updated-scan"));
|
||||
})
|
||||
.catch((err) => {});
|
||||
} else {
|
||||
@@ -74,11 +62,7 @@
|
||||
.then((resp) => {
|
||||
Object.assign(original_data, editable);
|
||||
original_data = original_data;
|
||||
Toastify({
|
||||
text: $_('updated-scan'),
|
||||
duration: 2500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
toast.success($_("updated-scan"));
|
||||
})
|
||||
.catch((err) => {});
|
||||
}
|
||||
@@ -88,11 +72,7 @@
|
||||
function deleteScan() {
|
||||
ScanService.scanControllerRemove(original_data.id, false)
|
||||
.then((resp) => {
|
||||
Toastify({
|
||||
text: $_('deleted-scan'),
|
||||
duration: 500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
toast($_("deleted-scan"));
|
||||
location.replace("./");
|
||||
})
|
||||
.catch((err) => {
|
||||
@@ -100,11 +80,25 @@
|
||||
delete_scan = original_data;
|
||||
});
|
||||
}
|
||||
function format_laptime(laptime){
|
||||
if(laptime == 0 || laptime == null){return $_('first-scan-of-the-day')}
|
||||
if(laptime < 60){return `${laptime}s`}
|
||||
if(laptime < 3600){return `${Math.floor(laptime / 60)}min ${laptime - (Math.floor(laptime / 60)*60)}s`}
|
||||
return `${Math.floor(laptime / 3600)}h ${laptime - (Math.floor(laptime / 3600)*3600)}min ${laptime - (Math.floor(laptime / 3600)*3600) - (Math.floor(laptime / 60)*60)}`
|
||||
function format_laptime(laptime) {
|
||||
if (laptime == 0 || laptime == null) {
|
||||
return $_("first-scan-of-the-day");
|
||||
}
|
||||
if (laptime < 60) {
|
||||
return `${laptime}s`;
|
||||
}
|
||||
if (laptime < 3600) {
|
||||
return `${Math.floor(laptime / 60)}min ${
|
||||
laptime - Math.floor(laptime / 60) * 60
|
||||
}s`;
|
||||
}
|
||||
return `${Math.floor(laptime / 3600)}h ${
|
||||
laptime - Math.floor(laptime / 3600) * 3600
|
||||
}min ${
|
||||
laptime -
|
||||
Math.floor(laptime / 3600) * 3600 -
|
||||
Math.floor(laptime / 60) * 60
|
||||
}`;
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -122,9 +116,12 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
height="24"><path
|
||||
height="24"
|
||||
><path
|
||||
fill="currentColor"
|
||||
d="M2 4h2v16H2V4zm4 0h1v16H6V4zm2 0h2v16H8V4zm3 0h2v16h-2V4zm3 0h2v16h-2V4zm3 0h1v16h-1V4zm2 0h3v16h-3V4z" /></svg>
|
||||
d="M2 4h2v16H2V4zm4 0h1v16H6V4zm2 0h2v16H8V4zm3 0h2v16h-2V4zm3 0h2v16h-2V4zm3 0h1v16h-1V4zm2 0h3v16h-3V4z"
|
||||
/></svg
|
||||
>
|
||||
</li>
|
||||
<li class="flex items-center ml-2">
|
||||
<a class="mr-2" href="./">Scans</a><svg
|
||||
@@ -137,12 +134,10 @@
|
||||
class="h-3 w-3 mr-2 stroke-current"
|
||||
height="1em"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"><line
|
||||
x1="5"
|
||||
y1="12"
|
||||
x2="19"
|
||||
y2="12" />
|
||||
<polyline points="12 5 19 12 12 19" /></svg>
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
><line x1="5" y1="12" x2="19" y2="12" />
|
||||
<polyline points="12 5 19 12 12 19" /></svg
|
||||
>
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
<span class="mr-2">{original_data.id}</span>
|
||||
@@ -153,20 +148,24 @@
|
||||
</div>
|
||||
<div class="mb-8 text-3xl font-extrabold leading-tight">
|
||||
{runner.value?.firstname}
|
||||
{runner.value?.middlename || ''}
|
||||
{runner.value?.middlename || ""}
|
||||
{runner.value?.lastname}
|
||||
#{original_data.id}
|
||||
<span data-id="donation_actions_${original_data.id}">
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes('SCAN:DELETE')}
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes("SCAN:DELETE")}
|
||||
{#if delete_triggered}
|
||||
<button
|
||||
on:click={deleteScan}
|
||||
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:">{$_('confirm-deletion')}</button>
|
||||
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:"
|
||||
>{$_("confirm-deletion")}</button
|
||||
>
|
||||
<button
|
||||
on:click={() => {
|
||||
delete_triggered = !delete_triggered;
|
||||
}}
|
||||
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:">{$_('cancel')}</button>
|
||||
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:"
|
||||
>{$_("cancel")}</button
|
||||
>
|
||||
{/if}
|
||||
{#if !delete_triggered}
|
||||
<button
|
||||
@@ -174,7 +173,9 @@
|
||||
delete_triggered = true;
|
||||
}}
|
||||
type="button"
|
||||
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:">{$_('delete-scan')}</button>
|
||||
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:"
|
||||
>{$_("delete-scan")}</button
|
||||
>
|
||||
{/if}
|
||||
{/if}
|
||||
{#if !delete_triggered}
|
||||
@@ -183,13 +184,16 @@
|
||||
class:opacity-50={!save_enabled}
|
||||
type="button"
|
||||
on:click={submit}
|
||||
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:">{$_('save-changes')}</button>
|
||||
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:"
|
||||
>{$_("save-changes")}</button
|
||||
>
|
||||
{/if}
|
||||
</span>
|
||||
</div>
|
||||
<!-- -->
|
||||
<div class="w-full inline-flex">
|
||||
<label for="valid" class="block font-medium text-gray-700">{$_('status')}:
|
||||
<label for="valid" class="block font-medium text-gray-700"
|
||||
>{$_("status")}:
|
||||
</label>
|
||||
|
||||
<input
|
||||
@@ -200,49 +204,57 @@
|
||||
name="valid"
|
||||
type="checkbox"
|
||||
checked={editable.valid}
|
||||
class="focus:ring-indigo-500 align-bottom h-7 w-5font-medium text-indigo-600 border-gray-300 rounded" />
|
||||
class="focus:ring-indigo-500 align-bottom h-7 w-5font-medium text-indigo-600 border-gray-300 rounded"
|
||||
/>
|
||||
|
||||
<p class="font-medium">
|
||||
{#if editable.valid}{$_('valid')}{:else}{$_('invalid')}{/if}
|
||||
{#if editable.valid}{$_("valid")}{:else}{$_("invalid")}{/if}
|
||||
</p>
|
||||
</div>
|
||||
{#if editable.responseType === 'TRACKSCAN'}
|
||||
{#if editable.responseType === "TRACKSCAN"}
|
||||
<div class="w-full inline-flex">
|
||||
<label for="valid" class="block font-semibold text-gray-700">{$_('track')}:
|
||||
<label for="valid" class="block font-semibold text-gray-700"
|
||||
>{$_("track")}:
|
||||
</label>
|
||||
<a
|
||||
href="../tracks"
|
||||
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{editable.track.name}
|
||||
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
|
||||
>{editable.track.name}
|
||||
</a>
|
||||
</div>
|
||||
<div class="w-full inline-flex pb-3">
|
||||
<label for="valid" class="block font-semibold text-gray-700">{$_('laptime')}: {format_laptime(editable.laptime)}
|
||||
<label for="valid" class="block font-semibold text-gray-700"
|
||||
>{$_("laptime")}: {format_laptime(editable.laptime)}
|
||||
</label>
|
||||
</div>
|
||||
{/if}
|
||||
<div class=" w-full">
|
||||
<label
|
||||
for="runner"
|
||||
class="block font-medium text-gray-700">{$_('runner')}</label>
|
||||
<label for="runner" class="block font-medium text-gray-700"
|
||||
>{$_("runner")}</label
|
||||
>
|
||||
<Select
|
||||
containerClasses="rounded-l-md 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"
|
||||
itemFilter={(label, filterText, option) => filterRunners(label, filterText, option)}
|
||||
itemFilter={(label, filterText, option) =>
|
||||
filterRunners(label, filterText, option)}
|
||||
items={current_runners}
|
||||
showChevron={true}
|
||||
isDisabled={editable.responseType === 'TRACKSCAN'}
|
||||
placeholder={$_('search-for-runner-by-name-or-id')}
|
||||
noOptionsMessage={$_('no-runners-found')}
|
||||
isDisabled={editable.responseType === "TRACKSCAN"}
|
||||
placeholder={$_("search-for-runner-by-name-or-id")}
|
||||
noOptionsMessage={$_("no-runners-found")}
|
||||
bind:selectedValue={runner}
|
||||
on:select={(selectedValue) => {
|
||||
editable.runner = selectedValue.detail.value.id;
|
||||
}}
|
||||
on:clear={() => (editable.runner = null)} />
|
||||
on:clear={() => (editable.runner = null)}
|
||||
/>
|
||||
</div>
|
||||
<div class=" w-full">
|
||||
<label
|
||||
for="scan_distance"
|
||||
class="block text-sm font-medium text-gray-700">
|
||||
{$_('distance')}</label>
|
||||
class="block text-sm font-medium text-gray-700"
|
||||
>
|
||||
{$_("distance")}</label
|
||||
>
|
||||
<div class="mt-1 flex rounded-md shadow-sm">
|
||||
<input
|
||||
autocomplete="off"
|
||||
@@ -250,19 +262,23 @@
|
||||
class:focus:border-red-500={!is_distance_valid}
|
||||
class:focus:ring-red-500={!is_distance_valid}
|
||||
bind:value={editable.distance}
|
||||
disabled={editable.responseType === 'TRACKSCAN'}
|
||||
disabled={editable.responseType === "TRACKSCAN"}
|
||||
type="number"
|
||||
step="1"
|
||||
name="scan_distance"
|
||||
class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 p-2"
|
||||
placeholder="400" />
|
||||
placeholder="400"
|
||||
/>
|
||||
<span
|
||||
class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 text-sm">m</span>
|
||||
class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 text-sm"
|
||||
>m</span
|
||||
>
|
||||
</div>
|
||||
{#if !is_distance_valid}
|
||||
<span
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
|
||||
{$_('the-scans-distance-must-be-greater-than-0m')}
|
||||
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
||||
>
|
||||
{$_("the-scans-distance-must-be-greater-than-0m")}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@@ -10,23 +10,27 @@
|
||||
|
||||
<section class="container p-5">
|
||||
<span class="mb-1 text-3xl font-extrabold leading-tight">
|
||||
{$_('scans')}
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes('SCAN:CREATE')}
|
||||
{$_("scans")}
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes("SCAN:CREATE")}
|
||||
<button
|
||||
on:click={() => {
|
||||
modal_open = true;
|
||||
}}
|
||||
type="button"
|
||||
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
|
||||
{$_('add-scan')}
|
||||
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
|
||||
>
|
||||
{$_("add-scan")}
|
||||
</button>
|
||||
{/if}
|
||||
</span>
|
||||
<ScansOverview bind:current_scans bind:addScans />
|
||||
</section>
|
||||
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes('SCAN:CREATE')}
|
||||
<AddScanModal bind:modal_open on:created={(event)=>{
|
||||
addScans(event.detail.scans)
|
||||
}} />
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes("SCAN:CREATE")}
|
||||
<AddScanModal
|
||||
bind:modal_open
|
||||
on:created={(event) => {
|
||||
addScans(event.detail.scans);
|
||||
}}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
<div class="text-center items-center justify-center">
|
||||
<p class="mb-16 text-lg text-gray-500">
|
||||
<img class="m-auto" style="height:15rem" src={scans_empty} alt="" />
|
||||
<span class="font-bold">{$_('there-are-no-scans-yet')}</span><br />
|
||||
<span>{$_('add-your-fist-scan')}</span>
|
||||
<span class="font-bold">{$_("there-are-no-scans-yet")}</span><br />
|
||||
<span>{$_("add-your-fist-scan")}</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
} from "@tanstack/svelte-table";
|
||||
import { onMount } from "svelte";
|
||||
import { writable } from "svelte/store";
|
||||
import Toastify from "toastify-js";
|
||||
|
||||
import TableBottom from "../shared/TableBottom.svelte";
|
||||
import TableHeader from "../shared/TableHeader.svelte";
|
||||
import ScansEmptyState from "./ScansEmptyState.svelte";
|
||||
@@ -23,6 +23,7 @@
|
||||
import CardRunner from "../cards/CardRunner.svelte";
|
||||
import ScanValid from "./ScanValid.svelte";
|
||||
import DeleteScanModal from "./DeleteScanModal.svelte";
|
||||
import toast from "svelte-french-toast";
|
||||
|
||||
$: selectedScans =
|
||||
$table?.getSelectedRowModel().rows.map((row) => row.original) || [];
|
||||
@@ -169,11 +170,7 @@
|
||||
...options,
|
||||
data: current_scans,
|
||||
}));
|
||||
Toastify({
|
||||
text: $_("scan-deleted"),
|
||||
duration: 3500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
toast($_("scan-deleted"));
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
@@ -193,7 +190,6 @@
|
||||
dataLoaded = true;
|
||||
page++;
|
||||
}
|
||||
console.log("All scans loaded");
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -235,11 +231,7 @@
|
||||
data: current_scans,
|
||||
}));
|
||||
$table.resetRowSelection();
|
||||
Toastify({
|
||||
text: $_("scan-deleted"),
|
||||
duration: 3500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
toast.success($_("scan-deleted"));
|
||||
}}
|
||||
>
|
||||
{$_("delete-scans")}
|
||||
|
||||
Reference in New Issue
Block a user