From e5a1bfad0c9b3ab929a0456082ba9c1324c8f3ba Mon Sep 17 00:00:00 2001
From: smugg99 <dudak799@gmail.com>
Date: Sat, 2 Nov 2024 22:34:03 +0100
Subject: [PATCH] added mobile view for schedule tables

---
 .../src/components/ScheduleTable.vue          | 280 +++++++++++++-----
 .../src/components/pages/Division.vue         |  40 ++-
 .../src/locales/en.js                         |   1 +
 .../src/locales/pl.js                         |   1 +
 4 files changed, 242 insertions(+), 80 deletions(-)

diff --git a/web/optivum-better-schedule-frontend/src/components/ScheduleTable.vue b/web/optivum-better-schedule-frontend/src/components/ScheduleTable.vue
index 49cc0fe..db9759b 100644
--- a/web/optivum-better-schedule-frontend/src/components/ScheduleTable.vue
+++ b/web/optivum-better-schedule-frontend/src/components/ScheduleTable.vue
@@ -10,62 +10,121 @@
 			</div>
 		</v-slide-y-transition>
 		<v-fade-transition appear>
-			<v-card class="schedule-container grid-item pa-0" variant="outlined" elevation="8">
-				<v-table v-if="scheduleData && !notFound" class="schedule-table">
-					<thead>
-						<tr>
-							<th><span class="schedule-head">{{ t('schedule.ordered_number') }}</span></th>
-							<th><span class="schedule-head">{{ t('schedule.time_range') }}</span></th>
-							<th v-for="(day, index) in availableDayNames" :key="index">
-								<span class="schedule-head">{{ day }}</span>
-							</th>
-						</tr>
-					</thead>
-					<tbody>
-						<tr v-for="(timeRange, rowIndex) in uniqueTimeRanges" :key="rowIndex"
-							:style="{ backgroundColor: getRowColor(rowIndex) }">
-							<td :style="{ backgroundColor: getRowColor(1) }"><span class="schedule-no">{{
-									rowIndex + 1 }}</span></td>
-							<td><span class="schedule-time">{{ timeRange }}</span></td>
-							<td v-for="(day, dayIndex) in scheduleData?.schedule.schedule_days" :key="dayIndex">
-								<div
-									v-if="day.lesson_groups.some((lg: LessonGroup) => formatTime(lg.lessons[0]?.time_range.start) + ' - ' + formatTime(lg.lessons[0]?.time_range.end) === timeRange)">
-									<div v-for="lesson in day.lesson_groups.find((lg: LessonGroup) => formatTime(lg.lessons[0]?.time_range.start) + ' - ' + formatTime(lg.lessons[0]?.time_range.end) === timeRange)?.lessons"
-										:key="lesson.full_name">
-										<span class="schedule-lesson-name">{{ lesson.full_name }}</span>&nbsp;
-
-										<router-link
-											v-if="lesson.teacher_designator && teacherIndexes[lesson.teacher_designator] !== undefined"
-											:to="'/teacher/' + teacherIndexes[lesson.teacher_designator]"
-											class="schedule-lesson-teacher">
-											&nbsp;{{ lesson.teacher_designator }}
-										</router-link>
-
-										<router-link
-											v-if="lesson.room_designator && roomIndexes[lesson.room_designator] !== undefined"
-											:to="'/room/' + roomIndexes[lesson.room_designator]"
-											class="schedule-lesson-room">
-											&nbsp;{{ lesson.room_designator }}
-										</router-link>
-
-										<router-link
-											v-if="lesson.division_designator && divisionIndexes[lesson.division_designator] !== undefined"
-											:to="'/division/' + divisionIndexes[lesson.division_designator]"
-											class="schedule-lesson-division">
-											&nbsp;{{ lesson.division_designator }}
-										</router-link>
+			<div class="schedule-container grid-item pa-0">
+				<!-- Mobile View -->
+				<template v-if="isMobileView">
+					<v-card variant="flat">
+						<v-tabs v-model="activeTab" :style="{ backgroundColor: getRowColor(1) }" grow center-active>
+							<v-tab v-for="(day, index) in availableDayNames" :key="index" class="schedule-day-tab">
+								{{ day }}
+							</v-tab>
+						</v-tabs>
+					</v-card>
+					<v-tabs-items v-model="activeTab">
+						<v-tab-item v-for="(day, dayIndex) in scheduleData?.schedule.schedule_days" :key="dayIndex">
+							<v-table class="schedule-table" v-if="activeTab === dayIndex">
+								<tbody>
+									<tr v-for="(lessonGroup, groupIndex) in day.lesson_groups" :key="groupIndex"
+										:style="{ backgroundColor: getRowColor(groupIndex) }">
+										<td class="narrower-column"><span class="schedule-no">{{ groupIndex + 1
+												}}.</span></td>
+										<td class="narrow-column">
+											<div class="stacked-time">
+												<span class="schedule-time">{{
+													formatTime(lessonGroup.lessons[0]?.time_range.start) }}</span>
+												<span class="schedule-time">{{
+													formatTime(lessonGroup.lessons[0]?.time_range.end) }}</span>
+											</div>
+										</td>
+
+										<td class="schedule-table-data">
+											<div v-for="lesson in lessonGroup.lessons" :key="lesson.full_name"
+												class="stacked-lesson">
+												<span class="schedule-lesson-name">{{ lesson.full_name }}</span>&nbsp;
+
+												<router-link
+													v-if="lesson.teacher_designator && teacherIndexes[lesson.teacher_designator] !== undefined"
+													:to="'/teacher/' + teacherIndexes[lesson.teacher_designator]"
+													class="schedule-lesson-teacher">
+													&nbsp;{{ lesson.teacher_designator }}
+												</router-link>
+
+												<router-link
+													v-if="lesson.room_designator && roomIndexes[lesson.room_designator] !== undefined"
+													:to="'/room/' + roomIndexes[lesson.room_designator]"
+													class="schedule-lesson-room">
+													&nbsp;{{ lesson.room_designator }}
+												</router-link>
+
+												<router-link
+													v-if="lesson.division_designator && divisionIndexes[lesson.division_designator] !== undefined"
+													:to="'/division/' + divisionIndexes[lesson.division_designator]"
+													class="schedule-lesson-division">
+													&nbsp;{{ lesson.division_designator }}
+												</router-link>
+											</div>
+										</td>
+									</tr>
+								</tbody>
+							</v-table>
+						</v-tab-item>
+					</v-tabs-items>
+				</template>
+
+				<!-- Desktop View -->
+				<template v-else-if="scheduleData && !notFound">
+					<v-table class="schedule-table">
+						<thead>
+							<tr>
+								<th><span class="schedule-head">{{ t('schedule.ordered_number') }}</span></th>
+								<th><span class="schedule-head">{{ t('schedule.time_range') }}</span></th>
+								<th v-for="(day, index) in availableDayNames" :key="index">
+									<span class="schedule-head">{{ day }}</span>
+								</th>
+							</tr>
+						</thead>
+						<tbody>
+							<tr v-for="(timeRange, rowIndex) in uniqueTimeRanges" :key="rowIndex"
+								:style="{ backgroundColor: getRowColor(rowIndex) }">
+								<td class="schedule-table-data"><span class="schedule-no">{{ rowIndex + 1 }}</span></td>
+								<td class="schedule-table-data">
+									<span class="schedule-time">{{ timeRange.split(" - ")[0] }} - {{ timeRange.split(" - ")[1] }}</span>
+								</td>
+								<td v-for="(day, dayIndex) in scheduleData?.schedule.schedule_days" :key="dayIndex"
+									class="schedule-table-data">
+									<div
+										v-if="day.lesson_groups.some((lg: LessonGroup) => formatTime(lg.lessons[0]?.time_range.start) + ' - ' + formatTime(lg.lessons[0]?.time_range.end) === timeRange)">
+										<div v-for="lesson in day.lesson_groups.find((lg: LessonGroup) => formatTime(lg.lessons[0]?.time_range.start) + ' - ' + formatTime(lg.lessons[0]?.time_range.end) === timeRange)?.lessons"
+											:key="lesson.full_name" class="stacked-lesson">
+											<span class="schedule-lesson-name">{{ lesson.full_name }}</span>&nbsp;
+
+											<router-link
+												v-if="lesson.teacher_designator && teacherIndexes[lesson.teacher_designator] !== undefined"
+												:to="'/teacher/' + teacherIndexes[lesson.teacher_designator]"
+												class="schedule-lesson-teacher">
+												&nbsp;{{ lesson.teacher_designator }}
+											</router-link>
+
+											<router-link
+												v-if="lesson.room_designator && roomIndexes[lesson.room_designator] !== undefined"
+												:to="'/room/' + roomIndexes[lesson.room_designator]"
+												class="schedule-lesson-room">
+												&nbsp;{{ lesson.room_designator }}
+											</router-link>
+										</div>
 									</div>
