From dae3381a0f02e7c53ffaca7d224852d471c60ecb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Santos?= <41214812+andredevsantos@users.noreply.github.com> Date: Thu, 5 May 2022 00:26:41 +0100 Subject: [PATCH 1/4] Add localstorage and reset --- function/LocalStorage.js | 21 +++++++++++++++++++++ function/actors.js | 6 ++++-- function/diagram.js | 5 +++++ function/touchpoints.js | 10 +++++++++- index.html | 9 +++++++-- 5 files changed, 46 insertions(+), 5 deletions(-) create mode 100644 function/LocalStorage.js diff --git a/function/LocalStorage.js b/function/LocalStorage.js new file mode 100644 index 0000000..081948f --- /dev/null +++ b/function/LocalStorage.js @@ -0,0 +1,21 @@ +const resetDiagram = () => { + localStorage.clear(); + location.reload(); +}; + +const localStorageSize = () => { + var _lsTotal = 0, + _xLen, + _x; + for (_x in localStorage) { + if (!localStorage.hasOwnProperty(_x)) { + continue; + } + _xLen = (localStorage[_x].length + _x.length) * 2; + _lsTotal += _xLen; + console.log( + _x.substr(0, 50) + " = " + (_xLen / 1024).toFixed(2) + " KB" + ); + } + console.log("Total = " + (_lsTotal / 1024).toFixed(2) + " KB"); +}; diff --git a/function/actors.js b/function/actors.js index 8af9f8c..431a339 100644 --- a/function/actors.js +++ b/function/actors.js @@ -1,5 +1,4 @@ -let actors = []; -const actorContainer = document.querySelector("#actor-container"); +let actors = JSON.parse(localStorage.getItem("actors")) || []; const updateActorTitles = () => { const actorTitles = document.querySelectorAll(".actor-title-span"); @@ -12,12 +11,15 @@ const updateActorTitles = () => { const createActor = () => { // Create a new actor object + const actorContainer = document.querySelector("#actor-container"); const actor = { id: Math.floor(Math.random() * 10000), name: "", role: "", }; + console.log(actor); + actors.push(actor); // Appends new actor input form actorContainer.innerHTML += createActorElement(actor); diff --git a/function/diagram.js b/function/diagram.js index b7d6a6f..a6dd8e2 100644 --- a/function/diagram.js +++ b/function/diagram.js @@ -24,6 +24,11 @@ const createSwimlane = () => { canvas.innerHTML += createSwimlaneElement(actor); }); replaceBoxes(); + console.log(touchpoints); + console.log(actors); + localStorage.setItem("touchpoints", JSON.stringify(touchpoints)); + localStorage.setItem("actors", JSON.stringify(actors)); + localStorage.setItem("modal", document.querySelector(".modal").innerHTML); }; const createSwimlaneElement = (actor) => { diff --git a/function/touchpoints.js b/function/touchpoints.js index 75e500b..a2cfcd9 100644 --- a/function/touchpoints.js +++ b/function/touchpoints.js @@ -8,7 +8,15 @@ const TouchpointType = { communication: "communication", }; -let touchpoints = []; +let touchpoints = JSON.parse(localStorage.getItem("touchpoints")) || []; + +if (actors.length > 0 || touchpoints.length > 0) { + console.log(1); + console.log(actors); + console.log(touchpoints); + document.querySelector(".modal").innerHTML = localStorage.getItem("modal"); +} + let titleNos = []; const touchpointContainer = document.querySelector("#touchpoint-container"); diff --git a/index.html b/index.html index 7839325..0a02f48 100644 --- a/index.html +++ b/index.html @@ -27,9 +27,13 @@