Merge pull request #282 from vplan-fr/main

Basic Default Plans Functionality
vplan-fr · Mar 12, 2024 · a3e361e · a3e361e
2 parents 38ad45a + 6731d47
commit a3e361e
Show file tree

Hide file tree

Showing 20 changed files with 2,103 additions and 330 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "svelte-app",
-  "version": "1.0.0",
+  "name": "vplan-fr",
+  "version": "1.1.0",
   "private": true,
   "type": "module",
   "scripts": {
@@ -9,26 +9,28 @@
     "start": "sirv public --no-clear"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^24.0.0",
-    "@rollup/plugin-node-resolve": "^15.0.0",
-    "@rollup/plugin-terser": "^0.4.0",
-    "rollup": "^3.15.0",
-    "rollup-plugin-css-only": "^4.3.0",
-    "rollup-plugin-livereload": "^2.0.0",
-    "rollup-plugin-svelte": "^7.1.2",
-    "sass": "^1.62.1",
-    "svelte": "^3.59.2",
-    "svelte-preprocess": "^5.0.4"
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "eslint": "^8.57.0",
+    "eslint-plugin-svelte": "^2.35.1",
+    "rollup": "^4.13.0",
+    "rollup-plugin-css-only": "^4.5.2",
+    "rollup-plugin-livereload": "^2.0.5",
+    "rollup-plugin-svelte": "^7.2.0",
+    "sass": "^1.71.1",
+    "svelte": "^4.2.12",
+    "svelte-preprocess": "^5.1.3"
   },
   "dependencies": {
-    "chart.js": "^4.4.0",
-    "postcss": "^8.4.24",
-    "sirv-cli": "^2.0.0",
+    "chart.js": "^4.4.2",
+    "postcss": "^8.4.35",
+    "sirv-cli": "^2.0.2",
     "svelte-chart": "^1.0.0",
-    "svelte-chartjs": "^3.1.2",
-    "svelte-gestures": "^1.5.2",
-    "svelte-markdown": "^0.4.0",
+    "svelte-chartjs": "^3.1.5",
+    "svelte-gestures": "^4.0.0",
+    "svelte-markdown": "^0.4.1",
     "svelte-scrollto-element": "^0.7.0",
-    "svelty-picker": "^4.1.4"
+    "svelty-picker": "^5.2.5"
   }
 }
diff --git a/client/src/App.svelte b/client/src/App.svelte
@@ -14,6 +14,7 @@
     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 {getDateDisabled} from './plan.js';
     import SchoolManager from "./components/SchoolManager.svelte";
     import Changelog from "./components/Changelog.svelte";
     import Select from "./base_components/Select.svelte";
@@ -42,6 +43,7 @@
     let selected_revision;
     let meta;
     let enabled_dates;
+    let free_days;
     let grouped_rooms;
     let course_lists;
     let selected_teacher;
@@ -58,7 +60,8 @@
     const available_plan_version_map = {
         "cached": "Offline Plan",
         "network_cached": "Aktueller Plan",
-        "network_uncached": "Online only Plan"
+        "network_uncached": "Online only Plan",
+        "default_plan": "Vorhersage"
     };
     let load_favorite = false;
 
@@ -75,6 +78,7 @@
         selected_revision = ".newest";
         meta = {};
         enabled_dates = [];
+        free_days = [];
         grouped_rooms = [];
         course_lists = {};
         selected_teacher = null;
@@ -100,6 +104,7 @@
                 teacher_dict = meta.teachers;
                 grouped_forms = meta.forms.grouped_forms;
                 enabled_dates = Object.keys(meta.dates);
+                free_days = meta.meta.free_days;
                 if(!date) {
                     date = meta.date;
                 }
@@ -141,6 +146,16 @@
         let curr_day = curr_date.getDay();
         let curr_hours = curr_date.getHours();
         let emoji = "👋";
+        if(free_days.includes(`${curr_date.getFullYear()}-${pad(curr_date.getMonth()+1)}-${pad(curr_date.getDate())}`)) {
+            if (curr_hours >= 4 && curr_hours < 8) {
+                emoji = "🥱";
+            } else if (curr_hours >= 20 || curr_hours < 4) {
+                emoji = "😴";
+            } else {
+                emoji = choose(["👋", "🕺", "💃", "🎮", "🎧"]);
+            }
+            return emoji;
+        }
         if(curr_day <= 5 && curr_day > 0 && curr_hours <= 17) {
             emoji = choose(["👨‍🏫", "👩‍🏫"]);
         }
