populate items trough apicall

API.md

@@ -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>``

src/store/index.js

@@ -10,22 +10,7 @@ const store = new Vuex.Store({
   state: {
     events: Array,
     layout: 'cards',
-    loadedItems: [
+    loadedItems: Array,
-      { 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 }
-    ]
   },
   getters: {
     getEventSlug: state => state.route.params.event,

src/views/Items.vue

@@ -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-title">{{ item.bezeichnung }}</h6>
-                <h6 class="card-subtitle text-secondary">uid: {{ item.uid }} box: {{ item.box }}</h6>
+                <h6 class="card-subtitle text-secondary">uid: {{ item.item_uid }} box: {{ item.container }}</h6>
             </div>
         </Cards>
     </div>