Reformat code

.prettierrc

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

angular.json

@@ -22,13 +22,8 @@
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "src/tsconfig.app.json",
-            "assets": [
+            "assets": ["src/favicon.ico", "src/assets"],
-              "src/favicon.ico",
+            "styles": ["src/styles.scss"],
-              "src/assets"
-            ],
-            "styles": [
-              "src/styles.scss"
-            ],
             "scripts": [],
             "es5BrowserSupport": true
           },
@@ -40,7 +35,7 @@
                   "with": "src/environments/environment.prod.ts"
                 }
               ],
-              "optimization": true,
+              "optimization": false,
               "outputHashing": "all",
               "sourceMap": false,
               "extractCss": true,
@@ -76,61 +71,11 @@
             "browserTarget": "frontend:build"
           }
         },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "main": "src/test.ts",
-            "polyfills": "src/polyfills.ts",
-            "tsConfig": "src/tsconfig.spec.json",
-            "karmaConfig": "src/karma.conf.js",
-            "styles": [
-              "src/styles.scss"
-            ],
-            "scripts": [],
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ]
-          }
-        },
         "lint": {
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
-            "tsConfig": [
+            "tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"],
-              "src/tsconfig.app.json",
+            "exclude": ["**/node_modules/**"]
-              "src/tsconfig.spec.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
-        }
-      }
-    },
-    "frontend-e2e": {
-      "root": "e2e/",
-      "projectType": "application",
-      "prefix": "",
-      "architect": {
-        "e2e": {
-          "builder": "@angular-devkit/build-angular:protractor",
-          "options": {
-            "protractorConfig": "e2e/protractor.conf.js",
-            "devServerTarget": "frontend:serve"
-          },
-          "configurations": {
-            "production": {
-              "devServerTarget": "frontend:serve:production"
-            }
-          }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": "e2e/tsconfig.e2e.json",
-            "exclude": [
-              "**/node_modules/**"
-            ]
           }
         }
       }

e2e/protractor.conf.js

@@ -1,28 +0,0 @@
-// Protractor configuration file, see link for more information
-// https://github.com/angular/protractor/blob/master/lib/config.ts
-
-const { SpecReporter } = require('jasmine-spec-reporter');
-
-exports.config = {
-  allScriptsTimeout: 11000,
-  specs: [
-    './src/**/*.e2e-spec.ts'
-  ],
-  capabilities: {
-    'browserName': 'chrome'
-  },
-  directConnect: true,
-  baseUrl: 'http://localhost:4200/',
-  framework: 'jasmine',
-  jasmineNodeOpts: {
-    showColors: true,
-    defaultTimeoutInterval: 30000,
-    print: function() {}
-  },
-  onPrepare() {
-    require('ts-node').register({
-      project: require('path').join(__dirname, './tsconfig.e2e.json')
-    });
-    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
-  }
-};

e2e/src/app.e2e-spec.ts

@@ -1,23 +0,0 @@
-import { AppPage } from './app.po';
-import { browser, logging } from 'protractor';
-
-describe('workspace-project App', () => {
-  let page: AppPage;
-
-  beforeEach(() => {
-    page = new AppPage();
-  });
-
-  it('should display welcome message', () => {
-    page.navigateTo();
-    expect(page.getTitleText()).toEqual('Welcome to frontend!');
-  });
-
-  afterEach(async () => {
-    // Assert that there are no errors emitted from the browser
-    const logs = await browser.manage().logs().get(logging.Type.BROWSER);
-    expect(logs).not.toContain(jasmine.objectContaining({
-      level: logging.Level.SEVERE,
-    } as logging.Entry));
-  });
-});

e2e/src/app.po.ts

@@ -1,11 +0,0 @@
-import { browser, by, element } from 'protractor';
-
-export class AppPage {
-  navigateTo() {
-    return browser.get(browser.baseUrl) as Promise<any>;
-  }
-
-  getTitleText() {
-    return element(by.css('app-root h1')).getText() as Promise<string>;
-  }
-}

e2e/tsconfig.e2e.json

@@ -1,13 +0,0 @@
-{
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../out-tsc/app",
-    "module": "commonjs",
-    "target": "es5",
-    "types": [
-      "jasmine",
-      "jasminewd2",
-      "node"
-    ]
-  }
-}

