diff --git a/src/diagram/addSnapshot.js b/src/diagram/addSnapshot.js
new file mode 100644
index 0000000..e9bb625
--- /dev/null
+++ b/src/diagram/addSnapshot.js
@@ -0,0 +1,12 @@
+var diagram = require("./index.js");
+var events = require("../events.js");
+
+module.exports = function(snapshotName){
+ var state = JSON.parse(require("./export.js")()).state;
+ diagram.snapshots.push({
+ date: new Date().getTime(),
+ name: snapshotName,
+ state: state
+ });
+ events.emit("snapshotsChanged");
+}
diff --git a/src/diagram/import.js b/src/diagram/import.js
index f1331f5..7770353 100644
--- a/src/diagram/import.js
+++ b/src/diagram/import.js
@@ -4,9 +4,5 @@ var $ = require("jquery");
module.exports = function(newDiagram){
Object.assign(diagram, JSON.parse(newDiagram));
- $("#workspace>*").remove();
- for(var block of diagram.state){
- require("../pageInteraction/addBlockToPage.js")(block);
- }
- events.emit("diagramImport");
+ require("./updateState.js")();
}
diff --git a/src/diagram/updateState.js b/src/diagram/updateState.js
new file mode 100644
index 0000000..617f145
--- /dev/null
+++ b/src/diagram/updateState.js
@@ -0,0 +1,11 @@
+var diagram = require("./index.js");
+var events = require("../events.js");
+var $ = require("jquery");
+
+module.exports = function(){
+ $("#workspace>*").remove(); //remove old lines + block
+ for(var block of diagram.state){ //add blocks to page
+ require("../pageInteraction/addBlockToPage.js")(block);
+ }
+ events.emit("diagramImport"); //trigger line re-draw
+}
diff --git a/src/events.js b/src/events.js
index 6403f48..8af6005 100644
--- a/src/events.js
+++ b/src/events.js
@@ -1,11 +1,16 @@
var subscriptions = {};
module.exports = {
- subscribe: function(event, callback){
- if(!subscriptions[event]){
- subscriptions[event] = [];
+ subscribe: function(events, callback){
+ if(!Array.isArray(events)){ //if not an array, make it a single item array
+ events = [events];
+ }
+ for(var event of events){
+ if(!subscriptions[event]){
+ subscriptions[event] = [];
+ }
+ subscriptions[event].push(callback);
}
- subscriptions[event].push(callback);
},
emit: function(event, data){
if(subscriptions[event]){
diff --git a/src/index.html b/src/index.html
index 591c80e..6c9e411 100644
--- a/src/index.html
+++ b/src/index.html
@@ -3,12 +3,18 @@
Cryptography Assistant
-
+
+
diff --git a/src/menu.js b/src/menu.js
index cd595f2..962042b 100644
--- a/src/menu.js
+++ b/src/menu.js
@@ -2,18 +2,18 @@ var $ = require("jquery");
var events = require("./events.js");
var diagram = require("./diagram");
-$("#header>a#export").click(function(){
+$("#header a#export").click(function(){
var fileSaver = require("file-saver");
var exported = require("./diagram/export.js")();
var exportedBlob = new Blob([exported], {type: "text/plain;chartset=utf-8"})
fileSaver.saveAs(exportedBlob, diagram.name + ".json");
});
-$("#header>a#import").click(function(){
- $("#header>#importUpload").click();
+$("#header a#import").click(function(){
+ $("#importUpload").click();
});
-$("#header>#importUpload").change(function(){
+$("#importUpload").change(function(){
var reader = new FileReader();
reader.onload = function(){
require("./diagram/import.js")(reader.result);
@@ -32,3 +32,29 @@ $("#header>a#projectName").click(function(){
events.subscribe("diagramImport", function(){
$("#header>a#projectName").html(diagram.name);
});
+
+$("#header a#addSnapshot").click(function(){
+ var name = prompt("Please enter a name for the snapshot");
+ require("./diagram/addSnapshot.js")(name);
+});
+
+events.subscribe(["snapshotsChanged", "diagramImport"], function(){
+ $("#snapshots>.snapshot").remove();
+ diagram.snapshots.sort((a, b)=>(b.date - a.date));
+ for(var i in diagram.snapshots){
+ var date = new Date(diagram.snapshots[i].date);
+ $("#snapshots").append(
+ `
${date.getDay()}/${date.getMonth()}/${date.getFullYear()} ${date.getHours()}:${date.getMinutes()} - ${diagram.snapshots[i].name} `
+ );
+ }
+});
+
+$("#header #snapshots").on("click", ".snapshot>a", function(){
+ var snapshot = diagram.snapshots[parseInt($(this).data("i"))]
+ var newSnapshotName = prompt("Reverting to this snapshot will cause you to lose your current work. If you would like to make a snapshot of your current workspace, please enter a name for it:");
+ if(newSnapshotName){
+ require("./diagram/addSnapshot.js")(newSnapshotName);
+ }
+ diagram.state = JSON.parse(JSON.stringify(snapshot.state));
+ require("./diagram/updateState.js")();
+});
diff --git a/src/styles.scss b/src/styles.scss
index 9aff098..4302a46 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -9,10 +9,8 @@ body{
flex-direction: column;
}
-#header{
- #importUpload{
- display: none;
- }
+#importUpload{
+ display: none;
}
#blocks{