2.3 - added notification center, added event on save/generate on calender, generator and settings

public/main.css

@@ -3,6 +3,24 @@ select {
   height: 34px;
   box-sizing: border-box;
 }
+#notify-center {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  width: 0;
+  height: 0;
+  background-color: #FFF;
+}
+#notify-center .notification {
+  width: 200px;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  margin: 5px;
+  padding: 5px;
+  border: 1px solid #454545;
+  box-shadow: 1px 2px 3px rgba(69, 69, 69, 0.34901961);
+}
 @font-face {
   font-family: 'Exo';
   font-style: normal;

src/jsx/static/debug.jsx

@@ -1,6 +1,6 @@
 
 export class Log{
     static debug(txt){
-        console.debug('%cDEBUG: '+txt, 'background: #222; color: #bada55');
+        //console.debug('%cDEBUG: '+txt, 'background: #222; color: #bada55');
     }
 }

src/jsx/static/notify.jsx

@@ -0,0 +1,19 @@
+import { Log } from "./debug";
+
+export class Notify{
+    static onEventsArray = [];
+    static on(func){
+        Notify.onEventsArray.push(func);
+    }
+    /**
+     * 
+     * @param {*} data {title:"",body:"",type:""} 
+     */
+    static emit(data){
+        Log.debug('Notify emit');
+        for(var f in Notify.onEventsArray){
+            Log.debug(Notify.onEventsArray[f]);
+            Notify.onEventsArray[f](data);
+        }
+    }
+}

src/jsx/ui/calender.jsx

@@ -2,6 +2,8 @@ import React from 'react';
 import InfiniteCalendar from 'react-infinite-calendar';
 import {DB} from '../static/storage'
 import { Log } from '../static/debug';
+
+import {Notify} from '../static/notify';
 //import 'react-infinite-calendar/styles.css'; // only needs to be imported once
 
 //const {  ipcRenderer} = require('electron');
@@ -139,6 +141,7 @@ export class Calender extends React.Component {
         taskList:this.state.taskList
       }
     );
+    Notify.emit({title:"",body:"Eintrag gespeichert.",type:"success"});
     //ipcRenderer.send('saveDate',s)
   }
   render() {

src/jsx/ui/components/templates.jsx

@@ -6,6 +6,7 @@ export class Templates{
         header:"",
         wochenbericht:"",
         wochenbericht_2:"",
+        wochenbericht_2_wo_time:"",
         monatsbericht:"",
         arbeitszeiten:"",
         footer:""
@@ -37,6 +38,14 @@ export class Templates{
             .catch ((error) => {
                 console.log(error);
             })    
+            axios.get('/templates/wochenbericht_2_wo_time.ptt')
+            .then ((result) => {
+    
+                Templates.template.wochenbericht_2_wo_time = result.data;  
+            })
+            .catch ((error) => {
+                console.log(error);
+            }) 
 
         axios.get('/templates/monatsbericht.ptt')
             .then ((result) => {

src/jsx/ui/generator.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import {DB} from '../static/storage';
+import { Notify } from '../static/notify';
 //import 'react-infinite-calendar/styles.css'; // only needs to be imported once
 
 const moment = require('moment');
@@ -245,6 +246,7 @@ export class Generator extends React.Component {
         }
       }
     }
+    Notify.emit({title:"",body:"Einträge generiert.",type:"success"});
   }
   handleMo(e) {
     //console.log(e.target.id);

src/jsx/ui/nav.jsx

@@ -7,14 +7,23 @@ import {Print} from './print';
 import {Settings} from './settings';
 
 import {DB} from './../static/storage'
+import { Notify } from '../static/notify';
 
 export class Nav extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      tab:(<Home/>)
+      tab:(<Home/>),
+      notify:(<span></span>)
     }
     this.handleExportFile = this.handleExportFile.bind(this);
+    var me = this;
+    Notify.on((data)=>{
+      me.setState({notify:me.notify(data)});
+      setTimeout(function(){
+        me.setState({notify:(<span></span>)});
+      },3000)
+    });
   }
   handleExportFile(){
       /** 
@@ -28,6 +37,14 @@ export class Nav extends React.Component {
        * CREATE FILE
        */
   }
+  notify(data){
+    return(
+      <div className="notification success">
+        <div className="title">{data.title}</div>
+        <div className="body">{data.body}</div>
+      </div>
+    )
+  }
   render() {
     /*<button onClick={this.handleCreateFile}>Erstellen </button>*/
     return (
@@ -49,6 +66,9 @@ export class Nav extends React.Component {
       <div id="content">
         {this.state.tab}
       </div>
+      <div id="notify-center">
+        {this.state.notify}
+      </div>
     </div>);
   }
 }

src/jsx/ui/print.jsx

@@ -83,6 +83,7 @@ export class Print extends React.Component {
           <div>Vorlage: <select value={this.state.choosenTemplate} onChange={this.handleChangeTemplate}>
               <option selected value="wochenbericht">Wochenbericht 1</option>
               <option value="wochenbericht_2">Wochenbericht 2</option>
+              <option value="wochenbericht_2_wo_time">Wochenbericht 2 - ohne Zeiten</option>
             </select>
           </div>
           <div><button onClick={this.preview}>Vorschau</button><button onClick={this.print}>Drucken</button></div>

src/jsx/ui/settings.jsx

@@ -29,6 +29,7 @@ export class Settings extends React.Component {
   }
   save(){
     DB.saveSettings(this.state);
+    Notify.emit({title:"",body:"Einstellungen gespeichert.",type:"success"});
   }
   render() {
     console.log(this.state)

src_less/main.less

@@ -4,7 +4,7 @@
 
 
 @import './form_elements.less';
-
+@import './notify.less';
 @font-face {
   font-family: 'Exo';
   font-style: normal;

src_less/notify.less

@@ -0,0 +1,18 @@
+#notify-center{
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    width: 0;
+    height: 0;
+    background-color:#FFF;
+    .notification{
+        width: 200px;
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        margin: 5px;
+        padding: 5px;
+        border: 1px solid #454545;
+        box-shadow: 1px 2px 3px rgba(69, 69, 69, 0.34901960784313724);
+    }
+}