2.2 - added new Template and Template selection

package.json

@@ -23,6 +23,6 @@
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject",
-    "less": "less-watch-compiler ./src_less ./public/ main.less"
+    "less": "npx less-watch-compiler ./src_less ./public/ main.less"
   }
 }

public/main.css

@@ -1,3 +1,8 @@
+select {
+  padding: 5px;
+  height: 34px;
+  box-sizing: border-box;
+}
 @font-face {
   font-family: 'Exo';
   font-style: normal;

src/jsx/ui/components/templates.jsx

@@ -5,50 +5,63 @@ export class Templates{
     static template = {
         header:"",
         wochenbericht:"",
+        wochenbericht_2:"",
         monatsbericht:"",
         arbeitszeiten:"",
         footer:""
     };
     static getTemplates(){
         axios.get('/templates/header.ptt')
-        .then ((result) => {
+            .then ((result) => {
-            Templates.template.header = result.data;  
+                Templates.template.header = result.data;  
-        })
+            })
-        .catch ((error) => {
+            .catch ((error) => {
-            console.log(error);
+                console.log(error);
-        })
+            })
+
+
         axios.get('/templates/wochenbericht.ptt')
-        .then ((result) => {
+            .then ((result) => {
+
+                Templates.template.wochenbericht = result.data;  
+            })
+            .catch ((error) => {
+                console.log(error);
+            })    
+
+        axios.get('/templates/wochenbericht_2.ptt')
+            .then ((result) => {
+    
+                Templates.template.wochenbericht_2 = result.data;  
+            })
+            .catch ((error) => {
+                console.log(error);
+            })    
 
-            Templates.template.wochenbericht = result.data;  
-        })
-        .catch ((error) => {
-            console.log(error);
-        })    
         axios.get('/templates/monatsbericht.ptt')
-        .then ((result) => {
+            .then ((result) => {
 
-            Templates.template.monatsbericht = result.data;  
+                Templates.template.monatsbericht = result.data;  
-        })
+            })
-        .catch ((error) => {
+            .catch ((error) => {
-            console.log(error);
+                console.log(error);
-        }) 
+            }) 
         axios.get('/templates/arbeitszeiten.ptt')
-        .then ((result) => {
+            .then ((result) => {
 
-            Templates.template.arbeitszeiten = result.data;  
+                Templates.template.arbeitszeiten = result.data;  
-        })
+            })
-        .catch ((error) => {
+            .catch ((error) => {
-            console.log(error);
+                console.log(error);
-        })   
+            })   
         axios.get('/templates/footer.ptt')
-        .then ((result) => {
+            .then ((result) => {
 
-            Templates.template.footer = result.data;  
+                Templates.template.footer = result.data;  
-        })
+            })
-        .catch ((error) => {
+            .catch ((error) => {
-            console.log(error);
+                console.log(error);
-        }) 
+            }) 
     }
     printTimes(){
         return ``

src/jsx/ui/print.jsx

@@ -18,12 +18,14 @@ export class Print extends React.Component {
       startWeek:0,
       endWeek:0,
       diff:0,
-      html:""
+      html:"",
+      choosenTemplate:"wochenbericht"
     }
     this.preview = this.preview.bind(this);
     this.print = this.print.bind(this);
     this.handleChangeStart = this.handleChangeStart.bind(this);
     this.handleChangeEnd = this.handleChangeEnd.bind(this);
+    this.handleChangeTemplate = this.handleChangeTemplate.bind(this);
     Templates.getTemplates()
   }
   preview(){
@@ -33,7 +35,7 @@ export class Print extends React.Component {
     var start = moment(this.state.start);
     var end   = moment(this.state.end);
     var me = this;
-    Modi_Week.preview(name,anfang,start,end,me)
+    Modi_Week.preview(name,anfang,start,end,me,this.state.choosenTemplate)
 
   }
   print(){
@@ -65,6 +67,9 @@ export class Print extends React.Component {
     this.setState({diff:diff});
     console.log(diff);
   }
+  handleChangeTemplate(e){
+    this.setState({choosenTemplate: e.target.value});
+  }
   render(){
 
     return (
@@ -75,6 +80,11 @@ export class Print extends React.Component {
           </div>
           <div>Start: <input type="date" value={this.state.start} onChange={this.handleChangeStart}/></div>
           <div>Ende:  <input type="date" value={this.state.end} onChange={this.handleChangeEnd}/></div>
+          <div>Vorlage: <select value={this.state.choosenTemplate} onChange={this.handleChangeTemplate}>
+              <option selected value="wochenbericht">Wochenbericht 1</option>
+              <option value="wochenbericht_2">Wochenbericht 2</option>
+            </select>
+          </div>
           <div><button onClick={this.preview}>Vorschau</button><button onClick={this.print}>Drucken</button></div>
         </div>
         <iframe id="pdf" title="PDF OUTPUT">

src/jsx/ui/print_modi/week.jsx

@@ -5,7 +5,16 @@ const moment = require('moment');
 const nunjucks = require('nunjucks');
 
 export class Modi_Week{
-    static preview(name,anfang,start,end,me){
+  /**
+   * 
+   * @param {*} name 
+   * @param {*} anfang 
+   * @param {*} start 
+   * @param {*} end 
+   * @param {*} me 
+   * @param {*} choosenTemplate 
+   */
+    static preview(name,anfang,start,end,me,choosenTemplate){
         var sql = 'SELECT * FROM days WHERE date BETWEEN '+(moment(me.state.start).unix()*1000)+' AND '+(moment(me.state.end).unix()*1000);
         var days = DB.cdb.exec(sql);
         //for(var result = []; days.step();) result.push(days.getAsObject({':start':me.state.start,':end':me.state.end}));
@@ -91,7 +100,13 @@ export class Modi_Week{
             }
           }
         }
-        var build = Templates.template.header+Templates.template.wochenbericht+Templates.template.footer;
+
+
+        /**
+         * @INFO
+         * Putting all Templates together for the print
+         */
+        var build = Templates.template.header+Templates.template[choosenTemplate]+Templates.template.footer;
         
         var html = nunjucks.renderString(build, {name:name,weeks:weeks});
     

src_less/form_elements.less

@@ -0,0 +1,5 @@
+select{
+    padding: 5px;
+    height: 34px;
+    box-sizing: border-box;
+}

src_less/main.less

@@ -3,6 +3,8 @@
 @color:#ffffff;
 
 
+@import './form_elements.less';
+
 @font-face {
   font-family: 'Exo';
   font-style: normal;
@@ -18,6 +20,8 @@ html,body{
 *{
 
 }
+
+
 #container{
   display: flex;
 }

src_less/print.less

@@ -1,5 +1,5 @@
 #print-frame{
-
+    
     .header{
         height:98px;
         background-color: @background;