Merge with store

frontend/src/app/app-routing.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { PagesComponent } from './components/pages/pages.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: PagesComponent
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule {}

frontend/src/app/app.component.html

@@ -0,0 +1,4 @@
+<main (click)="cancelService.cancelAll()">
+  <app-modal></app-modal>
+  <router-outlet></router-outlet>
+</main>

frontend/src/app/app.component.scss

@@ -0,0 +1,3 @@
+main {
+  height: 100%;
+}

frontend/src/app/app.component.ts

@@ -0,0 +1,24 @@
+import { ChangeDetectionStrategy, Component, DoCheck } from '@angular/core';
+import { CancelService } from './services/cancel.service';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class AppComponent implements DoCheck {
+  title = 'life';
+
+  constructor(public cancelService: CancelService) {
+    window.addEventListener('keydown', (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        this.cancelService.cancelAll();
+      }
+    });
+  }
+
+  ngDoCheck() {
+    // console.log('app change detection');
+  }
+}

frontend/src/app/app.module.ts

@@ -0,0 +1,51 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { AppRoutingModule } from './app-routing.module';
+import { AppComponent } from './app.component';
+import { PageComponent } from './components/pages/page/page.component';
+import { TowerComponent } from './components/pages/page/tower/tower.component';
+import { DoubleSliderComponent } from './components/shared/double-slider/double-slider.component';
+import { PagesComponent } from './components/pages/pages.component';
+import { SelectAddComponent } from './components/shared/select-add/select-add.component';
+import { ModalComponent } from './components/modal/modal.component';
+import { FormsModule } from '@angular/forms';
+import { BlockComponent } from './components/pages/page/tower/block/block.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import { SettingsComponent } from './components/modal/modals/settings/settings.component';
+import { RemoveTowerComponent } from './components/modal/modals/remove-tower/remove-tower.component';
+import { RemovePageComponent } from './components/modal/modals/remove-page/remove-page.component';
+import { GetStartedComponent } from './components/modal/modals/get-started/get-started.component';
+import { ToggleComponent } from './components/shared/toggle/toggle.component';
+import { TasksComponent } from './components/pages/page/tower/tasks/tasks.component';
+import { ColorPipe } from './pipes/color.pipe';
+import { BlocksComponent } from './components/modal/modals/blocks/blocks.component';
+import { FormatDatePipe } from './pipes/format-date.pipe';
+import { HttpClientModule } from '@angular/common/http';
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    PageComponent,
+    BlockComponent,
+    TowerComponent,
+    DoubleSliderComponent,
+    PagesComponent,
+    SelectAddComponent,
+    ModalComponent,
+    BlockComponent,
+    SettingsComponent,
+    RemoveTowerComponent,
+    RemovePageComponent,
+    GetStartedComponent,
+    ToggleComponent,
+    TasksComponent,
+    ColorPipe,
+    BlocksComponent,
+    FormatDatePipe
+  ],
+  imports: [BrowserModule, AppRoutingModule, FormsModule, BrowserAnimationsModule, DragDropModule, HttpClientModule],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule {}

frontend/src/app/components/modal/modal.component.html

@@ -0,0 +1,11 @@
+<section
+  (click)="modalService.cancel()"
+  class="{{ modalService.active ? 'active' : '' }}"
+  [ngSwitch]="modalService.active?.type"
+>
+  <app-blocks (save)="save = $event" (click)="$event.stopPropagation()" *ngSwitchCase="ModalType.blocks"></app-blocks>
+  <app-remove-tower (click)="$event.stopPropagation()" *ngSwitchCase="ModalType.removeTower"></app-remove-tower>
+  <app-settings (click)="$event.stopPropagation()" *ngSwitchCase="ModalType.settings"></app-settings>
+  <app-get-started (click)="$event.stopPropagation()" *ngSwitchCase="ModalType.getStarted"></app-get-started>
+  <app-remove-page (click)="$event.stopPropagation()" *ngSwitchCase="ModalType.removePage"></app-remove-page>
+</section>

frontend/src/app/components/modal/modal.component.scss

