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