@@ -244,8 +259,11 @@
         }
     }
 
-    function getDateDisabled(date) {
-        return !enabled_dates.includes(`${date.getFullYear()}-${pad(date.getMonth()+1)}-${pad(date.getDate())}`);
+    function customGetDateDisabled(date) {
+        if(typeof date === "object") {
+            date = `${date.getFullYear()}-${pad(date.getMonth()+1)}-${pad(date.getDate())}`;
+        }
+        return getDateDisabled(enabled_dates, free_days, date);
     }
 
     function logout() {
@@ -327,6 +345,15 @@
     $: school_num && (api_base = `/api/v69.420/${school_num}`);
     $: school_num && get_meta(school_num);
     $: 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 = meta.date;
+    })();
     //$: school_num && get_preferences();
     $: all_rooms && (grouped_rooms = group_rooms(all_rooms));
     $: $logged_in && (get_settings(), get_favorites(navigate_favorite));
@@ -374,6 +401,10 @@
         }
         navigate_page(new_location);
     }
+    // bypass auto scrolling.
+    if ('scrollRestoration' in history) {
+        history.scrollRestoration = 'manual';
+    }
 </script>
 
 <svelte:head>
@@ -417,16 +448,21 @@
                         <SveltyPicker
                             format="yyyy-mm-dd"
                             displayFormat="dd.mm.yyyy"
-                            disableDatesFn={getDateDisabled}
+                            disableDatesFn={customGetDateDisabled}
                             i18n={de}
                             clearBtn={false}
                             todayBtn={true}
