Added swiping days in schedule

acmauth · Mar 8, 2024 · bae55b5 · bae55b5
1 parent d7e6c97
commit bae55b5
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 18 deletions.
diff --git a/package.json b/package.json
@@ -65,6 +65,7 @@
 		"node-fetch-cookies": "^2.1.1",
 		"qrcode": "^1.5.3",
 		"redaxios": "^0.5.1",
+		"svelte-gestures": "^4.0.0",
 		"svelte-local-storage-store": "^0.6.4",
 		"svelte-maplibre": "^0.8.1",
 		"svelte-persisted-store": "^0.7.0",

diff --git a/src/lib/components/loginService/login.svelte b/src/lib/components/loginService/login.svelte
@@ -64,20 +64,21 @@
         <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 class="footer">
+            <ion-title size="small" color="primary" style="padding-bottom: 15px; font-size: small;">Powered by <strong>ACM AUTH</strong></ion-title>
+        </div>
     </div>
-</ion-content>   
 
-<ion-footer>
-    <ion-title size="small" color="primary" style="padding-bottom: 15px; font-size: small;">Powered by <strong>ACM AUTH</strong></ion-title>
-</ion-footer>
+</ion-content>   
 
 <style>
-    ion-footer {
+    .footer {
         display: flex;
         justify-content: center;
         align-items: center;
         text-align: center;
-        box-shadow: none;
+        padding-top: 35px;
     }
 
     ion-input.custom {

diff --git a/src/routes/pages/schedule/+page.svelte b/src/routes/pages/schedule/+page.svelte
@@ -6,6 +6,7 @@
     import { universisGet } from '$lib/dataService';
     import { getDayByIndex, getDayIndex, weekdays } from "$lib/components/schedule/day/days";
     import { classStore } from '$components/schedule/class/classStore';
+    import { swipe } from 'svelte-gestures';
 
     // Clear class store
     // $classStore = [];
@@ -27,6 +28,14 @@
 
     // classes = (await universisGet('students/me/teachingEvents?$expand=location,performer&$filter=startDate ne null&$top=-1&$orderby=startDate')).value;
 
+    function handler(event) {
+        let direction = event.detail.direction;
+        if (direction == "right")
+            activeDay = getDayByIndex(getDayIndex(activeDay) + 1).toLowerCase();
+        else if (direction == "left")
+            activeDay = getDayByIndex(getDayIndex(activeDay) - 1).toLowerCase();
+    }
+
 </script>
 
 <ion-header collapse="condense" mode="ios">
@@ -69,18 +78,20 @@
             {/each}
     </div>
 
-    <ion-grid style="padding: 0%">
-        {#each currentClasses as courseClass}
-            <ClassCard classItem={courseClass} />
-        {/each}
-    </ion-grid>
-
-    <ion-row class="custom-center-label">
-        {#if currentClasses.length === 0}
-            <ion-icon icon={bookOutline} size="large" style="padding: 15px"></ion-icon>
-            <ion-label>Δεν υπάρχουν προγραμματισμένα μαθήματα αυτή τη μέρα.</ion-label>
-        {/if}
-    </ion-row>
+    <div use:swipe={{ timeframe: 300, minSwipeDistance: 100, touchAction: 'pan-y' }} on:swipe={handler} style="width:500px;height:500px;border:1px;">
+        <ion-grid style="padding: 0%">
+            {#each currentClasses as courseClass}
+                <ClassCard classItem={courseClass} />
+            {/each}
+        </ion-grid>
+
+        <ion-row class="custom-center-label">
+            {#if currentClasses.length === 0}
+                <ion-icon icon={bookOutline} size="large" style="padding: 15px"></ion-icon>
+                <ion-label>Δεν υπάρχουν προγραμματισμένα μαθήματα αυτή τη μέρα.</ion-label>
+            {/if}
+        </ion-row>
+    </div>
 </ion-content>