imshvc/noxious_client
1
0
Fork 0
forked from noxious/client
Code Pull Requests Activity

started working on tile selecting for management

Browse Source
This commit is contained in:
Dennis Postma 2024-06-26 12:42:17 +02:00
parent 8896624e03
commit c8514a5f1f
3 changed files with 35 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/utilities/assetManager/AssetManager.vue
View File

@ -34,29 +34,12 @@
</div> </div>
<button class="back-to-top" v-show="hasScrolled" @click="toTop"> <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> </button>
<div class="divider assets-list"></div> <div class="divider assets-list"></div>
<div class="asset-info"> <div class="asset-info">
<TileDetails :tile="selectedTile" v-if="selectedCategory === 'tiles'" />
<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>
</div> </div>
</div> </div>
</template> </template>
@ -65,10 +48,11 @@
import { onMounted, ref } from 'vue' import { onMounted, ref } from 'vue'
import {useSocketStore} from '@/stores/socket' import {useSocketStore} from '@/stores/socket'
import TileList from '@/components/utilities/assetManager/partials/TileList.vue' import TileList from '@/components/utilities/assetManager/partials/TileList.vue'
import TileDetails from '@/components/utilities/assetManager/partials/TileDetails.vue'
const socket = useSocketStore() const socket = useSocketStore()
const selectedCategory = ref('tiles') const selectedCategory = ref('tiles')
const selectedTile = ref('')
const hasScrolled = ref(false) const hasScrolled = ref(false)
const elementToScroll = ref() const elementToScroll = ref()

28
src/components/utilities/assetManager/partials/TileDetails.vue Normal file
View File

@ -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>

4
src/components/utilities/assetManager/partials/TileList.vue
View File

@ -10,7 +10,7 @@
</label> </label>
</div> </div>
<a class="asset" v-for="(tile, index) in tiles" :key="index"> <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}`" /> <img :src="`${config.server_endpoint}/assets/tiles/${tile}`" />
<span class="asset-name">{{ tile }}</span> <span class="asset-name">{{ tile }}</span>
</div> </div>
@ -26,6 +26,8 @@ const socket = useSocketStore()
const tileUploadField = ref(null) const tileUploadField = ref(null)
const tiles = ref() const tiles = ref()
const emit = defineEmits(['select_tile']);
const handleFileUpload = (e: Event) => { const handleFileUpload = (e: Event) => {
const files = (e.target as HTMLInputElement).files const files = (e.target as HTMLInputElement).files
if (!files) return if (!files) return