Skip to content

Commit

Permalink
Merge pull request #79 from acmauth/wallet
Browse files Browse the repository at this point in the history
Wallet
  • Loading branch information
itsMyrto authored Feb 29, 2024
2 parents 31cb457 + 86b4e1d commit 881a53d
Show file tree
Hide file tree
Showing 5 changed files with 141 additions and 4 deletions.
5 changes: 4 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@
"@capacitor/toast": "^5.0.7",
"@capgo/capacitor-navigation-bar": "^6.0.12",
"@ionic/core": "^7.2.1",
"@ionic/pwa-elements": "^3.2.2",
"@sveltejs/adapter-auto": "^2.1.0",
"axios": "^1.5.1",
"axios-cookiejar-support": "^4.0.7",
Expand All @@ -54,13 +55,15 @@
"flowbite-svelte": "^0.44.19",
"fuse.js": "^7.0.0",
"ionic-svelte": "^0.5.82",
"ionicons": "^7.2.2",
"isomorphic-fetch": "^3.0.0",
"js-base64": "^3.7.5",
"ionicons": "^7.2.2",
"js-circle-progress": "^1.0.0-beta.0",
"jsqr": "^1.4.0",
"leaflet": "^1.9.4",
"node-fetch": "^3.3.2",
"node-fetch-cookies": "^2.1.1",
"qrcode": "^1.5.3",
"redaxios": "^0.5.1",
"svelte-local-storage-store": "^0.6.4",
"svelte-persisted-store": "^0.7.0",
Expand Down
60 changes: 60 additions & 0 deletions src/lib/components/wallet/QRGenerator.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
<script lang='ts'>
import { onMount } from 'svelte';
import QRCode from 'qrcode'
import type { qrItem } from './qrItem';
import { alertController } from 'ionic-svelte';
import { qrStore } from './qrStore';
import { goto } from '$app/navigation';
import { reload } from 'ionicons/icons';
export let qr1: qrItem;
onMount(() => {
const qrCodeElement = document.getElementById(qr1.data);
QRCode.toCanvas(qrCodeElement, qr1.data, { width: 200, height: 200 });
});
const showAlert = async (options) => {
const alert = await alertController.create(options);
await alert.present();
};
function deleteQR() {
const options = {
header: 'Αφαίρεση QR;',
message: 'Θέλεις να αφαιρεθεί το QR από το πορτοφόλι σου;',
buttons: [{
text: 'ΟΧΙ',
role: 'cancel',
handler: () => {
return;
}
},
{
text: 'ΝΑΙ',
role: 'confirm',
handler: () => {
qrStore.update((store) => store.filter((item) => item.data !== qr1.data));
}
}]
};
showAlert(options);
}
</script>


<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<ion-div on:click={deleteQR}>
<canvas id="{qr1.data}"></canvas>
<ion-label>{qr1.title}</ion-label>
</ion-div>

<style>
ion-div {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
</style>
4 changes: 4 additions & 0 deletions src/lib/components/wallet/qrItem.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
export interface qrItem {
title: string,
data: string
}
4 changes: 4 additions & 0 deletions src/lib/components/wallet/qrStore.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
import { persisted } from 'svelte-persisted-store'
import type { qrItem } from './qrItem';

export const qrStore = persisted('qrStore', new Array<qrItem>());
72 changes: 69 additions & 3 deletions src/routes/pages/homepage/+page.svelte
Original file line number Diff line number Diff line change
@@ -1,19 +1,27 @@
<script>
<script lang='ts'>
import AppCard from '$shared/AppCard.svelte';
import AppletsSlides from './appletsSlides.svelte';
import { averages } from '$lib/functions/gradeAverages/averages';
import { neoUniversisGet } from '$lib/dataService';
import man from '$lib/assets/man.png';
import { wallet } from 'ionicons/icons';
import woman from '$lib/assets/woman.png';
import RecentGrades from '$components/recentGrades/recentGrades.svelte';
import HomepageSkeleton from '$lib/components/homepage/homepageSkeleton.svelte';
import AnnouncementBanner from '$shared/announcementBanner.svelte';
import { getVocativeCase } from '$lib/globalFunctions/getVocativeCase';
import QRGenerator from '$lib/components/wallet/QRGenerator.svelte';
import { qrStore } from '$lib/components/wallet/qrStore';
import type { qrItem } from '$lib/components/wallet/qrItem';
import { onMount } from 'svelte';
let givenName = '';
let gender = '';
let passedSubjects = 0;
let subjects = 0;
let average = 0;
let modalOpen = false;
async function getInfo() {
let personalData = await neoUniversisGet('Students/me/');
Expand Down Expand Up @@ -43,6 +51,15 @@
}
});
}
function addQR() {
let qrCode = document.querySelector('ion-input');
if (!qrCode || qrCode.value === '') return;
const newQR: qrItem = { data: String(qrCode.value), title: 'Πάσο' };
$qrStore = $qrStore.concat(newQR);
}
</script>

<ion-tab tab="homepage">
Expand Down Expand Up @@ -73,9 +90,52 @@
{/if}
<div>
<h5 class="h5">Γεια σου</h5>
<h5 class="h5"><b>{givenName}!</b></h5>
<h5 class="h5"><b>{getVocativeCase(givenName)}!</b></h5>
</div>
</div>

<div class="student-id" on:click={() => {modalOpen = true;}}>
<AppCard margin={false} shadow={true} >
<div style="background-color: #f3faff">
<ion-icon class="id-icon" icon={wallet} />
</div>
</AppCard>
</div>

<ion-modal
is-open={modalOpen}
initial-breakpoint={$qrStore.length > 0? 0.3 : 0.2}
on:ionModalDidDismiss={() => {modalOpen = false;}}
breakpoints={[0, 0.1, 0.2, 0.3, 0.5]}>
<ion-content>
<ion-grid>
{#if $qrStore.length == 0}
<ion-col style="display: flex; justify-content: center; margin: 30px;">
<ion-input placeholder="Κωδικός QR πάσου" type="number"/>
<ion-button style="text-transform: none; --box-shadow: var(--shadow-sort-md);" color="secondary"
on:ionFocus={addQR}>Προσθήκη</ion-button>
</ion-col>

<!-- Uncomment if adding gym pass/id is implemented -->

<!-- {:else if $qrStore.length == 1}
<ion-col>
<QRGenerator qr1={$qrStore[0]}/>
</ion-col>
<ion-col style="display: flex; justify-content: center;">
<ion-button style="text-transform: none; --box-shadow: var(--shadow-sort-md);" color="secondary">QR</ion-button>
</ion-col> -->
{:else}
{#each $qrStore as item}
<ion-col>
<QRGenerator qr1={item}/>
</ion-col>
{/each}
{/if}
</ion-grid>
</ion-content>
</ion-modal>

</div>
<div class="card-container">
<AppCard colour="primary" margin={false} href="/pages/grades">
Expand Down Expand Up @@ -216,4 +276,10 @@
margin-bottom: 0;
font-size: 0.8rem;
}
</style>
ion-grid {
display: flex;
justify-content: center;
align-items: center;
}
</style>

0 comments on commit 881a53d

Please sign in to comment.