From 86d1a25d4e8d22f84fd646b96101d758fe328fbf Mon Sep 17 00:00:00 2001
From: Peter Stuifzand <peter@stuifzand.eu>
Date: Sun, 1 Nov 2020 21:21:10 +0100
Subject: [PATCH] Improve saving indicator

---
 editor/src/editor.js   | 51 +++++++++++++++++++++++++-----------------
 editor/src/styles.scss |  4 ++++
 list-editor/index.js   |  2 --
 3 files changed, 35 insertions(+), 22 deletions(-)

diff --git a/editor/src/editor.js b/editor/src/editor.js
index 41afbc2..a8ae69f 100644
--- a/editor/src/editor.js
+++ b/editor/src/editor.js
@@ -37,16 +37,17 @@ function isMultiline(input) {
 function addSaver(editor, saveUrl, page, beforeSave) {
     return {
         save() {
-            return editor.save().then(outputData => {
-                beforeSave()
-                let data = {
-                    'json': 1,
-                    'p': page,
-                    'summary': "",
-                    'content': JSON.stringify(outputData),
-                };
-                return axios.post(saveUrl, qs.encode(data))
-            })
+            return editor.save()
+                .then(outputData => {
+                    beforeSave()
+                    let data = {
+                        'json': 1,
+                        'p': page,
+                        'summary': "",
+                        'content': JSON.stringify(outputData),
+                    };
+                    return axios.post(saveUrl, qs.encode(data))
+                })
         }
     }
 }
@@ -58,16 +59,22 @@ function Indicator(element, timeout) {
         done() {
             timeoutId = setTimeout(() => {
                 element.classList.add('hide')
+                element.classList.remove('error')
             }, timeout * 1000);
         },
 
+        addError(message) {
+            element.classList.add('error')
+            this.setText(message)
+        },
+
         setText(text) {
             if (timeoutId) {
                 clearTimeout(timeoutId);
                 timeoutId = null;
             }
-            element.innerText = text;
             element.classList.remove('hide')
+            element.innerText = text;
         },
     }
 }
@@ -75,13 +82,18 @@ function Indicator(element, timeout) {
 function addIndicator(editor, indicator) {
     return {
         save() {
-            editor.save().then(() => {
-                indicator.setText('saved!');
-                indicator.done();
-            }).catch(() => {
-                console.log('error while saving')
-                indicator.done();
-            })
+            return editor.save()
+                .then(() => {
+                    console.log('success while saving')
+                    indicator.setText('saved!');
+                    indicator.done();
+                    return true
+                })
+                .catch(reason => {
+                    console.warn('error while saving: '+ reason)
+                    indicator.addError('error!')
+                    indicator.done();
+                })
         }
     }
 }
@@ -288,11 +300,10 @@ function Editor(holder, input) {
         let saveUrl = element.dataset.saveurl;
         let page = element.dataset.page;
 
-        indicator.setText('has changes...');
         addIndicator(
             addSaver(editor, saveUrl, page, () => indicator.setText('saving...')),
             indicator
-        ).save()
+        ).save().then(() => indicator.done())
     })
 
     // editor.on('rendered', function () {
diff --git a/editor/src/styles.scss b/editor/src/styles.scss
index f1620a7..b47db94 100644
--- a/editor/src/styles.scss
+++ b/editor/src/styles.scss
@@ -82,6 +82,10 @@ body {
   color: white;
   padding: 3px;
   z-index: 50;
+
+  &.error {
+    background: red;
+  }
 }
 
 #autocomplete.hidden {
diff --git a/list-editor/index.js b/list-editor/index.js
index 8dd00a6..2b234ee 100644
--- a/list-editor/index.js
+++ b/list-editor/index.js
@@ -58,8 +58,6 @@ function editor(root, inputData, options) {
             if (store.hasChanged()) {
                 resolve(store.debug().result)
                 store.clearChanged()
-            } else {
-                reject()
             }
         });
     }