Translation, extra info from courses.auth, misc bug fixes (language modal breaking app)

src/lib/components/courses/courseInfo.svelte

@@ -2,10 +2,11 @@
 	import { afterUpdate, onMount } from 'svelte';
 	import Chart from 'chart.js/auto';
 	import { t } from "$lib/i18n";
+	import DOMPurify from 'dompurify';
 
 
 	/**
-	 * @type {{ title: any; code: any; courseType: any; teacher: string; ects: any; semester: any; season: any; weeklyHours: any; period: any; }}
+	 * @type {{ title: any; code: any; courseType: any; teacher: string; syllabus: string; eudoxus: string; ects: any; semester: any; season: any; weeklyHours: any; period: any; }}
 	 */
 	export let course;
 	/**
@@ -66,8 +67,14 @@
 			maximum = Math.max(...gradeData);
 
 			// Create a bar chart using Chart.js
-			const ctx = document.getElementById('statChart').getContext('2d');
+			/**
+			 @type {HTMLCanvasElement | null}
+			*/
+			const statChart = /** @type {HTMLCanvasElement | null} */ (document.getElementById('statChart'));
+			if (!statChart) return;
+			const ctx = statChart.getContext('2d');
 			const colors = grades.map((grade) => (grade < 5 ? '#515151' : primaryColor));
+			if (!ctx) return;
 			chart = new Chart(ctx, {
 				type: 'bar',
 				data: {
@@ -120,6 +127,9 @@
 		}
 	});
 
+	// Sanitized HTML content
+	$: sanitizedSyllabus = course.syllabus ? DOMPurify.sanitize(course.syllabus, { SANITIZE_NAMED_PROPS: true }) : '';
+	$: sanitizedEudoxus = course.eudoxus ? DOMPurify.sanitize(course.eudoxus, { SANITIZE_NAMED_PROPS: true }) : '';
 
 
 </script>
