Update README.md

Bumps [webpack-dev-middleware](https://github.com/webpack/webpack-dev-middleware) from 5.3.3 to 5.3.4.
- [Release notes](https://github.com/webpack/webpack-dev-middleware/releases)
- [Changelog](https://github.com/webpack/webpack-dev-middleware/blob/v5.3.4/CHANGELOG.md)
- [Commits](https://github.com/webpack/webpack-dev-middleware/compare/v5.3.3...v5.3.4)

---
updated-dependencies:
- dependency-name: webpack-dev-middleware
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

.devcontainer/Dockerfile

@@ -0,0 +1,12 @@
+FROM mcr.microsoft.com/devcontainers/javascript-node:0-16-bullseye
+
+# [Optional] Uncomment this section to install additional OS packages.
+# RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
+#     && apt-get -y install --no-install-recommends <your-package-list-here>
+
+# [Optional] Uncomment if you want to install an additional version of node using nvm
+# ARG EXTRA_NODE_VERSION=10
+# RUN su node -c "source /usr/local/share/nvm/nvm.sh && nvm install ${EXTRA_NODE_VERSION}"
+
+# [Optional] Uncomment if you want to install more global node modules
+# RUN su node -c "npm install -g <your-package-list-here>"

.devcontainer/devcontainer.json

@@ -0,0 +1,23 @@
+// Update the VARIANT arg in docker-compose.yml to pick a Node.js version
+{
+	"name": "Twigs Web",
+	"dockerComposeFile": "docker-compose.yml",
+	"service": "app",
+	"workspaceFolder": "/workspaces/${localWorkspaceFolderBasename}",
+
+	// Features to add to the dev container. More info: https://containers.dev/implementors/features.
+	// "features": {},
+
+	// Use 'forwardPorts' to make a list of ports inside the container available locally.
+	// This can be used to network with other containers or with the host.
+	"forwardPorts": [4200, "backend:8080"]
+
+	// Use 'postCreateCommand' to run commands after the container is created.
+	// "postCreateCommand": "yarn install",
+
+	// Configure tool-specific properties.
+	// "customizations": {},
+
+	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
+	// "remoteUser": "root"
+}

.devcontainer/docker-compose.yml

@@ -0,0 +1,46 @@
+version: '3.8'
+
+services:
+  app:
+    build: 
+      context: .
+      dockerfile: Dockerfile
+
+    volumes:
+      - ../..:/workspaces:cached
+      
+    # Overrides default command so things don't shut down after the process ends.
+    command: sleep infinity
+
+    # Runs app on the same network as the database container, allows "forwardPorts" in devcontainer.json function.
+    network_mode: service:db
+
+    # Uncomment the next line to use a non-root user for all processes.
+    user: node
+    # Use "forwardPorts" in **devcontainer.json** to forward an app port locally. 
+    # (Adding the "ports" property to this file will not forward from a Codespace.)
+
+  backend:
+    image: ghcr.io/wbrawner/twigs-server:main
+    restart: unless-stopped
+    environment:
+      TWIGS_DB_HOST: db
+      TWIGS_DB_NAME: postgres
+      TWIGS_DB_USER: postgres
+      TWIGS_DB_PASS: postgres
+
+  db:
+    image: postgres:latest
+    restart: unless-stopped
+    volumes:
+      - postgres-data:/var/lib/postgresql/data
+    environment:
+      POSTGRES_PASSWORD: postgres
+      POSTGRES_USER: postgres
+      POSTGRES_DB: postgres
+
+    # Add "forwardPorts": ["5432"] to **devcontainer.json** to forward PostgreSQL locally.
+    # (Adding the "ports" property to this file will not forward from a Codespace.)
+
+volumes:
+  postgres-data:

.github/workflows/gh-pages.yml

@@ -0,0 +1,54 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches: ["main"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 'lts/*'
+      - name: Install dependencies with npm
+        run: npm ci
+      - name: Build with NPM
+        run: npm run package
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: dist/twigs
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.vscode/settings.json

@@ -1,12 +0,0 @@
-{
-    "database.connections": [
-        {
-            "type": "mysql",
-            "name": "root@captain.intra.wbrawner.com (MySql)",
-            "host": "captain.intra.wbrawner.com:3306",
-            "username": "root",
-            "database": null,
-            "password": "U7YE8YsmES8LHB2B39WXNjTQk4d48LzQEZG3cj6wSb2fgeRLEYtrrqTwiqAhrpR3"
-        }
-    ]
-}

README.md

@@ -1,5 +1,7 @@
 # Twigs Web Client
 
+# IMPORTANT: This repository is no longer maintained. The web version of Twigs has been replaced with a server-rendered implementation in the [backend repository](https://github.com/wbrawner/twigs)
+
 Twigs is an open source budgeting app aimed at people who need to share a budget. This project serves as the web front end, and is powered by Angular. The main back end project can be found at [wbrawner/twigs-server](https://github.com/wbrawner/twigs-server)
 
 ## Building

angular.json

@@ -82,21 +82,21 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "twigs:build"
+            "buildTarget": "twigs:build"
           },
           "configurations": {
             "production": {
-              "browserTarget": "twigs:build:production"
+              "buildTarget": "twigs:build:production"
             },
             "codeserver": {
-              "browserTarget": "twigs:build:codeserver"
+              "buildTarget": "twigs:build:codeserver"
             }
           }
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "twigs:build"
+            "buildTarget": "twigs:build"
           }
         },
         "test": {
@@ -138,7 +138,6 @@
       }
     }
   },
-  "defaultProject": "twigs",
   "cli": {
     "analytics": "b8304464-255e-47bb-976a-7ed81af63238"
   }

package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve --host '0.0.0.0'",
+    "start": "ng serve --configuration=production --host '0.0.0.0'",
     "code-server": "ng serve --configuration=codeserver --host \"0.0.0.0\" --disable-host-check --poll=2000",
     "build": "ng build",
     "package": "ng build --configuration=production --service-worker",
@@ -15,45 +15,44 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^13.0.2",
+    "@angular/animations": "^17.2.3",
-    "@angular/cdk": "^13.0.2",
+    "@angular/cdk": "^17.2.1",
-    "@angular/common": "^13.0.2",
+    "@angular/common": "^17.2.3",
-    "@angular/compiler": "^13.0.2",
+    "@angular/compiler": "^17.2.3",
-    "@angular/core": "^13.0.2",
+    "@angular/core": "^17.2.3",
-    "@angular/forms": "^13.0.2",
+    "@angular/forms": "^17.2.3",
-    "@angular/material": "^13.0.2",
+    "@angular/material": "^16.2.0",
-    "@angular/platform-browser": "^13.0.2",
+    "@angular/platform-browser": "^17.2.3",
-    "@angular/platform-browser-dynamic": "^13.0.2",
+    "@angular/platform-browser-dynamic": "^17.2.3",
-    "@angular/router": "^13.0.2",
+    "@angular/router": "^17.2.3",
-    "@angular/service-worker": "^13.0.2",
+    "@angular/service-worker": "^17.2.3",
-    "chart.js": "^2.9.3",
+    "chart.js": "^3.7.0",
-    "core-js": "^3.19.1",
+    "core-js": "^3.20.3",
-    "ng2-charts": "^2.4.3",
+    "ng2-charts": "^3.0.8",
-    "rxjs": "^6.3.3",
+    "rxjs": "^7.5.2",
     "tslib": "^2.3.1",
-    "zone.js": "~0.11.4"
+    "zone.js": "~0.14.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^13.0.3",
+    "@angular-devkit/build-angular": "^17.2.2",
-    "@angular/cli": "^13.0.3",
+    "@angular/cli": "^17.2.2",
-    "@angular/compiler-cli": "^13.0.2",
+    "@angular/compiler-cli": "^17.2.3",
-    "@angular/language-service": "^13.0.2",
+    "@angular/language-service": "^17.2.3",
-    "@types/jasmine": "~3.10.2",
+    "@types/jasmine": "~3.10.3",
     "@types/jasminewd2": "^2.0.10",
-    "@types/node": "^16.11.9",
+    "@types/node": "^17.0.10",
-    "codelyzer": "^6.0.2",
+    "eslint": "^8.7.0",
-    "eslint": "^8.2.0",
+    "jasmine-core": "~4.0.0",
-    "jasmine-core": "~3.10.1",
     "jasmine-spec-reporter": "~7.0.0",
-    "karma": "~6.3.9",
+    "karma": "~6.3.11",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage-istanbul-reporter": "~3.0.3",
     "karma-jasmine": "~4.0.1",
     "karma-jasmine-html-reporter": "^1.7.0",
-    "npm-check-updates": "^12.0.2",
+    "npm-check-updates": "^15.0.1",
     "protractor": "^7.0.0",
     "ts-node": "~10.4.0",
     "tslint": "^6.1.3",
-    "typescript": "4.4.4"
+    "typescript": "5.3.3"
   }
 }

src/app/app-routing.module.ts

