From c4d98a5564cf3937e0132a9add73575de31672f8 Mon Sep 17 00:00:00 2001
From: OfficialBrot <36410565+OfficialFreak@users.noreply.github.com>
Date: Sun, 17 Mar 2024 19:51:19 +0100
Subject: [PATCH 1/3] Weekplan Progress

---
 client/src/App.svelte                         |   6 +-
 .../src/components/{ => Plan}/Lesson.svelte   |   8 +-
 client/src/components/{ => Plan}/Plan.svelte  |  14 +-
 client/src/components/Weekplan.svelte         |   9 -
 client/src/components/Weekplan/Lesson.svelte  | 503 ++++++++++++++++++
 .../src/components/Weekplan/Weekplan.svelte   |  77 +++
 6 files changed, 594 insertions(+), 23 deletions(-)
 rename client/src/components/{ => Plan}/Lesson.svelte (98%)
 rename client/src/components/{ => Plan}/Plan.svelte (98%)
 delete mode 100644 client/src/components/Weekplan.svelte
 create mode 100644 client/src/components/Weekplan/Lesson.svelte
 create mode 100644 client/src/components/Weekplan/Weekplan.svelte

diff --git a/client/src/App.svelte b/client/src/App.svelte
index a558b407..e4aec56f 100644
--- a/client/src/App.svelte
+++ b/client/src/App.svelte
@@ -1,6 +1,6 @@
 <script>
-    import Plan from "./components/Plan.svelte";
-    import Weekplan from "./components/Weekplan.svelte";
+    import Plan from "./components/Plan/Plan.svelte";
+    import Weekplan from "./components/Weekplan/Weekplan.svelte";
     import Authentication from "./components/Authentication.svelte";
     import LandingPage from "./components/LandingPage.svelte";
     import LandingPageNavbar from "./components/LandingPageNavbar.svelte";
