add: detailed item page proto

frontend/src/components/ItemDetails.vue

@@ -1,20 +1,95 @@
 <template>
-    <div>
+    <div class="flex md6 lg4">
-        <va-card id="preview" class="content-container"></va-card>
+        <va-inner-loading loading>
-        <va-card id="description" class="content-container"></va-card>
+            <va-card id="preview" class="content-container">
-        <va-card id="details" class="content-container"></va-card>
+                <img
-        <va-card id="map" class="content-container"></va-card>
+                    :src="`${this.baseURL}/static/previews/${this.itemDetails.fadr}+/${this.itemDetails.internal_id}.bmp`"
-        <va-card id="contact" class="content-container"></va-card>
+                    :alt="`${this.itemDetails.description}`"
+                />
+            </va-card>
+        </va-inner-loading>
+        <va-card id="description" class="content-container">
+            <va-card-title>Description</va-card-title>
+            <va-card-content>{{ itemDetails.description }}</va-card-content>
+        </va-card>
+        <div class="flex md6 lg4">
+            <va-card id="details" class="content-container">
+                <va-card-title>Details</va-card-title>
+
+                <va-card-content>
+                    <div class="va-table-responsive">
+                        <table class="va-table va-table--striped">
+                            <tbody>
+                                <tr
+                                    v-for="[key, value] of Object.entries(this.itemDetails).filter(([k, _v]) => !(this.hidden.includes(k)))"
+                                >
+                                    <td>{{ key }}</td>
+                                    <td>{{ value }}</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </va-card-content>
+            </va-card>
+        </div>
+
+        <va-card id="map" class="content-container">
+            <map-component />
+        </va-card>
+        <va-card id="contact" class="content-container">
+            <va-card-title>Contact Sales Representative</va-card-title>
+        </va-card>
     </div>
 </template>
 
 
 <script>
+import MapComponent from "./MapComponent.vue";
 export default {
     name: "item-details",
+    data() {
+        return {
+            itemDetails: {},
+            hidden: [
+                "fadr",
+                "internal_id",
+                "x_coord",
+                "y_coord",
+                "owner",
+                "ownercontacts",
+                "id"
+            ],
+            itemPreview: {},
+            baseURL: "http://localhost:8080",
+        };
+    },
+    methods: {
+        async fetchItemDetails() {
+            const baseURL = "http://localhost:8080/api/v1";
+            fetch(`${baseURL}/item/${this.$route.params.id}`)
+                .then(res => res.json())
+                .then(data => this.itemDetails = data)
+                .catch((e) => console.log(e));
+        },
+        async fetchItemPreview() {
+            const baseURL = "http://localhost:8080/api/v1";
+            fetch(`${baseURL}/static/previews/${this.itemDetails.fadr}+/${this.itemDetails.internal_id}.bmp`)
+                .then(res => res.json())
+                .then(data => this.itemPreview = data)
+                .catch((e) => console.log(e));
+        }
+    },
+    created() {
+        this.fetchItemDetails();
+    },
+    components: { MapComponent }
 }
 </script>
 
 
-<style lang="css">
+<style lang="css" scoped>
+.va-table-responsive {
+    overflow: auto;
+    --va-card-display: flex;
+}
 </style>

frontend/src/main.js

@@ -20,7 +20,9 @@ import {
     VaListItemSection,
     VaListItemLabel,
     VaCard,
-    VaCardContent
+    VaCardTitle,
+    VaCardContent,
+    VaInnerLoading,
 } from 'vuestic-ui'
 import 'vuestic-ui/dist/styles/essential.css'
 import 'vuestic-ui/dist/styles/grid.css'
@@ -55,7 +57,9 @@ app.use(createVuesticEssential({
         VaListItemSection,
         VaListItemLabel,
         VaCard,
+        VaCardTitle,
         VaCardContent,
+        VaInnerLoading,
     }
 }));
 

frontend/src/views/ItemView.vue

@@ -23,39 +23,40 @@ export default {
             sidebarItems: [
                 {
                     title: "Preview",
-                    icon: "fact_check",
+                    icon: "image",
                     route: "item-details",
                     hash: "#preview",
                 },
                 {
                     title: "Description",
-                    icon: "dashboard",
+                    icon: "description",
                     route: "item-details",
                     hash: "#description",
                 },
                 {
                     title: "Details",
-                    icon: "file_upload",
+                    icon: "summarize",
                     route: "item-details",
                     hash: "#details",
                 },
                 {
                     title: "Map",
-                    icon: "file_upload",
+                    icon: "map",
                     route: "item-details",
                     hash: "#map",
                 },
                 {
                     title: "Contact",
-                    icon: "file_upload",
+                    icon: "contact_page",
                     route: "item-details",
                     hash: "#contact",
                 },
 
             ],
-            itemDetails: {},
+
         }
     },
+
 }
 </script>