Merge branch 'dev' into AboutFAQ

acmauth · Feb 28, 2024 · 40fa4c7 · 40fa4c7
2 parents db0e253 + 4f5d50c
commit 40fa4c7
Show file tree

Hide file tree

Showing 23 changed files with 537 additions and 262 deletions.
diff --git a/src/lib/assets/Logo_full.png b/src/lib/assets/Logo_full.png
diff --git a/src/lib/assets/Logo_full_white.png b/src/lib/assets/Logo_full_white.png
diff --git a/src/lib/assets/Logo_head.png b/src/lib/assets/Logo_head.png
diff --git a/src/lib/components/degreeCalculator/card.svelte b/src/lib/components/degreeCalculator/card.svelte
@@ -12,7 +12,7 @@
     export let flip;
 
 
-    let unpassed_courses: { title: string; id:string; semester: number; grade: number; input_grade: string; ects: number;}[] = [];
+    let unpassed_courses: { title: string; id: string; semester_id: number, semester_name: string, grade: number; input_grade: string; ects: number;}[] = [];
     
     let degree_grade = { ects: {value:0, stringed:''}, simple: {value: 0, stringed: ''} };
 
@@ -25,7 +25,7 @@
         not_passed_all_courses = await main(unpassed_courses, sums, degree_grade); 
     }
 
