robin - final version

2023-07-16 21:31:08 +00:00
parent 8128f4f641
commit 383c1be382
10 changed files with 363 additions and 9 deletions
--- a/frontend/src/lib/components/widgets/Worldcard/worldcard.svelte
+++ b/frontend/src/lib/components/widgets/Worldcard/worldcard.svelte
@@ -0,0 +1,111 @@
+<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>