package.json

@@ -5,17 +5,18 @@
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
-    "test": "ng test",
+    "build:prod": "ng build --prod --base-href /life-qa/",
-    "lint": "ng lint",
+    "lint": "ng lint"
-    "e2e": "ng e2e"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~7.2.0",
+    "@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",
@@ -29,18 +30,14 @@
     "@angular/cli": "~7.3.8",
     "@angular/compiler-cli": "~7.2.0",
     "@angular/language-service": "~7.2.0",
-    "@types/node": "~8.9.4",
     "@types/jasmine": "~2.8.8",
     "@types/jasminewd2": "~2.0.3",
+    "@types/node": "~8.9.4",
     "codelyzer": "~4.5.0",
-    "jasmine-core": "~2.99.1",
+    "husky": "^3.0.4",
-    "jasmine-spec-reporter": "~4.2.1",
+    "npm-run-all": "^4.1.5",
-    "karma": "~4.0.0",
+    "prettier": "^1.18.2",
-    "karma-chrome-launcher": "~2.2.0",
+    "pretty-quick": "^1.11.1",
-    "karma-coverage-istanbul-reporter": "~2.0.1",
-    "karma-jasmine": "~1.1.2",
-    "karma-jasmine-html-reporter": "^0.2.2",
-    "protractor": "~5.4.0",
     "ts-node": "~7.0.0",
     "tslint": "~5.11.0",
     "typescript": "~3.2.2"

src/app/app-routing.module.ts

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

src/app/app.component.html

@@ -1,21 +1,2 @@
-<!--The content below is only a placeholder and can be replaced.-->
+<app-modal></app-modal>
-<div style="text-align:center">
-  <h1>
-    Welcome to {{ title }}!
-  </h1>
-  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
-</div>
-<h2>Here are some links to help you start: </h2>
-<ul>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
-  </li>
-</ul>
-
 <router-outlet></router-outlet>

src/app/app.component.spec.ts

@@ -1,35 +0,0 @@
-import { TestBed, async } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
-import { AppComponent } from './app.component';
-
-describe('AppComponent', () => {
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      imports: [
-        RouterTestingModule
-      ],
-      declarations: [
-        AppComponent
-      ],
-    }).compileComponents();
-  }));
-
-  it('should create the app', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
-    expect(app).toBeTruthy();
-  });
-
-  it(`should have as title 'frontend'`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
-    expect(app.title).toEqual('frontend');
-  });
-
-  it('should render title in a h1 tag', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.debugElement.nativeElement;
-    expect(compiled.querySelector('h1').textContent).toContain('Welcome to frontend!');
-  });
-});

src/app/app.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { ModalService } from './services/modal.service';
 
 @Component({
   selector: 'app-root',

src/app/app.module.ts

@@ -3,15 +3,47 @@ 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 { EditBlockComponent } from './components/modal/modals/edit-block/edit-block.component';
+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 { CreateBlockComponent } from './components/modal/modals/create-block/create-block.component';
+import { RemoveBlockComponent } from './components/modal/modals/remove-block/remove-block.component';
+import { ToggleComponent } from './components/shared/toggle/toggle.component';
+import { TasksComponent } from './components/pages/page/tower/tasks/tasks.component';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
-  ],
+    PageComponent,
-  imports: [
+    TowerComponent,
-    BrowserModule,
+    DoubleSliderComponent,
-    AppRoutingModule
+    PagesComponent,
+    SelectAddComponent,
+    ModalComponent,
+    BlockComponent,
+    EditBlockComponent,
+    SettingsComponent,
+    RemoveTowerComponent,
+    RemovePageComponent,
+    GetStartedComponent,
+    CreateBlockComponent,
+    RemoveBlockComponent,
+    ToggleComponent,
+    TasksComponent
   ],
+  imports: [BrowserModule, AppRoutingModule, FormsModule, BrowserAnimationsModule, DragDropModule],
   providers: [],
   bootstrap: [AppComponent]
 })

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

