prepared gui and service for animation

src/app/app.component.html

@@ -94,8 +94,18 @@
         </label>
         <input type="number" class="form-control" formControlName="spread" min="0" max="40">
       </div>
+      <div class="form-group d-flex flex-colmn justify-content-between align-items-center mb-4">
+        <label class="form-control-label">
+          Animation
+        </label>
+        <div class="btn-group" role="group" aria-label="Basic example">
+          <button type="button" class="btn" (click)="animationActive = true" [ngClass]="{'btn-outline-primary': !animationActive, 'btn-primary': animationActive}">An</button>
+          <button type="button" class="btn" (click)="animationActive = false" [ngClass]="{'btn-outline-primary': animationActive, 'btn-primary': !animationActive}">Aus</button>
+        </div>
+      </div>
       <div class="dropdown-divider mb-4"></div>
       <button type="submit" class="btn btn-lg btn-primary btn-block" [disabled]="configForm.invalid">Aktualisieren</button>
+      <div class="dropdown-divider mt-4"></div>
     </form>
 
     <div class="row mt-4">
@@ -122,8 +132,8 @@
             </span>
           </div>
           <div>
-              {{ item.date | amTimeAgo }}
+            {{ item.date | amTimeAgo }}
-            </div>
+          </div>
         </div>
       </a>
     </div>

src/app/app.component.ts

@@ -43,6 +43,7 @@ export class AppComponent implements OnInit {
   public list: any[];
   public showList: boolean;
   public restoredHistory: any;
+  public animationActive: boolean;
 
   constructor(
     private canvasService: CanvasService,
@@ -54,6 +55,7 @@ export class AppComponent implements OnInit {
     this.configForm = ConfigForm;
     this.list = [];
     this.showList = true;
+    this.animationActive = false;
   }
 
   ngOnInit() {

src/app/app.module.ts

@@ -24,6 +24,7 @@ import { GraphsComponent } from './components/graphs.component';
 import { GuillocheDirective } from './directives/guilloche.directive';
 import { CanvasService } from './services/canvas.service';
 import { HistoryService } from './services/history.service';
+import { AnimationService } from './services/animation.service';
 
 @NgModule({
   declarations: [
@@ -39,7 +40,8 @@ import { HistoryService } from './services/history.service';
   ],
   providers: [
     CanvasService,
-    HistoryService
+    HistoryService,
+    AnimationService
   ],
   bootstrap: [AppComponent]
 })

src/app/services/animation.service.ts

@@ -0,0 +1,56 @@
+/**
+ * Copyright (C) 2018 Michael Czechowski <mail@dailysh.it>
+ * This program is free software; you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the Free
+ * Software Foundation; version 2.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along with
+ * this program; if not, write to the Free Software Foundation, Inc., 51
+ * Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
+ */
+
+import { Inject, Injectable, Optional, ViewChild } from '@angular/core';
+import * as Selection from 'd3-selection';
+
+import { Graph } from '../models/graph.model';
+
+@Injectable()
+export class AnimationService {
+
+  public graphs: Graph[];
+  public speed: number;
+  public range: number;
+  public genAnimation: any;
+
+  constructor() {
+    this.resetAnimation();
+  }
+
+  private resetAnimation() {
+    this.genAnimation = this.animateNextStep();
+  }
+
+  private animateNextStep() {
+    while (this.graphs) {
+      return true;
+    }
+  }
+
+  public init(initialGraphs: Graph[]) {
+    this.graphs = initialGraphs;
+  }
+
+  public animate(): Graph[] {
+    return this.genAnimation.next().value;
+  }
+
+  public stop() {
+    this.graphs = null;
+  }
+}
+