-    /** @param {{ target: { value: string; }; }} element */
+    /** @param { { target: { value: string; }; } } element */
     function clickInput(element: { target: { value: string; }; }){
         element.target.value = '';
         inputUpdate(unpassed_courses, sums, degree_grade);
@@ -54,7 +54,7 @@
             {#each unpassed_courses as course}
             <div class="courses-box">
 
-                <Course course_title={course.title} course_semester={course.semester} />
+                <Course course_title={course.title} course_semester_id={course.semester_id} course_semester_name={course.semester_name}/>
 
                 <div class="input-box"> 
                     <input type="text" inputmode="decimal" 
@@ -115,6 +115,7 @@
     .input-box {
         display: flex;
         align-items: center;
+        justify-content: center;
         flex: 0.75; /* Takes 1/8 of the available space */
     }
 

diff --git a/src/lib/components/degreeCalculator/course.svelte b/src/lib/components/degreeCalculator/course.svelte
@@ -1,16 +1,23 @@
 <script>
-    /** @type {string} */
+    /** @type { string } */
     export let course_title;
-    /** @type {number} */
-    export let course_semester;
+    /** @type { number } */
+    export let course_semester_id;
+    /** @type { any } */
+    export let course_semester_name;
 </script>
 
 
 <div class="course-box">
 
     <div> <ion-text class="course-name">{course_title}</ion-text> </div>
 
-    <div> <p class="course-semester">{course_semester}ο Εξάμηνο</p> </div>
+    {#if course_semester_id <= 24}
+    <div> <p class="course-semester">{course_semester_id}ο Εξάμηνο</p> </div>
+    {:else}
+    <div> <p class="course-semester">{course_semester_name}</p> </div>
+    {/if}
+
 
 </div>
 

diff --git a/src/lib/components/degreeCalculator/coursesSkeleton.svelte b/src/lib/components/degreeCalculator/coursesSkeleton.svelte
@@ -4,10 +4,10 @@
     let degree_grade = { ects: {value:0, stringed:'0.00'}, simple: {value: 0, stringed: '0.00'} };
 </script>
 
-<Course course_title={"ΜΑΘΗΜΑ ΧΧΧΧΧΧ ΧΧΧΧΧΧΧΧ ΧΧΧΧΧΧ"} course_semester={-1} />
-<Course course_title={"ΜΑΘΗΜΑ ΧΧΧΧΧΧ ΧΧΧΧΧΧΧΧ ΧΧΧΧΧΧ"} course_semester={-1} />
-<Course course_title={"ΜΑΘΗΜΑ ΧΧΧΧΧΧ ΧΧΧΧΧΧΧΧ ΧΧΧΧΧΧ"} course_semester={-1} />
-<Course course_title={"ΜΑΘΗΜΑ ΧΧΧΧΧΧ ΧΧΧΧΧΧΧΧ ΧΧΧΧΧΧ"} course_semester={-1} />
+<Course course_title={"ΜΑΘΗΜΑ ΧΧΧΧΧΧ ΧΧΧΧΧΧΧΧ ΧΧΧΧΧΧ"} course_semester_id={-1} course_semester_name={""}/>
+<Course course_title={"ΜΑΘΗΜΑ ΧΧΧΧΧΧ ΧΧΧΧΧΧΧΧ ΧΧΧΧΧΧ"} course_semester_id={-1} course_semester_name={""}/>
+<Course course_title={"ΜΑΘΗΜΑ ΧΧΧΧΧΧ ΧΧΧΧΧΧΧΧ ΧΧΧΧΧΧ"} course_semester_id={-1} course_semester_name={""}/>
+<Course course_title={"ΜΑΘΗΜΑ ΧΧΧΧΧΧ ΧΧΧΧΧΧΧΧ ΧΧΧΧΧΧ"} course_semester_id={-1} course_semester_name={""}/>
 
 
 <AvGrades degree_grade={degree_grade} />
diff --git a/src/lib/components/homepage/homepageSkeleton.svelte b/src/lib/components/homepage/homepageSkeleton.svelte
@@ -0,0 +1,94 @@
+<script lang="ts">
+</script>
+
+<ion-item style="margin:1.5rem; height: 5rem" lines="none">
+	<ion-thumbnail slot="start">
+		<ion-skeleton-text animated />
+	</ion-thumbnail>
+	<ion-label>
+		<h5>
+			<ion-skeleton-text animated style="width: 50%;" />
+		</h5>
+		<h5>
+			<ion-skeleton-text animated style="width: 70%;" />
+		</h5>
+	</ion-label>
+	<!-- <ion-thumbnail slot="end">
+		<ion-skeleton-text animated />
+	</ion-thumbnail> -->
+</ion-item>
+<div style="margin:1rem; display: grid; grid-template-columns: 1.5fr 1fr; height:6rem">
+	<ion-card>
+		<ion-item lines="none">
+			<ion-label>
+				<h2>
+					<ion-skeleton-text animated style="width: 30%" />
+				</h2>
+				<p>
+					<ion-skeleton-text animated style="width: 80%" />
+				</p>
+			</ion-label>
+		</ion-item>
+	</ion-card>
+
+	<ion-card>
+		<ion-item lines="none">
+			<ion-label>
+				<h2>
+					<ion-skeleton-text animated style="width: 30%" />
+				</h2>
+				<p>
+					<ion-skeleton-text animated style="width: 80%" />
+				</p>
+			</ion-label>
+		</ion-item>
+	</ion-card>
+</div>
+
+<ion-item style="margin:1rem" lines="none">
+	<ion-label>
+		<p>
+			<ion-skeleton-text animated style="width: 30%;" />
+		</p>
+	</ion-label>
+</ion-item>
+
+<div style="margin:1rem; display: grid; grid-template-columns: 1fr 1fr 1fr; height:6rem">
+	{#each { length: 3 } as i}
+		<ion-card>
+			<ion-item lines="none">
+				<ion-label>
+					<h2>
+						<ion-skeleton-text animated style="width: 30%" />
+					</h2>
+					<p>
+						<ion-skeleton-text animated style="width: 80%" />
+					</p>
+				</ion-label>
+			</ion-item>
+		</ion-card>
+	{/each}
+</div>
+
+<ion-item style="margin:1rem" lines="none">
+	<ion-label>
+		<p>
+			<ion-skeleton-text animated style="width: 30%;" />
+		</p>
+	</ion-label>
+</ion-item>
+
+{#each { length: 3 } as i}
+	<ion-card style="margin:1rem">
+		<ion-item lines="none">
+			<ion-label>
+				<h3 style="display: flex; flex-direction: row">
+					<ion-skeleton-text animated style="width: 60%" />
+				</h3>
+				<p>
+					<ion-skeleton-text animated style="width: 40%" />
+				</p>
+			</ion-label>
+		</ion-item>
+	</ion-card>
+{/each}
diff --git a/src/lib/components/homepage/testHomepageComponent.svelte b/src/lib/components/homepage/testHomepageComponent.svelte
diff --git a/src/lib/components/loginService/login.svelte b/src/lib/components/loginService/login.svelte
@@ -1,12 +1,9 @@
 <script lang='ts'>
-    import { userCreds, userTokens } from "$stores/credentials.store";
     import { goto } from '$app/navigation';
-    import { elearningFetchNewToken } from "$lib/elearningAuthentication/elearningDataService";
-    import { IonButton } from "@ionic/core/components/ion-button";
     import { getUniversisToken, getElearningToken} from "./helpers"
-    import { invalidateAuth } from "$lib/authentication/authValidator";
     import Vector from "$lib/components/loginService/Vector.svg"
     import Vector1 from "$lib/components/loginService/Vector(1).svg"
+    import Logo from "$lib/assets/Logo_head.png";
     import { onMount } from 'svelte';
 
 
@@ -69,35 +66,49 @@
 
 </script>
 
-<div style="position: relative; width: 100%; height: 55%; ">
-    <img src={Vector} alt="Vector" style="position: absolute; width: 100%; height:80%">
-    <img src={Vector1} alt="Overlay Icon" style="width: 100%; height:95%">
-
+<div style="position: relative; width: 100%; height: 40%; ">
+    <img src={Vector} alt="Vector" style="position: absolute; width: 110%; height:70%">
+    <img src={Vector1} alt="Overlay Icon" style="width: 110%; height:85%">
 </div>
 
-<div style="display: flex; flex-direction: column; align-items: center; justify-content: top; height: 80%; padding-top: 2px; padding-right:20px; padding-left:20px;">
-    <ion-input id='usernameInput' class="custom" placeholder="Username" fill="outline" style="margin-bottom: 10px;"></ion-input> 
-    <ion-input id='passwordInput' class="custom" type="password" placeholder="Password" fill="outline" style="margin-bottom: 10px;" ></ion-input>
+<div style="display: flex; flex-direction: column; align-items: center; margin-top: -40px; justify-content: top; padding-right:20px; padding-left:20px;">
+    <img src={Logo} alt="Aristomate logo" style="width: 30%; margin-bottom: 25px;">
+    <ion-input id='usernameInput' class="custom" placeholder="Όνομα χρήστη" fill="outline" style="margin-bottom: 10px;"></ion-input> 
+    <ion-input id='passwordInput' class="custom" type="password" placeholder="Κωδικός πρόσβασης" fill="outline" style="margin-bottom: 10px;" ></ion-input>
     {#if invalidData}
-        <ion-label class="error"> Invalid username or password</ion-label>
+        <ion-label class="error">Λανθασμένα στοιχεία σύνδεσης</ion-label>
     {/if}
     {#if isVisible}
         <div class="loading-panel">
             <ion-spinner class="loginSpinner"></ion-spinner>
-            <p class="loginP">Loading...</p>
+            <p class="loginP">Περιμένετε...</p>
         </div>
     {/if}
 
-    <ion-button class="custom" on:click={submit} style="margin-bottom:20px; margin-top:20px;">Log In</ion-button>
-    <ion-checkbox label-placement="start" style="margin-bottom:15px" class="custom" checked="true"> 
-        <ion-label class="custom"> Remember me</ion-label>
+    <ion-button class="custom" on:click={submit} style="margin-bottom:20px; margin-top:20px;">ΕΙΣΟΔΟΣ</ion-button>
+    <ion-checkbox label-placement="start" style="margin-top: 5px; margin-bottom:15px" class="custom" checked="true"> 
+        <ion-label class="custom" style="font-size:small;">Διατήρηση σύνδεσης</ion-label>
     </ion-checkbox>
 </div>
+
+<div class="footer">
+    <ion-title size="small" color="primary" style="padding-bottom: 10px; font-size: small;">Powered by <strong>ACM AUTH</strong></ion-title>
+</div>
 
 <style>
+    .footer {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+        position: absolute;
+        top: 95%;
+        width: 100%;
+    }
+
     ion-input.custom {
       --background:#F9FAFB;
-      --color: #024f82;
+      --color: var(--ion-color-primary);
       --placeholder-color: #98BDD6;
       --placeholder-opacity: 0.8;
       --border-color: #98BDD6;
@@ -107,11 +118,12 @@
     }
 
     ion-button.custom {
-        --background: #55BBFF;
-        --color: #fff;
-        --border-radius: 2.5rem; 
-        width: 80%; 
-        height: 3.5rem; 
+        --background: var(--ion-color-primary);
+        --color: var(--ion-color-light);
+        --border-radius: 1rem; 
+        --box-shadow: var(--shadow-sort-md);
+        width: 60%; 
+        height: 3rem; 
     }
 
     ion-checkbox.custom {
@@ -146,14 +158,14 @@
         z-index: 1000;
     }
 
-  ion-spinner.loginSpinner {
-    --color: white;
-    margin-right: 10px; /* Adjust the margin as needed */
-  }
+    ion-spinner.loginSpinner {
+        --color: white;
+        margin-right: 10px; /* Adjust the margin as needed */
+    }
 
-  p.loginP {
-    color: white;
-    margin: 0; /* Remove default margin */
-  }
+    p.loginP {
+        color: white;
+        margin: 0; /* Remove default margin */
+    }
 
 </style>