Start refactoring state management

src/app/components/modal/modals/settings/settings.component.html

@@ -8,12 +8,12 @@
   <app-toggle
     [beforeText]="'Hide create tower button'"
     [afterText]="'Show create tower button'"
-    [default]="!dataService.active.userData?.hideCreateTowerButton"
-    (value)="dataService.active.userData.hideCreateTowerButton = !$event"
+    [default]="!page.userData.hideCreateTowerButton"
+    (value)="page?.setHideCreateTowerButton(!$event)"
   ></app-toggle>
 </div>
 <!-- wrapper for easier styling -->
 
-<p *ngIf="dataService.active?.towers.length == 5">There can be a maximum of <strong>5</strong> towers on each page.</p>
+<p *ngIf="page.towers?.length == 5">There can be a maximum of <strong>5</strong> towers on each page.</p>
 
 <button (click)="deletePage()">Delete current page</button>

src/app/components/modal/modals/settings/settings.component.ts

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 import { ModalService } from '../../../../services/modal.service';
 import { DataService } from '../../../../services/data.service';
+import { Page } from '../../../../model/page';
 
 @Component({
   selector: 'app-settings',
@@ -8,12 +9,16 @@ import { DataService } from '../../../../services/data.service';
   styleUrls: ['./settings.component.scss']
 })
 export class SettingsComponent {
-  constructor(public modalService: ModalService, public dataService: DataService) {}
+  constructor(public modalService: ModalService, public dataService: DataService) {
+    this.modalService.active.input.subscribe(p => (this.page = p));
+  }
+
+  page: Page;
 
   async deletePage() {
     try {
-      await this.modalService.showRemovePage(this.dataService.active.name);
-      this.dataService.remove();
+      await this.modalService.showRemovePage(this.page.name);
+      this.dataService.removePage(this.page);
       this.modalService.submit();
     } catch {
       // pass

src/app/components/pages/page/page.component.html

@@ -1,7 +1,4 @@
-<button
-  *ngIf="page && page.towers.length < 5 && !dataService.active?.userData?.hideCreateTowerButton"
-  (click)="createTower()"
->
+<button *ngIf="page && page.towers.length < 5 && !page.userData?.hideCreateTowerButton" (click)="page.addTower()">
   Create tower
 </button>
 

src/app/components/pages/page/page.component.ts

@@ -16,7 +16,6 @@ export class PageComponent {
     }
 
     this._page = value;
-    value.subscribe(() => this.updateDates());
     this.updateDates();
   }
 
@@ -54,10 +53,6 @@ export class PageComponent {
 
   constructor(private modalService: ModalService, public dataService: DataService) {}
 
-  createTower() {
-    this.page.addTower();
-  }
-
   dropDrag(event: any) {
     this.page.moveTower(event);
     this.isDragging = false;

src/app/components/pages/page/tower/tasks/tasks.component.html

@@ -6,8 +6,8 @@
     {{ tasks.length == 0 ? '​' : tasks.length == 1 ? 'task' : 'tasks' }}
   </p>
   <div class="all-task" #allTask [ngStyle]="{ height: (isOpen ? allTask?.scrollHeight : 0) + 'px' }">
-    <div class="task-container" *ngFor="let task of tasks" [ngStyle]="{ color: task.color.toString() }">
-      <div [ngStyle]="{ 'background-color': task.color.toString() }"></div>
+    <div class="task-container" *ngFor="let task of tasks" [ngStyle]="{ color: toHslString(task.color) }">
+      <div [ngStyle]="{ 'background-color': toHslString(task.color) }"></div>
       <p (click)="handleClick(task)" [innerText]="task.description ? task.description : 'unknown'"></p>
     </div>
   </div>

src/app/components/pages/page/tower/tasks/tasks.component.ts

@@ -3,6 +3,8 @@ import { Block } from '../../../../../model/block';
 import { Tower } from '../../../../../model/tower';
 import { ModalService } from '../../../../../services/modal.service';
 import { CancelService } from '../../../../../services/cancel.service';
+import { toHslString } from '../../../../../utils/color';
+import { IColor } from '../../../../../interfaces/persistance/color';
 
 @Component({
   selector: 'app-tasks',
@@ -10,7 +12,9 @@ import { CancelService } from '../../../../../services/cancel.service';
   styleUrls: ['./tasks.component.scss']
 })
 export class TasksComponent implements OnInit {
-  @Input() tasks: Block[];
+  readonly toHslString = toHslString;
+
+  @Input() tasks: Array<Block & { color: IColor }>;
   @Input() tower: Tower;
 
   private _isOpen = false;

src/app/components/pages/page/tower/tower.component.html

@@ -19,6 +19,6 @@
     type="text"
     placeholder="name…"
     [(ngModel)]="tower.name"
-    [ngStyle]="{ color: tower.baseColor.toString() }"
+    [ngStyle]="{ color: toHslString(tower?.baseColor) }"
   />
 </div>

src/app/components/pages/page/tower/tower.component.ts

@@ -2,6 +2,8 @@ import { Component, Input } from '@angular/core';
 import { Tower } from '../../../../model/tower';
 import { ModalService } from '../../../../services/modal.service';
 import { Block } from '../../../../model/block';
+import { IColor } from '../../../../interfaces/persistance/color';
+import { toHslString } from '../../../../utils/color';
 
 @Component({
   selector: 'app-tower',
@@ -9,6 +11,8 @@ import { Block } from '../../../../model/block';
   styleUrls: ['./tower.component.scss']
 })
 export class TowerComponent {
+  readonly toHslString = toHslString;
+
   @Input() set dateRange(value: { from: Date; to: Date }) {
     if (this.dateRange !== undefined && this.dateRange.from === value.from && this.dateRange.to === value.to) {
       return;
@@ -22,14 +26,14 @@ export class TowerComponent {
 
   public constructor(private modalService: ModalService) {}
 
-  get drawableBlocks(): Block[] {
-    return this.tower.blocks.filter(
+  get drawableBlocks(): Array<Block & { color: IColor }> {
+    return this.tower.coloredBlocks.filter(
       block => this.dateRange.from <= block.created && block.created <= this.dateRange.to && block.isDone
     );
   }
 
-  get tasks(): Block[] {
-    return this.tower.blocks.filter(
+  get tasks(): Array<Block & { color: IColor }> {
+    return this.tower.coloredBlocks.filter(
       block => this.dateRange.from <= block.created && block.created <= this.dateRange.to && !block.isDone
     );
   }

src/app/components/pages/pages.component.html

@@ -1,8 +1,8 @@
 <div class="select-add-container">
   <!-- wrapper for easier styling -->
   <app-select-add
-    [options]="dataService.pageNames"
-    [default]="dataService.active?.name"
+    [options]="pageNames"
+    [default]="selectedPageName"
     (value)="selectPage($event)"
     [placeholder]="'Add a new page…'"
   ></app-select-add>
@@ -11,11 +11,7 @@
 
 <div class="page-container">
   <!-- wrapper for easier styling -->
-  <app-page
-    *ngIf="dataService.active !== null"
-    [page]="dataService.active"
-    (isDragHappening)="isDragHappening = $event"
-  ></app-page>
+  <app-page *ngIf="selectedPage" [page]="selectedPage" (isDragHappening)="isDragHappening = $event"></app-page>
 </div>
 <!-- wrapper for easier styling -->
 

src/app/components/pages/pages.component.ts

@@ -2,6 +2,10 @@ import { Component, ElementRef, ViewChild } from '@angular/core';
 import { Page } from '../../model/page';
 import { DataService } from '../../services/data.service';
 import { ModalService } from '../../services/modal.service';
+import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject';
+import { Observable } from 'rxjs/internal/Observable';
+
+const USER_DATA_KEY = 'life-towers.user-data.v.2';
 
 @Component({
   selector: 'app-pages',
@@ -13,28 +17,70 @@ export class PagesComponent {
   @ViewChild('page') page: ElementRef;
   @ViewChild('bottom') bottom: ElementRef;
 
+  pages: Array<Page>;
   isDragHappening = false;
 
-  constructor(public dataService: DataService, private modalService: ModalService) {}
+  get pageNames() {
+    if (this.pages) {
+      return this.pages.map(p => p.name);
+    }
+    return [];
+  }
 
-  async selectPage(selected: string) {
-    if (!this.dataService.pageNames.includes(selected)) {
-      const page = new Page({
-        name: selected,
-        towers: [],
-        userData: {}
-      });
+  get selectedPage(): Page {
+    try {
+      return this.pages[this.pageNames.indexOf(this.selectedPageName)];
+    } catch {
+      return null;
+    }
+  }
 
-      this.dataService.push(page);
-      page.addTower();
+  private _selectedPageName: string;
+  get selectedPageName(): string {
+    return this._selectedPageName;
+  }
+
+  set selectedPageName(value: string) {
+    window.localStorage.setItem(
+      USER_DATA_KEY,
+      JSON.stringify({
+        selectedPage: value
+      })
+    );
+    this._selectedPageName = value;
+  }
+
+  private readonly _selectedPage: BehaviorSubject<Page> = new BehaviorSubject(null);
+  readonly selectedPage$: Observable<Page> = this._selectedPage.asObservable();
+
+  constructor(public dataService: DataService, private modalService: ModalService) {
+    const userData = JSON.parse(window.localStorage.getItem(USER_DATA_KEY));
+    if (userData !== null && userData.selectedPage !== undefined) {
+      this._selectedPageName = userData.selectedPage;
     }
 
-    await this.dataService.changeActiveByName(selected);
+    this.dataService.safeChildren$.subscribe(pages => {
+      if (pages) {
+        this.pages = pages;
+        if (!this.selectedPage) {
+          this.selectedPageName = this.pages.length > 0 ? this.pages[0].name : null;
+        }
+        this._selectedPage.next(this.selectedPage);
+      }
+    });
+  }
+
+  async selectPage(selected: string) {
+    if (!this.pageNames.includes(selected)) {
+      this.dataService.addPage(selected);
+    }
+    this.selectedPageName = selected;
+    this._selectedPage.next(this.selectedPage);
   }
 
   async openSettings() {
     try {
-      await this.modalService.showSettings();
+      await this.modalService.showSettings(this.selectedPage$);
     } catch {
       // pass
     }

src/app/components/shared/toggle/toggle.component.ts

@@ -12,7 +12,7 @@ export class ToggleComponent {
   @Output() value: EventEmitter<boolean> = new EventEmitter();
 
   @Input() set default(value: boolean) {
-    this.on = value;
+    this._on = value;
   }
 
   private _on = false;