-								</div>
-								<div v-else>&nbsp; <!-- Placeholder for empty cells --></div>
-							</td>
-						</tr>
-					</tbody>
-				</v-table>
-			</v-card>
+									<div v-else>&nbsp; <!-- Placeholder for empty cells --></div>
+								</td>
+							</tr>
+						</tbody>
+					</v-table>
+				</template>
+			</div>
 		</v-fade-transition>
 	</v-row>
 </template>
 
+
 <script setup lang="ts">
 import { ref, onMounted, computed, defineProps } from 'vue';
 import axios from 'axios';
@@ -112,12 +171,20 @@ interface DivisionData {
 const { t } = useI18n();
 const theme = useTheme();
 
+const mobileViewBreakpoint = 1279;
+
 const scheduleData = ref<DivisionData | null>(null);
 const title = computed(() => scheduleData.value?.full_name ?? '');
 const teacherIndexes = ref<Record<string, number>>({});
 const roomIndexes = ref<Record<string, number>>({});
 const divisionIndexes = ref<Record<string, number>>({});
 const notFound = ref(false);
+const isMobileView = ref(window.innerWidth < mobileViewBreakpoint);
+const activeTab = ref(0);
+
+window.addEventListener("resize", () => {
+	isMobileView.value = window.innerWidth < mobileViewBreakpoint;
+});
 
 const getRowColor = (rowIndex: number) => {
 	const colors = theme.current.value.colors;
@@ -218,14 +285,12 @@ function formatTime(time: TimeRange | undefined): string {
 }
 
 .schedule-container {
-	width: 100%;
-	overflow-x: auto;
+	overflow-x: visible;
 }
 
 .schedule-table {
 	width: 100%;
 	height: auto;
-	border-collapse: collapse;
 	table-layout: fixed;
 	font-size: 1vw;
 }
@@ -233,10 +298,12 @@ function formatTime(time: TimeRange | undefined): string {
 .schedule-table th,
 .schedule-table td {
 	padding: 0.5vw;
-	text-align: center;
+	text-align: left;
 	overflow-wrap: break-word;
+	word-break: break-word;
 	font-size: 1vw;
 	border: 1px solid rgba(255, 255, 255, 0.15);
+	white-space: normal;
 }
 
 .schedule-title-container {
@@ -253,7 +320,7 @@ function formatTime(time: TimeRange | undefined): string {
 }
 
 .schedule-title {
-	font-size: 2rem;
+	font-size: 3.5rem;
 	font-weight: 800;
 	text-align: center;
 	display: flex;
@@ -268,7 +335,7 @@ function formatTime(time: TimeRange | undefined): string {
 .schedule-time,
 .schedule-head {
 	font-size: 1.2rem;
-	font-weight: 700;
+	font-weight: 800;
 	text-align: center;
 	white-space: nowrap;
 	display: flex;
@@ -280,24 +347,54 @@ function formatTime(time: TimeRange | undefined): string {
 	font-weight: 600;
 }
 
-.lesson-info {
-	display: inline-flex;
-	flex-wrap: nowrap;
-	align-items: center;
-}
-
+.schedule-lesson-name,
 .schedule-lesson-teacher,
 .schedule-lesson-room,
-.schedule-lesson-division,
-.schedule-lesson-name {
-	font-size: 1rem;
-	white-space: nowrap;
-	display: inline;
+.schedule-lesson-division {
+    font-size: 1rem;
+    display: inline;
+    white-space: nowrap;
+}
+
+.stacked-lesson {
+	display: block;
+	padding-bottom: 4px;
+}
+
+schedule-table td.schedule-table-data {
+	max-width: 15vw;
 }
 
 @media (max-width: 1279px) {
 	.division-grid {
-		margin-top: calc(64px + 16px);;
+		margin-top: calc(64px + 16px);
+	}
+
+	.schedule-container {
+		width: 100vw;
+		height: 100%;
+	}
+
+	.schedule-table th.narrow-column,
+	.schedule-table td.narrow-column {
+		width: 15%;
+		padding: 6px;
+	}
+
+	.schedule-table th.narrower-column,
+	.schedule-table td.narrower-column {
+		width: 5%;
+		padding: 6px;
+	}
+
+	.stacked-time {
+		display: flex;
+		flex-direction: column;
+		text-align: center;
+	}
+
+	.schedule-table-data {
+		padding: 0px !important;
 	}
 
 	.schedule-title {
@@ -305,17 +402,56 @@ function formatTime(time: TimeRange | undefined): string {
 	}
 
 	.schedule-table {
-		font-size: 2vw;
-	}
+        font-size: 2vw;
+    }
 
 	.schedule-table th,
 	.schedule-table td {
-		padding: 0.8vw;
 		font-size: 2vw;
+		text-align: left;
+		border: none;
 	}
 
+
 	.schedule-title {
 		font-size: 4vw;
 	}
+
+	.schedule-table-data {
+		padding: 0px !important;
+	}
+
+	.schedule-no,
+	.schedule-time,
+	.schedule-head {
+		font-size: 1rem;
+		font-weight: 600;
+		text-align: left;
+		white-space: nowrap;
+		display: flex;
+		justify-content: flex-start;
+		align-items: center;
+	}
+
+	.schedule-no {
+		width: 2em;
+		padding-left: 0.2em;
+	}
+
+	.schedule-lesson-teacher,
+	.schedule-lesson-room,
+	.schedule-lesson-division,
+	.schedule-lesson-name {
+		font-size: 1rem;
+		font-weight: 400;
+		white-space: nowrap;
+		display: inline;
+		text-align: left;
+	}
+
+	.schedule-day-tab {
+		font-size: 1rem;
+		font-weight: 800;
+	}
 }
 </style>
diff --git a/web/optivum-better-schedule-frontend/src/components/pages/Division.vue b/web/optivum-better-schedule-frontend/src/components/pages/Division.vue
index 8e0c507..056b955 100644
--- a/web/optivum-better-schedule-frontend/src/components/pages/Division.vue
+++ b/web/optivum-better-schedule-frontend/src/components/pages/Division.vue
@@ -2,7 +2,7 @@
 <template>
 	<div class="fill-height fill-width pa-0">
 		<v-slide-y-reverse-transition appear>
-			<div class="grid-container pa-0" fluid>
+			<div class="grid-container pa-0 fill-height">
 				<v-row class="division-grid" align="center" justify="center">
 					<ScheduleTable class="grid-item" :index="id" :type="type" />
 				</v-row>
@@ -13,37 +13,61 @@
 
 <script setup lang="ts">
 import ScheduleTable from '../ScheduleTable.vue';
-
 import { useRoute } from 'vue-router';
 
 const route = useRoute();
 const id = Number(route.params.id);
-const type = "division"
+const type = "division";
 </script>
 
 <style scoped>
 .grid-container {
-	display: flex;
-	flex-direction: column;
+	display: grid;
+	grid-template-rows: 1fr;
 	align-items: center;
-	justify-content: center;
+	justify-items: center;
 	overflow: hidden;
 	padding: 0;
+	height: 100vh;
 }
 
 .division-grid {
-	flex-wrap: nowrap;
 	display: grid;
+	grid-template-rows: auto;
 	width: 100%;
-	justify-items: center;
 	align-items: center;
+	justify-items: center;
 	gap: 0;
 	padding: 0;
 	margin: 0;
+	height: 100%;
 }
 
 .grid-item {
 	max-width: 100%;
 	padding: 0;
 }
+
+@media (max-width: 1279px) {
+	.grid-container {
+		align-items: start;
+		justify-items: stretch;
+		height: auto;
+		min-height: 100vh;
+	}
+
+	.division-grid {
+		align-items: start;
+		justify-items: start;
+		grid-template-rows: auto;
+		width: 100%;
+		height: auto;
+	}
+
+	.grid-item {
+		align-self: start;
+		width: 100%;
+		padding-top: 0;
+	}
+}
 </style>
diff --git a/web/optivum-better-schedule-frontend/src/locales/en.js b/web/optivum-better-schedule-frontend/src/locales/en.js
index d2fb537..f7079df 100644
--- a/web/optivum-better-schedule-frontend/src/locales/en.js
+++ b/web/optivum-better-schedule-frontend/src/locales/en.js
@@ -119,5 +119,6 @@ export default {
 	schedule: {
 		ordered_number: 'No.',
 		time_range: 'Time',
+		lesson: 'Lesson',
 	}
 };
\ No newline at end of file
diff --git a/web/optivum-better-schedule-frontend/src/locales/pl.js b/web/optivum-better-schedule-frontend/src/locales/pl.js
index 0311abf..3508360 100644
--- a/web/optivum-better-schedule-frontend/src/locales/pl.js
+++ b/web/optivum-better-schedule-frontend/src/locales/pl.js
@@ -119,5 +119,6 @@ export default {
 	schedule: {
 		ordered_number: 'Nr',
 		time_range: 'Godzina',
+		lesson: 'Lekcja',
 	}
 };