@@ -0,0 +1,29 @@
+@import '../../../styles';
+
+section {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+
+  z-index: 10000;
+
+  @include center-child();
+
+  padding: var(--large-padding);
+
+  box-sizing: border-box;
+
+  background: $background-gradient;
+  transition: opacity 300ms;
+
+  &:not(.active) {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  button {
+    margin-top: var(--medium-padding);
+  }
+}

frontend/src/app/components/modal/modal.component.ts

@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { ModalService, ModalType } from '../../services/modal.service';
+import { CancelService } from '../../services/cancel.service';
+
+@Component({
+  selector: 'app-modal',
+  templateUrl: './modal.component.html',
+  styleUrls: ['./modal.component.scss']
+})
+export class ModalComponent {
+  ModalType = ModalType;
+
+  save: () => void = null;
+
+  constructor(public modalService: ModalService, private cancelService: CancelService) {
+    this.cancelService.subscribe(this, () => {
+      if (this.save) {
+        this.save();
+        this.save = null;
+      } else {
+        this.modalService.cancel();
+      }
+    });
+  }
+}

frontend/src/app/components/modal/modals/blocks/blocks.component.html

@@ -0,0 +1,85 @@
+<section #container *ngIf="tower">
+  <div class="card placeholder"></div>
+  <div
+    *ngFor="let i of range({ max: blocks.length })"
+    (click)="$event.stopPropagation(); scrollToChild(i + 1)"
+    class="card {{ i + 1 === activeChild ? 'active' : '' }} {{
+      i + 2 === activeChild || i === activeChild ? 'near-active' : ''
+    }}"
+  >
+    <div class="mask"></div>
+
+    <div class="header">
+      <div class="exit" (click)="modalService.cancel()"></div>
+      <div class="block" [ngStyle]="{ 'background-color': tower.getColorOfTag(editedValues[i].tag) | color }"></div>
+      <h1 [innerText]="editedValues[i]?.created | formatDate"></h1>
+    </div>
+
+    <div class="select-add-container">
+      <app-select-add
+        class="select"
+        [options]="tower.tags"
+        [default]="editedValues[i].tag"
+        [alwaysDropShadow]="true"
+        [onlyShadowBorder]="true"
+        [placeholder]="'Tag this item…'"
+        (value)="editedValues[i].tag = $event"
+      ></app-select-add>
+    </div>
+
+    <textarea placeholder="Write a description here…" [(ngModel)]="editedValues[i].description"></textarea>
+
+    <div>
+      <app-toggle
+        [beforeText]="'This task hasn\'t been finished yet'"
+        [afterText]="'Goal already accomplished'"
+        [default]="blocks[i].isDone"
+        (value)="editedValues[i].isDone = $event"
+      ></app-toggle>
+    </div>
+  </div>
+
+  <div
+    (click)="$event.stopPropagation(); scrollToChild(blocks.length + 1)"
+    class="card {{ blocks.length + 1 === activeChild ? 'active' : '' }} {{
+      blocks.length === activeChild ? 'near-active' : ''
+    }} "
+  >
+    <div class="mask"></div>
+
+    <div class="header">
+      <div class="exit" (click)="modalService.cancel()"></div>
+      <div class="block" [ngStyle]="{ 'background-color': tower.getColorOfTag(top(editedValues).tag) | color }"></div>
+      <h1>Create now</h1>
+    </div>
+
+    <div class="select-add-container">
+      <app-select-add
+        class="select"
+        [options]="tower.tags"
+        [default]="tower.tags.length ? tower.tags[0] : null"
+        [alwaysDropShadow]="true"
+        [onlyShadowBorder]="true"
+        [placeholder]="'Set a category…'"
+        [newValuePlaceholder]="'Add a category…'"
+        (value)="top(editedValues).tag = $event"
+      ></app-select-add>
+    </div>
+
+    <textarea placeholder="Write a description here…" [(ngModel)]="top(editedValues).description"></textarea>
+
+    <div>
+      <app-toggle
+        [beforeText]="'This task hasn\'t been finished yet'"
+        [afterText]="'Goal already accomplished'"
+        [default]="onlyDone"
+        (value)="top(editedValues).isDone = $event"
+      ></app-toggle>
+    </div>
+
+    <div class="bottom">
+      <button (click)="submitAdd()" [disabled]="!top(editedValues).tag">Create and exit</button>
+    </div>
+  </div>
+  <div class="card placeholder"></div>
+</section>

