root/rasp_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui update, added vertical view

Browse Source
This commit is contained in:
relaxed 2024-09-01 23:46:03 +05:00
parent 33a011d723
commit 154d0c81bf
7 changed files with 241 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
makefile
View File

@ -6,14 +6,10 @@ all: container
# for dev
dev_image:
# cd ./docker_dev
sudo docker build --no-cache -t rasp_web/dev_mode ./docker_dev
# cd ..
dev_amd_image:
# cd ./docker_dev
sudo docker build --platform linux/amd64 --no-cache -t rasp_web/dev_mode ./docker_dev
# cd ..
dev_container:
sudo docker run -d -p 80:80 --name rasp_web_dev_mode rasp_web/dev_mode

119
src/App.svelte
View File

@ -1,7 +1,8 @@
<script>
import ThemeSwitch from "./lib/ThemeSwitch.svelte";
import Dialog from "./lib/Dialog.svelte";
import Pair from "./lib/Pair.svelte";
import Horizontal from "./lib/Horizontal.svelte";
import Vertical from "./lib/Vertical.svelte";
import Spinner from "./lib/Spinner.svelte";
import Cache from "./lib/Cache.svelte";
@ -41,7 +42,9 @@
function save_to_ls() {
data = data;
ui_sytle = ui_sytle;
localStorage.setItem("data", JSON.stringify(data));
localStorage.setItem("ui_sytle", ui_sytle);
get_rasp();
}
@ -161,6 +164,9 @@
let is_settings_open = false;
/** @type {'horizontal' | 'vertical'} */
let ui_sytle = "vertical";
/** @type {"group-list" | "teacher-list" | "aud-list"} */
let search_type = "group-list";
@ -188,10 +194,22 @@
$: input_date = `${start_date.getDate()}.${start_date.getMonth() + 1}.${start_date.getFullYear()} - ${end_date.getDate()}.${end_date.getMonth() + 1}.${end_date.getFullYear()}`;
onMount(() => {
if (localStorage.getItem("data") === null) {
} else {
if (localStorage.getItem("data") !== null) {
data = JSON.parse(localStorage.getItem("data"));
}
if (localStorage.getItem("ui_sytle") === null) {
ui_sytle = "vertical";
} else {
const style = localStorage.getItem("ui_sytle");
if (style === "horizontal") {
ui_sytle = "horizontal";
} else if (style === "vertical") {
ui_sytle = "vertical";
} else {
ui_sytle = "vertical";
}
}
get_rasp();
});
@ -325,8 +343,29 @@
{/if}
</div>
<h1 class="mx-2 mt-10">Вид</h1>
<select
class="min-h-[60px] p-2 m-2 w-atuo
bg-[var(--w-bg)] dark:bg-[var(--b-bg)]
border-[1px] border-[var(--w-border)] dark:border-[var(--b-border)]"
on:change={(event) => {
ui_sytle = event.target.value;
save_to_ls();
}}
>
{#each [{ type: "vertical", name: "Вертикальный" }, { type: "horizontal", name: "Горизонтальный" }] as ui_sytle_name}
{#if ui_sytle_name.type === ui_sytle}
<option selected value={ui_sytle_name.type}>
{ui_sytle_name.name}
</option>
{:else}
<option value={ui_sytle_name.type}>{ui_sytle_name.name}</option>
{/if}
{/each}
</select>
<button
class="w-auto p-2 m-2
class="w-auto p-2 m-2 mt-10
bg-[var(--w-red)] dark:bg-[var(--b-red)]
border-[1px] border-[var(--w-border)] dark:border-[var(--b-border)]"
on:click={() => {
@ -357,7 +396,7 @@
Удалить все данные
</button>
<div class="">
<div class="mt-10">
<pre
class="w-min m-2 break-words flex justify-center items-center"><Spinner
></Spinner> - Загрузка</pre>
@ -388,7 +427,7 @@
</div>
<div
class="min-h-[100px] m-2 w-auto bg-gray-700 flex justify-center items-center"
class="min-h-[100px] m-2 mt-10 w-auto bg-gray-700 flex justify-center items-center"
>
<a href="https://ogkod.ru" class="underline text-white">
Made by OGkod
@ -398,7 +437,8 @@
<div class="w-full flex justify-center items-center">
<div
class="w-[2120px] h-svh
class="h-svh
{ui_sytle === 'vertical' ? 'w-[1024px]' : 'w-[2120px]'}
text-[var(--w-text)] dark:text-[var(--b-text)] transition-all
flex relative"
>
@ -473,7 +513,13 @@
</select>
</div>
<div class="flex overflow-x-auto overflow-y-hidden text-[16px]">
<div
class="flex
{ui_sytle === 'vertical'
? 'flex-col space-y-2 justify-center'
: 'overflow-x-auto overflow-y-hidden'}
text-[16px]"
>
{#if rasp_data.length === 0 && data.saved.length === 0}
<div class="overflow-y-auto">
<p
@ -493,49 +539,20 @@
alt="turoiral gif"
/>
</div>
{:else}
{#each rasp_data as day, i}
<div id={`${i}`} class="p-2 min-w-[300px]">
<div
class="flex p-2 mb-2
border-[1px] border-[var(--w-border)] dark:border-[var(--b-border)]
text-[var(--w-text)] dark:text-[var(--b-text)]
{day.isCurrentDate === 1 ? 'bg-[var(--w-red)] dark:bg-[var(--b-red)]' : ''}"
>
<h1>
<pre>{day.date} - {day.weekDay}</pre>
</h1>
</div>
<div class="relative z-0 h-[calc(100svh-192px)]">
<div
class="h-full w-full z-0 absolute overflow-y-auto overflow-x-hidden
flex flex-col justify-start items-center
"
>
{#if day.pairs.every((p) => p.schedulePairs.length === 0)}
<div
class="w-full p-2
border-[1px] rounded-[8px] border-[var(--w-border)] dark:border-[var(--b-border)]
"
>
{#if !is_rasp_data_loading && !is_rasp_cache_loaded && !is_rasp_data_loaded}
Ошибка получения данных
попробуйте позже
{:else if is_rasp_data_loading}
Загрузка ....
{:else if is_rasp_data_loaded || is_rasp_cache_loaded}
have a good day
{/if}
</div>
{:else}
{#each day.pairs as pairs}
<Pair {pairs}></Pair>
{/each}
{/if}
</div>
</div>
</div>
{/each}
{:else if ui_sytle === "horizontal"}
<Horizontal
bind:rasp_data
bind:is_rasp_data_loading
bind:is_rasp_data_loaded
bind:is_rasp_cache_loaded
></Horizontal>
{:else if ui_sytle === "vertical"}
<Vertical
bind:rasp_data
bind:is_rasp_data_loading
bind:is_rasp_data_loaded
bind:is_rasp_cache_loaded
></Vertical>
{/if}
</div>
</div>

10
src/global.css
View File

@ -10,12 +10,6 @@
* {
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
outline: none !important;
font-family: JetBrainsMono;
@ -50,3 +44,7 @@
border: 0px solid transparent;
position: absolute;
}
html {
scroll-behavior: smooth !important;
}

2
src/lib/Dialog.svelte
View File

@ -7,7 +7,7 @@
</script>
<div
class="absolute top-0 w-full h-screen z-10 py-4
class="fixed top-0 w-full h-screen z-10 py-4
max-w-full max-h-full
flex justify-center items-center
backdrop-blur-sm

49
src/lib/Horizontal.svelte Normal file
View File

@ -0,0 +1,49 @@
<script>
import Pair from "./Pair.svelte";
export let rasp_data = [];
export let is_rasp_data_loading = false;
export let is_rasp_cache_loaded = false;
export let is_rasp_data_loaded = false;
</script>
{#each rasp_data as day, i}
<div id={`${i}`} class="p-2 min-w-[300px]">
<div
class="flex p-2 mb-2
border-[1px] border-[var(--w-border)] dark:border-[var(--b-border)]
text-[var(--w-text)] dark:text-[var(--b-text)]
{day.isCurrentDate === 1 ? 'bg-[var(--w-red)] dark:bg-[var(--b-red)]' : ''}"
>
<h1>
<pre>{day.date} - {day.weekDay}</pre>
</h1>
</div>
<div class="relative z-0 h-[calc(100svh-192px)]">
<div
class="h-full w-full z-0 absolute overflow-y-auto overflow-x-hidden
flex flex-col justify-start items-center
"
>
{#if day.pairs.every((p) => p.schedulePairs.length === 0)}
<div
class="w-full p-2
border-[1px] rounded-[8px] border-[var(--w-border)] dark:border-[var(--b-border)]
"
>
{#if !is_rasp_data_loading && !is_rasp_cache_loaded && !is_rasp_data_loaded}
Ошибка получения данных попробуйте позже
{:else if is_rasp_data_loading}
Загрузка ....
{:else if is_rasp_data_loaded || is_rasp_cache_loaded}
have a good day
{/if}
</div>
{:else}
{#each day.pairs as pairs}
<Pair {pairs}></Pair>
{/each}
{/if}
</div>
</div>
</div>
{/each}

98
src/lib/Pair.svelte
View File

@ -1,5 +1,44 @@
<script>
export let pairs;
/** @typedef Normalized
* @property {string} name
* @property {string} aud
* @property {Array<string>} groups
* @property {Array<string>} teachers
*/
/**
* @param {Object} pairs_list
* @returns {Array<Normalized>}
*/
function normalize_many_pairs(pairs_list) {
/** @type {Object<string, Normalized>} */
let normalized = {};
pairs_list.schedulePairs.forEach((pair) => {
const name = `${pair.subject} ${pair.aud}`;
if (name in normalized) {
if (!normalized[name].teachers.includes(pair.teacher)) {
normalized[name].teachers.push(pair.teacher);
}
if (!normalized[name].groups.includes(pair.group)) {
normalized[name].groups.push(pair.group);
}
} else {
normalized[name] = {
name: pair.subject,
aud: pair.aud,
groups: [pair.group],
teachers: [pair.teacher],
};
}
});
/** @type {Array<Normalized>} */
const normalized_array = Object.entries(normalized).map((el) => el[1]);
return normalized_array;
}
</script>
{#if pairs.schedulePairs.length === 1}
@ -21,55 +60,64 @@
{pairs.schedulePairs[0].subject}
</h1>
<h1>
aud: {pairs.schedulePairs[0].aud}
{pairs.schedulePairs[0].aud}
<a
target="_blank"
href="https://www.usue.ru/raspisanie/getteams/?prepod={pairs
.schedulePairs[0].teacher}"
class="underline"
>
{pairs.schedulePairs[0].teacher}
</a>
</h1>
<a
target="_blank"
href="https://www.usue.ru/raspisanie/getteams/?prepod={pairs
.schedulePairs[0].teacher}"
class="underline"
>
{pairs.schedulePairs[0].teacher}
</a>
<h1>
{pairs.schedulePairs[0].group}
</h1>
</div>
</div>
{:else if pairs.schedulePairs.length > 1}
{@const end_index = pairs.schedulePairs.length - 1}
{@const normalized = normalize_many_pairs(pairs)}
{@const end_index = normalized.length - 1}
<div
class="w-full m-2
border-[1px] rounded-xl border-[var(--w-border)] dark:border-[var(--b-border)]
{pairs.isCurrentPair ? 'bg-[var(--w-blue)] dark:bg-[var(--b-blue)]' : ''}
"
{pairs.isCurrentPair ? 'bg-[var(--w-blue)] dark:bg-[var(--b-blue)]' : ''}"
>
<div class="border-b-2 border-[var(--border)]">
<h1 class="m-2 mb-1">
{pairs.N}) {pairs.time.replace("-", " - ")}
</h1>
</div>
{#each pairs.schedulePairs as pair, i}
{#each normalized as pair, i}
<div
class="p-2
{i === end_index ? '' : 'border-b-[1px] border-[var(--border)]'}"
>
<h1>
{pair.subject}
{pair.name}
</h1>
<h1>
aud: {pair.aud}
</h1>
<a
target="_blank"
href="https://www.usue.ru/raspisanie/getteams/?prepod={pair.teacher}"
class="underline"
>
{pair.teacher}
</a>
<h1>
{pair.group}
Ауд: {pair.aud}
</h1>
<div class="flex flex-col">
{#each pair.teachers as teacher}
<a
target="_blank"
href="https://www.usue.ru/raspisanie/getteams/?prepod={teacher}"
class="underline w-fit"
>
{teacher}
</a>
{/each}
</div>
<div class="flex flex-col">
{#each pair.groups as group}
<h1>
{group}
</h1>
{/each}
</div>
</div>
{/each}
</div>

46
src/lib/Vertical.svelte Normal file
View File

@ -0,0 +1,46 @@
<script>
import Pair from "./Pair.svelte";
export let rasp_data = [];
export let is_rasp_data_loading = false;
export let is_rasp_cache_loaded = false;
export let is_rasp_data_loaded = false;
</script>
{#each rasp_data as day, i}
<div id={`${i}`} class="p-2 min-w-[300px] max-w-[1000px]">
<div
class="flex p-2 mb-2 w-fit
border-[1px] border-[var(--w-border)] dark:border-[var(--b-border)]
text-[var(--w-text)] dark:text-[var(--b-text)]
{day.isCurrentDate === 1 ? 'bg-[var(--w-red)] dark:bg-[var(--b-red)]' : ''}"
>
<h1>
<pre>{day.date} - {day.weekDay}</pre>
</h1>
</div>
<div class="z-0 min-h-[24px] max-h-none h-auto">
<div
class="h-auto w-full z-0 flex flex-col justify-start items-center"
>
{#if day.pairs.every((p) => p.schedulePairs.length === 0)}
<div
class="w-full p-2
border-[1px] rounded-[8px] border-[var(--w-border)] dark:border-[var(--b-border)]"
>
{#if !is_rasp_data_loading && !is_rasp_cache_loaded && !is_rasp_data_loaded}
Ошибка получения данных попробуйте позже
{:else if is_rasp_data_loading}
Загрузка ....
{:else if is_rasp_data_loaded || is_rasp_cache_loaded}
have a good day
{/if}
</div>
{:else}
{#each day.pairs as pairs}
<Pair {pairs}></Pair>
{/each}
{/if}
</div>
</div>
</div>
{/each}