Merge pull request #7 from deltachat/issue-2

implement getAllUpdates() and use local storage to persist the updates

index.html

@@ -20,6 +20,7 @@
     }
 
     window.webxdc.setUpdateListener(receiveUpdate);
+    window.webxdc.getAllUpdates().forEach(receiveUpdate);
 
 </script>
 </body>

webxdc.js

@@ -1,5 +1,53 @@
 // debug friend: document.writeln(JSON.stringify(value));
-// maybe helpful: window.sessionStorage, https://www.w3schools.com/html/html5_webstorage.asp
+window.xdcStorage = (() => {
+    var updatesKey = "__xdcUpdatesKey__";
+    var fakeStorage = {
+        _data: {},
+
+        setItem: function (id, val) {
+            return this._data[id] = String(val);
+        },
+
+        getItem: function (id) {
+            return this._data.hasOwnProperty(id) ? this._data[id] : undefined;
+        },
+
+        removeItem: function (id) {
+            return delete this._data[id];
+        },
+
+        clear: function () {
+            return this._data = {};
+        }
+    };
+    var localStorageSupported = () => {
+        var testKey = "__xdcTestKey__";
+        try {
+            var storage = window.localStorage;
+            storage.setItem(testKey, "1");
+            storage.removeItem(testKey);
+            return true;
+        } catch (error) {
+            return false;
+        }
+    };
+    var storage = localStorageSupported() ? window.localStorage : fakeStorage;
+
+    return {
+        getUpdates: () => {
+            var updatesJSON = storage.getItem(updatesKey);
+            return updatesJSON ? JSON.parse(updatesJSON) : [];
+        },
+        saveUpdate: (update) => {
+            var updates = window.xdcStorage.getUpdates();
+            updates.push(update);
+            storage.setItem(updatesKey, JSON.stringify(updates));
+        },
+        clear: () => {
+            storage.clear();
+        }
+    };
+})();
 
 window.webxdc = (() => {
     var updateListener = () => {};
@@ -8,18 +56,15 @@ window.webxdc = (() => {
         selfAddr: () => window.xdcSelfAddr || "device0@local.host",
         selfName: () => window.xdcSelfName || "device0",
         setUpdateListener: (cb) => (window.xdcUpdateListener = cb),
-        getAllUpdates: () => {
-            return JSON.parse(
-                '[]'
-                //'[{"action":"configure", "question":"your favorite colorxx", "answers":["red","green","blue","yellow","purple1"]},{"action":"vote", "sender":"foo2@bar.de", "vote":0},{"action":"vote", "sender":"foo@bar.de", "vote":0}]'
-            );
-        },
+        getAllUpdates: () => {return getXdcRoot().xdcStorage.getUpdates();},
         sendUpdate: (description, payload) => {
             // alert(description+"\n\n"+JSON.stringify(payload));
+            var update = {payload: payload};
+            getXdcRoot().xdcStorage.saveUpdate(update);
             var all = getAllXdcWindows();
             all.forEach((w) => {
                 //alert(w.xdcUpdateListener);
-                w.xdcUpdateListener({payload: payload});
+                w.xdcUpdateListener(update);
             });
         },
     };
@@ -28,7 +73,7 @@ window.webxdc = (() => {
 window.allXdcWindows = [window];
 window.xdcUpdateListener = 12;
 
-var styleControlPanel = 'position: fixed; bottom:1em; left:1em; background-color: #000; opacity:0.8; padding:.5em; font-family: sans-serif; width: 50%;';
+var styleControlPanel = 'position: fixed; bottom:1em; left:1em; background-color: #000; opacity:0.8; padding:.5em; font-family: sans-serif; width: 50%;color:#fff;';
 var styleMenuLink     = 'color:#fff; text-decoration: none;';
 
 function getXdcRoot() {
@@ -44,7 +89,7 @@ function getAllXdcWindows() {
     return xdcRoot.allXdcWindows;
 }
 
-function addPeer() {
+function addXdcPeer() {
     var xdcChild = window.open(window.location);
     var xdcRoot = getXdcRoot();
     xdcChild.xdcRoot = xdcRoot;
@@ -53,7 +98,12 @@ function addPeer() {
     xdcRoot.allXdcWindows.push(xdcChild);
 }
 
-function alterApp() {
+function clearXdcStorage() {
+    getXdcRoot().xdcStorage.clear();
+    alert("Done.");
+}
+
+function alterXdcApp() {
     var title = document.getElementsByTagName('title')[0];
     if (typeof title == 'undefined') {
         title = document.createElement('title');
@@ -64,11 +114,12 @@ function alterApp() {
     if (getXdcRoot() === window) {
         var div = document.createElement('div');
         div.innerHTML =
-                '<div style="' + styleControlPanel + '">' +
-                '<a href="javascript:addPeer();" style="' + styleMenuLink + '">Add Peer</a>' +
-                '<div>';
+            '<div style="' + styleControlPanel + '">' +
+            '<a href="javascript:addXdcPeer();" style="' + styleMenuLink + '">Add Peer</a> | ' +
+            '<a href="javascript:clearXdcStorage();" style="' + styleMenuLink + '">Clear Storage</a>' +
+            '<div>';
         document.getElementsByTagName('body')[0].append(div.firstChild);
     }
 }
 
-window.addEventListener("load", alterApp);
+window.addEventListener("load", alterXdcApp);