frontend/src/app/components/modal/modals/blocks/blocks.component.scss

@@ -0,0 +1,175 @@
+@import '../../../../../styles';
+
+:host {
+  @include center-child();
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  overflow-x: auto;
+
+  &::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+
+  section {
+    width: 100%;
+    height: 100%;
+
+    display: flex;
+    align-items: center;
+
+    box-sizing: border-box;
+  }
+}
+
+.card {
+  @include card();
+  box-shadow: $shadow;
+  display: block;
+
+  transform-origin: center center;
+
+  flex: 0 0 auto;
+  width: 66vw;
+  max-width: 400px;
+  @media (max-width: $mobile-width) {
+    width: 300px;
+    opacity: 1 !important;
+  }
+
+  box-sizing: border-box;
+  padding: var(--large-padding);
+  margin: calc(var(--large-padding) / 2);
+  position: relative;
+
+  &.near-active {
+    cursor: pointer;
+  }
+
+  .mask {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 10000;
+
+    @include card();
+
+    @media (max-width: $mobile-width) {
+      opacity: 0 !important;
+    }
+  }
+
+  &:first-child {
+    margin-left: var(--large-padding);
+  }
+
+  &.placeholder {
+    opacity: 0 !important;
+    width: 60vw;
+    max-width: 60vw;
+  }
+
+  @include inner-spacing(var(--large-padding));
+
+  .header {
+    @include center-child();
+    position: relative;
+
+    .exit {
+      position: absolute;
+      left: 0;
+
+      @include exit();
+    }
+
+    .block {
+      @include square(12px);
+      margin-right: 10px;
+    }
+  }
+
+  .bottom {
+    height: 32px;
+    @media (max-width: $mobile-width) {
+      height: 24px;
+    }
+
+    position: relative;
+
+    button {
+      margin: 0;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translateY(-50%) translateX(-50%);
+
+      transition: opacity $short-animation-time;
+
+      &.hidden {
+        opacity: 0;
+      }
+    }
+
+    .edit {
+      position: absolute;
+      right: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      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;
+      }
+    }
+  }
+}
+
+.card:last-child:after {
+  content: '';
+  height: 1px;
+  width: var(--large-padding);
+  right: calc(-1 * var(--large-padding));
+  display: block;
+  position: absolute;
+}

frontend/src/app/components/modal/modals/blocks/blocks.component.ts

