diff --git a/src/app/app.component.html b/src/app/app.component.html
index 47d5a9e..a69b35d 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -90,15 +90,33 @@
+
+
+
+
+
+
+
+
+ -
+ {{ item.date | date:'dd.MM.y · HH:mm:ss' }} Uhr
+
+ {{ item.config.nodes }} Knoten
+
+
+ {{ item.config.spread }} Linien
+
+
+
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 8c56685..5965217 100644
--- a/src/app/app.component.scss
+++ b/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);
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index d1d4be7..1863632 100644
--- a/src/app/app.component.ts
+++ b/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);
+ }
}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 998c8a2..67e48f9 100644
--- a/src/app/app.module.ts
+++ b/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]
})
diff --git a/src/app/components/graphs.component.html b/src/app/components/graphs.component.html
index f8ee281..37a7bbd 100644
--- a/src/app/components/graphs.component.html
+++ b/src/app/components/graphs.component.html
@@ -1,3 +1,3 @@
diff --git a/src/app/components/graphs.component.ts b/src/app/components/graphs.component.ts
index 4b17c67..2aa5896 100644
--- a/src/app/components/graphs.component.ts
+++ b/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) {
diff --git a/src/app/services/history.service.ts b/src/app/services/history.service.ts
new file mode 100644
index 0000000..adb4293
--- /dev/null
+++ b/src/app/services/history.service.ts
@@ -0,0 +1,46 @@
+/**
+ * Copyright (C) 2018 Michael Czechowski
+ * 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;
+ }
+
+}
+