Template
66 lines
1.6 KiB
Vue
66 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
import type { ConceptResponseDTO } from '~/netcode/events/dto/conceptresponse.dto';
|
|
import { useConceptStore } from '~/store/concepts.store';
|
|
|
|
|
|
const conceptStore = useConceptStore();
|
|
|
|
const concepyByType = computed(() => {
|
|
const byType: Record<string, ConceptResponseDTO[]> = {}
|
|
for (const concept of Object.values(conceptStore.concepts)) {
|
|
if (!(concept.type.id in byType)) {
|
|
byType[concept.type.id] = []
|
|
}
|
|
byType[concept.type.id].push(concept)
|
|
}
|
|
return byType
|
|
})
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="conceptGrid">
|
|
<div class="conceptType" v-for="concepts, conceptType in concepyByType">
|
|
<div class="conceptTypeHeader">{{ conceptStore.conceptTypes[conceptType].value }}</div>
|
|
<div class="concept" v-for="[index, concept] in Object.entries(concepts)">
|
|
<NuxtImg class="conceptImg" placeholder :alt="concept.value" :src="'/icons/concept/drawing.svg'"
|
|
@click="$emit('click', concept.id)">
|
|
</NuxtImg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style lang="css">
|
|
div.conceptGrid {
|
|
max-height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 50px;
|
|
}
|
|
|
|
div.conceptType {
|
|
display: grid;
|
|
align-content: start;
|
|
grid-template-columns: 1fr 1fr;
|
|
flex: 1 1 0px;
|
|
}
|
|
|
|
.concept {
|
|
border: 1px solid black;
|
|
box-sizing: border-box;
|
|
font-size: x-small;
|
|
aspect-ratio: 1/1;
|
|
}
|
|
|
|
div.conceptType>div.conceptTypeHeader {
|
|
grid-column: 1/3;
|
|
}
|
|
|
|
|
|
|
|
.conceptImg {
|
|
max-height: 100%;
|
|
max-width: 100%;
|
|
object-fit: contain;
|
|
}
|
|
</style> |