add: data table

src/components/MapComponent.vue

@@ -33,8 +33,6 @@ export default {
             }));
 
             window.addEventListener('load', () => {
-                console.log("window loaded");
-
                 map.value.addSource('countries', {
                     'type': 'vector',
                     "tiles": [`https://api.mapbox.com/v4/ghermant.aq1p7k29/{z}/{x}/{y}.mvt?access_token=${apiKey}`]

src/components/OverviewScreen.vue

@@ -3,7 +3,9 @@
         <va-card class="content-container">
             <map-component />
         </va-card>
-        <va-card class="content-container"></va-card>
+        <va-card class="content-container">
+            <va-data-table :items="items" />
+        </va-card>
     </div>
 </template>
 
@@ -12,7 +14,25 @@
 import MapComponent from "./MapComponent.vue";
 export default {
     name: "overview-screen",
-    components: { MapComponent }
+    components: { MapComponent },
+    data() {
+        return {
+            items: []
+        }
+    },
+    methods: {
+        fetchItems() {
+            const baseURL = "http://localhost:8080/api/v1"
+
+            fetch(`${baseURL}/items/`)
+                .then(res => res.json())
+                .then(data => this.items = data)
+                .catch((e) => console.log(e))
+        }
+    },
+    created() {
+        this.fetchItems()
+    },
 }
 </script>
 

vue.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+    devServer: {
+        proxy: 'http://loc-geodata.lan/',
+    }
+}