Fix bugs

src/app/app.component.ts

@@ -10,24 +10,15 @@ import { Root } from './store/root';
 export class AppComponent {
   title = 'life';
 
-  /* tests
   constructor() {
-
-    const root = new Root<InnerNode>();
-    root.log();
-
-    const l = new InnerNode();
-    const r = new InnerNode();
-    root.addChildren([l, r]);
-    root.log();
-
-    const rl = new InnerNode();
+    /*const rl = new InnerNode();
     const rr = new InnerNode();
-    r.addChildren([rl, rr]);
+    const l = new InnerNode();
+    const r = new InnerNode([rl, rr]);
+    const root = new Root<InnerNode>([l, r]);
     root.log();
 
     rr.changeKeys<InnerNodeState>({ dummy: 8 });
-    root.log();
+    root.log();*/
   }
-  */
 }

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

@@ -1,7 +1,6 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { Page } from '../../../model/page';
 import { ModalService } from '../../../services/modal.service';
-import { DataService } from '../../../services/data.service';
 import { Observable } from 'rxjs/internal/Observable';
 import { Range } from '../../../interfaces/range';
 import { Subject } from 'rxjs/internal/Subject';
@@ -34,7 +33,7 @@ export class PageComponent implements OnInit {
     return this.dates.map(d => d.toLocaleDateString());
   }
 
