From b75f4d65e33d786891f68a849810adc0c55fc5df Mon Sep 17 00:00:00 2001
From: Timo Volkmann <volkmann@stud.hs-heilbronn.de>
Date: Sat, 23 Mar 2019 17:52:36 +0100
Subject: [PATCH] changed quasar dev port to 8081 and therefor added CORS
 policy to controller. tested allcaches api

---
 frontend/src/pages/TestCaches.vue | 83 +++++++++++++++++++++++++++++++
 1 file changed, 83 insertions(+)
 create mode 100644 frontend/src/pages/TestCaches.vue

diff --git a/frontend/src/pages/TestCaches.vue b/frontend/src/pages/TestCaches.vue
new file mode 100644
index 0000000..71e251c
--- /dev/null
+++ b/frontend/src/pages/TestCaches.vue
@@ -0,0 +1,83 @@
+<template>
+  <div class="q-pa-md row items-start q-col-gutter-md">
+
+    <div class="col col-sm-6" v-for="cache in caches" :key="cache.id">
+      <q-card flat bordered class="my-card bg-grey-1">
+        <q-img :ratio="16/9" src="https://cdn.quasar-framework.org/img/parallax2.jpg">
+          <div class="absolute-bottom">
+            <div class="text-h6">
+              <span>{{ cache.name }}</span>
+              <span v-if="cache.stationen.length > 2"> (Multicache)</span>
+              <span v-else> (Singlecache)</span>
+            </div>
+          </div>
+        </q-img>
+        <q-card-section>
+          {{ cache.description }}
+        </q-card-section>
+        <q-separator inset />
+        <q-card-actions align="around">
+            <q-btn flat color="green" class="btn-fixed-width" >Cache starten</q-btn>
+            <q-btn flat outline class="btn-fixed-width">Ansehen</q-btn>
+        </q-card-actions>
+      </q-card>
+    </div>
+
+  </div>
+</template>
+
+<style lang="stylus">
+.grid-style-transition
+  transition transform .3s
+.btn-fixed-width
+  width: 48%
+</style>
+
+<script>
+export default {
+  data () {
+    return {
+      denseOn: true,
+      filter: '',
+      selected: [],
+      caches: [],
+      columns: [
+        {
+          name: 'desc',
+          required: true,
+          label: 'Dessert (100g serving)',
+          align: 'left',
+          field: row => row.title,
+          format: val => `${val}`,
+          sortable: true
+        },
+        { name: 'userId', align: 'center', label: 'ID', field: 'userId', sortable: true },
+        { name: 'id', label: 'fID', field: 'id', sortable: true },
+        { name: 'title', label: 'Titel', field: 'title' },
+        { name: 'completed', label: 'Komplett', field: 'completed' },
+      ],
+      // data: [
+      //   {
+      //     "userId": 1,
+      //     "id": 1,
+      //     "title": "delectus aut autem",
+      //     "completed": false
+      //   }
+      // ]
+    }
+  },
+
+  created: function() {
+    this.fetchTodos();
+  },
+
+  methods: {
+    fetchTodos () {
+      this.$axios.get('http://localhost:8080/allCaches')
+        .then((response) => {
+          this.caches = response.data;
+        })
+    }
+  }
+}
+</script>