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/allowance/allowance.page.html

@@ -1,15 +0,0 @@
-<ion-header [translucent]="true">
-  <ion-toolbar>
-    <ion-title>
-      Allowance
-    </ion-title>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">Allowance</ion-title>
-    </ion-toolbar>
-  </ion-header>
-</ion-content>

frontend/allowance-planner-v2/src/app/app-routing.module.ts

@@ -1,15 +1,21 @@
+import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
 
 const routes: Routes = [
   {
     path: '',
-    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
-  }
+    loadChildren: () => import('./pages/user-login/user-login.module').then( m => m.UserLoginPageModule)
+  },
+  {
+    path: '',
+    loadChildren: () => import('./pages/tabs/tabs.module').then(m => m.TabsPageModule)
+  },
 ];
 @NgModule({
   imports: [
-    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
+    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }),
+    CommonModule
   ],
   exports: [RouterModule]
 })

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/history/history.page.html

@@ -1,15 +0,0 @@
-<ion-header [translucent]="true">
-  <ion-toolbar>
-    <ion-title>
-      History
-    </ion-title>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">History</ion-title>
-    </ion-toolbar>
-  </ion-header>
-</ion-content>

frontend/allowance-planner-v2/src/app/models/user.ts

@@ -0,0 +1,5 @@
+export interface User {
+    id: number;
+    name: string;
+    allowance?: number
+}

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

@@ -0,0 +1,10 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-title>
+      Allowance
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+</ion-content>

frontend/allowance-planner-v2/src/app/pages/allowance/allowance.page.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { UserService } from 'src/app/services/user.service';
 
 @Component({
   selector: 'app-allowance',
@@ -8,6 +9,6 @@ import { Component } from '@angular/core';
 })
 export class AllowancePage {
 
-  constructor() {}
+  constructor(private userService: UserService) {}
 
 }

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

@@ -0,0 +1,11 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-title>
+      History
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+
+</ion-content>

frontend/allowance-planner-v2/src/app/pages/tabs/tabs-routing.module.ts

@@ -34,6 +34,6 @@ const routes: Routes = [
 ];
 
 @NgModule({
-  imports: [RouterModule.forChild(routes)],
+  imports: [RouterModule.forChild(routes),],
 })
 export class TabsPageRoutingModule {}

frontend/allowance-planner-v2/src/app/pages/tabs/tabs.module.ts

@@ -7,6 +7,8 @@ import {MatIconModule} from '@angular/material/icon';
 import { TabsPageRoutingModule } from './tabs-routing.module';
 
 import { TabsPage } from './tabs.page';
+import { provideHttpClient } from '@angular/common/http';
+import { UserService } from 'src/app/services/user.service';
 
 @NgModule({
   imports: [
@@ -16,6 +18,10 @@ import { TabsPage } from './tabs.page';
     TabsPageRoutingModule,
     MatIconModule,
   ],
-  declarations: [TabsPage]
+  declarations: [TabsPage],
+  providers: [
+    provideHttpClient(),
+    UserService
+  ]
 })
 export class TabsPageModule {}

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

@@ -1,17 +1,13 @@
 <ion-tabs>
-
   <ion-tab-bar slot="bottom">
     <ion-tab-button tab="history" href="/tabs/history">
       <mat-icon>history</mat-icon>
     </ion-tab-button>
-
     <ion-tab-button tab="allowance" href="/tabs/allowance">
       <mat-icon>savings</mat-icon>
     </ion-tab-button>
-
     <ion-tab-button tab="tasks" href="/tabs/tasks">
       <mat-icon>task_alt</mat-icon>
     </ion-tab-button>
   </ion-tab-bar>
-
 </ion-tabs>

frontend/allowance-planner-v2/src/app/pages/tabs/tabs.page.scss

@@ -0,0 +1,3 @@
+.tab-selected {
+    background-color: var(--ion-color-secondary);
+}

frontend/allowance-planner-v2/src/app/pages/tabs/tabs.page.ts

@@ -7,7 +7,6 @@ import { Component } from '@angular/core';
   standalone: false,
 })
 export class TabsPage {
-
   constructor() {}
 
 }

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

@@ -0,0 +1,10 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-title>
+      Tasks
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+</ion-content>

frontend/allowance-planner-v2/src/app/pages/user-login/user-login-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { UserLoginPage } from './user-login.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: UserLoginPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class UserLoginPageRoutingModule {}

