TSK-487 wokplace improvements

web/src/app/workplace/components/code/code.component.html

@@ -0,0 +1,5 @@
+<div [@toggle]="showCode" *ngIf="showCode" >
+  <div class="code">
+      <img *ngFor= "let i of images" src='./assets/icons/code/image{{i}}.gif'>
+  </div>
+</div>

web/src/app/workplace/components/code/code.component.scss

@@ -0,0 +1,8 @@
+.code{
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    margin-bottom: 0px;
+    text-align: center;
+    z-index: 1050;
+}

web/src/app/workplace/components/code/code.component.ts

@@ -0,0 +1,47 @@
+import { Component, OnInit, HostListener } from '@angular/core';
+import { trigger, transition, keyframes, style, animate, state } from '@angular/animations';
+
+@Component({
+  selector: 'taskana-code',
+  templateUrl: './code.component.html',
+  styleUrls: ['./code.component.scss'],
+  animations: [
+    trigger('toggle', [
+      state('*', style({ opacity: '1' })),
+      state('void', style({ opacity: '0' })),
+      transition('void => *', animate('300ms ease-in', keyframes([
+        style({ opacity: 0 }),
+        style({ opacity: 0.5 }),
+        style({ opacity: 1 })]))),
+      transition('* => void', animate('300ms ease-out', keyframes([
+        style({ opacity: 1 }),
+        style({ opacity: 0.5 }),
+        style({ opacity: 0 })])))
+    ])
+  ]
+})
+export class CodeComponent implements OnInit {
+
+  code = 'ArrowUpArrowUpArrowDownArrowDownArrowLeftArrowRightArrowLeftArrowRightKeyBKeyA';
+  bufferKeys = '';
+  showCode = false;
+  images = [0, 1, 2, 3, 4];
+  @HostListener('window:keyup', ['$event'])
+  keyEvent(event: KeyboardEvent) {
+    if (this.bufferKeys === '') {
+      setTimeout(() => this.bufferKeys = '', 5000);
+    }
+    this.bufferKeys += event.code;
+    if (this.code === this.bufferKeys) {
+      this.showCode = true;
+      setTimeout(() => this.showCode = false, 5000);
+    }
+
+  }
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

web/src/app/workplace/workplace.component.html

@@ -1 +1,2 @@
 <router-outlet></router-outlet>
+<taskana-code></taskana-code>

web/src/app/workplace/workplace.module.ts

@@ -14,6 +14,8 @@ import { TasklistComponent } from './tasklist/tasklist.component';
 import { TaskdetailsComponent } from './taskdetails/taskdetails.component';
 import { TaskComponent } from './task/task.component';
 import { TasksComponent } from './tasks/tasks.component';
+import { CodeComponent } from './components/code/code.component';
+
 
 import { OrderTasksByPipe } from './util/orderTasksBy.pipe';
 
@@ -41,6 +43,7 @@ const DECLARATIONS = [
   TaskdetailsComponent,
   TaskComponent,
   TasksComponent,
+  CodeComponent,
   OrderTasksByPipe
 ];