Shift report link with real DB. schedule created with DB

employeemanagement/src/components/dashboard/Dashboard.js

@@ -4,26 +4,43 @@ import ManageShift from '../layout/ManageShift';
 import ShiftReport from '../layout/ShiftReport';
 import { connect } from 'react-redux';
 import { Redirect } from 'react-router-dom';
+import { firestoreConnect } from 'react-redux-firebase';
+import { compose } from 'redux';
 
 class Dashboard extends Component {
     render() {
-        const { profile, auth } = this.props;
+        const { profile, auth, shiftList, schedule } = this.props;
+        const list = shiftList && shiftList.length ? (
+            shiftList.filter(l => {
+                return l.empId == auth.uid
+            })
+          ) : null
+
         if( !auth.uid ) return <Redirect to='/signin' />
         return (
             <div id="content">
                 <Navbar profile = { profile } />
                 <ManageShift />
-                <ShiftReport />
+                <ShiftReport workList={ list } schedule={ schedule } />
             </div>
         )
     }
 }
 
-const mapStateToProps = (state) => { 
+const mapStateToProps = (state) => {
+    console.log(state); 
     return{
+        shiftList: state.firestore.ordered.Shifts,
+        schedule: state.firestore.ordered.schedule,
         auth: state.firebase.auth,
         profile: state.firebase.profile
     }
 }
 
-export default connect(mapStateToProps,null)(Dashboard)
+export default compose(
+    firestoreConnect([
+        {collection: 'Shifts'},
+        {collection: 'schedule'}
+      ]),
+    connect(mapStateToProps)
+)(Dashboard)

employeemanagement/src/components/layout/ShiftReport.js

-import React from 'react'
+import React from 'react';
+import moment from 'moment';
+
+const ShiftReport = ({workList, schedule}) =>{
+
+    function addTimes(times = []) {
+        const z = (n) => (n < 10 ? '0' : '') + n;
+        let hour = 0
+        let minute = 0
+        let second = 0
+        for (const time of times) {
+            const splited = time.split(':');
+            hour += parseInt(splited[0]);
+            minute += parseInt(splited[1])
+            second += parseInt(splited[2])
+        }
+        const seconds = second % 60
+        const minutes = parseInt(minute % 60) + parseInt(second / 60)
+        const hours = hour + parseInt(minute / 60)
+
+        return z(hours) + ':' + z(minutes) + ':' + z(seconds)
+    }
+
+    const reqTime = schedule && schedule.length ? 
+    ( 
+        <h5 className="text-center">Expected work: { schedule[0].sShift } to { schedule[0].sEnd }, {
+             moment.utc(moment(schedule[0].sEnd,"HH:mm:ss").diff(moment(schedule[0].sShift,"HH:mm:ss"))).format("HH:mm")
+            } Hours with {
+                moment.utc(moment(schedule[0].lbEnd,"HH:mm:ss").diff(moment(schedule[0].lbStart,"HH:mm:ss"))).format("HH:mm")
+            } Hour lunch break
+        </h5>
+    ) : <h5 className="text-center">No time schedule added!</h5>
+
+    const worklist = workList && workList.length ? (
+        workList && workList.map((w,key) => {
+            const caclBreak = w.endBreak !== '' ? (
+                moment.utc(moment(w.endBreak,"MM/DD/YYYY HH:mm:ss").diff(moment(w.startBreak,"MM/DD/YYYY HH:mm:ss"))).format("HH:mm:ss")
+            ) : (
+                '-'
+            )
+            const caclTime = w.endShift !== '' ? (
+                moment.utc(moment(w.endShift,"MM/DD/YYYY HH:mm:ss").diff(moment(w.startShift,"MM/DD/YYYY HH:mm:ss"))).format("HH:mm:ss")
+            ) : (
+                '-'
+            )
+            
+            var work1 = moment.utc(moment(w.startBreak,"MM/DD/YYYY HH:mm:ss").diff(moment(w.startShift,"MM/DD/YYYY HH:mm:ss"))).format("HH:mm:ss")
+            var work2 = moment.utc(moment(w.endShift,"MM/DD/YYYY HH:mm:ss").diff(moment(w.endBreak,"MM/DD/YYYY HH:mm:ss"))).format("HH:mm:ss")
+            const caclTotalTime = w.endShift !== '' ? (
+                addTimes([work1, work2])
+            ) : (
+                '-'
+            )
+
+            const reqT = schedule && schedule.length ? (
+                moment.utc(moment(schedule[0].sEnd,"HH:mm:ss").diff(moment(schedule[0].sShift,"HH:mm:ss"))).format("HH:mm")
+            ) : (
+                '-'
+            )
+
+            const caclDiff = w.endShift !== '' ? (
+                moment.utc(moment(reqT,"HH:mm:ss").diff(moment(caclTotalTime,"HH:mm:ss"))).format("HH:mm:ss")
+            ) : (
+                '-'
+            )
+            return(
+                <tr className="collection-item" key = { key}>
+                    <th scope="row">{ w.date }</th>
+                    <td>{ w.startShift.substring(10, 20) }</td>
+                    <td>{ w.startBreak.substring(10, 20) }</td>
+                    <td>{ w.endBreak.substring(10, 20) }</td>
+                    <td>{ w.endShift.substring(10, 20) }</td>
+                    <th>{ caclBreak }</th>
+                    <th>{ caclTotalTime }</th>
+                    <th>{ caclTime }</th>
+                    <th>{ caclDiff }</th>
+                </tr>
+            )
+        })
+    ) : (
+        <tr><td colSpan="9" className="text-center">No work exist!</td></tr>
+    )
 
-const ShiftReport = () =>{
     return(
         <div className="container">
-            <h2 className="text-center">Work report</h2>
-            <h5 className="text-center">Expected work: 08:00 to 17:00, 9 Hours with 1 Hour lunch break</h5>
-            <table className="table table-striped">
-                <thead>
-                    <tr>
-                        <th scope="col">Date</th>
-                        <th scope="col">Start time</th>
-                        <th scope="col">Lunch time</th>
-                        <th scope="col">Lunch end time</th>
-                        <th scope="col">Work end</th>
-                        <th scope="col">Total Break</th>
-                        <th scope="col">Total work</th>
-                        <th scope="col">Break + Work</th>
-                    </tr>
-                </thead>
-                <tbody className="workList">
-                    <tr className="collection-item">
-                        <th>DummyData</th>
-                        <td>DummyData</td>
-                        <td>DummyData</td>
-                        <td>DummyData</td>
-                        <td>DummyData</td>
-                        <th>DummyData</th>
-                        <th>DummyData</th>
-                        <th>DummyData</th>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
+        <h2 className="text-center">Work report</h2>
+        { reqTime }
+        <table className="table table-striped">
+            <thead>
+                <tr>
+                    <th scope="col">Date</th>
+                    <th scope="col">Start time</th>
+                    <th scope="col">Lunch time</th>
+                    <th scope="col">Lunch end time</th>
+                    <th scope="col">Work end</th>
+                    <th scope="col">Total Break</th>
+                    <th scope="col">Total work</th>
+                    <th scope="col">Break + Work</th>
+                    <th scope="col">Difference</th>
+                </tr>
+            </thead>
+            <tbody className="workList">
+                { worklist }
+            </tbody>
+        </table>
+    </div>
     )
 }