adds BodyData Page with Measurement Form

src/App.js

@@ -18,6 +18,7 @@ import ProfileMenu from 'components/profile/ProfileMenuView';
 import Naps from 'pages/naps/naps/Naps';
 import EditNap from 'pages/naps/edit/EditNap';
 import Diapers from 'pages/diapers/Diapers';
+import Bodydata from 'pages/bodydata/Bodydata';
 import Settings from 'pages/settings/Settings';
 
 // Controllers
@@ -28,6 +29,7 @@ import DiapersController from 'controllers/DiapersController';
 // Libs
 import { toast } from "react-toastify";
 import EditDiaper from 'pages/diapers/edit/EditDiaper';
+import BodydataController from 'controllers/BodydataController';
 
 function App() {
     toast.configure({
@@ -73,6 +75,19 @@ function App() {
         currentUser
     });
 
+    /*
+    * ============================== Bodydata
+    */
+    let [measurements, setMeasurements] = useState([]);
+
+    const bodydataController = BodydataController({
+        setMeasurements,
+        firebase,
+        currentUser
+    });
+
+    console.log('Measurements', measurements);
+
     return (
         <BrowserRouter>
             {currentUser ? (
@@ -145,6 +160,17 @@ function App() {
                             <EditDiaper {...props} diapersController={diapersController} />
                         )}
                     />
+                    <Route
+                        exact
+                        path="/bodydata"
+                        render={(props) => (
+                            <Bodydata
+                                {...props}
+                                currentUser={currentUser}
+                                bodydataController={bodydataController}
+                            />
+                        )}
+                    />
                     <Route
                         exact
                         path="/settings"

src/components/bodydata/measurementform/MeasurementForm.js

@@ -0,0 +1,117 @@
+// React
+import React from "react";
+import { useState } from "react";
+import PropTypes from "prop-types";
+
+// Components
+import Measurement from "models/Measurement";
+
+// Styles
+import "./measurements.scss";
+
+const MeasurementForm = (props) => {
+    const {
+        propstime = Date.now(),
+        propsweight = "",
+        propsbodysize = "",
+        propsheadcircumference = "",
+        headline = 'new Measurement',
+        submitText = 'save'
+    } = props;
+
+    let [time, setTime] = useState(propstime);
+    let [weight, setWeight] = useState(propsweight);
+    let [bodySize, setBodySize] = useState(propsbodysize);
+    let [headCircumference, setHeadCircumference] = useState(propsheadcircumference);
+
+    const onSubmit = (e) => {
+        e.preventDefault();
+        const measurement = new Measurement(time, weight, bodySize, headCircumference);
+
+        setTime(Date.now());
+        setWeight("");
+        setBodySize("");
+        setHeadCircumference("");
+
+        props.onSubmit(measurement);
+    };
+
+    const onDateTimeChanged = (e) => {
+        if (e.target.value) {
+            setTime(new Date(e.target.value).getTime());
+        }
+    };
+
+    const formatTimestampToInputDateTime = (ts) => {
+        let date = new Date(ts);
+        let dd = (date.getDate() < 10 ? "0" : "") + date.getDate();
+        let MM = (date.getMonth() + 1 < 10 ? "0" : "") + (date.getMonth() + 1);
+        let yyyy = date.getFullYear();
+        let hh = (date.getHours() < 10 ? "0" : "") + date.getHours();
+        let mm = (date.getMinutes() < 10 ? "0" : "") + date.getMinutes();
+        let str = `${yyyy}-${MM}-${dd}T${hh}:${mm}`;
+        return str;
+    };
+
+    return (
+        <form className="measurement_form" onSubmit={onSubmit}>
+            <fieldset>
+                <legend>{headline}</legend>
+                <label htmlFor="time">Time of Measurement</label>
+                <input
+                    type="datetime-local"
+                    name="time"
+                    id="time"
+                    value={formatTimestampToInputDateTime(time)}
+                    onChange={onDateTimeChanged}
+                />
+                <label htmlFor="weight">Weight (g)</label>
+                <input
+                    type="number"
+                    className="weight"
+                    id="weight"
+                    placeholder="Weight (g)"
+                    value={weight}
+                    onChange={(e) => {
+                        setWeight(e.target.value);
+                    }}
+                />
+                <label htmlFor="bodySize">Body Size (cm)</label>
+                <input
+                    type="number"
+                    className="bodySize"
+                    id="bodySize"
+                    placeholder="Body Size (cm)"
+                    value={bodySize}
+                    onChange={(e) => {
+                        setBodySize(e.target.value);
+                    }}
+                />
+                <label htmlFor="headCircumference">Head Circumference (cm)</label>
+                <input
+                    type="number"
+                    className="headCircumference"
+                    id="headCircumference"
+                    placeholder="Head Circumference (cm)"
+                    value={headCircumference}
+                    onChange={(e) => {
+                        setHeadCircumference(e.target.value);
+                    }}
+                />
+                <input type="submit" value={submitText} className="button" />
+            </fieldset>
+        </form>
+    );
+};
+
+MeasurementForm.propTypes = {
+    time: PropTypes.number,
+    weight: PropTypes.number,
+    bodySize: PropTypes.number,
+    headCircumference: PropTypes.number,
+    onSubmit: PropTypes.func.isRequired,
+    headline: PropTypes.string,
+    submitText: PropTypes.string
+};
+
+export default MeasurementForm;

src/components/bodydata/measurementform/measurements.scss

@@ -0,0 +1,102 @@
+@import '../../../assets/scss/breakpoints';
+@import '../../../assets/scss/colors';
+
+.measurement_form {
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: repeat(7, auto);
+    grid-template-areas:
+        "legend legend"
+        "timelabel timelabel"
+        "time time"
+        "weightlabel weightlabel"
+        "weight weight"
+        "bodysizelabel bodysizelabel"
+        "bodysize bodysize"
+        "headcircumferencelabel headcircumferencelabel"
+        "headcircumference headcircumference"
+        "submit submit";
+
+    fieldset {
+        display: contents;
+
+        legend {
+            grid-area: legend;
+            font-size: 1.4rem;
+            color: $mid;
+            font-weight: bold;
+        }
+
+        input {
+            border: none;
+            border-bottom: 1px solid $light;
+            color: $dark;
+            outline: none;
+            width: 100%;
+            font-size: 1.3rem;
+
+            &:focus {
+                border-bottom: 1px solid $highlight;
+            }
+        }
+
+        label[for=time] {
+            grid-area: timelabel;
+        }
+
+        input#time {
+            grid-area: time;
+        }
+
+        label[for=weight] {
+            grid-area: weightlabel;
+        }
+
+        .weight {
+            grid-area: weight;
+        }
+
+        label[for=bodySize] {
+            grid-area: bodysizelabel;
+        }
+
+        .bodySize {
+            grid-area: bodysize;
+        }
+
+        label[for=headCircumference] {
+            grid-area: headcircumferencelabel;
+        }
+
+        .headCircumference {
+            grid-area: headcircumference;
+        }
+
+        input[type=submit] {
+            grid-area: submit;
+            border: none;
+            grid-row: 0 / span 2;
+        }
+    }
+}
+
+.dark {
+    .naps_form {
+        legend {
+            color: $light;
+        }
+
+        input {
+            background-color: transparent;
+            color: $white;
+            border-bottom: 1px solid $highlight;
+        }
+
+        input[type=submit] {
+            background-color: $highlight;
+            color: $dark;
+            border: none;
+        }
+    }
+}

src/components/diapers/diapersform/DiapersForm.js

@@ -95,8 +95,9 @@ const DiapersForm = props => {
 }
 
 DiapersForm.propTypes = {
-    start: PropTypes.number,
-    end: PropTypes.number,
+    time: PropTypes.number,
+    pee: PropTypes.bool,
+    poo: PropTypes.bool,
     notes: PropTypes.string,
     onSubmit: PropTypes.func,
     headline: PropTypes.string,

src/components/diapers/widgets/dailychart/ChartDaily.js

@@ -21,7 +21,11 @@ const ChartDaily = props => {
 
         diapers.forEach(diaper => {
             if (data.length < maxDays) {
-                let tempDate = new Date(diaper.time).toLocaleDateString();
+                let tempDate = new Date(diaper.time).toLocaleDateString([], {
+                    day: "2-digit",
+                    month: "2-digit",
+                    year: "numeric",
+                });
                 // check if we have reached the next day
                 if (tempDate !== date) {
                     // add last day to data array if not null
@@ -51,7 +55,7 @@ const ChartDaily = props => {
     }
 
     function prepareChart() {
-        var dataTable = new GoogleCharts.api.visualization.DataTable();
+        const dataTable = new GoogleCharts.api.visualization.DataTable();
         dataTable.addColumn("string", "Date");
         dataTable.addColumn("number", "Diapers");
         dataTable.addColumn({ type: "number", role: "annotation" });

src/components/menu/LoggedInNav.js

@@ -27,14 +27,14 @@ const LoggedInNav = (props) => {
                     title="Diapers"
                 />
             </li>
-            {/* <li>
+            <li>
                 <MenuPoint
                     to="/bodydata"
                     iconClasses="icon fas fa-weight fa-3x"
                     title="Body"
                 />
             </li>
-            <li>
+            {/* <li>
                 <MenuPoint
                     to="/photos"
                     iconClasses="icon fas fa-camera-retro fa-3x"