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

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

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