-  constructor(private modalService: ModalService, public dataService: DataService) {}
+  constructor(private modalService: ModalService) {}
 
   ngOnInit(): void {
     this.page$.subscribe(value => {

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

@@ -22,8 +22,7 @@ export class BlockComponent {
         description: this.block.description,
         isDone: this.block.isDone
       });
-      console.log(description);
-      this.block.changeKeys<BlockState>({
+      this.block.changeKeys({
         tag: selected,
         description,
         isDone

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

@@ -55,7 +55,7 @@ export class TasksComponent implements OnInit {
         change.created = new Date();
       }
 
-      block.changeKeys<BlockState>(change);
+      block.changeKeys(change);
     } catch {
       // pass
     }

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

@@ -38,6 +38,7 @@ export class TowerComponent implements OnInit {
   ngOnInit() {
     this.tower$.subscribe(value => {
       if (value) {
+        console.log('update');
         this.blocks = value.coloredBlocks
           .filter(b => b.isDone)
           .map(b => {
@@ -48,15 +49,11 @@ export class TowerComponent implements OnInit {
             return classedBlock;
           });
 
-        if (this.tower) {
-          console.log(this.tower, this.tower.latestVersion, value);
-        }
         if (this.tower && this.tower.latestVersion === value) {
           const difference = this.tower.blocks.map((b, index) => {
             return b === value.blocks[index];
           });
 
-          console.log(this.tower.blocks);
           if (
             (difference.every(i => i) && this.tower.blocks.length + 1 === value.blocks.length) ||
             (this.tower.blocks.length === value.blocks.length &&
@@ -64,7 +61,7 @@ export class TowerComponent implements OnInit {
           ) {
             const lastBlock = top(this.blocks);
             if (lastBlock) {
-              lastBlock.style = { opacity: '0' };
+              lastBlock.style = { transform: 'translateY(500%)', opacity: '0' };
               lastBlock.cssClass = 'descend';
               setTimeout(() => (lastBlock.style = { transform: 'translateY(0)', opacity: '1' }), 0);
             }
@@ -72,7 +69,6 @@ export class TowerComponent implements OnInit {
         }
 
         this.tasks = value.coloredBlocks.filter(block => !block.isDone);
-
         this.tower = value;
       }
     });
@@ -91,7 +87,7 @@ export class TowerComponent implements OnInit {
         block.cssClass = 'ascend';
         block.style = { transform: 'translateY(500%)', opacity: '0' };
       }
-      if (block.shouldDraw && block.cssClass === 'ascend' && block.created < newDateRange.to) {
+      if (block.shouldDraw && block.cssClass === 'ascend' && block.created <= newDateRange.to) {
         block.cssClass = 'descend';
         block.style = { transform: 'translateY(0)', opacity: '1' };
       }

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

@@ -52,7 +52,6 @@ export class PagesComponent implements OnInit {
   }
 
   selectPage(name: string) {
-    console.log(name);
     if (!name) {
       if (this.pages && this.pages.length > 0) {
         name = this.pages[0].name;

src/app/components/shared/select-add/select-add.component.html

@@ -16,7 +16,7 @@
         (keyup)="handleKeys($event)"
       />
 
-      <button *ngIf="options.length <= maxItemCount" (click)="addNewOption()">Add</button>
+      <button *ngIf="options.length <= maxItemCount" (click)="addNewOption()" [disabled]="!newOption">Add</button>
     </div>
   </div>
 

src/app/model/block.ts

@@ -16,4 +16,8 @@ export class Block extends Serializable implements IBlock, BlockState {
     }
     super(props, 'Block');
   }
+
+  changeKeys(props: Partial<BlockState>): this {
+    return super.changeKeys<BlockState>(props);
+  }
 }

src/app/model/page.ts

@@ -1,9 +1,11 @@
 import { Serializable } from './serializable';
 import { IPage } from '../interfaces/persistance/page';
 import { Tower } from './tower';
-import { InnerNode, InnerNodeState } from '../store/inner-node';
+import { InnerNodeState } from '../store/inner-node';
 
-export interface PageState extends InnerNodeState, IPage {}
+export interface PageState extends InnerNodeState, IPage {
+  towers: Array<Tower>;
+}
 
 export class Page extends Serializable implements IPage, PageState {
   readonly name: string;
@@ -24,8 +26,16 @@ export class Page extends Serializable implements IPage, PageState {
     return this.children as Array<Tower>;
   }
 
+  changeProps(props: Partial<PageState>): this {
+    if (props.hasOwnProperty('towers')) {
+      props.children = props.towers;
+      delete props.towers;
+    }
+    return this.changeKeys<PageState>(props);
+  }
+
   setHideCreateTowerButton(value: boolean) {
-    this.changeKeys<PageState>({
+    this.changeProps({
       userData: {
         ...this.userData,
         hideCreateTowerButton: value
@@ -43,8 +53,8 @@ export class Page extends Serializable implements IPage, PageState {
     towers.splice(previousIndex, 1);
     towers.splice(currentIndex, 0, tower);
 
-    this.changeKeys<PageState>({
-      children: towers
+    this.changeProps({
+      towers
     });
   }
 
@@ -64,7 +74,7 @@ export class Page extends Serializable implements IPage, PageState {
   }
 
   removeTower(tower: Tower) {
-    this.changeKeys<PageState>({
+    this.changeProps({
       towers: this.towers.filter(t => t !== tower)
     });
   }

src/app/model/serializable.ts

@@ -12,7 +12,7 @@ export class Serializable extends InnerNode {
   private static propertyList: any = {};
   protected type: string;
 
-  protected constructor(properties: any, type: string, children?: Array<InnerNode>) {
+  protected constructor(properties: any, type: string, children: Array<InnerNode> = []) {
     super(children);
 
     const compiledType = this.constructor.name;

src/app/model/tower.ts

@@ -4,22 +4,18 @@ import { Block } from './block';
 import { Serializable } from './serializable';
 import { hash } from '../utils/hash';
 import { IColor } from '../interfaces/color';
-import { InnerNode, InnerNodeState } from '../store/inner-node';
+import { InnerNodeState } from '../store/inner-node';
 
 export type ColoredBlock = Block & { color: IColor };
 
-export interface TowerState extends ITower, InnerNodeState {}
+export interface TowerState extends ITower, InnerNodeState {
+  blocks: Array<Block>;
+}
 
 export class Tower extends Serializable implements ITower, TowerState {
   tags: string[];
   readonly name: string;
-
-  get blocks(): Array<Block> {
-    return this.children as Array<Block>;
-  }
-
   coloredBlocks: Array<ColoredBlock>;
-
   readonly baseColor: IColor;
 
   constructor(props: ITower) {
@@ -27,6 +23,31 @@ export class Tower extends Serializable implements ITower, TowerState {
     this.onAfterClone();
   }
 
+  get blocks(): Array<Block> {
+    return this.children as Array<Block>;
+  }
+
+  changeKeys(props: Partial<TowerState>): this {
+    if (props.hasOwnProperty('blocks')) {
+      props.children = props.blocks;
+      delete props.blocks;
+    }
+    return super.changeKeys<TowerState>(props);
+  }
+
+  addBlock(props: { tag: string; description: string; isDone: boolean }) {
+    this.addChildren([
+      new Block({
+        created: new Date(),
+        ...props
+      })
+    ]);
+  }
+
+  changeName(name: string) {
+    this.changeKeys({ name });
+  }
+
   protected onAfterClone() {
     this.blocks.sort((a, b) => {
       return a.created.getTime() - b.created.getTime();
@@ -45,17 +66,4 @@ export class Tower extends Serializable implements ITower, TowerState {
       }
     }
   }
-
-  addBlock(props: { tag: string; description: string; isDone: boolean }) {
-    this.addChildren([
-      new Block({
-        created: new Date(),
-        ...props
-      })
-    ]);
-  }
-
-  changeName(name: string) {
-    this.changeKeys<TowerState>({ name });
-  }
 }

src/app/services/data.service.ts

@@ -6,8 +6,6 @@ import { Serializable } from '../model/serializable';
 import { Tower } from '../model/tower';
 import { Block } from '../model/block';
 import { IPage } from '../interfaces/persistance/page';
-import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject';
-import { Observable } from 'rxjs/internal/Observable';
 
 @Injectable({
   providedIn: 'root'
@@ -61,11 +59,14 @@ export class DataService extends Root<Page> {
         childrenType: null
       }
     };
-    this.children$.subscribe(value => {
+    this.children$.subscribe(_ => {
       this.log();
-      this.save(0);
     });
 
     this.addChildren(pages.map(p => new Page(p)));
+
+    this.children$.subscribe(_ => {
+      this.save(0);
+    });
   }
 }

src/app/services/store.service.ts

@@ -95,7 +95,7 @@ export class StoreService<T> {
 
   constructor() {
     const localStorageData = localStorage.getItem(LOCAL_STORAGE_KEY);
-    this.storedData = JSON.parse(false ? localStorageData : this.mockData) as T;
+    this.storedData = JSON.parse(localStorageData ? localStorageData : this.mockData) as T;
   }
 
   scheduleSave(data: T, timeout: number) {

src/app/store/initiable.ts

@@ -1,6 +0,0 @@
-export abstract class Initiable {
-  protected constructor() {
-    this.initiate();
-  }
-  protected abstract initiate();
-}

src/app/store/inner-node.ts

@@ -8,11 +8,11 @@ export class InnerNode extends Node implements InnerNodeState {
   readonly dummy = 3;
   parent: Node;
   private nextVersion: this = null;
-  readonly children: Array<InnerNode> = [];
+  readonly children: Array<InnerNode>;
 
-  constructor(children?: Array<InnerNode>) {
-    super();
-    this.children = children ? children : [];
+  constructor(children: Array<InnerNode> = []) {
+    super(children);
+    this.children = children;
   }
 
   get latestVersion(): this {
@@ -36,9 +36,8 @@ export class InnerNode extends Node implements InnerNodeState {
       this.latestVersion.changeKeys(props);
     }
 
-    const clone = this.cloneWithChangedKeys(props);
-
     let shouldClone = false;
+
     for (const prop in props) {
       // @ts-ignore
       if (props.hasOwnProperty(prop) && props[prop] !== this[prop]) {
@@ -50,16 +49,17 @@ export class InnerNode extends Node implements InnerNodeState {
       return;
     }
 
-    for (const child of clone.children) {
-      child.parent = clone;
-    }
+    const clone = this.cloneWithChangedKeys(props);
+
+    clone.children.forEach(c => (c.parent = clone));
+
+    this.nextVersion = clone;
 
     this.parent.replaceChild({
       oldValue: this,
       newValue: clone
     });
 
-    this.nextVersion = clone;
     return clone;
   }
 
@@ -82,7 +82,7 @@ export class InnerNode extends Node implements InnerNodeState {
     }
 
     const clone = Object.create(Object.getPrototypeOf(this), insides);
-    clone.initiate();
+    clone.setUniqueness();
     clone.onAfterClone();
     return clone;
   }

src/app/store/node.ts

@@ -6,19 +6,14 @@ export interface NodeState {
 }
 
 export abstract class Node extends Unique implements NodeState {
-  protected copyCount = 1;
   abstract readonly children: Array<InnerNode>;
 
-  protected constructor() {
+  protected constructor(children: Array<InnerNode> = []) {
     super();
+    children.map(c => (c.parent = this));
   }
   protected abstract changeKeys<T extends NodeState>(props: Partial<T>): this;
 
-  protected initiate() {
-    super.initiate();
-    this.copyCount++;
-  }
-
   addChildren(children: Array<InnerNode>): this {
     return this.changeKeys<NodeState>({
       children: [...this.children, ...children]
@@ -37,7 +32,7 @@ export abstract class Node extends Unique implements NodeState {
 
   protected _log(indent = ''): string {
     const basicInfo = `${indent} - ${this.constructor.name}, #${this.id}`;
-    let response = `${basicInfo}${' '.repeat(25 - basicInfo.length)}siblings: ${this.copyCount}\n`;
+    let response = `${basicInfo}${' '.repeat(25 - basicInfo.length)}copies: ${this.copies}\n`;
     for (const c of this.children) {
       response += `${c._log(indent + '  ')}`;
     }

src/app/store/root.ts

@@ -7,9 +7,9 @@ export class Root<T extends InnerNode> extends Node {
   readonly children$: Observable<Array<T>>;
   private readonly _children: BehaviorSubject<Array<T>>;
 
-  constructor(children?: Array<T>) {
-    super();
-    this._children = new BehaviorSubject(children ? children : []);
+  constructor(children: Array<T> = []) {
+    super(children);
+    this._children = new BehaviorSubject(children);
     this.children$ = this._children.asObservable();
   }
 
@@ -18,7 +18,6 @@ export class Root<T extends InnerNode> extends Node {
   }
 
   set children(value: Array<T>) {
-    console.log(value);
     this._children.next(value);
   }
 

src/app/store/unique.ts

@@ -1,7 +1,10 @@
-import { Initiable } from './initiable';
-
-export abstract class Unique extends Initiable {
+export class Unique {
   protected static nextId = 0;
+
+  constructor() {
+    this.setUniqueness();
+  }
+
   static get ObjectCount(): number {
     return Unique.nextId;
   }
@@ -11,7 +14,13 @@ export abstract class Unique extends Initiable {
     return this._id;
   }
 
-  protected initiate() {
+  private _copies = 0;
+  get copies(): number {
+    return this._copies;
+  }
+
+  protected setUniqueness() {
     this._id = Unique.nextId++;
+    this._copies++;
   }
 }

src/assets/edit.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 129 129" enable-background="new 0 0 129 129" width="512px" height="512px"><g><g>
+    <g>
+      <path d="m119.2,114.3h-109.4c-2.3,0-4.1,1.9-4.1,4.1s1.9,4.1 4.1,4.1h109.5c2.3,0 4.1-1.9 4.1-4.1s-1.9-4.1-4.2-4.1z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#5D576B"/>
+      <path d="m5.7,78l-.1,19.5c0,1.1 0.4,2.2 1.2,3 0.8,0.8 1.8,1.2 2.9,1.2l19.4-.1c1.1,0 2.1-0.4 2.9-1.2l67-67c1.6-1.6 1.6-4.2 0-5.9l-19.2-19.4c-1.6-1.6-4.2-1.6-5.9-1.77636e-15l-13.4,13.5-53.6,53.5c-0.7,0.8-1.2,1.8-1.2,2.9zm71.2-61.1l13.5,13.5-7.6,7.6-13.5-13.5 7.6-7.6zm-62.9,62.9l49.4-49.4 13.5,13.5-49.4,49.3-13.6,.1 .1-13.5z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#5D576B"/>
+    </g>
+  </g></g> </svg>

src/library/common-variables.scss

@@ -1,8 +1,9 @@
 $accent-color: #a2666f;
-$text-color: #5d576bff;
+$text-color: #5d576b;
 $light-color: #ffffff;
 
-$background-gradient: linear-gradient(90deg, #fff9e077 0, #ffd6d677 100%);
+$background-gradient: linear-gradient(90deg, #fff9e07f 0, #ffd6d67f 100%);
+$background-gradient-opaque: linear-gradient(90deg, #fffcf0 0, #ffebeb 100%);
 
 $shadow: 0 0 1.5px 1.5px rgba(0, 0, 0, 0.1), 0 0 3px 2px rgba(0, 0, 0, 0.05);
 $shadow-border: 0 0 0 0.75px rgba(0, 0, 0, 0.1);

src/styles.scss

@@ -21,10 +21,14 @@ $line-height: 2px;
   }
 }
 
-html,
+html {
+  height: 100%;
+  background-color: $text-color;
+}
+
 body {
   height: 100%;
-  background: $background-gradient;
+  background: $background-gradient-opaque;
 }
 
 body {