First try at a weekplan #37

Will undergo heavy redesigns

client/src/App.svelte

@@ -1,5 +1,6 @@
 <script>
     import Plan from "./Plan.svelte";
+    import Weekplan from "./Weekplan.svelte";
     import Authentication from "./Authentication.svelte";
     import { onMount } from 'svelte';
     import { DatePicker } from 'attractions';
@@ -115,8 +116,9 @@
     </div>
     <br>
     <br>
-    <Authentication></Authentication>
-    <Plan bind:api_base bind:date bind:plan_type bind:plan_value show_title="true" extra_height="true" />
+    <Plan bind:api_base bind:date bind:plan_type bind:plan_value show_title={true} extra_height={true} />
+    <!-- <Weekplan bind:api_base bind:week_start={date} bind:plan_type bind:plan_value /> -->
+    <!-- <Authentication></Authentication> -->
 </main>
 
 <style lang="scss">

client/src/Plan.svelte

@@ -7,6 +7,7 @@
     export let plan_value;
     export let show_title;
     export let extra_height;
+    export let week_letter;
     let lessons = [];
     let info;
     let title = "";
@@ -15,7 +16,7 @@
         "forms": "Klasse",
         "rooms": "Raum",
         "teachers": "Lehrer"
-    }
+    };
     let controller = new AbortController();
     
     function load_lessons(date, plan_type, entity) {
@@ -30,6 +31,7 @@
                 try {
                     lessons = data["plans"][plan_type][entity] || [];
                     info = data["info"];
+                    week_letter = info.week;
                 } catch {
                     lessons = []
                 }
@@ -324,6 +326,14 @@
             }
         }
     }
+    :global(.info-element .dropdown.top) {
+        border-radius: 5px 5px 0px 0px !important;    
+        box-shadow: 0 -4px 4px -1px rgba(0, 0, 0, 0.2), 0 -5px 5px 0 rgba(0, 0, 0, 0.14), 0 -10px 10px 0 rgba(0, 0, 0, 0.12) !important;
+    }
+    :global(.desktop-view .info-element .dropdown.top) {
+        border-radius: 8px 8px 0px 0px !important;
+        box-shadow: 0 -4px 4px -1px rgba(0, 0, 0, 0.2), 0 -5px 5px 0 rgba(0, 0, 0, 0.14), 0 -10px 10px 0 rgba(0, 0, 0, 0.12) !important;
+    }
     :global(.mobile-view .info-element .dropdown) {
         button {
             font-size: 0.875rem;
@@ -398,6 +408,7 @@
     .last-updated {
         margin: 16px 0px;
         font-size: clamp(0.875rem, 2.8vmin, 1.75rem);
+        line-height: 1.5;
     }
 
     .additional-info {

client/src/Weekplan.svelte

@@ -0,0 +1,58 @@
+<script>
+    import Plan from "./Plan.svelte";
+    
+    export let api_base;
+    export let week_start;
+    export let plan_type;
+    export let plan_value;
+
+    let weekdates = [];
+    let week_letter = "";
+    let plan_type_map = {
+        "forms": "Klasse",
+        "rooms": "Raum",
+        "teachers": "Lehrer"
+    };
+
+    function getMonday(d) {
+        d = new Date(d);
+        var day = d.getDay(),
+            diff = d.getDate() - day + (day == 0 ? -6:1); // adjust when day is sunday
+        return new Date(d.setDate(diff));
+    }
+    function gen_weekdates(week_start) {
+        let converted_week_start = new Date(getMonday(week_start));
+        let tmp_new_date = null;
+        weekdates = [];
+        for (let i = 0; i < 5; i++) {
+            tmp_new_date = new Date(converted_week_start.getTime() + (3600 * 1000 * 24 * i));
+            weekdates.push(`${tmp_new_date.getFullYear()}-${('00'+(tmp_new_date.getMonth()+1)).slice(-2)}-${('00'+tmp_new_date.getDate()).slice(-2)}`);
+        }
+    }
+    $: gen_weekdates(week_start);
+</script>
+<div class="responsive-heading">
+    Wochenplan für {plan_type_map[plan_type]} <span class="custom-badge">{plan_value}</span> 
+    in der Woche vom <span class="custom-badge">{week_start}</span> <span class="no-linebreak">({week_letter}-Woche)</span>
+</div>
+<div class="week_plan">
+    <Plan bind:api_base date={weekdates[0]} bind:plan_type bind:plan_value show_title={false} extra_height={false} bind:week_letter />
+    <Plan bind:api_base date={weekdates[1]} bind:plan_type bind:plan_value show_title={false} extra_height={false} />
+    <Plan bind:api_base date={weekdates[2]} bind:plan_type bind:plan_value show_title={false} extra_height={false} />
+    <Plan bind:api_base date={weekdates[3]} bind:plan_type bind:plan_value show_title={false} extra_height={false} />
+    <Plan bind:api_base date={weekdates[4]} bind:plan_type bind:plan_value show_title={false} extra_height={false} />
+</div>
+<style lang="scss">
+    .week_plan {
+        display: flex;
+        flex-direction: row;
+        gap: 10px;
+        width: 100%;
+        overflow: scroll;
+    }
+    .responsive-heading {
+        font-size: clamp(1.063rem, 4vw, 2.28rem);
+        line-height: clamp(1.406rem, 4.5vmax, 2.813rem);
+        margin-bottom: 15px;
+    }
+</style>