@@ -0,0 +1,183 @@
+import {
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  EventEmitter,
+  HostListener,
+  OnDestroy,
+  OnInit,
+  Output,
+  ViewChild
+} from '@angular/core';
+import { ModalService } from '../../../../services/modal.service';
+import { Tower } from '../../../../model/tower';
+import { Observable } from 'rxjs/internal/Observable';
+import { Block } from '../../../../model/block';
+import { IBlock } from '../../../../interfaces/persistance/block';
+import { CancelService } from '../../../../services/cancel.service';
+import { range } from 'src/app/utils/range';
+import { top } from 'src/app/utils/top';
+
+@Component({
+  selector: 'app-blocks',
+  templateUrl: './blocks.component.html',
+  styleUrls: ['./blocks.component.scss']
+})
+export class BlocksComponent implements OnInit, OnDestroy {
+  readonly range = range;
+  readonly top = top;
+  tower: Tower;
+  editedValues: Array<Partial<IBlock>>;
+  endOfScrollToken = 0;
+  activeChild: number;
+  scrollMayEnd = true;
+  onlyDone: boolean;
+  @ViewChild('container') container: ElementRef;
+
+  private intervalID: number;
+
+  constructor(
+    public modalService: ModalService,
+    private cancelService: CancelService,
+    private changeDetector: ChangeDetectorRef,
+    private component: ElementRef
+  ) {
+    window.addEventListener('resize', this.onScroll.bind(this));
+  }
+
+  @Output() save: EventEmitter<() => void> = new EventEmitter();
+
+  get blocks(): Array<Block> {
+    return this.tower.blocks.filter(b => b.isDone === this.onlyDone);
+  }
+
+  @HostListener('click') cancel() {
+    this.cancelService.cancelAll();
+  }
+
+  @HostListener('touchstart') fingerDown() {
+    this.scrollMayEnd = false;
+  }
+
+  @HostListener('touchend') fingerUp() {
+    this.scrollMayEnd = true;
+    this.onScroll();
+  }
+
+  @HostListener('scroll') onScroll() {
+    const newToken = ++this.endOfScrollToken;
+    setTimeout(() => {
+      if (newToken === this.endOfScrollToken && this.scrollMayEnd) {
+        this.adjustPosition();
+      }
+    }, 150);
+    this.animateScroll();
+  }
+
+  ngOnInit() {
+    const {
+      tower$,
+      onlyDone,
+      startBlock
+    }: { tower$: Observable<Tower>; onlyDone: boolean; startBlock: Block } = this.modalService.active.input;
+
+    this.save.emit(() => this.submitChange());
+
+    this.intervalID = setInterval(() => this.changeDetector.detectChanges(), 1000);
+
+    this.onlyDone = onlyDone;
+    const subscription = tower$.subscribe(value => {
+      if (value) {
+        this.tower = value;
+        this.editedValues = this.blocks.map(({ isDone, description, tag, created }) => ({
+          isDone,
+          description,
+          tag,
+          created
+        }));
+        this.editedValues.push({
+          tag: this.tower.tags.length ? this.tower.tags[0] : null,
+          isDone: this.onlyDone,
+          description: ''
+        });
+
+        setTimeout(() => {
+          this.scrollToChild(startBlock ? this.blocks.indexOf(startBlock) + 1 : this.blocks.length + 1, true);
+          subscription.unsubscribe();
+        });
+      }
+    });
+  }
+
+  animateScroll() {
+    if (!this.container || !this.component) {
+      return;
+    }
+
+    const c = this.component.nativeElement;
+
+    [...this.container.nativeElement.children]
+      .slice(1, -1)
+      .forEach(element =>
+        this.animate(
+          element.style,
+          element.querySelector('.mask').style,
+          Math.abs(element.offsetLeft - c.scrollLeft + element.clientWidth / 2 - window.innerWidth / 2) /
+            element.clientWidth
+        )
+      );
+  }
+
+  animate(cardStyle, maskStyle, t: number) {
+    t = Math.min(2, Math.max(0, t));
+    cardStyle.opacity = (1.33 * (1 - t / 2)).toString();
+    t = Math.min(1, Math.max(0, t));
+    maskStyle.opacity = Math.pow(t, 0.5).toString();
+    maskStyle.display = t <= 0.05 ? 'none' : 'block';
+  }
+
+  adjustPosition() {
+    if (!this.container || !this.component) {
+      return;
+    }
+
+    const c = this.component.nativeElement;
+
+    const middle =
+      [...this.container.nativeElement.children]
+        .slice(1, -1)
+        .map(element => Math.abs(element.offsetLeft - c.scrollLeft + element.clientWidth / 2 - window.innerWidth / 2))
+        .map((value, index) => (Math.abs(index + 1 - this.activeChild) === 1 ? Math.abs(value - 100) : value))
+        .reduce(
+          (middleIndex, current, currentIndex, list) => (list[middleIndex] < current ? middleIndex : currentIndex),
+          0
+        ) + 1;
+
+    this.scrollToChild(middle);
+  }
+
+  scrollToChild(index: number, instantly?: boolean) {
+    this.activeChild = index;
+    const element = this.container.nativeElement.children[index];
+
+    this.component.nativeElement.scrollTo({
+      left: element.offsetLeft - (window.innerWidth / 2 - element.clientWidth / 2),
+      behavior: instantly ? 'auto' : 'smooth'
+    });
+  }
+
+  submitAdd() {
+    top(this.editedValues).created = new Date();
+    this.tower.addBlock(top(this.editedValues) as IBlock);
+    this.cancelService.cancelAll();
+  }
+
+  submitChange() {
+    this.blocks.forEach((b, i) => b.changeKeys(this.editedValues[i]));
+    this.modalService.submit();
+  }
+
+  ngOnDestroy() {
+    clearInterval(this.intervalID);
+  }
+}

