+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Create now
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-Create an item
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/src/app/components/modal/modals/create-block/create-block.component.scss b/src/app/components/modal/modals/create-block/create-block.component.scss
deleted file mode 100644
index 03d331a..0000000
--- a/src/app/components/modal/modals/create-block/create-block.component.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-@import '../../../../../styles';
-
-:host {
- @include card();
- box-shadow: $shadow;
-
- width: 66vw;
- max-width: 400px;
- @media (max-width: $mobile-width) {
- width: 300px;
- }
-
- box-sizing: border-box;
- padding: var(--large-padding);
- position: relative;
-
- @include inner-spacing(var(--large-padding));
-
- .header {
- @include center-child();
-
- .exit {
- position: absolute;
- left: var(--large-padding);
-
- @include exit();
- }
- }
-}
diff --git a/src/app/components/modal/modals/create-block/create-block.component.ts b/src/app/components/modal/modals/create-block/create-block.component.ts
deleted file mode 100644
index 5f9fed9..0000000
--- a/src/app/components/modal/modals/create-block/create-block.component.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { Component } from '@angular/core';
-import { ModalService } from '../../../../services/modal.service';
-
-@Component({
- selector: 'app-create-block',
- templateUrl: './create-block.component.html',
- styleUrls: ['./create-block.component.scss']
-})
-export class CreateBlockComponent {
- selected: string;
- description: string = null;
- isDone: boolean = !this.modalService.active.input.isTask;
-
- constructor(public modalService: ModalService) {}
-
- submit() {
- if (!this.selected) {
- return;
- }
-
- this.modalService.submit({
- selected: this.selected,
- description: this.description,
- isDone: this.isDone
- });
- }
-}
diff --git a/src/app/components/modal/modals/edit-block/edit-block.component.html b/src/app/components/modal/modals/edit-block/edit-block.component.html
deleted file mode 100644
index 8e967c6..0000000
--- a/src/app/components/modal/modals/edit-block/edit-block.component.html
+++ /dev/null
@@ -1,33 +0,0 @@
-
-
-
-
-View item
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/src/app/components/modal/modals/edit-block/edit-block.component.scss b/src/app/components/modal/modals/edit-block/edit-block.component.scss
deleted file mode 100644
index 03d331a..0000000
--- a/src/app/components/modal/modals/edit-block/edit-block.component.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-@import '../../../../../styles';
-
-:host {
- @include card();
- box-shadow: $shadow;
-
- width: 66vw;
- max-width: 400px;
- @media (max-width: $mobile-width) {
- width: 300px;
- }
-
- box-sizing: border-box;
- padding: var(--large-padding);
- position: relative;
-
- @include inner-spacing(var(--large-padding));
-
- .header {
- @include center-child();
-
- .exit {
- position: absolute;
- left: var(--large-padding);
-
- @include exit();
- }
- }
-}
diff --git a/src/app/components/modal/modals/edit-block/edit-block.component.ts b/src/app/components/modal/modals/edit-block/edit-block.component.ts
deleted file mode 100644
index e6c8c28..0000000
--- a/src/app/components/modal/modals/edit-block/edit-block.component.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Component } from '@angular/core';
-import { ModalService } from '../../../../services/modal.service';
-
-@Component({
- selector: 'app-edit-block',
- templateUrl: './edit-block.component.html',
- styleUrls: ['./edit-block.component.scss']
-})
-export class EditBlockComponent {
- selected: string;
-
- constructor(public modalService: ModalService) {}
-
- submit() {
- this.modalService.submit({
- selected: this.selected,
- description: this.modalService.active.input.description,
- isDone: this.modalService.active.input.isDone
- });
- }
-}
diff --git a/src/app/components/modal/modals/get-started/get-started.component.html b/src/app/components/modal/modals/get-started/get-started.component.html
old mode 100644
new mode 100755
diff --git a/src/app/components/modal/modals/get-started/get-started.component.scss b/src/app/components/modal/modals/get-started/get-started.component.scss
old mode 100644
new mode 100755
diff --git a/src/app/components/modal/modals/get-started/get-started.component.ts b/src/app/components/modal/modals/get-started/get-started.component.ts
old mode 100644
new mode 100755
diff --git a/src/app/components/modal/modals/remove-block/remove-block.component.html b/src/app/components/modal/modals/remove-block/remove-block.component.html
deleted file mode 100644
index f95c8a3..0000000
--- a/src/app/components/modal/modals/remove-block/remove-block.component.html
+++ /dev/null
@@ -1,3 +0,0 @@
-- remove-block works! -
diff --git a/src/app/components/modal/modals/remove-block/remove-block.component.scss b/src/app/components/modal/modals/remove-block/remove-block.component.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/components/modal/modals/remove-block/remove-block.component.ts b/src/app/components/modal/modals/remove-block/remove-block.component.ts deleted file mode 100644 index 44ad3e0..0000000 --- a/src/app/components/modal/modals/remove-block/remove-block.component.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { Component, OnInit } from '@angular/core'; - -@Component({ - selector: 'app-remove-block', - templateUrl: './remove-block.component.html', - styleUrls: ['./remove-block.component.scss'] -}) -export class RemoveBlockComponent implements OnInit { - constructor() {} - - ngOnInit() {} -} diff --git a/src/app/components/modal/modals/remove-page/remove-page.component.html b/src/app/components/modal/modals/remove-page/remove-page.component.html old mode 100644 new mode 100755 diff --git a/src/app/components/modal/modals/remove-page/remove-page.component.scss b/src/app/components/modal/modals/remove-page/remove-page.component.scss old mode 100644 new mode 100755 diff --git a/src/app/components/modal/modals/remove-page/remove-page.component.ts b/src/app/components/modal/modals/remove-page/remove-page.component.ts old mode 100644 new mode 100755 diff --git a/src/app/components/modal/modals/remove-tower/remove-tower.component.html b/src/app/components/modal/modals/remove-tower/remove-tower.component.html old mode 100644 new mode 100755 diff --git a/src/app/components/modal/modals/remove-tower/remove-tower.component.scss b/src/app/components/modal/modals/remove-tower/remove-tower.component.scss old mode 100644 new mode 100755 diff --git a/src/app/components/modal/modals/remove-tower/remove-tower.component.ts b/src/app/components/modal/modals/remove-tower/remove-tower.component.ts old mode 100644 new mode 100755 diff --git a/src/app/components/modal/modals/settings/settings.component.html b/src/app/components/modal/modals/settings/settings.component.html old mode 100644 new mode 100755 index 3d893ae..cd67f6c --- a/src/app/components/modal/modals/settings/settings.component.html +++ b/src/app/components/modal/modals/settings/settings.component.html @@ -4,7 +4,6 @@
-
-
There can be a maximum of 5 towers on each page.
- + + + + + diff --git a/src/app/components/modal/modals/settings/settings.component.scss b/src/app/components/modal/modals/settings/settings.component.scss old mode 100644 new mode 100755 index f901eb2..2bb765b --- a/src/app/components/modal/modals/settings/settings.component.scss +++ b/src/app/components/modal/modals/settings/settings.component.scss @@ -4,7 +4,7 @@ @include card(); width: 66vw; - max-width: 500px; + max-width: 400px; @media (max-width: $mobile-width) { width: 300px; } @@ -31,4 +31,12 @@ p { font-size: var(--medium-font-size); } + + input[type='text'] { + text-align: center; + } + + button { + display: block; + } } diff --git a/src/app/components/modal/modals/settings/settings.component.ts b/src/app/components/modal/modals/settings/settings.component.ts old mode 100644 new mode 100755 index b39886c..a460c82 --- a/src/app/components/modal/modals/settings/settings.component.ts +++ b/src/app/components/modal/modals/settings/settings.component.ts @@ -1,28 +1,56 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnDestroy, OnInit } from '@angular/core'; import { ModalService } from '../../../../services/modal.service'; import { DataService } from '../../../../services/data.service'; import { Page } from '../../../../model/page'; +import { Data } from '../../../../model/data'; +import { Subscription } from 'rxjs/internal/Subscription'; +import { MapStoreService } from '../../../../services/map-store.service'; @Component({ selector: 'app-settings', templateUrl: './settings.component.html', styleUrls: ['./settings.component.scss'] }) -export class SettingsComponent implements OnInit { +export class SettingsComponent implements OnInit, OnDestroy { + data: Data; page: Page; - constructor(public modalService: ModalService, public dataService: DataService) {} + + private dataSubscription: Subscription; + private pageSubscription: Subscription; + + token: string; + + constructor(public modalService: ModalService, private store: MapStoreService) { + this.token = store.userToken; + } ngOnInit() { - this.modalService.active.input.subscribe(p => (this.page = p)); + const { data$, page$ } = this.modalService.active.input; + + this.dataSubscription = data$.subscribe(d => (this.data = d)); + this.pageSubscription = page$.subscribe(p => (this.page = p)); } async deletePage() { try { await this.modalService.showRemovePage(this.page.name); - this.dataService.removePage(this.page); + this.data.removePage(this.page); this.modalService.submit(); } catch { // pass } } + + setNewToken() { + this.store.userToken = this.token; + } + + ngOnDestroy() { + if (this.dataSubscription) { + this.dataSubscription.unsubscribe(); + } + if (this.pageSubscription) { + this.pageSubscription.unsubscribe(); + } + } } diff --git a/src/app/components/pages/page/page.component.html b/src/app/components/pages/page/page.component.html old mode 100644 new mode 100755 diff --git a/src/app/components/pages/page/page.component.scss b/src/app/components/pages/page/page.component.scss old mode 100644 new mode 100755 diff --git a/src/app/components/pages/page/page.component.ts b/src/app/components/pages/page/page.component.ts old mode 100644 new mode 100755 index eec9723..12e4664 --- a/src/app/components/pages/page/page.component.ts +++ b/src/app/components/pages/page/page.component.ts @@ -40,9 +40,7 @@ export class PageComponent implements OnInit { if (value) { this.towers = value.towers.map((t, index) => { if (index < this.towers.length) { - if (this.towers[index].getValue() !== t) { - this.towers[index].next(t); - } + this.towers[index].next(t); return this.towers[index]; } return new BehaviorSubject(t); diff --git a/src/app/components/pages/page/tower/block/block.component.html b/src/app/components/pages/page/tower/block/block.component.html old mode 100644 new mode 100755 index 59c0d82..899c757 --- a/src/app/components/pages/page/tower/block/block.component.html +++ b/src/app/components/pages/page/tower/block/block.component.html @@ -1 +1 @@ - + diff --git a/src/app/components/pages/page/tower/block/block.component.scss b/src/app/components/pages/page/tower/block/block.component.scss old mode 100644 new mode 100755 diff --git a/src/app/components/pages/page/tower/block/block.component.ts b/src/app/components/pages/page/tower/block/block.component.ts old mode 100644 new mode 100755 index 0fd1d61..c2c0807 --- a/src/app/components/pages/page/tower/block/block.component.ts +++ b/src/app/components/pages/page/tower/block/block.component.ts @@ -1,7 +1,7 @@ -import { Component, Input } from '@angular/core'; -import { Block, BlockState } from '../../../../../model/block'; +import { ChangeDetectorRef, Component, Input } from '@angular/core'; import { ModalService } from '../../../../../services/modal.service'; import { ColoredBlock, Tower } from '../../../../../model/tower'; +import { Observable } from 'rxjs/internal/Observable'; @Component({ selector: 'app-block', @@ -10,22 +10,16 @@ import { ColoredBlock, Tower } from '../../../../../model/tower'; }) export class BlockComponent { @Input() block: ColoredBlock; - @Input() tower: Tower; + @Input() tower$: Observable
+
;
isDragHappening = false;
@@ -32,7 +35,11 @@ export class PagesComponent implements OnInit {
private readonly _selectedPage: BehaviorSubject = new BehaviorSubject(null);
readonly selectedPage$: Observable = this._selectedPage.asObservable();
- constructor(public dataService: DataService, private modalService: ModalService) {
+ constructor(
+ public dataService: DataService,
+ private modalService: ModalService,
+ private changeDetection: ChangeDetectorRef
+ ) {
const userData = JSON.parse(window.localStorage.getItem(USER_DATA_KEY));
if (userData !== null) {
this.selectedPageName = userData.selectedPage;
@@ -40,9 +47,11 @@ export class PagesComponent implements OnInit {
}
ngOnInit() {
- this.dataService.children$.subscribe(pages => {
- if (pages) {
- if (this.pages && this.pages.length - 1 === pages.length) {
+ this.dataService.children$.subscribe(dataContainer => {
+ if (dataContainer && dataContainer.length > 0) {
+ this.data = dataContainer[0];
+ const pages = this.data.pages;
+ if (this.pages && !pages.includes(this._selectedPage.getValue().latestVersion)) {
this.selectedPageName = null;
}
this.pages = pages;
@@ -51,6 +60,16 @@ export class PagesComponent implements OnInit {
});
}
+ changeName({ from, to }: { from: string; to: string }) {
+ const page = this.pages.find(p => p.name === from);
+ if (page) {
+ if (from === this.selectedPageName) {
+ this.selectedPageName = to;
+ }
+ page.changeName(to);
+ }
+ }
+
selectPage(name: string) {
if (!name) {
if (this.pages && this.pages.length > 0) {
@@ -68,7 +87,7 @@ export class PagesComponent implements OnInit {
if (this.pages && name) {
if (!this.pageNames.includes(name)) {
- this.dataService.addPage(name);
+ this.data.addPage(name);
}
const index = this.pageNames.indexOf(name);
@@ -81,9 +100,14 @@ export class PagesComponent implements OnInit {
async openSettings() {
try {
- await this.modalService.showSettings(this.selectedPage$);
+ await this.modalService.showSettings({
+ page$: this.selectedPage$,
+ data$: of(this.data)
+ });
} catch {
// pass
+ } finally {
+ this.changeDetection.markForCheck();
}
}
}
diff --git a/src/app/components/shared/double-slider/double-slider.component.html b/src/app/components/shared/double-slider/double-slider.component.html
old mode 100644
new mode 100755
diff --git a/src/app/components/shared/double-slider/double-slider.component.scss b/src/app/components/shared/double-slider/double-slider.component.scss
old mode 100644
new mode 100755
diff --git a/src/app/components/shared/double-slider/double-slider.component.ts b/src/app/components/shared/double-slider/double-slider.component.ts
old mode 100644
new mode 100755
diff --git a/src/app/components/shared/select-add/select-add.component.html b/src/app/components/shared/select-add/select-add.component.html
old mode 100644
new mode 100755
index f1cc3d1..2a8b98f
--- a/src/app/components/shared/select-add/select-add.component.html
+++ b/src/app/components/shared/select-add/select-add.component.html
@@ -1,22 +1,40 @@
-
{{ tasks.length == 0 ? '' : tasks.length }} + {{ tasks.length == 0 ? '' : tasks.length == 1 ? 'task' : 'tasks' }}
diff --git a/src/app/components/pages/page/tower/tasks/tasks.component.scss b/src/app/components/pages/page/tower/tasks/tasks.component.scss
old mode 100644
new mode 100755
diff --git a/src/app/components/pages/page/tower/tasks/tasks.component.ts b/src/app/components/pages/page/tower/tasks/tasks.component.ts
old mode 100644
new mode 100755
index d8fa365..d2bfdc1
--- a/src/app/components/pages/page/tower/tasks/tasks.component.ts
+++ b/src/app/components/pages/page/tower/tasks/tasks.component.ts
@@ -1,19 +1,19 @@
-import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
-import { Block, BlockState } from '../../../../../model/block';
+import { ChangeDetectorRef, Component, ElementRef, Input, ViewChild } from '@angular/core';
+import { Block } from '../../../../../model/block';
import { Tower } from '../../../../../model/tower';
import { ModalService } from '../../../../../services/modal.service';
import { CancelService } from '../../../../../services/cancel.service';
import { IColor } from '../../../../../interfaces/color';
-import { IBlock } from '../../../../../interfaces/persistance/block';
+import { Observable } from 'rxjs/internal/Observable';
@Component({
selector: 'app-tasks',
templateUrl: './tasks.component.html',
styleUrls: ['./tasks.component.scss']
})
-export class TasksComponent implements OnInit {
+export class TasksComponent {
@Input() tasks: Array;
- @Input() tower: Tower;
+ @Input() tower$: Observable;
private _isOpen = false;
@Input() set isOpen(value: boolean) {
@@ -29,47 +29,27 @@ export class TasksComponent implements OnInit {
@ViewChild('allTask') allTask: ElementRef;
- constructor(private modalService: ModalService, private cancelService: CancelService) {
+ constructor(
+ private modalService: ModalService,
+ private cancelService: CancelService,
+ private changeDetection: ChangeDetectorRef
+ ) {
this.cancelService.subscribe(this, () => {
this.isOpen = false;
});
}
- ngOnInit() {}
-
async handleClick(block: Block) {
try {
- const { selected, description, isDone } = await this.modalService.showEditBlock({
- options: this.tower.tags,
- default: block.tag,
- description: block.description,
- isDone: block.isDone
+ await this.modalService.showBlocks({
+ tower$: this.tower$,
+ startBlock: block,
+ onlyDone: false
});
-
- const change: Partial = {
- tag: selected,
- description,
- isDone
- };
- if (!block.isDone && isDone) {
- change.created = new Date();
- }
-
- block.changeKeys(change);
} catch {
// pass
- }
- }
-
- public async addTask() {
- try {
- const { selected: tag, description, isDone } = await this.modalService.showCreateBlock({
- options: this.tower.tags,
- isTask: true
- });
- this.tower.addBlock({ tag, description, isDone });
- } catch (e) {
- // pass
+ } finally {
+ this.changeDetection.markForCheck();
}
}
}
diff --git a/src/app/components/pages/page/tower/tower.component.html b/src/app/components/pages/page/tower/tower.component.html
old mode 100644
new mode 100755
index 3bcad7e..98788b6
--- a/src/app/components/pages/page/tower/tower.component.html
+++ b/src/app/components/pages/page/tower/tower.component.html
@@ -1,30 +1,31 @@
+
diff --git a/src/app/components/pages/page/tower/tower.component.scss b/src/app/components/pages/page/tower/tower.component.scss
old mode 100644
new mode 100755
index 9d333fc..5e70603
--- a/src/app/components/pages/page/tower/tower.component.scss
+++ b/src/app/components/pages/page/tower/tower.component.scss
@@ -13,18 +13,25 @@
&:hover {
@media (min-width: $mobile-width) {
- div {
- .container {
- box-shadow: $shadow;
- }
+ div.container {
+ box-shadow: $shadow;
}
}
}
&.cdk-drag-preview {
- div {
- .container {
- box-shadow: $shadow;
+ div.container {
+ @media (max-width: $mobile-width) {
+ @keyframes shadow {
+ from {
+ box-shadow: none;
+ }
+ to {
+ box-shadow: $shadow;
+ }
+ }
+
+ animation: shadow $long-animation-time forwards;
}
}
}
@@ -87,9 +94,6 @@
transition: opacity $short-animation-time;
}
- .tasks-container {
- }
-
img {
position: relative;
z-index: 2;
diff --git a/src/app/components/pages/page/tower/tower.component.ts b/src/app/components/pages/page/tower/tower.component.ts
old mode 100644
new mode 100755
index afda1d4..799586b
--- a/src/app/components/pages/page/tower/tower.component.ts
+++ b/src/app/components/pages/page/tower/tower.component.ts
@@ -1,9 +1,10 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, Input, OnInit } from '@angular/core';
import { ColoredBlock, Tower } from '../../../../model/tower';
import { ModalService } from '../../../../services/modal.service';
import { Observable } from 'rxjs/internal/Observable';
import { Range } from '../../../../interfaces/range';
import { top } from '../../../../utils/top';
+import { CancelService } from '../../../../services/cancel.service';
type StyledBlock = ColoredBlock & { style: { [p: string]: string }; shouldDraw: boolean; cssClass: string };
@@ -14,9 +15,9 @@ type StyledBlock = ColoredBlock & { style: { [p: string]: string }; shouldDraw:
})
export class TowerComponent implements OnInit {
@Input() dateRange$: Observable>;
- private dateRange: Range;
-
@Input() tower$: Observable;
+
+ private dateRange: Range;
private tower: Tower;
get towerName(): string {
@@ -28,18 +29,20 @@ export class TowerComponent implements OnInit {
}
tasks: Array;
- blocks: Array = [];
+
+ styledBlocks: Array = [];
+
get drawableBlocks(): Array {
- return this.blocks.filter(b => b.shouldDraw);
+ return this.styledBlocks.filter(b => b.shouldDraw);
}
- public constructor(private modalService: ModalService) {}
+ public constructor(private modalService: ModalService, private changeDetection: ChangeDetectorRef) {}
ngOnInit() {
this.tower$.subscribe(value => {
+ // console.log(this.tower, value);
if (value) {
- console.log('update');
- this.blocks = value.coloredBlocks
+ this.styledBlocks = value.coloredBlocks
.filter(b => b.isDone)
.map(b => {
const classedBlock = b as StyledBlock;
@@ -55,21 +58,26 @@ export class TowerComponent implements OnInit {
});
if (
- (difference.every(i => i) && this.tower.blocks.length + 1 === value.blocks.length) ||
+ (difference.every(i => i) &&
+ this.tower.blocks.length + 1 === value.blocks.length &&
+ top(value.blocks).isDone) ||
(this.tower.blocks.length === value.blocks.length &&
this.tower.blocks.filter(b => b.isDone).length + 1 === value.blocks.filter(b => b.isDone).length)
) {
- const lastBlock = top(this.blocks);
+ const lastBlock = top(this.styledBlocks);
if (lastBlock) {
lastBlock.style = { transform: 'translateY(500%)', opacity: '0' };
- lastBlock.cssClass = 'descend';
- setTimeout(() => (lastBlock.style = { transform: 'translateY(0)', opacity: '1' }), 0);
+ setTimeout(() => {
+ this.makeBlockDescend(lastBlock);
+ this.changeDetection.markForCheck();
+ }, 0);
}
}
}
this.tasks = value.coloredBlocks.filter(block => !block.isDone);
this.tower = value;
+ this.changeDetection.markForCheck();
}
});
@@ -79,29 +87,36 @@ export class TowerComponent implements OnInit {
});
}
+ makeBlockDescend(block: StyledBlock) {
+ block.cssClass = 'descend';
+ block.style = { transform: 'translateY(0)', opacity: '1' };
+ }
+
+ makeBlockAscend(block: StyledBlock) {
+ block.cssClass = 'ascend';
+ block.style = { transform: 'translateY(500%)', opacity: '0' };
+ }
+
initData(newDateRange: Range) {
- for (const block of this.blocks) {
+ for (const block of this.styledBlocks) {
block.shouldDraw = newDateRange.from <= block.created;
- if ((block.cssClass === '' || block.cssClass === 'descend') && newDateRange.to < block.created) {
- block.cssClass = 'ascend';
- block.style = { transform: 'translateY(500%)', opacity: '0' };
+ if (newDateRange.to < block.created) {
+ this.makeBlockAscend(block);
}
- if (block.shouldDraw && block.cssClass === 'ascend' && block.created <= newDateRange.to) {
- block.cssClass = 'descend';
- block.style = { transform: 'translateY(0)', opacity: '1' };
+ if (block.shouldDraw && block.created <= newDateRange.to) {
+ this.makeBlockDescend(block);
}
}
}
public async addBlock() {
try {
- const { selected: tag, description, isDone } = await this.modalService.showCreateBlock({
- options: this.tower.tags,
- isTask: false
+ await this.modalService.showBlocks({
+ tower$: this.tower$,
+ onlyDone: true
});
- this.tower.addBlock({ tag, description, isDone });
- } catch (e) {
+ } catch {
// pass
}
}
diff --git a/src/app/components/pages/pages.component.html b/src/app/components/pages/pages.component.html
old mode 100644
new mode 100755
index d67007a..81a7278
--- a/src/app/components/pages/pages.component.html
+++ b/src/app/components/pages/pages.component.html
@@ -4,7 +4,9 @@
[options]="pageNames"
[default]="(selectedPage$ | async)?.name"
(value)="selectPage($event)"
+ (optionChange)="changeName($event)"
[placeholder]="'Add a new page…'"
+ [editable]="true"
>
@@ -15,4 +17,6 @@
-
+
diff --git a/src/app/components/pages/pages.component.scss b/src/app/components/pages/pages.component.scss
old mode 100644
new mode 100755
diff --git a/src/app/components/pages/pages.component.ts b/src/app/components/pages/pages.component.ts
old mode 100644
new mode 100755
index 13bb6ba..8fdc4eb
--- a/src/app/components/pages/pages.component.ts
+++ b/src/app/components/pages/pages.component.ts
@@ -1,9 +1,11 @@
-import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { ChangeDetectorRef, Component, ElementRef, OnInit, 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';
+import { Data } from '../../model/data';
+import { of } from 'rxjs/internal/observable/of';
const USER_DATA_KEY = 'life-towers.user-data.v.2';
@@ -17,6 +19,7 @@ export class PagesComponent implements OnInit {
@ViewChild('page') page: ElementRef;
@ViewChild('bottom') bottom: ElementRef;
+ data: Data;
pages: Array
-
-
+
-
-
-
+
+
-
-
- 
+
+
+
diff --git a/src/app/components/shared/select-add/select-add.component.scss b/src/app/components/shared/select-add/select-add.component.scss
old mode 100644
new mode 100755
index 941da58..9920d6f
--- a/src/app/components/shared/select-add/select-add.component.scss
+++ b/src/app/components/shared/select-add/select-add.component.scss
@@ -19,7 +19,8 @@ $inner-padding: var(--medium-padding);
position: relative;
cursor: pointer;
- p {
+ p,
+ input[type='text'] {
display: inline-block;
@include sub-title-text();
}
@@ -36,7 +37,7 @@ $inner-padding: var(--medium-padding);
.bottom-container {
width: 100%;
- height: 40vh;
+ height: 300px;
position: absolute;
overflow-y: hidden;
@@ -77,6 +78,75 @@ $inner-padding: var(--medium-padding);
cursor: pointer;
}
+
+ .buttons {
+ height: 32px;
+ @media (max-width: $mobile-width) {
+ height: 24px;
+ }
+ position: relative;
+ width: 100%;
+
+ button {
+ margin: 0;
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translateY(-50%) translateX(-50%);
+ }
+
+ .edit {
+ position: absolute;
+ right: 0;
+ top: 50%;
+ transform: translateY(-50%);
+ margin: 0;
+ opacity: 0.25;
+ cursor: pointer;
+
+ img {
+ @include square(16px);
+ }
+
+ transition: opacity $short-animation-time;
+
+ &:before {
+ content: '';
+ display: block;
+ position: absolute;
+ bottom: calc(-1 * #{$line-height});
+ left: 0;
+ height: $line-height;
+ background-color: $text-color;
+ width: 0;
+ transition: width $long-animation-time;
+ }
+
+ @media (min-width: $mobile-width) {
+ &:hover {
+ opacity: 0.5;
+ }
+ &:hover {
+ &:before {
+ width: 100% !important;
+ }
+ }
+ }
+
+ &.active {
+ &:before {
+ width: 100% !important;
+ }
+ }
+
+ &.active {
+ opacity: 1;
+ }
+ }
+ }
+ }
+
+ .edit {
}
}
diff --git a/src/app/components/shared/select-add/select-add.component.ts b/src/app/components/shared/select-add/select-add.component.ts
old mode 100644
new mode 100755
index d52f4d3..a6751dc
--- a/src/app/components/shared/select-add/select-add.component.ts
+++ b/src/app/components/shared/select-add/select-add.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, Output, EventEmitter, ViewChild, ElementRef } from '@angular/core';
+import { Component, Input, Output, EventEmitter, ViewChild, ElementRef, ChangeDetectorRef } from '@angular/core';
import { CancelService } from '../../../services/cancel.service';
@Component({
@@ -8,19 +8,31 @@ import { CancelService } from '../../../services/cancel.service';
})
export class SelectAddComponent {
@Input() placeholder = 'Add a new value…';
+ @Input() newValuePlaceholder = 'Add a value…';
@Input() maxItemCount = 7;
@Input() options: string[];
@Input() alwaysDropShadow = false;
@Input() onlyShadowBorder = false;
+ @Input() editable = false;
@Input() set default(value: string) {
this.selected = value;
- if (value) {
- this.value.emit(value);
- }
+ }
+
+ backgroundHeight: string;
+
+ private _editMode = false;
+ set editMode(value: boolean) {
+ this._editMode = value;
+ this.backgroundHeight = this.getBackgroundHeight();
+ }
+
+ get editMode(): boolean {
+ return this._editMode;
}
@Output() value: EventEmitter = new EventEmitter();
+ @Output() optionChange: EventEmitter<{ from: string; to: string }> = new EventEmitter();
@ViewChild('top') top: ElementRef;
@ViewChild('bottom') bottom: ElementRef;
@@ -29,9 +41,19 @@ export class SelectAddComponent {
newOption: string;
isOpen = false;
- constructor(private cancelService: CancelService) {
+ constructor(private cancelService: CancelService, private changeDetection: ChangeDetectorRef) {
this.cancelService.subscribe(this, () => {
this.isOpen = false;
+ this.editMode = false;
+ this.changeDetection.markForCheck();
+ });
+ }
+
+ changeOption(from: string, event) {
+ // console.log(event);
+ this.optionChange.emit({
+ from,
+ to: event.target.value
});
}
@@ -45,15 +67,6 @@ export class SelectAddComponent {
}
}
- get backgroundHeight(): string {
- if (this.isOpen && this.top && this.bottom) {
- const topHeight = this.top.nativeElement.clientHeight;
- const bottomHeight = this.bottom.nativeElement.clientHeight;
- return `${topHeight + bottomHeight}px`;
- }
- return `100%`;
- }
-
addNewOption() {
if (this.newOption) {
this.select(this.newOption);
@@ -69,5 +82,26 @@ export class SelectAddComponent {
toggle() {
this.isOpen = !this.isOpen;
+ if (!this.isOpen) {
+ this.editMode = false;
+ }
+ this.backgroundHeight = this.getBackgroundHeight();
+ }
+
+ onArrowClick(event) {
+ if (this.editMode) {
+ this.toggle();
+ event.stopPropagation();
+ }
+ }
+
+ private getBackgroundHeight(): string {
+ if (this.isOpen && this.top && this.bottom) {
+ const topHeight = this.top.nativeElement.clientHeight;
+ const bottomHeight = this.bottom.nativeElement.clientHeight;
+ // console.log(topHeight, bottomHeight);
+ return `${topHeight + bottomHeight}px`;
+ }
+ return `100%`;
}
}
diff --git a/src/app/components/shared/toggle/toggle.component.html b/src/app/components/shared/toggle/toggle.component.html
old mode 100644
new mode 100755
index 8026d79..6873dcd
--- a/src/app/components/shared/toggle/toggle.component.html
+++ b/src/app/components/shared/toggle/toggle.component.html
@@ -1,5 +1,7 @@
-
+
diff --git a/src/app/components/shared/toggle/toggle.component.scss b/src/app/components/shared/toggle/toggle.component.scss
old mode 100644
new mode 100755
index 9ef51ea..2f2c77f
--- a/src/app/components/shared/toggle/toggle.component.scss
+++ b/src/app/components/shared/toggle/toggle.component.scss
@@ -24,46 +24,52 @@
}
}
- input[type='checkbox'] {
- -webkit-appearance: none;
- -moz-appearance: none;
+ label {
+ display: block;
- width: 2 * $size;
- height: $size;
+ input[type='checkbox'] {
+ -webkit-appearance: none;
+ -moz-appearance: none;
- border-radius: 1000px;
- box-shadow: $shadow-border;
-
- position: relative;
- cursor: pointer;
-
- &:after {
- content: '';
- position: absolute;
- display: block;
- left: 0;
-
- @include square($size);
+ width: 2 * $size;
+ height: $size;
border-radius: 1000px;
- background-color: $text-color;
+ box-shadow: $shadow-border;
- transition: box-shadow $long-animation-time, left $long-animation-time, transform $long-animation-time;
- }
+ position: relative;
+ cursor: pointer;
- @media (min-width: $mobile-width) {
- &:hover:after {
- box-shadow: $shadow;
- transform: translateX(2px);
+ &:after {
+ content: '';
+ position: absolute;
+ display: block;
+ left: 0;
+
+ @include square($size);
+
+ border-radius: 1000px;
+ background-color: $text-color;
+
+ transition: box-shadow $long-animation-time, left $long-animation-time, transform $long-animation-time;
}
- &.on:hover:after {
- transform: translateX(-2px);
+ &.on:after {
+ left: $size;
}
}
- &.on:after {
- left: $size;
+ input[type='checkbox'] {
+ @media (min-width: $mobile-width) {
+ &:hover:after {
+ box-shadow: $shadow;
+ transform: translateX(2px);
+ }
+
+ &.on:hover:after {
+ transform: translateX(-2px);
+ }
+ }
}
}
}
diff --git a/src/app/components/shared/toggle/toggle.component.ts b/src/app/components/shared/toggle/toggle.component.ts
old mode 100644
new mode 100755
diff --git a/src/app/interfaces/color.ts b/src/app/interfaces/color.ts
old mode 100644
new mode 100755
diff --git a/src/app/interfaces/persistance/block.ts b/src/app/interfaces/persistance/block.ts
old mode 100644
new mode 100755
index 5021ea3..8cf78d1
--- a/src/app/interfaces/persistance/block.ts
+++ b/src/app/interfaces/persistance/block.ts
@@ -1,4 +1,6 @@
-export interface IBlock {
+import { IUnique } from './unique';
+
+export interface IBlock extends IUnique {
created: Date;
tag: string;
isDone: boolean;
diff --git a/src/app/interfaces/persistance/data.ts b/src/app/interfaces/persistance/data.ts
new file mode 100755
index 0000000..df92560
--- /dev/null
+++ b/src/app/interfaces/persistance/data.ts
@@ -0,0 +1,6 @@
+import { IPage } from './page';
+import { IUnique } from './unique';
+
+export interface IData extends IUnique {
+ pages: Array;
+}
diff --git a/src/app/interfaces/persistance/page.ts b/src/app/interfaces/persistance/page.ts
old mode 100644
new mode 100755
index 75d9bf7..a096fae
--- a/src/app/interfaces/persistance/page.ts
+++ b/src/app/interfaces/persistance/page.ts
@@ -1,12 +1,13 @@
import { ITower } from './tower';
import { Range } from '../range';
+import { IUnique } from './unique';
-export interface IPage {
+export interface IPage extends IUnique {
name: string;
towers: ITower[];
userData: {
- hideCreateTowerButton?: boolean;
- defaultDateRange?: Range;
+ hideCreateTowerButton: boolean;
+ defaultDateRange: Range;
};
}
diff --git a/src/app/interfaces/persistance/tower.ts b/src/app/interfaces/persistance/tower.ts
old mode 100644
new mode 100755
index 4776161..05d0a51
--- a/src/app/interfaces/persistance/tower.ts
+++ b/src/app/interfaces/persistance/tower.ts
@@ -1,7 +1,8 @@
import { IBlock } from './block';
import { IColor } from '../color';
+import { IUnique } from './unique';
-export interface ITower {
+export interface ITower extends IUnique {
name: string;
blocks: IBlock[];
baseColor: IColor;
diff --git a/src/app/interfaces/persistance/unique.ts b/src/app/interfaces/persistance/unique.ts
new file mode 100755
index 0000000..e41e7c2
--- /dev/null
+++ b/src/app/interfaces/persistance/unique.ts
@@ -0,0 +1,3 @@
+export interface IUnique {
+ id?: string;
+}
diff --git a/src/app/interfaces/range.ts b/src/app/interfaces/range.ts
old mode 100644
new mode 100755
diff --git a/src/app/interfaces/serializable.ts b/src/app/interfaces/serializable.ts
new file mode 100755
index 0000000..3a23338
--- /dev/null
+++ b/src/app/interfaces/serializable.ts
@@ -0,0 +1,3 @@
+export interface ISerializable {
+ serialize(referenceSerializer: (ref: object) => any): object;
+}
diff --git a/src/app/model/block.ts b/src/app/model/block.ts
old mode 100644
new mode 100755
index 74ba9ee..e54cc32
--- a/src/app/model/block.ts
+++ b/src/app/model/block.ts
@@ -1,23 +1,36 @@
-import { Serializable } from './serializable';
import { IBlock } from '../interfaces/persistance/block';
-import { InnerNodeState } from '../store/inner-node';
+import { InnerNode, InnerNodeState } from '../store/inner-node';
export interface BlockState extends IBlock, InnerNodeState {}
-export class Block extends Serializable implements IBlock, BlockState {
- readonly created: Date;
- readonly isDone: boolean;
- readonly description: string;
+export class Block extends InnerNode implements IBlock, BlockState {
readonly tag: string;
+ readonly description: string;
+ readonly isDone: boolean;
+ readonly created: Date;
- constructor(props: IBlock) {
+ constructor(props: IBlock, referenceDeserializer: (from: any) => any = e => e) {
+ super([], props.id);
if (props.created.constructor.name !== 'Date') {
props.created = new Date(props.created);
}
- super(props, 'Block');
+ this.tag = props.tag;
+ this.description = props.description;
+ this.isDone = props.isDone;
+ this.created = props.created;
}
changeKeys(props: Partial): this {
return super.changeKeys(props);
}
+
+ serialize(referenceSerializer: (ref: object) => any): IBlock {
+ return {
+ ...super.serialize(referenceSerializer),
+ tag: this.tag,
+ description: this.description,
+ isDone: this.isDone,
+ created: this.created
+ };
+ }
}
diff --git a/src/app/model/data.ts b/src/app/model/data.ts
new file mode 100755
index 0000000..89b60dc
--- /dev/null
+++ b/src/app/model/data.ts
@@ -0,0 +1,44 @@
+import { InnerNode, InnerNodeState } from '../store/inner-node';
+import { IData } from '../interfaces/persistance/data';
+import { Page } from './page';
+
+export interface DataState extends IData, InnerNodeState {}
+
+export class Data extends InnerNode implements IData, DataState {
+ constructor(props: IData, referenceDeserializer: (from: any) => any = e => e) {
+ super(props.pages.map(p => new Page(referenceDeserializer(p), referenceDeserializer)), props.id);
+ }
+
+ get pages(): Array {
+ return this.children as Array;
+ }
+
+ addPage(name: string) {
+ const page = new Page({
+ name,
+ userData: {
+ hideCreateTowerButton: false,
+ defaultDateRange: {
+ from: null,
+ to: null
+ }
+ },
+ towers: []
+ });
+ this.addChildren([page]);
+ page.addTower();
+ }
+
+ removePage(page: Page) {
+ this.changeKeys({
+ children: this.children.filter(c => c !== page)
+ });
+ }
+
+ serialize(referenceSerializer: (ref: object) => any): IData {
+ return {
+ ...super.serialize(referenceSerializer),
+ pages: this.pages.map(referenceSerializer)
+ };
+ }
+}
diff --git a/src/app/model/page.ts b/src/app/model/page.ts
old mode 100644
new mode 100755
index 81af6d2..76ea7d3
--- a/src/app/model/page.ts
+++ b/src/app/model/page.ts
@@ -1,25 +1,24 @@
-import { Serializable } from './serializable';
import { IPage } from '../interfaces/persistance/page';
+import { Range } from '../interfaces/range';
import { Tower } from './tower';
-import { InnerNodeState } from '../store/inner-node';
+import { InnerNode, InnerNodeState } from '../store/inner-node';
export interface PageState extends InnerNodeState, IPage {
towers: Array;
}
-export class Page extends Serializable implements IPage, PageState {
+export class Page extends InnerNode implements IPage, PageState {
readonly name: string;
readonly userData: {
hideCreateTowerButton: boolean;
- defaultDateRange: {
- from: Date;
- to: Date;
- };
+ defaultDateRange: Range;
};
- constructor(props: IPage) {
- super(props, 'Page', props.towers.map(t => new Tower(t)));
+ constructor(props: IPage, referenceDeserializer: (from: any) => any = e => e) {
+ super(props.towers.map(t => new Tower(referenceDeserializer(t), referenceDeserializer)), props.id);
+ this.name = props.name;
+ this.userData = props.userData;
}
get towers(): Array {
@@ -58,6 +57,12 @@ export class Page extends Serializable implements IPage, PageState {
});
}
+ changeName(to: string) {
+ this.changeProps({
+ name: to
+ });
+ }
+
addTower(name = '') {
let hue;
do {
@@ -78,4 +83,13 @@ export class Page extends Serializable implements IPage, PageState {
towers: this.towers.filter(t => t !== tower)
});
}
+
+ serialize(referenceSerializer: (ref: object) => any): IPage {
+ return {
+ ...super.serialize(referenceSerializer),
+ name: this.name,
+ userData: this.userData,
+ towers: this.towers.map(referenceSerializer)
+ };
+ }
}
diff --git a/src/app/model/serializable.ts b/src/app/model/serializable.ts
deleted file mode 100644
index e44de18..0000000
--- a/src/app/model/serializable.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { InnerNode } from '../store/inner-node';
-
-export class Serializable extends InnerNode {
- static childrenMap: {
- [type: string]: {
- childrenConstructor: typeof Serializable;
- childrenListName: string;
- childrenType: string;
- };
- };
-
- private static propertyList: any = {};
- protected type: string;
-
- protected constructor(properties: any, type: string, children: Array = []) {
- super(children);
-
- const compiledType = this.constructor.name;
- if (!Serializable.propertyList.hasOwnProperty(compiledType)) {
- Serializable.propertyList[compiledType] = [];
- }
- for (const property in properties) {
- if (properties.hasOwnProperty(property)) {
- if (property !== Serializable.childrenMap[type].childrenListName) {
- this[property] = properties[property];
- }
-
- if (!Serializable.propertyList[compiledType].includes(property)) {
- Serializable.propertyList[compiledType].push(property);
- }
- }
- }
- }
-
- toJSON(): object {
- return Serializable.propertyList[this.constructor.name].reduce(
- (object, property) => ({
- [property]: this[property],
- ...object
- }),
- {}
- );
- }
-}
diff --git a/src/app/model/tower.ts b/src/app/model/tower.ts
old mode 100644
new mode 100755
index edaca9e..0f85056
--- a/src/app/model/tower.ts
+++ b/src/app/model/tower.ts
@@ -1,10 +1,9 @@
import { ITower } from '../interfaces/persistance/tower';
import { lighten } from '../utils/color';
import { Block } from './block';
-import { Serializable } from './serializable';
import { hash } from '../utils/hash';
import { IColor } from '../interfaces/color';
-import { InnerNodeState } from '../store/inner-node';
+import { InnerNode, InnerNodeState } from '../store/inner-node';
export type ColoredBlock = Block & { color: IColor };
@@ -12,14 +11,16 @@ export interface TowerState extends ITower, InnerNodeState {
blocks: Array;
}
-export class Tower extends Serializable implements ITower, TowerState {
- tags: string[];
+export class Tower extends InnerNode implements ITower, TowerState {
readonly name: string;
- coloredBlocks: Array;
readonly baseColor: IColor;
+ tags: string[];
+ coloredBlocks: Array;
- constructor(props: ITower) {
- super(props, 'Tower', props.blocks.map(b => new Block(b)));
+ constructor(props: ITower, referenceDeserializer: (from: any) => any = e => e) {
+ super(props.blocks.map(b => new Block(referenceDeserializer(b), referenceDeserializer)), props.id);
+ this.name = props.name;
+ this.baseColor = props.baseColor;
this.onAfterClone();
}
@@ -48,6 +49,19 @@ export class Tower extends Serializable implements ITower, TowerState {
this.changeKeys({ name });
}
+ getColorOfTag(tag: string): IColor {
+ return lighten((hash(tag) - 0.5) * 50, this.baseColor);
+ }
+
+ serialize(referenceSerializer: (ref: object) => any): ITower {
+ return {
+ ...super.serialize(referenceSerializer),
+ name: this.name,
+ baseColor: this.baseColor,
+ blocks: this.blocks.map(referenceSerializer)
+ };
+ }
+
protected onAfterClone() {
this.blocks.sort((a, b) => {
return a.created.getTime() - b.created.getTime();
@@ -55,7 +69,7 @@ export class Tower extends Serializable implements ITower, TowerState {
this.coloredBlocks = this.blocks.map(b => {
const coloredBlock = b as ColoredBlock;
- coloredBlock.color = lighten((hash(coloredBlock.tag) - 0.5) * 50, this.baseColor);
+ coloredBlock.color = this.getColorOfTag(b.tag);
return coloredBlock;
});
diff --git a/src/app/pipes/color.pipe.ts b/src/app/pipes/color.pipe.ts
old mode 100644
new mode 100755
diff --git a/src/app/pipes/format-date.pipe.ts b/src/app/pipes/format-date.pipe.ts
new file mode 100755
index 0000000..96314c4
--- /dev/null
+++ b/src/app/pipes/format-date.pipe.ts
@@ -0,0 +1,49 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+ name: 'formatDate',
+ pure: false
+})
+export class FormatDatePipe implements PipeTransform {
+ transform(value: Date): string {
+ const now = new Date();
+
+ const years = Math.floor(now.getFullYear() - value.getFullYear());
+ const months = Math.floor(now.getMonth() - value.getMonth());
+ const days = Math.floor(now.getDay() - value.getDay());
+ const minutes = Math.floor(now.getMinutes() - value.getMinutes());
+ const seconds = Math.floor(now.getSeconds() - value.getSeconds());
+
+ if (years === 1) {
+ return 'a year ago';
+ } else if (years > 1) {
+ return `${years} years ago`;
+ }
+
+ if (months === 1) {
+ return 'a month ago';
+ } else if (months > 1) {
+ return `${months} months ago`;
+ }
+
+ if (days === 1) {
+ return 'a day ago';
+ } else if (days > 1) {
+ return `${days} days ago`;
+ }
+
+ if (minutes === 1) {
+ return 'a minute ago';
+ } else if (minutes > 1) {
+ return `${minutes} minutes ago`;
+ }
+
+ if (seconds === 1) {
+ return 'just now';
+ } else if (seconds > 1) {
+ return `${seconds} seconds ago`;
+ }
+
+ return 'just now';
+ }
+}
diff --git a/src/app/services/api.service.ts b/src/app/services/api.service.ts
new file mode 100755
index 0000000..fd4430f
--- /dev/null
+++ b/src/app/services/api.service.ts
@@ -0,0 +1,53 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Unique } from '../store/unique';
+
+const API_URI = 'https://store.schmelczer.dev/api/store/';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class ApiService {
+ constructor(private http: HttpClient) {}
+
+ private static getAuthorizationHeader(id: string): HttpHeaders {
+ return new HttpHeaders().set('Authorization', `life-towers-v3 ${id}`);
+ }
+
+ async track(id: string): Promise {
+ await this.http.post(`${API_URI}me`, {}, { headers: ApiService.getAuthorizationHeader(id) }).toPromise();
+ }
+
+ async register(id: string): Promise {
+ await this.http.post(API_URI, { token: id }).toPromise();
+ }
+
+ async getObject(userId: string, objectId: string): Promise {
+ return await this.http
+ .get(`${API_URI}me/${objectId}`, { headers: ApiService.getAuthorizationHeader(userId) })
+ .toPromise();
+ }
+
+ async postObject(userId: string, objectId: string, serializedObject: string): Promise {
+ await this.http
+ .post(
+ `${API_URI}me/${objectId}`,
+ { data: serializedObject },
+ { headers: ApiService.getAuthorizationHeader(userId) }
+ )
+ .toPromise();
+ }
+
+ async getRootId(userId: string): Promise {
+ return await this.http
+ // @ts-ignore
+ .get(`${API_URI}me/root`, { headers: ApiService.getAuthorizationHeader(userId), responseType: 'text' })
+ .toPromise();
+ }
+
+ async setRootId(userId: string, rootId: string): Promise {
+ await this.http
+ .put(`${API_URI}me/root`, { root_id: rootId }, { headers: ApiService.getAuthorizationHeader(userId) })
+ .toPromise();
+ }
+}
diff --git a/src/app/services/cancel.service.ts b/src/app/services/cancel.service.ts
old mode 100644
new mode 100755
index b159577..e3537ea
--- a/src/app/services/cancel.service.ts
+++ b/src/app/services/cancel.service.ts
@@ -11,8 +11,6 @@ interface Subscriber {
export class CancelService {
private subscribers: Subscriber[] = [];
- constructor() {}
-
subscribe(object: object, callback: () => void) {
this.subscribers.push({
object,
diff --git a/src/app/services/data.service.ts b/src/app/services/data.service.ts
old mode 100644
new mode 100755
index b9da30e..7e1dcef
--- a/src/app/services/data.service.ts
+++ b/src/app/services/data.service.ts
@@ -1,72 +1,35 @@
import { Injectable } from '@angular/core';
-import { StoreService } from './store.service';
-import { Page } from '../model/page';
import { Root } from '../store/root';
-import { Serializable } from '../model/serializable';
-import { Tower } from '../model/tower';
-import { Block } from '../model/block';
-import { IPage } from '../interfaces/persistance/page';
+import { MapStoreService } from './map-store.service';
+import { Data } from '../model/data';
@Injectable({
providedIn: 'root'
})
-export class DataService extends Root {
- constructor(private storeService: StoreService>) {
+export class DataService extends Root {
+ private shouldSave = true;
+ constructor(private store: MapStoreService) {
super();
- this.init().catch();
- }
- get pages(): Array {
- return this.children;
- }
-
- save(timeout: number) {
- this.storeService.scheduleSave(this.pages, timeout);
- }
-
- addPage(name: string) {
- const page = new Page({
- name,
- userData: {},
- towers: []
- });
- this.addChildren([page]);
- page.addTower();
- }
-
- removePage(page: Page) {
- this.changeKeys({
- children: this.children.filter(c => c !== page)
- });
- }
-
- private async init() {
- const pages = await this.storeService.load();
- Serializable.childrenMap = {
- Page: {
- childrenListName: 'towers',
- childrenConstructor: Tower,
- childrenType: 'Tower'
- },
- Tower: {
- childrenListName: 'blocks',
- childrenConstructor: Block,
- childrenType: 'Block'
- },
- Block: {
- childrenListName: null,
- childrenConstructor: null,
- childrenType: null
+ this.store.data.subscribe(d => {
+ if (d) {
+ this.shouldSave = false;
+ this.changeKeys({ children: [d] });
}
- };
+ });
+
this.children$.subscribe(_ => {
this.log();
});
- this.addChildren(pages.map(p => new Page(p)));
-
- this.children$.subscribe(_ => {
- this.save(0);
+ this.children$.subscribe(data => {
+ if (data && data.length && data[0]) {
+ if (!this.shouldSave) {
+ this.shouldSave = true;
+ return;
+ }
+ this.store.save(data[0]);
+ }
});
}
}
diff --git a/src/app/services/map-store.service.ts b/src/app/services/map-store.service.ts
new file mode 100755
index 0000000..322806c
--- /dev/null
+++ b/src/app/services/map-store.service.ts
@@ -0,0 +1,191 @@
+import { Injectable } from '@angular/core';
+import * as uuid from 'uuid';
+import { Data } from '../model/data';
+import { ITower } from '../interfaces/persistance/tower';
+import { IPage } from '../interfaces/persistance/page';
+import { IData } from '../interfaces/persistance/data';
+import { IUnique } from '../interfaces/persistance/unique';
+import { ApiService } from './api.service';
+import { Unique } from '../store/unique';
+import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject';
+import { Observable } from 'rxjs/internal/Observable';
+
+const LOCAL_STORAGE_KEY = 'life-towers.data.v.3';
+
+interface LifeTowersData {
+ token: string;
+ root: string;
+ objects: {
+ [id: string]: IUnique;
+ };
+}
+
+@Injectable({
+ providedIn: 'root'
+})
+export class MapStoreService {
+ private state: LifeTowersData;
+ private canSaveTrigger: () => void;
+ private canSave = new Promise(r => (this.canSaveTrigger = r));
+ private dataToSave: Data;
+
+ private saveEverything = false;
+
+ private readonly _data: BehaviorSubject = new BehaviorSubject(null);
+ readonly data: Observable = this._data.asObservable();
+
+ constructor(private api: ApiService) {
+ const storedData: string = localStorage.getItem(LOCAL_STORAGE_KEY);
+
+ if (storedData) {
+ this.state = JSON.parse(storedData);
+ this.initWithLoad().catch();
+ } else {
+ this.initWithRegister().catch();
+ }
+ this.api.track(this.state.token).catch();
+ }
+
+ private static getSeed(): LifeTowersData {
+ const towerId = uuid.v4();
+ const tower: ITower = {
+ id: towerId,
+ name: null,
+ blocks: [],
+ baseColor: { h: 0, s: 100, l: 50 }
+ };
+
+ const pageId = uuid.v4();
+ const page: IPage = {
+ id: pageId,
+ name: 'My first page',
+ towers: [towerId],
+ userData: {
+ hideCreateTowerButton: false,
+ defaultDateRange: {
+ from: null,
+ to: null
+ }
+ }
+ };
+
+ const dataId = uuid.v4();
+ const data: IData = {
+ id: dataId,
+ pages: [pageId]
+ };
+
+ return {
+ token: uuid.v4(),
+ root: dataId,
+ objects: {
+ [dataId]: data,
+ [pageId]: page,
+ [towerId]: tower
+ }
+ };
+ }
+
+ save(root: Data) {
+ this.dataToSave = root;
+
+ setTimeout(() => {
+ if (this.dataToSave === root) {
+ this.realSave(root).catch();
+ }
+ }, 750);
+ }
+
+ private get root(): Data {
+ return new Data(this.state.objects[this.state.root] as IData, id => this.state.objects[id]);
+ }
+
+ get userToken(): string {
+ return this.state.token;
+ }
+
+ set userToken(value: string) {
+ this.state.token = value;
+ this.initWithLoad().catch();
+ }
+
+ private async realSave(root: Data): Promise {
+ await this.canSave;
+
+ const waiting: Array = [root];
+ const referenceSerializer = (e: Unique): string => {
+ waiting.push(e);
+ return e.id;
+ };
+
+ while (waiting.length > 0) {
+ const candidate = waiting.pop();
+ if (!this.saveEverything && this.state.objects.hasOwnProperty(candidate.id)) {
+ continue;
+ }
+
+ const serialized = candidate.serialize(referenceSerializer);
+
+ this.state.objects[candidate.id] = serialized;
+ this.api.postObject(this.state.token, candidate.id, JSON.stringify(serialized)).catch();
+ }
+
+ this.api.setRootId(this.state.token, root.id).catch();
+ this.state.root = root.id;
+
+ localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(this.state));
+ }
+
+ private async initWithRegister(id?: string) {
+ this.state = MapStoreService.getSeed();
+ if (id) {
+ this.state.token = id;
+ }
+ this._data.next(this.root);
+
+ await this.api.register(this.state.token).catch();
+ this.canSaveTrigger();
+
+ this.saveEverything = true;
+ await this.realSave(this.root);
+ this.saveEverything = false;
+ }
+
+ private async initWithLoad() {
+ this.canSave = new Promise(r => (this.canSaveTrigger = r));
+
+ let realRoot: string;
+ try {
+ realRoot = await this.api.getRootId(this.state.token).catch();
+ } catch {
+ this.initWithRegister(this.state.token).catch();
+ return;
+ }
+
+ if (this.state.root !== realRoot) {
+ this.state.root = realRoot;
+ const root = await this.api.getObject(this.state.token, realRoot);
+ this.state.objects[this.state.root] = root;
+
+ const getUnknowns = async (element: any) => {
+ const childrenAliases = ['pages', 'towers', 'blocks'];
+
+ for (const childrenAlias of childrenAliases) {
+ if (element.hasOwnProperty(childrenAlias)) {
+ for (const p of element[childrenAlias]) {
+ if (!this.state.objects.hasOwnProperty(p)) {
+ const unknown = await this.api.getObject(this.state.token, p);
+ this.state.objects[p] = unknown;
+ await getUnknowns(unknown);
+ }
+ }
+ }
+ }
+ };
+
+ await getUnknowns(root);
+ }
+ this._data.next(this.root);
+ this.canSaveTrigger();
+ }
+}
diff --git a/src/app/services/modal.service.ts b/src/app/services/modal.service.ts
old mode 100644
new mode 100755
index 5054bf0..0f1d3e9
--- a/src/app/services/modal.service.ts
+++ b/src/app/services/modal.service.ts
@@ -4,11 +4,11 @@ import { top } from '../utils/top';
import { CancelService } from './cancel.service';
import { Page } from '../model/page';
import { Observable } from 'rxjs/internal/Observable';
+import { Block } from '../model/block';
+import { Data } from '../model/data';
export enum ModalType {
- createBlock,
- editBlock,
- removeBlock,
+ blocks,
settings,
removeTower,
removePage,
@@ -30,24 +30,12 @@ export class ModalService {
constructor(private cancelService: CancelService) {}
- showCreateBlock(input: {
- options: string[];
- isTask: boolean;
- }): Promise<{ selected: string; description: string; isDone: boolean }> {
- return this.createPromiseAndPushToStack(input, ModalType.createBlock);
+ showBlocks(input: { tower$: Observable; onlyDone: boolean; startBlock?: Block }): Promise {
+ return this.createPromiseAndPushToStack(input, ModalType.blocks);
}
- showEditBlock(data: {
- default: string;
- options: string[];
- description: string;
- isDone: boolean;
- }): Promise<{ selected: string; description: string; isDone: boolean }> {
- return this.createPromiseAndPushToStack(data, ModalType.editBlock);
- }
-
- showSettings(selectedPage: Observable): Promise {
- return this.createPromiseAndPushToStack(selectedPage, ModalType.settings);
+ showSettings(options: { page$: Observable; data$: Observable }): Promise {
+ return this.createPromiseAndPushToStack(options, ModalType.settings);
}
showRemoveTower(tower: Tower): Promise {
@@ -63,13 +51,17 @@ export class ModalService {
}
submit(output?: any) {
- const { resolve } = this.modalStack.pop();
- resolve(output);
+ const modal = this.modalStack.pop();
+ if (modal) {
+ modal.resolve(output);
+ }
}
cancel() {
- const { reject } = this.modalStack.pop();
- reject();
+ const modal = this.modalStack.pop();
+ if (modal) {
+ modal.reject();
+ }
}
private createPromiseAndPushToStack(input: any, type: ModalType): Promise {
diff --git a/src/app/services/store.service.ts b/src/app/services/store.service.ts
deleted file mode 100644
index a4b1596..0000000
--- a/src/app/services/store.service.ts
+++ /dev/null
@@ -1,124 +0,0 @@
-import { Injectable } from '@angular/core';
-import { Page } from '../model/page';
-import { IPage } from '../interfaces/persistance/page';
-
-const LOCAL_STORAGE_KEY = 'life-towers.data.v.2';
-
-@Injectable({
- providedIn: 'root'
-})
-export class StoreService {
- private saveScheduled = false;
- private dataToSave: T;
- private storedData: T;
- private mockData: string = JSON.stringify([
- {
- name: 'Work & life',
- userData: {},
- towers: [
- {
- name: 'work',
- baseColor: { h: 0, s: 100, l: 50 },
- blocks: [
- {
- created: new Date(2015, 2, 13),
- tag: 'a',
- description: 'done it',
- isDone: true
- },
- {
- created: new Date(2016, 2, 15),
- tag: 'go to school',
- description: 'done it',
- isDone: false
- },
- {
- created: new Date(2017, 2, 15),
- tag: 'go to work',
- isDone: true
- },
- {
- created: new Date(2018, 2, 13),
- tag: 'go to work',
- description: 'done it',
- isDone: true
- },
- {
- created: new Date(2019, 3, 13),
- tag: 'go to work',
- isDone: false
- },
- {
- created: new Date(2019, 3, 15),
- tag: 'go to school',
- description: 'done it',
- isDone: true
- },
- {
- created: new Date(2019, 3, 15, 19),
- tag: 'go to school',
- isDone: false
- }
- ]
- },
- {
- baseColor: { h: 180, s: 100, l: 50 },
- name: 'life',
- blocks: [
- {
- created: new Date(2019, 3, 13),
- tag: 'go home',
- description: 'done it',
- isDone: false
- },
- {
- created: new Date(2019, 4, 13),
- tag: 'go home',
- isDone: false
- },
- {
- created: new Date(2019, 4, 15),
- tag: 'go to work',
- description: 'done it',
- isDone: false
- },
- {
- created: new Date(2019, 4, 15, 14),
- tag: 'go to work',
- isDone: false
- }
- ]
- }
- ]
- }
- ]);
-
- constructor() {
- const localStorageData = localStorage.getItem(LOCAL_STORAGE_KEY);
- this.storedData = JSON.parse(localStorageData ? localStorageData : this.mockData) as T;
- }
-
- scheduleSave(data: T, timeout: number) {
- this.dataToSave = data;
- if (!this.saveScheduled) {
- this.saveScheduled = true;
- setTimeout(() => {
- this.saveScheduled = false;
- this.save(this.dataToSave).catch();
- }, timeout);
- }
- }
-
- async load(): Promise {
- console.log('load', this.storedData);
- return this.storedData;
- }
-
- async save(data: T): Promise {
- this.storedData = data;
- const stringified = JSON.stringify(this.storedData, null, 2);
- console.log('save');
- // console.log('save', stringified);
- window.localStorage.setItem(LOCAL_STORAGE_KEY, stringified);
- }
-}
diff --git a/src/app/store/inner-node.ts b/src/app/store/inner-node.ts
old mode 100644
new mode 100755
index e5f6c57..e742ab1
--- a/src/app/store/inner-node.ts
+++ b/src/app/store/inner-node.ts
@@ -10,8 +10,8 @@ export class InnerNode extends Node implements InnerNodeState {
private nextVersion: this = null;
readonly children: Array;
- constructor(children: Array = []) {
- super(children);
+ protected constructor(children: Array = [], id?: string) {
+ super(children, id);
this.children = children;
}
diff --git a/src/app/store/node.ts b/src/app/store/node.ts
old mode 100644
new mode 100755
index ed5b6e6..1abda69
--- a/src/app/store/node.ts
+++ b/src/app/store/node.ts
@@ -8,9 +8,9 @@ export interface NodeState {
export abstract class Node extends Unique implements NodeState {
abstract readonly children: Array;
- protected constructor(children: Array = []) {
- super();
- children.map(c => (c.parent = this));
+ protected constructor(children: Array = [], id?: string) {
+ super(id);
+ children.forEach(c => (c.parent = this));
}
protected abstract changeKeys(props: Partial): this;
@@ -32,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)}copies: ${this.copies}\n`;
+ let response = `${basicInfo}${' '.repeat(70 - basicInfo.length)}copies: ${this.copies}\n`;
for (const c of this.children) {
response += `${c._log(indent + ' ')}`;
}
@@ -40,7 +40,7 @@ export abstract class Node extends Unique implements NodeState {
}
public log() {
- console.log(this._log());
- console.log(`All in all, there are ${Unique.ObjectCount} objects.`);
+ // console.log(this._log());
+ // console.log(`All in all, there are ${Unique.ObjectCount} objects.`);
}
}
diff --git a/src/app/store/root.ts b/src/app/store/root.ts
old mode 100644
new mode 100755
diff --git a/src/app/store/unique.ts b/src/app/store/unique.ts
old mode 100644
new mode 100755
index 37fb3f1..111a01e
--- a/src/app/store/unique.ts
+++ b/src/app/store/unique.ts
@@ -1,26 +1,45 @@
-export class Unique {
- protected static nextId = 0;
+import * as uuid from 'uuid';
+import { ISerializable } from '../interfaces/serializable';
+import { IUnique } from '../interfaces/persistance/unique';
- constructor() {
- this.setUniqueness();
+export class Unique implements ISerializable, IUnique {
+ private static count = 0;
+
+ constructor(id?: string) {
+ if (id) {
+ this._id = id;
+ // console.log('got id ' + id);
+ } else {
+ this.setUniqueness();
+ // console.log('unique ' + this.id);
+ }
}
static get ObjectCount(): number {
- return Unique.nextId;
+ return Unique.count;
}
- private _id: number;
- get id(): number {
+ private _id: string;
+
+ get id(): string {
return this._id;
}
private _copies = 0;
+
get copies(): number {
return this._copies;
}
protected setUniqueness() {
- this._id = Unique.nextId++;
+ this._id = uuid.v4();
+ Unique.count++;
this._copies++;
}
+
+ serialize(referenceSerializer: (ref: object) => any): object {
+ return {
+ id: this.id
+ };
+ }
}
diff --git a/src/app/utils/color.ts b/src/app/utils/color.ts
old mode 100644
new mode 100755
diff --git a/src/app/utils/hash.ts b/src/app/utils/hash.ts
old mode 100644
new mode 100755
diff --git a/src/app/utils/range.ts b/src/app/utils/range.ts
old mode 100644
new mode 100755
index 5990ba9..023f8be
--- a/src/app/utils/range.ts
+++ b/src/app/utils/range.ts
@@ -1,7 +1,7 @@
export const range = ({ min = 0, max = Infinity, step = 1 }: { min?: number; max?: number; step?: number }) => {
return {
*[Symbol.iterator]() {
- for (let i = min; i < max; yield i, i += step);
+ for (let i = min; i < max; yield i, i += step) {}
}
};
};
diff --git a/src/app/utils/top.ts b/src/app/utils/top.ts
old mode 100644
new mode 100755
diff --git a/src/assets/.gitkeep b/src/assets/.gitkeep
old mode 100644
new mode 100755
diff --git a/src/assets/arrow.svg b/src/assets/arrow.svg
old mode 100644
new mode 100755
diff --git a/src/assets/edit.svg b/src/assets/edit.svg
deleted file mode 100644
index c7406cf..0000000
--- a/src/assets/edit.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-
-
diff --git a/src/assets/pen.svg b/src/assets/pen.svg
new file mode 100755
index 0000000..d798204
--- /dev/null
+++ b/src/assets/pen.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/src/assets/plus-sign.svg b/src/assets/plus-sign.svg
old mode 100644
new mode 100755
diff --git a/src/assets/trash.svg b/src/assets/trash.svg
old mode 100644
new mode 100755
diff --git a/src/assets/x-sign.svg b/src/assets/x-sign.svg
old mode 100644
new mode 100755
diff --git a/src/browserslist b/src/browserslist
old mode 100644
new mode 100755
diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts
old mode 100644
new mode 100755
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
old mode 100644
new mode 100755
diff --git a/src/favicon.ico b/src/favicon.ico
old mode 100644
new mode 100755
diff --git a/src/index.html b/src/index.html
old mode 100644
new mode 100755
diff --git a/src/karma.conf.js b/src/karma.conf.js
old mode 100644
new mode 100755
diff --git a/src/library/animations.scss b/src/library/animations.scss
old mode 100644
new mode 100755
diff --git a/src/library/common-variables.scss b/src/library/common-variables.scss
old mode 100644
new mode 100755
diff --git a/src/library/forms.scss b/src/library/forms.scss
old mode 100644
new mode 100755
index 0e730a1..43df3cf
--- a/src/library/forms.scss
+++ b/src/library/forms.scss
@@ -3,6 +3,11 @@
textarea {
@include normal-text();
+
+ &:disabled {
+ background-color: $light-color;
+ }
+
display: block;
width: 100%;
height: 150px;
diff --git a/src/library/main.scss b/src/library/main.scss
old mode 100644
new mode 100755
index 47bddb0..0156b7f
--- a/src/library/main.scss
+++ b/src/library/main.scss
@@ -48,6 +48,7 @@ img {
*::-webkit-scrollbar {
width: 4px;
+ height: 4px;
}
*::-webkit-scrollbar-track {
diff --git a/src/library/spacing.scss b/src/library/spacing.scss
old mode 100644
new mode 100755
diff --git a/src/library/text.scss b/src/library/text.scss
old mode 100644
new mode 100755
diff --git a/src/library/utils.scss b/src/library/utils.scss
old mode 100644
new mode 100755
diff --git a/src/main.ts b/src/main.ts
old mode 100644
new mode 100755
diff --git a/src/polyfills.ts b/src/polyfills.ts
old mode 100644
new mode 100755
diff --git a/src/styles.scss b/src/styles.scss
old mode 100644
new mode 100755
index 9d7f570..d03e6c9
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -29,9 +29,6 @@ html {
body {
height: 100%;
background: $background-gradient-opaque;
-}
-
-body {
text-align: center;
padding: var(--large-padding);
box-sizing: border-box;
diff --git a/src/test.ts b/src/test.ts
old mode 100644
new mode 100755
diff --git a/src/tsconfig.app.json b/src/tsconfig.app.json
old mode 100644
new mode 100755
diff --git a/src/tsconfig.spec.json b/src/tsconfig.spec.json
old mode 100644
new mode 100755
diff --git a/src/tslint.json b/src/tslint.json
old mode 100644
new mode 100755
diff --git a/tsconfig.json b/tsconfig.json
old mode 100644
new mode 100755
diff --git a/tslint.json b/tslint.json
old mode 100644
new mode 100755
diff --git a/yarn.lock b/yarn.lock
index 2e1e1a5..3593219 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6433,6 +6433,11 @@ uuid@^3.0.1, uuid@^3.3.2:
resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.2.tgz#1b4af4955eb3077c501c23872fc6513811587131"
integrity sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA==
+uuid@^3.3.3:
+ version "3.3.3"
+ resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.3.tgz#4568f0216e78760ee1dbf3a4d2cf53e224112866"
+ integrity sha512-pW0No1RGHgzlpHJO1nsVrHKpOEIxkGg1xB+v0ZmdNH5OAeAwzAVrCnI2/6Mtx+Uys6iaylxa+D3g4j63IKKjSQ==
+
validate-npm-package-license@^3.0.1:
version "3.0.4"
resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz#fc91f6b9c7ba15c857f4cb2c5defeec39d4f410a"
+
+
+
+
+
-
+
+
+
+
+
+
-
+
+
+
+ 
+
+
+