From 34702a2638e74976617bbc2b76165ea3ad4030d1 Mon Sep 17 00:00:00 2001 From: Tim Stallard Date: Sat, 18 Mar 2017 17:08:15 +0000 Subject: [PATCH] Implemented snapshots --- src/diagram/addSnapshot.js | 12 ++++++++++++ src/diagram/import.js | 6 +----- src/diagram/updateState.js | 11 +++++++++++ src/events.js | 13 +++++++++---- src/index.html | 18 ++++++++++++------ src/menu.js | 34 ++++++++++++++++++++++++++++++---- src/styles.scss | 6 ++---- 7 files changed, 77 insertions(+), 23 deletions(-) create mode 100644 src/diagram/addSnapshot.js create mode 100644 src/diagram/updateState.js 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{