@@ -33,7 +33,7 @@ const routes: Routes = [
 
 @NgModule({
   imports: [
-    RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' })
+    RouterModule.forRoot(routes, {})
   ],
   exports: [
     RouterModule

src/app/app.component.html

@@ -3,19 +3,21 @@
 </p>
 <mat-sidenav-container *ngIf="online" class="sidenav-container">
   <mat-sidenav #sidenav mode="over" closed>
-    <mat-nav-list (click)="sidenav.close()">
+    <mat-nav-list (click)="sidenav.close()" *ngIf="loggedIn">
-      <a mat-list-item *ngIf="loggedIn" routerLink="">{{ getUsername() }}</a>
+      <a mat-list-item routerLink="">{{ getUsername() }}</a>
-      <a mat-list-item *ngIf="loggedIn" routerLink="/budgets">Budgets</a>
+      <a mat-list-item routerLink="/budgets">Budgets</a>
-      <a mat-list-item *ngIf="!loggedIn" routerLink="/login">Login</a>
+      <a mat-list-item (click)="logout()">Logout</a>
-      <a mat-list-item *ngIf="!loggedIn" routerLink="/register">Register</a>
+    </mat-nav-list>
-      <a mat-list-item *ngIf="loggedIn" (click)="logout()">Logout</a>
+    <mat-nav-list (click)="sidenav.close()" *ngIf="!loggedIn">
+      <a mat-list-item routerLink="/login">Login</a>
+      <a mat-list-item routerLink="/register">Register</a>
     </mat-nav-list>
   </mat-sidenav>
   <mat-sidenav-content>
     <mat-toolbar>
       <span>
         <a mat-icon-button *ngIf="backEnabled" (click)="goBack()">
-          <mat-icon>arrow_back</mat-icon>
+        <mat-icon>arrow_back</mat-icon>
         </a>
         <a mat-icon-button *ngIf="!backEnabled" (click)="sidenav.open()">
           <mat-icon>menu</mat-icon>

src/app/app.component.ts

@@ -9,133 +9,126 @@ import { Router, ActivationEnd, ActivatedRoute } from '@angular/router';
 import { Actionable, isActionable } from './shared/actionable';
 
 @Component({
-  selector: 'app-root',
+    selector: 'app-root',
-  templateUrl: './app.component.html',
+    templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+    styleUrls: ['./app.component.css']
 })
 export class AppComponent implements OnInit {
-  public title = 'Twigs';
+    public title = 'Twigs';
-  public backEnabled = false;
+    public backEnabled = false;
-  public user = new BehaviorSubject<User>(null);
+    public user = new BehaviorSubject<User>(null);
-  public online = window.navigator.onLine;
+    public online = window.navigator.onLine;
-  public currentVersion = '';
+    public currentVersion = '';
-  public actionable: Actionable;
+    public actionable: Actionable;
-  public loggedIn = false;
+    public loggedIn = false;
 
-  constructor(
+    constructor(
-    @Inject(TWIGS_SERVICE) private twigsService: TwigsService,
+        @Inject(TWIGS_SERVICE) private twigsService: TwigsService,
-    private location: Location,
+        private location: Location,
-    private router: Router,
+        private router: Router,
-    private appRef: ApplicationRef,
+        private appRef: ApplicationRef,
-    private updates: SwUpdate,
+        private updates: SwUpdate,
-    private changeDetector: ChangeDetectorRef,
+        private changeDetector: ChangeDetectorRef,
-    private storage: Storage,
+        private storage: Storage,
-    @Inject(DOCUMENT) private document: Document
+        @Inject(DOCUMENT) private document: Document
-  ) { }
+    ) { }
 
-  ngOnInit(): void {
+    ngOnInit(): void {
-    const unauthenticatedRoutes = [
+        const unauthenticatedRoutes = [
-      '',
+            '',
-      '/',
+            '/',
-      '/login',
+            '/login',
-      '/register'
+            '/register'
-    ]
+        ]
-    let auth = this.storage.getItem('Authorization');
+        let auth = this.storage.getItem('Authorization');
-    let userId = this.storage.getItem('userId');
+        let userId = this.storage.getItem('userId');
-    let savedUser = JSON.parse(this.storage.getItem('user')) as User;
+        let savedUser = JSON.parse(this.storage.getItem('user')) as User;
-    if (auth && auth.length == 255 && userId) {
+        if (auth && auth.length == 255 && userId) {
-      if (savedUser) {
+            if (savedUser) {
-        this.user.next(savedUser);
+                this.user.next(savedUser);
-      }
+            }
-      this.twigsService.getProfile(userId).subscribe(fetchedUser => {
+            this.twigsService.getProfile(userId).then(fetchedUser => {
-        this.storage.setItem('user', JSON.stringify(fetchedUser));
+                this.storage.setItem('user', JSON.stringify(fetchedUser));
-        this.user.next(fetchedUser);
+                this.user.next(fetchedUser);
-        if (unauthenticatedRoutes.indexOf(this.location.path()) != -1) {
+                if (unauthenticatedRoutes.indexOf(this.location.path()) != -1) {
-          //TODO: Save last opened budget and redirect to there instead of the main list
+                    //TODO: Save last opened budget and redirect to there instead of the main list
-          this.router.navigateByUrl("/budgets");
+                    this.router.navigateByUrl("/budgets");
+                }
+            });
+        } else if (unauthenticatedRoutes.indexOf(this.location.path()) == -1) {
+            this.router.navigateByUrl(`/login?redirect=${this.location.path()}`);
         }
-      });
+
-    } else if (unauthenticatedRoutes.indexOf(this.location.path()) == -1) {
+        this.updates.versionUpdates.subscribe(
-      this.router.navigateByUrl(`/login?redirect=${this.location.path()}`);
+            event => {
+                if (event.type == "VERSION_READY") {
+                    console.log('current version is', event.currentVersion);
+                    console.log('available version is', event.latestVersion);
+                    // TODO: Prompt user to click something to update
+                    this.updates.activateUpdate();
+                }
+            },
+            err => {
+
+            }
+        );
+
+        const appIsStable$ = this.appRef.isStable.pipe(first(isStable => isStable === true));
+        const everySixHours$ = interval(6 * 60 * 60 * 1000);
+        const everySixHoursOnceAppIsStable$ = concat(appIsStable$, everySixHours$);
+        everySixHoursOnceAppIsStable$.subscribe(() => this.updates.checkForUpdate());
+        this.user.subscribe(
+            user => {
+                if (user) {
+                    this.loggedIn = true;
+                } else {
+                    this.loggedIn = false;
+                }
+            }
+        )
+        const darkMode = window.matchMedia('(prefers-color-scheme: dark)');
+        this.handleDarkModeChanges(darkMode);
+        darkMode.addEventListener('change', (e => this.handleDarkModeChanges(e)))
     }
 
-    this.updates.available.subscribe(
+    getUsername(): String {
-      event => {
+        return this.user.value.username;
-        console.log('current version is', event.current);
+    }
-        console.log('available version is', event.available);
-        // TODO: Prompt user to click something to update
-        this.updates.activateUpdate();
-      },
-      err => {
 
-      }
+    goBack(): void {
-    );
+        this.location.back();
-    this.updates.activated.subscribe(
+    }
-      event => {
-        console.log('old version was', event.previous);
-        console.log('new version is', event.current);
-      },
-      err => {
 
-      }
+    logout(): void {
-    );
+        this.twigsService.logout().then(_ => {
+            this.location.go('/');
+            window.location.reload();
+        });
+    }
 
-    const appIsStable$ = this.appRef.isStable.pipe(first(isStable => isStable === true));
+    setActionable(actionable: Actionable): void {
-    const everySixHours$ = interval(6 * 60 * 60 * 1000);
+        this.actionable = actionable;
-    const everySixHoursOnceAppIsStable$ = concat(appIsStable$, everySixHours$);
+        this.changeDetector.detectChanges();
-    everySixHoursOnceAppIsStable$.subscribe(() => this.updates.checkForUpdate());
+    }
-    this.user.subscribe(
+
-      user => {
+    setBackEnabled(enabled: boolean): void {
-        if (user) {
+        this.backEnabled = enabled;
-          this.loggedIn = true;
+        this.changeDetector.detectChanges();
+    }
+
+    setTitle(title: string) {
+        this.title = title;
+        this.changeDetector.detectChanges();
+    }
+
+    handleDarkModeChanges(darkMode: any) {
+        const themeColor = this.document.getElementsByName('theme-color')[0] as HTMLMetaElement;
+        let themeColorValue: string;
+        if (darkMode.matches) {
+            themeColorValue = '#333333';
         } else {
-          this.loggedIn = false;
+            themeColorValue = '#F1F1F1';
         }
-      }
+        themeColor.content = themeColorValue;
-    )
-    const darkMode = window.matchMedia('(prefers-color-scheme: dark)');
-    this.handleDarkModeChanges(darkMode);
-    darkMode.addEventListener('change', (e => this.handleDarkModeChanges(e)))
-  }
-
-  getUsername(): String {
-    return this.user.value.username;
-  }
-
-  goBack(): void {
-    this.location.back();
-  }
-
-  logout(): void {
-    this.twigsService.logout().subscribe(_ => {
-      this.location.go('/');
-      window.location.reload();
-    });
-  }
-
-  setActionable(actionable: Actionable): void {
-    this.actionable = actionable;
-    this.changeDetector.detectChanges();
-  }
-
-  setBackEnabled(enabled: boolean): void {
-    this.backEnabled = enabled;
-    this.changeDetector.detectChanges();
-  }
-
-  setTitle(title: string) {
-    this.title = title;
-    this.changeDetector.detectChanges();
-  }
-
-  handleDarkModeChanges(darkMode: any) {
-    const themeColor = this.document.getElementsByName('theme-color')[0] as HTMLMetaElement;
-    let themeColorValue: string;
-    if (darkMode.matches) {
-      themeColorValue = '#333333';
-    } else {
-      themeColorValue = '#F1F1F1';
     }
-    themeColor.content = themeColorValue;
-  }
 }

src/app/app.module.ts

@@ -2,20 +2,20 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { MatButtonModule } from '@angular/material/button';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
 import { MatIconModule } from '@angular/material/icon';
-import { MatInputModule } from '@angular/material/input';
+import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
-import { MatListModule } from '@angular/material/list';
+import { MatLegacyListModule as MatListModule } from '@angular/material/legacy-list';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatLegacyProgressBarModule as MatProgressBarModule } from '@angular/material/legacy-progress-bar';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
-import { MatRadioModule } from '@angular/material/radio';
+import { MatLegacyRadioModule as MatRadioModule } from '@angular/material/legacy-radio';
-import { MatSelectModule } from '@angular/material/select';
+import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatToolbarModule } from '@angular/material/toolbar';
-import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
-import { MatCardModule } from '@angular/material/card';
+import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
 
 import { AppComponent } from './app.component';
 import { TransactionsComponent } from './transactions/transactions.component';
@@ -40,7 +40,7 @@ import { environment } from 'src/environments/environment';
 import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { ServiceWorkerModule } from '@angular/service-worker';
 import { CategoryBreakdownComponent } from './categories/category-breakdown/category-breakdown.component';
-import { ChartsModule } from 'ng2-charts';
+import { NgChartsModule } from 'ng2-charts';
 import { TWIGS_SERVICE } from './shared/twigs.service';
 import { AuthInterceptor } from './shared/auth.interceptor';
 import { TwigsHttpService } from './shared/twigs.http.service';
@@ -93,7 +93,7 @@ import { EditBudgetComponent } from './budgets/edit-budget/edit-budget.component
     FormsModule,
     ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
     HttpClientModule,
-    ChartsModule,
+    NgChartsModule,
     MatCheckboxModule,
     MatCardModule,
   ],

src/app/budgets/add-edit-budget/add-edit-budget.component.html

@@ -4,10 +4,10 @@
 </div>
 <div *ngIf="!isLoading && budget" class="form budget-form">
   <mat-form-field>
-    <input matInput [(ngModel)]="budget.name" placeholder="Name" required>
+    <input matInput [(ngModel)]="budget.name" placeholder="Name" required autocapitalize="words">
   </mat-form-field>
   <mat-form-field>
-    <textarea matInput [(ngModel)]="budget.description" placeholder="Description"></textarea>
+    <textarea matInput [(ngModel)]="budget.description" placeholder="Description" autocapitalize="sentences"></textarea>
   </mat-form-field>
   <button mat-raised-button color="accent" (click)="save()">Save</button>
   <button class="button-delete" mat-raised-button color="warn" *ngIf="!create" (click)="delete()">Delete</button>

src/app/budgets/add-edit-budget/add-edit-budget.component.ts

@@ -3,6 +3,7 @@ import { Budget } from '../budget';
 import { AppComponent } from 'src/app/app.component';
 import { User, UserPermission, Permission } from 'src/app/users/user';
 import { TWIGS_SERVICE, TwigsService } from 'src/app/shared/twigs.service';
+import { Router } from '@angular/router';
 
 @Component({
     selector: 'app-add-edit-budget',
@@ -19,6 +20,7 @@ export class AddEditBudgetComponent {
 
     constructor(
         private app: AppComponent,
+        private router: Router,
         @Inject(TWIGS_SERVICE) private twigsService: TwigsService,
     ) {
         this.app.setTitle(this.title)
@@ -27,11 +29,11 @@ export class AddEditBudgetComponent {
     }
 
     save(): void {
-        let observable;
+        let promise: Promise<Budget>;
         this.isLoading = true;
         if (this.create) {
             // This is a new budget, save it
-            observable = this.twigsService.createBudget(
+            promise = this.twigsService.createBudget(
                 this.budget.id,
                 this.budget.name,
                 this.budget.description,
@@ -39,10 +41,10 @@ export class AddEditBudgetComponent {
             );
         } else {
             // This is an existing budget, update it
-            observable = this.twigsService.updateBudget(this.budget.id, this.budget);
+            promise = this.twigsService.updateBudget(this.budget.id, this.budget);
         }
         // TODO: Check if it was actually successful or not
-        observable.subscribe(val => {
+        promise.then(_ => {
             this.app.goBack();
         });
     }
@@ -50,14 +52,14 @@ export class AddEditBudgetComponent {
     delete(): void {
         this.isLoading = true;
         this.twigsService.deleteBudget(this.budget.id)
-            .subscribe(() => {
+            .then(() => {
-                this.app.goBack();
+                this.router.navigateByUrl("/budgets");
             });
     }
 
     // TODO: Implement a search box with suggestions to add users
     searchUsers(username: string) {
-        this.twigsService.getUsersByUsername(username).subscribe(users => {
+        this.twigsService.getUsersByUsername(username).then(users => {
             this.searchedUsers = users;
         });
     }

src/app/budgets/budget-details/budget-details.component.ts

@@ -4,9 +4,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { AppComponent } from 'src/app/app.component';
 import { Transaction } from 'src/app/transactions/transaction';
 import { Category } from 'src/app/categories/category';
-import { Observable } from 'rxjs';
+import { ChartDataset } from 'chart.js';
-import { Label } from 'ng2-charts';
-import { ChartDataSets } from 'chart.js';
 import { TWIGS_SERVICE, TwigsService } from 'src/app/shared/twigs.service';
 import { Actionable } from '../../shared/actionable';
 
@@ -16,7 +14,6 @@ import { Actionable } from '../../shared/actionable';
   styleUrls: ['./budget-details.component.css']
 })
 export class BudgetDetailsComponent implements OnInit, OnDestroy, Actionable {
-
   budget: Budget;
   public budgetBalance: number;
   public transactions: Transaction[];
@@ -27,18 +24,46 @@ export class BudgetDetailsComponent implements OnInit, OnDestroy, Actionable {
   actualIncome = 0;
   expectedExpenses = 0;
   actualExpenses = 0;
-  barChartLabels: Label[] = ['Income', 'Expenses'];
+  barChartLabels: string[] = ['Income', 'Expenses'];
-  barChartData: ChartDataSets[] = [
+  barChartData: ChartDataset[] = [
     { data: [0, 0], label: 'Expected' },
     { data: [0, 0], label: 'Actual' },
   ];
+  from: Date
+  to: Date
 
   constructor(
     private app: AppComponent,
     private route: ActivatedRoute,
     @Inject(TWIGS_SERVICE) private twigsService: TwigsService,
     private router: Router,
-  ) { }
+  ) {
+    let fromStr = this.route.snapshot.queryParamMap.get('from');
+    if (fromStr) {
+      let fromDate = new Date(fromStr);
+      if (!isNaN(fromDate.getTime())) {
+        this.from = fromDate;
+      }
+    }
+
+    if (!this.from) {
+      let date = new Date();
+      date.setHours(0);
+      date.setMinutes(0);
+      date.setSeconds(0);
+      date.setMilliseconds(0);
+      date.setDate(1);
+      this.from = date;
+    }
+
+    let toStr = this.route.snapshot.queryParamMap.get('to');
+    if (toStr) {
+      let toDate = new Date(toStr);
+      if (!isNaN(toDate.getTime())) {
+        this.to = toDate;
+      }
+    }
+  }
 
   ngOnInit() {
     this.getBudget();
@@ -54,7 +79,7 @@ export class BudgetDetailsComponent implements OnInit, OnDestroy, Actionable {
   getBudget() {
     const id = this.route.snapshot.paramMap.get('id');
     this.twigsService.getBudget(id)
-      .subscribe(budget => {
+      .then(budget => {
         this.app.setTitle(budget.name)
         this.budget = budget;
         this.getBalance();
@@ -87,9 +112,10 @@ export class BudgetDetailsComponent implements OnInit, OnDestroy, Actionable {
 
   getBalance(): void {
     const id = this.route.snapshot.paramMap.get('id');
-    this.twigsService.getBudgetBalance(id).subscribe(balance => {
+    this.twigsService.getBudgetBalance(id, this.from, this.to)
-      this.budgetBalance = balance;
+      .then(balance => {
-    });
+        this.budgetBalance = balance;
+      });
   }
 
   getTransactions(): void {
@@ -100,46 +126,41 @@ export class BudgetDetailsComponent implements OnInit, OnDestroy, Actionable {
     date.setMilliseconds(0);
     date.setDate(1);
     this.twigsService.getTransactions(this.budget.id, null, 5, date)
-      .subscribe(transactions => this.transactions = <Transaction[]>transactions);
+      .then(transactions => this.transactions = <Transaction[]>transactions);
   }
 
-  getCategories(): void {
+  async getCategories() {
-    this.twigsService.getCategories(this.budget.id).subscribe(categories => {
+    const categories = await this.twigsService.getCategories(this.budget.id)
-      const categoryBalances = new Map<string, number>();
+    const categoryBalances = new Map<string, number>();
-      let categoryBalancesCount = 0;
+    let categoryBalancesCount = 0;
-      console.log(categories);
+    for (const category of categories) {
-      for (const category of categories) {
+      if (category.expense) {
-        if (category.expense) {
+        this.expenses.push(category);
-          this.expenses.push(category);
+        this.expectedExpenses += category.amount;
-          this.expectedExpenses += category.amount;
+      } else {
-        } else {
+        this.income.push(category);
-          this.income.push(category);
+        this.expectedIncome += category.amount;
-          this.expectedIncome += category.amount;
-        }
-        this.twigsService.getCategoryBalance(category.id).subscribe(
-          balance => {
-            console.log(balance);
-            if (category.expense) {
-              this.actualExpenses += balance * -1;
-            } else {
-              this.actualIncome += balance;
-            }
-            categoryBalances.set(category.id, balance);
-            categoryBalancesCount++;
-          },
-          error => { categoryBalancesCount++; },
-          () => {
-            // This weird workaround is to force the OnChanges callback to be fired.
-            // Angular needs the reference to the object to change in order for it to
-            // work.
-            if (categoryBalancesCount === categories.length) {
-              this.categoryBalances = categoryBalances;
-              this.updateBarChart();
-            }
-          }
-        );
       }
-    });
+      try {
+        const balance = await this.twigsService.getCategoryBalance(category.id, this.from, this.to)
+        console.log(balance);
+        if (category.expense) {
+          this.actualExpenses += balance * -1;
+        } else {
+          this.actualIncome += balance;
+        }
+        categoryBalances.set(category.id, balance);
+        if (categoryBalancesCount === categories.length - 1) {
+          // This weird workaround is to force the OnChanges callback to be fired.
+          // Angular needs the reference to the object to change in order for it to
+          // work.
+          this.categoryBalances = categoryBalances;
+          this.updateBarChart();
+        }
+      } finally {
+        categoryBalancesCount++;
+      }
+    }
   }
 
   doAction(): void {

src/app/budgets/budget.component.ts

@@ -32,16 +32,17 @@ export class BudgetsComponent implements OnInit {
         this.app.setTitle('Budgets')
         this.loggedIn = true;
         this.loading = true;
-        this.twigsService.getBudgets().subscribe(
+        this.twigsService.getBudgets()
-          budgets => {
+          .then(
-            console.log(budgets)
+            budgets => {
-            this.budgets = budgets;
+              console.log(budgets)
+              this.budgets = budgets;
+              this.loading = false;
+            })
+          .catch(error => {
+            console.log(error)
             this.loading = false;
-          },
+          });
-          error => {
-            this.loading = false;
-          }
-        );    
       },
       error => {
         this.loading = false;

src/app/budgets/edit-budget/edit-budget.component.ts

@@ -20,7 +20,7 @@ export class EditBudgetComponent implements OnInit {
   ngOnInit(): void {
     const id = this.route.snapshot.paramMap.get('id');
     this.twigsService.getBudget(id)
-      .subscribe(budget => {
+      .then(budget => {
         this.budget = budget;
       });
   }

src/app/categories/categories.component.ts

@@ -1,11 +1,9 @@
-import { Component, OnInit, Input, Inject } from '@angular/core';
+import { Component, OnInit, Inject } from '@angular/core';
 import { Category } from './category';
 import { AppComponent } from '../app.component';
-import { Observable } from 'rxjs';
-import { TransactionType } from '../transactions/transaction.type';
-import { Budget } from '../budgets/budget';
 import { ActivatedRoute } from '@angular/router';
 import { TWIGS_SERVICE, TwigsService } from '../shared/twigs.service';
+import { Transaction } from '../transactions/transaction';
 
 @Component({
   selector: 'app-categories',
@@ -33,27 +31,31 @@ export class CategoriesComponent implements OnInit {
   }
 
   getCategories(): void {
-    this.twigsService.getCategories(this.budgetId).subscribe(categories => {
+    this.twigsService.getCategories(this.budgetId).then(categories => {
       this.categories = categories;
       for (const category of this.categories) {
-        this.getCategoryBalance(category).subscribe(balance => this.categoryBalances.set(category.id, balance));
+        this.getCategoryBalance(category).then(balance => this.categoryBalances.set(category.id, balance));
       }
     });
   }
 
-  getCategoryBalance(category: Category): Observable<number> {
+  getCategoryBalance(category: Category): Promise<number> {
-    return Observable.create(subscriber => {
+    return new Promise(async (resolve, reject) => {
-      this.twigsService.getTransactions(this.budgetId, category.id).subscribe(transactions => {
+      let transactions: Transaction[]
-        let balance = 0;
+      try {
-        for (const transaction of transactions) {
+        transactions = await this.twigsService.getTransactions(this.budgetId, category.id)
-          if (transaction.expense) {
+      } catch(e) {
-            balance -= transaction.amount;
+        reject(e)
-          } else {
+      }
-            balance += transaction.amount;
+      let balance = 0;
-          }
+      for (const transaction of transactions) {
+        if (transaction.expense) {
+          balance -= transaction.amount;
+        } else {
+          balance += transaction.amount;
         }
-        subscriber.next(balance);
+      }
-      });
+      resolve(balance);
     });
   }
 }

src/app/categories/category-breakdown/category-breakdown.component.html

@@ -4,6 +4,6 @@
     [options]="barChartOptions"
     [labels]="barChartLabels"
     [legend]="barChartLegend"
-    [chartType]="barChartType">
+    [type]="barChartType">
   </canvas>
 </div>

src/app/categories/category-breakdown/category-breakdown.component.ts

@@ -1,8 +1,8 @@
 import { Component, OnInit, Input, OnChanges, SimpleChanges, SimpleChange, ViewChild } from '@angular/core';
 import { Category } from '../category';
 import { CategoriesComponent } from '../categories.component';
-import { ChartOptions, ChartType, ChartDataSets } from 'chart.js';
+import { ChartConfiguration, ChartType, ChartDataset } from 'chart.js';
-import { BaseChartDirective, Label } from 'ng2-charts';
+import { BaseChartDirective } from 'ng2-charts';
 
 @Component({
   selector: 'app-category-breakdown',
@@ -10,22 +10,24 @@ import { BaseChartDirective, Label } from 'ng2-charts';
   styleUrls: ['./category-breakdown.component.css']
 })
 export class CategoryBreakdownComponent implements OnInit, OnChanges {
-  barChartOptions: ChartOptions = {
+  barChartOptions: ChartConfiguration['options'] = {
     responsive: true,
     maintainAspectRatio: false,
     scales: {
-      xAxes: [{
+      x: {
         ticks: {
-          beginAtZero: true
+          // beginAtZero: true
         }
-      }], yAxes: [{}]
+      },
+      y: {}
     },
+    indexAxis: 'y'
   };
-  @Input() barChartLabels: Label[];
+  @Input() barChartLabels: string[];
-  @Input() barChartData: ChartDataSets[] = [
+  @Input() barChartData: ChartDataset[] = [
     { data: [0, 0, 0, 0], label: '' },
   ];
-  barChartType: ChartType = 'horizontalBar';
+  barChartType: ChartType = 'bar';
   barChartLegend = true;
   @ViewChild(BaseChartDirective) chart: BaseChartDirective;
 
@@ -35,9 +37,9 @@ export class CategoryBreakdownComponent implements OnInit, OnChanges {
 
   ngOnChanges(changes: SimpleChanges): void {
     console.log(changes);
-    if (changes.barChartLabels) {
+    // if (changes.barChartLabels) {
-      this.barChartLabels = changes.barChartLabels.currentValue;
+      // this.barChartLabels = changes.barChartLabels.currentValue;
-    }
+    // }
     if (changes.barChartData) {
       this.barChartData = changes.barChartData.currentValue;
     }

src/app/categories/category-details/category-details.component.ts

@@ -45,7 +45,7 @@ export class CategoryDetailsComponent implements OnInit, OnDestroy, Actionable {
   getCategory(): void {
     const id = this.route.snapshot.paramMap.get('id');
     this.twigsService.getCategory(id)
-      .subscribe(category => {
+      .then(category => {
         category.amount /= 100;
         this.app.setTitle(category.title)
         this.category = category;

src/app/categories/category-form/category-form.component.html

@@ -2,14 +2,14 @@
   <p>Select a category from the list to view details about it or edit it.</p>
 </div>
 <div *ngIf="currentCategory" class="form category-form">
-  <mat-form-field (keyup.enter)="doAction()">
+  <mat-form-field (keyup.enter)="save()">
-    <input matInput [(ngModel)]="currentCategory.title" placeholder="Name" required>
+    <input matInput [(ngModel)]="currentCategory.title" placeholder="Name" required autocapitalize="words">
   </mat-form-field>
-  <mat-form-field (keyup.enter)="doAction()">
+  <mat-form-field (keyup.enter)="save()">
-    <textarea matInput [(ngModel)]="currentCategory.description" placeholder="Description"></textarea>
+    <textarea matInput [(ngModel)]="currentCategory.description" placeholder="Description" autocapitalize="sentences"></textarea>
   </mat-form-field>
-  <mat-form-field (keyup.enter)="doAction()">
+  <mat-form-field (keyup.enter)="save()">
-    <input matInput type="text" [(ngModel)]="currentCategory.amount" placeholder="Amount" required>
+    <input matInput type="input" [(ngModel)]="currentCategory.amount" placeholder="Amount" required step="0.01">
   </mat-form-field>
   <mat-radio-group [(ngModel)]="currentCategory.expense">
     <mat-radio-button [value]="true">Expense</mat-radio-button>

src/app/categories/category-form/category-form.component.ts

@@ -1,7 +1,8 @@
-import { Component, OnInit, Input, OnDestroy, Inject } from '@angular/core';
+import { Component, OnInit, Input, Inject } from '@angular/core';
 import { Category } from '../category';
 import { AppComponent } from 'src/app/app.component';
 import { TWIGS_SERVICE, TwigsService } from 'src/app/shared/twigs.service';
+import { decimalToInteger } from 'src/app/shared/utils';
 
 @Component({
   selector: 'app-category-form',
@@ -26,37 +27,35 @@ export class CategoryFormComponent implements OnInit {
   }
 
   save(): void {
-    let observable;
+    let promise;
+    this.currentCategory.amount = decimalToInteger(String(this.currentCategory.amount))
     if (this.create) {
       // This is a new category, save it
-      observable = this.twigsService.createCategory(
+      promise = this.twigsService.createCategory(
         this.currentCategory.id,
         this.budgetId,
         this.currentCategory.title,
         this.currentCategory.description,
-        this.currentCategory.amount * 100,
+        this.currentCategory.amount,
         this.currentCategory.expense
       );
     } else {
       // This is an existing category, update it
-      observable = this.twigsService.updateCategory(
+      const updatedCategory: Category = {
+        ...this.currentCategory,
+      }
+      promise = this.twigsService.updateCategory(
         this.currentCategory.id,
-        {
+        this.currentCategory
-          name: this.currentCategory.title,
-          description: this.currentCategory.description,
-          amount: this.currentCategory.amount * 100,
-          expense: this.currentCategory.expense,
-          archived: this.currentCategory.archived
-        }
       );
     }
-    observable.subscribe(val => {
+    promise.then(_ => {
       this.app.goBack();
     });
   }
 
   delete(): void {
-    this.twigsService.deleteCategory(this.currentCategory.id).subscribe(() => {
+    this.twigsService.deleteCategory(this.currentCategory.id).then(() => {
       this.app.goBack();
     });
   }

src/app/categories/edit-category/edit-category.component.ts

@@ -28,7 +28,7 @@ export class EditCategoryComponent implements OnInit {
   getCategory(): void {
     const id = this.route.snapshot.paramMap.get('id');
     this.twigsService.getCategory(id)
-      .subscribe(category => {
+      .then(category => {
         category.amount /= 100;
         this.app.setTitle(category.title)
         this.category = category;

src/app/recurringtransactions/recurringtransaction.ts

@@ -0,0 +1,221 @@
+export class RecurringTransaction {
+  id: string = '';
+  title: string;
+  description?: string = null;
+  frequency: Frequency;
+  start: Date = new Date();
+  end?: Date;
+  amount: number;
+  expense = true;
+  categoryId: string;
+  budgetId: string;
+  createdBy: string;
+}
+
+export class Frequency {
+  unit: FrequencyUnit;
+  count: number;
+  time: Time;
+  amount?: (void | Set<DayOfWeek> | DayOfMonth | DayOfYear);
+
+  private constructor(unit: FrequencyUnit, count: number, time: Time, amount?: (void | Set<DayOfWeek> | DayOfMonth | DayOfYear)) {
+    this.unit = unit;
+    this.count = count;
+    this.time = time;
+    this.amount = amount;
+  }
+
+  static Daily(count: number, time: Time): Frequency {
+    return new Frequency(FrequencyUnit.DAILY, count, time);
+  }
+
+  static Weekly(count: number, time: Time, daysOfWeek: Set<DayOfWeek>): Frequency {
+    return new Frequency(FrequencyUnit.WEEKLY, count, time, daysOfWeek)
+  }
+
+  static Monthly(count: number, time: Time, dayOfMonth: DayOfMonth): Frequency {
+    return new Frequency(FrequencyUnit.MONTHLY, count, time, dayOfMonth)
+  }
+
+  static Yearly(count: number, time: Time, dayOfYear: DayOfYear): Frequency {
+    return new Frequency(FrequencyUnit.YEARLY, count, time, dayOfYear)
+  }
+
+  static parse(s: string): Frequency {
+    const parts = s.split(';');
+    let count: number, time: Time;
+    switch (parts[0]) {
+      case 'D':
+        count = Number.parseInt(parts[1]);
+        time = Time.parse(parts[2]);
+        return this.Daily(count, time);
+      case 'W':
+        count = Number.parseInt(parts[1]);
+        time = Time.parse(parts[3]);
+        const daysOfWeek = new Set(parts[2].split(',').map(day => DayOfWeek[day]));
+        return this.Weekly(count, time, daysOfWeek);
+      case 'M':
+        count = Number.parseInt(parts[1]);
+        time = Time.parse(parts[3]);
+        const dayOfMonth = DayOfMonth.parse(parts[2]);
+        return this.Monthly(count, time, dayOfMonth);
+      case 'Y':
+        count = Number.parseInt(parts[1]);
+        time = Time.parse(parts[3]);
+        const dayOfYear = DayOfYear.parse(parts[2]);
+        return this.Yearly(count, time, dayOfYear);
+      default:
+        throw new Error(`Invalid Frequency format: ${s}`);
+    }
+  }
+
+  toString(): string {
+    let parts = [this.unit.toString()]
+    parts.push(this.count.toString())
+    if (this.amount) {
+      if (this.unit === FrequencyUnit.WEEKLY) {
+        parts.push(Array.from(this.amount as Set<DayOfWeek>).join(','))
+      } else {
+        parts.push(this.amount.toString())
+      }
+    }
+    parts.push(this.time.toString())
+    return parts.join(';')
+  }
+}
+
+export enum FrequencyUnit {
+  DAILY = 'D',
+  WEEKLY = 'W',
+  MONTHLY = 'M',
+  YEARLY = 'Y',
+}
+
+export class Time {
+  hours: number;
+  minutes: number;
+  seconds: number;
+
+  constructor(hours: number, minutes: number, seconds: number) {
+    this.hours = hours;
+    this.minutes = minutes;
+    this.seconds = seconds;
+  }
+
+  toString(): string {
+    return [
+      String(this.hours).padStart(2, '0'),
+      String(this.minutes).padStart(2, '0'),
+      String(this.seconds).padStart(2, '0'),
+    ].join(':')
+  }
+
+  static parse(s: string): Time {
+    if (!s.match(/[0-9]{2}:[0-9]{2}:[0-9]{2}/)) {
+      throw new Error('Invalid time format. Time must be formatted as HH:mm:ss');
+    }
+    const parts = s.split(':').map(part => Number.parseInt(part));
+    return new Time(parts[0], parts[1], parts[2]);
+  }
+}
+
+export enum Position {
+  DAY = 'DAY',
+  FIRST = 'FIRST',
+  SECOND = 'SECOND',
+  THIRD = 'THIRD',
+  FOURTH = 'FOURTH',
+  LAST = 'LAST',
+}
+
+export enum DayOfWeek {
+  MONDAY = 'MONDAY',
+  TUESDAY = 'TUESDAY',
+  WEDNESDAY = 'WEDNESDAY',
+  THURSDAY = 'THURSDAY',
+  FRIDAY = 'FRIDAY',
+  SATURDAY = 'SATURDAY',
+  SUNDAY = 'SUNDAY',
+}
+
+export class DayOfMonth {
+  position: Position;
+  day: (number | DayOfWeek);
+
+  private constructor(position: Position, day: (number | DayOfWeek)) {
+    this.position = position;
+    this.day = day;
+  }
+
+  static Each(day: number): DayOfMonth {
+    if (day < 1 || day > 31) {
+      throw new Error('Day must be between 1 and 31');
+    }
+    return new DayOfMonth(Position.DAY, day);
+  }
+
+  static PositionalDayOfWeek(position: Position, day: DayOfWeek): DayOfMonth {
+    if (position === Position.DAY) {
+      throw new Error('Use DayOfMonth.Each() to create a monthly recurring transaction on the same calendar day');
+    }
+    return new DayOfMonth(position, day)
+  }
+
+  static parse(s: string): DayOfMonth {
+    const parts = s.split('-');
+    const position = Position[parts[0]];
+    if (position === Position.DAY) {
+      return DayOfMonth.Each(Number.parseInt(parts[1]));
+    } else {
+      return DayOfMonth.PositionalDayOfWeek(position, DayOfWeek[parts[1]]);
+    }
+  }
+
+  toString(): string {
+    return `${this.position}-${this.day}`
+  }
+}
+
+export class DayOfYear {
+  month: number;
+  day: number;
+
+  constructor(month: number, day: number) {
+    this.month = month;
+    this.day = day;
+  }
+
+  static parse(s: string): DayOfYear {
+    if (!s.match(/[0-9]{2}-[0-9]{2}/)) {
+      throw new Error(`Invalid format for DayOfYear: ${s}`)
+    }
+    const parts = s.split('-').map(part => Number.parseInt(part));
+    if (parts[0] < 1 || parts[0] > 12) {
+      throw new Error(`Invalid month for DayOfYear: ${parts[0]}`);
+    }
+    let maxDay: number;
+    switch (parts[0]) {
+      case 2:
+        maxDay = 29;
+        break;
+      case 4:
+      case 6:
+      case 9:
+      case 11:
+        maxDay = 30;
+        break;
+      default:
+        maxDay = 31;
+    }
+    if (parts[1] < 1 || parts[1] > maxDay) {
+      throw new Error(`Invalid day for DayOfYear: ${parts[0]}`);
+    }
+    return new DayOfYear(parts[0], parts[1]);
+  }
+
+  toString(): string {
+    const monthString = this.month.toString().padStart(2, '0')
+    const dayString = this.day.toString().padStart(2, '0')
+    return `${monthString}-${dayString}`
+  }
+}

src/app/shared/twigs.http.service.ts

@@ -1,109 +1,77 @@
 import { Injectable } from '@angular/core';
-import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http';
-import { BehaviorSubject, Observable, pipe, Subscriber } from 'rxjs';
 import { User, UserPermission, Permission, AuthToken } from '../users/user';
 import { TwigsService } from './twigs.service';
 import { Budget } from '../budgets/budget';
 import { Category } from '../categories/category';
 import { Transaction } from '../transactions/transaction';
 import { environment } from '../../environments/environment';
-import { map } from 'rxjs/operators';
+import { Frequency, RecurringTransaction } from '../recurringtransactions/recurringtransaction';
 
 @Injectable({
   providedIn: 'root'
 })
 export class TwigsHttpService implements TwigsService {
 
-  private options = {
-    withCredentials: true
-  };
   private apiUrl = environment.apiUrl;
-  private budgets: BehaviorSubject<Budget[]> = new BehaviorSubject(null);
 
   constructor(
-    private http: HttpClient,
     private storage: Storage
   ) { }
 
-  login(email: string, password: string): Observable<User> {
+  async login(email: string, password: string): Promise<User> {
-    return new Observable(emitter => {
+    const url = new URL('/api/users/login', this.apiUrl)
-      const params = {
+    const auth: AuthToken = await this.request(url, HttpMethod.POST, {
-        'username': email,
+      'username': email,
-        'password': password
+      'password': password
-      };
-      this.http.post<AuthToken>(this.apiUrl + '/users/login', params, this.options)
-        .subscribe(
-          auth => {
-            // TODO: Use token expiration to determine cookie expiration
-            this.storage.setItem('Authorization', auth.token);
-            this.storage.setItem('userId', auth.userId);
-            this.getProfile(auth.userId).subscribe(user => emitter.next(user), error => emitter.error(error));
-          },
-          error => emitter.error(error)
-        );
     });
+    this.storage.setItem('Authorization', auth.token);
+    this.storage.setItem('userId', auth.userId);
+    return await this.getProfile(auth.userId);
   }
 
-  register(username: string, email: string, password: string): Observable<User> {
+  register(username: string, email: string, password: string): Promise<User> {
-    const params = {
+    const body = {
       'username': username,
       'email': email,
       'password': password
     };
-    return this.http.post<User>(this.apiUrl + '/users/register', params, this.options);
+    const url = new URL('/api/users/register', this.apiUrl)
+    return this.request<User>(url, HttpMethod.POST, body);
   }
 
-  logout(): Observable<void> {
+  logout(): Promise<void> {
-    return new Observable(emitter => {
+    this.storage.removeItem('Authorization');
-      this.storage.removeItem('Authorization');
+    this.storage.removeItem('userId');
-      this.storage.removeItem('userId');
+    return Promise.resolve()
-      emitter.next();
+    // TODO: Implement this to revoke the token server-side as well
-      emitter.complete();
-    })
-    // TODO: Implement this when JWT auth is implemented
     // return this.http.post<void>(this.apiUrl + '/login?logout', this.options);
   }
 
   // Budgets
-  getBudgets(): Observable<Budget[]> {
+  getBudgets(): Promise<Budget[]> {
-    this.http.get<Budget[]>(this.apiUrl + '/budgets', this.options)
+    const url = new URL('/api/budgets', this.apiUrl)
-      .subscribe(budgets => {
+    return this.request(url, HttpMethod.GET)
-        this.budgets.next(budgets);
-      });
-    return this.budgets;
   }
 
-  getBudgetBalance(id: string): Observable<number> {
+  getBudgetBalance(
-    return this.http.get<any>(`${this.apiUrl}/transactions/sum?budgetId=${id}`, this.options)
+    id: string,
-      .pipe(map(obj => obj.balance));
+    from?: Date,
+    to?: Date
+  ): Promise<number> {
+    const url = new URL('/api/transactions/sum', this.apiUrl)
+    url.searchParams.set('budgetId', id)
+    if (from) {
+      url.searchParams.set('from', from.toISOString());
+    }
+    if (to) {
+      url.searchParams.set('to', to.toISOString());
+    }
+    return this.request(url, HttpMethod.GET).then((res: any) => res.balance)
   }
 
-  getBudget(id: string): Observable<Budget> {
+  getBudget(id: string): Promise<Budget> {
-    return new Observable(emitter => {
+    const url = new URL(`/api/budgets/${id}`, this.apiUrl)
-      var cachedBudget: Budget
+    return this.request(url, HttpMethod.GET)
-      if (this.budgets.value) {
-        cachedBudget = this.budgets.value.find(budget => {
-          return budget.id === id;
-        });
-      }
-      if (cachedBudget) {
-        emitter.next(cachedBudget);
-        emitter.complete();
-      } else {
-        this.http.get<Budget>(`${this.apiUrl}/budgets/${id}`, this.options)
-          .subscribe(budget => {
-            var oldBudgets = JSON.parse(JSON.stringify(this.budgets.value));
-            if (!oldBudgets) {
-              oldBudgets = [];
-            }
-            oldBudgets.push(budget);
-            oldBudgets.sort();
-            this.budgets.next(oldBudgets);
-            emitter.next(budget);
-            emitter.complete();
-          })
-      }
-    })
   }
 
   createBudget(
@@ -111,8 +79,9 @@ export class TwigsHttpService implements TwigsService {
     name: string,
     description: string,
     users: UserPermission[],
-  ): Observable<Budget> {
+  ): Promise<Budget> {
-    const params = {
+    const url = new URL('/api/budgets', this.apiUrl)
+    const body = {
       'id': id,
       'name': name,
       'description': description,
@@ -123,19 +92,12 @@ export class TwigsHttpService implements TwigsService {
         };
       })
     };
-    return this.http.post<Budget>(this.apiUrl + '/budgets', params, this.options)
+    return this.request(url, HttpMethod.POST, body)
-      .pipe(map(budget => {
-        var updatedBudgets = JSON.parse(JSON.stringify(this.budgets.value));
-        updatedBudgets.push(budget);
-        updatedBudgets.sort();
-        this.budgets.next(updatedBudgets);
-        return budget
-      }))
   }
 
-  updateBudget(id: string, changes: object): Observable<Budget> {
+  updateBudget(id: string, budget: Budget): Promise<Budget> {
-    let budget = changes as Budget;
+    const url = new URL(`/api/budgets/${id}`, this.apiUrl)
-    const params = {
+    const body = {
       'name': budget.name,
       'description': budget.description,
       'users': budget.users.map(userPermission => {
@@ -145,55 +107,47 @@ export class TwigsHttpService implements TwigsService {
         };
       })
     };
-    return this.http.put<Budget>(`${this.apiUrl}/budgets/${id}`, params, this.options)
+    return this.request(url, HttpMethod.PUT, body)
-      .pipe(map(budget => {
-        var updatedBudgets: Budget[] = JSON.parse(JSON.stringify(this.budgets.value));
-        var index = updatedBudgets.findIndex(oldBudget => oldBudget.id === id);
-        if (index > -1) {
-          updatedBudgets.splice(index, 1);
-        }
-        updatedBudgets.push(budget);
-        updatedBudgets.sort();
-        this.budgets.next(updatedBudgets);
-        return budget
-      }));
   }
 
-  deleteBudget(id: String): Observable<void> {
+  deleteBudget(id: String): Promise<void> {
-    return this.http.delete<void>(`${this.apiUrl}/budgets/${id}`, this.options)
+    const url = new URL(`/api/budgets/${id}`, this.apiUrl)
-      .pipe(map(() => {
+    return this.request(url, HttpMethod.DELETE)
-        var updatedBudgets: Budget[] = JSON.parse(JSON.stringify(this.budgets.value));
-        var index = updatedBudgets.findIndex(oldBudget => oldBudget.id === id);
-        if (index > -1) {
-          updatedBudgets.splice(index, 1);
-        }
-        updatedBudgets.sort();
-        this.budgets.next(updatedBudgets);
-        return;
-      }));
   }
 
   // Categories
-  getCategories(budgetId: string, count?: number): Observable<Category[]> {
+  getCategories(budgetId: string, count?: number): Promise<Category[]> {
-    const params = {
+    const url = new URL(`/api/categories`, this.apiUrl)
-      params: new HttpParams()
+    url.searchParams.set('budgetIds', budgetId)
-        .set('budgetIds', `${budgetId}`)
+    url.searchParams.set('archived', 'false')
-        .set('archived', false)
+    return this.request(url, HttpMethod.GET);
-    };
-    return this.http.get<Category[]>(`${this.apiUrl}/categories`, Object.assign(params, this.options));
   }
 
-  getCategory(id: string): Observable<Category> {
+  getCategory(id: string): Promise<Category> {
-    return this.http.get<Category>(`${this.apiUrl}/categories/${id}`, this.options);
+    const url = new URL(`/api/categories/${id}`, this.apiUrl)
+    return this.request(url, HttpMethod.GET);
   }
 
-  getCategoryBalance(id: string): Observable<number> {
+  async getCategoryBalance(
-    return this.http.get<any>(`${this.apiUrl}/transactions/sum?categoryId=${id}`, this.options)
+    id: string,
-      .pipe(map(obj => obj.balance));
+    from?: Date,
+    to?: Date
+  ): Promise<number> {
+    const url = new URL(`/api/transactions/sum`, this.apiUrl)
+    url.searchParams.set('categoryId', id)
+    if (from) {
+      url.searchParams.set('from', from.toISOString());
+    }
+    if (to) {
+      url.searchParams.set('to', to.toISOString());
+    }
+    const res: any = await this.request(url, HttpMethod.GET);
+    return res.balance;
   }
 
-  createCategory(id: string, budgetId: string, name: string, description: string, amount: number, isExpense: boolean): Observable<Category> {
+  createCategory(id: string, budgetId: string, name: string, description: string, amount: number, isExpense: boolean): Promise<Category> {
-    const params = {
+    const url = new URL(`/api/categories`, this.apiUrl)
+    const body = {
       'id': id,
       'title': name,
       'description': description,
@@ -201,57 +155,55 @@ export class TwigsHttpService implements TwigsService {
       'expense': isExpense,
       'budgetId': budgetId
     };
-    return this.http.post<Category>(this.apiUrl + '/categories', params, this.options);
+    return this.request(url, HttpMethod.POST, body);
   }
 
-  updateCategory(id: string, changes: object): Observable<Category> {
+  updateCategory(id: string, changes: object): Promise<Category> {
-    return this.http.put<Category>(`${this.apiUrl}/categories/${id}`, changes, this.options);
+    const url = new URL(`/api/categories/${id}`, this.apiUrl)
+    return this.request(url, HttpMethod.PUT, changes);
   }
 
-  deleteCategory(id: string): Observable<void> {
+  deleteCategory(id: string): Promise<void> {
-    return this.http.delete<void>(`${this.apiUrl}/categories/${id}`, this.options);
+    const url = new URL(`/api/categories/${id}`, this.apiUrl)
+    return this.request(url, HttpMethod.DELETE);
   }
 
   // Transactions
-  getTransactions(
+  async getTransactions(
     budgetId?: string,
     categoryId?: string,
     count?: number,
     from?: Date,
     to?: Date
-  ): Observable<Transaction[]> {
+  ): Promise<Transaction[]> {
-    let httpParams = new HttpParams();
+    const url = new URL(`/api/transactions`, this.apiUrl)
     if (budgetId) {
-      httpParams = httpParams.set('budgetIds', `${budgetId}`);
+      url.searchParams.set('budgetIds', budgetId);
     }
     if (categoryId) {
-      httpParams = httpParams.set('categoryIds', `${categoryId}`);
+      url.searchParams.set('categoryIds', categoryId);
     }
     if (from) {
-      httpParams = httpParams.set('from', from.toISOString());
+      url.searchParams.set('from', from.toISOString());
     }
     if (to) {
-      httpParams = httpParams.set('to', to.toISOString());
+      url.searchParams.set('to', to.toISOString());
     }
-    const params = { params: httpParams };
+    const transactions: Transaction[] = await this.request(url, HttpMethod.GET)
-    return this.http.get<Transaction[]>(`${this.apiUrl}/transactions`, Object.assign(params, this.options))
+    transactions.forEach(transaction => {
-      .pipe(map(transactions => {
+      transaction.date = new Date(transaction.date);
-        transactions.forEach(transaction => {
+    })
-          transaction.date = new Date(transaction.date);
+    return transactions
-        });
-        return transactions;
-      }));
   }
 
-  getTransaction(id: string): Observable<Transaction> {
+  async getTransaction(id: string): Promise<Transaction> {
-    return this.http.get<Transaction>(`${this.apiUrl}/transactions/${id}`, this.options)
+    const url = new URL(`/api/transactions/${id}`, this.apiUrl)
-      .pipe(map(transaction => {
+    const transaction: Transaction = await this.request(url, HttpMethod.GET)
-        transaction.date = new Date(transaction.date);
+    transaction.date = new Date(transaction.date)
-        return transaction;
+    return transaction
-      }));
   }
 
-  createTransaction(
+  async createTransaction(
     id: string,
     budgetId: string,
     name: string,
@@ -260,8 +212,9 @@ export class TwigsHttpService implements TwigsService {
     date: Date,
     expense: boolean,
     category: string
-  ): Observable<Transaction> {
+  ): Promise<Transaction> {
-    const params = {
+    const url = new URL(`/api/transactions`, this.apiUrl)
+    const body = {
       'id': id,
       'title': name,
       'description': description,
@@ -271,25 +224,147 @@ export class TwigsHttpService implements TwigsService {
       'categoryId': category,
       'budgetId': budgetId
     };
-    return this.http.post<Transaction>(this.apiUrl + '/transactions', params, this.options);
+    const transaction: Transaction = await this.request(url, HttpMethod.POST, body)
+    transaction.date = new Date(transaction.date)
+    return transaction
   }
 
-  updateTransaction(id: string, changes: object): Observable<Transaction> {
+  async updateTransaction(id: string, transaction: Transaction): Promise<Transaction> {
-    return this.http.put<Transaction>(`${this.apiUrl}/transactions/${id}`, changes, this.options);
+    const body: any = transaction;
+    body.date = transaction.date.toISOString()
+    const url = new URL(`/api/transactions/${id}`, this.apiUrl)
+    const updatedTransaction: Transaction = await this.request(url, HttpMethod.PUT, body)
+    updatedTransaction.date = new Date(updatedTransaction.date)
+    return updatedTransaction
   }
 
-  deleteTransaction(id: string): Observable<void> {
+  deleteTransaction(id: string): Promise<void> {
-    return this.http.delete<void>(`${this.apiUrl}/transactions/${id}`, this.options);
+    const url = new URL(`/api/transactions/${id}`, this.apiUrl)
+    return this.request(url, HttpMethod.DELETE)
+  }
+
+  // Recurring Transactions
+  async getRecurringTransactions(
+    budgetId?: string,
+    categoryId?: string,
+    count?: number,
+    from?: Date,
+    to?: Date
+  ): Promise<RecurringTransaction[]> {
+    const url = new URL(`/api/recurringtransactions`, this.apiUrl)
+    if (budgetId) {
+      url.searchParams.set('budgetIds', budgetId);
+    }
+    if (categoryId) {
+      url.searchParams.set('categoryIds', categoryId);
+    }
+    if (from) {
+      url.searchParams.set('from', from.toISOString());
+    }
+    if (to) {
+      url.searchParams.set('to', to.toISOString());
+    }
+    const transactions: RecurringTransaction[] = await this.request(url, HttpMethod.GET)
+    transactions.forEach(transaction => {
+      transaction.frequency = Frequency.parse(transaction.frequency as any)
+    })
+    return transactions
+  }
+
+  async getRecurringTransaction(id: string): Promise<RecurringTransaction> {
+    const url = new URL(`/api/recurringtransactions/${id}`, this.apiUrl)
+    const transaction: RecurringTransaction = await this.request(url, HttpMethod.GET)
+    transaction.frequency = Frequency.parse(transaction.frequency as any)
+    return transaction
+  }
+
+  async createRecurringTransaction(
+    id: string,
+    budgetId: string,
+    name: string,
+    description: string,
+    amount: number,
+    frequency: Frequency,
+    start: Date,
+    expense: boolean,
+    category: string,
+    end?: Date,
+  ): Promise<RecurringTransaction> {
+    const url = new URL(`/api/transactions`, this.apiUrl)
+    const body = {
+      'id': id,
+      'title': name,
+      'description': description,
+      'frequency': frequency.toString(),
+      'start': start.toISOString(),
+      'finish': end?.toISOString(),
+      'amount': amount,
+      'expense': expense,
+      'categoryId': category,
+      'budgetId': budgetId
+    };
+    const transaction: RecurringTransaction = await this.request(url, HttpMethod.POST, body)
+    transaction.frequency = Frequency.parse(transaction.frequency as any)
+    return transaction
+  }
+
+  async updateRecurringTransaction(id: string, transaction: RecurringTransaction): Promise<RecurringTransaction> {
+    const body: any = transaction;
+    body.frequency = transaction.frequency.toString()
+    const url = new URL(`/api/transactions/${id}`, this.apiUrl)
+    const updatedTransaction: RecurringTransaction = await this.request(url, HttpMethod.PUT, body)
+    updatedTransaction.frequency = Frequency.parse(updatedTransaction.frequency as any)
+    return updatedTransaction
+  }
+
+  deleteRecurringTransaction(id: string): Promise<void> {
+    const url = new URL(`/api/recurringtransactions/${id}`, this.apiUrl)
+    return this.request(url, HttpMethod.DELETE)
   }
 
   // Users
-  getProfile(id: string): Observable<User> {
+  getProfile(id: string): Promise<User> {
-    return this.http.get<User>(`${this.apiUrl}/users/${id}`, this.options);
+    const url = new URL(`/api/users/${id}`, this.apiUrl)
+    return this.request(url, HttpMethod.GET)
   }
 
-  getUsersByUsername(username: string): Observable<User[]> {
+  getUsersByUsername(username: string): Promise<User[]> {
-    return new Observable(subscriber => {
+    return Promise.reject("Not yet implemented")
-      subscriber.error("Not yet implemented")
+  }
-    });
+
+  private async request<T>(url: URL, method: HttpMethod, body?: any): Promise<T> {
+    const headers = {
+      'content-type': 'application/json'
+    }
+
+    const token = this.storage.getItem('Authorization')
+    if (token) {
+      headers['authorization'] = `Bearer ${token}`
+    }
+
+    let jsonBody: string;
+    if (body) {
+      jsonBody = JSON.stringify(body)
+    }
+
+    const res = await fetch(url, {
+      credentials: 'include',
+      headers: headers,
+      method: method,
+      body: jsonBody
+    })
+
+    if (res.status === 204) {
+      // No content
+      return
+    }
+    return res.json()
   }
 }
+
+enum HttpMethod {
+  GET = "GET",
+  POST = "POST",
+  PUT = "PUT",
+  DELETE = "DELETE",
+}

src/app/shared/twigs.local.service.ts

@@ -1,12 +1,11 @@
 import { Injectable } from '@angular/core';
-import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http';
-import { Observable, Subscriber } from 'rxjs';
 import { User, UserPermission } from '../users/user';
 import { TwigsService } from './twigs.service';
 import { Budget } from '../budgets/budget';
 import { Category } from '../categories/category';
 import { Transaction } from '../transactions/transaction';
 import { randomId } from '../shared/utils';
+import { Frequency, RecurringTransaction } from '../recurringtransactions/recurringtransaction';
 
 /**
  * This is intended to be a very simple implementation of the TwigsService used for testing out the UI and quickly iterating on it.
@@ -18,7 +17,6 @@ import { randomId } from '../shared/utils';
 export class TwigsLocalService implements TwigsService {
 
   constructor(
-    private http: HttpClient
   ) { }
 
   private users: User[] = [new User(randomId(), 'test', 'test@example.com')];
@@ -27,63 +25,53 @@ export class TwigsLocalService implements TwigsService {
   private categories: Category[] = [];
 
   // Auth
-  login(email: string, password: string): Observable<User> {
+  login(email: string, password: string): Promise<User> {
-    return new Observable(subscriber => {
+    return new Promise((resolve, reject) => {
       const filteredUsers = this.users.filter(user => {
         return (user.email === email || user.username === email);
       });
       if (filteredUsers.length !== 0) {
-        subscriber.next(filteredUsers[0]);
+        resolve(filteredUsers[0]);
       } else {
-        subscriber.error('No users found');
+        reject('No users found');
       }
     });
   }
 
-  register(username: string, email: string, password: string): Observable<User> {
+  register(username: string, email: string, password: string): Promise<User> {
-    return new Observable(subscriber => {
+    return new Promise((resolve, reject) => {
       const user = new User();
       user.username = username;
       user.email = email;
       user.id = randomId();
       this.users.push(user);
-      subscriber.next(user);
+      resolve(user);
-      subscriber.complete();
     });
   }
 
-  logout(): Observable<void> {
+  logout(): Promise<void> {
-    return new Observable(subscriber => {
+    return Promise.resolve()
-      subscriber.complete();
-    });
   }
 
   // Budgets
-  getBudgets(): Observable<Budget[]> {
+  getBudgets(): Promise<Budget[]> {
-    return new Observable(subscriber => {
+    return Promise.resolve(this.budgets)
-      subscriber.next(this.budgets);
-      subscriber.complete();
-    });
   }
 
-  getBudgetBalance(id: string): Observable<number> {
+  getBudgetBalance(id: string, from?: Date, to?: Date): Promise<number> {
-    return new Observable(emitter => {
+    return Promise.resolve(200)
-      emitter.next(200);
-      emitter.complete()
-    })
   }
 
-  getBudget(id: string): Observable<Budget> {
+  getBudget(id: string): Promise<Budget> {
-    return new Observable(subscriber => {
+    return new Promise((resolve, reject) => {
       const budget = this.budgets.filter(it => {
         return it.id === id;
       })[0];
       if (budget) {
-        subscriber.next(budget);
+        resolve(budget);
       } else {
-        subscriber.error('No budget found for given id');
+        reject('No budget found for given id');
       }
-      subscriber.complete();
     });
   }
 
@@ -92,21 +80,20 @@ export class TwigsLocalService implements TwigsService {
     name: string,
     description: string,
     users: UserPermission[],
-  ): Observable<Budget> {
+  ): Promise<Budget> {
-    return new Observable(subscriber => {
+    return new Promise((resolve, reject) => {
       const budget = new Budget();
       budget.name = name;
       budget.description = description;
       budget.users = users;
       budget.id = id;
       this.budgets.push(budget);
-      subscriber.next(budget);
+      resolve(budget);
-      subscriber.complete();
     });
   }
 
-  updateBudget(id: string, changes: object): Observable<Budget> {
+  updateBudget(id: string, budget: Budget): Promise<Budget> {
-    return new Observable(subscriber => {
+    return new Promise((resolve, reject) => {
       const budget = this.budgets.filter(it => {
         return it.id === id;
       })[0];
@@ -114,7 +101,7 @@ export class TwigsLocalService implements TwigsService {
         const index = this.budgets.indexOf(budget);
         this.updateValues(
           budget,
-          changes,
+          budget,
           [
             'name',
             'description',
@@ -122,55 +109,49 @@ export class TwigsLocalService implements TwigsService {
           ]
         );
         this.budgets[index] = budget;
-        subscriber.next(budget);
+        resolve(budget);
       } else {
-        subscriber.error('No budget found for given id');
+        reject('No budget found for given id');
       }
-      subscriber.complete();
     });
   }
 
-  deleteBudget(id: string): Observable<void> {
+  deleteBudget(id: string): Promise<void> {
-    return new Observable(subscriber => {
+    return new Promise((resolve, reject) => {
       const budget = this.budgets.filter(it => {
         return budget.id === id;
       })[0];
       if (budget) {
         const index = this.budgets.indexOf(budget);
         delete this.budgets[index];
-        subscriber.complete();
+        resolve();
       } else {
-        subscriber.error('No budget found for given id');
+        reject('No budget found for given id');
       }
     });
   }
 
   // Categories
-  getCategories(budgetId: string, count?: number): Observable<Category[]> {
+  getCategories(budgetId: string, count?: number): Promise<Category[]> {
-    return new Observable(subscriber => {
+    return new Promise((resolve, reject) => {
-      subscriber.next(this.categories.filter(category => {
+      resolve(this.categories.filter(category => {
         return category.budgetId === budgetId;
       }));
-      subscriber.complete();
     });
   }
 
-  getCategory(id: string): Observable<Category> {
+  getCategory(id: string): Promise<Category> {
-    return new Observable(subscriber => {
+    return new Promise((resolve, reject) => {
-      subscriber.next(this.findById(this.categories, id));
+      resolve(this.findById(this.categories, id));
-      subscriber.complete();
     });
   }
 
-  getCategoryBalance(id: string): Observable<number> {
+  getCategoryBalance(id: string, from?: Date, to?: Date): Promise<number> {
-    return new Observable(emitter => {
+    return Promise.resolve(20);
-      emitter.next(20);
-      emitter.complete()
-    })
   }
 
-  createCategory(id: string, budgetId: string, name: string, description: string, amount: number, isExpense: boolean): Observable<Category> {
+  createCategory(id: string, budgetId: string, name: string, description: string, amount: number, isExpense: boolean): Promise<Category> {
-    return Observable.create(subscriber => {
+    return new Promise((resolve, reject) => {
       const category = new Category();
       category.title = name;
       category.description = description;
@@ -179,13 +160,12 @@ export class TwigsLocalService implements TwigsService {
       category.budgetId = budgetId;
       category.id = id;
       this.categories.push(category);
-      subscriber.next(category);
+      resolve(category);
-      subscriber.complete();
     });
   }
 
-  updateCategory(id: string, changes: object): Observable<Category> {
+  updateCategory(id: string, changes: object): Promise<Category> {
-    return new Observable(subscriber => {
+    return new Promise((resolve, reject) => {
       const category = this.findById(this.categories, id);
       if (category) {
         const index = this.categories.indexOf(category);
@@ -200,31 +180,30 @@ export class TwigsLocalService implements TwigsService {
           ]
         );
         this.categories[index] = category;
-        subscriber.next(category);
+        resolve(category);
       } else {
-        subscriber.error('No category found for given id');
+        reject('No category found for given id');
       }
-      subscriber.complete();
     });
   }
 
-  deleteCategory(id: string): Observable<void> {
+  deleteCategory(id: string): Promise<void> {
-    return new Observable(subscriber => {
+    return new Promise((resolve, reject) => {
       const category = this.findById(this.categories, id);
       if (category) {
         const index = this.categories.indexOf(category);
         delete this.transactions[index];
-        subscriber.complete();
+        resolve();
       } else {
-        subscriber.error('No category found for given id');
+        reject('No category found for given id');
       }
     });
   }
 
   // Transactions
-  getTransactions(budgetId?: string, categoryId?: string, count?: number): Observable<Transaction[]> {
+  getTransactions(budgetId?: string, categoryId?: string, count?: number): Promise<Transaction[]> {
-    return new Observable(subscriber => {
+    return new Promise((resolve, reject) => {
-      subscriber.next(this.transactions.filter(transaction => {
+      resolve(this.transactions.filter(transaction => {
         let include = true;
         if (budgetId) {
           include = transaction.budgetId === budgetId;
@@ -234,15 +213,11 @@ export class TwigsLocalService implements TwigsService {
         }
         return include;
       }));
-      subscriber.complete();
     });
   }
 
-  getTransaction(id: string): Observable<Transaction> {
+  getTransaction(id: string): Promise<Transaction> {
-    return new Observable(subscriber => {
+    return Promise.resolve(this.findById(this.transactions, id));
-      subscriber.next(this.findById(this.transactions, id));
-      subscriber.complete();
-    });
   }
 
   createTransaction(
@@ -254,8 +229,8 @@ export class TwigsLocalService implements TwigsService {
     date: Date,
     isExpense: boolean,
     category: string
-  ): Observable<Transaction> {
+  ): Promise<Transaction> {
-    return new Observable(subscriber => {
+    return new Promise((resolve, reject) => {
       const transaction = new Transaction();
       transaction.title = name;
       transaction.description = description;
@@ -266,13 +241,12 @@ export class TwigsLocalService implements TwigsService {
       transaction.budgetId = budgetId;
       transaction.id = randomId();
       this.transactions.push(transaction);
-      subscriber.next(transaction);
+      resolve(transaction);
-      subscriber.complete();
     });
   }
 
-  updateTransaction(id: string, changes: object): Observable<Transaction> {
+  updateTransaction(id: string, changes: object): Promise<Transaction> {
-    return new Observable(subscriber => {
+    return new Promise((resolve, reject) => {
       const transaction = this.findById(this.transactions, id);
       if (transaction) {
         const index = this.transactions.indexOf(transaction);
@@ -291,38 +265,71 @@ export class TwigsLocalService implements TwigsService {
           ]
         );
         this.transactions[index] = transaction;
-        subscriber.next(transaction);
+        resolve(transaction);
       } else {
-        subscriber.error('No transaction found for given id');
+        reject('No transaction found for given id');
       }
-      subscriber.complete();
     });
   }
 
-  deleteTransaction(id: string): Observable<void> {
+  deleteTransaction(id: string): Promise<void> {
-    return new Observable(subscriber => {
+    return new Promise((resolve, reject) => {
       const transaction = this.findById(this.transactions, id);
       if (transaction) {
         const index = this.transactions.indexOf(transaction);
         delete this.transactions[index];
-        subscriber.complete();
+        resolve();
       } else {
-        subscriber.error('No transaction found for given id');
+        reject('No transaction found for given id');
       }
     });
   }
 
-  // Users
+  // Recurring Transactions
-  getProfile(id: string): Observable<User> {
+  getRecurringTransactions(
-    return new Observable(subscriber => {
+    budgetId?: string,
-      subscriber.error("Not yet implemented")
+    categoryId?: string,
-    });
+    count?: number,
+    from?: Date,
+    to?: Date
+  ): Promise<RecurringTransaction[]> {
+    return Promise.reject("Not yet implemented")
   }
 
-  getUsersByUsername(username: string): Observable<User[]> {
+  getRecurringTransaction(id: string): Promise<RecurringTransaction> {
-    return new Observable(subscriber => {
+    return Promise.reject("Not yet implemented")
-      subscriber.next(this.users.filter(user => user.username.indexOf(username) > -1 ));
+  }
-    });
+
+  createRecurringTransaction(
+    id: string,
+    budgetId: string,
+    name: string,
+    description: string,
+    amount: number,
+    frequency: Frequency,
+    start: Date,
+    expense: boolean,
+    category: string,
+    end?: Date,
+  ): Promise<RecurringTransaction> {
+    return Promise.reject("Not yet implemented")
+  }
+
+  updateRecurringTransaction(id: string, transaction: RecurringTransaction): Promise<RecurringTransaction> {
+    return Promise.reject("Not yet implemented")
+  }
+
+  deleteRecurringTransaction(id: string): Promise<void> {
+    return Promise.reject("Not yet implemented")
+  }
+
+  // Users
+  getProfile(id: string): Promise<User> {
+    return Promise.reject("Not yet implemented");
+  }
+
+  getUsersByUsername(username: string): Promise<User[]> {
+    return Promise.resolve(this.users.filter(user => user.username.indexOf(username) > -1))
   }
 
   private updateValues(old: object, changes: object, keys: string[]) {

src/app/shared/twigs.service.ts

@@ -1,36 +1,36 @@
 import { InjectionToken } from '@angular/core';
-import { Observable } from 'rxjs';
 import { User, UserPermission } from '../users/user';
 import { Budget } from '../budgets/budget';
 import { Category } from '../categories/category';
+import { RecurringTransaction, Frequency } from '../recurringtransactions/recurringtransaction';
 import { Transaction } from '../transactions/transaction';
 
 export interface TwigsService {
   // Auth
-  login(email: string, password: string): Observable<User>;
+  login(email: string, password: string): Promise<User>;
-  register(username: string, email: string, password: string): Observable<User>;
+  register(username: string, email: string, password: string): Promise<User>;
-  logout(): Observable<void>;
+  logout(): Promise<void>;
 
   // Budgets
-  getBudgets(): Observable<Budget[]>;
+  getBudgets(): Promise<Budget[]>;
-  getBudget(id: string): Observable<Budget>;
+  getBudget(id: string): Promise<Budget>;
-  getBudgetBalance(id: string): Observable<number>;
+  getBudgetBalance(id: string, from?: Date, to?: Date): Promise<number>;
   createBudget(
     id: string,
     name: string,
     description: string,
     users: UserPermission[],
-  ): Observable<Budget>;
+  ): Promise<Budget>;
-  updateBudget(id: string, changes: object): Observable<Budget>;
+  updateBudget(id: string, budget: Budget): Promise<Budget>;
-  deleteBudget(id: string): Observable<void>;
+  deleteBudget(id: string): Promise<void>;
 
   // Categories
-  getCategories(budgetId?: string, count?: number): Observable<Category[]>;
+  getCategories(budgetId?: string, count?: number): Promise<Category[]>;
-  getCategory(id: string): Observable<Category>;
+  getCategory(id: string): Promise<Category>;
-  getCategoryBalance(id: string): Observable<number>;
+  getCategoryBalance(id: string, from?: Date, to?: Date): Promise<number>;
-  createCategory(id: string, budgetId: string, name: string, description: string, amount: number, isExpense: boolean): Observable<Category>;
+  createCategory(id: string, budgetId: string, name: string, description: string, amount: number, isExpense: boolean): Promise<Category>;
-  updateCategory(id: string, changes: object): Observable<Category>;
+  updateCategory(id: string, category: Category): Promise<Category>;
-  deleteCategory(id: string): Observable<void>;
+  deleteCategory(id: string): Promise<void>;
 
   // Transactions
   getTransactions(
@@ -39,8 +39,8 @@ export interface TwigsService {
     count?: number,
     from?: Date,
     to?: Date
-  ): Observable<Transaction[]>;
+  ): Promise<Transaction[]>;
-  getTransaction(id: string): Observable<Transaction>;
+  getTransaction(id: string): Promise<Transaction>;
   createTransaction(
     id: string,
     budgetId: string,
@@ -50,12 +50,36 @@ export interface TwigsService {
     date: Date,
     isExpense: boolean,
     category: string
-  ): Observable<Transaction>;
+  ): Promise<Transaction>;
-  updateTransaction(id: string, changes: object): Observable<Transaction>;
+  updateTransaction(id: string, transaction: Transaction): Promise<Transaction>;
-  deleteTransaction(id: string): Observable<void>;
+  deleteTransaction(id: string): Promise<void>;
 
-  getProfile(id: string): Observable<User>;
+  // Recurring Transactions
-  getUsersByUsername(username: string): Observable<User[]>;
+  getRecurringTransactions(
+    budgetId?: string,
+    categoryId?: string,
+    count?: number,
+    from?: Date,
+    to?: Date
+  ): Promise<RecurringTransaction[]>;
+  getRecurringTransaction(id: string): Promise<RecurringTransaction>;
+  createRecurringTransaction(
+    id: string,
+    budgetId: string,
+    name: string,
+    description: string,
+    amount: number,
+    frequency: Frequency,
+    start: Date,
+    expense: boolean,
+    category: string,
+    end?: Date,
+  ): Promise<RecurringTransaction>;
+  updateRecurringTransaction(id: string, transaction: RecurringTransaction): Promise<RecurringTransaction>;
+  deleteRecurringTransaction(id: string): Promise<void>;
+
+  getProfile(id: string): Promise<User>;
+  getUsersByUsername(username: string): Promise<User[]>;
 }
 
 export let TWIGS_SERVICE = new InjectionToken<TwigsService>('twigs.service');

src/app/shared/utils.ts

@@ -5,3 +5,11 @@ export function randomId(): string {
     window.crypto.getRandomValues(bytes)
     return Array.from(bytes, (byte) => CHARACTERS[byte % CHARACTERS.length]).join('')
 }
+
+export function decimalToInteger(amount: string): number {
+    if (amount[amount.length - 3] === "." || amount[amount.length - 3] === ",") {
+      return Number(amount.replace(/[,.]/g, ""))
+    } else {
+      return Number(amount + "00")
+    }
+}

src/app/transactions/add-edit-transaction/add-edit-transaction.component.html

@@ -3,13 +3,13 @@
 </div>
 <div [hidden]="!currentTransaction" *ngIf="currentTransaction" class="form transaction-form">
   <mat-form-field>
-    <input matInput [(ngModel)]="currentTransaction.title" placeholder="Name" required>
+    <input matInput [(ngModel)]="currentTransaction.title" placeholder="Name" required autocapitalize="words">
   </mat-form-field>
   <mat-form-field>
-    <textarea matInput [(ngModel)]="currentTransaction.description" placeholder="Description"></textarea>
+    <textarea matInput [(ngModel)]="currentTransaction.description" placeholder="Description" autocapitalize="sentences"></textarea>
   </mat-form-field>
   <mat-form-field>
-    <input matInput type="text" [(ngModel)]="currentTransaction.amount" placeholder="Amount" required>
+    <input matInput type="number" [(ngModel)]="currentTransaction.amount" placeholder="Amount" required step="0.01">
   </mat-form-field>
   <mat-form-field>
     <input matInput type="date" [ngModel]="transactionDate | date:'yyyy-MM-dd'"

src/app/transactions/add-edit-transaction/add-edit-transaction.component.ts

@@ -4,7 +4,8 @@ import { TransactionType } from '../transaction.type';
 import { Category } from 'src/app/categories/category';
 import { AppComponent } from 'src/app/app.component';
 import { TWIGS_SERVICE, TwigsService } from 'src/app/shared/twigs.service';
-import { MatRadioChange } from '@angular/material/radio';
+import { MatLegacyRadioChange as MatRadioChange } from '@angular/material/legacy-radio';
+import { decimalToInteger } from 'src/app/shared/utils';
 
 @Component({
   selector: 'app-add-edit-transaction',
@@ -18,7 +19,6 @@ export class AddEditTransactionComponent implements OnInit, OnChanges {
   @Input() create: boolean
   public transactionType = TransactionType;
   public categories: Category[];
-  public rawAmount: string;
   public currentTime: string;
   public transactionDate: string;
 
@@ -55,15 +55,14 @@ export class AddEditTransactionComponent implements OnInit, OnChanges {
 
   updateCategories(change: MatRadioChange) {
     this.twigsService.getCategories(this.budgetId)
-      .subscribe(newCategories => {
+      .then(newCategories => {
         this.categories = newCategories.filter(category => category.expense === change.value)
       })
   }
 
   save(): void {
-    // The amount will be input as a decimal value so we need to convert it
+    let promise;
-    // to an integer
+    this.currentTransaction.amount = decimalToInteger(String(this.currentTransaction.amount))
-    let observable;
     this.currentTransaction.date = new Date();
     const dateParts = this.transactionDate.split('-');
     this.currentTransaction.date.setFullYear(parseInt(dateParts[0], 10));
@@ -74,38 +73,34 @@ export class AddEditTransactionComponent implements OnInit, OnChanges {
     this.currentTransaction.date.setMinutes(parseInt(timeParts[1], 10));
     if (this.create) {
       // This is a new transaction, save it
-      observable = this.twigsService.createTransaction(
+      promise = this.twigsService.createTransaction(
         this.currentTransaction.id,
         this.budgetId,
         this.currentTransaction.title,
         this.currentTransaction.description,
-        Math.round(this.currentTransaction.amount * 100),
+        this.currentTransaction.amount,
         this.currentTransaction.date,
         this.currentTransaction.expense,
         this.currentTransaction.categoryId,
       );
     } else {
       // This is an existing transaction, update it
-      observable = this.twigsService.updateTransaction(
+      const updatedTransaction: Transaction = {
+        ...this.currentTransaction,
+      }
+      promise = this.twigsService.updateTransaction(
         this.currentTransaction.id,
-        {
+        updatedTransaction
-          title: this.currentTransaction.title,
-          description: this.currentTransaction.description,
-          amount: Math.round(this.currentTransaction.amount * 100),
-          date: this.currentTransaction.date,
-          categoryId: this.currentTransaction.categoryId,
-          expense: this.currentTransaction.expense
-        }
       );
     }
 
-    observable.subscribe(val => {
+    promise.then(() => {
       this.app.goBack();
     });
   }
 
   delete(): void {
-    this.twigsService.deleteTransaction(this.currentTransaction.id).subscribe(() => {
+    this.twigsService.deleteTransaction(this.currentTransaction.id).then(() => {
       this.app.goBack();
     });
   }

src/app/transactions/transaction-details/transaction-details.component.ts

@@ -25,7 +25,7 @@ export class TransactionDetailsComponent implements OnInit {
   getTransaction(): void {
     const id = this.route.snapshot.paramMap.get('id');
     this.twigsService.getTransaction(id)
-      .subscribe(transaction => {
+      .then(transaction => {
         transaction.amount /= 100;
         this.transaction = transaction;
         this.budgetId = transaction.budgetId;

src/app/transactions/transaction-list/transaction-list.component.ts

@@ -44,7 +44,7 @@ export class TransactionListComponent implements OnInit {
     }
 
     let toStr = this.route.snapshot.queryParamMap.get('to');
-    var to;
+    let to: Date;
     if (toStr) {
       let toDate = new Date(toStr);
       if (!isNaN(toDate.getTime())) {
@@ -52,7 +52,8 @@ export class TransactionListComponent implements OnInit {
       }
     }
 
-    this.twigsService.getTransactions(this.budgetIds.join(','), this.categoryIds?.join(','), null, from, to).subscribe(transactions => {
+    this.twigsService.getTransactions(this.budgetIds.join(','), this.categoryIds?.join(','), null, from, to)
+    .then(transactions => {
       this.transactions = transactions;
     });
   }

src/app/users/login/login.component.ts

@@ -32,13 +32,13 @@ export class LoginComponent implements OnInit {
   login(): void {
     this.isLoading = true;
     this.twigsService.login(this.email, this.password)
-      .subscribe(user => {
+      .then(user => {
         this.app.user.next(user);
         this.router.navigate([this.redirect || '/'])
-      },
+      })
-      error => {
+      .catch(error => {
         console.error(error)
-        //TODO: Replace this with an in-app dialog
+        // TODO: Replace this with an in-app dialog
         alert("Login failed. Please verify you have the correct credentials");
         this.isLoading = false;
       })

src/app/users/register/register.component.ts

@@ -33,10 +33,10 @@ export class RegisterComponent implements OnInit {
       return;
     }
     this.isLoading = true;
-    this.twigsService.register(this.username, this.email, this.password).subscribe(user => {
+    this.twigsService.register(this.username, this.email, this.password).then(user => {
       console.log(user);
       this.router.navigate(['/'])
-    }, error => {
+    }).catch(error => {
       console.error(error);
       alert("Registration failed!")
       this.isLoading = false;

src/app/users/user.ts

@@ -29,8 +29,8 @@ export class UserPermission {
 }
 
 export enum Permission {
-  READ,
+  READ = "READ",
-  WRITE,
+  WRITE = "WRITE",
-  MANAGE,
+  MANAGE = "MANAGE",
-  OWNER
+  OWNER = "OWNER"
 }

src/styles.scss

@@ -4,7 +4,16 @@
 // Include the common styles for Angular Material. We include this here so that you only
 // have to load a single css file for Angular Material in your app.
 // Be sure that you only ever include this mixin once!
-@include mat.core();
+// TODO(v15): As of v15 mat.legacy-core no longer includes default typography styles.
+//  The following line adds:
+//    1. Default typography styles for all components
+//    2. Styles for typography hierarchy classes (e.g. .mat-headline-1)
+//  If you specify typography styles for the components you use elsewhere, you should delete this line.
+//  If you don't need the default component typographies but still want the hierarchy styles,
+//  you can delete this line and instead use:
+//    `@include mat.legacy-typography-hierarchy(mat.define-legacy-typography-config());`
+@include mat.all-legacy-component-typographies();
+@include mat.legacy-core();
 
 // Define the palettes for your theme using the Material Design palettes available in palette.scss
 // (imported above). For each palette, you can optionally specify a default, lighter, and darker
@@ -23,8 +32,8 @@ $budget-dark-theme: mat.define-dark-theme($budget-app-primary, $budget-app-accen
 // Alternatively, you can import and @include the theme mixins for each component
 // that you are using.
 
-@include mat.all-component-themes($budget-app-theme);
+@include mat.all-legacy-component-themes($budget-app-theme);
 
 @media (prefers-color-scheme: dark) {
-    @include mat.all-component-themes($budget-dark-theme);
+    @include mat.all-legacy-component-themes($budget-dark-theme);
 }

src/test.ts

@@ -7,8 +7,6 @@ import {
   platformBrowserDynamicTesting
 } from '@angular/platform-browser-dynamic/testing';
 
-declare const require: any;
-
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
   BrowserDynamicTestingModule,
@@ -16,7 +14,3 @@ getTestBed().initTestEnvironment(
     teardown: { destroyAfterEach: false }
 }
 );
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().map(context);