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

Switched the scanstation detail over to svelte select👀👀

Browse Source 
ref #98
This commit is contained in:
Nicolai Ort 2021-03-18 15:56:18 +01:00
parent 64c96f25d4
commit b1031e3115
2 changed files with 32 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -140,8 +140,8 @@
.startsWith(filterText.toLowerCase())}
items={tracks}
showChevron={true}
placeholder={$_('search-for-an-organization-or-team-by-name-or-id')}
noOptionsMessage={$_('no-organization-or-team-found')}
placeholder="Search for a track (by name or id)."
noOptionsMessage="No track found"
on:select={(selectedValue) => (track = selectedValue.detail.value.id)}
on:clear={() => (track = null)} />
</div>

47
src/components/scanstations/ScanStationDetail.svelte
View File

@ -1,10 +1,11 @@
<script>
import { _ } from "svelte-i18n";
import { t, _ } from "svelte-i18n";
import store from "../../store";
import { ScanStationService, TrackService } from "@odit/lfk-client-js";
import Toastify from "toastify-js";
import PromiseError from "../base/PromiseError.svelte";
import ConfirmScanStationDeletion from "./ConfirmScanStationDeletion.svelte";
import Select from "svelte-select";
let data_loaded = false;
let modal_open;
let delete_station;
@ -13,6 +14,7 @@
$: original_data = {};
$: editable = {};
$: tracks = [];
$: track = {};
$: changes_performed = !(
JSON.stringify(original_data) === JSON.stringify(editable)
);
@ -24,14 +26,17 @@
data.track = data.track.id;
original_data = Object.assign(original_data, data);
editable = Object.assign(editable, original_data);
});
TrackService.trackControllerGetAll().then((val) => {
tracks = val;
TrackService.trackControllerGetAll().then((val) => {
tracks = val.map((t) => {
return { label: t.name || `#{t.id}`, value: t };
});
track = tracks.find((t) => t.value.id == editable.track);
});
});
function submit() {
if (data_loaded === true && save_enabled) {
Toastify({
text: $_('station-is-being-updated'),
text: $_("station-is-being-updated"),
duration: 2500,
}).showToast();
ScanStationService.scanStationControllerPut(original_data.id, editable)
@ -39,7 +44,7 @@
Object.assign(original_data, editable);
original_data = original_data;
Toastify({
text: $_('updated-station'),
text: $_("updated-station"),
duration: 2500,
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
}).showToast();
@ -52,7 +57,7 @@
ScanStationService.scanStationControllerRemove(original_data.id, false)
.then((resp) => {
Toastify({
text: $_('station-deleted'),
text: $_("station-deleted"),
duration: 500,
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
}).showToast();
@ -82,7 +87,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>
</li>
<li class="flex items-center ml-2">
<a class="mr-2" href="./">{$_('scanstation')}</a><svg
@ -147,14 +152,22 @@
<label
for="track"
class="block text-sm font-medium text-gray-700">Track</label>
<select
name="track"
bind:value={editable.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 a track (by name or id)."
noOptionsMessage="No track found"
bind:selectedValue={track}
on:select={(selectedValue) => (editable.track = selectedValue.detail.value.id)}
on:clear={() => (track = null)} />
</div>
<div class="text-sm w-full">
<label
@ -162,7 +175,7 @@
class="font-medium text-gray-700">{$_('description')}</label>
<input
autocomplete="off"
placeholder="{$_('description')}"
placeholder={$_('description')}
type="text"
bind:value={editable.description}
name="description"