prepared history

src/app/app.component.html

@@ -90,15 +90,33 @@
       </div>
       <div class="form-group mb-4">
         <label class="form-control-label">
-          Aufspleißen
+          Lienienanzahl
         </label>
         <input type="number" class="form-control" formControlName="spread" min="0" max="40">
       </div>
       <div class="dropdown-divider mb-4"></div>
       <button type="submit" class="btn btn-lg btn-primary btn-block" [disabled]="configForm.invalid">Aktualisieren</button>
     </form>
+
     <div class="dropdown-divider"></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>
 </aside>
 

src/app/app.component.scss

@@ -23,30 +23,8 @@
   opacity: 0.2;
 }
 
-ul {
-  display: flex;
-  flex-direction: column;
-  position: absolute;
-  top: 0;
-  right: auto;
-  bottom: 0;
-  left: 0;
-  justify-content: center;
-  margin: 0;
-  padding: 3rem;
-  background: rgba(0,0,0,0.3);
-  transition: all 360ms 120ms ease-out;
+.list-group-item {
   cursor: pointer;
-  list-style-type: none;
-
-  &:hover {
-    opacity: 1;
-  }
-
-  li {
-    display: flex;
-    align-items: center;
-  }
 }
 
 aside {
@@ -57,7 +35,7 @@ aside {
   right: 0;
   bottom: 0;
   left: auto;
-  justify-content: center;
+  // justify-content: center;
   padding: 0;
   margin: 0;
   background: rgba(251, 252, 253, 0.9);

src/app/app.component.ts

@@ -22,6 +22,8 @@ import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
 import { environment as env } from '../environments/environment';
 import { Param } from './models/param.model';
 import { Config } from './models/config.model';
+import { CanvasService } from './services/canvas.service';
+import { HistoryService } from './services/history.service';
 
 @Component({
   selector: 'app-root',
@@ -34,18 +36,27 @@ export class AppComponent implements OnInit {
   public config: any | null;
   public configForm: FormGroup;
   public url: any;
+  public list: any[];
+  public showList: boolean;
 
-  constructor(private sanitizer: DomSanitizer) {
+  constructor(
+    private canvasService: CanvasService,
+    private historyService: HistoryService
+  ) {
     this.config = env.formDefaults;
     this.configForm = ConfigForm;
+    this.list = [];
+    this.showList = false;
   }
 
   ngOnInit() {
     this.configForm.reset({...this.config});
+    this.list = this.historyService.list();
   }
 
   public updateGraphs() {
     this.config = {...this.configForm.value};
+    this.list = this.historyService.list();
   }
 
   public prepareSvgExport(svg) {
@@ -58,11 +69,23 @@ export class AppComponent implements OnInit {
 
   public exportSvg() {
     const link = document.createElement('a');
-
+    // const blob = new Blob(
+    //   [this.canvasService.get],
+    //   {type: 'image/svg+xml;charset=utf-8'}
+    // );
+    // link.href = URL.createObjectURL(blob);
     link.href = this.url;
     link.download = 'guilloche.svg';
     document.body.appendChild(link);
     link.click();
     document.body.removeChild(link);
   }
+
+  public toggleList() {
+    this.showList = !this.showList;
+  }
+
+  public restoreGraph(item) {
+    console.log(item);
+  }
 }

src/app/app.module.ts

@@ -22,6 +22,7 @@ import { AppComponent } from './app.component';
 import { GraphsComponent } from './components/graphs.component';
 import { GuillocheDirective } from './directives/guilloche.directive';
 import { CanvasService } from './services/canvas.service';
+import { HistoryService } from './services/history.service';
 
 @NgModule({
   declarations: [
@@ -35,7 +36,8 @@ import { CanvasService } from './services/canvas.service';
     FormsModule,
   ],
   providers: [
-    CanvasService
+    CanvasService,
+    HistoryService
   ],
   bootstrap: [AppComponent]
 })

src/app/components/graphs.component.html

@@ -1,3 +1,3 @@
 <svg #svg width="100%" height="100%">
-  <g guilloche *ngFor="let graph of graphs" [graph]="graph" [matrix]="matrix"  [config]="config" (guillocheChange)="prepareGuillocheExport($event)"></g>
+  <g guilloche *ngFor="let graph of graphs" [graph]="graph" [matrix]="matrix" [config]="config" (guillocheChange)="prepareGuillocheExport($event)"></g>
 </svg>

src/app/components/graphs.component.ts

@@ -23,6 +23,7 @@ import * as Drag from 'd3-drag';
 import { environment as env } from '../../environments/environment';
 import { GuillocheDirective } from './../directives/guilloche.directive';
 import { CanvasService } from './../services/canvas.service';
+import { HistoryService } from './../services/history.service';
 import { Graph } from '../models/graph.model';
 import { Point } from '../models/point.model';
 
@@ -42,10 +43,12 @@ export class GraphsComponent implements OnChanges {
 
   @Input() config: any;
   @Output() svgChange = new EventEmitter();
+  @Output() graphChange = new EventEmitter();
   @ViewChild('svg') svgElementRef;
 
   constructor(
-    private canvasService: CanvasService
+    private canvasService: CanvasService,
+    private historyService: HistoryService
   ) {
     this.genLoadedAllGraphs = this.countLoadedGraphs();
   }
@@ -58,6 +61,8 @@ export class GraphsComponent implements OnChanges {
     this.updateCanvas();
     this.updateMatrix();
     this.updateGraphs();
+
+    this.historyService.save(this.graphs, this.config);
   }
 
   public prepareGuillocheExport(guillocheElement) {

src/app/services/history.service.ts

@@ -0,0 +1,46 @@
+/**
+ * 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 HistoryService {
+
+  public history: any[];
+
+  constructor() {
+    this.history = [];
+  }
+
+  public save(graphs: Graph[], config) {
+    this.history.push({
+      date: new Date(),
+      graphs: graphs,
+      config: config
+    });
+
+    console.log(config);
+  }
+
+  public list() {
+    return this.history;
+  }
+
+}
+