Add local storage

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",

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",

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)
   },
 ];

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);
+        }
+      });
+    })
+  }
 }

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],
 })

frontend/allowance-planner-v2/src/app/pages/user-login/user-login.page.html

@@ -1,6 +1,9 @@
 <ion-content>
   <div class="title">Who are you?</div>
   <div class="selection">
-    
+    <div class="profile" *ngFor="let user of users">
+      <div class="picture" (click)="selectUser(user.id)"></div>
+      <div class="name">{{ user.name }}</div>
+    </div>
   </div>
 </ion-content>

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;
 }
@@ -9,3 +10,21 @@
     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;
+}

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<User> = [];
 
-  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);
+  }
 }

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');
+    }
+}