590 lines
15 KiB
Svelte
590 lines
15 KiB
Svelte
<script>
|
||
import ThemeSwitch from "./lib/ThemeSwitch.svelte";
|
||
import Dialog from "./lib/Dialog.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";
|
||
import Checked from "./lib/Checked.svelte";
|
||
import X from "./lib/X.svelte";
|
||
|
||
import { onMount } from "svelte";
|
||
|
||
const host = "https://rasp.ogkod.ru";
|
||
|
||
let start_date = new Date();
|
||
const day = start_date.getDay();
|
||
const diff = (day === 0 ? -6 : 1) - day;
|
||
start_date.setDate(start_date.getDate() + diff);
|
||
start_date.setHours(0, 0, 0, 0);
|
||
start_date = start_date;
|
||
|
||
let end_date = new Date();
|
||
end_date.setDate(start_date.getDate() + 6);
|
||
end_date.setHours(23, 59, 59, 999);
|
||
|
||
/** @typedef GroupInfo
|
||
* @property {string} name
|
||
* @property {'group' | 'teacher' | 'aud'} type
|
||
*/
|
||
|
||
/**
|
||
* @property {number} selected
|
||
* @property {Object} saved
|
||
*/
|
||
let data = {
|
||
/** @type {number} */
|
||
selected: 0,
|
||
/** @type {Array<GroupInfo>} */
|
||
saved: [],
|
||
};
|
||
|
||
function save_to_ls() {
|
||
data = data;
|
||
ui_sytle = ui_sytle;
|
||
localStorage.setItem("data", JSON.stringify(data));
|
||
localStorage.setItem("ui_sytle", ui_sytle);
|
||
get_rasp();
|
||
}
|
||
|
||
function empty_rasp() {
|
||
const empty_rasp = [];
|
||
for (let i = 0; i < 7; i++) {
|
||
empty_rasp.push({
|
||
date: "dd.mm.yyyy",
|
||
weekDay: "dayofweek",
|
||
isCurrentDate: 1,
|
||
pairs: [
|
||
{
|
||
N: 0,
|
||
time: "infinity",
|
||
isCurrentPair: 0,
|
||
schedulePairs: [],
|
||
},
|
||
],
|
||
});
|
||
}
|
||
return empty_rasp;
|
||
}
|
||
|
||
function scroll_to_today() {
|
||
if (rasp_data.some((day) => day.isCurrentDate === 1)) {
|
||
setTimeout(() => {
|
||
const today = new Date();
|
||
const today_index = `${(today.getDay() + 6) % 7}`;
|
||
document.getElementById(today_index).scrollIntoView();
|
||
}, 0);
|
||
}
|
||
}
|
||
|
||
function get_rasp() {
|
||
const s_date = start_date.getDate();
|
||
const s_month = start_date.getMonth() + 1;
|
||
const startDate = `${s_date < 10 ? 0 : ""}${s_date}.${s_month < 10 ? 0 : ""}${s_month}.${start_date.getFullYear()}`;
|
||
end_date = new Date(start_date);
|
||
end_date.setDate(start_date.getDate() + 6);
|
||
end_date.setHours(23, 59, 59, 999);
|
||
|
||
const e_date = end_date.getDate();
|
||
const e_month = end_date.getMonth() + 1;
|
||
const endDate = `${e_date < 10 ? 0 : ""}${e_date}.${e_month < 10 ? 0 : ""}${e_month}.${end_date.getFullYear()}`;
|
||
|
||
const date_full = `${startDate}-${endDate}`;
|
||
|
||
is_rasp_data_loading = true;
|
||
is_rasp_cache_loaded = false;
|
||
is_rasp_data_loaded = false;
|
||
|
||
let cache_data = {};
|
||
|
||
if (data.saved.length > 0) {
|
||
if (
|
||
localStorage.getItem(`${data.saved[data.selected].name}`) !==
|
||
null
|
||
) {
|
||
cache_data = JSON.parse(
|
||
localStorage.getItem(`${data.saved[data.selected].name}`),
|
||
);
|
||
|
||
if (date_full in cache_data) {
|
||
rasp_data = cache_data[date_full];
|
||
is_rasp_cache_loaded = true;
|
||
}
|
||
}
|
||
}
|
||
|
||
if (data.saved.length !== 0) {
|
||
fetch(
|
||
`${host}/schedule/?t=0.2&action=show&startDate=${startDate}&endDate=${endDate}&${data.saved[data.selected].type}=${data.saved[data.selected].name}`,
|
||
)
|
||
.then((response) => response.json())
|
||
.then((json) => {
|
||
if (json.length !== 0) {
|
||
cache_data[date_full] = json;
|
||
localStorage.setItem(
|
||
`${data.saved[data.selected].name}`,
|
||
JSON.stringify(cache_data),
|
||
);
|
||
rasp_data = json;
|
||
is_rasp_data_loaded = true;
|
||
is_rasp_cache_loaded = false;
|
||
} else {
|
||
is_rasp_data_loaded = false;
|
||
if (!is_rasp_cache_loaded) {
|
||
rasp_data = empty_rasp();
|
||
}
|
||
}
|
||
scroll_to_today();
|
||
is_rasp_data_loading = false;
|
||
})
|
||
.catch(() => {
|
||
is_rasp_data_loaded = false;
|
||
if (!is_rasp_cache_loaded) {
|
||
rasp_data = empty_rasp();
|
||
}
|
||
scroll_to_today();
|
||
is_rasp_data_loading = false;
|
||
});
|
||
|
||
// setTimeout(() => {
|
||
// is_rasp_data_loaded = true;
|
||
// is_rasp_data_loading = false;
|
||
// rasp_data = example;
|
||
// scroll_to_today();
|
||
// }, 1000);
|
||
} else {
|
||
is_rasp_data_loading = false;
|
||
}
|
||
}
|
||
|
||
let is_rasp_data_loading = false;
|
||
let is_rasp_data_loaded = false;
|
||
let is_rasp_cache_loaded = false;
|
||
|
||
let is_settings_open = false;
|
||
|
||
/** @type {'horizontal' | 'vertical'} */
|
||
let ui_sytle = "vertical";
|
||
|
||
/** @type {"group-list" | "teacher-list" | "aud-list"} */
|
||
let search_type = "group-list";
|
||
|
||
let search_value = "";
|
||
|
||
let rasp_data = [];
|
||
|
||
let search_data = [];
|
||
|
||
function search_group() {
|
||
if (search_value != "") {
|
||
fetch(
|
||
`${host}/schedule/?action=${search_type}&term=${search_value}`,
|
||
)
|
||
.then((response) => response.json())
|
||
.then((json) => {
|
||
search_data = json;
|
||
})
|
||
.catch(() => {
|
||
search_data = ["not found"];
|
||
});
|
||
}
|
||
}
|
||
|
||
$: 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) {
|
||
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();
|
||
});
|
||
|
||
let is_confirm_open = false;
|
||
let confirm_question = "__default__";
|
||
let on_confirm = () => {};
|
||
</script>
|
||
|
||
<Dialog name={"Rasp"} bind:is_open={is_settings_open}>
|
||
<h1 class="mx-2">Сохраненные</h1>
|
||
|
||
<div
|
||
class="min-h-[270px] m-2
|
||
overflow-y-auto
|
||
border-[1px] border-[var(--w-border)] dark:border-[var(--b-border)]"
|
||
>
|
||
{#each data.saved as info, i}
|
||
<div
|
||
class="p-2
|
||
flex justify-between items-center
|
||
{i === data.saved.length - 1 ? '' : 'border-b-2'}
|
||
border-[var(--w-border)] dark:border-[var(--b-border)]"
|
||
>
|
||
<p>{info.name}</p>
|
||
<button
|
||
on:click={() => {
|
||
data.saved.splice(i, 1);
|
||
data.selected = 0;
|
||
save_to_ls();
|
||
}}
|
||
>
|
||
<img
|
||
src="/x.svg"
|
||
class="min-w-[40px] min-h-[40px] size-[40px] transition-all
|
||
border-2 border-[var(--w-red)] dark:border-[var(--b-red)]"
|
||
alt="data not loaded"
|
||
/>
|
||
</button>
|
||
</div>
|
||
{/each}
|
||
</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) => {
|
||
search_type = event.target.value;
|
||
search_value = "";
|
||
search_data = [];
|
||
}}
|
||
>
|
||
<option selected value="group-list">Группа</option>
|
||
<option value="teacher-list">Преподаватель</option>
|
||
<option value="aud-list">Аудитория</option>
|
||
</select>
|
||
|
||
<input
|
||
type="text"
|
||
placeholder="{{
|
||
'group-list': 'Группа',
|
||
'teacher-list': 'Преподователь',
|
||
'aud-list': 'Аудитория',
|
||
}[search_type]} "
|
||
class="p-2 m-2
|
||
bg-[var(--w-bg)] dark:bg-[var(--b-bg)]
|
||
border-[1px] border-[var(--w-border)] dark:border-[var(--b-border)]"
|
||
bind:value={search_value}
|
||
on:input={() => {
|
||
const saved = search_value;
|
||
setTimeout(() => {
|
||
if (saved === search_value) {
|
||
search_group();
|
||
}
|
||
}, 1000);
|
||
}}
|
||
/>
|
||
|
||
<div
|
||
class="min-h-[270px] m-2
|
||
overflow-y-auto
|
||
border-[1px] border-[var(--w-border)] dark:border-[var(--b-border)]"
|
||
>
|
||
{#if search_data[0] === "not found"}
|
||
<p class="p-2">Не найдено</p>
|
||
{:else}
|
||
{#each search_data as item, i}
|
||
<div
|
||
class="p-2
|
||
flex justify-between items-center
|
||
{i === search_data.length - 1 ? '' : 'border-b-2'}
|
||
border-[var(--w-border)] dark:border-[var(--b-border)]"
|
||
>
|
||
{#if search_type === "teacher-list"}
|
||
<p>{item.label}</p>
|
||
{:else}
|
||
<p>{item}</p>
|
||
{/if}
|
||
<button
|
||
class="min-w-[40px] min-h-[40px]
|
||
text-3xl text-(--w-green) dark:text-[var(--b-green)]
|
||
border-[1px] border-[var(--w-green)] dark:border-[var(--b-green)]"
|
||
on:click={() => {
|
||
if (item === "not found") {
|
||
return;
|
||
}
|
||
data.saved.push({
|
||
type: {
|
||
"group-list": "group",
|
||
"teacher-list": "teacher",
|
||
"aud-list": "aud",
|
||
}[search_type],
|
||
name:
|
||
search_type === "teacher-list"
|
||
? item.label
|
||
: item,
|
||
});
|
||
search_value = "";
|
||
search_data = [];
|
||
data.selected = data.saved.length - 1;
|
||
save_to_ls();
|
||
get_rasp();
|
||
is_settings_open = false;
|
||
}}
|
||
>
|
||
+
|
||
</button>
|
||
</div>
|
||
{/each}
|
||
{/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 mt-10
|
||
bg-[var(--w-red)] dark:bg-[var(--b-red)]
|
||
border-[1px] border-[var(--w-border)] dark:border-[var(--b-border)]"
|
||
on:click={() => {
|
||
localStorage.clear();
|
||
save_to_ls();
|
||
is_settings_open = false;
|
||
get_rasp();
|
||
}}
|
||
>
|
||
Очистить Кэш
|
||
</button>
|
||
|
||
<button
|
||
class="w-auto p-2 m-2
|
||
bg-[var(--w-red)] dark:bg-[var(--b-red)]
|
||
border-[1px] border-[var(--w-border)] dark:border-[var(--b-border)]"
|
||
on:click={() => {
|
||
is_confirm_open = true;
|
||
confirm_question = "Действительно удалить сохраненные расписания?";
|
||
on_confirm = () => {
|
||
localStorage.clear();
|
||
is_settings_open = false;
|
||
is_confirm_open = false;
|
||
window.location.reload();
|
||
};
|
||
}}
|
||
>
|
||
Удалить все данные
|
||
</button>
|
||
|
||
<div class="mt-10">
|
||
<pre
|
||
class="w-min m-2 break-words flex justify-center items-center"><Spinner
|
||
></Spinner> - Загрузка</pre>
|
||
|
||
<div
|
||
class="w-auto m-2 space-x-2 break-words flex justify-start items-center"
|
||
>
|
||
<Cache></Cache>
|
||
<p class="max-[683px]:hidden">-</p>
|
||
<p>Показывает последние сохраненные данные</p>
|
||
</div>
|
||
|
||
<div
|
||
class="w-auto m-2 space-x-2 break-words flex justify-start items-center"
|
||
>
|
||
<X></X>
|
||
<p class="max-[424px]:hidden">-</p>
|
||
<p>Данные не загрузились</p>
|
||
</div>
|
||
|
||
<div
|
||
class="w-auto m-2 space-x-2 break-words flex justify-start items-center"
|
||
>
|
||
<Checked></Checked>
|
||
<p class="max-[546px]:hidden">-</p>
|
||
<p>Покавзывает актуальные данные</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
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
|
||
</a>
|
||
</div>
|
||
</Dialog>
|
||
|
||
<div class="w-full flex justify-center items-center">
|
||
<div
|
||
class="h-svh
|
||
{ui_sytle === 'vertical' ? 'w-[1024px]' : 'w-[2120px]'}
|
||
text-[var(--w-text)] dark:text-[var(--b-text)] transition-all
|
||
flex relative"
|
||
>
|
||
<div
|
||
class="top-0 left-0 w-full h-full p-2
|
||
flex flex-col absolute"
|
||
>
|
||
<div class="flex justify-between items-center">
|
||
<button
|
||
class="text-3xl w-min m-2"
|
||
on:click={() => {
|
||
is_settings_open = true;
|
||
}}>Настройки</button
|
||
>
|
||
<div class="flex justify-center items-center space-x-4">
|
||
{#if is_rasp_data_loading}
|
||
<Spinner></Spinner>
|
||
{/if}
|
||
{#if is_rasp_cache_loaded}
|
||
<Cache></Cache>
|
||
{/if}
|
||
{#if is_rasp_data_loaded}
|
||
<Checked></Checked>
|
||
{/if}
|
||
{#if !is_rasp_data_loaded && !is_rasp_cache_loaded && !is_rasp_data_loading}
|
||
<X></X>
|
||
{/if}
|
||
<ThemeSwitch></ThemeSwitch>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="relative flex justify-start items-center">
|
||
<input
|
||
type="date"
|
||
name="date_input"
|
||
id="date_input"
|
||
class="bg-black text-white absolute top-0 invisible"
|
||
on:change={(event) => {
|
||
start_date = new Date(event.target.value);
|
||
get_rasp();
|
||
}}
|
||
/>
|
||
<button
|
||
class="m-2 p-2 w-auto h-[40px] flex-initial
|
||
bg-[var(--w-bbg)] dark:bg-[var(--w-bbg)]
|
||
border-[1px] border-[var(--w-border)] dark:border-[var(--b-border)]"
|
||
on:click={() => {
|
||
document.getElementById("date_input").showPicker();
|
||
}}
|
||
>
|
||
<pre>{input_date}</pre>
|
||
</button>
|
||
<select
|
||
class="h-[40px] p-2 m-2 flex-auto w-full max-w-[280px]
|
||
bg-[var(--w-bg)] dark:bg-[var(--b-bg)]
|
||
border-[1px] border-[var(--w-border)] dark:border-[var(--b-border)]"
|
||
on:change={(event) => {
|
||
data.selected = Number(event.target.value);
|
||
save_to_ls();
|
||
get_rasp();
|
||
}}
|
||
>
|
||
{#each data.saved as group, i}
|
||
{#if data.selected === i}
|
||
<option selected value={i}>
|
||
{group.name}
|
||
</option>
|
||
{:else}
|
||
<option value={i}>{group.name}</option>
|
||
{/if}
|
||
{/each}
|
||
</select>
|
||
</div>
|
||
|
||
<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
|
||
class="break-words h-auto
|
||
text-2xl text-[var(--w-text)] dark:text-[var(--b-text)]"
|
||
>
|
||
У вас нету сохраненных расписаний, добавтье их в <button
|
||
class="underline"
|
||
on:click={() => {
|
||
is_settings_open = true;
|
||
}}>настройках</button
|
||
>
|
||
</p>
|
||
<img
|
||
src="/tutor.gif"
|
||
class="max-w-[400px] w-full mt-4 dark:border-[1px] border-[var(--b-border)]"
|
||
alt="turoiral gif"
|
||
/>
|
||
</div>
|
||
{: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>
|
||
</div>
|
||
</div>
|
||
|
||
<Dialog
|
||
name={confirm_question}
|
||
bind:is_open={is_confirm_open}
|
||
class_name="h-[220px]"
|
||
>
|
||
<button
|
||
on:click={on_confirm}
|
||
class="w-auto py-1 m-2
|
||
flex justify-center items-center
|
||
text-[var(--w-text)] dark:text-[var(--b-text)]
|
||
transition-all duration-300
|
||
bg-[var(--w-red)] dark:bg-[var(--b-red)]
|
||
border-2 border-[var(--border)] rounded-xl"
|
||
>
|
||
Да
|
||
</button>
|
||
<button
|
||
on:click={on_confirm}
|
||
class="w-auto py-1 m-2
|
||
flex justify-center items-center
|
||
text-[var(--w-text)] dark:text-[var(--b-text)]
|
||
transition-all duration-300
|
||
bg-[var(--w-green)] dark:bg-green-700
|
||
border-2 border-[var(--border)] rounded-xl"
|
||
>
|
||
Нет
|
||
</button>
|
||
</Dialog>
|