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

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

@ -4,14 +4,16 @@
import { focusTrap } from "svelte-focus-trap";
import { ScanStationService, TrackService } from "@odit/lfk-client-js";
import Toastify from "toastify-js";
import Select from "svelte-select";
export let modal_open;
export let new_station;
export let current_stations;
export let copy_modal_open;
let tracks = [];
TrackService.trackControllerGetAll().then((val) => {
tracks = val;
track = tracks[0].id;
tracks = val.map((t) => {
return { label: t.name || `#${t.id}`, value: t };
});
});
function focus(el) {
el.focus();
@ -39,7 +41,7 @@
if (processed_last_submit === true) {
processed_last_submit = false;
const toast = Toastify({
text: $_('scanstation-is-being-added'),
text: $_("scanstation-is-being-added"),
duration: -1,
}).showToast();
let postdata = {
@ -55,14 +57,14 @@
modal_open = false;
//
Toastify({
text: $_('scanstation-added'),
text: $_("scanstation-added"),
duration: 500,
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
}).showToast();
current_stations.push(result);
current_stations = current_stations;
new_station=result;
copy_modal_open=true;
new_station = result;
copy_modal_open = true;
})
.catch((err) => {
//
@ -111,7 +113,7 @@
width="24"
height="24"><path fill="none" d="M0 0h24v24H0z" />
<path
d="M4 5v11h16V5H4zM2 4a1 1 0 011-1h18a1 1 0 011 1v14H2V4zM1 19h22v2H1v-2z" /></svg>
d="M4 5v11h16V5H4zM2 4a1 1 0 011-1h18a1 1 0 011 1v14H2V4zM1 19h22v2H1v-2z" /></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">
@ -127,14 +129,21 @@
<label
for="track"
class="block text-sm font-medium text-gray-700">Track</label>
<select
name="track"
bind:value={track}
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">
{#each tracks as t}
<option value={t.id}>{t.name || t.distance}</option>
{/each}
</select>
<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) => label
.toLowerCase()
.includes(
filterText.toLowerCase()
) || option.value.id
.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 class="col-span-6">
<label
@ -143,7 +152,7 @@
<input
use:focus
autocomplete="off"
placeholder="{$_('description')}"
placeholder={$_('description')}
bind:value={description}
type="text"
name="description"
@ -164,7 +173,8 @@
type="checkbox"
checked={enabled}
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>
</div>
</div>