diff --git a/src/app/app.component.ts b/src/app/app.component.ts index beded30..6289fa6 100644 --- a/src/app/app.component.ts +++ b/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(); - 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([l, r]); root.log(); rr.changeKeys({ dummy: 8 }); - root.log(); + root.log();*/ } - */ } diff --git a/src/app/components/pages/page/page.component.ts b/src/app/components/pages/page/page.component.ts index e9467dd..eec9723 100644 --- a/src/app/components/pages/page/page.component.ts +++ b/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 => { diff --git a/src/app/components/pages/page/tower/block/block.component.ts b/src/app/components/pages/page/tower/block/block.component.ts index 80961fd..0fd1d61 100644 --- a/src/app/components/pages/page/tower/block/block.component.ts +++ b/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({ + this.block.changeKeys({ tag: selected, description, isDone diff --git a/src/app/components/pages/page/tower/tasks/tasks.component.ts b/src/app/components/pages/page/tower/tasks/tasks.component.ts index 1814f1b..d8fa365 100644 --- a/src/app/components/pages/page/tower/tasks/tasks.component.ts +++ b/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(change); + block.changeKeys(change); } catch { // pass } diff --git a/src/app/components/pages/page/tower/tower.component.ts b/src/app/components/pages/page/tower/tower.component.ts index d9030b2..afda1d4 100644 --- a/src/app/components/pages/page/tower/tower.component.ts +++ b/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' }; } diff --git a/src/app/components/pages/pages.component.ts b/src/app/components/pages/pages.component.ts index f39fcd1..13bb6ba 100644 --- a/src/app/components/pages/pages.component.ts +++ b/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; diff --git a/src/app/components/shared/select-add/select-add.component.html b/src/app/components/shared/select-add/select-add.component.html index a64aa63..f1cc3d1 100644 --- a/src/app/components/shared/select-add/select-add.component.html +++ b/src/app/components/shared/select-add/select-add.component.html @@ -16,7 +16,7 @@ (keyup)="handleKeys($event)" /> - + diff --git a/src/app/model/block.ts b/src/app/model/block.ts index 35b61d5..74ba9ee 100644 --- a/src/app/model/block.ts +++ b/src/app/model/block.ts @@ -16,4 +16,8 @@ export class Block extends Serializable implements IBlock, BlockState { } super(props, 'Block'); } + + changeKeys(props: Partial): this { + return super.changeKeys(props); + } } diff --git a/src/app/model/page.ts b/src/app/model/page.ts index 3b4777a..81af6d2 100644 --- a/src/app/model/page.ts +++ b/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; +} 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; } + changeProps(props: Partial): this { + if (props.hasOwnProperty('towers')) { + props.children = props.towers; + delete props.towers; + } + return this.changeKeys(props); + } + setHideCreateTowerButton(value: boolean) { - this.changeKeys({ + 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({ - children: towers + this.changeProps({ + towers }); } @@ -64,7 +74,7 @@ export class Page extends Serializable implements IPage, PageState { } removeTower(tower: Tower) { - this.changeKeys({ + this.changeProps({ towers: this.towers.filter(t => t !== tower) }); } diff --git a/src/app/model/serializable.ts b/src/app/model/serializable.ts index c8608b5..e44de18 100644 --- a/src/app/model/serializable.ts +++ b/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) { + protected constructor(properties: any, type: string, children: Array = []) { super(children); const compiledType = this.constructor.name; diff --git a/src/app/model/tower.ts b/src/app/model/tower.ts index bb2e29a..edaca9e 100644 --- a/src/app/model/tower.ts +++ b/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; +} export class Tower extends Serializable implements ITower, TowerState { tags: string[]; readonly name: string; - - get blocks(): Array { - return this.children as Array; - } - coloredBlocks: Array; - readonly baseColor: IColor; constructor(props: ITower) { @@ -27,6 +23,31 @@ export class Tower extends Serializable implements ITower, TowerState { this.onAfterClone(); } + get blocks(): Array { + return this.children as Array; + } + + changeKeys(props: Partial): this { + if (props.hasOwnProperty('blocks')) { + props.children = props.blocks; + delete props.blocks; + } + return super.changeKeys(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({ name }); - } } diff --git a/src/app/services/data.service.ts b/src/app/services/data.service.ts index f483e1b..b9da30e 100644 --- a/src/app/services/data.service.ts +++ b/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 { 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); + }); } } diff --git a/src/app/services/store.service.ts b/src/app/services/store.service.ts index 819e04b..a4b1596 100644 --- a/src/app/services/store.service.ts +++ b/src/app/services/store.service.ts @@ -95,7 +95,7 @@ export class StoreService { 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) { diff --git a/src/app/store/initiable.ts b/src/app/store/initiable.ts deleted file mode 100644 index f938e57..0000000 --- a/src/app/store/initiable.ts +++ /dev/null @@ -1,6 +0,0 @@ -export abstract class Initiable { - protected constructor() { - this.initiate(); - } - protected abstract initiate(); -} diff --git a/src/app/store/inner-node.ts b/src/app/store/inner-node.ts index d76277e..e5f6c57 100644 --- a/src/app/store/inner-node.ts +++ b/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 = []; + readonly children: Array; - constructor(children?: Array) { - super(); - this.children = children ? children : []; + constructor(children: Array = []) { + 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; } diff --git a/src/app/store/node.ts b/src/app/store/node.ts index 47c44e6..ed5b6e6 100644 --- a/src/app/store/node.ts +++ b/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; - protected constructor() { + protected constructor(children: Array = []) { super(); + children.map(c => (c.parent = this)); } protected abstract changeKeys(props: Partial): this; - protected initiate() { - super.initiate(); - this.copyCount++; - } - addChildren(children: Array): this { return this.changeKeys({ 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 + ' ')}`; } diff --git a/src/app/store/root.ts b/src/app/store/root.ts index 22764a4..e25023d 100644 --- a/src/app/store/root.ts +++ b/src/app/store/root.ts @@ -7,9 +7,9 @@ export class Root extends Node { readonly children$: Observable>; private readonly _children: BehaviorSubject>; - constructor(children?: Array) { - super(); - this._children = new BehaviorSubject(children ? children : []); + constructor(children: Array = []) { + super(children); + this._children = new BehaviorSubject(children); this.children$ = this._children.asObservable(); } @@ -18,7 +18,6 @@ export class Root extends Node { } set children(value: Array) { - console.log(value); this._children.next(value); } diff --git a/src/app/store/unique.ts b/src/app/store/unique.ts index a0500c1..37fb3f1 100644 --- a/src/app/store/unique.ts +++ b/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++; } } diff --git a/src/assets/edit.svg b/src/assets/edit.svg new file mode 100644 index 0000000..c7406cf --- /dev/null +++ b/src/assets/edit.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/library/common-variables.scss b/src/library/common-variables.scss index c09ae5c..bf52ff8 100644 --- a/src/library/common-variables.scss +++ b/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); diff --git a/src/styles.scss b/src/styles.scss index 36451a1..9d7f570 100644 --- a/src/styles.scss +++ b/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 {