generated from cms/tibi-docs
112 lines
3.0 KiB
Svelte
112 lines
3.0 KiB
Svelte
<script lang="ts">
|
|
import Card from "./card.svelte"
|
|
import Selectbox from "./selectbox.svelte"
|
|
|
|
export let col: Column
|
|
export let pageId: number
|
|
|
|
let availableProperties = [
|
|
["A", "Aktien"],
|
|
["PE", "Private Equity"],
|
|
["IN", "Infrastruktur"],
|
|
["W", "Waldwirtschaft"],
|
|
["IE", "Immobilien-Entwicklung"],
|
|
|
|
["R", "Renten"],
|
|
["VC", "Venture Capital"],
|
|
["PD", "Private Debt"],
|
|
["LW", "Landwirtschaft"],
|
|
["IB", "Immobilien-Bestand"],
|
|
]
|
|
let selected = []
|
|
availableProperties.forEach((e) => selected.push(false))
|
|
let props
|
|
$: {
|
|
props = chunkArray([...availableProperties], 5)
|
|
console.log(props, "===props")
|
|
}
|
|
|
|
function chunkArray(myArray, chunk_size): string[][] {
|
|
var results = []
|
|
|
|
while (myArray.length) {
|
|
results.push(myArray.splice(0, chunk_size))
|
|
}
|
|
|
|
return results
|
|
}
|
|
</script>
|
|
|
|
<div class="worldcard" style="overflow-x: scroll;">
|
|
<div class="worldcard">
|
|
{#each col.worldCard.row as row}
|
|
<div class="wc-row">
|
|
{#each row.cards as card}
|
|
<Card card="{card}" properties="{availableProperties}" pageId="{pageId}" selected="{selected}" />
|
|
{/each}
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
|
|
<div class="selectboxes">
|
|
<h3>WÄHLEN SIE IHRE ANLAGEKLASSEN</h3>
|
|
{#each props as propertyRow, i}
|
|
<div class="prop-row">
|
|
{#each propertyRow as property, j}
|
|
<Selectbox
|
|
abbriviation="{property[0]}"
|
|
name="{property[1]}"
|
|
on:click="{(e) => {
|
|
console.log(!selected[availableProperties.indexOf(property)], '===index')
|
|
selected[availableProperties.indexOf(property)] = e.detail
|
|
}}"
|
|
/>
|
|
{/each}
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
|
|
<style lang="less">
|
|
@import "../../../assets/css/main.less";
|
|
|
|
.worldcard {
|
|
line-height: 1 !important;
|
|
font-size: 0.7rem;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
width: 100vw;
|
|
max-width: 1800px;
|
|
|
|
& > .worldcard {
|
|
gap: 0px !important;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.wc-row {
|
|
display: flex;
|
|
height: fit-content;
|
|
}
|
|
}
|
|
|
|
.selectboxes {
|
|
width: 100%;
|
|
max-width: 100vw;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
@media @tablet {
|
|
align-items: center;
|
|
}
|
|
margin-bottom: 20px;
|
|
gap: 10px;
|
|
|
|
.prop-row {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
gap: 10px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|