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

Switched the scanstation modal over to svelte select👀👀

Browse Source 
ref #98
This commit is contained in:
Nicolai Ort 2021-03-18 15:50:15 +01:00
parent 5ad42d6ca7
commit 64c96f25d4
1 changed files with 27 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/components/scanstations/AddScanStationModal.svelte
View File

@ -4,14 +4,16 @@
import { focusTrap } from "svelte-focus-trap"; import { focusTrap } from "svelte-focus-trap";
import { ScanStationService, TrackService } from "@odit/lfk-client-js"; import { ScanStationService, TrackService } from "@odit/lfk-client-js";
import Toastify from "toastify-js"; import Toastify from "toastify-js";
import Select from "svelte-select";
export let modal_open; export let modal_open;
export let new_station; export let new_station;
export let current_stations; export let current_stations;
export let copy_modal_open; export let copy_modal_open;
let tracks = []; let tracks = [];
TrackService.trackControllerGetAll().then((val) => { TrackService.trackControllerGetAll().then((val) => {
tracks = val; tracks = val.map((t) => {
track = tracks[0].id; return { label: t.name || `#${t.id}`, value: t };
});
}); });
function focus(el) { function focus(el) {
el.focus(); el.focus();
@ -39,7 +41,7 @@
if (processed_last_submit === true) { if (processed_last_submit === true) {
processed_last_submit = false; processed_last_submit = false;
const toast = Toastify({ const toast = Toastify({
text: $_('scanstation-is-being-added'), text: $_("scanstation-is-being-added"),
duration: -1, duration: -1,
}).showToast(); }).showToast();
let postdata = { let postdata = {
@ -55,14 +57,14 @@
modal_open = false; modal_open = false;
// //
Toastify({ Toastify({
text: $_('scanstation-added'), text: $_("scanstation-added"),
duration: 500, duration: 500,
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)", backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
}).showToast(); }).showToast();
current_stations.push(result); current_stations.push(result);
current_stations = current_stations; current_stations = current_stations;
new_station=result; new_station = result;
copy_modal_open=true; copy_modal_open = true;
}) })
.catch((err) => { .catch((err) => {
// //
@ -127,14 +129,21 @@
<label <label
for="track" for="track"
class="block text-sm font-medium text-gray-700">Track</label> class="block text-sm font-medium text-gray-700">Track</label>
<select <Select
name="track" 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"
bind:value={track} itemFilter={(label, filterText, option) => label
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"> .toLowerCase()
{#each tracks as t} .includes(
<option value={t.id}>{t.name || t.distance}</option> filterText.toLowerCase()
{/each} ) || option.value.id
</select> .toString()
.startsWith(filterText.toLowerCase())}
items={tracks}
showChevron={true}
placeholder={$_('search-for-an-organization-or-team-by-name-or-id')}
noOptionsMessage={$_('no-organization-or-team-found')}
on:select={(selectedValue) => (track = selectedValue.detail.value.id)}
on:clear={() => (track = null)} />
</div> </div>
<div class="col-span-6"> <div class="col-span-6">
<label <label
@ -143,7 +152,7 @@
<input <input
use:focus use:focus
autocomplete="off" autocomplete="off"
placeholder="{$_('description')}" placeholder={$_('description')}
bind:value={description} bind:value={description}
type="text" type="text"
name="description" name="description"
@ -164,7 +173,8 @@
type="checkbox" type="checkbox"
checked={enabled} checked={enabled}
class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" /> class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
{$_('this-scanstation-is')} {#if enabled}{$_('enabled')}{:else}{$_('disabled')}{/if} {$_('this-scanstation-is')}
{#if enabled}{$_('enabled')}{:else}{$_('disabled')}{/if}
</p> </p>
</div> </div>
</div> </div>