+                            clearToggle={false}
                             inputClasses="datepicker-input"
                             bind:value={date}
                         />
                         {#if available_plan_version}
                             <div class="plan-status" transition:fade|local={{duration: 200}}>
-                                <span class="material-symbols-outlined" data-plan-type={available_plan_version}>check_circle</span>
+                                {#if available_plan_version === "default_plan"}
+                                    <span class="material-symbols-outlined" style="color: #dbae00">warning</span>
+                                {:else}
+                                    <span class="material-symbols-outlined" data-plan-type={available_plan_version}>check_circle</span>
+                                {/if}
                                 <span class="status-label">{available_plan_version_map[available_plan_version]}</span>
                             </div>
                         {/if}
@@ -455,7 +491,7 @@
                     </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:available_plan_version external_times={$settings.external_times} />
+                    <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 />
                 {/if}
@@ -488,8 +524,8 @@
     <Toast />
 </div>
 <footer class:padding={footer_padding}>
-    <Dropdown let:toggle small={true} transform_origin_x="100%" flipped={true}>
-        <button slot="toggle_button" on:click={toggle}><span class="material-symbols-outlined">menu</span></button>
+    <Dropdown small={true} transform_origin_x="100%" flipped={true}>
+        <button slot="toggle_button" let:toggle on:click={toggle}><span class="material-symbols-outlined">menu</span></button>
 
         {#if !$logged_in}<button on:click={() => {navigate_page("login")}}>Login</button>{/if}
         <button on:click={() => {navigate_page("")}}>Startseite</button>
@@ -700,12 +736,12 @@
         --sdt-color: var(--text-color);
         --sdt-color-selected: var(--text-color);
         --sdt-header-color: var(--text-color);
-        --sdt-primary: var(--accent-color);
+        --sdt-bg-selected: var(--accent-color);
         --sdt-disabled-date: var(--cancelled-color);
         --sdt-disabled-date-bg: var(--sdt-bg-main);
-        --sdt-btn-bg-hover: rgba(255, 255, 255, 0.2);
-        --sdt-btn-header-bg-hover: var(--sdt-btn-bg-hover);
-        --sdt-today-indicator: var(--sdt-bg-main);
+        --sdt-table-data-bg-hover: rgba(255, 255, 255, 0.2);
+        --sdt-header-btn-bg-hover: var(--sdt-table-data-bg-hover);
+        --sdt-table-today-indicator: var(--sdt-bg-main);
 
         :global(.datepicker-input) {
           width: 100%;

diff --git a/client/src/base_components/Select.svelte b/client/src/base_components/Select.svelte
@@ -119,8 +119,8 @@
 </svelte:head>
 
 <div class="select-wrapper">
-    <Dropdown let:toggle small={true} transform_origin_x="100%">
-        <button bind:this={toggle_button} type="button" slot="toggle_button" on:click={toggle} class="toggle-btn">
+    <Dropdown small={true} transform_origin_x="100%">
+        <button bind:this={toggle_button} type="button" slot="toggle_button" let:toggle on:click={toggle} class="toggle-btn">
             {#if selected_elem}
                 {selected_elem.display_name}
             {/if}

diff --git a/client/src/components/AboutUs.svelte b/client/src/components/AboutUs.svelte
@@ -2,10 +2,10 @@
     import { onMount } from "svelte";
     import { title } from "../stores";
     import Button from "../base_components/Button.svelte";
-    import {navigate_page} from "../utils.js";
+    import {navigate_page, update_hash} from "../utils.js";
 
     onMount(() => {
-        location.hash = "#about_us";
+        update_hash("about_us");
         title.set("Über uns");
         // console.log("Mounted AboutUs.svelte");
     });

diff --git a/client/src/components/Authentication.svelte b/client/src/components/Authentication.svelte
@@ -2,7 +2,7 @@
     import {notifications} from '../notifications.js';
     import { fly, fade } from 'svelte/transition';
     import { logged_in, title } from '../stores.js';
-    import {customFetch, navigate_page} from "../utils.js";
+    import {customFetch, navigate_page, update_hash} from "../utils.js";
 
     let l_nickname;
     let l_password;
@@ -62,10 +62,10 @@
     }
 
     function toggle_form() {
-        location.hash = location.hash === "#register" ? "#login" : "#register";
+        update_hash(location.hash === "#register" ? "login" : "register")
     }
-    
-    location.hash = register_visible ? "#register" : "#login";
+
+    update_hash(register_visible ? "register" : "login");
     title.set(register_visible ? "Registrieren" : "Login");
 
     window.addEventListener('popstate', () => {

diff --git a/client/src/components/Contact.svelte b/client/src/components/Contact.svelte
@@ -1,5 +1,5 @@
 <script>
-    import {customFetch, navigate_page} from "../utils.js";
+    import {customFetch, navigate_page, update_hash} from "../utils.js";
     import {notifications} from "../notifications.js";
     import Select from "../base_components/Select.svelte";
     import { onMount } from "svelte";
@@ -31,7 +31,7 @@
     }
 
     onMount(() => {
-        location.hash = "#contact";
+        update_hash("contact");
         title.set("Kontaktformular");
     });
 </script>

diff --git a/client/src/components/Favorites.svelte b/client/src/components/Favorites.svelte
@@ -1,5 +1,5 @@
 <script>
-    import {customFetch, get_favorites, load_meta} from "../utils.js";
+    import {customFetch, get_favorites, load_meta, update_hash} from "../utils.js";
     import Select from "../base_components/Select.svelte";
     import Button from "../base_components/Button.svelte";
     import {notifications} from "../notifications.js";
@@ -38,7 +38,7 @@
         });
 
     onMount(() => {
-        location.hash = "#favorites";
+        update_hash("favorites");
         title.set("Favoriten");
     });
 
@@ -76,10 +76,8 @@
         loading = true;
         // change preferences to dict
         let temp_fav = $favorites;
-        console.log(temp_fav);
         temp_fav = temp_fav.map(item => ({ ...item, preferences: (item.preferences || []).reduce((obj, preference) => ({ ...obj, [preference]: false }), {}) }));
         cur_favorites = temp_fav;
-        console.log(cur_favorites);
         loading = false;
     }
     function save_favorites() {
@@ -148,8 +146,15 @@
         let meta = stored_meta[school_num];
         let return_lst = [];
         if (plan_type === "teachers") {
-            for (const teacher of Object.keys(meta.teachers)) {
-                return_lst.push({"id": teacher, "display_name": teacher})
+            for(let teacher of Object.values(meta.teachers)) {
+                let long_name = teacher.full_surname || teacher.plan_long;
+                let display_name = teacher.plan_short;
+
+                if (long_name != null) {
+                    display_name += ` (${long_name})`;
+                }
+
+                return_lst.push({"id": teacher.plan_short, "display_name": display_name})
             }
             return return_lst
         } else if (plan_type === "rooms") {
@@ -235,15 +240,37 @@
         }
     }
 
+    function swapFavorites(fav1, fav2) {
+        [cur_favorites[fav1], cur_favorites[fav2]] = [cur_favorites[fav2], cur_favorites[fav1]];
+    }
+
     let authorized_schools = [];
     $: authorized_school_ids, all_schools, update_authorized_schools();
 </script>
 
 <h1 class="responsive-heading">Favoriten</h1>
 <CollapsibleWrapper class="extra-accordion-padding" let:closeOtherPanels>
     {#each cur_favorites as _, favorite}
-        <Collapsible on:panel-open={closeOtherPanels} let:toggle>
-            <button slot="handle" on:click={toggle} class="toggle-button" class:first={favorite == 0} class:load_first_favorite={$settings.load_first_favorite}>{cur_favorites[favorite].name ? cur_favorites[favorite].name : "Unbenannter Favorit"}</button>
+        <Collapsible on:panel-open={closeOtherPanels}>
+            <div slot="handle" let:toggle style="position: relative;">
+                <button on:click={toggle} class="toggle-button" class:first={favorite == 0} class:load_first_favorite={$settings.load_first_favorite}>{cur_favorites[favorite].name ? cur_favorites[favorite].name : "Unbenannter Favorit"}</button>
+                <div style="position: absolute; right: 0; top: 0; bottom: 0; display: flex; flex-direction: column; gap: 0.1rem; justify-content: stretch; align-items: stretch; width: 2rem; background: rgba(255, 255, 255, 0.2)">
+                    {#if favorite !== 0}
+                        <button on:click={() => {swapFavorites(favorite, favorite-1)}} style="background: transparent; color: var(--text-color); flex: 1; border: none; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center;">
+                            <span class="material-symbols-outlined" style="font-size: 1em;">arrow_upward</span>
+                        </button>
+                    {:else}
+                        <div style="flex: 1"></div>
+                    {/if}
+                    {#if favorite !== cur_favorites.length-1}
+                        <button on:click={() => {swapFavorites(favorite, favorite+1)}} style="background: transparent; color: var(--text-color); flex: 1; border: none; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center;">
+                            <span class="material-symbols-outlined" style="font-size: 1em;">arrow_downward</span>
+                        </button>
+                    {:else}
+                        <div style="flex: 1"></div>
+                    {/if}
+                </div>
+            </div>
             <div class="wrapper-content">
                 <label for="favorite_name">Name des Favoriten</label>
                 <input name="favorite_name" type="text" maxlength="40" class="textfield" bind:value={cur_favorites[favorite].name}>

diff --git a/client/src/components/Impressum.svelte b/client/src/components/Impressum.svelte
@@ -1,9 +1,10 @@
 <script>
     import { onMount } from "svelte";
     import { title } from "../stores";
+    import { update_hash } from "../utils.js";
 
     onMount(() => {
-        location.hash = "#impressum";
+        update_hash("impressum");
         title.set("Impressum");
         // console.log("Mounted Impressum.svelte");
     });

diff --git a/client/src/components/LandingPage.svelte b/client/src/components/LandingPage.svelte
@@ -3,10 +3,10 @@
     import { onMount } from "svelte";
     import { title, register_button_visible } from "../stores";
     import Button from "../base_components/Button.svelte";
-    import {navigate_page} from "../utils.js";
+    import {navigate_page, update_hash} from "../utils.js";
 
     onMount(() => {
-        location.hash = "";
+        update_hash("");
         title.set("Startseite");
         // console.log("Mounted AboutUs.svelte");
     });
@@ -129,7 +129,7 @@
             </div>
         </div>
         <div class="presentation">
-            <h2 class="responsive-heading" style="color: rgb(120, 120, 120)">Klassenplan<br>Wahrer Lehrerplan<br>Raumplan</h2>
+            <h2 class="responsive-heading" style="color: rgb(120, 120, 120)">Klassenplan<br>Wahrer Lehrerplan<br>Raumplan<br>Planvorhersage</h2>
             <div style="box-shadow: 5px 5px 15px rgb(10, 10, 10); border-radius: 1rem;">
                 <div class="compare-slider">
                     <div class="bg"></div>