@@ -509,7 +509,7 @@
                 {#if $current_page.substring(0, 4) === "plan"}
                     <Plan bind:api_base bind:school_num bind:date bind:plan_type bind:plan_value bind:all_rooms bind:meta bind:selected_revision bind:enabled_dates bind:free_days bind:available_plan_version external_times={$settings.external_times} />
                 {:else}
-                    <Weekplan bind:api_base bind:week_start={date} bind:plan_type bind:plan_value />
+                    <Weekplan bind:api_base bind:school_num bind:date bind:plan_type bind:plan_value bind:all_rooms bind:meta bind:selected_revision bind:enabled_dates bind:free_days bind:available_plan_version />
                 {/if}
                 <!-- Select Revision (Plan Version) -->
                 {#if $settings.show_revision_selector}
diff --git a/client/src/components/Lesson.svelte b/client/src/components/Plan/Lesson.svelte
similarity index 98%
rename from client/src/components/Lesson.svelte
rename to client/src/components/Plan/Lesson.svelte
index e78fcea4..1af1dbbe 100644
--- a/client/src/components/Lesson.svelte
+++ b/client/src/components/Plan/Lesson.svelte
@@ -1,8 +1,8 @@
 <script>
-    import Dropdown from "../base_components/Dropdown.svelte";
-    import {selected_favorite, settings} from "../stores";
-    import {arraysEqual} from "../utils.js";
-    import {getLabelOfPeriods} from "../periods_utils.js";
+    import Dropdown from "../../base_components/Dropdown.svelte";
+    import {selected_favorite, settings} from "../../stores.js";
+    import {arraysEqual} from "../../utils.js";
+    import {getLabelOfPeriods} from "../../periods_utils.js";
 
     export let lesson;
     export let date;
diff --git a/client/src/components/Plan.svelte b/client/src/components/Plan/Plan.svelte
similarity index 98%
rename from client/src/components/Plan.svelte
rename to client/src/components/Plan/Plan.svelte
index 3ed661f5..009e23d7 100644
--- a/client/src/components/Plan.svelte
+++ b/client/src/components/Plan/Plan.svelte
@@ -1,14 +1,14 @@
 <script>
     import {onMount} from 'svelte';
     import Lesson from './Lesson.svelte';
-    import Rooms from "./Rooms.svelte";
-    import {notifications} from '../notifications.js';
+    import Rooms from "../Rooms.svelte";
+    import {notifications} from '../../notifications.js';
     import { swipe } from 'svelte-gestures';
-    import {indexed_db, settings, title, selected_favorite, favorites} from '../stores.js';
-    import {arraysEqual, format_date, format_timestamp, replace_hash, replace_page, update_hash} from "../utils.js";
-    import {sameBlock, get_plan_version, get_teacher_data, load_plan, gen_location_hash, load_lessons, apply_preferences, getDateDisabled} from "../plan.js";
-    import {getLabelOfPeriods} from "../periods_utils.js";
-    import Dropdown from '../base_components/Dropdown.svelte';
+    import {indexed_db, settings, title, selected_favorite, favorites} from '../../stores.js';
+    import {arraysEqual, format_date, format_timestamp, replace_hash, replace_page, update_hash} from "../../utils.js";
+    import {sameBlock, get_plan_version, get_teacher_data, load_plan, gen_location_hash, load_lessons, apply_preferences, getDateDisabled} from "../../plan.js";
+    import {getLabelOfPeriods} from "../../periods_utils.js";
+    import Dropdown from '../../base_components/Dropdown.svelte';
 
     export let api_base;
     export let school_num;
diff --git a/client/src/components/Weekplan.svelte b/client/src/components/Weekplan.svelte
deleted file mode 100644
index e020524c..00000000
--- a/client/src/components/Weekplan.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<script>
-
-</script>
-
-<h1 class="plan-heading">Coming soon...</h1>
-
-<style lang="scss">
-
-</style>
\ No newline at end of file
diff --git a/client/src/components/Weekplan/Lesson.svelte b/client/src/components/Weekplan/Lesson.svelte
new file mode 100644
index 00000000..97f4d0f9
--- /dev/null
+++ b/client/src/components/Weekplan/Lesson.svelte
@@ -0,0 +1,503 @@
+<script>
+    import Dropdown from "../../base_components/Dropdown.svelte";
+    import {selected_favorite, settings} from "../../stores.js";
+    import {arraysEqual} from "../../utils.js";
+    import {getLabelOfPeriods} from "../../periods_utils.js";
+
+    export let lesson;
+    export let date;
+    export let plan_type;
+    export let plan_value;
+
+    $: only_teacher_absent = lesson.scheduled_teachers?.length !== 0 && lesson.current_teachers?.length === 0 && lesson.takes_place;
+
+    $: teachers = (lesson.takes_place && !only_teacher_absent ? lesson.current_teachers : lesson.scheduled_teachers) || [];
+    $: s_teachers = (!arraysEqual(lesson.scheduled_teachers, teachers) ? lesson.scheduled_teachers?.filter(t => !teachers.includes(t)) : []) || [];
+
+    $: forms = (lesson.takes_place ? lesson.current_forms : lesson.scheduled_forms) || [];
+    $: s_forms = (!arraysEqual(lesson.scheduled_forms, forms) ? lesson.scheduled_forms?.filter(f => !forms.includes(f)) : []) || []
+    $: forms_str = lesson.takes_place ? lesson.current_forms_str : lesson.scheduled_forms_str;
+    $: s_forms_str = s_forms.length !== 0 ? lesson.scheduled_forms_str : "";
+
+    $: rooms = (lesson.takes_place ? lesson.current_rooms : lesson.scheduled_rooms) || [];
+    $: s_rooms = (!arraysEqual(lesson.scheduled_rooms, rooms) ? lesson.scheduled_rooms?.filter(r => !rooms.includes(r)) : []) || [];
+
+    $: subject_changed = lesson.subject_changed && lesson.takes_place && !lesson.is_unplanned;
+    $: teacher_changed = lesson.teacher_changed && lesson.takes_place && !lesson.is_unplanned;
+    $: room_changed = lesson.room_changed && lesson.takes_place && !lesson.is_unplanned;
+    $: forms_changed = lesson.forms_changed && lesson.takes_place && !lesson.is_unplanned;
+</script>
+
+<div class="card" class:cancelled={!lesson.takes_place} class:changed={lesson.is_unplanned}>
+    <div class="vertical-align">
+        <!-- Subject -->
+        <div class="subject info-element extra_padding" class:changed={subject_changed} class:changed_filled_in={$settings.filled_in_buttons && subject_changed}>
+            {#if lesson.scheduled_class == null && lesson.current_class == null}
+                -
+            {:else}
+                {lesson.current_class != null ? lesson.current_class : ""}
+                {#if lesson.takes_place}
+                    {#if lesson.scheduled_class !== lesson.current_class && lesson.scheduled_class != null}
+                        {#if lesson.current_class != null}&nbsp;{/if}
+                        <s>{lesson.scheduled_class}</s>
+                    {/if}
+                {:else}
+                    {lesson.scheduled_class}
+                {/if}
+            {/if}
+        </div>
+        <!-- Teachers -->
+        {#if plan_type !== "teachers"}
+            <div class="teachers vert-align info-element first_half" class:changed={teacher_changed} class:changed_filled_in={$settings.filled_in_buttons && teacher_changed}
+                 class:teacher_absent={only_teacher_absent} class:cancelled_filled_in={$settings.filled_in_buttons && only_teacher_absent}>
+                {#if teachers.length !== 0 || s_teachers.length !== 0}
+                    {#each teachers || [] as teacher}
+                        <button on:click={() => {
+                            plan_type = "teachers";
+                            plan_value = teacher;
+                            selected_favorite.set(-1);
+                        }}>{teacher}</button>
+                    {/each}
+                    {#each s_teachers || [] as teacher}
+                        <button on:click={() => {
+                            plan_type = "teachers";
+                            plan_value = teacher;
+                            selected_favorite.set(-1);
+                        }}><s>{teacher}</s></button>
+                    {/each}
+                {:else}
+                    <span class="extra_padding">-</span>
+                {/if}
+            </div>
+        {/if}
+        <!-- Rooms -->
+        {#if plan_type !== "rooms"}
+            <div class="rooms vert-align info-element" class:changed={room_changed} class:changed_filled_in={$settings.filled_in_buttons && room_changed}>
+                {#if rooms.length !== 0 || s_rooms.length !== 0}
+                    {#each rooms || [] as room}
+                        <button on:click={() => {
+                            plan_type = "rooms";
+                            plan_value = room;
+                            selected_favorite.set(-1);
+                        }}>{room}</button>
+                    {:else}
+                        <span class="extra_padding">-</span>
+                    {/each}
+                    {#each s_rooms || [] as room}
+                        <button on:click={() => {
+                            plan_type = "rooms";
+                            plan_value = room;
+                            selected_favorite.set(-1);
+                        }}><s>{room}</s></button>
+                    {/each}
+                {:else}
+                    <span class="extra_padding">-</span>
+                {/if}
+            </div>
+        {/if}
+        <!-- Forms -->
+        {#if plan_type !== "forms"}
+            {#if forms.length === 0 && s_forms.length === 0}
+                <div class="forms info-element vert-align" class:changed={forms_changed}>
+                    <span class="extra_padding">-</span>
+                </div>
+            {:else if forms.length === 1 && s_forms.length === 0}
+                <div class="forms info-element vert-align" class:changed={forms_changed}>
+                    <button on:click={() => {
+                    plan_type = "forms";
+                    plan_value = forms[0];
+                    selected_favorite.set(-1);
+                }}>{forms[0]}</button>
+                </div>
+            {:else if forms.length === 0 && s_forms.length === 1}
+                <div class="forms info-element vert-align" class:changed={forms_changed}>
+                    <button on:click={() => {
+                    plan_type = "forms";
+                    plan_value = s_forms[0];
+                    selected_favorite.set(-1);
+                }}><s>{s_forms[0]}</s></button>
+                </div>
+            {:else}
+                <div class="max-width">
+                    <Dropdown small={true} transform_origin_x="50%">
+                        <button slot="toggle_button" let:toggle on:click={toggle} class="toggle-button center-align" class:changed={forms_changed}>
+                            <span class="grow">{forms_str}&nbsp;<s>{s_forms_str}</s></span>
+                            <span class="material-symbols-outlined dropdown-arrow centered_txt">arrow_drop_down</span>
+                        </button>
+
+                        {#each forms as form}
+                            <button on:click={() => {
+                            plan_type = "forms";
+                            plan_value = form;
+                            selected_favorite.set(-1);
+                        }}>{form}</button>
+                        {/each}
+                        {#each s_forms as form}
+                            <button on:click={() => {
+                            plan_type = "forms";
+                            plan_value = form;
+                            selected_favorite.set(-1);
+                        }}><s>{form}</s></button>
+                        {/each}
+                    </Dropdown>
+                </div>
+            {/if}
+        {/if}
+    </div>
+    <!-- TODO: Popup for Additional Infos and clickable elements -->
+    <div style="display: none !important;">
+        {#if (lesson.info.length > 0) || (plan_type === "forms" && (forms.length > 1)) || (plan_type === "teachers" && (teachers.length > 1)) || (plan_type === "rooms" && (rooms.length > 1))}
+            <div class="info-element lesson-info">
+                <ul>
+                    {#each lesson.info as info_paragraph}
+                        {#each info_paragraph as info_message}
+                            <li>
+                                <div class="horizontal_wrapper">
+                                    {#each info_message.text_segments as text_segment}
+                                        {#if text_segment.link?.value.length === 1}
+                                            <button class="no-btn-visuals" on:click={() => {
+                                                date = text_segment.link.date;
+                                                plan_type = text_segment.link.type;
+                                                plan_value = text_segment.link.value[0];
+                                                selected_favorite.set(-1);
+                                            }}>
+                                                <div class="clickable">{text_segment.text}</div>
+                                            </button>
+                                        {:else if text_segment.link?.value.length >= 2}
+                                            <div class="fit-content-width">
+                                                <Dropdown small={true} transform_origin_x="50%">
+                                                    <button slot="toggle_button" let:toggle on:click={toggle} class="toggle-button">
+                                                        <span class="grow">{text_segment.text}</span>
+                                                        <span class="material-symbols-outlined dropdown-arrow">arrow_drop_down</span>
+                                                    </button>
+
+                                                    {#each text_segment.link.value as item}
+                                                        <button on:click={() => {
+                                                            date=text_segment.link.date;
+                                                            plan_type = text_segment.link.type;
+                                                            plan_value = item;
+                                                            selected_favorite.set(-1);
+                                                        }}>{item}</button>
+                                                    {/each}
+                                                </Dropdown>
+                                            </div>
+                                        {:else}
+                                            <button class="no-btn-visuals">{text_segment.text}</button>
+                                        {/if}
+                                    {/each}
+                                </div>
+                            </li>
+                        {/each}
+                    {/each}
+                    {#if plan_type === "forms" && (forms.length > 1)}
+                        <li>
+                            <div class="horizontal_wrapper">
+                                Beteiligte Klassen:
+                                <div class="fit-content-width">
+                                    <Dropdown small={true} transform_origin_x="50%">
+                                        <button slot="toggle_button" let:toggle on:click={toggle} class="toggle-button">
+                                            <span class="grow">{forms_str}</span>
+                                            <span class="material-symbols-outlined dropdown-arrow">arrow_drop_down</span>
+                                        </button>
+
+                                        {#each forms as form}
+                                            <button on:click={() => {
+                                            plan_type = "forms";
+                                            plan_value = form;
+                                        }}>{form}</button>
+                                        {/each}
+                                    </Dropdown>
+                                </div>
+                            </div>
+                        </li>
+                    {/if}
+                    {#if plan_type === "teachers" && (teachers.length > 1)}
+                        <li>
+                            <div class="horizontal_wrapper">
+                                Beteiligte Lehrer:
+                                <div class="fit-content-width">
+                                    <Dropdown small={true} transform_origin_x="50%">
+                                        <button slot="toggle_button" let:toggle on:click={toggle} class="toggle-button">
+                                            <span class="grow">{teachers.join(', ')}</span>
+                                            <span class="material-symbols-outlined dropdown-arrow">arrow_drop_down</span>
+                                        </button>
+
+                                        {#each teachers as teacher}
+                                            <button on:click={() => {
+                                            plan_type = "teachers";
+                                            plan_value = teacher;
+                                        }}>{teacher}</button>
+                                        {/each}
+                                    </Dropdown>
+                                </div>
+                            </div>
+                        </li>
+                    {/if}
+                    {#if plan_type === "rooms" && (rooms.length > 1)}
+                        <li>
+                            <div class="horizontal_wrapper">
+                                In Räumen:
+                                <div class="fit-content-width">
+                                    <Dropdown small={true} transform_origin_x="50%">
+                                        <button slot="toggle_button" let:toggle on:click={toggle} class="toggle-button">
+                                            <span class="grow">{rooms.join(', ')}</span>
+                                            <span class="material-symbols-outlined dropdown-arrow">arrow_drop_down</span>
+                                        </button>
+
+                                        {#each rooms as room}
+                                            <button on:click={() => {
+                                            plan_type = "rooms";
+                                            plan_value = room;
+                                            selected_favorite.set(-1);
+                                        }}>{room}</button>
+                                        {/each}
+                                    </Dropdown>
+                                </div>
+                            </div>
+                        </li>
+                    {/if}
+                </ul>
+            </div>
+        {/if}
+    </div>
+</div>
+<style lang="scss">
+  .dropdown-arrow {
+    font-size: 1.4em;
+    display: block;
+    transition: transform .2s ease;
+    pointer-events: none;
+
+    @media only screen and (min-width: 1501px) {
+      font-size: 1em;
+      margin-left: .2em;
+
+      &.centered_txt {
+        position: absolute;
+        right: 10px;
+      }
+    }
+  }
+
+  :global(.open) .dropdown-arrow {
+    transform: rotate(180deg);
+  }
+
+  .fit-content-width {
+    width: fit-content;
+  }
+
+  .max-width {
+    width: 100%;
+  }
+
+  .fit-content-width .dropdown-wrapper button, .max-width .dropdown-wrapper button {
+    &.toggle-button {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+      background: rgba(255, 255, 255, 0.08);
+      border-radius: 5px;
+      overflow: hidden;
+      text-align: left;
+      font-weight: inherit;
+      font-size: 0.875rem;
+      line-height: 1.313rem;
+      color: var(--text-color);
+
+      span.grow {
+        flex: 1;
+        white-space: nowrap;
+      }
+
+      &.center-align {
+        text-align: center;
+      }
+
+      &:hover, &:focus-visible {
+        background-color: rgba(255, 255, 255, 0.15);
+      }
+    }
+
+    border: none;
+    background: transparent;
+    color: var(--text-color);
+    transition: background-color .2s ease;
+    width: 100%;
+    padding: 5px;
+    font-size: inherit;
+    line-height: 1.313;
+
+    &:hover, &:focus-visible {
+      background-color: rgba(0, 0, 0, 0.5);
+    }
+  }
+
+  .no-btn-visuals {
+    border: 0;
+    background: none;
+    padding: 0;
+    margin: 0;
+    text-align: start;
+  }
+
+  .horizontal_wrapper {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: .3em;
+  }
+
+  .lesson-info {
+    margin-top: 10px;
+    padding: 8px !important;
+    background: rgba(255, 255, 255, 0.05) !important;
+    ul {
+      display: flex;
+      flex-direction: column;
+      gap: 5px;
+    }
+    min-height: unset !important;
+    font-weight: 300;
+
+    button {
+      font-weight: inherit;
+      font-size: 0.875rem;
+      line-height: 1.313rem;
+      color: var(--text-color);
+    }
+
+    .clickable {
+      background: rgba(255, 255, 255, 0.08);
+      border-radius: 5px;
+      padding: 0px 5px;
+      transition: background-color 0.2s ease;
+
+      &:hover, &:focus-visible {
+        background-color: rgba(255, 255, 255, 0.2);
+      }
+    }
+
+    .fit-content-width .dropdown-wrapper button, .max-width .dropdown-wrapper button {
+      padding: 2px 0px 2px 5px;
+    }
+  }
+
+  .info-element {
+    background: rgba(255, 255, 255, 0.08);
+    border-radius: 5px;
+    min-height: 1.943rem;
+
+    &.teacher_absent {
+      background: rgba(255, 255, 255, 0.08);
+      outline: 3px solid var(--cancelled-color);
+      outline-offset: -3px;
+    }
+
+    & > button {
+      border-radius: 0px;
+      &:nth-of-type(1) {
+        border-top-left-radius: 5px;
+        border-top-right-radius: 5px;
+      }
+      &:nth-last-of-type(1) {
+        border-bottom-left-radius: 5px;
+        border-bottom-right-radius: 5px;
+      }
+    }
+  }
+
+  .extra_padding {
+    padding: 5px 0px;
+    line-height: 1.313rem;
+    min-height: 1.313rem;
+  }
+
+  .changed {
+    outline: solid 3px var(--accent-color);
+    outline-offset: -3px;
+  }
+
+  .changed_filled_in {
+    background: var(--accent-color) !important;
+  }
+
+  .subject,
+  .teachers button,
+  .rooms button,
+  .forms button {
+    color: var(--text-color);
+    font-weight: 400;
+    border: none;
+    background: none;
+    width: 100%;
+    height: 100%;
+  }
+
+  .teachers button, .rooms button, .forms button {
+    flex: 1;
+    transition: background-color .2s ease;
+
+    &:hover, &:focus-visible {
+      background: rgba(255, 255, 255, 0.08);
+    }
+  }
+
+  .teachers button {
+    font-weight: 600;
+  }
+
+  .lesson-period {
+    white-space: nowrap;
+  }
+
+  .lesson-period {
+    font-size: 0.875rem;
+    font-weight: 400;
+  }
+
+  .lesson-time {
+    font-size: 0.75rem;
+    font-weight: 400;
+  }
+
+  .subject,
+  .info-element,
+  .info-element>button,
+  .extra_padding {
+    font-size: 0.875rem;
+  }
+
+  .cancelled {
+    outline: var(--cancelled-color) solid 3px;
+    outline-offset: -3px;
+  }
+
+  .cancelled_filled_in {
+    background: var(--cancelled-color) !important;
+  }
+
+  .vertical-align {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    gap: 8vw;
+
+    @media only screen and (max-width: 380px) {
+      gap: 5px;
+    }
+  }
+
+  .vert-align {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .card {
+    background: rgba(255, 255, 255, 0.05);
+  }
+</style>
\ No newline at end of file
diff --git a/client/src/components/Weekplan/Weekplan.svelte b/client/src/components/Weekplan/Weekplan.svelte
new file mode 100644
index 00000000..7598adce
--- /dev/null
+++ b/client/src/components/Weekplan/Weekplan.svelte
@@ -0,0 +1,77 @@
+<script>
+    import Lesson from './Lesson.svelte';
+    import {onMount} from "svelte";
+    import {replace_page} from "../../utils.js";
+    import {title} from "../../stores.js";
+
+    export let api_base;
+    export let school_num;
+    export let date;
+    export let plan_type;
+    export let plan_value;
+    export let meta;
+    export let show_title = true;
+    export let extra_height = true;
+    export let week_letter = "";
+    export let all_rooms;
+    export let selected_revision;
+    export let enabled_dates;
+    export let free_days;
+    export let available_plan_version;
+
+    onMount(() => {
+        if(!school_num) {
+            replace_page('school_manager');
+        }
+        title.set("Wochenplan");
+    });
+
+    let test_lesson = {
+        "begin": "08:00",
+        "class_number": "353",
+        "current_class": "5Et12",
+        "current_forms": [
+            "5/1",
+            "5/2"
+        ],
+        "current_forms_str": "5/1,2",
+        "current_rooms": [
+            "214"
+        ],
+        "current_teachers": [
+            "CRL"
+        ],
+        "end": "09:30",
+        "forms_changed": false,
+        "info": [],
+        "is_unplanned": false,
+        "periods": [
+            1,
+            2
+        ],
+        "room_changed": false,
+        "scheduled_class": "5Et12",
+        "scheduled_forms": [
+            "5/1",
+            "5/2"
+        ],
+        "scheduled_forms_str": "5/1,2",
+        "scheduled_rooms": [
+            "214"
+        ],
+        "scheduled_teachers": [
+            "CRL"
+        ],
+        "subject_changed": false,
+        "takes_place": true,
+        "teacher_changed": false
+    };
+</script>
+
+Yippeee
+
+<Lesson lesson={test_lesson} bind:plan_type bind:plan_value bind:date />
+
+<style lang="scss">
+
+</style>
\ No newline at end of file

From ce7f36e4ddf6a29896e44a8e5b9cf2e9c974db08 Mon Sep 17 00:00:00 2001
From: OfficialBrot <36410565+OfficialFreak@users.noreply.github.com>
Date: Tue, 19 Mar 2024 17:27:48 +0100
Subject: [PATCH 2/3] Wochenplan Design Progress

---
 client/src/components/Plan/Plan.svelte        |   7 +-
 client/src/components/Weekplan/Lesson.svelte  | 118 +++---
 .../src/components/Weekplan/Weekplan.svelte   | 380 +++++++++++++++++-
 3 files changed, 422 insertions(+), 83 deletions(-)

diff --git a/client/src/components/Plan/Plan.svelte b/client/src/components/Plan/Plan.svelte
index 009e23d7..ba592faf 100644
--- a/client/src/components/Plan/Plan.svelte
+++ b/client/src/components/Plan/Plan.svelte
@@ -16,7 +16,6 @@
     export let plan_type;
     export let plan_value;
     export let meta;
-    export let show_title = true;
     export let extra_height = true;
     export let week_letter = "";
     export let external_times = true;
@@ -40,7 +39,7 @@
     let cache_loading_failed = false;
     let network_loading_failed = false;
     let data_from_cache = false;
-    let plan_type_map = {
+    const plan_type_map = {
         "forms": "Klasse",
         "rooms": "Raum",
         "teachers": "Lehrer"
@@ -229,6 +228,8 @@
         }
         update_hash(gen_location_hash("plan", school_num, date, plan_type, plan_value));
     })();
+
+    $: console.log(rooms_data);
 </script>
 
 <svelte:window on:keydown={keydown_handler}/>
@@ -236,7 +237,7 @@
 
 <div class:plan={plan_type !== "room_overview"} class:extra-height={extra_height}>
     {#if plan_type !== "room_overview"}
-        {#if show_title && info && plan_type && plan_value}
+        {#if info && plan_type && plan_value}
             {#if plan_type === "forms" && ($selected_favorite !== -1)}
                 <button on:click={() => {preferences_apply = !preferences_apply}} class="plus-btn">{preferences_apply ? "Alle Stunden anzeigen" : "Nur ausgewählte anzeigen"}</button>
             {/if}
diff --git a/client/src/components/Weekplan/Lesson.svelte b/client/src/components/Weekplan/Lesson.svelte
index 97f4d0f9..4fb68c08 100644
--- a/client/src/components/Weekplan/Lesson.svelte
+++ b/client/src/components/Weekplan/Lesson.svelte
@@ -29,9 +29,9 @@
 </script>
 
 <div class="card" class:cancelled={!lesson.takes_place} class:changed={lesson.is_unplanned}>
-    <div class="vertical-align">
+    <div class="vertical-align" style="height: 100%;">
         <!-- Subject -->
-        <div class="subject info-element extra_padding" class:changed={subject_changed} class:changed_filled_in={$settings.filled_in_buttons && subject_changed}>
+        <div class="subject" class:changed={subject_changed} class:changed_filled_in={$settings.filled_in_buttons && subject_changed}>
             {#if lesson.scheduled_class == null && lesson.current_class == null}
                 -
             {:else}
@@ -48,7 +48,7 @@
         </div>
         <!-- Teachers -->
         {#if plan_type !== "teachers"}
-            <div class="teachers vert-align info-element first_half" class:changed={teacher_changed} class:changed_filled_in={$settings.filled_in_buttons && teacher_changed}
+            <div class="teachers" class:changed={teacher_changed} class:changed_filled_in={$settings.filled_in_buttons && teacher_changed}
                  class:teacher_absent={only_teacher_absent} class:cancelled_filled_in={$settings.filled_in_buttons && only_teacher_absent}>
                 {#if teachers.length !== 0 || s_teachers.length !== 0}
                     {#each teachers || [] as teacher}
@@ -72,7 +72,7 @@
         {/if}
         <!-- Rooms -->
         {#if plan_type !== "rooms"}
-            <div class="rooms vert-align info-element" class:changed={room_changed} class:changed_filled_in={$settings.filled_in_buttons && room_changed}>
+            <div class="rooms horizontal-align info-element" class:changed={room_changed} class:changed_filled_in={$settings.filled_in_buttons && room_changed}>
                 {#if rooms.length !== 0 || s_rooms.length !== 0}
                     {#each rooms || [] as room}
                         <button on:click={() => {
@@ -98,11 +98,11 @@
         <!-- Forms -->
         {#if plan_type !== "forms"}
             {#if forms.length === 0 && s_forms.length === 0}
-                <div class="forms info-element vert-align" class:changed={forms_changed}>
+                <div class="forms info-element vertical-align" class:changed={forms_changed}>
                     <span class="extra_padding">-</span>
                 </div>
             {:else if forms.length === 1 && s_forms.length === 0}
-                <div class="forms info-element vert-align" class:changed={forms_changed}>
+                <div class="forms info-element vertical-align" class:changed={forms_changed}>
                     <button on:click={() => {
                     plan_type = "forms";
                     plan_value = forms[0];
@@ -110,7 +110,7 @@
                 }}>{forms[0]}</button>
                 </div>
             {:else if forms.length === 0 && s_forms.length === 1}
-                <div class="forms info-element vert-align" class:changed={forms_changed}>
+                <div class="forms info-element vertical-align" class:changed={forms_changed}>
                     <button on:click={() => {
                     plan_type = "forms";
                     plan_value = s_forms[0];
@@ -118,7 +118,7 @@
                 }}><s>{s_forms[0]}</s></button>
                 </div>
             {:else}
-                <div class="max-width">
+                <div class="form-dropdown-wrapper">
                     <Dropdown small={true} transform_origin_x="50%">
                         <button slot="toggle_button" let:toggle on:click={toggle} class="toggle-button center-align" class:changed={forms_changed}>
                             <span class="grow">{forms_str}&nbsp;<s>{s_forms_str}</s></span>
@@ -152,7 +152,7 @@
                     {#each lesson.info as info_paragraph}
                         {#each info_paragraph as info_message}
                             <li>
-                                <div class="horizontal_wrapper">
+                                <div class="horizontal-align">
                                     {#each info_message.text_segments as text_segment}
                                         {#if text_segment.link?.value.length === 1}
                                             <button class="no-btn-visuals" on:click={() => {
@@ -191,7 +191,7 @@
                     {/each}
                     {#if plan_type === "forms" && (forms.length > 1)}
                         <li>
-                            <div class="horizontal_wrapper">
+                            <div class="horizontal-align">
                                 Beteiligte Klassen:
                                 <div class="fit-content-width">
                                     <Dropdown small={true} transform_origin_x="50%">
@@ -213,7 +213,7 @@
                     {/if}
                     {#if plan_type === "teachers" && (teachers.length > 1)}
                         <li>
-                            <div class="horizontal_wrapper">
+                            <div class="horizontal-align">
                                 Beteiligte Lehrer:
                                 <div class="fit-content-width">
                                     <Dropdown small={true} transform_origin_x="50%">
@@ -235,7 +235,7 @@
                     {/if}
                     {#if plan_type === "rooms" && (rooms.length > 1)}
                         <li>
-                            <div class="horizontal_wrapper">
+                            <div class="horizontal-align">
                                 In Räumen:
                                 <div class="fit-content-width">
                                     <Dropdown small={true} transform_origin_x="50%">
@@ -287,11 +287,7 @@
     width: fit-content;
   }
 
-  .max-width {
-    width: 100%;
-  }
-
-  .fit-content-width .dropdown-wrapper button, .max-width .dropdown-wrapper button {
+  .fit-content-width .dropdown-wrapper button, .form-dropdown-wrapper .dropdown-wrapper button {
     &.toggle-button {
       display: flex;
       flex-direction: row;
@@ -302,8 +298,6 @@
       overflow: hidden;
       text-align: left;
       font-weight: inherit;
-      font-size: 0.875rem;
-      line-height: 1.313rem;
       color: var(--text-color);
 
       span.grow {
@@ -325,9 +319,7 @@
     color: var(--text-color);
     transition: background-color .2s ease;
     width: 100%;
-    padding: 5px;
     font-size: inherit;
-    line-height: 1.313;
 
     &:hover, &:focus-visible {
       background-color: rgba(0, 0, 0, 0.5);
@@ -342,7 +334,7 @@
     text-align: start;
   }
 
-  .horizontal_wrapper {
+  .horizontal-align {
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -351,7 +343,7 @@
 
   .lesson-info {
     margin-top: 10px;
-    padding: 8px !important;
+    padding: .1rem !important;
     background: rgba(255, 255, 255, 0.05) !important;
     ul {
       display: flex;
@@ -363,15 +355,13 @@
 
     button {
       font-weight: inherit;
-      font-size: 0.875rem;
-      line-height: 1.313rem;
       color: var(--text-color);
     }
 
     .clickable {
       background: rgba(255, 255, 255, 0.08);
       border-radius: 5px;
-      padding: 0px 5px;
+      padding: 0;
       transition: background-color 0.2s ease;
 
       &:hover, &:focus-visible {
@@ -379,15 +369,15 @@
       }
     }
 
-    .fit-content-width .dropdown-wrapper button, .max-width .dropdown-wrapper button {
-      padding: 2px 0px 2px 5px;
+    .fit-content-width .dropdown-wrapper button, .form-dropdown-wrapper .dropdown-wrapper button {
+      padding: 0;
     }
   }
 
   .info-element {
+    display: flex;
     background: rgba(255, 255, 255, 0.08);
     border-radius: 5px;
-    min-height: 1.943rem;
 
     &.teacher_absent {
       background: rgba(255, 255, 255, 0.08);
@@ -396,7 +386,7 @@
     }
 
     & > button {
-      border-radius: 0px;
+      border-radius: 0;
       &:nth-of-type(1) {
         border-top-left-radius: 5px;
         border-top-right-radius: 5px;
@@ -408,12 +398,6 @@
     }
   }
 
-  .extra_padding {
-    padding: 5px 0px;
-    line-height: 1.313rem;
-    min-height: 1.313rem;
-  }
-
   .changed {
     outline: solid 3px var(--accent-color);
     outline-offset: -3px;
@@ -431,8 +415,11 @@
     font-weight: 400;
     border: none;
     background: none;
-    width: 100%;
-    height: 100%;
+    text-align: center;
+  }
+
+  .rooms.horizontal-align {
+    gap: 0;
   }
 
   .teachers button, .rooms button, .forms button {
@@ -448,27 +435,6 @@
     font-weight: 600;
   }
 
-  .lesson-period {
-    white-space: nowrap;
-  }
-
-  .lesson-period {
-    font-size: 0.875rem;
-    font-weight: 400;
-  }
-
-  .lesson-time {
-    font-size: 0.75rem;
-    font-weight: 400;
-  }
-
-  .subject,
-  .info-element,
-  .info-element>button,
-  .extra_padding {
-    font-size: 0.875rem;
-  }
-
   .cancelled {
     outline: var(--cancelled-color) solid 3px;
     outline-offset: -3px;
@@ -481,23 +447,29 @@
   .vertical-align {
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
-    align-items: center;
-    gap: 8vw;
-
-    @media only screen and (max-width: 380px) {
-      gap: 5px;
-    }
-  }
-
-  .vert-align {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
     justify-content: center;
+    align-items: center;
+    gap: .1rem;
   }
 
   .card {
-    background: rgba(255, 255, 255, 0.05);
+    position: relative;
+    background: var(--background);
+    border-radius: .5rem;
+    height: 100%;
+    width: 6rem;
+    padding: .2rem;
+    box-sizing: border-box;
+    font-size: var(--font-size-sm);
+
+    &::before {
+      content: "";
+      pointer-events: none;
+      position: absolute;
+      inset: 0;
+      z-index: 0;
+      border-radius: .5rem;
+      background: rgba(255, 255, 255, 0.05);
+    }
   }
 </style>
\ No newline at end of file
diff --git a/client/src/components/Weekplan/Weekplan.svelte b/client/src/components/Weekplan/Weekplan.svelte
index 7598adce..6227299d 100644
--- a/client/src/components/Weekplan/Weekplan.svelte
+++ b/client/src/components/Weekplan/Weekplan.svelte
@@ -1,8 +1,11 @@
 <script>
     import Lesson from './Lesson.svelte';
     import {onMount} from "svelte";
-    import {replace_page} from "../../utils.js";
-    import {title} from "../../stores.js";
+    import {arraysEqual, format_date, replace_page} from "../../utils.js";
+    import {selected_favorite, title} from "../../stores.js";
+    import {sameBlock} from "../../plan.js";
+    import {getLabelOfPeriods} from "../../periods_utils.js";
+    import Rooms from "../Rooms.svelte";
 
     export let api_base;
     export let school_num;
@@ -10,7 +13,6 @@
     export let plan_type;
     export let plan_value;
     export let meta;
-    export let show_title = true;
     export let extra_height = true;
     export let week_letter = "";
     export let all_rooms;
@@ -18,6 +20,7 @@
     export let enabled_dates;
     export let free_days;
     export let available_plan_version;
+    let used_rooms_hidden = true;
 
     onMount(() => {
         if(!school_num) {
@@ -26,6 +29,7 @@
         title.set("Wochenplan");
     });
 
+    // TODO: Remove
     let test_lesson = {
         "begin": "08:00",
         "class_number": "353",
@@ -57,7 +61,8 @@
         ],
         "scheduled_forms_str": "5/1,2",
         "scheduled_rooms": [
-            "214"
+            "214",
+            "215"
         ],
         "scheduled_teachers": [
             "CRL"
@@ -66,12 +71,373 @@
         "takes_place": true,
         "teacher_changed": false
     };
-</script>
 
-Yippeee
+    let test_rooms_data = {
+        "free_rooms_by_block": {
+            "1": [
+                "1"
+            ]
+        }
+    };
+
+    let full_teacher_name = "Crazy bro";
+
+    const plan_type_map = {
+        "forms": "Klasse",
+        "rooms": "Raum",
+        "teachers": "Lehrer"
+    };
+
+    // TODO: null setzen wenn nicht verfügbar
+    let week_info = {
+        start: new Date("2024-03-18"),
+        type: "A"
+    };
+
+    // TODO: entfernen
+    plan_type = "forms";
+    plan_value = "5/1"
+
+    // TODO: Logic
+    let preferences_apply = true;
+
+    const lesson_start = 1;
+    const lesson_end = 10;
+    const lesson_count = lesson_end - lesson_start + 1;
+
+    const block_start = 1;
+    const block_end = 5;
+    const block_count = block_end - block_start + 1;
+</script>
 
-<Lesson lesson={test_lesson} bind:plan_type bind:plan_value bind:date />
+{#if plan_type !== "room_overview"}
+    <!-- TODO: Vorhersage von einem Tag mit orangenem Rand anzeigen -->
+    {#if week_info && plan_type && plan_value}
+        {#if plan_type === "forms" && ($selected_favorite !== -1)}
+            <button on:click={() => {preferences_apply = !preferences_apply}} class="plus-btn">{preferences_apply ? "Alle Stunden anzeigen" : "Nur ausgewählte anzeigen"}</button>
+        {/if}
+        <h1 class="plan-heading">
+            Woche für {plan_type_map[plan_type]} <span class="custom-badge">{plan_value}{#if plan_type === "teachers"}{#if full_teacher_name !== null}{` (${full_teacher_name})`}{/if}{/if}</span> vom <span class="custom-badge">{format_date(week_info.start)}</span> <span class="no-linebreak">{#if week_info.type}({week_info.type}-Woche){/if}</span>
+        </h1>
+    {/if}
 
+    <div class="week" style="">
+        <div class="time-indicators">
+            <div class="block-col">
+                {#each {length: block_count} as _, i}
+                    <span>{i + block_start}</span>
+                {/each}
+            </div>
+            <div class="lesson-col">
+                {#each {length: lesson_count} as _, i}
+                    <span>{i + lesson_start}</span>
+                {/each}
+            </div>
+        </div>
+        {#each {length: 5} as _, i}
+        <div class="day" class:last={i === 4}>
+            <h2 class="day-heading">Mon. 11.3.</h2>
+            {#if false} <!-- loading -->
+                <span class="responsive-text">Lädt...</span>
+            {:else if false} <!-- loading_failed -->
+                <span class="responsive-text">Plan konnte nicht geladen werden.</span>
+            {:else}
+                {#if false} <!-- lessons.length === 0 -->
+                    {#if plan_type}
+                        <span class="responsive-text">Keine Stunden</span>
+                    {:else}
+                        <!-- <span class="responsive-text">Wähle eine Klasse, einen Lehrer, einen Raum oder die Raumübersicht aus, um {#if is_default_plan}eine Planvorhersage{:else}einen Plan{/if} zu sehen.</span>-->
+                    {/if}
+                {:else}
+                    <!-- Day Content -->
+                    {#each {length: block_count} as _, i}
+                        <div class="block">
+                            <div class="blocks-container">
+                                <Lesson lesson={test_lesson} bind:plan_type bind:plan_value bind:date />
+                            </div>
+                            <div class="lessons-container">
+                                <div class="lesson top">
+                                </div>
+                                <div class="lesson bottom">
+                                </div>
+                            </div>
+                        </div>
+                    {/each}
+                {/if}
+            {/if}
+        </div>
+        {/each}
+    </div>
+{:else}
+    <button on:click={() => {used_rooms_hidden = !used_rooms_hidden}} class="plus-btn">{used_rooms_hidden ? "Besetzte Räume anzeigen" : "Nur freie Räume anzeigen"}</button>
+    {#if week_info}
+        <h1 class="plan-heading">Freie Räume in der Woche vom <span class="custom-badge">{format_date(week_info.start)}</span> <span class="no-linebreak"/>({week_info.type}-Woche)</h1>
+    {/if}
+    {#if false} <!-- loading -->
+        <span class="responsive-text">Lädt...</span>
+    {:else if false} <!-- loading_failed -->
+        <span class="responsive-text">Plan{#if is_default_plan}vorhersage{/if} konnte nicht geladen werden</span>
+    {:else}
+        <div class="free_rooms_week">
+            {#each {length: 5} as _, i}
+                <div>
+                    <h1 class="plan-heading" style="white-space: nowrap;">Mon. 11.03.</h1>
+                    <Rooms rooms_data={test_rooms_data} bind:plan_type bind:plan_value bind:all_rooms bind:used_rooms_hidden />
+                </div>
+            {/each}
+        </div>
+    {/if}
+{/if}
+<!--
+<div class="day-controls">
+    <button tabindex="-1" on:click={() => {change_day(-1);}} class:hidden={!show_left_key}><span class="material-symbols-outlined left">arrow_back_ios_new</span></button>
+    <button tabindex="-1" on:click={() => {change_day(1);}} class:hidden={!show_right_key}><span class="material-symbols-outlined right">arrow_forward_ios</span></button>
+</div>
+-->
 <style lang="scss">
+  $lesson_height: 4.7rem;
+
+  .free_rooms_week {
+    display: flex;
+    flex-direction: row;
+    gap: 1rem;
+    overflow-x: auto;
+    width: 100%;
+
+    & > div {
+      min-width: min(70vw, 25rem);
+    }
+  }
+
+  .week {
+    display: flex;
+    flex-direction: row;
+
+    width: 100%;
+    overflow-x: auto;
+
+    .time-indicators {
+      display: flex;
+      flex-direction: row;
+      gap: 0.5rem;
+      margin-right: 0.5rem;
+      margin-top: calc(var(--font-size-lg) + .5rem);
+
+      .block-col {
+        display: flex;
+        flex-direction: column;
+
+        span {
+          height: calc(2 * $lesson_height + .5rem);
+          line-height: calc(2 * $lesson_height + .5rem);
+          font-weight: bold;
+          font-size: var(--font-size-lg);
+          text-align: center;
+        }
+      }
+
+      .lesson-col {
+        display: flex;
+        flex-direction: column;
+
+        span {
+          height: calc($lesson_height + .25rem);
+          line-height: calc($lesson_height + .25rem);
+          opacity: 0.5;
+          text-align: center;
+        }
+      }
+    }
+
+    .day {
+      display: flex;
+      flex-direction: column;
+      width: max-content;
+      border-left: 1.5px solid rgba(255, 255, 255, 0.4);
+      border-bottom: 1.5px solid rgba(255, 255, 255, 0.4);
+
+      &.last {
+        border-right: 1.5px solid rgba(255, 255, 255, 0.4);
+      }
+
+      padding: 0 .5rem;
+
+      .day-heading {
+        height: var(--font-size-lg);
+        line-height: var(--font-size-lg);
+        font-size: var(--font-size-lg);
+        font-weight: bold;
+        margin-bottom: 0.5rem;
+        white-space: nowrap;
+      }
+
+      .block {
+        position: relative;
+        padding: .25rem 0;
+
+        &::before {
+          content: "";
+          position: absolute;
+          z-index: -1;
+          width: calc(100% + 1rem);
+          border-top: 1px solid rgba(255, 255, 255, 0.2);
+          top: 50%;
+          left: 50%;
+          transform: translateY(-50%) translateX(-50%);
+        }
+
+        &::after {
+          content: "";
+          position: absolute;
+          z-index: -1;
+          width: calc(100% + 1rem);
+          border-top: 1px solid rgba(255, 255, 255, 0.2);
+          top: 0;
+          left: 50%;
+          transform: translateX(-50%);
+        }
+
+        height: calc(2 * $lesson_height);
+        display: flex;
+        flex-direction: row;
+
+        .blocks-container {
+          height: calc(2 * $lesson_height);
+          display: flex;
+          flex-direction: row;
+          gap: .2rem;
+          padding: .2rem;
+          box-sizing: border-box;
+        }
+
+        .lessons-container {
+          height: calc(2 * $lesson_height);
+          display: flex;
+          flex-direction: column;
+
+          .lesson {
+            height: $lesson_height;
+            gap: .2rem;
+            padding: .2rem;
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: row;
+
+            &.top {
+              padding-bottom: .3rem;
+            }
+            &.bottom {
+              padding-top: .3rem;
+            }
+          }
+        }
+      }
+    }
+  }
+
+
+  .plan-heading {
+    font-size: var(--font-size-md);
+    line-height: normal;
+    font-weight: 700;
+    margin-bottom: 15px;
+
+    @media only screen and (min-width: 1501px) {
+      font-size: var(--font-size-lg);
+    }
+  }
+
+  .custom-badge {
+    display: inline-flex;
+    flex-direction: row;
+    column-gap: .3em;
+    align-items: center;
+
+    background: rgba(255, 255, 255, 0.07);
+    padding: 2px 7px;
+    border-radius: 5px;
+    white-space: nowrap;
+    margin-bottom: .2em;
+  }
+
+  .day-controls {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100vw;
+    display: flex;
+    justify-content: space-between;
+    padding: 20px;
+    box-sizing: border-box;
+    pointer-events: none;
+    z-index: 1;
+
+    button {
+      pointer-events: all;
+      border: none;
+      border-radius: 999vw;
+      background: var(--background);
+      color: var(--text-color);
+      width: calc(var(--font-size-lg) * 2);
+      aspect-ratio: 1;
+      padding: 10px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: hidden;
+      position: relative;
+      opacity: 1;
+      transition: opacity .2s ease, outline .2s ease;
+      box-shadow: 0px 0px 5px var(--background);
+      outline: 2px solid transparent;
+
+      &.hidden {
+        opacity: 0;
+        pointer-events: none;
+      }
+
+      &::before {
+        content: "";
+        position: absolute;
+        inset: 0;
+        background: rgba(255, 255, 255, 0.1);
+        pointer-events: none;
+      }
+
+      span {
+        position: absolute;
+        font-size: var(--font-size-lg);
+
+        // Visually Centering Arrows
+        &.left {
+          margin-left: -4px;
+        }
+
+        &.right {
+          margin-right: -4px;
+        }
+      }
+    }
+  }
+
+  .plus-btn {
+    float: right;
+    border: none;
+    padding: 0px 10px;
+    font-size: var(--font-size-base);
+    height: clamp(calc(1.063rem + 15px), calc(4vw + 15px), calc(2.28rem + 15px));
+    // aspect-ratio: 1;
+    border-radius: 5px;
+    background-color: rgba(255, 255, 255, 0.08);
+    color: var(--text-color);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: background-color .2s ease;
+    margin-left: 20px;
 
+    &:hover, &:focus-visible {
+      background-color: rgba(255, 255, 255, 0.05);
+    }
+  }
 </style>
\ No newline at end of file

From 56a0dc1e8acb7a26bea27c6dc794e5ec4685161e Mon Sep 17 00:00:00 2001
From: OfficialBrot <36410565+OfficialFreak@users.noreply.github.com>
Date: Fri, 22 Mar 2024 19:22:40 +0100
Subject: [PATCH 3/3] Finished Weekplan

---
 client/public/base_static/favicon.png         | Bin 3127 -> 0 bytes
 client/public/index.html                      |   2 +-
 client/src/App.svelte                         |  45 +-
 client/src/base_components/Modal.svelte       | 120 ++---
 client/src/components/Contact.svelte          |   4 +-
 client/src/components/Navbar.svelte           |  21 +-
 client/src/components/PWAInstallHelper.svelte |   8 +-
 client/src/components/Plan/DayInfos.svelte    | 227 +++++++++
 client/src/components/Plan/Lesson.svelte      |  14 +
 client/src/components/Plan/Plan.svelte        | 228 ++--------
 client/src/components/SchoolManager.svelte    |   6 +-
 client/src/components/Settings.svelte         |  24 +-
 client/src/components/Weekplan/Day.svelte     | 429 ++++++++++++++++++
 .../src/components/Weekplan/DayInspect.svelte |  29 ++
 client/src/components/Weekplan/Lesson.svelte  | 180 +++-----
 .../components/Weekplan/LessonInspect.svelte  |  25 +
 .../src/components/Weekplan/Weekplan.svelte   | 381 ++++++----------
 client/src/plan.js                            |  14 +-
 client/src/stores.js                          |   3 +
 client/src/utils.js                           |   2 +-
 user_settings.py                              |   4 +
 21 files changed, 1085 insertions(+), 681 deletions(-)
 delete mode 100644 client/public/base_static/favicon.png
 create mode 100644 client/src/components/Plan/DayInfos.svelte
 create mode 100644 client/src/components/Weekplan/Day.svelte
 create mode 100644 client/src/components/Weekplan/DayInspect.svelte
 create mode 100644 client/src/components/Weekplan/LessonInspect.svelte

diff --git a/client/public/base_static/favicon.png b/client/public/base_static/favicon.png
deleted file mode 100644
index 7e6f5eb5a2f1f1c882d265cf479de25caa925645..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 3127
zcmV-749N3|P)<h;3K|Lk000e1NJLTq004jh004jp1^@s6!#-il00009a7bBm000XT
z000XT0n*)m`~Uz8=}AOERCt{2T?vj8M-;8Vz_1U9O&~-jbpa+P$m9gf4VauD<OB>i
z7)}s4L53SJCkR}iVi00SFk;`MXX*#X*kkwKs@nFGS}c;=?XFjU|G$3t^5sjIVS2G+
zw)WGF83CpoGXhLGW(1gW%uV|X7>1P6VhCX=Ux)Lb!*DZ%@I3!{Gsf7d?gtIQ%nQiK
z3%(LUSkBji;C5Rfgd6$VsF@H`Pk@xtY6t<>FNR-pD}=C~$?)9pdm3XZ36N5PNWYjb
z$xd$yNQR9N!dfj-Vd@BwQo^FIIWPPmT&sZyQ$v81(sCBV=PGy{0wltEjB%~h157*t
zvbe_!{=I_783x!0t1-r#-d{Y?ae$Q4N_Nd^Ui^@y(%)G<xnd$EK;HFNLkQ<9c$}ty
zZE(@cTbMWkRAl5y0F|)pL4t`PKn~<wHTLH{;X;CmumMs^*zx~N(Bg+|7u?9|%nYrT
z0F}CS+Ax&_txN`ayLLNv><IJo^I>jou6y<3^XJdu{rmUf-Me?)zZ>9OR&6U5H*cK;
z$gUlB{g0O4gN0sLSO|Of?hU(l?;h(jA3uH!Z{EBKuV23ouU@^<ex%D50i)Isz{|D6
zf*(0@B<$I<M|2;MVQXtEym;|KQ!@M-W4xhtv(Od-c(``h@h4845HEZ`K!j({o^^?!
zfZM1`(6k4tCV-b~2T_k*4_$ACw{PEu2M-=-NP{aeMzx4xwFJnn-6hNKfNsaGA6Lgq
zfyKXf?_Sqv6hciER7U_0*A6?KcD*;0NU#}WT-JE>Y6#%v+QG;>e*E}%?wlu-NT4DG
zs)z)7WbLr)vGAu(ohrKc^em@OpO&f~6_>E61n_e0_V3@{U3^O;j{`^mNCJUj_>;7v
zsMs6Hu3g7+@v+lSo;=yTYFqq}jZmQ-BK8K{C4kqi_i*jBaQE(Au0607V-zKeT;EPg
zX(`vrn=L+e74+-Tqeok@_`tDa$G9I|$nTU5H*2V8@y()n*zqM?J1G!-1aX;CfDC9B
zTnJ#j_%*n8Qb1)re*Bno7g0RG{Eb;IK14irJYJp$5Z6ac9~b_P?+5t~95~SRG$g?1
znFJ7p$xV&GZ18m~79TGRdfsc-BcX$9yXTR*n)mPD@1~O(_?cT$ZvFPucRmGlq&se0
zKrcUf^k}4hM*biEJOWKzz!qQ<V3BJFm=Pc+b5!H`o~|7h6FVL`{c(ZCgL*i4@F43u
z1(Cs}+;i9%CIrZOUoDeom8%~Hq;9e6q34?dgy9lk=gytxzpWou65y)VjXYgD?E0rq
zpNfh%BncjYJ;M$LsS_ag+lxiNcdi~f99FndVdq#75P%&FvXB7cEEPm33_TA(%wyLZ
z6mhl!sszZpUsSCN*UrnYhrWiPr@iYtole(F*|%?BBX32aQm8SsC4eY9<rUPyu7|j1
zx?CdxLQ%j7VjU6<ziX8DA|N8WFhq?2+45)We!L_PV{cSIM;lZXjEjEbFkS!Q!w0wL
zB4|p0RrW*7&2>e;CB_ZtSOO9Owg#lZAc=s65^rb{fZe(TYu_rk!wKkEf}RIt=#Om(
zR8m<Lki|dC_(L+qD!?NN=vV{KgmN&7ZsOkp8-QIFrX>N`DM<^xj~59euMMspBolVN
zAPTr8sSDI104orIAdmL$uOXn*6hga1G+0WD0E?UtabxC#VC~vf3|10|phW;yQ3CY8
z2CM=)ErF;xq-YJ5G|um}>*1#E+O_Mu|Nr#qQ&G1P-NMq@f?@*XUcSbV?tX=)ilM-Q
zBZP|!Bpv0V;#ojKcpc7$=eqO;#Uy~#?^kNI{vSZfLx&DEt~LTmaKWXcx<RNV2bCmF
zyB8yXMEp}xrslJtHebUdf%Kr921sB?gliguB3fBTt*Ljd3QnkE8J>=joubklI<*Aw
z>LtMaQ7DR<1I2LkWvwyu#Rwn~;ezT}_g(@5l3h?W%-a86Y-t#O1PubP+z<%?V5D(U
zy57A6{h+{?kOZp7&WKZR+=sznMJ}+Dnpo=C_0%R_x_t~J5T?E_<l$K=(8|HyYWe|K
z#u6z2{XLE+0a1VU>{+))l5v1%5<ZXGz(_3uunZE3WlUpMhUsz`c{R6*3){$6w1!A)
z$wOApKPq4(2_d{dEHI2ZMBsWGHoeNpxu6!ehYufe?y!&xaKwQit*yaINYJ85ftN}3
zc900QFFpZkKoAmF86K@dfSizEIk~lzYL$W@2z6dV4QMJyR$f{=tlKsqrXlc5#KR(s
z6M*{hY6q2fqlX_Ce0ik-&=QY8G#@Bv4~R%9b-2Z$@X>2>)d-`iiZyx|5!%M2Fb2dU
zW3~MwwpEH9Rhue+k$UIOoo($Ds!NbOyMR36fRHu;*15(YcA7<wp93r=+%sI`JP%bN
zOThF7#HXgH5+H|#*+q($RX*bayB*@VX=M+BS|w%!NW;Ra1jr9_L2?fbk;?sEEIbTS
zE&(OwU;<B|9s+1h2BF13jh!{f$P<ifZ8bEzgO@drcA=U2mV=?RTgTcmnzk33xlxld
z@ag2OVI8#`SWN|~(TyDi&E`<EgPnSPalB+sydU?#f*YOb*L@~QtwAXlSW5!9oO|Cp
zd80S$hig!CB?c})uT$N=6{ylk0s#R;wSig$FgezAJJ60U*#WFsU&yVHk`{+*bOx=o
z{H%T!H0ui?p_s0xIF+g)0aT7JYYQx96$_F|qQ1Z|BS14)xugO$Rs{iAlfjVvBX_KJ
zSk5XI)<cNT4HOYTa$XIIP+0P%r*~}!>siIZk#%JWz>P!qX1?IUojG&nKR>^gArBt2
zit(ETyZ=@V&7mv_Fi4bABc<X|>nwP+jzQuHcfU&BrAV91u-rFvEi7y-KnWsvHH=d2
zgAk(GKm_S8RcTJ>2N3~&Hbwp{Z3NF_Xeh}g4E<iOr8}5C9&Q}aG4C{a1MZTx*Fe2`
zUdPZVoEjc#>ke)V&dY{W(3&b1j9t4yK<Zhk<ZV;q*m#1J03FLLU_Z1xgxU|E8UfX`
zy9NOo1G|B<^Q60V0*;}%rn&n=8%M;zP-_}GC0oMt@F{~?#ak9>_aYJisZZ{1rcU5-
z;eD>K;ndPq&B-8yA_S0F!4ThA&{1{x)H<#?k9a#6Pc6L?V^s0``ynL&D;p(!Nmx`Y
zFkHex{<NoS7wnIrfzNMNaV72z<n{w1{;y$-K^>4p!Ggm^@DlehW}iHHVi}~u=$&N?
z(NEBLQ#UxxAkdW>X9LnqUr#t4Lu0=9L8&o>JsqTt<K40A(L^!{iyxF!0P+DW1?YJ$
zuoRBR(7@McpTO1>T5|%gb3QA~hr0pED71+iFFr)dZ=Q=E6ng{NE{Z~0)C?deO#?Aj
zSDQ$z#TeC2T^|=}6GBo-&$;E{HL3!q3Z-szuf)O=G#zDjin4SSP%o%6+2IT#sLjQa
ziyxFFz~LMjWY<!`E%b`q^#hAdVO(R}&S72Eqz)Hq5+ECcqCy4D$y-f8uARf;U&*?@
zip38GQ^F4C@UUohjh9V8BkCMTcPsCDaU+K|R0$Bi^$Pway^nPk&*_BG?%@tGMw8hI
z8c-)d_)3Be&hY3#(5~KrxQD2BIAL@%?|PNuO)FRtKt&bw0>+_a5H!U6%a<=b7QVP^
z*90a62;bVq{?@)P6^DWd^Yilq4|YTV2Nw!Yu;a1lPI-sxR)rf@Fe5<tN&<v6|1A9@
z9Z;2P*94{&6Il%YVfh^upgPyC2}~sbA*FOxIzX~QRO{L`feQh`R}#P#y5#a@wy55<
zYXUa{gvqc8TH)F?fhz&Rw~3+~EgLM=D%Y+F+zAlA#R)b%+sXuJoom+wMF>DhDP7FH
zZZ%4S*1C30P;|O+jB!1;m|rXT90Sm5*RBbQN`PKu+hDD*S^yE(CdtSfg=z>u$cIj>
z<?*v#s$uFDo=_bD2-#3v$(KrIu@4C3tZN^~-ZoTAfPUmUgQYx~bcrDyHgksZ=Cm(*
zFIq!@eq;$jGl~`m%q%1Wt}~6IeO$Db05j;IeTUr4po$p*rW`W@Ofy0V{{nCNxUS6+
RDuVz3002ovPDHLkV1lTymTLe2

diff --git a/client/public/index.html b/client/public/index.html
index b1774091..651bf847 100644
--- a/client/public/index.html
+++ b/client/public/index.html
@@ -26,7 +26,7 @@
 
 	<title>Better VPlan</title>
 
-	<link rel='icon' type='image/png' href='/public/base_static/favicon.png'>
+	<link rel='icon' type='image/png' href='/public/base_static/images/better_vp.svg'>
 	<link rel='stylesheet' href='/public/base_static/global.css'>
 	<link rel='stylesheet' href='/public/build/bundle.css'>
 
diff --git a/client/src/App.svelte b/client/src/App.svelte
index e4aec56f..b0d7c5aa 100644
--- a/client/src/App.svelte
+++ b/client/src/App.svelte
@@ -13,7 +13,7 @@
     import SveltyPicker from 'svelty-picker';
     import {get_settings, group_rooms, update_colors, navigate_page, init_indexed_db, clear_plan_cache, get_favorites} from "./utils.js";
     import {notifications} from './notifications.js';
-    import {logged_in, title, current_page, settings, active_modal, pwa_prompt, indexed_db, selected_favorite, favorites} from './stores.js'
+    import {logged_in, title, current_page, settings, active_modal, pwa_prompt, selected_favorite, favorites, api_base} from './stores.js'
     import {getDateDisabled} from './plan.js';
     import SchoolManager from "./components/SchoolManager.svelte";
     import Changelog from "./components/Changelog.svelte";
@@ -29,6 +29,9 @@
     import { fade } from "svelte/transition";
     import FancyBackground from "./components/FancyBackground.svelte";
     import NotFound from "./components/NotFound.svelte";
+    import {gen_revision_arr} from "./plan.js";
+    import LessonInspect from "./components/Weekplan/LessonInspect.svelte";
+    import DayInspect from "./components/Weekplan/DayInspect.svelte";
 
     const pad = (n, s = 2) => (`${new Array(s).fill(0)}${n}`).slice(-s);
     let school_num;
@@ -39,7 +42,6 @@
     let teacher_dict;
     let all_rooms;
     let grouped_forms;
-    let api_base;
     let selected_revision;
     let meta;
     let enabled_dates;
@@ -74,7 +76,7 @@
         teacher_dict = {};
         all_rooms = null;
         grouped_forms = [];
-        api_base = null;
+        $api_base = null;
         selected_revision = ".newest";
         meta = {};
         enabled_dates = [];
@@ -264,17 +266,6 @@
         }
     }
 
-    function gen_revision_arr(all_revisions) {
-        revision_arr = [];
-        for(const [index, revision] of Object.entries(all_revisions)) {
-            if (index == 1) {continue;}
-            revision_arr.push({
-                "id": revision,
-                "display_name": format_revision_date(revision, all_revisions[1])
-            });
-        }
-    }
-
     function customGetDateDisabled(date) {
         if(typeof date === "object") {
             date = `${date.getFullYear()}-${pad(date.getMonth()+1)}-${pad(date.getDate())}`;
@@ -330,7 +321,7 @@
         if(!load_favorite || !$settings.load_first_favorite) {
             return;
         }
-        navigate_page('plan');
+        navigate_page($settings.weekplan_default ? "weekplan" : "plan");
         if($favorites.length === 0) {
             return;
         }
@@ -358,16 +349,16 @@
     $: $logged_in && init_indexed_db();
     $: !$logged_in && logout();
     $: select_plan($favorites, $selected_favorite);
-    $: school_num && (api_base = `/api/v69.420/${school_num}`);
+    $: school_num && ($api_base = `/api/v69.420/${school_num}`);
     $: school_num && get_meta(school_num);
-    $: all_revisions = [".newest"].concat((meta?.dates || {})[date] || []);
+    $: all_revisions = [".newest"].concat((meta?.dates || {})[date] || [])
     // If no date selected, default to today
     $: !date && (() => {
         let tmp_date = new Date();
         date = `${tmp_date.getFullYear()}-${pad(tmp_date.getMonth()+1)}-${pad(tmp_date.getDate())}`
     })();
     // If the selected date is disabled, and meta date is not disabled, set to meta date
-    $: date && customGetDateDisabled(date) && (date !== meta.date) && (() => {
+    $: date && !$current_page.startsWith("weekplan") && customGetDateDisabled(date) && (date !== meta.date) && (() => {
         date = meta.date;
     })();
     //$: school_num && get_preferences();
@@ -383,7 +374,7 @@
     $: date && gen_teacher_arr(teacher_dict);
     $: selected_room && set_plan("rooms", selected_room);
     $: gen_room_arr(grouped_rooms);
-    $: gen_revision_arr(all_revisions);
+    $: revision_arr = gen_revision_arr(all_revisions);
     $: reset_selects(plan_type);
 
     const resizeObserver = new ResizeObserver((entries) => {
@@ -404,7 +395,7 @@
             return;
         }
         navigate_page(new_location);
-        if (new_location.startsWith("plan")) {
+        if (new_location.startsWith("plan") || new_location.startsWith("weekplan")) {
             refresh_plan_vars();
         }
     });
@@ -413,7 +404,7 @@
     if(!((new_location === "login" || new_location === "register") && $logged_in)) {
         if(new_location === "favorite") {
             load_favorite = true;
-            new_location = "plan";
+            new_location = $settings.weekplan_default ? "weekplan" : "plan";
         }
         navigate_page(new_location);
     }
@@ -439,6 +430,8 @@
 
 <Settings />
 <Changelog />
+<LessonInspect />
+<DayInspect />
 
 <div id="page-container">
     <main>
@@ -472,7 +465,7 @@
                             inputClasses="datepicker-input"
                             bind:value={date}
                         />
-                        {#if available_plan_version}
+                        {#if available_plan_version && $current_page.startsWith("plan")}
                             <div class="plan-status" transition:fade|local={{duration: 200}}>
                                 {#if available_plan_version === "default_plan"}
                                     <span class="material-symbols-outlined" style="color: #dbae00">warning</span>
@@ -507,13 +500,9 @@
                     </div>
                 </div>
                 {#if $current_page.substring(0, 4) === "plan"}
-                    <Plan bind:api_base bind:school_num bind:date bind:plan_type bind:plan_value bind:all_rooms bind:meta bind:selected_revision bind:enabled_dates bind:free_days bind:available_plan_version external_times={$settings.external_times} />
+                    <Plan bind:school_num bind:date bind:plan_type bind:plan_value bind:all_rooms bind:meta revision_arr={revision_arr} bind:enabled_dates bind:free_days bind:available_plan_version external_times={$settings.external_times} />
                 {:else}
-                    <Weekplan bind:api_base bind:school_num bind:date bind:plan_type bind:plan_value bind:all_rooms bind:meta bind:selected_revision bind:enabled_dates bind:free_days bind:available_plan_version />
-                {/if}
-                <!-- Select Revision (Plan Version) -->
-                {#if $settings.show_revision_selector}
-                <Select data={revision_arr} bind:selected_id={selected_revision} data_name="Revisions">Zeitstempel des Planuploads auswählen</Select>
+                    <Weekplan bind:school_num bind:date bind:plan_type bind:plan_value bind:all_rooms bind:meta bind:enabled_dates bind:free_days />
                 {/if}
             {:else if $current_page === "school_manager"}
                 <SchoolManager bind:school_num bind:date bind:plan_type bind:plan_value />
diff --git a/client/src/base_components/Modal.svelte b/client/src/base_components/Modal.svelte
index 668db499..d91bc7a2 100644
--- a/client/src/base_components/Modal.svelte
+++ b/client/src/base_components/Modal.svelte
@@ -46,69 +46,71 @@
 </dialog>
 
 <style lang="scss">
-    dialog {
-        transition: all .3s ease;
-        display: flex;
-        flex-direction: column;
-        position: fixed;
-        top: 50%;
-        left: calc(50% + (100vw - 100%) / 2);
-        transform: translate(-50%, calc(-50% - 20px));
-        margin: 0;
-        opacity: 0;
-        visibility: hidden;
-        padding: 0;
-        pointer-events: none;
-        border: none;
-        border-radius: 5px;
-        background: var(--background);
-        color: var(--text-color);
-        overflow-y: hidden;
-        min-height: 50vh;
-        max-height: calc((100% - 6px) - 2em);
-        max-width: calc(100% - 6px - 2em);
-        width: clamp(700px, 60vw, 1400px);
-        z-index: 9999;
+  dialog {
+    transition: all .3s ease;
+    display: flex;
+    flex-direction: column;
+    position: fixed;
+    top: 50%;
+    left: calc(50% + (100vw - 100%) / 2);
+    transform: translate(-50%, calc(-50% - 20px));
+    margin: 0;
+    opacity: 0;
+    visibility: hidden;
+    padding: 0;
+    pointer-events: none;
+    border: none;
+    border-radius: 5px;
+    background: var(--background);
+    color: var(--text-color);
+    overflow-y: hidden;
+    min-height: 50vh;
+    max-height: calc((100% - 6px) - 2em);
+    max-width: calc(100% - 6px - 2em);
+    width: clamp(700px, 60vw, 1400px);
+    z-index: 9999;
 
-        &.full_height {
-            height: calc((100% - 6px) - 2em);
-        }
-
-        .content-scroll {
-            overflow-y: auto;
-            padding: 20px;
-            max-height: calc((100% - 46px) - 2em);
-            flex: 1;
-        }
-
-        &::before {
-            content: "";
-            position: absolute;
-            inset: 0;
-            background-color: rgba(255, 255, 255, 0.08);
-            z-index: -1;
-            pointer-events: none;
-        }
-    }
-    
-    dialog[open] {
-        transform: translate(-50%, -50%);
-        opacity: 1;
-        visibility: visible;
-        pointer-events: all;
-    }
-    
-    dialog::backdrop {
-        background-color: rgba(0, 0, 0, 0.5);
+    &.full_height {
+      height: calc((100% - 6px) - 2em);
     }
 
-    .footer {
-        display: flex;
-        flex-direction: row;
-        justify-content: flex-end;
+    .content-scroll {
+      overflow-y: auto;
+      padding: 20px;
+      @media only screen and (max-width: 900px) {
         padding: 10px;
-        background: rgba(255, 255, 255, 0.05);
-        border-top: 1px solid rgba(255, 255, 255, 0.2);
+      }
+      max-height: calc((100% - 46px) - 2em);
+      flex: 1;
+    }
+
+    &::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      background-color: rgba(255, 255, 255, 0.08);
+      z-index: -1;
+      pointer-events: none;
     }
+  }
+
+  dialog[open] {
+    transform: translate(-50%, -50%);
+    opacity: 1;
+    visibility: visible;
+    pointer-events: all;
+  }
+
+  dialog::backdrop {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
 
+  .footer {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    padding: 10px;
+    background: rgba(255, 255, 255, 0.05);
+    border-top: 1px solid rgba(255, 255, 255, 0.2);
+  }
 </style>
\ No newline at end of file
diff --git a/client/src/components/Contact.svelte b/client/src/components/Contact.svelte
index 6cd853e0..a6231220 100644
--- a/client/src/components/Contact.svelte
+++ b/client/src/components/Contact.svelte
@@ -3,7 +3,7 @@
     import {notifications} from "../notifications.js";
     import Select from "../base_components/Select.svelte";
     import { onMount } from "svelte";
-    import { title } from "../stores.js";
+    import {settings, title} from "../stores.js";
     import Button from "../base_components/Button.svelte";
 
     let category = "bug";
@@ -23,7 +23,7 @@
         })
             .then(data => {
                 notifications.success("Nachricht übermittelt");
-                navigate_page("plan");
+                navigate_page($settings.weekplan_default ? "weekplan" : "plan");
             })
             .catch(error => {
                 notifications.danger(error.message);
diff --git a/client/src/components/Navbar.svelte b/client/src/components/Navbar.svelte
index 11c94f8e..3d7e44b7 100644
--- a/client/src/components/Navbar.svelte
+++ b/client/src/components/Navbar.svelte
@@ -1,10 +1,10 @@
 <script>
     import {notifications} from '../notifications.js';
-    import {logged_in, active_modal, new_changelogs_available} from '../stores.js';
+    import {logged_in, active_modal, new_changelogs_available, current_page} from '../stores.js';
     import Dropdown from '../base_components/Dropdown.svelte';
     import { fly } from 'svelte/transition';
     import {customFetch, navigate_page} from "../utils.js";
-    import {selected_favorite, favorites} from "../stores.js";
+    import {selected_favorite, favorites, settings} from "../stores.js";
 
     function logout() {
         customFetch('/auth/logout')
@@ -25,10 +25,20 @@
 </script>
 
 <nav transition:fly={{y:-64}}>
-    <button class="logo-button" on:click={() => {navigate_page("plan"); selected_favorite.set(-1)}}>
+    <button class="logo-button" on:click={() => {navigate_page($settings.weekplan_default ? "weekplan" : "plan"); selected_favorite.set(-1)}}>
         <img class="logo" src="/public/base_static/images/better_vp_white.svg" alt="Better VPlan Logo">
     </button>
     <ul class="nav-element-wrapper">
+        <li><button on:click={() => {
+            navigate_page(
+                ($current_page.startsWith("weekplan") || $current_page.startsWith("plan")) ?
+                ($current_page.startsWith("weekplan") ? "plan" : "weekplan") :
+                ($settings.weekplan_default ? "weekplan" : "plan"))}
+            } class="nav-button"><span class="material-symbols-outlined">{
+                ($current_page.startsWith("weekplan") || $current_page.startsWith("plan")) ?
+                ($current_page.startsWith("weekplan") ? "calendar_view_day" : "calendar_view_week") :
+                ($settings.weekplan_default ? "calendar_view_week" : "calendar_view_day")
+        }</span></button></li>
         <li><button on:click={() => {navigate_page("about_us")}} class="nav-button">Über uns</button></li>
         <li>
             <Dropdown>
@@ -36,7 +46,10 @@
                     <span class="material-symbols-outlined" class:favorite-selected={$selected_favorite !== -1}>star</span>
                 </button>
                 {#each $favorites as favorite, index}
-                    <button class="nav-button" on:click={() => {selected_favorite.set(index); navigate_page("plan")}}>
+                    <button class="nav-button" on:click={() => {
+                        selected_favorite.set(index);
+                        if(!$current_page.startsWith("weekplan")) navigate_page("plan");
+                    }}>
                         <span class="material-symbols-outlined" class:favorite-selected={$selected_favorite === index}>{favorite_icon_map[favorite.plan_type]}</span>
                     {favorite.name}</button>
                 {/each}
diff --git a/client/src/components/PWAInstallHelper.svelte b/client/src/components/PWAInstallHelper.svelte
index 9ec6cc86..987f8b13 100644
--- a/client/src/components/PWAInstallHelper.svelte
+++ b/client/src/components/PWAInstallHelper.svelte
@@ -1,6 +1,6 @@
 <script>
     import { onMount } from "svelte";
-    import { pwa_prompt, title } from "../stores";
+    import { pwa_prompt, title, settings } from "../stores";
     import { notifications } from "../notifications";
     import {navigate_page, update_hash} from "../utils";
     import Button from "../base_components/Button.svelte";
@@ -11,7 +11,7 @@
         $pwa_prompt = null;
         if(outcome === "accepted") {
             notifications.success("App erfolgreich installiert!");
-            navigate_page('plan');
+            navigate_page($settings.weekplan_default ? "weekplan" : "plan");
         } else if (outcome === "dismissed") {
             notifications.danger("App konnte nicht installiert werden.");
         }
@@ -30,7 +30,7 @@
         Um <b>online</b> und <b>offline</b> schnell an deinen Stundenplan zu kommen, lade die Website als <b>App</b> herunter:
     </span>
     <Button on:click={try_install} id="pwa-install-btn" background="var(--accent-color)">Installieren <span class="material-symbols-outlined">install_mobile</span></Button>
-    <button class="skip-btn" on:click={() => {navigate_page('plan')}}>Weiter</button>
+    <button class="skip-btn" on:click={() => {navigate_page($settings.weekplan_default ? "weekplan" : "plan")}}>Weiter</button>
     {:else}
     <span class="responsive-text">
         Um <b>online</b> und <b>offline</b> schnell an deinen Stundenplan zu kommen, lade die Website als <b>App</b> herunter:<br><br>
@@ -49,7 +49,7 @@
             <li>Klicke in der Suchleiste (rechts) auf <div class="custom-badge">Better VPlan installieren <span class="material-symbols-outlined">install_desktop</span></div></li>
         </ul>
     </span>
-    <Button on:click={() => {navigate_page('plan')}} background="var(--accent-color)" id="pwa-continue-btn">Weiter <span class="material-symbols-outlined">chevron_right</span></Button>
+    <Button on:click={() => {navigate_page($settings.weekplan_default ? "weekplan" : "plan")}} background="var(--accent-color)" id="pwa-continue-btn">Weiter <span class="material-symbols-outlined">chevron_right</span></Button>
     {/if}
 </main>
 
diff --git a/client/src/components/Plan/DayInfos.svelte b/client/src/components/Plan/DayInfos.svelte
new file mode 100644
index 00000000..63568d15
--- /dev/null
+++ b/client/src/components/Plan/DayInfos.svelte
@@ -0,0 +1,227 @@
+<script>
+    import Select from "../../base_components/Select.svelte";
+    import Dropdown from "../../base_components/Dropdown.svelte";
+    import {settings, selected_favorite} from "../../stores.js";
+    import {format_timestamp} from "../../utils.js";
+
+    export let exams;
+    export let info;
+    export let revision_arr;
+    export let is_default_plan;
+    export let last_fetch;
+    export let selected_revision;
+    export let date;
+    export let plan_type;
+    export let plan_value;
+    export let text_color = "default";
+</script>
+
+{#if exams && Object.keys(exams).length !== 0}
+    <div class="additional-info exams" class:default_text_color={text_color === "default"}>
+        {#each Object.entries(exams) as [form, exam_list]}
+            {#if exam_list.length > 0}
+                <div class="inline-wrapper">
+                    Klausuren für <button on:click={() => {
+                            plan_type = "forms";
+                            plan_value = form;
+                            selected_favorite.set(-1);
+                        }} class="no-btn-visuals clickable">{form}</button>:
+                    <ul>
+                        {#each exam_list as exam}
+                            <li>{exam.course} bei <button on:click={() => {
+                                        plan_type = "teachers";
+                                        plan_value = exam.course_teacher;
+                                        selected_favorite.set(-1);
+                                    }} class="no-btn-visuals clickable" style="color: var(--text-color); font-size: inherit; margin-top: 0.3em;">{exam.course_teacher}</button>: {exam.begin} Uhr ({exam.duration}min)</li>
+                        {/each}
+                    </ul>
+                </div>
+            {:else}
+                <div class="info-spacer"></div>
+            {/if}
+        {/each}
+    </div>
+{/if}
+{#if info}
+    {#if info.additional_info.length > 0}
+        <div class="additional-info" class:default_text_color={text_color === "default"}>
+            {#each info.processed_additional_info as info_paragraph}
+                {#if info_paragraph.length > 0}
+                    <div class="inline-wrapper">
+                        {#each info_paragraph as text_segment}
+                            {#if text_segment.link?.value.length === 1}
+                                <button class="no-btn-visuals" on:click={() => {
+                                        date = text_segment.link.date;
+                                        plan_type = text_segment.link.type;
+                                        plan_value = text_segment.link.value[0];
+                                        selected_favorite.set(-1);
+                                    }}>
+                                    <div class="clickable">{text_segment.text}</div>
+                                </button>
+                            {:else if text_segment.link?.value.length >= 2}
+                                <div class="fit-content-width">
+                                    <Dropdown small={true} transform_origin_x="50%">
+                                        <button slot="toggle_button" let:toggle on:click={toggle} class="toggle-button">
+                                            <span class="grow">{text_segment.text}</span>
+                                            <span class="material-symbols-outlined dropdown-arrow">arrow_drop_down</span>
+                                        </button>
+
+                                        {#each text_segment.link.value as item}
+                                            <button on:click={() => {
+                                                    date=text_segment.link.date;
+                                                    plan_type = text_segment.link.type;
+                                                    plan_value = item;
+                                                    selected_favorite.set(-1);
+                                                }}>{item}</button>
+                                        {/each}
+                                    </Dropdown>
+                                </div>
+                            {:else}
+                                {text_segment.text}
+                            {/if}
+                        {/each}
+                    </div>
+                {:else}
+                    <div class="info-spacer"></div>
+                {/if}
+            {/each}
+        </div>
+    {/if}
+    <div class="last-updated">
+        {#if !is_default_plan}Plan zuletzt aktualisiert: <span class="custom-badge">{format_timestamp(info.timestamp)}</span><br>{/if}
+        Zuletzt auf neue Pläne überprüft: <span class="custom-badge">{format_timestamp(last_fetch)}</span>
+    </div>
+    <!-- Select Revision (Plan Version) -->
+    {#if $settings.show_revision_selector && revision_arr.length > 0}
+        <Select data={revision_arr} bind:selected_id={selected_revision} data_name="Revisions">Zeitstempel des Planuploads auswählen</Select>
+    {/if}
+{/if}
+
+<style lang="scss">
+  .additional-info {
+    position: relative;
+    font-size: var(--font-size-base);
+    line-height: 1.5;
+    border: clamp(1px, .3vmax, 3px) solid rgba(255, 255, 255, 0.2);
+    padding: 10px;
+    padding-top: calc(10px + var(--font-size-md) / 2);
+    margin-top: 30px;
+    border-radius: 5px;
+
+    &.default_text_color::before {
+      color: rgba(255, 255, 255, 0.2);
+    }
+
+    &::before {
+      content: "Informationen";
+      font-size: var(--font-size-md);
+      color: var(--text-color);
+      background: var(--background);
+      padding: 0px 5px;
+      position: absolute;
+      top: 0;
+      left: 20px;
+      transform: translateY(-50%);
+      border-radius: 5px;
+    }
+
+    &.exams::before {
+      content: "Klausuren";
+    }
+  }
+
+  .inline-wrapper > * {
+    font-size: inherit;
+    color: var(--text-color);
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+
+  .info-spacer {
+    height: 5px;
+  }
+
+  .fit-content-width {
+    width: fit-content;
+  }
+
+  .fit-content-width .dropdown-wrapper button, .max-width .dropdown-wrapper button {
+    border: none;
+    background: transparent;
+    color: var(--text-color);
+    transition: background-color .2s ease;
+    width: 100%;
+    padding: 2px 0px 2px 5px;
+    font-size: inherit;
+
+    &:hover, &:focus-visible {
+      background-color: rgba(0, 0, 0, 0.5);
+    }
+
+    &.toggle-button {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+      background: rgba(255, 255, 255, 0.08);
+      border-radius: 5px;
+      overflow: hidden;
+      text-align: left;
+      font-size: inherit;
+      font-weight: inherit;
+      color: var(--text-color);
+
+      span.grow {
+        flex: 1;
+        white-space: nowrap;
+      }
+
+      &.center-align {
+        text-align: center;
+      }
+
+      &:hover, &:focus-visible {
+        background-color: rgba(255, 255, 255, 0.15);
+      }
+    }
+  }
+
+  .no-btn-visuals {
+    border: 0;
+    background: none;
+    padding: 0;
+    margin: 0;
+    text-align: start;
+  }
+
+  .clickable {
+    background: rgba(255, 255, 255, 0.08);
+    border-radius: 5px;
+    padding: 2px 5px;
+    transition: background-color 0.2s ease;
+
+    &:hover, &:focus-visible {
+      background-color: rgba(255, 255, 255, 0.2);
+    }
+  }
+
+  .last-updated {
+    font-size: var(--font-size-base);
+    line-height: 1.5;
+    margin-top: 20px;
+    display: block !important;
+  }
+
+  .custom-badge {
+    display: inline-flex;
+    flex-direction: row;
+    column-gap: .3em;
+    align-items: center;
+
+    background: rgba(255, 255, 255, 0.07);
+    padding: 2px 7px;
+    border-radius: 5px;
+    white-space: nowrap;
+    margin-bottom: .2em;
+  }
+</style>
\ No newline at end of file
diff --git a/client/src/components/Plan/Lesson.svelte b/client/src/components/Plan/Lesson.svelte
index 1af1dbbe..12aa6870 100644
--- a/client/src/components/Plan/Lesson.svelte
+++ b/client/src/components/Plan/Lesson.svelte
@@ -9,6 +9,7 @@
     export let plan_type;
     export let plan_value;
     export let display_time = true;
+    export let disable_interactions = false;
 
     $: only_teacher_absent = lesson.scheduled_teachers?.length !== 0 && lesson.current_teachers?.length === 0 && lesson.takes_place;
 
@@ -61,6 +62,7 @@
                 {#if teachers.length !== 0 || s_teachers.length !== 0}
                     {#each teachers || [] as teacher}
                         <button on:click={() => {
+                            if(disable_interactions) return;
                             plan_type = "teachers";
                             plan_value = teacher;
                             selected_favorite.set(-1);
@@ -68,6 +70,7 @@
                     {/each}
                     {#each s_teachers || [] as teacher}
                         <button on:click={() => {
+                            if(disable_interactions) return;
                             plan_type = "teachers";
                             plan_value = teacher;
                             selected_favorite.set(-1);
@@ -84,6 +87,7 @@
                 {#if rooms.length !== 0 || s_rooms.length !== 0}
                     {#each rooms || [] as room}
                         <button on:click={() => {
+                            if(disable_interactions) return;
                             plan_type = "rooms";
                             plan_value = room;
                             selected_favorite.set(-1);
@@ -93,6 +97,7 @@
                     {/each}
                     {#each s_rooms || [] as room}
                         <button on:click={() => {
+                            if(disable_interactions) return;
                             plan_type = "rooms";
                             plan_value = room;
                             selected_favorite.set(-1);
@@ -112,6 +117,7 @@
             {:else if forms.length === 1 && s_forms.length === 0}
             <div class="forms max-width-center info-element vert-align" class:changed={forms_changed}>
                 <button on:click={() => {
+                    if(disable_interactions) return;
                     plan_type = "forms";
                     plan_value = forms[0];
                     selected_favorite.set(-1);
@@ -120,6 +126,7 @@
             {:else if forms.length === 0 && s_forms.length === 1}
             <div class="forms max-width-center info-element vert-align" class:changed={forms_changed}>
                 <button on:click={() => {
+                    if(disable_interactions) return;
                     plan_type = "forms";
                     plan_value = s_forms[0];
                     selected_favorite.set(-1);
@@ -135,6 +142,7 @@
 
                     {#each forms as form}
                         <button on:click={() => {
+                            if(disable_interactions) return;
                             plan_type = "forms";
                             plan_value = form;
                             selected_favorite.set(-1);
@@ -142,6 +150,7 @@
                     {/each}
                     {#each s_forms as form}
                         <button on:click={() => {
+                            if(disable_interactions) return;
                             plan_type = "forms";
                             plan_value = form;
                             selected_favorite.set(-1);
@@ -163,6 +172,7 @@
                                 {#each info_message.text_segments as text_segment}
                                     {#if text_segment.link?.value.length === 1}
                                         <button class="no-btn-visuals" on:click={() => {
+                                            if(disable_interactions) return;
                                             date = text_segment.link.date;
                                             plan_type = text_segment.link.type;
                                             plan_value = text_segment.link.value[0];
@@ -180,6 +190,7 @@
 
                                                 {#each text_segment.link.value as item}
                                                     <button on:click={() => {
+                                                        if(disable_interactions) return;
                                                         date=text_segment.link.date;
                                                         plan_type = text_segment.link.type;
                                                         plan_value = item;
@@ -209,6 +220,7 @@
 
                                 {#each forms as form}
                                     <button on:click={() => {
+                                        if(disable_interactions) return;
                                         plan_type = "forms";
                                         plan_value = form;
                                     }}>{form}</button>
@@ -231,6 +243,7 @@
 
                                 {#each teachers as teacher}
                                     <button on:click={() => {
+                                        if(disable_interactions) return;
                                         plan_type = "teachers";
                                         plan_value = teacher;
                                     }}>{teacher}</button>
@@ -253,6 +266,7 @@
 
                                 {#each rooms as room}
                                     <button on:click={() => {
+                                        if(disable_interactions) return;
                                         plan_type = "rooms";
                                         plan_value = room;
                                         selected_favorite.set(-1);
diff --git a/client/src/components/Plan/Plan.svelte b/client/src/components/Plan/Plan.svelte
index ba592faf..ae44d503 100644
--- a/client/src/components/Plan/Plan.svelte
+++ b/client/src/components/Plan/Plan.svelte
@@ -2,15 +2,13 @@
     import {onMount} from 'svelte';
     import Lesson from './Lesson.svelte';
     import Rooms from "../Rooms.svelte";
-    import {notifications} from '../../notifications.js';
     import { swipe } from 'svelte-gestures';
-    import {indexed_db, settings, title, selected_favorite, favorites} from '../../stores.js';
+    import {indexed_db, settings, title, selected_favorite, favorites, api_base} from '../../stores.js';
     import {arraysEqual, format_date, format_timestamp, replace_hash, replace_page, update_hash} from "../../utils.js";
     import {sameBlock, get_plan_version, get_teacher_data, load_plan, gen_location_hash, load_lessons, apply_preferences, getDateDisabled} from "../../plan.js";
     import {getLabelOfPeriods} from "../../periods_utils.js";
-    import Dropdown from '../../base_components/Dropdown.svelte';
+    import DayInfos from "./DayInfos.svelte";
 
-    export let api_base;
     export let school_num;
     export let date;
     export let plan_type;
@@ -20,11 +18,12 @@
     export let week_letter = "";
     export let external_times = true;
     export let all_rooms;
-    export let selected_revision;
+    export let revision_arr;
     export let enabled_dates;
     export let free_days;
     export let available_plan_version;
     let used_rooms_hidden = true;
+    let selected_revision;
 
     const pad = (n, s = 2) => (`${new Array(s).fill(0)}${n}`).slice(-s);
     let plan_data = [];
@@ -191,7 +190,7 @@
     // === Load Plan + Lessons ===
     // Check if new plan has to be loaded and load it
     $: $indexed_db, load_plan(
-        api_base, 
+        $api_base,
         school_num, 
         date, 
         selected_revision, 
@@ -228,8 +227,6 @@
         }
         update_hash(gen_location_hash("plan", school_num, date, plan_type, plan_value));
     })();
-
-    $: console.log(rooms_data);
 </script>
 
 <svelte:window on:keydown={keydown_handler}/>
@@ -286,81 +283,17 @@
             <Rooms rooms_data={rooms_data} bind:plan_type bind:plan_value bind:all_rooms bind:used_rooms_hidden />
         {/if}
     {/if}
-    {#if exams && Object.keys(exams).length !== 0}
-        <div class="additional-info exams">
-            {#each Object.entries(exams) as [form, exam_list]}
-                {#if exam_list.length > 0}
-                    <div class="inline-wrapper">
-                        Klausuren für <button on:click={() => {
-                            plan_type = "forms";
-                            plan_value = form;
-                            selected_favorite.set(-1);
-                        }} class="no-btn-visuals clickable">{form}</button>:
-                        <ul>
-                            {#each exam_list as exam}
-                                <li>{exam.course} bei <button on:click={() => {
-                                        plan_type = "teachers";
-                                        plan_value = exam.course_teacher;
-                                        selected_favorite.set(-1);
-                                    }} class="no-btn-visuals clickable" style="color: var(--text-color); font-size: inherit; margin-top: 0.3em;">{exam.course_teacher}</button>: {exam.begin} Uhr ({exam.duration}min)</li>
-                            {/each}
-                        </ul>
-                    </div>
-                {:else}
-                    <div class="info-spacer"></div>
-                {/if}
-            {/each}
-        </div>
-    {/if}
-    {#if info}
-        {#if info.additional_info.length > 0}
-            <div class="additional-info">
-                {#each info.processed_additional_info as info_paragraph}
-                    {#if info_paragraph.length > 0}
-                        <div class="inline-wrapper">
-                            {#each info_paragraph as text_segment}
-                                {#if text_segment.link?.value.length === 1}
-                                    <button class="no-btn-visuals" on:click={() => {
-                                        date = text_segment.link.date;
-                                        plan_type = text_segment.link.type;
-                                        plan_value = text_segment.link.value[0];
-                                        selected_favorite.set(-1);
-                                    }}>
-                                        <div class="clickable">{text_segment.text}</div>
-                                    </button>
-                                {:else if text_segment.link?.value.length >= 2}
-                                    <div class="fit-content-width">
-                                        <Dropdown small={true} transform_origin_x="50%">
-                                            <button slot="toggle_button" let:toggle on:click={toggle} class="toggle-button">
-                                                <span class="grow">{text_segment.text}</span>
-                                                <span class="material-symbols-outlined dropdown-arrow">arrow_drop_down</span>
-                                            </button>
-
-                                            {#each text_segment.link.value as item}
-                                                <button on:click={() => {
-                                                    date=text_segment.link.date;
-                                                    plan_type = text_segment.link.type;
-                                                    plan_value = item;
-                                                    selected_favorite.set(-1);
-                                                }}>{item}</button>
-                                            {/each}
-                                        </Dropdown>
-                                    </div>
-                                {:else}
-                                    {text_segment.text}
-                                {/if}
-                            {/each}
-                        </div>
-                    {:else}
-                        <div class="info-spacer"></div>
-                    {/if}
-                {/each}
-            </div>
-        {/if}
-        <div class="last-updated">
-            {#if !is_default_plan}Plan zuletzt aktualisiert: <span class="custom-badge">{format_timestamp(info.timestamp)}</span><br>{/if}
-            Zuletzt auf neue Pläne überprüft: <span class="custom-badge">{format_timestamp(last_fetch)}</span></div>
-    {/if}
+    <DayInfos
+        {exams}
+        {info}
+        {revision_arr}
+        {is_default_plan}
+        {last_fetch}
+        bind:selected_revision
+        bind:date
+        bind:plan_type
+        bind:plan_value
+    />
 </div>
 <div class="day-controls">
     <button tabindex="-1" on:click={() => {change_day(-1);}} class:hidden={!show_left_key} class:is_default_plan={left_key_default_plan}><span class="material-symbols-outlined left">arrow_back_ios_new</span></button>
@@ -377,17 +310,6 @@
         padding: .08em 0;
     }
 
-    .inline-wrapper > * {
-        font-size: inherit;
-        color: var(--text-color);
-        white-space: pre-wrap;
-        word-break: break-word;
-    }
-
-    .info-spacer {
-        height: 5px;
-    }
-
     .dropdown-arrow {
         font-size: 1.4em;
         display: block;
@@ -409,70 +331,6 @@
         transform: rotate(180deg);
     }
 
-    .fit-content-width {
-        width: fit-content;
-    }
-
-    .fit-content-width .dropdown-wrapper button, .max-width .dropdown-wrapper button {
-        border: none;
-        background: transparent;
-        color: var(--text-color);
-        transition: background-color .2s ease;
-        width: 100%;
-        padding: 2px 0px 2px 5px;
-        font-size: inherit;
-
-        &:hover, &:focus-visible {
-            background-color: rgba(0, 0, 0, 0.5);
-        }
-
-        &.toggle-button {
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-            justify-content: space-between;
-            background: rgba(255, 255, 255, 0.08);
-            border-radius: 5px;
-            overflow: hidden;
-            text-align: left;
-            font-size: inherit;
-            font-weight: inherit;
-            color: var(--text-color);
-
-            span.grow {
-                flex: 1;
-                white-space: nowrap;
-            }
-            
-            &.center-align {
-                text-align: center;
-            }
-
-            &:hover, &:focus-visible {
-                background-color: rgba(255, 255, 255, 0.15);
-            }
-        }
-    }
-
-    .no-btn-visuals {
-        border: 0;
-        background: none;
-        padding: 0;
-        margin: 0;
-        text-align: start;
-    }
-
-    .clickable {
-        background: rgba(255, 255, 255, 0.08);
-        border-radius: 5px;
-        padding: 2px 5px;
-        transition: background-color 0.2s ease;
-
-        &:hover, &:focus-visible {
-            background-color: rgba(255, 255, 255, 0.2);
-        }
-    }
-
     .day-controls {
         position: fixed;
         bottom: 0;
@@ -596,50 +454,16 @@
     }
 
     .custom-badge {
-        display: inline-flex;
-        flex-direction: row;
-        column-gap: .3em;
-        align-items: center;
-
-        background: rgba(255, 255, 255, 0.07);
-        padding: 2px 7px;
-        border-radius: 5px;
-        white-space: nowrap;
-        margin-bottom: .2em;
-    }
-
-    .last-updated {
-        font-size: var(--font-size-base);
-        line-height: 1.5;
-        margin-top: 20px;
-        display: block !important;
-    }
-
-    .additional-info {
-        position: relative;
-        font-size: var(--font-size-base);
-        line-height: 1.5;
-        border: clamp(1px, .3vmax, 3px) solid rgba(255, 255, 255, 0.2);
-        padding: 10px;
-        padding-top: calc(10px + var(--font-size-md) / 2);
-        margin-top: 30px;
-        border-radius: 5px;
-
-        &::before {
-            content: "Informationen";
-            font-size: var(--font-size-md);
-            color: rgba(255, 255, 255, 0.2);
-            background: var(--background);
-            padding: 0px 5px;
-            position: absolute;
-            top: 0;
-            left: 20px;
-            transform: translateY(-50%);
-        }
-
-        &.exams::before {
-            content: "Klausuren";
-        }
+      display: inline-flex;
+      flex-direction: row;
+      column-gap: .3em;
+      align-items: center;
+
+      background: rgba(255, 255, 255, 0.07);
+      padding: 2px 7px;
+      border-radius: 5px;
+      white-space: nowrap;
+      margin-bottom: .2em;
     }
 
     .no-linebreak {
diff --git a/client/src/components/SchoolManager.svelte b/client/src/components/SchoolManager.svelte
index 92f0bd93..61584e96 100644
--- a/client/src/components/SchoolManager.svelte
+++ b/client/src/components/SchoolManager.svelte
@@ -1,7 +1,7 @@
 <script>
     import {notifications} from '../notifications.js';
     import { onMount } from "svelte";
-    import { title } from "../stores";
+    import {settings, title} from "../stores";
     import {customFetch, navigate_page, update_hash} from "../utils.js";
     import Select from "../base_components/Select.svelte";
     import { fly } from 'svelte/transition';
@@ -110,7 +110,7 @@
                 school_num = authorize_school_id;
                 localStorage.setItem("school_num", school_num);
                 authorized_school_ids = [...authorized_school_ids, authorize_school_id];
-                navigate_page('plan');
+                navigate_page($settings.weekplan_default ? "weekplan" : "plan");
             })
             .catch(error => {
                 notifications.danger(error.message);
@@ -194,7 +194,7 @@
                     }
                     school_num = authorize_school_id;
                     localStorage.setItem("school_num", school_num);
-                    navigate_page("plan");
+                    navigate_page($settings.weekplan_default ? "weekplan" : "plan");
                 } else {
                     school_auth_visible = true;
                 }
diff --git a/client/src/components/Settings.svelte b/client/src/components/Settings.svelte
index 03760bda..9bf8fc99 100644
--- a/client/src/components/Settings.svelte
+++ b/client/src/components/Settings.svelte
@@ -75,9 +75,22 @@
         <span class="responsive-text"><input type="checkbox" bind:checked={temp_settings.normal_greetings}>Normale Begrüßungen</span>
         <span class="responsive-text"><input type="checkbox" bind:checked={temp_settings.chatgpt_greetings}>ChatGPT Begrüßungen</span>
         <span class="responsive-text"><input type="checkbox" bind:checked={temp_settings.load_first_favorite}>Beim Start den ersten Favoriten laden</span>
+        <span class="responsive-text"><input type="checkbox" bind:checked={temp_settings.weekplan_default}>Standardmäßig den Wochenplan öffnen</span>
         <span class="responsive-text"><input type="checkbox" bind:checked={temp_settings.swipe_day_change}>Swipen um Tag zu wechseln</span>
         <span class="responsive-text"><input type="checkbox" bind:checked={temp_settings.day_switch_keys}>Pfeiltasten (Tastatur) zum Tag wechseln nutzen</span>
+        <h2 class="category-heading">Aussehen</h2>
+        <span class="responsive-text"><input type="color" bind:value={temp_settings.background_color}>Hintergrundfarbe</span>
+        <span class="responsive-text"><input type="color" bind:value={temp_settings.text_color}>Textfarbe</span>
+        <span class="responsive-text"><input type="color" bind:value={temp_settings.accent_color}>Akzentfarbe</span>
+        <span class="responsive-text"><input type="color" bind:value={temp_settings.cancelled_color}>Ausfallfarbe</span>
+        <span class="responsive-text"><input type="checkbox" bind:checked={temp_settings.external_times}>Externe Unterrichtszeiten</span>
+        <span class="responsive-text"><input type="checkbox" bind:checked={temp_settings.filled_in_buttons}>Ausgefüllte Buttons (Bei Änderungen / Ausfall)</span>
+        <span class="responsive-text"><input type="checkbox" bind:checked={temp_settings.rainbow}>Regenbogen 🌈</span>
+        <h2 class="category-heading">Nerd Section</h2>
+        <span class="responsive-text"><input type="checkbox" bind:checked={temp_settings.show_revision_selector}>Planversion auswählbar machen</span>
+        <span class="responsive-text"><input type="checkbox" bind:checked={temp_settings.use_grouped_form_plans}>Lehrer/Raumpläne nur als umgeordnete Klassenpläne anzeigen. (Bsp.: Lehreränderung bei Klassenplan wird nicht zu Ausfall im Lehrerplan des ursprünglichen Lehrers)</span>
         {#if is_admin}
+            <h2 class="category-heading">Admin-Section</h2>
             <h2 class="category-heading">Push-Benachrichtigungen</h2>
             <Button on:click={
                 async () => {
@@ -104,17 +117,6 @@
             } class="nav-button">Push-Benachrichtigungen testen
             </Button>
         {/if}
-        <h2 class="category-heading">Aussehen</h2>
-        <span class="responsive-text"><input type="color" bind:value={temp_settings.background_color}>Hintergrundfarbe</span>
-        <span class="responsive-text"><input type="color" bind:value={temp_settings.text_color}>Textfarbe</span>
-        <span class="responsive-text"><input type="color" bind:value={temp_settings.accent_color}>Akzentfarbe</span>
-        <span class="responsive-text"><input type="color" bind:value={temp_settings.cancelled_color}>Ausfallfarbe</span>
-        <span class="responsive-text"><input type="checkbox" bind:checked={temp_settings.external_times}>Externe Unterrichtszeiten</span>
-        <span class="responsive-text"><input type="checkbox" bind:checked={temp_settings.filled_in_buttons}>Ausgefüllte Buttons (Bei Änderungen / Ausfall)</span>
-        <span class="responsive-text"><input type="checkbox" bind:checked={temp_settings.rainbow}>Regenbogen 🌈</span>
-        <h2 class="category-heading">Nerd Section</h2>
-        <span class="responsive-text"><input type="checkbox" bind:checked={temp_settings.show_revision_selector}>Planversion auswählbar machen</span>
-        <span class="responsive-text"><input type="checkbox" bind:checked={temp_settings.use_grouped_form_plans}>Lehrer/Raumpläne nur als umgeordnete Klassenpläne anzeigen. (Bsp.: Lehreränderung bei Klassenplan wird nicht zu Ausfall im Lehrerplan des ursprünglichen Lehrers)</span>
         <br>
         <div class="horizontal-container">
             <Button on:click={reset_settings} class="split">Einstellungen zurücksetzen</Button>
diff --git a/client/src/components/Weekplan/Day.svelte b/client/src/components/Weekplan/Day.svelte
new file mode 100644
index 00000000..79abb609
--- /dev/null
+++ b/client/src/components/Weekplan/Day.svelte
@@ -0,0 +1,429 @@
+<script>
+    import Lesson from "./Lesson.svelte";
+    import {
+        indexed_db,
+        settings,
+        selected_favorite,
+        favorites,
+        api_base,
+        active_modal,
+        inspecting_day
+    } from "../../stores.js";
+    import {
+        load_plan,
+        load_lessons,
+        apply_preferences,
+        get_teacher_data,
+        get_plan_version,
+        gen_revision_arr,
+        getDateDisabled
+    } from "../../plan.js";
+    import Select from "../../base_components/Select.svelte";
+    import Rooms from "../Rooms.svelte";
+    import {format_date} from "../../utils.js";
+
+    export let school_num;
+    export let first;
+    export let last;
+    export let plan_type;
+    export let plan_value;
+    export let date;
+    export let block_count;
+    export let meta;
+    export let enabled_dates;
+    export let free_days;
+    export let week_letter;
+    export let all_rooms;
+    export let used_rooms_hidden;
+    export let preferences_apply;
+    export let full_teacher_name;
+    export let teacher_contact_link = null;
+    export let teacher_image_path = null;
+
+    let revision_arr;
+    $: revision_arr = gen_revision_arr([".newest"].concat((meta?.dates || {})[date] || []));
+    let selected_revision = ".newest";
+    let info;
+    let plan_data = [];
+    let all_lessons = [];
+    let rooms_data = {};
+    let last_fetch;
+    let is_default_plan = false;
+    let loading = false;
+    let loading_failed = false;
+    let cache_loading_failed = false;
+    let network_loading_failed = false;
+    let data_from_cache = false;
+    let caching_successful = false;
+    let last_updated = {};
+    let exams;
+    let sorted_lessons;
+    const plan_type_map = {
+        "forms": "Klasse",
+        "rooms": "Raum",
+        "teachers": "Lehrer"
+    };
+    let controller = new AbortController();
+
+    function format_date_heading(date) {
+        date = new Date(date);
+        const days = [
+            "So",
+            "Mo",
+            "Di",
+            "Mi",
+            "Do",
+            "Fr",
+            "Sa"
+        ];
+
+        const weekday = days[date.getDay()];
+
+        return `${weekday} ${date.getDate()}.`
+    }
+
+    function handle_plan_data(data) {
+        plan_data = data;
+        info = data.info;
+        last_fetch = data.last_fetch ?? '1970-01-01';
+        is_default_plan = data.is_default_plan;
+        exams = data.exams;
+        week_letter = info.week;
+    }
+
+    function handle_loading_state(loading_type, state) {
+        switch(loading_type) {
+            case 'loading':
+                loading = state;
+                break;
+            case 'data_from_cache':
+                data_from_cache = state;
+                break;
+            case 'cache_loading_failed':
+                cache_loading_failed = state;
+                break;
+            case 'network_loading_failed':
+                network_loading_failed = state;
+                break;
+            case 'caching_successful':
+                caching_successful = state;
+                break;
+            default:
+                console.error("Unsupported loading_type: " + loading_type);
+                break;
+        }
+    }
+
+    function renew_abort_controller() {
+        controller.abort();
+        controller = new AbortController();
+        return controller;
+    }
+
+    function handle_last_updated(given_date, renew) {
+        if(!renew) {
+            return last_updated[given_date] || new Date(1970, 1, 1);
+        }
+
+        last_updated[given_date] = new Date();
+    }
+
+    function reset_plan_vars() {
+        all_lessons = [];
+        rooms_data = null;
+        plan_type = null;
+        plan_value = null;
+    }
+
+    function update_lessons(type, data) {
+        if(type === "rooms_data") {
+            rooms_data = data;
+        } else if(type === "all_lessons") {
+            all_lessons = data;
+        } else {
+            console.error(`lesson_updater: unknown type "${type}"`);
+        }
+    }
+
+    // === Load Plan + Lessons ===
+    // Check if new plan has to be loaded and load it
+    $: $indexed_db, load_plan(
+        $api_base,
+        school_num,
+        date,
+        selected_revision,
+        enabled_dates,
+        free_days,
+        handle_last_updated, handle_loading_state, handle_plan_data, renew_abort_controller
+    );
+    // Load the new lessons on change to selected plan
+    $: meta && load_lessons(plan_data, school_num, plan_type, plan_value, $settings.use_grouped_form_plans, meta, reset_plan_vars, update_lessons);
+    // Apply Preferences to lessons
+    $: lessons = sort_lessons(apply_preferences(plan_type, preferences_apply, $selected_favorite, $favorites, all_lessons));
+
+    // === Load Extra Teacher Data ===
+    // Get teacher data (Name, Contact and Image Link)
+    $: if(plan_type === "teachers") {
+        [full_teacher_name, teacher_contact_link, teacher_image_path] = get_teacher_data(meta.teachers, plan_value, school_num);
+    }
+
+    // === UI + Navigation ===
+    // Get if loading failed
+    $: loading_failed = (cache_loading_failed && network_loading_failed && !loading);
+
+    // Get plan version string
+    $: available_plan_version = get_plan_version(is_default_plan, data_from_cache, network_loading_failed, caching_successful);
+
+    function sort_lessons(lessons) {
+        // TODO: after block refactor
+        let tmp_out = Array.from({length: block_count}, (v, i) => [[], [], []]); // [[blocks], [top halfs], [bottom halfs]]
+        for(const lesson of lessons) {
+            tmp_out[
+                Math.floor((lesson.periods[0] + 1) / 2)-1
+                ][
+                    lesson.periods.length > 1 ? 0 : (lesson.periods[0] % 2 == 0 ? 2 : 1)
+                ].push(lesson);
+        }
+        return tmp_out;
+    }
+</script>
+<div class="day"
+     class:first
+     class:last
+     class:cached={available_plan_version === "cached"}
+     class:network_cached={available_plan_version === "network_cached"}
+     class:network_uncached={available_plan_version === "network_uncached"}
+     class:is_default_plan={available_plan_version === "default_plan"}
+     class:room_overview={plan_type === "room_overview"}
+     class:invalid_date={loading_failed || getDateDisabled(enabled_dates, free_days, date)}
+>
+    <h2 class="day-heading">
+        {date ? format_date_heading(date) : "..."}
+        {#if (exams && Object.keys(exams).length !== 0) || info}
+            <button class="info-btn" class:infos-available={info && info.additional_info.length > 0} class:exams-available={exams && Object.keys(exams).length !== 0} on:click={() => {
+                $active_modal = "day-inspect";
+                $inspecting_day = {
+                    info: info,
+                    exams: exams,
+                    is_default_plan: is_default_plan,
+                    last_fetch: last_fetch,
+                    date: date ? format_date(date) : "..."
+                };
+            }}>
+                <span class="material-symbols-outlined">info</span>
+            </button>
+        {/if}
+    </h2>
+    {#if loading}
+        <span class="responsive-text" style="white-space: nowrap; padding: 1rem 2rem;">Tag Lädt...</span>
+    {:else if getDateDisabled(enabled_dates, free_days, date)}
+        <span class="responsive-text" style="min-width: 8rem;">Kein Plan verfügbar.</span>
+    {:else if loading_failed}
+        <span class="responsive-text" style="min-width: 8rem;">Plan konnte nicht geladen werden.</span>
+    {:else}
+        {#if lessons.length === 0}
+            {#if plan_type}
+                <span class="responsive-text">Keine Stunden</span>
+            {:else}
+                <span class="responsive-text">Wähle eine Klasse, einen Lehrer, einen Raum oder die Raumübersicht aus, um {#if is_default_plan}eine Planvorhersage{:else}einen Plan{/if} zu sehen.</span>
+            {/if}
+        {:else}
+            {#if plan_type !== "room_overview"}
+                <!-- Day Content -->
+                {#each {length: block_count} as _, i}
+                    <div class="block">
+                        {#if lessons[i][0].length > 0}
+                            <div class="blocks-container">
+                                {#each lessons[i][0] as lesson}
+                                    <Lesson lesson={lesson} bind:plan_type bind:plan_value bind:date />
+                                {/each}
+                            </div>
+                        {/if}
+                        {#if lessons[i][1].length > 0 || lessons[i][2].length > 0}
+                            <div class="lessons-container">
+                                <div class="lesson top">
+                                    {#each lessons[i][1] as lesson}
+                                        <Lesson lesson={lesson} bind:plan_type bind:plan_value bind:date />
+                                    {/each}
+                                </div>
+                                <div class="lesson bottom">
+                                    {#each lessons[i][2] as lesson}
+                                        <Lesson lesson={lesson} bind:plan_type bind:plan_value bind:date />
+                                    {/each}
+                                </div>
+                            </div>
+                        {/if}
+                    </div>
+                {/each}
+            {:else}
+                <Rooms bind:rooms_data bind:plan_type bind:plan_value bind:all_rooms bind:used_rooms_hidden />
+            {/if}
+        {/if}
+    {/if}
+</div>
+
+<style lang="scss">
+  $lesson_height: 4.9rem; // Needs to be changed in Weekplan.svelte as well
+
+  .invalid_date > h2 > .info-btn {
+    display: none;
+  }
+
+  .info-btn {
+    --padding: .2rem;
+    z-index: 1;
+    padding: var(--padding);
+    background: rgba(255, 255, 255, 0.1);
+    border: none;
+    height: calc(var(--font-size-base) + var(--padding) * 2);
+    width: calc(var(--font-size-base) + var(--padding) * 2);
+    line-height: var(--font-size-base);
+    border-radius: 9vw;
+
+    &.infos-available {
+      background: rgba(255, 255, 255, 0.2);
+
+      .material-symbols-outlined {
+        color: var(--text-color);
+      }
+    }
+
+    &.exams-available {
+      background: var(--accent-color);
+
+      .material-symbols-outlined {
+        color: var(--text-color);
+      }
+    }
+
+    .material-symbols-outlined {
+      font-size: var(--font-size-base);
+      padding: 0;
+      color: rgba(255, 255, 255, 0.2);
+    }
+  }
+
+  .day {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    width: max-content;
+    border-left: 1.5px solid rgba(255, 255, 255, 0.4);
+    border-bottom: 1.5px solid rgba(255, 255, 255, 0.4);
+
+    &.room_overview {
+      min-width: 20rem;
+    }
+
+    box-shadow: 0 1.5px 0 rgba(255, 255, 255, 0.6) inset;
+
+    &.cached {
+      box-shadow: 0 1.5px 0 rgba(255, 255, 255, 0.6) inset;
+    }
+
+    &.network_cached {
+      box-shadow: 0 1.5px 0 rgba(0, 219, 0, 0.6) inset;
+    }
+
+    &.network_uncached {
+      box-shadow: 0 1.5px 0 rgba(219, 174, 0, 0.6) inset;
+    }
+
+    &.is_default_plan {
+      box-shadow: 0 1.5px 0 rgba(219, 174, 0, 0.6) inset;
+    }
+
+    &.invalid_date {
+      box-shadow: 0 1.5px 0 var(--cancelled-color) inset;
+    }
+
+    &.first {
+      border-right: 1.5px solid rgba(255, 255, 255, 0.4);
+      border-radius: 1rem 0 0 0;
+    }
+
+    &.last {
+      border-right: 1.5px solid rgba(255, 255, 255, 0.4);
+      border-radius: 0 1rem 0 0;
+    }
+
+    padding: 0 .5rem;
+
+    .day-heading {
+      height: var(--font-size-lg);
+      line-height: var(--font-size-lg);
+      font-size: var(--font-size-lg);
+      font-weight: bold;
+      margin-bottom: 0.5rem;
+      margin-top: 0.3rem;
+      white-space: nowrap;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      gap: 0.5rem;
+    }
+
+    .block {
+      position: relative;
+      padding: .25rem 0;
+
+      &::before {
+        content: "";
+        position: absolute;
+        z-index: -1;
+        width: calc(100% + 1rem);
+        border-top: 1px solid rgba(255, 255, 255, 0.2);
+        top: 50%;
+        left: 50%;
+        transform: translateY(-50%) translateX(-50%);
+      }
+
+      &::after {
+        content: "";
+        position: absolute;
+        z-index: -1;
+        width: calc(100% + 1rem);
+        border-top: 1px solid rgba(255, 255, 255, 0.2);
+        top: 0;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+
+      height: calc(2 * $lesson_height);
+      display: flex;
+      flex-direction: row;
+
+      .blocks-container {
+        height: calc(2 * $lesson_height);
+        display: flex;
+        flex-direction: row;
+        gap: .4rem;
+        padding: .2rem;
+        box-sizing: border-box;
+      }
+
+      .lessons-container {
+        height: calc(2 * $lesson_height);
+        display: flex;
+        flex-direction: column;
+
+        .lesson {
+          height: $lesson_height;
+          gap: .4rem;
+          padding: .2rem;
+          box-sizing: border-box;
+          display: flex;
+          flex-direction: row;
+
+          &.top {
+            padding-bottom: .3rem;
+          }
+          &.bottom {
+            padding-top: .3rem;
+          }
+        }
+      }
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/client/src/components/Weekplan/DayInspect.svelte b/client/src/components/Weekplan/DayInspect.svelte
new file mode 100644
index 00000000..4b3c51e3
--- /dev/null
+++ b/client/src/components/Weekplan/DayInspect.svelte
@@ -0,0 +1,29 @@
+<script>
+    import {active_modal, inspecting_day} from "../../stores.js";
+    import Modal from "../../base_components/Modal.svelte";
+    import Button from "../../base_components/Button.svelte";
+    import DayInfos from "../Plan/DayInfos.svelte";
+</script>
+
+<Modal id="day-inspect">
+    <h1 class="responsive-heading">{$inspecting_day ? $inspecting_day.date : "..."}</h1>
+
+    {#if $inspecting_day}
+        <DayInfos
+            exams={$inspecting_day.exams}
+            info={$inspecting_day.info}
+            revision_arr={[]}
+            is_default_plan={$inspecting_day.is_default_plan}
+            last_fetch={$inspecting_day.last_fetch}
+            selected_revision={null}
+            date={null}
+            plan_type={null}
+            plan_value={null}
+            text_color="white"
+        />
+    {/if}
+
+    <svelte:fragment slot="footer">
+        <Button on:click={() => {$active_modal = ""}} small={true}>Schließen</Button>
+    </svelte:fragment>
+</Modal>
\ No newline at end of file
diff --git a/client/src/components/Weekplan/Lesson.svelte b/client/src/components/Weekplan/Lesson.svelte
index 4fb68c08..d05cad8d 100644
--- a/client/src/components/Weekplan/Lesson.svelte
+++ b/client/src/components/Weekplan/Lesson.svelte
@@ -1,6 +1,6 @@
 <script>
     import Dropdown from "../../base_components/Dropdown.svelte";
-    import {selected_favorite, settings} from "../../stores.js";
+    import {active_modal, selected_favorite, settings, inspecting_lesson} from "../../stores.js";
     import {arraysEqual} from "../../utils.js";
     import {getLabelOfPeriods} from "../../periods_utils.js";
 
@@ -29,6 +29,14 @@
 </script>
 
 <div class="card" class:cancelled={!lesson.takes_place} class:changed={lesson.is_unplanned}>
+    {#if (lesson.info.length > 0) || (plan_type === "forms" && (forms.length > 1)) || (plan_type === "teachers" && (teachers.length > 1)) || (plan_type === "rooms" && (rooms.length > 1))}
+        <button class="info-btn" on:click={() => {
+            $active_modal = "lesson-inspect";
+            $inspecting_lesson = lesson;
+        }}>
+            <span class="material-symbols-outlined">info</span>
+        </button>
+    {/if}
     <div class="vertical-align" style="height: 100%;">
         <!-- Subject -->
         <div class="subject" class:changed={subject_changed} class:changed_filled_in={$settings.filled_in_buttons && subject_changed}>
@@ -48,7 +56,7 @@
         </div>
         <!-- Teachers -->
         {#if plan_type !== "teachers"}
-            <div class="teachers" class:changed={teacher_changed} class:changed_filled_in={$settings.filled_in_buttons && teacher_changed}
+            <div class="teachers info-element" class:changed={teacher_changed} class:changed_filled_in={$settings.filled_in_buttons && teacher_changed}
                  class:teacher_absent={only_teacher_absent} class:cancelled_filled_in={$settings.filled_in_buttons && only_teacher_absent}>
                 {#if teachers.length !== 0 || s_teachers.length !== 0}
                     {#each teachers || [] as teacher}
@@ -144,124 +152,38 @@
             {/if}
         {/if}
     </div>
-    <!-- TODO: Popup for Additional Infos and clickable elements -->
-    <div style="display: none !important;">
-        {#if (lesson.info.length > 0) || (plan_type === "forms" && (forms.length > 1)) || (plan_type === "teachers" && (teachers.length > 1)) || (plan_type === "rooms" && (rooms.length > 1))}
-            <div class="info-element lesson-info">
-                <ul>
-                    {#each lesson.info as info_paragraph}
-                        {#each info_paragraph as info_message}
-                            <li>
-                                <div class="horizontal-align">
-                                    {#each info_message.text_segments as text_segment}
-                                        {#if text_segment.link?.value.length === 1}
-                                            <button class="no-btn-visuals" on:click={() => {
-                                                date = text_segment.link.date;
-                                                plan_type = text_segment.link.type;
-                                                plan_value = text_segment.link.value[0];
-                                                selected_favorite.set(-1);
-                                            }}>
-                                                <div class="clickable">{text_segment.text}</div>
-                                            </button>
-                                        {:else if text_segment.link?.value.length >= 2}
-                                            <div class="fit-content-width">
-                                                <Dropdown small={true} transform_origin_x="50%">
-                                                    <button slot="toggle_button" let:toggle on:click={toggle} class="toggle-button">
-                                                        <span class="grow">{text_segment.text}</span>
-                                                        <span class="material-symbols-outlined dropdown-arrow">arrow_drop_down</span>
-                                                    </button>
-
-                                                    {#each text_segment.link.value as item}
-                                                        <button on:click={() => {
-                                                            date=text_segment.link.date;
-                                                            plan_type = text_segment.link.type;
-                                                            plan_value = item;
-                                                            selected_favorite.set(-1);
-                                                        }}>{item}</button>
-                                                    {/each}
-                                                </Dropdown>
-                                            </div>
-                                        {:else}
-                                            <button class="no-btn-visuals">{text_segment.text}</button>
-                                        {/if}
-                                    {/each}
-                                </div>
-                            </li>
-                        {/each}
-                    {/each}
-                    {#if plan_type === "forms" && (forms.length > 1)}
-                        <li>
-                            <div class="horizontal-align">
-                                Beteiligte Klassen:
-                                <div class="fit-content-width">
-                                    <Dropdown small={true} transform_origin_x="50%">
-                                        <button slot="toggle_button" let:toggle on:click={toggle} class="toggle-button">
-                                            <span class="grow">{forms_str}</span>
-                                            <span class="material-symbols-outlined dropdown-arrow">arrow_drop_down</span>
-                                        </button>
-
-                                        {#each forms as form}
-                                            <button on:click={() => {
-                                            plan_type = "forms";
-                                            plan_value = form;
-                                        }}>{form}</button>
-                                        {/each}
-                                    </Dropdown>
-                                </div>
-                            </div>
-                        </li>
-                    {/if}
-                    {#if plan_type === "teachers" && (teachers.length > 1)}
-                        <li>
-                            <div class="horizontal-align">
-                                Beteiligte Lehrer:
-                                <div class="fit-content-width">
-                                    <Dropdown small={true} transform_origin_x="50%">
-                                        <button slot="toggle_button" let:toggle on:click={toggle} class="toggle-button">
-                                            <span class="grow">{teachers.join(', ')}</span>
-                                            <span class="material-symbols-outlined dropdown-arrow">arrow_drop_down</span>
-                                        </button>
-
-                                        {#each teachers as teacher}
-                                            <button on:click={() => {
-                                            plan_type = "teachers";
-                                            plan_value = teacher;
-                                        }}>{teacher}</button>
-                                        {/each}
-                                    </Dropdown>
-                                </div>
-                            </div>
-                        </li>
-                    {/if}
-                    {#if plan_type === "rooms" && (rooms.length > 1)}
-                        <li>
-                            <div class="horizontal-align">
-                                In Räumen:
-                                <div class="fit-content-width">
-                                    <Dropdown small={true} transform_origin_x="50%">
-                                        <button slot="toggle_button" let:toggle on:click={toggle} class="toggle-button">
-                                            <span class="grow">{rooms.join(', ')}</span>
-                                            <span class="material-symbols-outlined dropdown-arrow">arrow_drop_down</span>
-                                        </button>
-
-                                        {#each rooms as room}
-                                            <button on:click={() => {
-                                            plan_type = "rooms";
-                                            plan_value = room;
-                                            selected_favorite.set(-1);
-                                        }}>{room}</button>
-                                        {/each}
-                                    </Dropdown>
-                                </div>
-                            </div>
-                        </li>
-                    {/if}
-                </ul>
-            </div>
-        {/if}
-    </div>
 </div>
 <style lang="scss">
+  .info-btn {
+    overflow: hidden;
+    --padding: .2rem;
+    position: absolute;
+    top: 0;
+    right: 0;
+    transform: translate(30%, -20%);
+    z-index: 1;
+    padding: var(--padding);
+    background: var(--background);
+
+    &::before {
+      content: "";
+      background: rgba(255, 255, 255, 0.2);
+      position: absolute;
+      inset: 0;
+    }
+
+    border: none;
+    height: calc(var(--font-size-sm) + var(--padding) * 2);
+    width: calc(var(--font-size-sm) + var(--padding) * 2);
+    line-height: var(--font-size-sm);
+    border-radius: 9vw;
+
+    .material-symbols-outlined {
+      font-size: var(--font-size-sm);
+      padding: 0;
+      color: var(--text-color);
+    }
+  }
   .dropdown-arrow {
     font-size: 1.4em;
     display: block;
@@ -399,8 +321,8 @@
   }
 
   .changed {
-    outline: solid 3px var(--accent-color);
-    outline-offset: -3px;
+    outline: solid 1.5px var(--accent-color);
+    outline-offset: -1.5px;
   }
 
   .changed_filled_in {
@@ -414,8 +336,18 @@
     color: var(--text-color);
     font-weight: 400;
     border: none;
+    padding: .1rem .3rem;
     background: none;
     text-align: center;
+    border-radius: 5px;
+  }
+
+  .subject {
+    white-space: nowrap;
+  }
+
+  .extra_padding {
+    padding: .05rem .5rem;
   }
 
   .rooms.horizontal-align {
@@ -436,8 +368,8 @@
   }
 
   .cancelled {
-    outline: var(--cancelled-color) solid 3px;
-    outline-offset: -3px;
+    outline: var(--cancelled-color) solid 1.5px;
+    outline-offset: -1.5px;
   }
 
   .cancelled_filled_in {
@@ -457,8 +389,8 @@
     background: var(--background);
     border-radius: .5rem;
     height: 100%;
-    width: 6rem;
-    padding: .2rem;
+    min-width: 6rem;
+    padding: .2rem .4rem;
     box-sizing: border-box;
     font-size: var(--font-size-sm);
 
diff --git a/client/src/components/Weekplan/LessonInspect.svelte b/client/src/components/Weekplan/LessonInspect.svelte
new file mode 100644
index 00000000..2ec67bf2
--- /dev/null
+++ b/client/src/components/Weekplan/LessonInspect.svelte
@@ -0,0 +1,25 @@
+<script>
+    import {active_modal, inspecting_lesson} from "../../stores.js";
+    import Modal from "../../base_components/Modal.svelte";
+    import Button from "../../base_components/Button.svelte";
+    import Lesson from "../Plan/Lesson.svelte";
+</script>
+
+<Modal id="lesson-inspect">
+    <h1 class="responsive-heading">Stundeninspektor</h1>
+
+    {#if $inspecting_lesson}
+        <Lesson
+            lesson={$inspecting_lesson}
+            plan_type={null}
+            plan_value={null}
+            date={null}
+            display_time={true}
+            disable_interactions={true}
+        />
+    {/if}
+
+    <svelte:fragment slot="footer">
+        <Button on:click={() => {$active_modal = ""}} small={true}>Schließen</Button>
+    </svelte:fragment>
+</Modal>
\ No newline at end of file
diff --git a/client/src/components/Weekplan/Weekplan.svelte b/client/src/components/Weekplan/Weekplan.svelte
index 6227299d..6ab87bc3 100644
--- a/client/src/components/Weekplan/Weekplan.svelte
+++ b/client/src/components/Weekplan/Weekplan.svelte
@@ -1,26 +1,75 @@
 <script>
-    import Lesson from './Lesson.svelte';
     import {onMount} from "svelte";
-    import {arraysEqual, format_date, replace_page} from "../../utils.js";
-    import {selected_favorite, title} from "../../stores.js";
-    import {sameBlock} from "../../plan.js";
-    import {getLabelOfPeriods} from "../../periods_utils.js";
-    import Rooms from "../Rooms.svelte";
+    import {format_date, replace_page, replace_hash, update_hash} from "../../utils.js";
+    import {gen_location_hash, getDateDisabled} from "../../plan.js";
+    import {selected_favorite, settings, title} from "../../stores.js";
+    import Day from "./Day.svelte";
+
+    // Force date to be monday
+    $: date, (() => {
+        let tmp_date = firstDayOfWeek(new Date(date), 1);
+        date = `${tmp_date.getFullYear()}-${pad(tmp_date.getMonth()+1)}-${pad(tmp_date.getDate())}`;
+    })();
 
-    export let api_base;
     export let school_num;
     export let date;
     export let plan_type;
     export let plan_value;
     export let meta;
-    export let extra_height = true;
-    export let week_letter = "";
     export let all_rooms;
-    export let selected_revision;
     export let enabled_dates;
     export let free_days;
-    export let available_plan_version;
+    const pad = (n, s = 2) => (`${new Array(s).fill(0)}${n}`).slice(-s);
     let used_rooms_hidden = true;
+    let show_left_key = true;
+    let left_key_default_plan = false;
+    let show_right_key = true;
+    let right_key_default_plan = false;
+    let week_type;
+    let week_dates = [];
+    let full_teacher_name;
+    let teacher_contact_link;
+    let teacher_image_path;
+
+    function change_day(direction) {
+        let tmp_date = new Date(date);
+        tmp_date.setDate(tmp_date.getDate() + direction);
+        date = `${tmp_date.getFullYear()}-${pad(tmp_date.getMonth()+1)}-${pad(tmp_date.getDate())}`;
+    }
+
+    function firstDayOfWeek(dateObject, firstDayOfWeekIndex) {
+        const dayOfWeek = dateObject.getDay(),
+            firstDayOfWeek = new Date(dateObject),
+            diff = dayOfWeek >= firstDayOfWeekIndex ?
+                dayOfWeek - firstDayOfWeekIndex :
+                6 - dayOfWeek
+
+        firstDayOfWeek.setDate(dateObject.getDate() - diff)
+        firstDayOfWeek.setHours(0,0,0,0)
+
+        return firstDayOfWeek
+    }
+
+    function keydown_handler(event) {
+        if($settings.day_switch_keys) {
+            if(event.key === "ArrowLeft") {
+                event.preventDefault();
+                change_day(-7);
+            } else if(event.key === "ArrowRight") {
+                event.preventDefault();
+                change_day(7);
+            }
+        }
+    }
+
+    function update_date_btns() {
+        // TODO: Week logic somehow
+        /*let valid_prev_date = get_valid_date(date, -1);
+        left_key_default_plan = valid_prev_date && enabled_dates.indexOf(valid_prev_date) === -1;
+        show_left_key = !!valid_prev_date;
+        right_key_default_plan = enabled_dates.indexOf(date) === -1 || enabled_dates.indexOf(date) === enabled_dates.length - 1;
+        show_right_key = true;*/
+    }
 
     onMount(() => {
         if(!school_num) {
@@ -29,49 +78,6 @@
         title.set("Wochenplan");
     });
 
-    // TODO: Remove
-    let test_lesson = {
-        "begin": "08:00",
-        "class_number": "353",
-        "current_class": "5Et12",
-        "current_forms": [
-            "5/1",
-            "5/2"
-        ],
-        "current_forms_str": "5/1,2",
-        "current_rooms": [
-            "214"
-        ],
-        "current_teachers": [
-            "CRL"
-        ],
-        "end": "09:30",
-        "forms_changed": false,
-        "info": [],
-        "is_unplanned": false,
-        "periods": [
-            1,
-            2
-        ],
-        "room_changed": false,
-        "scheduled_class": "5Et12",
-        "scheduled_forms": [
-            "5/1",
-            "5/2"
-        ],
-        "scheduled_forms_str": "5/1,2",
-        "scheduled_rooms": [
-            "214",
-            "215"
-        ],
-        "scheduled_teachers": [
-            "CRL"
-        ],
-        "subject_changed": false,
-        "takes_place": true,
-        "teacher_changed": false
-    };
-
     let test_rooms_data = {
         "free_rooms_by_block": {
             "1": [
@@ -80,25 +86,12 @@
         }
     };
 
-    let full_teacher_name = "Crazy bro";
-
     const plan_type_map = {
         "forms": "Klasse",
         "rooms": "Raum",
         "teachers": "Lehrer"
     };
 
-    // TODO: null setzen wenn nicht verfügbar
-    let week_info = {
-        start: new Date("2024-03-18"),
-        type: "A"
-    };
-
-    // TODO: entfernen
-    plan_type = "forms";
-    plan_value = "5/1"
-
-    // TODO: Logic
     let preferences_apply = true;
 
     const lesson_start = 1;
@@ -108,110 +101,97 @@
     const block_start = 1;
     const block_end = 5;
     const block_count = block_end - block_start + 1;
+
+    // Update visibility of date switching buttons
+    $: date && enabled_dates && update_date_btns();
+    // Update location hash
+    $: school_num, date, plan_type, plan_value, (() => {
+        if(location.hash === "#weekplan") {
+            replace_hash(gen_location_hash("weekplan", school_num, date, plan_type, plan_value))
+            return;
+        }
+        update_hash(gen_location_hash("weekplan", school_num, date, plan_type, plan_value));
+    })();
+
+    $: date, week_dates = [0, 1, 2, 3, 4].map((offset) => {
+        let tmp_date = new Date(date);
+        tmp_date.setDate(tmp_date.getDate() + offset);
+        return `${tmp_date.getFullYear()}-${pad(tmp_date.getMonth()+1)}-${pad(tmp_date.getDate())}`;
+    })
 </script>
 
-{#if plan_type !== "room_overview"}
-    <!-- TODO: Vorhersage von einem Tag mit orangenem Rand anzeigen -->
-    {#if week_info && plan_type && plan_value}
-        {#if plan_type === "forms" && ($selected_favorite !== -1)}
-            <button on:click={() => {preferences_apply = !preferences_apply}} class="plus-btn">{preferences_apply ? "Alle Stunden anzeigen" : "Nur ausgewählte anzeigen"}</button>
+<svelte:window on:keydown={keydown_handler}/>
+
+{#if !plan_type}
+    <span class="responsive-text">Wähle eine Klasse, einen Lehrer, einen Raum oder die Raumübersicht aus, um einen Plan zu sehen.</span>
+{:else}
+    <div class="plan">
+        {#if week_type && plan_type && plan_value}
+            {#if plan_type === "forms" && ($selected_favorite !== -1)}
+                <button on:click={() => {preferences_apply = !preferences_apply}} class="plus-btn">{preferences_apply ? "Alle Stunden anzeigen" : "Nur ausgewählte anzeigen"}</button>
+            {/if}
+            <h1 class="plan-heading">
+                Woche für {plan_type_map[plan_type]} <span class="custom-badge">{plan_value}{#if plan_type === "teachers"}{#if full_teacher_name !== null}{` (${full_teacher_name})`}{/if}{/if}</span> vom <span class="custom-badge">{format_date(date)}</span> <span class="no-linebreak">{#if week_type}({week_type}-Woche){/if}</span>
+            </h1>
         {/if}
-        <h1 class="plan-heading">
-            Woche für {plan_type_map[plan_type]} <span class="custom-badge">{plan_value}{#if plan_type === "teachers"}{#if full_teacher_name !== null}{` (${full_teacher_name})`}{/if}{/if}</span> vom <span class="custom-badge">{format_date(week_info.start)}</span> <span class="no-linebreak">{#if week_info.type}({week_info.type}-Woche){/if}</span>
-        </h1>
-    {/if}
-
-    <div class="week" style="">
-        <div class="time-indicators">
-            <div class="block-col">
-                {#each {length: block_count} as _, i}
-                    <span>{i + block_start}</span>
-                {/each}
-            </div>
-            <div class="lesson-col">
-                {#each {length: lesson_count} as _, i}
-                    <span>{i + lesson_start}</span>
-                {/each}
-            </div>
-        </div>
-        {#each {length: 5} as _, i}
-        <div class="day" class:last={i === 4}>
-            <h2 class="day-heading">Mon. 11.3.</h2>
-            {#if false} <!-- loading -->
-                <span class="responsive-text">Lädt...</span>
-            {:else if false} <!-- loading_failed -->
-                <span class="responsive-text">Plan konnte nicht geladen werden.</span>
-            {:else}
-                {#if false} <!-- lessons.length === 0 -->
-                    {#if plan_type}
-                        <span class="responsive-text">Keine Stunden</span>
-                    {:else}
-                        <!-- <span class="responsive-text">Wähle eine Klasse, einen Lehrer, einen Raum oder die Raumübersicht aus, um {#if is_default_plan}eine Planvorhersage{:else}einen Plan{/if} zu sehen.</span>-->
-                    {/if}
-                {:else}
-                    <!-- Day Content -->
+
+        {#if plan_type === "room_overview"}
+            <button on:click={() => {used_rooms_hidden = !used_rooms_hidden}} class="plus-btn">{used_rooms_hidden ? "Besetzte Räume anzeigen" : "Nur freie Räume anzeigen"}</button>
+            {#if week_type}
+                <h1 class="plan-heading">Freie Räume in der Woche vom <span class="custom-badge">{format_date(date)}</span> <span class="no-linebreak"/>({week_type}-Woche)</h1>
+            {/if}
+        {/if}
+
+        <div class="week">
+            <div class="time-indicators" class:hidden={plan_type === "room_overview"}>
+                <div class="block-col">
                     {#each {length: block_count} as _, i}
-                        <div class="block">
-                            <div class="blocks-container">
-                                <Lesson lesson={test_lesson} bind:plan_type bind:plan_value bind:date />
-                            </div>
-                            <div class="lessons-container">
-                                <div class="lesson top">
-                                </div>
-                                <div class="lesson bottom">
-                                </div>
-                            </div>
-                        </div>
+                        <span>{i + block_start}</span>
+                    {/each}
+                </div>
+                <div class="lesson-col">
+                    {#each {length: lesson_count} as _, i}
+                        <span>{i + lesson_start}</span>
                     {/each}
-                {/if}
-            {/if}
-        </div>
-        {/each}
-    </div>
-{:else}
-    <button on:click={() => {used_rooms_hidden = !used_rooms_hidden}} class="plus-btn">{used_rooms_hidden ? "Besetzte Räume anzeigen" : "Nur freie Räume anzeigen"}</button>
-    {#if week_info}
-        <h1 class="plan-heading">Freie Räume in der Woche vom <span class="custom-badge">{format_date(week_info.start)}</span> <span class="no-linebreak"/>({week_info.type}-Woche)</h1>
-    {/if}
-    {#if false} <!-- loading -->
-        <span class="responsive-text">Lädt...</span>
-    {:else if false} <!-- loading_failed -->
-        <span class="responsive-text">Plan{#if is_default_plan}vorhersage{/if} konnte nicht geladen werden</span>
-    {:else}
-        <div class="free_rooms_week">
-            {#each {length: 5} as _, i}
-                <div>
-                    <h1 class="plan-heading" style="white-space: nowrap;">Mon. 11.03.</h1>
-                    <Rooms rooms_data={test_rooms_data} bind:plan_type bind:plan_value bind:all_rooms bind:used_rooms_hidden />
                 </div>
+            </div>
+            {#each week_dates as week_date, i}
+                <Day
+                    first={i === 0}
+                    last={i === week_dates.length-1}
+                    bind:school_num
+                    bind:plan_type
+                    bind:plan_value
+                    bind:all_rooms
+                    bind:full_teacher_name
+                    bind:teacher_contact_link
+                    bind:teacher_image_path
+                    bind:used_rooms_hidden
+                    bind:week_letter={week_type}
+                    bind:preferences_apply
+                    enabled_dates={enabled_dates}
+                    free_days={free_days}
+                    date={week_date}
+                    block_count={block_count}
+                    meta={meta} />
             {/each}
         </div>
-    {/if}
+    </div>
 {/if}
-<!--
+
 <div class="day-controls">
-    <button tabindex="-1" on:click={() => {change_day(-1);}} class:hidden={!show_left_key}><span class="material-symbols-outlined left">arrow_back_ios_new</span></button>
-    <button tabindex="-1" on:click={() => {change_day(1);}} class:hidden={!show_right_key}><span class="material-symbols-outlined right">arrow_forward_ios</span></button>
+    <button tabindex="-1" on:click={() => {change_day(-7);}} class:hidden={!show_left_key}><span class="material-symbols-outlined left">arrow_back_ios_new</span></button>
+    <button tabindex="-1" on:click={() => {change_day(7);}} class:hidden={!show_right_key}><span class="material-symbols-outlined right">arrow_forward_ios</span></button>
 </div>
--->
-<style lang="scss">
-  $lesson_height: 4.7rem;
-
-  .free_rooms_week {
-    display: flex;
-    flex-direction: row;
-    gap: 1rem;
-    overflow-x: auto;
-    width: 100%;
 
-    & > div {
-      min-width: min(70vw, 25rem);
-    }
-  }
+<style lang="scss">
+  $lesson_height: 4.9rem; // Needs to be changed in Day.svelte as well
 
   .week {
     display: flex;
     flex-direction: row;
+    border-radius: 1rem;
+    padding-left: 10px;
 
     width: 100%;
     overflow-x: auto;
@@ -221,7 +201,11 @@
       flex-direction: row;
       gap: 0.5rem;
       margin-right: 0.5rem;
-      margin-top: calc(var(--font-size-lg) + .5rem);
+      margin-top: calc(var(--font-size-lg) + .8rem);
+
+      &.hidden {
+        display: none;
+      }
 
       .block-col {
         display: flex;
@@ -248,91 +232,6 @@
         }
       }
     }
-
-    .day {
-      display: flex;
-      flex-direction: column;
-      width: max-content;
-      border-left: 1.5px solid rgba(255, 255, 255, 0.4);
-      border-bottom: 1.5px solid rgba(255, 255, 255, 0.4);
-
-      &.last {
-        border-right: 1.5px solid rgba(255, 255, 255, 0.4);
-      }
-
-      padding: 0 .5rem;
-
-      .day-heading {
-        height: var(--font-size-lg);
-        line-height: var(--font-size-lg);
-        font-size: var(--font-size-lg);
-        font-weight: bold;
-        margin-bottom: 0.5rem;
-        white-space: nowrap;
-      }
-
-      .block {
-        position: relative;
-        padding: .25rem 0;
-
-        &::before {
-          content: "";
-          position: absolute;
-          z-index: -1;
-          width: calc(100% + 1rem);
-          border-top: 1px solid rgba(255, 255, 255, 0.2);
-          top: 50%;
-          left: 50%;
-          transform: translateY(-50%) translateX(-50%);
-        }
-
-        &::after {
-          content: "";
-          position: absolute;
-          z-index: -1;
-          width: calc(100% + 1rem);
-          border-top: 1px solid rgba(255, 255, 255, 0.2);
-          top: 0;
-          left: 50%;
-          transform: translateX(-50%);
-        }
-
-        height: calc(2 * $lesson_height);
-        display: flex;
-        flex-direction: row;
-
-        .blocks-container {
-          height: calc(2 * $lesson_height);
-          display: flex;
-          flex-direction: row;
-          gap: .2rem;
-          padding: .2rem;
-          box-sizing: border-box;
-        }
-
-        .lessons-container {
-          height: calc(2 * $lesson_height);
-          display: flex;
-          flex-direction: column;
-
-          .lesson {
-            height: $lesson_height;
-            gap: .2rem;
-            padding: .2rem;
-            box-sizing: border-box;
-            display: flex;
-            flex-direction: row;
-
-            &.top {
-              padding-bottom: .3rem;
-            }
-            &.bottom {
-              padding-top: .3rem;
-            }
-          }
-        }
-      }
-    }
   }
 
 
diff --git a/client/src/plan.js b/client/src/plan.js
index e454ef3b..f8495c51 100644
--- a/client/src/plan.js
+++ b/client/src/plan.js
@@ -1,4 +1,4 @@
-import {get_from_db, customFetch, cache_plan} from "./utils.js";
+import {get_from_db, customFetch, cache_plan, format_revision_date} from "./utils.js";
 
 export function periods_to_block_label(periods) {
     periods.sort(function (a, b) {  return a - b;  });
@@ -197,4 +197,16 @@ export function apply_preferences(plan_type, preferences_apply, selected_favorit
         }
     }
     return new_lessons;
+}
+
+export function gen_revision_arr(all_revisions) {
+    let revision_arr = [];
+    for(const [index, revision] of Object.entries(all_revisions)) {
+        if (index == 1) {continue;}
+        revision_arr.push({
+            "id": revision,
+            "display_name": format_revision_date(revision, all_revisions[1])
+        });
+    }
+    return revision_arr;
 }
\ No newline at end of file
diff --git a/client/src/stores.js b/client/src/stores.js
index 4d323dc5..9b136222 100644
--- a/client/src/stores.js
+++ b/client/src/stores.js
@@ -11,5 +11,8 @@ export const pwa_prompt = writable();
 export const new_changelogs_available = writable(false);
 export const favorites = writable([]);
 export const selected_favorite = writable(0);
+export const api_base = writable("");
+export const inspecting_lesson = writable(null);
+export const inspecting_day = writable(null);
 
 export const register_button_visible = writable(false);
\ No newline at end of file
diff --git a/client/src/utils.js b/client/src/utils.js
index 3b9ddfc2..fc38c726 100644
--- a/client/src/utils.js
+++ b/client/src/utils.js
@@ -127,7 +127,7 @@ export function replace_page(page_id) {
 }
 
 function change_page(page_id) {
-    if(page_id === "plan" && get(current_page).startsWith("plan")) {return false;}
+    if((page_id === "plan" || page_id === "weekplan") && get(current_page).startsWith(page_id)) {return false;}
     current_page.set(page_id);
     register_button_visible.set(false);
     // console.log(`Changed Location to: "${page_id}"`);
diff --git a/user_settings.py b/user_settings.py
index f7d7866a..cce27d68 100644
--- a/user_settings.py
+++ b/user_settings.py
@@ -72,6 +72,10 @@ def validate_color(elem):
         "default": True,
         "type": "bool",
     },
+    "weekplan_default": {
+        "default": False,
+        "type": "bool",
+    }
 }
 TYPE_FUNCTIONS = {
     "bool": {