adding toast notifications

package.json

@@ -40,6 +40,7 @@
   },
   "dependencies": {
     "lodash": "^4.17.11",
+    "mini-toastr": "^0.8.1",
     "preact": "^8.4.2"
   }
 }

src/app.js

@@ -1,4 +1,5 @@
 import { h, render, Component } from 'preact';
+import miniToastr from 'mini-toastr';
 import { Menu } from './components/menu';
 import { Page } from './components/page';
 import { ConfigPage, DevicesPage, DevicesEditPage, ControllersPage, ControllerEditPage, ConfigAdvancedPage, ConfigHardwarePage, RebootPage, LoadPage, RulesPage, UpdatePage, ToolsPage, FSPage, FactoryResetPage, DiscoverPage, DiffPage, RulesEditorPage } from './pages';
@@ -8,6 +9,8 @@ import { DashboardPage } from './pages/dashboard';
 import { DashboardEditorPage } from './pages/dashboard.editor';
 
 
+miniToastr.init({})
+
 const menus = [
     { title: 'Dashboard', pagetitle: '', href: 'dashboard', class: 'full', component: DashboardPage, children: [
         { title: 'Editor', pagetitle: '', href: 'dashboard/editor', class: 'full', component: DashboardEditorPage },

src/lib/espeasy.js

@@ -1,3 +1,5 @@
+import miniToastr from 'mini-toastr';
+
 export const getJsonStat = async (url = '') => {
     return await fetch(`${url}/json`).then(response => response.json())
 }
@@ -230,40 +232,32 @@ export const getDashboardConfigNodes = async (url) => {
     return { nodes, vars };
 }
 
-export const storeConfig = async (config) => {
-    const formData = new FormData();
-    formData.append('edit', 1);
-    formData.append('file', new File([new Blob([config])], "r1.txt"));
-
-    return await fetch('/upload', {
-        method: 'post',
-        body: formData,
-    });
-}
-
 export const storeFile = async (filename, data) => {
+    const file = data ? new File([new Blob([data])], filename) : filename;
     const formData = new FormData();
     formData.append('edit', 1);
-    formData.append('file', new File([new Blob([data])], filename));
+    formData.append('file', file);
 
     return await fetch('/upload', {
         method: 'post',
         body: formData,
+    }).then(() => {
+        miniToastr.success('Successfully saved to flash!', '', 5000);
+    }, e => {
+        miniToastr.error(e.message, '', 5000);
     });
 }
 
 export const storeDashboardConfig = async (config) => {
-    const formData = new FormData();
-    formData.append('edit', 1);
-    formData.append('file', new File([new Blob([config])], "d1.txt"));
-
-    return await fetch('/upload', {
-        method: 'post',
-        body: formData,
-    });
+    storeFile('d1.txt', config);
+}
+
+export const storeRuleConfig = async (config) => {
+    storeFile('r1.txt', config);
+
 }
 
-export const loadConfig = async () => {
+export const loadRuleConfig = async () => {
     return await fetch('/r1.txt').then(response => response.json());
 }
 

src/lib/floweditor.js

@@ -439,6 +439,7 @@ export class FlowEditor {
         this.renderedNodes = [];
         this.onSave = config.onSave;
         this.canEdit = !config.readOnly;
+        this.debug = config.debug!= null ? config.debug : true;
         this.gridSize = config.gridSize || 1;
 
         this.element = element;
@@ -483,7 +484,7 @@ export class FlowEditor {
         this.canvas.gridSize = this.gridSize;
         this.element.appendChild(this.canvas);
 
-        if (this.canEdit) {
+        if (this.canEdit && this.debug) {
             this.debug = document.createElement('div');
             this.debug.className = 'debug';
 

src/pages/diff.js

@@ -34,9 +34,11 @@ export class DiffPage extends Component {
                 return;
             }
 
-            storeFile('config.dat', this.data);
-            this.stage = 0;
-            window.location.href='#devices';
+            storeFile('config.dat', this.data).then(() => {
+                this.stage = 0;
+                window.location.href='#devices';
+            });
+
         };
     }
 

src/pages/load.js

@@ -1,20 +1,12 @@
 import { h, Component } from 'preact';
+import { storeFile } from '../lib/espeasy';
 
 export class LoadPage extends Component {
     constructor(props) {
         super(props);
 
         this.saveForm = () => {
-            const data = new FormData()
-            data.append('file', this.file.files[0])
-            data.append('user', 'hubot')
-
-            fetch('/load', {
-                method: 'POST',
-                body: data
-            }).then(() => {
-
-            });
+            storeFile(this.file.files[0]);
         }
     }
 

src/pages/rules.editor.js

@@ -1,7 +1,7 @@
 import { h, Component } from 'preact';
 import { FlowEditor } from '../lib/floweditor';
 import { nodes } from '../lib/node_definitions';
-import { getConfigNodes, loadConfig, storeConfig, storeRule } from '../lib/espeasy';
+import { getConfigNodes, loadRulesConfig, storeRulesConfig, storeRule } from '../lib/espeasy';
 
 export class RulesEditorPage extends Component {
     constructor(props) {
@@ -27,12 +27,12 @@ export class RulesEditorPage extends Component {
 
             this.chart = new FlowEditor(this.element, nodes, { 
                 onSave: (config, rules) => {
-                    storeConfig(config);
+                    storeRulesConfig(config);
                     storeRule(rules);
                 }
             });
 
-            loadConfig().then(config => {
+            loadRulesConfig().then(config => {
                 this.chart.loadConfig(config);
             });
         });