From 6d6460ac3eb0fcf4960f9e4d6629e068263513c7 Mon Sep 17 00:00:00 2001 From: Huffle Date: Wed, 14 May 2025 18:30:13 +0200 Subject: [PATCH] Add local storage --- .../allowance-planner-v2/package-lock.json | 43 +++++++++++++++++++ frontend/allowance-planner-v2/package.json | 3 +- .../src/app/app-routing.module.ts | 2 +- .../src/app/app.component.ts | 13 +++++- .../src/app/app.module.ts | 12 +++++- .../app/pages/user-login/user-login.page.html | 5 ++- .../app/pages/user-login/user-login.page.scss | 21 ++++++++- .../app/pages/user-login/user-login.page.ts | 12 +++++- .../src/app/services/storage.service.ts | 28 ++++++++++++ 9 files changed, 131 insertions(+), 8 deletions(-) create mode 100644 frontend/allowance-planner-v2/src/app/services/storage.service.ts diff --git a/frontend/allowance-planner-v2/package-lock.json b/frontend/allowance-planner-v2/package-lock.json index f2970d9..81b602a 100644 --- a/frontend/allowance-planner-v2/package-lock.json +++ b/frontend/allowance-planner-v2/package-lock.json @@ -25,6 +25,7 @@ "@capacitor/status-bar": "7.0.1", "@ionic/angular": "^8.0.0", "@ionic/pwa-elements": "^3.3.0", + "@ionic/storage-angular": "^4.0.0", "ionicons": "^7.0.0", "rxjs": "~7.8.0", "tslib": "^2.3.0", @@ -3779,6 +3780,27 @@ "npm": ">=8.0.0" } }, + "node_modules/@ionic/storage": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/@ionic/storage/-/storage-4.0.0.tgz", + "integrity": "sha512-3N21P19Xk6cICLnSXZ3ilRqbSXAGSFeIF3HNqz+1kARcm0UFT/vwmZreaXtFyq437vvEWOfJ2enlj3JHLKS0FA==", + "dependencies": { + "localforage": "^1.9.0" + } + }, + "node_modules/@ionic/storage-angular": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/@ionic/storage-angular/-/storage-angular-4.0.0.tgz", + "integrity": "sha512-FeSmCMCm1bMRfu5TFSqLtjdfEo/dLLUhLIrPmbhSYomVZdV/dNn4mBZv9SabyxSqn4bF31hw40y+4buhG+durQ==", + "dependencies": { + "@ionic/storage": "^4.0.0", + "tslib": "^2.3.0" + }, + "peerDependencies": { + "@angular/core": "*", + "rxjs": "*" + } + }, "node_modules/@ionic/utils-array": { "version": "2.1.6", "resolved": "https://registry.npmjs.org/@ionic/utils-array/-/utils-array-2.1.6.tgz", @@ -10250,6 +10272,11 @@ "node": ">=0.10.0" } }, + "node_modules/immediate": { + "version": "3.0.6", + "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz", + "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==" + }, "node_modules/immutable": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.2.tgz", @@ -11791,6 +11818,14 @@ } } }, + "node_modules/lie": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/lie/-/lie-3.1.1.tgz", + "integrity": "sha512-RiNhHysUjhrDQntfYSfY4MU24coXXdEOgw9WGcKHNeEwffDYbF//u87M1EWaMGzuFoSbqW0C9C6lEEhDOAswfw==", + "dependencies": { + "immediate": "~3.0.5" + } + }, "node_modules/lines-and-columns": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", @@ -11893,6 +11928,14 @@ "node": ">= 12.13.0" } }, + "node_modules/localforage": { + "version": "1.10.0", + "resolved": "https://registry.npmjs.org/localforage/-/localforage-1.10.0.tgz", + "integrity": "sha512-14/H1aX7hzBBmmh7sGPd+AOMkkIrHM3Z1PAyGgZigA1H1p5O5ANnMyWzvpAETtG68/dC4pC0ncy3+PPGzXZHPg==", + "dependencies": { + "lie": "3.1.1" + } + }, "node_modules/locate-path": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz", diff --git a/frontend/allowance-planner-v2/package.json b/frontend/allowance-planner-v2/package.json index 2de0c80..19de028 100644 --- a/frontend/allowance-planner-v2/package.json +++ b/frontend/allowance-planner-v2/package.json @@ -30,6 +30,7 @@ "@capacitor/status-bar": "7.0.1", "@ionic/angular": "^8.0.0", "@ionic/pwa-elements": "^3.3.0", + "@ionic/storage-angular": "^4.0.0", "ionicons": "^7.0.0", "rxjs": "~7.8.0", "tslib": "^2.3.0", @@ -64,4 +65,4 @@ "typescript": "~5.6.3" }, "description": "An Ionic project" -} \ No newline at end of file +} diff --git a/frontend/allowance-planner-v2/src/app/app-routing.module.ts b/frontend/allowance-planner-v2/src/app/app-routing.module.ts index 1cc1595..ffe16e8 100644 --- a/frontend/allowance-planner-v2/src/app/app-routing.module.ts +++ b/frontend/allowance-planner-v2/src/app/app-routing.module.ts @@ -8,7 +8,7 @@ const routes: Routes = [ loadChildren: () => import('./pages/user-login/user-login.module').then( m => m.UserLoginPageModule) }, { - path: 'allowance-app', + path: '', loadChildren: () => import('./pages/tabs/tabs.module').then(m => m.TabsPageModule) }, ]; diff --git a/frontend/allowance-planner-v2/src/app/app.component.ts b/frontend/allowance-planner-v2/src/app/app.component.ts index da2f9aa..ea48f32 100644 --- a/frontend/allowance-planner-v2/src/app/app.component.ts +++ b/frontend/allowance-planner-v2/src/app/app.component.ts @@ -1,4 +1,6 @@ import { Component } from '@angular/core'; +import { StorageService } from './services/storage.service'; +import { Router } from '@angular/router'; @Component({ selector: 'app-root', @@ -7,5 +9,14 @@ import { Component } from '@angular/core'; standalone: false, }) export class AppComponent { - constructor() {} + constructor(private storageService: StorageService, private router: Router) { + this.storageService.init().then(() => { + this.storageService.getCurrentUserId().then((userId) => { + if (userId !== undefined && userId !== null) { + console.log('userId: ', userId); + this.router.navigate(['/tabs'], userId); + } + }); + }) + } } diff --git a/frontend/allowance-planner-v2/src/app/app.module.ts b/frontend/allowance-planner-v2/src/app/app.module.ts index 4255dd8..a6c06b7 100644 --- a/frontend/allowance-planner-v2/src/app/app.module.ts +++ b/frontend/allowance-planner-v2/src/app/app.module.ts @@ -3,13 +3,23 @@ import { BrowserModule } from '@angular/platform-browser'; import { RouteReuseStrategy } from '@angular/router'; import { IonicModule, IonicRouteStrategy } from '@ionic/angular'; +import { Drivers, Storage } from '@ionic/storage'; +import { IonicStorageModule } from '@ionic/storage-angular'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; @NgModule({ declarations: [AppComponent], - imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule], + imports: [ + BrowserModule, + IonicModule.forRoot(), + AppRoutingModule, + IonicStorageModule.forRoot({ + name: '__mydb', + driverOrder: [Drivers.IndexedDB, Drivers.LocalStorage] + }) + ], providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }], bootstrap: [AppComponent], }) diff --git a/frontend/allowance-planner-v2/src/app/pages/user-login/user-login.page.html b/frontend/allowance-planner-v2/src/app/pages/user-login/user-login.page.html index c97e99a..3844691 100644 --- a/frontend/allowance-planner-v2/src/app/pages/user-login/user-login.page.html +++ b/frontend/allowance-planner-v2/src/app/pages/user-login/user-login.page.html @@ -1,6 +1,9 @@
Who are you?
- +
+
+
{{ user.name }}
+
diff --git a/frontend/allowance-planner-v2/src/app/pages/user-login/user-login.page.scss b/frontend/allowance-planner-v2/src/app/pages/user-login/user-login.page.scss index 42765e5..9c28a41 100644 --- a/frontend/allowance-planner-v2/src/app/pages/user-login/user-login.page.scss +++ b/frontend/allowance-planner-v2/src/app/pages/user-login/user-login.page.scss @@ -1,5 +1,6 @@ .title, -.selection { +.selection, +.profile { display: flex; justify-content: center; } @@ -8,4 +9,22 @@ margin-top: 40%; color: var(--ion-color-primary); font-size: 40px; +} + +.selection { + gap: 10%; + margin-top: 20%; + color: var(--ion-color-primary); +} + +.profile { + flex-direction: column; + align-items: center; +} + +.picture { + width: 130px; + height: 130px; + border: 1px solid var(--ion-color-primary); + border-radius: 10px; } \ No newline at end of file diff --git a/frontend/allowance-planner-v2/src/app/pages/user-login/user-login.page.ts b/frontend/allowance-planner-v2/src/app/pages/user-login/user-login.page.ts index a1f2c2d..6fb3b56 100644 --- a/frontend/allowance-planner-v2/src/app/pages/user-login/user-login.page.ts +++ b/frontend/allowance-planner-v2/src/app/pages/user-login/user-login.page.ts @@ -1,4 +1,6 @@ import { Component, OnInit } from '@angular/core'; +import { User } from 'src/app/models/user'; +import { StorageService } from 'src/app/services/storage.service'; import { UserService } from 'src/app/services/user.service'; @Component({ @@ -8,11 +10,17 @@ import { UserService } from 'src/app/services/user.service'; standalone: false, }) export class UserLoginPage implements OnInit { + public users: Array = []; - constructor(private userService: UserService) { } + constructor(private userService: UserService, private storageService: StorageService) { } ngOnInit() { - this.userService.getUserList().subscribe(users => console.log('Users: ', users)); + this.userService.getUserList().subscribe(users => { + this.users = users + }); } + selectUser(id: number) { + this.storageService.set('user-id', id); + } } diff --git a/frontend/allowance-planner-v2/src/app/services/storage.service.ts b/frontend/allowance-planner-v2/src/app/services/storage.service.ts new file mode 100644 index 0000000..3cb6436 --- /dev/null +++ b/frontend/allowance-planner-v2/src/app/services/storage.service.ts @@ -0,0 +1,28 @@ +import { Injectable } from '@angular/core'; + +import { Storage } from '@ionic/storage-angular'; + +@Injectable({ + providedIn: 'root' +}) +export class StorageService { + private _storage: Storage | null = null; + + constructor(private storage: Storage) {} + + async init() { + // If using, define drivers here: await this.storage.defineDriver(/*...*/); + const storage = await this.storage.create(); + this._storage = storage; + } + + // Create and expose methods that users of this service can + // call, for example: + public set(key: string, value: any) { + this._storage?.set(key, value); + } + + public async getCurrentUserId() { + return await this._storage?.get('user-id'); + } +} \ No newline at end of file