generated from cms/tibi-docs
118 lines
3.2 KiB
Svelte
118 lines
3.2 KiB
Svelte
<script lang="ts">
|
|
import Card from "./card.svelte"
|
|
import Selectbox from "./selectbox.svelte"
|
|
|
|
export let worldCard: WorldCard
|
|
export let pageId: string
|
|
|
|
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)
|
|
}
|
|
|
|
function chunkArray(myArray, chunk_size): string[][] {
|
|
var results = []
|
|
|
|
while (myArray.length) {
|
|
results.push(myArray.splice(0, chunk_size))
|
|
}
|
|
|
|
return results
|
|
}
|
|
</script>
|
|
|
|
<div style="display: flex; flex-direction: column; width: 100%; align-items: center;">
|
|
<div class="worldcard">
|
|
<div class="worldcard">
|
|
{#each 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) => {
|
|
selected[availableProperties.indexOf(property)] = e.detail
|
|
}}"
|
|
/>
|
|
{/each}
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style lang="less">
|
|
@import "../../../assets/css/main.less";
|
|
|
|
.worldcard {
|
|
line-height: 1 !important;
|
|
font-size: 0.8rem;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
width: 1170px;
|
|
max-width: 95vw;
|
|
|
|
& > .worldcard {
|
|
gap: 0px !important;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.wc-row {
|
|
display: flex;
|
|
max-width: 100%;
|
|
height: fit-content;
|
|
}
|
|
}
|
|
|
|
.selectboxes {
|
|
width: 100%;
|
|
max-width: 95vw;
|
|
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;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|