@@ -0,0 +1,9 @@
+<main class="{{ modalService.active ? 'active' : '' }}" [ngSwitch]="modalService.active?.type">
+  <app-create-block *ngSwitchCase="ModalType.createBlock"></app-create-block>
+  <app-edit-block *ngSwitchCase="ModalType.editBlock"></app-edit-block>
+  <app-remove-block *ngSwitchCase="ModalType.removeBlock"></app-remove-block>
+  <app-remove-tower *ngSwitchCase="ModalType.removeTower"></app-remove-tower>
+  <app-settings *ngSwitchCase="ModalType.settings"></app-settings>
+  <app-get-started *ngSwitchCase="ModalType.getStarted"></app-get-started>
+  <app-remove-page *ngSwitchCase="ModalType.removePage"></app-remove-page>
+</main>

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

@@ -0,0 +1,29 @@
+@import '../../../styles';
+
+main {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10000;
+
+  width: 100%;
+  height: 100%;
+
+  @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);
+  }
+}

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

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+import { ModalService, ModalType } from '../../services/modal.service';
+
+@Component({
+  selector: 'app-modal',
+  templateUrl: './modal.component.html',
+  styleUrls: ['./modal.component.scss']
+})
+export class ModalComponent {
+  // Needed for accessing the enum from html.
+  ModalType = ModalType;
+
+  constructor(public modalService: ModalService) {
+    window.addEventListener('keydown', (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        this.modalService.cancel();
+      }
+    });
+  }
+}

src/app/components/modal/modals/create-block/create-block.component.html

@@ -0,0 +1,33 @@
+<div class="header">
+  <div class="exit" (click)="modalService.cancel()"></div>
+  <h1>Create an item</h1>
+</div>
+
+<div class="select-add-container">
+  <!-- wrapper for easier styling -->
+  <app-select-add
+    class="select"
+    [options]="modalService.active.input"
+    [default]="modalService.active.input[0]"
+    [alwaysDropShadow]="true"
+    [onlyShadowBorder]="true"
+    [placeholder]="'Tag this item…'"
+    (value)="selected = $event"
+  ></app-select-add>
+</div>
+<!-- wrapper for easier styling -->
+
+<textarea placeholder="Write a description here…" [(ngModel)]="description"></textarea>
+
+<div>
+  <!-- wrapper for easier styling -->
+  <app-toggle
+    [beforeText]="'This task hasn\'t been finished yet'"
+    [afterText]="'Goal already accomplished'"
+    [default]="false"
+    (value)="isDone = $event"
+  ></app-toggle>
+</div>
+<!-- wrapper for easier styling -->
+
+<button (click)="submit()">Create</button>

src/app/components/modal/modals/create-block/create-block.component.scss

@@ -0,0 +1,29 @@
+@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();
+    }
+  }
+}

src/app/components/modal/modals/create-block/create-block.component.ts

@@ -0,0 +1,23 @@
+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;
+
+  constructor(public modalService: ModalService) {}
+
+  submit() {
+    this.modalService.submit({
+      selected: this.selected,
+      description: this.description,
+      isDone: this.isDone
+    });
+  }
+}

src/app/components/modal/modals/edit-block/edit-block.component.html

@@ -0,0 +1,33 @@
+<div class="header">
+  <div class="exit" (click)="modalService.cancel()"></div>
+  <h1>View item</h1>
+</div>
+
+<div class="select-add-container">
+  <!-- wrapper for easier styling -->
+  <app-select-add
+    class="select"
+    [options]="modalService.active.input.options"
+    [default]="modalService.active.input.options[0]"
+    [alwaysDropShadow]="true"
+    [onlyShadowBorder]="true"
+    [placeholder]="'Tag this item…'"
+    (value)="selected = $event"
+  ></app-select-add>
+</div>
+<!-- wrapper for easier styling -->
+
+<textarea placeholder="Write a description here…" [(ngModel)]="modalService.active.input.description"></textarea>
+
+<div>
+  <!-- wrapper for easier styling -->
+  <app-toggle
+    [beforeText]="'This task hasn\'t been finished yet'"
+    [afterText]="'Goal already accomplished'"
+    [default]="modalService.active.input.isDone"
+    (value)="modalService.active.input.isDone = $event"
+  ></app-toggle>
+</div>
+<!-- wrapper for easier styling -->
+
+<button (click)="submit()">Modify</button>