frontend/src/app/components/modal/modals/get-started/get-started.component.html

@@ -0,0 +1,3 @@
+<p>
+  get-started works!
+</p>

frontend/src/app/components/modal/modals/get-started/get-started.component.ts

@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-get-started',
+  templateUrl: './get-started.component.html',
+  styleUrls: ['./get-started.component.scss']
+})
+export class GetStartedComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit() {}
+}

frontend/src/app/components/modal/modals/remove-page/remove-page.component.html

@@ -0,0 +1,13 @@
+<section>
+  <div class="header">
+    <div class="exit" (click)="modalService.cancel()"></div>
+    <h1>Are you sure?</h1>
+  </div>
+
+  <p>
+    You are trying to remove <strong>{{ this.modalService.active.input }}</strong
+    >.
+  </p>
+
+  <button (click)="modalService.submit()">Remove</button>
+</section>

frontend/src/app/components/modal/modals/remove-page/remove-page.component.scss

@@ -0,0 +1,30 @@
+@import '../../../../../styles';
+
+section {
+  @include card();
+
+  width: 66vw;
+  max-width: 500px;
+  @media (max-width: $mobile-width) {
+    width: 300px;
+  }
+
+  box-sizing: border-box;
+  padding: var(--large-padding);
+
+  position: relative;
+  box-shadow: $shadow;
+
+  @include inner-spacing(var(--large-padding));
+
+  .header {
+    @include center-child();
+
+    .exit {
+      position: absolute;
+      left: var(--large-padding);
+
+      @include exit();
+    }
+  }
+}

frontend/src/app/components/modal/modals/remove-page/remove-page.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { ModalService } from '../../../../services/modal.service';
+
+@Component({
+  selector: 'app-remove-page',
+  templateUrl: './remove-page.component.html',
+  styleUrls: ['./remove-page.component.scss']
+})
+export class RemovePageComponent {
+  constructor(public modalService: ModalService) {}
+}

frontend/src/app/components/modal/modals/remove-tower/remove-tower.component.html

@@ -0,0 +1,14 @@
+<section>
+  <div class="header">
+    <div class="exit" (click)="modalService.cancel()"></div>
+    <h1>Are you sure?</h1>
+  </div>
+
+  <p>
+    You are trying to remove
+    <span [ngStyle]="{ color: tower.baseColor | color }">{{ tower.name ? tower.name : 'an unnamed tower' }}</span
+    >.
+  </p>
+
+  <button (click)="modalService.submit()">Remove</button>
+</section>

frontend/src/app/components/modal/modals/remove-tower/remove-tower.component.scss

@@ -0,0 +1,30 @@
+@import '../../../../../styles';
+
+section {
+  @include card();
+
+  width: 66vw;
+  max-width: 500px;
+  @media (max-width: $mobile-width) {
+    width: 300px;
+  }
+
+  box-sizing: border-box;
+  padding: var(--large-padding);
+
+  position: relative;
+  box-shadow: $shadow;
+
+  @include inner-spacing(var(--large-padding));
+
+  .header {
+    @include center-child();
+
+    .exit {
+      position: absolute;
+      left: var(--large-padding);
+
+      @include exit();
+    }
+  }
+}

frontend/src/app/components/modal/modals/remove-tower/remove-tower.component.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { ModalService } from '../../../../services/modal.service';
+import { Tower } from '../../../../model/tower';
+
+@Component({
+  selector: 'app-remove-tower',
+  templateUrl: './remove-tower.component.html',
+  styleUrls: ['./remove-tower.component.scss']
+})
+export class RemoveTowerComponent {
+  constructor(public modalService: ModalService) {}
+
+  tower: Tower = this.modalService.active.input;
+}