Feature added- 24 hrs and 12 hrs mode. Fixes #46 and #40

GroceriStar · Jul 1, 2018 · 77d7c73 · 77d7c73
1 parent 3d23c23
commit 77d7c73
Show file tree

Hide file tree

Showing 7 changed files with 106 additions and 42 deletions.
diff --git a/src/component/Calendar/Calendar.js b/src/component/Calendar/Calendar.js
@@ -13,6 +13,7 @@ import {
 import months from '../../data/months';
 
 
+
 class Calendar extends Component {
     constructor(props) {
         super(props);
@@ -26,32 +27,33 @@ class Calendar extends Component {
 
     changeMonth(event) {
         daysCounterReset();
+        const currentMonth = this.state.month;
         if(event.target.innerText === 'Next Month') {
-                if(this.state.month === 11) {
+                if(currentMonth === 11) {
                 today.setMonth(0);
                 this.setState({
                    month: 0
                 });
             } 
             else {
-                today.setMonth(this.state.month + 1);
+                today.setMonth(currentMonth + 1);
                 this.setState({
-                  month: this.state.month + 1
+                  month: currentMonth + 1
                 });
             }
         }
 
         if(event.target.innerText === 'Previous Month') {
-            if(this.state.month === 0) {
+            if(currentMonth === 0) {
                 today.setMonth(11);
                 this.setState({
                     month: 11
                 });
             }
             else {
-                today.setMonth(this.state.month - 1);
+                today.setMonth(currentMonth - 1);
                 this.setState({
-                  month: this.state.month - 1
+                  month: currentMonth - 1
                 });
             }
         }

diff --git a/src/component/Modals/AddMealModal.js b/src/component/Modals/AddMealModal.js
@@ -24,7 +24,7 @@ class AddMeal extends Component {
 
     }
 
-    toggle = function() {
+    toggle() {
         this.setState({
             modal: !this.state.modal
         });

diff --git a/src/component/Modals/ModalWork.js b/src/component/Modals/ModalWork.js
@@ -1,6 +1,11 @@
 import React, { Component } from 'react';
 import {
-  ListGroupItem, Button, Modal, ModalHeader, ModalBody, ModalFooter
+  ListGroupItem,
+  Button,
+  Modal,
+  ModalHeader,
+  ModalBody,
+  ModalFooter
 } from 'reactstrap';
 
 
@@ -22,6 +27,28 @@ class Modals extends Component {
             modal: !this.state.modal
         });
     }
+
+    transformTime(time) {
+        if(this.props.mode) {
+        let timeLapse = time.split('-', 2).map(index => index.split(':', 2));
+        console.log(timeLapse);
+        if(timeLapse[1][0] > 12) {
+            timeLapse[1][0] -= 12;
+            timeLapse[1][0] ='0' + timeLapse[1][0];
+        }
+        if(timeLapse[0][0] > 12) {
+            timeLapse[0][0] -= 12;
+            timeLapse[0][0] ='0' + timeLapse[0][0];
+        }
+        let result = timeLapse.map(index => index.join(':')).join('-');
+        return result;
+
+        }
+        else {
+            return time;
+        }
+    }
+
 
     render() {
         return(
@@ -30,7 +57,7 @@ class Modals extends Component {
                   className={this.props.data.tag}
                   onClick={this.toggle}>
                     <div>
-                        {this.props.data.time}
+                        {this.transformTime(this.props.data.time)}
                     </div>{this.props.data.text}
                 </ListGroupItem>
                 <Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>

diff --git a/src/component/WorkSchedule/DayModel.js b/src/component/WorkSchedule/DayModel.js
@@ -36,10 +36,12 @@ class ColumnRender extends Component {
 
         let topToBottom = _.range(0, 925, 25).reduce((accumulator, item) => {
             accumulator.push(item);
-            if (item > buffer[j].start && item < (buffer[j].start + buffer[j].height)) {
+            if (item > buffer[j].start &&
+                item < (buffer[j].start + buffer[j].height)) {
                 accumulator.pop();
             }
-            if(item > (buffer[j].start + buffer[j].height - 25) && j < buffer.length -1) {j++}
+            if(item > (buffer[j].start + buffer[j].height - 25) &&
+               j < buffer.length -1) {j++}
             return accumulator;
         }, []);
 
@@ -53,7 +55,7 @@ class ColumnRender extends Component {
                     j+=1;
                 }
                 return (
-                  <Modals data={buffer[j-1]} key={item} />
+                  <Modals mode={this.props.mode} data={buffer[j-1]} key={item} />
                 );
             }
 
@@ -66,7 +68,7 @@ class ColumnRender extends Component {
             }
 
             if(item%50 === 0) {
-                if(topToDown[index+1] === buffer[i].start) {
+                if(topToBottom[index+1] === buffer[i].start) {
                     blockHeight = fillerBlockHeight;
                 }
                 else {

diff --git a/src/component/WorkSchedule/Schedule.js b/src/component/WorkSchedule/Schedule.js
@@ -1,47 +1,23 @@
 import React, { Component } from 'react';
 import { ListGroup, ListGroupItem } from 'reactstrap';
-import './WorkSched.css';
 import { weekdayName } from '../../data/days';
 import { ColumnRender } from './DayModel';
 import {  defaultBlockHeight } from '../../data/style_vars'
 
 
-class TimeLine extends Component {
-
-    render() {
-        return (
-                <div className='timedHeight'>
-                    <ListGroup>
-                        <ListGroupItem>9:00</ListGroupItem>
-                        <ListGroupItem>10:00</ListGroupItem>
-                        <ListGroupItem>11:00</ListGroupItem>
-                        <ListGroupItem>12:00</ListGroupItem>
-                        <ListGroupItem>13:00</ListGroupItem>
-                        <ListGroupItem>14:00</ListGroupItem>
-                        <ListGroupItem>15:00</ListGroupItem>
-                        <ListGroupItem>16:00</ListGroupItem>
-                        <ListGroupItem>17:00</ListGroupItem>
-                        <ListGroupItem>18:00</ListGroupItem>
-                    </ListGroup>
-                </div>
-        );
-    }
-}
-
-
 class ScheduleRender extends Component {
     render() {
         return(
             weekdayName.map((day, index) => 
                 <div key={index} className='data-class'>
                     <ListGroup>
                         <ListGroupItem style={defaultBlockHeight}>{day}</ListGroupItem>
-                        <ColumnRender key={index} index={index} />
+                        <ColumnRender mode={this.props.mode} key={index} index={index} />
                     </ListGroup>
                 </div>
                 )
             );
         }
 }
 
-export { ScheduleRender, TimeLine }
+export { ScheduleRender }
diff --git a/src/component/WorkSchedule/Timeline.js b/src/component/WorkSchedule/Timeline.js
@@ -0,0 +1,42 @@
+import React, { 
+  Component 
+} from 'react';
+import { ListGroup, ListGroupItem } from 'reactstrap';
+
+class TimeLine extends Component {
+    transformTime(time) {
+        if(this.props.mode) {
+            let timeSplit = time.split(':', 2);
+            if(timeSplit[0] > 12) {
+                timeSplit[0] -= 12;
+                timeSplit[0] = '0' + timeSplit[0]
+            }
+            let result = timeSplit.join(':');
+            return result;
+        }
+        else {
+            return time;
+        }
+    }
+
+    render() {
+        return (
+                <div className='timedHeight'>
+                    <ListGroup>
+                        <ListGroupItem>{this.transformTime('09:00')}</ListGroupItem>
+                        <ListGroupItem>{this.transformTime('10:00')}</ListGroupItem>
+                        <ListGroupItem>{this.transformTime('11:00')}</ListGroupItem>
+                        <ListGroupItem>{this.transformTime('12:00')}</ListGroupItem>
+                        <ListGroupItem>{this.transformTime('13:00')}</ListGroupItem>
+                        <ListGroupItem>{this.transformTime('14:00')}</ListGroupItem>
+                        <ListGroupItem>{this.transformTime('15:00')}</ListGroupItem>
+                        <ListGroupItem>{this.transformTime('16:00')}</ListGroupItem>
+                        <ListGroupItem>{this.transformTime('17:00')}</ListGroupItem>
+                        <ListGroupItem>{this.transformTime('18:00')}</ListGroupItem>
+                    </ListGroup>
+                </div>
+        );
+    }
+}
+
+export { TimeLine }
diff --git a/src/component/WorkSchedule/WorkSched.js b/src/component/WorkSchedule/WorkSched.js
@@ -3,23 +3,38 @@ import React, {
 } from 'react';
 import { Container, Row } from 'reactstrap';
 import './WorkSched.css';
-import { ScheduleRender, TimeLine } from './Schedule'
+import { ScheduleRender } from './Schedule';
+import { TimeLine } from './Timeline';
 
 class WorkSched extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            mode: false
+        };
+        this.changeMode = this.changeMode.bind(this);
+    }
+
+    changeMode() {
+        this.setState({
+            mode: !this.state.mode
+        })
+    }
             render() {
               return(
                     <div>
                         <div className='header'>
                           <h1>
                             Schedule
                           </h1>
+                  <button onClick={this.changeMode}>Switch Mode</button>
                         </div>
                         <Container>
                             <Row>
                                 <div className='timeline'>
-                                  <TimeLine />
+                                  <TimeLine mode={this.state.mode}/>
                                 </div>
-                                <ScheduleRender />
+                                <ScheduleRender mode={this.state.mode}/>
                             </Row>
                         </Container>
                     </div>