with nearly finished form and report creator

src/DocxInserter.js

@@ -15,7 +15,6 @@ import ObjektkatalogApi from './ObjektkatalogApi';
 ////////////////////
 
 export async function fillTemplate(log, objectData) {
-
   let buffer;
   // Create docx document.
   if (objectData.httpStatus === 200) {
@@ -26,24 +25,23 @@ export async function fillTemplate(log, objectData) {
       buffer = await createReport({
         template,
         data: {
-          inventarnummer: objectData.inventarnummer,
-          titel: objectData.titel,
-          hersteller: objectData.hersteller,
-          herstellungsort: objectData.herstellungsort,
-          herstellungsdatum: objectData.herstellungsdatum,
-          materialTechnik: objectData.materialTechnik,
-          masse: objectData.masse
+          inventarnummer: objectData.inventarnummer ? objectData.inventarnummer : 'unbekannt' ,
+          titel: objectData.titel ? objectData.titel : 'unbekannt',
+          hersteller: objectData.hersteller ? objectData.hersteller : 'unbekannt',
+          herstellungsort: objectData.herstellungsort ? objectData.herstellungsort : 'unbekannt',
+          herstellungsdatum: objectData.herstellungsdatum ? objectData.herstellungsdatum : 'unbekannt',
+          materialTechnik: objectData.materialTechnik ? objectData.materialTechnik : 'unbekannt' ,
+          masse: objectData.masse ? objectData.masse : 'unbekannt'
         }
       });
     } catch (err) {
       log = {
         ...log,
         status: 'red',
-        message: 'Konnte Template nicht öffnen: ' + err,
+        message: 'Konnte Template nicht erstellen: ' + err,
         tip: 'Ist das Template vorhanden?',
       };
     }
-
     const folderPath = path.join(config.rootDir, objectData.inventarnummer);
     // Create Folder if necessary.
     try {
@@ -51,20 +49,23 @@ export async function fillTemplate(log, objectData) {
     } catch (err) {
       log = {
         ...log,
-        status: 'green',
+        status: 'red',
         message: 'Konnte den Pfad nicht erstellen' + err,
         tip: 'Bestehen Schreibrechte auf dem Ordner?'
       }
     }
     // Write document to disk.
+
     if (buffer) {
-      fs.writeFileSync(path.join(folderPath, 'report.docx'), buffer)
+      console.log(objectData)
+      fs.writeFileSync(path.join(folderPath, objectData.titel), buffer)
       log = {
         ...log,
         status: 'green',
         message: 'Dokument erstellt',
       };
     }
+
   } else {
     log = {
       status: 'red',

src/assets/css/App.css

@@ -1,3 +0,0 @@
-/* Main CSS file */
-
-@import '_example/_example.css';

src/assets/css/_example/_example.css

@@ -1,22 +0,0 @@
-/* Example stylesheet */
-@media screen and (prefers-color-scheme: light), screen and (prefers-color-scheme: no-preference) {
-  /* Light theme */
-  body{
-    color: #000;
-    background-color: #fff;
-  }
-}
-
-@media screen and (prefers-color-scheme: dark) {
-  /* Dark theme */
-  body {
-    color: #fff;
-    background-color: #000;
-  }
-}
-
-h1 {
-  font-family: Helvetica, Arial, sans-serif;
-  font-size: 21px;
-  font-weight: 200;
-}

src/assets/css/styles.css

@@ -20,6 +20,16 @@ body {
   margin: 0 auto;
 }
 
+.checkup {
+  transition: height 1s;
+  height: 0;
+}
+
+.closed{
+  height: 0;
+  position: relative;
+}
+
 .column {
   flex-direction: column;
 }
@@ -82,6 +92,14 @@ input {
   border-radius: 3px;
 }
 
+input[type="date"]::-webkit-calendar-picker-indicator {
+  color: #d5d5d5;
+  width: 20px;
+  height: 20px;
+  border-width: thin;
+  filter: invert(1);
+}
+
 input:focus {
 background-color: #d5d5d5;
   color: #00152E;
@@ -97,7 +115,7 @@ input.edit-input:not(:disabled) {
   background-color: #00152E ;
   color: #d5d5d5;
   font-size: medium;
-
+  font-family: roboto, sans-serif;
 }
 
 
@@ -118,7 +136,14 @@ label {
   font-size: 0.75em;
   height: 5em;
 }
+.no-overflow {
+  overflow: hidden;
+  height: inherit;
+}
 
+.open {
+  height: 700px;
+}
 p {
   margin: 0;
 }

src/components/App.js

@@ -1,9 +1,6 @@
 // Components
 import {DataForm} from "./DataForm";
 import {Log} from "./Log"
-
-// Modules
-import {fillTemplate} from "../DocxInserter";
 import SettingsIcon from '@mui/icons-material/Settings';
 
 // React
@@ -11,7 +8,7 @@ import { Link } from "react-router-dom";
 import React, {useState} from 'react'
 
 // CSS
-import '../styles.css'
+import '../assets/css/styles.css'
 import ObjektkatalogApi from "../ObjektkatalogApi";
 
 
@@ -19,10 +16,8 @@ import ObjektkatalogApi from "../ObjektkatalogApi";
 //      Main      //
 ////////////////////
 
-
-
 export const App = () => {
-  let log;
+
 
   // States
 
@@ -42,6 +37,7 @@ export const App = () => {
 
   const [objectData, setObjectData] = useState(
     {
+      datum: '',
       inventarnummer: '',
       titel: '',
       hersteller: '',
@@ -65,18 +61,38 @@ export const App = () => {
       // Get objectId from user input.
       let objectId = document.getElementById('object-id').value
 
+      if (objectId) {
+
         // Get object data from objektkatalog.gnm.de
         let objektkatalogApi = new ObjektkatalogApi();
-      let objectData = await objektkatalogApi.getData(objectId);
-
-      console.log(objectData)
-
-      log = await fillTemplate(log, objectData);
-        // Set new state of log div with message and visibility class
+        let receivedObjectData = await objektkatalogApi.getData(objectId);
+        if (receivedObjectData.httpStatus === 404) {
           setLogState({
-          log: log,
-          logStatus: 'active'
-        });
+            log: {
+              status: 'red',
+              message: 'Kein Objekt mit dieser Inventarnummer gefunden!',
+              code: '',
+              tip:'',
+            }, // with message, code, tip
+            logClass: 'active'
+          })
+        } else {
+        console.log(receivedObjectData)
+        // Fill and open check up form
+        setObjectData(receivedObjectData)
+        setCheckUpVisibility(true)
+        }
+      } else {
+        setLogState({
+          log: {
+            status: 'red',
+            message: 'Bitte Inventarnummer eingeben!',
+            code: '',
+            tip:'',
+          }, // with message, code, tip
+          logClass: 'active'
+        })
+      }
     }
 
     return (
@@ -108,7 +124,13 @@ export const App = () => {
 
             </form>
           </div>
-          <DataForm/>
+          <DataForm
+            className={checkUpVisibility ? 'open' : 'closed'}
+            objectData={objectData}
+            setObjectData={setObjectData}
+            logState={logState}
+            setLogState={setLogState}
+          />
         </main>
         <footer>
           {/* We give state and state setter of the parent as params to the child components, so that child events can change parent states */}

src/components/DataForm.js

@@ -1,3 +1,6 @@
+// Modules
+import {fillTemplate} from "../DocxInserter";
+
 // React
 import React from 'react'
 
@@ -5,38 +8,195 @@ import React from 'react'
 //      Main      //
 ////////////////////
 
-export const DataForm = () => {
-  return (<div>
-      <form className={'flex column'}>
+export const DataForm = ({className, objectData, setObjectData, logState, setLogState}) => {
+  let log;
+
+  // Handlers
+
+  const datumChangeHandler = (e) => {
+    console.log(e.target.form.datum.value)
+    setObjectData((prevState) => {
+      return {
+        ...prevState,
+        datum: e.target.form.datum.value
+      }
+    })
+  }
+
+  const inventarnummerChangeHandler = (e) => {
+    setObjectData((prevState) => {
+      return {
+        ...prevState,
+        inventarnummer: e.target.form.inventarnummer.value
+      }
+    })
+  }
+
+  const titelChangeHandler = (e) => {
+    setObjectData((prevState) => {
+      return {
+        ...prevState,
+        titel: e.target.form.titel.value
+      }
+    })
+  }
+
+  const herstellerChangeHandler = (e) => {
+    setObjectData((prevState) => {
+      return {
+        ...prevState,
+        hersteller: e.target.form.hersteller.value
+      }
+    })
+  }
+
+  const herstellungsortChangeHandler = (e) => {
+    setObjectData((prevState) => {
+      return {
+        ...prevState,
+        herstellungsort: e.target.form.herstellungsort.value
+      }
+    })
+  }
+
+  const herstellungsdatumChangeHandler = (e) => {
+    setObjectData((prevState) => {
+      return {
+        ...prevState,
+        herstellungsdatum: e.target.form.herstellungsdatum.value
+      }
+    })
+  }
+
+  const materialTechnikChangeHandler = (e) => {
+    setObjectData((prevState) => {
+      return {
+        ...prevState,
+        materialTechnik: e.target.form.materialTechnik.value
+      }
+    })
+  }
+
+  const masseChangeHandler = (e) => {
+    setObjectData((prevState) => {
+      return {
+        ...prevState,
+        masse: e.target.form.masse.value
+      }
+    })
+  }
+
+  const fillTemplateClickHandler = async (e) => {
+    e.preventDefault();
+    console.log(objectData, 'parentobjectData')
+    log = await fillTemplate(logState, objectData);
+    // Set new state of log div with message and visibility class
+    setLogState({
+      log: log,
+      logStatus: 'active'
+    });
+  }
+
+  // Default date of today
+  let today = new Date()
+  let todayFormat = today.getFullYear() + '-' + (String(today.getMonth() + 1).padStart(2, '0')) + '-' + String(today.getDate()).padStart(2, '0'); ;
+
+  return (<div className={'checkup ' + className}>
+      <form className={'flex column no-overflow'}>
+        <div >
+          <label htmlFor={'template-datum'} >Datum</label>
+          <input
+            id={"template-datum"}
+            name={"datum"}
+            type={"date"}
+            className={"full input-field"}
+            defaultValue={todayFormat}
+            onChange={datumChangeHandler}
+          />
+        </div>
         <div >
           <label htmlFor={'template-inventarnummer'} >Inventarnummer</label>
-          <input className={"full input-field"}/>
+          <input
+            id={"template-inventarnummer"}
+            name={"inventarnummer"}
+            type={"text"}
+            className={"full input-field"}
+            defaultValue={objectData.inventarnummer}
+            onChange={inventarnummerChangeHandler}
+          />
         </div>
         <div >
           <label htmlFor={'template-titel'}>Titel</label>
-          <input type={"text"} className={"full input-field"}/>
+          <input
+            id={"template-titel"}
+            name={"titel"}
+            type={"text"}
+            className={"full input-field"}
+            defaultValue={objectData.titel}
+            onChange={titelChangeHandler}
+          />
         </div>
         <div>
           <label htmlFor={'template-hersteller'}>Hersteller</label>
-          <input type={"text"} className={"full input-field"}/>
+          <input
+            id={"template-hersteller"}
+            name={"hersteller"}
+            type={"text"}
+            className={"full input-field"}
+            defaultValue={objectData.hersteller}
+            onChange={herstellerChangeHandler}
+          />
         </div>
         <div>
           <label htmlFor={'template-herstellungsort'}>Herstellungsort</label>
-          <input type={"text"} className={"full input-field"}/>
+          <input
+            id={"template-herstellungsort"}
+            name={"herstellungsort"}
+            type={"text"}
+            className={"full input-field"}
+            defaultValue={objectData.herstellungsort}
+            onChange={herstellungsortChangeHandler}
+          />
         </div>
         <div >
           <label htmlFor={'template-herstellungsdatum'}>Herstellungsdatum</label>
-          <input type={"text"} className={"full input-field"}/>
+          <input
+            id={"template-herstellungsdatum"}
+            name={"herstellungsdatum"}
+            type={"text"}
+            className={"full input-field"}
+            defaultValue={objectData.herstellungsdatum}
+            onChange={herstellungsdatumChangeHandler}
+          />
+
         </div>
         <div >
           <label htmlFor={'template-materialTechnik'}>Material und Technik</label>
-          <input type={"text"} className={"full input-field"}/>
+          <input
+            id={"template-materialTechnik"}
+            name={"materialTechnik"}
+            type={"text"}
+            className={"full input-field"}
+            defaultValue={objectData.materialTechnik}
+            onChange={materialTechnikChangeHandler}
+          />
         </div>
         <div>
           <label htmlFor={'template-masse'}>Maße</label>
-          <input type={"text"} className={"full input-field"}/>
+          <input
+            id={"template-masse"}
+            name={"masse"}
+            type={"text"}
+            className={"full input-field"}
+            defaultValue={objectData.masse}
+            onChange={masseChangeHandler}
+          />
         </div>
-        <button type={"submit"} className={'send-button center top-distance'} >Dokument erstellen</button>
+        <button
+          type={"submit"}
+          className={'send-button center top-distance'}
+          onClick={fillTemplateClickHandler}
+        >Dokument erstellen</button>
       </form>
     </div>
   )