Skip to content

Commit

Permalink
Merge pull request #229 from ArtrenH/main
Browse files Browse the repository at this point in the history 
Designed Adding School + Favourites
  • Loading branch information
@OfficialFreak
OfficialFreak authored Nov 4, 2023
2 parents 8cf6d60 + af6cfce commit da6c16b
Show file tree
Hide file tree
Showing 5 changed files with 147 additions and 76 deletions.
25 changes: 16 additions & 9 deletions client/src/App.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
let all_revisions;
let plan_type;
let plan_value;
let teacher_list;
let teacher_dict;
let all_rooms;
let grouped_forms;
let api_base;
Expand Down Expand Up @@ -62,7 +62,7 @@
all_revisions = [".newest"];
plan_type = null;
plan_value = null;
teacher_list = [];
teacher_dict = {};
all_rooms = null;
grouped_forms = [];
api_base = null;
Expand Down Expand Up @@ -91,7 +91,7 @@
}
meta = data[0];
all_rooms = meta.rooms;
teacher_list = Object.keys(meta.teachers);
teacher_dict = meta.teachers;
grouped_forms = meta.forms.grouped_forms;
enabled_dates = Object.keys(meta.dates);
if(!date) {
Expand Down Expand Up @@ -202,10 +202,17 @@
}
}
function gen_teacher_arr(teacher_list) {
function gen_teacher_arr(teacher_dict) {
teacher_arr = [];
for(let teacher of teacher_list) {
teacher_arr.push({"id": teacher, "display_name": teacher});
for(let teacher of Object.values(teacher_dict)) {
let long_name = teacher.full_surname || teacher.plan_long;
let display_name = teacher.plan_short;
if (long_name != null) {
display_name += ` (${long_name})`;
}
teacher_arr.push({"id": teacher.plan_short, "display_name": display_name});
}
}
Expand Down Expand Up @@ -319,7 +326,7 @@
$: selected_form && set_plan("forms", selected_form);
$: gen_form_arr(grouped_forms);
$: selected_teacher && set_plan("teachers", selected_teacher);
$: gen_teacher_arr(teacher_list);
$: gen_teacher_arr(teacher_dict);
$: selected_room && set_plan("rooms", selected_room);
$: gen_room_arr(grouped_rooms);
$: gen_revision_arr(all_revisions);
Expand Down Expand Up @@ -378,10 +385,10 @@
{:else if $logged_in}
{#if $current_page.substring(0, 4) === "plan" || $current_page === "weekplan"}
<h1 class="responsive-heading">{emoji} {greeting}</h1>
{#if $selected_favourite !== -1 && $favourites[$selected_favourite]}
<!-- {#if $selected_favourite !== -1 && $favourites[$selected_favourite]}
Gewählter Favorit: {$favourites[$selected_favourite].name}
<br>
{/if}
{/if} -->
<div class="controls-wrapper">
<!-- Datepicker -->
<div class="control" id="c1">
Expand Down
1 change: 1 addition & 0 deletions client/src/components/Contact.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,5 +92,6 @@
background-color: rgba(255, 255, 255, 0.1);
color: var(--text-color);
border-radius: 5px;
font-size: var(--font-size-sm);
}
</style>
125 changes: 79 additions & 46 deletions client/src/components/Favourites.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
import { onMount } from "svelte";
let cur_favourites = [];
let loading = true;
let all_schools = {};
let authorized_school_ids = [];
let school_nums = [];
Expand Down Expand Up @@ -72,12 +73,14 @@
- duplicated courses are unified: for each course c1 that already exists as course c0, the pair c1: c0 is put into an object -> later, the check-value of c1 is set to that of c0
*/
function load_favourites() {
loading = true;
// change preferences to dict
let temp_fav = $favourites;
console.log(temp_fav);
temp_fav = temp_fav.map(item => ({ ...item, preferences: (item.preferences || []).reduce((obj, preference) => ({ ...obj, [preference]: false }), {}) }));
cur_favourites = temp_fav;
console.log(cur_favourites);
loading = false;
}
function save_favourites() {
let new_favourites = [];
Expand Down Expand Up @@ -236,14 +239,14 @@
$: authorized_school_ids, all_schools, update_authorized_schools();
</script>
<h1 class="responsive-heading">Favoriten</h1>
<CollapsibleWrapper class="extra-accordion-padding" let:closeOtherPanels>
{#each cur_favourites as _, favourite}
<Collapsible on:panel-open={closeOtherPanels} let:toggle>
<button slot="handle" on:click={toggle} class="toggle-button" class:first={favourite == 0}>{cur_favourites[favourite].name ? cur_favourites[favourite].name : "Unbenannter Favorit"}</button>
<div class="wrapper-content">
<label for="favourite_name">Name des Favoriten</label>
<input name="favourite_name" type="text" maxlength="40" class="textfield" bind:value={cur_favourites[favourite].name}>
<!-- TODO: GET AUTHORIZED SCHOOLS -->
<Select data={authorized_schools} bind:selected_id={cur_favourites[favourite].school_num} onchange={() => clear_favourite(favourite)}>Schule auswählen</Select>
<Select data={plan_types} bind:selected_id={cur_favourites[favourite].plan_type} onchange={() => {cur_favourites[favourite].plan_value = ""; cur_favourites[favourite].preferences = {}}}>Planart auswählen</Select>
Expand All @@ -255,51 +258,40 @@
{#each Object.entries(
get_subjects(favourite, all_meta)
).sort(([subj1, _], [subj2, __]) => subj1.localeCompare(subj2)).sort(([_, courses1], [__, courses2]) => courses2.length - courses1.length) as [subject, courses]}
{#if courses.length === 1}
<li>{subject}:<input
type="checkbox"
bind:checked={cur_favourites[favourite].preferences[courses[0].class_number]}
/>
{courses[0].class_number}
{courses[0].teacher} |
{courses[0].subject}
{#if courses[0].group != null}
({courses[0].group})
{/if}
</li>
{:else}
<li>
{subject}
{#if courses.length > 2}
<Button class="inline-flex" on:click={() => {
for (const course of courses) {
cur_favourites[favourite].preferences[course.class_number] = true;
}
}}>Alle Auswählen</Button>
<Button class="inline-flex" on:click={() => {
for (const course of courses) {
cur_favourites[favourite].preferences[course.class_number] = false;
}
}}>Keinen Auswählen</Button>
{/if}
</li>
<ul>
{#each courses as course}
<li>
<input
type="checkbox"
bind:checked={cur_favourites[favourite].preferences[course.class_number]}
/>
{course.class_number}
{course.teacher} |
{course.subject}
{#if course.group != null}
({course.group})
{/if}
</li>
{/each}
</ul>
{/if}
<div class="horizontal-align margin-bottom">
<h1 class="responsive-heading subject-heading">{subject}</h1>
{#if courses.length > 2}
<Button on:click={() => {
for (const course of courses) {
cur_favourites[favourite].preferences[course.class_number] = true;
}
}}
small={true}>Alle Auswählen</Button>
<Button on:click={() => {
for (const course of courses) {
cur_favourites[favourite].preferences[course.class_number] = false;
}
}}
small={true}>Keinen Auswählen</Button>
{/if}
</div>
<ul class="course-list">
{#each courses as course}
<li>
<input
type="checkbox"
bind:checked={cur_favourites[favourite].preferences[course.class_number]}
/>
<!-- {courses[0].class_number} -->
{#if course.group != null}
{course.group}
{:else}
{courses[0].subject}
{/if}
| {courses[0].teacher}
</li>
{/each}
</ul>
{:else}
Wähle eine Klasse um die Kurse für sie zu wählen
{/each}
Expand All @@ -311,6 +303,12 @@
<Button on:click={() => {delete_favourite(favourite);}} background="var(--cancelled-color)">Favorit löschen</Button>
</div>
</Collapsible>
{:else}
{#if loading}
<Collapsible>
<button slot="handle" class="toggle-button first"><span class="material-symbols-outlined rotating">sync</span></button>
</Collapsible>
{/if}
{/each}
<Collapsible on:panel-open={closeOtherPanels}>
<button slot="handle" on:click={add_favourite} class="toggle-button last" style="font-weight: 600;"><span class="material-symbols-outlined">add</span> Favorit hinzufügen</button>
Expand Down Expand Up @@ -381,5 +379,40 @@
border-radius: 5px;
padding: 10px;
border: 2px solid rgba(255, 255, 255, 0.1);
font-size: var(--font-size-base);
}
.rotating {
animation: rotating .75s linear infinite;
transform-origin: 50% 48%;
}
@keyframes rotating {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.horizontal-align {
display: flex;
flex-direction: row;
gap: 10px;
align-items: center;
justify-content: flex-start;
}
.margin-bottom {
margin-bottom: 5px;
}
.subject-heading {
margin-bottom: 0px !important;
}
.course-list {
margin-bottom: 15px;
}
</style>
31 changes: 17 additions & 14 deletions client/src/components/Navbar.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,15 @@
notifications.danger(error.message);
});
}
let favourite_icon_map = {
"forms": "school",
"teachers": "elderly",
"rooms": "sensor_door",
"room_overview": "nest_multi_room"
}
$: console.log($favourites);
</script>

<nav transition:fly={{y:-64}}>
Expand All @@ -26,24 +35,14 @@
<li>
<Dropdown let:toggle>
<button slot="toggle_button" on:click={toggle} class="nav-button">
{#if $selected_favourite !== -1}
<!-- TODO: make different if some favourite selected -->
<span class="material-symbols-outlined">star</span>
{:else}
<span class="material-symbols-outlined">star</span>
{/if}
<span class="material-symbols-outlined" class:favourite-selected={$selected_favourite !== -1}>star</span>
</button>
{#each $favourites as favourite, index}
<button class="nav-button" on:click={() => {selected_favourite.set(index); navigate_page("plan")}}>
{#if $selected_favourite === index}
<!-- TODO: make different if selected -->
<span class="material-symbols-outlined">star</span>
{:else}
<span class="material-symbols-outlined">star</span>
{/if}
<span class="material-symbols-outlined" class:favourite-selected={$selected_favourite === index}>{favourite_icon_map[favourite.plan_type]}</span>
{favourite.name}</button>
{/each}
<button class="nav-button" on:click={() => navigate_page("favorites")}><span class="material-symbols-outlined">account_circle</span> Favoriten wählen</button>
<button class="nav-button" on:click={() => navigate_page("favorites")}><span class="material-symbols-outlined">settings</span> Favoriten verwalten</button>
</Dropdown>
</li>
<li>
Expand All @@ -53,7 +52,6 @@
</button>

<button class="nav-button" on:click={() => $active_modal = "settings"}><span class="material-symbols-outlined">settings</span> Einstellungen</button>
<button class="nav-button" on:click={() => navigate_page("favorites")}><span class="material-symbols-outlined">account_circle</span> Favoriten wählen</button>
<button class="nav-button" on:click={() => navigate_page("school_manager")}><span class="material-symbols-outlined">school</span> Schule wechseln</button>
<button class="nav-button" on:click={() => navigate_page("contact")}><span class="material-symbols-outlined">contact_page</span> Kontaktiere uns</button>
<button class="nav-button" on:click={() => $active_modal = "changelog"}><span class="material-symbols-outlined" class:new_notification={$new_changelogs_available}>assignment</span> Changelog {#if $new_changelogs_available}✨{/if}</button>
Expand Down Expand Up @@ -160,4 +158,9 @@
border-radius: 999vw;
}
}
.favourite-selected {
background: rgba(255, 255, 255, 0.2);
outline: 4px solid rgba(255, 255, 255, 0.2);
border-radius: 999vw;
}
</style>
Loading

0 comments on commit da6c16b

Please sign in to comment.