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

Added basic table for scanstations

Browse Source 
ref #93
This commit is contained in:
Nicolai Ort 2021-03-10 16:51:57 +01:00
parent ca9c390bb2
commit c53b579fca
1 changed files with 37 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
src/components/scanstations/ScanStationsOverview.svelte
View File

@ -1,29 +1,29 @@
<script> <script>
import { _ } from "svelte-i18n"; import { _ } from "svelte-i18n";
import Toastify from "toastify-js"; import Toastify from "toastify-js";
import { GroupContactService } from "@odit/lfk-client-js"; import { ScanStationService } from "@odit/lfk-client-js";
const promise = GroupContactService.groupContactControllerGetAll().then( const promise = ScanStationService.scanStationControllerGetAll().then(
(result) => { (result) => {
current_contacts = result; current_stations = result;
} }
); );
import store from "../../store"; import store from "../../store";
import ContactsEmptyState from "./ScanStationsEmptyState.svelte"; import ContactsEmptyState from "./ScanStationsEmptyState.svelte";
$: searchvalue = ""; $: searchvalue = "";
$: active_deletes = []; $: active_deletes = [];
export let current_contacts = []; export let current_stations = [];
</script> </script>
{#if store.state.jwtinfo.userdetails.permissions.includes('TEAM:GET')} {#if store.state.jwtinfo.userdetails.permissions.includes('STATION:GET')}
{#await promise} {#await promise}
<div <div
class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2" class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
role="alert"> role="alert">
<p class="font-bold">{$_('contacts-are-being-loaded')}</p> <p class="font-bold">Scanstations are being loaded</p>
<p class="text-sm">{$_('this-might-take-a-moment')}</p> <p class="text-sm">{$_('this-might-take-a-moment')}</p>
</div> </div>
{:then} {:then}
{#if current_contacts.length === 0} {#if current_stations.length === 0}
<ContactsEmptyState /> <ContactsEmptyState />
{:else} {:else}
<input <input
@ -40,17 +40,17 @@
<th <th
scope="col" scope="col"
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
{$_('name')} Description
</th> </th>
<th <th
scope="col" scope="col"
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
{$_('groups')} Track
</th> </th>
<th <th
scope="col" scope="col"
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
{$_('address')} Enabled
</th> </th>
<th scope="col" class="relative px-6 py-3"> <th scope="col" class="relative px-6 py-3">
<span class="sr-only">{$_('action')}</span> <span class="sr-only">{$_('action')}</span>
@ -58,19 +58,17 @@
</tr> </tr>
</thead> </thead>
<tbody class="divide-y divide-gray-200"> <tbody class="divide-y divide-gray-200">
{#each current_contacts as t} {#each current_stations as s}
{#if Object.values(t) {#if Object.values(s)
.toString() .toString()
.toLowerCase() .toLowerCase()
.includes(searchvalue)} .includes(searchvalue)}
<tr data-rowid="team_{t.id}"> <tr data-rowid="station_{s.id}">
<td class="px-6 py-4 whitespace-nowrap"> <td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center"> <div class="flex items-center">
<div class="ml-4"> <div class="ml-4">
<div class="text-sm font-medium text-gray-900"> <div class="text-sm font-medium text-gray-900">
{t.firstname} {s.description}
{t.middlename || ''}
{t.lastname}
</div> </div>
</div> </div>
</div> </div>
@ -79,23 +77,9 @@
<div class="flex items-center"> <div class="flex items-center">
<div class="ml-4"> <div class="ml-4">
<div class="text-sm font-medium text-gray-900"> <div class="text-sm font-medium text-gray-900">
{#if t.groups.length > 0}
{#each t.groups as g}
{#if g.responseType === 'RUNNERORGANIZATION'}
<a <a
href="../orgs/{g.id}" href="../tracks"
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{g.name}</a> class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"> {s.track.name || s.track.distance + "m"}</a>
{:else}
<a
href="../teams/{g.id}"
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{g.parentGroup.name}
&gt;
{g.name}</a>
{/if}
{/each}
{:else}
{$_('contact-is-not-a-member-in-any-group')}
{/if}
</div> </div>
</div> </div>
</div> </div>
@ -104,41 +88,36 @@
<div class="flex items-center"> <div class="flex items-center">
<div class="ml-4"> <div class="ml-4">
<div class="text-sm font-medium text-gray-900"> <div class="text-sm font-medium text-gray-900">
{#if t.address.address1 !== null} {s.enabled.toString()}
{t.address.address1}<br />
{t.address.address2 || ''}<br />
{t.address.postalcode}
{t.address.city}
{t.address.country}
{/if}
</div> </div>
</div> </div>
</div> </div>
</td> </td>
{#if active_deletes[t.id] === true} {#if active_deletes[s.id] === true}
<td <td
class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<button <button
on:click={() => { on:click={() => {
active_deletes[t.id] = false; active_deletes[s.id] = false;
}} }}
tabindex="0" tabindex="0"
class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">{$_('cancel-delete')}</button> class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">{$_('cancel-delete')}</button>
<button <button
on:click={() => { on:click={() => {
GroupContactService.groupContactControllerRemove(t.id, false).then( //TODO:
(resp) => { // ScanStationService.scanStationControllerRemove(s.id, false).then(
current_contacts = current_contacts.filter( // (resp) => {
(obj) => obj.id !== t.id // current_stations = current_stations.filter(
); // (obj) => obj.id !== t.id
Toastify({ // );
text: $_('contact-deleted'), // Toastify({
duration: 500, // text: $_('contact-deleted'),
backgroundColor: // duration: 500,
'linear-gradient(to right, #00b09b, #96c93d)', // backgroundColor:
}).showToast(); // 'linear-gradient(to right, #00b09b, #96c93d)',
} // }).showToast();
); // }
// );
}} }}
tabindex="0" tabindex="0"
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('confirm-delete')}</button> class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('confirm-delete')}</button>
@ -147,12 +126,12 @@
<td <td
class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<a <a
href="./{t.id}" href="./{s.id}"
class="text-indigo-600 hover:text-indigo-900">{$_('details')}</a> class="text-indigo-600 hover:text-indigo-900">{$_('details')}</a>
{#if store.state.jwtinfo.userdetails.permissions.includes('TEAM:DELETE')} {#if store.state.jwtinfo.userdetails.permissions.includes('STATION:DELETE')}
<button <button
on:click={() => { on:click={() => {
active_deletes[t.id] = true; active_deletes[s.id] = true;
}} }}
tabindex="0" tabindex="0"
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('delete')}</button> class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">{$_('delete')}</button>