populate items trough apicall

This commit is contained in:
j3d1 2019-12-05 20:10:43 +01:00
parent cc9ba38dac
commit b911b38074
3 changed files with 11 additions and 24 deletions

2
API.md
View file

@ -56,3 +56,5 @@ returns a list of all tracked events
### Files/Images
#### ``GET /api/<version.major>/images/<file.hash>``
#### ``GET /api/<version.major>/thumbs/<file.hash>``

View file

@ -10,22 +10,7 @@ const store = new Vuex.Store({
state: {
events: Array,
layout: 'cards',
loadedItems: [
{ uid: 1, description: 'sleeping bag', box: 7, image: 41 },
{ uid: 2, description: 'tent', box: 7, image: 23 },
{ uid: 3, description: 'chest', box: 7, image: 52 },
{ uid: 4, description: 'power supply black', box: 5, image: 62 },
{ uid: 5, description: 'pullover yellow "pesthörnchen"', box: 5, image: 84 },
{ uid: 6, description: '"blue black second skin"', box: 6, image: 72 },
{ uid: 7, description: '"the bike blog" bottle orange', box: 6, image: 83 },
{ uid: 8, description: 'tshirt guad3c', box: 6, image: 26 },
{ uid: 9, description: 'power supply dell', box: 6, image: 74 },
{ uid: 10, description: 'blanket green blue', box: 6, image: 25 },
{ uid: 11, description: 'cap "ega"', box: 6, image: 71 },
{ uid: 12, description: 'water bottle blue "sistema"', box: 3, image: 12 },
{ uid: 13, description: 'sun hat black', box: 5, image: 1 },
{ uid: 14, description: 'toy truck', box: 6, image: 51 }
]
loadedItems: Array,
},
getters: {
getEventSlug: state => state.route.params.event,

View file

@ -3,27 +3,27 @@
<div class="row" v-if="layout === 'table'">
<div class="col-xl-8 offset-xl-2">
<Table
:columns="['uid', 'description', 'box', 'image']"
:columns="['iid', 'item_uid', 'bezeichnung', 'container']"
:items="loadedItems"
:keyName="'uid'"
:keyName="'item_uid'"
/>
</div>
</div>
<Cards
v-if="layout === 'cards'"
:columns="['uid', 'description', 'box', 'image']"
:columns="['iid', 'item_uid', 'bezeichnung', 'container']"
:items="loadedItems"
:keyName="'uid'"
:keyName="'item_uid'"
v-slot="{ item }"
>
<img
:src="`https://picsum.photos/id/${item.image + 50}/200/200`"
:src="`https://c3lf.de/api/1/thumbs/${item.file}`"
alt="item"
class="card-img-top img-fluid"
>
<div class="card-body">
<h6 class="card-title">{{ item.description }}</h6>
<h6 class="card-subtitle text-secondary">uid: {{ item.uid }} box: {{ item.box }}</h6>
<h6 class="card-title">{{ item.bezeichnung }}</h6>
<h6 class="card-subtitle text-secondary">uid: {{ item.item_uid }} box: {{ item.container }}</h6>
</div>
</Cards>
</div>