added history

src/app/app.component.html

@@ -1,4 +1,4 @@
-<app-graphs [config]="config" (svgChange)="prepareSvgExport($event)"></app-graphs>
+<app-graphs [config]="config" [restoredHistory]="restoredHistory" (svgChange)="prepareSvgExport($event)"></app-graphs>
 
 <aside class="col-sm-4 col-lg-3 col-xl-3">
   <div class="aside-inner">
@@ -98,25 +98,35 @@
       <button type="submit" class="btn btn-lg btn-primary btn-block" [disabled]="configForm.invalid">Aktualisieren</button>
     </form>
 
-    <div class="dropdown-divider"></div>
+    <div class="row mt-4">
+      <div class="col-sm">
+        <button class="btn btn-secondary btn-block" (click)="exportSvg()">Download</button>
+      </div>
+      <div class="col-sm mt-xs-2 mt-sm-2 mt-md-0">
+        <button class="btn btn-secondary btn-block" (click)="toggleList()">
+          Chronik <span class="badge badge-light badge-pill">{{ list.length }}</span>
+        </button>
+      </div>
+    </div>
 
-    <button class="btn btn-secondary btn-block" (click)="exportSvg()">Download</button>
-
-    <div class="dropdown-divider"></div>
-
-    <button class="btn btn-secondary btn-block" (click)="toggleList()">Chronik <span class="badge badge-light">{{ list.length }}</span></button>
-
-    <ul *ngIf="showList" class="list-group list-group-flush mt-4">
-      <li *ngFor="let item of list" class="list-group-item d-flex justify-content-between align-items-center" (click)="restoreGraph(item)">
-        {{ item.date | date:'dd.MM.y · HH:mm:ss' }} Uhr
-        <span class="badge badge-primary badge-pill">
-          {{ item.config.nodes }} Knoten
-        </span>
-        <span class="badge badge-primary badge-pill">
-          {{ item.config.spread }} Linien
-        </span>
-      </li>
-    </ul>
+    <div *ngIf="showList" class="list-group mt-4">
+      <a href="#" *ngFor="let item of list.reverse(); let i = index" class="list-group-item d-flex flex-row " (click)="restoreGraph(item)">
+        <span class="text-muted pr-3">#{{ list.length - i }}</span>
+        <div class="d-flex flex-column">
+          <div>
+            {{ item.date | date:'HH:mm:ss' }} Uhr
+          </div>
+          <div class="">
+            <span class="badge badge-primary  mr-2">
+              {{ item.config.nodes }} Knoten
+            </span>
+            <span class="badge badge-primary">
+              {{ item.config.spread }} Linien
+            </span>
+          </div>
+        </div>
+      </a>
+    </div>
   </div>
 </aside>
 

src/app/app.component.ts

@@ -24,6 +24,7 @@ import { Param } from './models/param.model';
 import { Config } from './models/config.model';
 import { CanvasService } from './services/canvas.service';
 import { HistoryService } from './services/history.service';
+import { Graph } from './models/graph.model';
 
 @Component({
   selector: 'app-root',
@@ -38,6 +39,7 @@ export class AppComponent implements OnInit {
   public url: any;
   public list: any[];
   public showList: boolean;
+  public restoredHistory: any;
 
   constructor(
     private canvasService: CanvasService,
@@ -46,12 +48,13 @@ export class AppComponent implements OnInit {
     this.config = env.formDefaults;
     this.configForm = ConfigForm;
     this.list = [];
-    this.showList = false;
+    this.showList = true;
   }
 
   ngOnInit() {
     this.configForm.reset({...this.config});
     this.list = this.historyService.list();
+    // console.log(this.graphs);
   }
 
   public updateGraphs() {
@@ -85,7 +88,8 @@ export class AppComponent implements OnInit {
     this.showList = !this.showList;
   }
 
-  public restoreGraph(item) {
-    console.log(item);
+  public restoreGraph(history) {
+    this.configForm.reset({...history.config});
+    this.restoredHistory = history;
   }
 }

src/app/components/graphs.component.ts

@@ -34,14 +34,16 @@ import { Point } from '../models/point.model';
 })
 export class GraphsComponent implements OnChanges {
 
-  public graphs: Graph[];
   public canvas: any | null;
   public matrix: any | null;
+  public graphs: Graph[];
 
   private genShiftPoint: any | null;
   private genLoadedAllGraphs: any | null;
+  private hash: string;
 
   @Input() config: any;
+  @Input() restoredHistory: any;
   @Output() svgChange = new EventEmitter();
   @Output() graphChange = new EventEmitter();
   @ViewChild('svg') svgElementRef;
@@ -54,35 +56,23 @@ export class GraphsComponent implements OnChanges {
   }
 
   ngOnChanges(changes: SimpleChanges) {
-    this.init();
-  }
-
-  private init() {
     this.updateCanvas();
     this.updateMatrix();
-    this.updateGraphs();
 
-    this.historyService.save(this.graphs, this.config);
-  }
-
-  public prepareGuillocheExport(guillocheElement) {
-    if (this.genLoadedAllGraphs.next().value) {
-      this.svgChange.emit(this.svgElementRef);
-    }
-  }
-
-  private *countLoadedGraphs() {
-    let cycles = 1;
-
-    while (true) {
-      if (cycles < this.graphs.length) {
-        yield false;
-        cycles++;
-      } else {
-        yield true;
-        cycles = 1;
+    if (changes.restoredHistory) {
+      if (changes.restoredHistory.currentValue) {
+        if (this.restoredHistory.hash !== this.hash) {
+          this.graphs = this.restoredHistory.graphs;
+          this.hash = this.restoredHistory.hash;
+        }
+        return;
       }
     }
+    this.updateGraphs();
+  }
+
+  private saveHistory() {
+    this.historyService.save(this.graphs, this.config);
   }
 
   private updateGraphs(): void {
@@ -103,6 +93,8 @@ export class GraphsComponent implements OnChanges {
     ];
 
     this.graphs = curveList.map(curve => this.adjustGraph(curve));
+    this.hash = this.historyService.hash(this.graphs);
+    this.saveHistory();
   }
 
   private adjustGraph(curve) {
@@ -235,4 +227,24 @@ export class GraphsComponent implements OnChanges {
       yield sign = sign * (-1);
     }
   }
+
+  public prepareGuillocheExport(guillocheElement) {
+    if (this.genLoadedAllGraphs.next().value) {
+      this.svgChange.emit(this.svgElementRef);
+    }
+  }
+
+  private *countLoadedGraphs() {
+    let cycles = 1;
+
+    while (true) {
+      if (cycles < this.graphs.length) {
+        yield false;
+        cycles++;
+      } else {
+        yield true;
+        cycles = 1;
+      }
+    }
+  }
 }

src/app/services/history.service.ts

@@ -32,15 +32,22 @@ export class HistoryService {
     this.history.push({
       date: new Date(),
       graphs: graphs,
-      config: config
+      config: config,
+      hash: this.hash(graphs)
     });
+  }
 
-    console.log(config);
+  public hash(graphs) {
+    return btoa(JSON.stringify([graphs]));
   }
 
   public list() {
     return this.history;
   }
 
+  public restore(graphs: Graph[]) {
+    console.log(graphs);
+  }
+
 }