Start refactoring state management

src/app/app.component.ts

@@ -1,6 +1,4 @@
 import { Component } from '@angular/core';
-import { Cloneable } from './storage/cloneable';
-import { Root } from './storage/root';
 
 @Component({
   selector: 'app-root',
@@ -9,19 +7,4 @@ import { Root } from './storage/root';
 })
 export class AppComponent {
   title = 'frontend';
-
-  constructor() {
-    const root = new Root<Cloneable>();
-
-    const l1 = new Cloneable(root, 'l1');
-    const r1 = new Cloneable(root, 'r1');
-    const r1r1 = new Cloneable(r1, 'r1r1');
-    const r1l1 = new Cloneable(r1, 'r1l1');
-
-    r1r1.changeName('r1r1 new');
-
-    r1l1.changeName('r1l1 new');
-
-    r1l1.map((c: Cloneable) => c.changeNameMap('bdeiwf'));
-  }
 }

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"
+    [default]="!page.userData.hideCreateTowerButton"
-    (value)="dataService.active.userData.hideCreateTowerButton = !$event"
+    (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);
+      await this.modalService.showRemovePage(this.page.name);
-      this.dataService.remove();
+      this.dataService.removePage(this.page);
       this.modalService.submit();
     } catch {
       // pass

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

@@ -1,7 +1,4 @@
-<button
+<button *ngIf="page && page.towers.length < 5 && !page.userData?.hideCreateTowerButton" (click)="page.addTower()">
-  *ngIf="page && page.towers.length < 5 && !dataService.active?.userData?.hideCreateTowerButton"
-  (click)="createTower()"
->
   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 class="task-container" *ngFor="let task of tasks" [ngStyle]="{ color: toHslString(task.color) }">
-      <div [ngStyle]="{ 'background-color': task.color.toString() }"></div>
+      <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[] {
+  get drawableBlocks(): Array<Block & { color: IColor }> {
-    return this.tower.blocks.filter(
+    return this.tower.coloredBlocks.filter(
       block => this.dateRange.from <= block.created && block.created <= this.dateRange.to && block.isDone
     );
   }
 
-  get tasks(): Block[] {
+  get tasks(): Array<Block & { color: IColor }> {
-    return this.tower.blocks.filter(
+    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"
+    [options]="pageNames"
-    [default]="dataService.active?.name"
+    [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
+  <app-page *ngIf="selectedPage" [page]="selectedPage" (isDragHappening)="isDragHappening = $event"></app-page>
-    *ngIf="dataService.active !== null"
-    [page]="dataService.active"
-    (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) {
+  get selectedPage(): Page {
-    if (!this.dataService.pageNames.includes(selected)) {
+    try {
-      const page = new Page({
+      return this.pages[this.pageNames.indexOf(this.selectedPageName)];
-        name: selected,
+    } catch {
-        towers: [],
+      return null;
-        userData: {}
+    }
-      });
+  }
 
-      this.dataService.push(page);
+  private _selectedPageName: string;
-      page.addTower();
+  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;

src/app/interfaces/persistance/block.ts

@@ -1,4 +1,7 @@
-export interface IBlock {
+import { Typed } from './typed';
+
+export interface IBlock extends Typed {
+  type: 'Block';
   created: Date;
   tag: string;
   isDone: boolean;

src/app/interfaces/persistance/color.ts

@@ -1,4 +1,7 @@
-export interface IColor {
+import { Typed } from './typed';
+
+export interface IColor extends Typed {
+  type: 'Color';
   h: number;
   s: number;
   l: number;

src/app/interfaces/persistance/page.ts

@@ -1,12 +1,14 @@
 import { ITower } from './tower';
+import { Typed } from './typed';
 
-export interface IPage {
+export interface IPage extends Typed {
+  type: 'Page';
   name: string;
   towers: ITower[];
 
   userData: {
-    hideCreateTowerButton: boolean;
+    hideCreateTowerButton?: boolean;
-    defaultDateRange: {
+    defaultDateRange?: {
       from: Date;
       to: Date;
     };

src/app/interfaces/persistance/tower.ts

@@ -1,7 +1,9 @@
 import { IBlock } from './block';
 import { IColor } from './color';
+import { Typed } from './typed';
 
-export interface ITower {
+export interface ITower extends Typed {
+  type: 'Tower';
   name: string;
   blocks: IBlock[];
   baseColor: IColor;

src/app/interfaces/persistance/typed.ts

@@ -0,0 +1,3 @@
+export interface Typed {
+  type: string;
+}

src/app/model/base.ts

@@ -1,57 +0,0 @@
-import { Subject } from 'rxjs/internal/Subject';
-
-export class Base {
-  private static propertyList: any = {};
-  protected subscribers: (() => void)[] = [];
-
-  subject: Subject<this> = new Subject();
-
-  constructor(properties: any) {
-    const type = this.constructor.name;
-    if (!Base.propertyList.hasOwnProperty(type)) {
-      Base.propertyList[type] = [];
-    }
-
-    for (const property in properties) {
-      if (properties.hasOwnProperty(property)) {
-        const propertyName = `__${property}`;
-        this[propertyName] = properties[property];
-
-        Object.defineProperty(this, property, {
-          get: () => this[propertyName],
-          set: value => {
-            if (value == this[propertyName]) {
-              return;
-            }
-            this[propertyName] = value;
-            this.update();
-          }
-        });
-
-        if (!Base.propertyList[type].includes(property)) {
-          Base.propertyList[type].push(property);
-        }
-      }
-    }
-  }
-
-  toJSON(): object {
-    return Base.propertyList[this.constructor.name].reduce(
-      (object, property) => ({
-        [property]: this[property],
-        ...object
-      }),
-      // TODO
-      { type: this.constructor.name }
-    );
-  }
-
-  subscribe(func: () => void) {
-    this.subscribers.push(func);
-  }
-
-  protected update() {
-    this.subject.next(this);
-    this.subscribers.map(f => f());
-  }
-}

src/app/model/block.ts

@@ -1,26 +1,18 @@
-import { Base } from './base';
+import { Serializable } from './serializable';
 import { IBlock } from '../interfaces/persistance/block';
-import { Color } from './color';
+import { Node } from '../storage/node';
 
-export class Block extends Base implements IBlock {
+export class Block extends Serializable implements IBlock {
-  constructor(props: IBlock) {
+  constructor(parent: Node, props: IBlock) {
-    // TODO: remove
+    super(parent, props);
-    if (props.isDone === undefined) {
-      props.isDone = true;
-    }
-
-    super(props);
 
     if (this.created.constructor.name !== 'Date') {
-      // Prevent update message
+      this.created = new Date(this.created);
-      // @ts-ignore
-      this.__created = new Date(this.created);
     }
   }
 
-  color: Color;
-
   // Only here to prevent ts warnings.
+  type: 'Block';
   created: Date;
   isDone: boolean;
   description: string;

src/app/model/color.ts

@@ -1,28 +0,0 @@
-import { IColor } from '../interfaces/persistance/color';
-import { Base } from './base';
-
-export class Color extends Base implements IColor {
-  constructor(props: IColor) {
-    super(props);
-  }
-
-  // Only here to prevent ts warnings.
-  h: number;
-  s: number;
-  l: number;
-
-  public lighten(by: number) {
-    const newL = this.l + by;
-    if (this.l > 100) {
-      this.l = 100;
-    } else if (this.l < 0) {
-      this.l = 0;
-    }
-
-    return new Color({ h: this.h, s: this.s, l: newL });
-  }
-
-  public toString(): string {
-    return `hsl(${this.h}, ${this.s}%, ${this.l}%)`;
-  }
-}