lfk/frontend
2
0
Fork 0
Code Issues 3 Pull Requests Actions Projects Releases Wiki Activity

Advanced Scan detail

Browse Source 
ref #92
This commit is contained in:
Nicolai Ort 2021-03-17 18:21:58 +01:00
parent 107360cd93
commit 284bdc6e33
2 changed files with 62 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/scans/AddScanModal.svelte
View File

@ -3,8 +3,6 @@
import { clickOutside } from "../base/outsideclick";
import { focusTrap } from "svelte-focus-trap";
import {
DonationService,
DonorService,
RunnerService,
ScanService,
} from "@odit/lfk-client-js";

75
src/components/scans/ScanDetail.svelte
View File

@ -16,6 +16,7 @@
$: original_data = {};
$: editable = {};
$: current_runners = [];
$: is_distance_valid = editable.distance > 0;
$: is_everything_set =
editable.donor != null &&
((original_data.responseType == "TRACKSCAN" && editable?.runner != null) ||
@ -23,7 +24,7 @@
$: changes_performed = !(
JSON.stringify(original_data) === JSON.stringify(editable)
);
$: save_enabled = changes_performed && is_everything_set;
$: save_enabled = changes_performed && is_everything_set && is_distance_valid;
const runner_promise = RunnerService.runnerControllerGetAll().then((val) => {
current_runners = val;
});
@ -99,7 +100,7 @@
}
</script>
{#await donor_promise && runner_promise && promise}
{#await runner_promise && promise}
Loading scan details
{:then}
<section class="container p-5 select-none">
@ -180,8 +181,10 @@
</span>
</div>
<!-- -->
<div class="w-full">
<label for="valid" class="block font-medium text-gray-700">Status</label>
<div class="w-full inline-flex">
<label for="valid" class="block font-medium text-gray-700">Status:
</label>
&nbsp;
<input
id="valid"
on:change={() => {
@ -190,15 +193,33 @@
name="valid"
type="checkbox"
checked={editable.valid}
class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
{#if editable.valid}
<span
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Invalid</span>
{:else}
<span
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Invalid</span>
{/if}
class="focus:ring-indigo-500 align-bottom h-7 w-5font-medium text-indigo-600 border-gray-300 rounded" />
&nbsp;
<p class="font-medium">
{#if editable.valid}Valid{:else}Invalid{/if}
</p>
</div>
{#if editable.responseType === "TRACKSCAN"}
<div class="w-full inline-flex">
<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}
</a>
|
<label for="valid" class="block font-semibold text-gray-700">Station: </label>
<a
href="../scanstations/{editable.station.id}"
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">#{editable.station.id}
</a>
|
<label for="valid" class="block font-semibold text-gray-700">Card: </label>
<a
href="TODO:"
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">#{editable.card.id}
</a>
</div>
{/if}
<div class=" w-full">
<label
for="runner"
@ -210,12 +231,40 @@
itemFilter={(label, filterText, option) => filterRunners(label, filterText, option)}
items={current_runners}
showChevron={true}
isDisabled={(editable.responseType === "TRACKSCAN")}
isDisabled={editable.responseType === 'TRACKSCAN'}
placeholder={$_('search-for-runner-by-name-or-id')}
noOptionsMessage={$_('no-runners-found')}
bind:selectedValue={editable.runner}
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>
<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={editable.distance}
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" />
<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 scan's distance must be greater than 0m
</span>
{/if}
</div>
</section>
{:catch error}
<PromiseError {error} />