ui update, added vertical view

makefile

@@ -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

src/App.svelte

@@ -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) {
+		if (localStorage.getItem("data") !== null) {
-		} else {
 			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}
+				{:else if ui_sytle === "horizontal"}
-					{#each rasp_data as day, i}
+					<Horizontal
-						<div id={`${i}`} class="p-2 min-w-[300px]">
+						bind:rasp_data
-							<div
+						bind:is_rasp_data_loading
-								class="flex p-2 mb-2
+						bind:is_rasp_data_loaded
-								border-[1px] border-[var(--w-border)] dark:border-[var(--b-border)]
+						bind:is_rasp_cache_loaded
-								text-[var(--w-text)] dark:text-[var(--b-text)]
+					></Horizontal>
-								{day.isCurrentDate === 1 ? 'bg-[var(--w-red)] dark:bg-[var(--b-red)]' : ''}"
+				{:else if ui_sytle === "vertical"}
-							>
+					<Vertical
-								<h1>
+						bind:rasp_data
-									<pre>{day.date} - {day.weekDay}</pre>
+						bind:is_rasp_data_loading
-								</h1>
+						bind:is_rasp_data_loaded
-							</div>
+						bind:is_rasp_cache_loaded
-							<div class="relative z-0 h-[calc(100svh-192px)]">
+					></Vertical>
-								<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}
 				{/if}
 			</div>
 		</div>

src/global.css

@@ -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;
+}

src/lib/Dialog.svelte

@@ -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

src/lib/Horizontal.svelte

@@ -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}

src/lib/Pair.svelte

@@ -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,8 +60,7 @@
 				{pairs.schedulePairs[0].subject}
 			</h1>
 			<h1>
-				aud: {pairs.schedulePairs[0].aud}
+				{pairs.schedulePairs[0].aud}
-			</h1>
 				<a
 					target="_blank"
 					href="https://www.usue.ru/raspisanie/getteams/?prepod={pairs
@@ -31,45 +69,55 @@
 				>
 					{pairs.schedulePairs[0].teacher}
 				</a>
+			</h1>
 			<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}
+					Ауд: {pair.aud}
 				</h1>
+				<div class="flex flex-col">
+					{#each pair.teachers as teacher}
 						<a
 							target="_blank"
-					href="https://www.usue.ru/raspisanie/getteams/?prepod={pair.teacher}"
+							href="https://www.usue.ru/raspisanie/getteams/?prepod={teacher}"
-					class="underline"
+							class="underline w-fit"
 						>
-					{pair.teacher}
+							{teacher}
 						</a>
+					{/each}
+				</div>
+
+				<div class="flex flex-col">
+					{#each pair.groups as group}
 						<h1>
-					{pair.group}
+							{group}
 						</h1>
+					{/each}
+				</div>
 			</div>
 		{/each}
 	</div>

src/lib/Vertical.svelte

@@ -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}