@@ -156,14 +166,20 @@
 				<ion-item lines ="full">
 					<ion-label>{$t("course.semester")}</ion-label>
 					{#if course.semester <= 24}
-					<ion-text slot="end">{course.semester}ο</ion-text>
+					<ion-text slot="end">{course.semester}</ion-text>
 					{:else}
 					<ion-text slot="end">{course.season}</ion-text>
 					{/if}
 				</ion-item>
 				<ion-item lines ="full">
 					<ion-label>{$t("course.period")}</ion-label>
-					<ion-text slot="end">{course.season}</ion-text>
+					<ion-text slot="end">
+						{#if course.season == "ΧΕΙΜ"}
+							{$t("course.winter_period")}
+						{:else if course.season == "ΕΑΡ"}
+							{$t("course.summer_period")}
+						{/if}
+					</ion-text>
 				</ion-item>
 				<ion-item lines ="full">
 					<ion-label>{$t("course.weekly_hours")}</ion-label>
@@ -172,14 +188,35 @@
 
 				<ion-accordion-group class="accordion" expand="compact">
 					<ion-accordion value="first">
-						<ion-item slot="header" color="white">
+						<ion-item slot="header" color="white" lines ="full">
 							<ion-label>{$t("course.professors")}</ion-label>
 						</ion-item>
 						{#each course.teacher.split(', ') as teacher}
 							<h3 class="teachers" slot="content">{teacher}</h3>
 						{/each}
 					</ion-accordion>
 				</ion-accordion-group>
+				{#if course.syllabus}
+					<ion-accordion-group class="accordion" expand="compact">
+						<ion-accordion value="first">
+							<ion-item slot="header" color="white">
+								<ion-label>{$t("course.syllabus")}</ion-label>
+							</ion-item>
+								<p slot="content" style="white-space: pre-line;">{@html sanitizedSyllabus}</p>
+						</ion-accordion>
+					</ion-accordion-group>
+				{/if}
+				{#if course.eudoxus}
+					<ion-accordion-group class="accordion" expand="compact">
+						<ion-accordion value="first">
+							<ion-item slot="header" color="white">
+								<ion-label>{$t("course.eudoxus")}</ion-label>
+							</ion-item>
+								<p slot="content" style="white-space: pre-line;">{@html sanitizedEudoxus}</p>
+						</ion-accordion>
+					</ion-accordion-group>
+				{/if}
+
 			</ion-list>
 		</ion-card-content>
 	</ion-card>

src/lib/components/courses/coursePage.svelte

@@ -5,6 +5,7 @@
 	import CoursesSkeleton from "$lib/components/courses/coursesSkeleton.svelte";
 	import SubPageHeader from '$shared/subPageHeader.svelte';
 	import { t } from "$lib/i18n";
+	//import { course } from '$types/courseType';
 
 
 	// Initiniatize variables
@@ -13,6 +14,8 @@
 		code: '',
 		ects: 0,
 		teacher: '',
+		syllabus: '',
+		eudoxus: '',
 		grade: '',
 		semester: '',
 		weeklyHours: 0,
@@ -36,7 +39,7 @@
 	};
 
 	export let id;
-	let result;
+	let result: any;
 
 	// Extract courseCode from the URL
 	// const courseCode = $page.params.courseId;
@@ -50,7 +53,7 @@
 
 			// Assign values from the result to course
 		course.title = result.courseTitle;
-		course.code = courseCode;
+		course.code = result.code;
 		course.ects = result.ects;
 
 		// Get teacher name for each teacher
@@ -64,7 +67,12 @@
 		course.weeklyHours = result.weeklyHours;
 		course.courseType = result.courseType;
 		course.season = result.season;
-
+		if(result.syllabus){
+			course.syllabus = result.syllabus;
+		}
+		if(result.eudoxus) {
+			course.eudoxus = result.eudoxus
+		}
 		if (result.period) {
 			course.period = result.period;
 		}
@@ -74,18 +82,18 @@
 		// Fetch statistics
 		result = await statistics(courseCode);
 		if (result) {	
-		stats.grade = result.myGrade;
-		stats.studentsLikeMe = result.studentsLikeMe;
-		stats.studentsBetterThanMe = result.studentsBetterThanMe;
-		stats.studentsWorseThanMe = result.studentsWorseThanMe;
-		stats.passedCount = result.studentsPassed;
-		stats.failedCount = result.studentsFailed;
-		stats.totalStudents = result.totalStudents;
-		// fix to 2 digits after decimal point
-		stats.averageGradePassed = result.averagePassed.toFixed(1);
-		stats.averageGrade = result.average.toFixed(1);
-		stats.gradesCount = result.gradesCount;
-		stats.top10Percent = result.topPercent;
+			stats.grade = result.myGrade;
+			stats.studentsLikeMe = result.studentsLikeMe;
+			stats.studentsBetterThanMe = result.studentsBetterThanMe;
+			stats.studentsWorseThanMe = result.studentsWorseThanMe;
+			stats.passedCount = result.studentsPassed;
+			stats.failedCount = result.studentsFailed;
+			stats.totalStudents = result.totalStudents;
+			// fix to 2 digits after decimal point
+			stats.averageGradePassed = Number((result.averagePassed as number).toFixed(1));
+			stats.averageGrade = result.average.toFixed(1);
+			stats.gradesCount = result.gradesCount;
+			stats.top10Percent = result.topPercent;
 		}
 
 

src/lib/components/degreeCalculator/card.svelte

@@ -15,16 +15,19 @@
 	import { fade } from 'svelte/transition';
 	import { courseAdded, customCourses } from './courseStore.ts';
 	import { get } from 'svelte/store';
+	import { localize } from '$src/lib/translations/localize.js';
+	import {locale} from "$lib/i18n.js"
 	export let flip;
 
 	let unpassed_courses: {
-		title: string;
+		name: string;
 		id: string;
 		semester_id: number;
 		semester_name: string;
 		grade: number;
 		input_grade: string;
 		coefficient: number;
+		locale: any;
 	}[] = [];
 
 	// Define the degree_grade object to store the average grades for the custom courses
@@ -96,7 +99,7 @@
 					{#each unpassed_courses as course}
 						<div class="courses-box">
 							<Course
-								course_title={course.title}
+								course_title={localize(course, "name", get(locale))}
 								course_semester_id={course.semester_id}
 								course_semester_name={course.semester_name}
 							/>

src/lib/components/degreeCalculator/course.svelte

@@ -1,4 +1,7 @@
-<script>
+<script lang="ts">
+    import {get} from "svelte/store"
+    import { locale } from "$src/lib/i18n";
+    import { sem_suffix } from "$src/lib/translations/localize";
     /** @type { string } */
     export let course_title;
     /** @type { number } */
@@ -13,7 +16,11 @@
     <div> <ion-text class="course-name">{course_title}</ion-text> </div>
 
     {#if course_semester_id <= 24}
-    <div> <p class="course-semester">{course_semester_id}ο Εξάμηνο</p> </div>
+        {#if get(locale) == "el"}
+            <div> <p class="course-semester">{course_semester_id}ο Εξάμηνο</p> </div>
+        {:else}
+            <div> <p class="course-semester">{sem_suffix(course_semester_id)}</p> </div>
+        {/if}
     {:else}
     <div> <p class="course-semester">{course_semester_name}</p> </div>
     {/if}

src/lib/components/grades/gradeCard.svelte

@@ -8,7 +8,9 @@
 	import Course from '$components/courses/coursePage.svelte';
 	import { navController } from '$components/shared/StackedNav';
 	import { getSemester } from '$components/courses/getSemester';
-	import { t, getLocale } from '$lib/i18n';
+	import { t, getLocale, locale } from '$lib/i18n';
+	import { get } from 'svelte/store';
+	import { localize } from '$src/lib/translations/localize';
 
 	let childrenOpen: boolean[] = [];
 
@@ -51,12 +53,19 @@
 					<ion-item on:click={() => navigateToCourse(course)} lines="none" class="ion-no-padding">
 						<div class="containerFlex">
 							<div class="titlesFlex">
-								<ion-label class="ion-text-wrap courseTitle">{course.courseTitle}</ion-label>
+								<ion-label class="ion-text-wrap courseTitle">{localize(course, "courseTitle" ,get(locale))}</ion-label>
 
 								{#if course.examPeriod !== null}
 									<ion-label class="examPeriod">
 										{#if course.examPeriod && course.gradeYear}
-											{course.examPeriod.name} {course.gradeYear.name}
+											{#if course.examPeriod.name == "ΦΕΒΡΟΥΑΡΙΟΣ"}
+												{$t("course.exam_winter_period")}
+											{:else if course.examPeriod.name == "ΙΟΥΝΙΟΣ"}
+												{$t("course.exam_summer_period")}
+											{:else if course.examPeriod.name == "ΣΕΠΤΕΜΒΡΙΟΣ"}
+												{$t("course.exam_autumn_period")}
+											{/if}
+											{course.gradeYear.name}
 										{:else}
 											{$t('progress.declared')}
 										{/if}
@@ -82,12 +91,19 @@
 					<ion-item lines="none" class="ion-no-padding">
 						<div class="containerFlex">
 							<div class="titlesFlex">
-								<ion-label class="ion-text-wrap courseTitle">{course.courseTitle}</ion-label>
+								<ion-label class="ion-text-wrap courseTitle">{localize(course, "courseTitle", get(locale))}</ion-label>
 
 								{#if course.examPeriod !== null}
 									<ion-label class="examPeriod">
 										{#if course.examPeriod && course.gradeYear}
-											{course.examPeriod.name} {course.gradeYear.name}
+											{#if course.examPeriod.name == "ΦΕΒΡΟΥΑΡΙΟΣ"}
+												{$t("course.exam_winter_period")}
+											{:else if course.examPeriod.name == "ΙΟΥΝΙΟΣ"}
+												{$t("course.exam_summer_period")}
+											{:else if course.examPeriod.name == "ΣΕΠΤΕΜΒΡΙΟΣ"}
+												{$t("course.exam_autumn_period")}
+											{/if}
+											{course.gradeYear.name}
 										{:else}
 											{$t('progress.declared')}
 										{/if}
@@ -121,12 +137,19 @@
 								<div class="containerFlex">
 									<div class="titlesFlex">
 										<ion-label class="ion-text-wrap courseTitle"
-											>{childCourse.courseTitle}</ion-label
+											>{localize(childCourse, "courseTitle", get(locale))}</ion-label
 										>
 										{#if childCourse.examPeriod !== null}
 											<ion-label class="examPeriod">
 												{#if childCourse.examPeriod && childCourse.gradeYear}
-													{childCourse.examPeriod.name} {childCourse.gradeYear.name}
+													{#if childCourse.examPeriod.name == "ΦΕΒΡΟΥΑΡΙΟΣ"}
+														{$t("course.exam_winter_period")}
+													{:else if childCourse.examPeriod.name == "ΙΟΥΝΙΟΣ"}
+														{$t("course.exam_summer_period")}
+													{:else if childCourse.examPeriod.name == "ΣΕΠΤΕΜΒΡΙΟΣ"}
+														{$t("course.exam_autumn_period")}
+													{/if}
+													{childCourse.gradeYear.name}
 												{:else}
 													{$t('progress.declared')}
 												{/if}

src/lib/components/grades/grades.svelte

@@ -9,10 +9,9 @@
 
 
 	{#each $filteredSubjects as semester}
-
-	 {#if semester.courses.length > 0}
-        <Card semesterAverage={semester.average} semesterId={semester.semesterId} filteredSubjects={semester.courses} semesterName={semester.courses[0].semester.name} />
-    {/if}
+	 	{#if semester.courses.length > 0}
+        	<Card semesterAverage={semester.average} semesterId={semester.semesterId} filteredSubjects={semester.courses} semesterName={semester.courses[0].semester.name} />
+    	{/if}
 	{/each}
 
 

src/lib/components/grades/gradesPage.svelte

@@ -40,7 +40,8 @@
 
 	// Variables regarding grades and subjects
 	let searchQuery = '';
-	let subjects = 0;
+	let subjects: any;
+	subjects = 0
 	let passedSubjects = 0;
 	let coursesBySemester = {};
 	let subjectsJSON: number | null | undefined;
@@ -55,9 +56,10 @@
 	 */
 
 	// Search
-	function handleChange(event: { target: { value: string } }) {
-		searchQuery = event.target.value;
-	}
+		function handleChange(event: any) {
+			// Ionic Searchbar emits a CustomEvent with detail.value (string | null); normalize to a string
+			searchQuery = event?.detail?.value ?? '';
+		}
 
 	// Flipper toggle
 	function flip() {
@@ -68,8 +70,8 @@
 		coursesBySemester = await coursesPerSemester(subjectsJSON);
 		// @ts-ignore
 		passedSubjects = subjects
-			.filter((/** @type {{ grade: number; }} */ course) => course.grade * 10 >= 5)
-			.filter(/** @type {{parentCourse: string;}} */ (course) => course.parentCourse === null);
+			.filter((/** @type {{ grade: number; }} */ course: any) => course.grade * 10 >= 5)
+			.filter(/** @type {{parentCourse: string;}} */ (course: any) => course.parentCourse === null);
 
 		// @ts-ignore
 		subjects = subjects.length;
@@ -90,9 +92,9 @@
 			};
 		});
 
-		semesters.sort((a, b) => a.semesterId - b.semesterId);
+		semesters.sort((a, b) => (Number(a.semesterId)) - Number(b.semesterId));
 
-		courseBySemester.set(semesters);
+		courseBySemester.set((semesters as any));
 
 		return semesters;
 	}
@@ -113,21 +115,21 @@
 		if (searchQuery.length === 0) {
 			filteredSubjects.set(courses);
 		} else {
-			const subjects = courses.reduce((acc, curr) => acc.concat(curr.courses), []);
+			const subjects = courses.reduce((acc, curr: any) => acc.concat(curr.courses), []);
 			const fuse = new Fuse(subjects, fuseOptions);
 			const searchResults = fuse.search(searchQuery);
 
 			const filtered = courses.map((semester) => {
 				return {
-					...semester,
+					...(semester as any),
 					courses: searchResults
 						.filter((result) =>
-							semester.courses.some((course) => course.course === result.item.course)
+							(semester as any).courses.some((course: any) => course.course === (result.item as any).course)
 						)
 						.map((result) => result.item)
 				};
 			});
-			filteredSubjects.set(filtered);
+			filteredSubjects.set(filtered as any);
 		}
 	}
 </script>