frontend/allowance-planner-v2/src/app/pages/user-login/user-login.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { UserLoginPageRoutingModule } from './user-login-routing.module';
+
+import { UserLoginPage } from './user-login.page';
+import { provideHttpClient } from '@angular/common/http';
+import { UserService } from 'src/app/services/user.service';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    UserLoginPageRoutingModule,
+  ],
+  declarations: [UserLoginPage],
+  providers: [
+    provideHttpClient(),
+    UserService
+  ]
+})
+export class UserLoginPageModule {}

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

@@ -0,0 +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

@@ -0,0 +1,30 @@
+.title,
+.selection,
+.profile {
+    display: flex;
+    justify-content: center;
+}
+
+.title {
+    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;
+}

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

@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { UserLoginPage } from './user-login.page';
+
+describe('UserLoginPage', () => {
+  let component: UserLoginPage;
+  let fixture: ComponentFixture<UserLoginPage>;
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UserLoginPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,26 @@
+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({
+  selector: 'app-user-login',
+  templateUrl: './user-login.page.html',
+  styleUrls: ['./user-login.page.scss'],
+  standalone: false,
+})
+export class UserLoginPage implements OnInit {
+  public users: Array<User> = [];
+
+  constructor(private userService: UserService, private storageService: StorageService) { }
+
+  ngOnInit() {
+    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');
+    }
+}

frontend/allowance-planner-v2/src/app/services/user.service.ts

@@ -0,0 +1,20 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { User } from '../models/user';
+
+@Injectable({
+    providedIn: 'root',
+})
+export class UserService {
+    private url = 'http://localhost:8080/api';
+    constructor(private http: HttpClient) {}
+
+    getUserList(): Observable<Array<User>> {
+        return this.http.get<User[]>(`${this.url}/users`);
+    }
+
+    getUserById(id: number): Observable<User> {
+        return this.http.get<User>(`${this.url}/user/${id}`);
+    }
+}

frontend/allowance-planner-v2/src/app/tabs/tabs.page.scss

@@ -1 +0,0 @@
-

frontend/allowance-planner-v2/src/app/tasks/tasks.page.html

@@ -1,15 +0,0 @@
-<ion-header [translucent]="true">
-  <ion-toolbar>
-    <ion-title>
-      Tasks
-    </ion-title>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">Tasks</ion-title>
-    </ion-toolbar>
-  </ion-header>
-</ion-content>

frontend/allowance-planner-v2/src/global.scss

@@ -1 +1,37 @@
+/*
+ * App Global CSS
+ * ----------------------------------------------------------------------------
+ * Put style rules here that you want to apply globally. These styles are for
+ * the entire app and not just one component. Additionally, this file can be
+ * used as an entry point to import other CSS/Sass files to be included in the
+ * output CSS.
+ * For more information on global stylesheets, visit the documentation:
+ * https://ionicframework.com/docs/layout/global-stylesheets
+ */
 
+/* Core CSS required for Ionic components to work properly */
+@import "@ionic/angular/css/core.css";
+
+/* Basic CSS for apps built with Ionic */
+@import "@ionic/angular/css/normalize.css";
+@import "@ionic/angular/css/structure.css";
+@import "@ionic/angular/css/typography.css";
+@import "@ionic/angular/css/display.css";
+
+/* Optional CSS utils that can be commented out */
+@import "@ionic/angular/css/padding.css";
+@import "@ionic/angular/css/float-elements.css";
+@import "@ionic/angular/css/text-alignment.css";
+@import "@ionic/angular/css/text-transformation.css";
+@import "@ionic/angular/css/flex-utils.css";
+
+/**
+ * Ionic Dark Mode
+ * -----------------------------------------------------
+ * For more info, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ */
+
+/* @import "@ionic/angular/css/palettes/dark.always.css"; */
+/* @import "@ionic/angular/css/palettes/dark.class.css"; */
+@import "@ionic/angular/css/palettes/dark.system.css";

frontend/allowance-planner-v2/src/theme/variables.scss

@@ -1,2 +1,14 @@
 // For information on how to create your own theme, please see:
 // http://ionicframework.com/docs/theming/
+:root {
+    --ion-color-primary: #9C4BE4;
+    --ion-color-secondary: #F5E9FF;
+    --ion-background-color: #F3F3F3;
+
+    --ion-font-family: 'Myfont';
+}
+
+@font-face {
+    font-family: 'MyFont';
+    src: url('../assets/font/Jaro-Regular.ttf');
+}