From c8514a5f1fa873377476703727ab17d67fcabd82 Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Wed, 26 Jun 2024 12:42:17 +0200
Subject: [PATCH] started working on tile selecting for management

---
 .../utilities/assetManager/AssetManager.vue   | 24 +++-------------
 .../assetManager/partials/TileDetails.vue     | 28 +++++++++++++++++++
 .../assetManager/partials/TileList.vue        |  4 ++-
 3 files changed, 35 insertions(+), 21 deletions(-)
 create mode 100644 src/components/utilities/assetManager/partials/TileDetails.vue

diff --git a/src/components/utilities/assetManager/AssetManager.vue b/src/components/utilities/assetManager/AssetManager.vue
index adff4ea..ad1b838 100644
--- a/src/components/utilities/assetManager/AssetManager.vue
+++ b/src/components/utilities/assetManager/AssetManager.vue
@@ -34,29 +34,12 @@
 
     </div>
     <button class="back-to-top" v-show="hasScrolled" @click="toTop">
-      <img src="/assets/icons/zoneEditor/chevron.svg" />
+      <img src="/assets/icons/zoneEditor/chevron.svg" alt="" />
     </button>
     <div class="divider assets-list"></div>
 
     <div class="asset-info">
-
-      <div class="image-container">
-        <img src="/assets/placeholders/wall-1.png" />
-      </div>
-      <div class="modal-form asset-manager">
-        <form class="form-fields">
-          <div class="form-field name">
-            <label for="name">Name</label>
-            <input class="input-cyan" type="text" name="name" placeholder="Wall #1" />
-          </div>
-
-          <div class="submit">
-            <button class="btn-cyan" type="submit">Save</button>
-            <button class="btn-bordeaux" type="submit">Remove</button>
-          </div>
-        </form>
-      </div>
-
+      <TileDetails :tile="selectedTile" v-if="selectedCategory === 'tiles'" />
     </div>
   </div>
 </template>
@@ -65,10 +48,11 @@
 import { onMounted, ref } from 'vue'
 import {useSocketStore} from '@/stores/socket'
 import TileList from '@/components/utilities/assetManager/partials/TileList.vue'
+import TileDetails from '@/components/utilities/assetManager/partials/TileDetails.vue'
 
 const socket = useSocketStore()
-
 const selectedCategory = ref('tiles')
+const selectedTile = ref('')
 const hasScrolled = ref(false)
 const elementToScroll = ref() 
 
diff --git a/src/components/utilities/assetManager/partials/TileDetails.vue b/src/components/utilities/assetManager/partials/TileDetails.vue
new file mode 100644
index 0000000..9fb497c
--- /dev/null
+++ b/src/components/utilities/assetManager/partials/TileDetails.vue
@@ -0,0 +1,28 @@
+<template>
+  <div class="image-container">
+    <img src="/assets/placeholders/wall-1.png" />
+  </div>
+  <div class="modal-form asset-manager">
+    <form class="form-fields">
+      <div class="form-field name">
+        <label for="name">Name</label>
+        <input class="input-cyan" type="text" name="name" placeholder="Wall #1" />
+      </div>
+
+      <div class="submit">
+        <button class="btn-cyan" type="submit">Save</button>
+        <button class="btn-bordeaux" type="submit">Remove</button>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script setup lang="ts">
+const properties = defineProps({
+  tile: String
+});
+</script>
+
+<style lang="scss">
+
+</style>
\ No newline at end of file
diff --git a/src/components/utilities/assetManager/partials/TileList.vue b/src/components/utilities/assetManager/partials/TileList.vue
index 34a7335..3ccee8f 100644
--- a/src/components/utilities/assetManager/partials/TileList.vue
+++ b/src/components/utilities/assetManager/partials/TileList.vue
@@ -10,7 +10,7 @@
     </label>
   </div>
   <a class="asset" v-for="(tile, index) in tiles" :key="index">
-    <div class="asset-details">
+    <div class="asset-details" @click="emit('select_tile', tile)">
       <img :src="`${config.server_endpoint}/assets/tiles/${tile}`" />
       <span class="asset-name">{{ tile }}</span>
     </div>
@@ -26,6 +26,8 @@ const socket = useSocketStore()
 const tileUploadField = ref(null)
 const tiles = ref()
 
+const emit = defineEmits(['select_tile']);
+
 const handleFileUpload = (e: Event) => {
   const files = (e.target as HTMLInputElement).files
   if (!files) return