Merge with store

frontend/.editorconfig

@@ -0,0 +1,13 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

frontend/.gitignore

@@ -0,0 +1,48 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+/out-tsc
+# Only exists if Bazel was run
+/bazel-out
+
+# dependencies
+/node_modules
+
+# profiling files
+chrome-profiler-events.json
+speed-measure-plugin.json
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+testem.log
+/typings
+
+# System Files
+.DS_Store
+Thumbs.db
+
+.firebase

frontend/.prettierrc

@@ -0,0 +1,8 @@
+{
+  "printWidth": 120,
+  "singleQuote": true,
+  "useTabs": false,
+  "tabWidth": 2,
+  "semi": true,
+  "bracketSpacing": true
+}

frontend/README.md

@@ -0,0 +1,27 @@
+# Frontend
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.3.8.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

frontend/angular.json

@@ -0,0 +1,86 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "frontend": {
+      "root": "",
+      "sourceRoot": "src",
+      "projectType": "application",
+      "prefix": "app",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/frontend",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.app.json",
+            "assets": ["src/favicon.ico", "src/assets"],
+            "styles": ["src/styles.scss"],
+            "scripts": [],
+            "es5BrowserSupport": true
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "20mb",
+                  "maximumError": "50mb"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "frontend:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "frontend:build:production"
+            }
+
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "frontend:build"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"],
+            "exclude": ["**/node_modules/**"]
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "frontend"
+}

frontend/firebase.json

@@ -0,0 +1,13 @@
+{
+  "hosting": {
+    "public": "dist/frontend",
+    "site": "towers-schmelczer-dev",
+    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+    ]
+  }
+}

frontend/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "frontend",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "build:prod": "ng build --prod",
+    "format:fix": "pretty-quick --staged",
+    "precommit": "run-s format:fix lint",
+    "format:check": "prettier --config ./.prettierrc --list-different \"src/{app,environments,assets}/**/*{.ts,.js,.json,.css,.scss}\"",
+    "lint": "ng lint"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^7.2.15",
+    "@angular/cdk": "^7.3.7",
+    "@angular/common": "~7.2.0",
+    "@angular/compiler": "~7.2.0",
+    "@angular/core": "~7.2.0",
+    "@angular/forms": "~7.2.0",
+    "@angular/material": "^7.3.7",
+    "@angular/platform-browser": "~7.2.0",
+    "@angular/platform-browser-dynamic": "~7.2.0",
+    "@angular/router": "~7.2.0",
+    "core-js": "^2.5.4",
+    "ng": "^0.0.0",
+    "rxjs": "~6.3.3",
+    "tslib": "^1.10.0",
+    "uuid": "^3.3.3",
+    "zone.js": "~0.8.26"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^0.13.10",
+    "@angular/cli": "~7.3.8",
+    "@angular/compiler-cli": "~7.2.0",
+    "@angular/language-service": "~7.2.0",
+    "@types/jasmine": "~2.8.8",
+    "@types/jasminewd2": "~2.0.3",
+    "@types/node": "~8.9.4",
+    "codelyzer": "~4.5.0",
+    "husky": "^3.0.4",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^1.18.2",
+    "pretty-quick": "^1.11.1",
+    "sass": "^1.32.5",
+    "ts-node": "~7.0.0",
+    "tslint": "~5.11.0",
+    "typescript": "~3.2.2"
+  }
+}

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>