Some fixes

Author: xnerhu

3-panel/src/imports/materialdesign/components/TimePicker/components/MinutesClock/index.js

@@ -43,7 +43,7 @@ export default class MinutesClock extends Component {
     }
 
     setTimeout(function () {
-      timePicker.updateHour()
+      timePicker.updateTime()
     }, 10)
   }
 

3-panel/src/imports/materialdesign/components/TimePicker/index.js

@@ -25,8 +25,9 @@ export default class TimePicker extends Component {
 
   /**
    * Shows or hides time picker dialog.
+   * @param {Boolean} set time to default (optional)
    */
-  toggle (flag) {
+  toggle (flag, setTimeToDefault) {
     const root = this.getRoot()
 
     root.style[(flag) ? 'display' : 'top'] = (flag) ? 'block' : '25%'
@@ -38,6 +39,7 @@ export default class TimePicker extends Component {
     }, (flag) ? 20 : 300)
 
     this.toggleDark(flag)
+    if (flag) this.reset(setTimeToDefault)
   }
 
   /**
@@ -55,6 +57,60 @@ export default class TimePicker extends Component {
     }, (flag) ? 20 : 300)
   }
 
+  /**
+   * Resets clocks.
+   * @param {Boolean} set time to default (optional)
+   */
+  reset (setTimeToDefault = true) {
+    this.canSelectClock = true
+    this.selectClock(true)
+
+    if (setTimeToDefault) {
+      this.selectTime(true)
+      this.setTime(6, 30)
+    }
+  }
+
+  /**
+   * Sets time.
+   * @param {Int} hour
+   * @param {Int | String} minutes
+   */
+  setTime (hour, minutes) {
+    const hoursClock = this.elements.hoursClock
+    const minutesClock = this.elements.minutesClock
+
+    const hoursTickIndex = this.getTickIndex(hoursClock, hour)
+    const minutesTickIndex = this.getTickIndex(minutesClock, minutes)
+
+    if (hoursTickIndex < 0) console.log('cant find hour tick index')
+    if (minutesTickIndex < 0) console.log('cant find minutes tick index')
+    console.log(hoursTickIndex, minutesTickIndex)
+
+    const hoursTick = hoursClock.ticks[hoursTickIndex]
+    const minutesTick = minutesClock.ticks[minutesTickIndex]
+
+    if (hoursClock.selectedTick !== hoursTick) this.selectTick(hoursTick, hoursClock)
+    if (minutesClock.selectedTick !== minutesTick) this.selectTick(minutesTick, minutesClock)
+
+    this.updateTime()
+  }
+
+  /**
+   * Gets tick index.
+   * @param {HoursClock | MinutesClock}
+   * @param {Int | String} hour or minutes
+   * @return {Int} tick index
+   */
+  getTickIndex (clock, number) {
+    for (var i = 0; i < clock.ticks.length; i++) {
+      const tickNumber = clock.ticks[i].props.number
+      if (tickNumber == number) return i
+    }
+
+    return -1
+  }
+
   /**
    * Enables selecting hour or minute.
    */
@@ -72,14 +128,14 @@ export default class TimePicker extends Component {
     window.removeEventListener('mouseup', this.disableSelecting)
 
     if (this.actualClock === this.elements.hoursClock) {
-      this.selectClock(this.elements.minutesClock)
+      this.selectClock(false)
     }
   }
 
   /**
-   * Updates hour.
+   * Updates time.
    */
-  updateHour () {
+  updateTime () {
     const hoursClock = this.elements.hoursClock
     const minutesClock = this.elements.minutesClock
 
@@ -91,23 +147,23 @@ export default class TimePicker extends Component {
 
   /**
    * Selects clock.
-   * @param {HoursClock | MinutesClock}
+   * @param {Boolean} select hours clock
    */
-  selectClock (clock) {
-    if (this.actualClock !== clock && this.canSelectClock) {
-      this.actualClock = clock
+  selectClock (selectHoursClock) {
+    const hoursClock = this.elements.hoursClock
+    const minutesClock = this.elements.minutesClock
 
-      const hoursClock = this.elements.hoursClock
-      const minutesClock = this.elements.minutesClock
+    const clock = (selectHoursClock) ? hoursClock : minutesClock
 
-      const isMinutesClock = (clock === this.elements.minutesClock)
+    if (this.actualClock !== clock && this.canSelectClock) {
+      this.actualClock = clock
 
-      this.toggleClock(false, (isMinutesClock) ? hoursClock : minutesClock)
+      this.toggleClock(false, (selectHoursClock) ? minutesClock : hoursClock)
       this.canSelectClock = false
 
       const self = this
       setTimeout(function () {
-        self.toggleClock(true, (isMinutesClock) ? minutesClock : hoursClock)
+        self.toggleClock(true, (selectHoursClock) ? hoursClock : minutesClock)
 
         setTimeout(function () {
           self.canSelectClock = true
@@ -117,8 +173,8 @@ export default class TimePicker extends Component {
       const hourDisplay = this.elements.hour
       const minutesDisplay = this.elements.minutes
 
-      this.select(false, (isMinutesClock ? hourDisplay : minutesDisplay))
-      this.select(true, (isMinutesClock ? minutesDisplay : hourDisplay))
+      this.select(false, (selectHoursClock ? minutesDisplay : hourDisplay))
+      this.select(true, (selectHoursClock ? hourDisplay : minutesDisplay))
     }
   }
 
@@ -157,24 +213,24 @@ export default class TimePicker extends Component {
 
   /**
    * Selects time. (AM, PM)
-   * @param {DOMElement}
+   * @param {Boolean} select AM
    */
-  selectTime (element) {
+  selectTime (selectAM) {
     const am = this.elements.am
     const pm = this.elements.pm
 
-    this.isAM = (element === am)
+    this.select(false, (selectAM) ? pm : am)
+    this.select(true, (selectAM) ? am : pm)
 
-    this.select(false, (this.isAM) ? pm : am)
-    this.select(true, (this.isAM) ? am : pm)
+    this.isAM = selectAM
   }
 
   /**
    * Calculates ticks position.
-   * @param {Int} circle radius (Optional)
-   * @param {Int} circle size (Optional)
-   * @param {Int} tick size (Optional)
-   * @param {Int} ticks count (Optional)
+   * @param {Int} circle radius (optional)
+   * @param {Int} circle size (optional)
+   * @param {Int} tick size (optional)
+   * @param {Int} ticks count (optional)
    * @return {Object} positions
    */
   calculateTickPosition (radius = 108, size = 270, tickSize = 40, length = 12) {
@@ -197,18 +253,19 @@ export default class TimePicker extends Component {
   /**
    * Selects tick.
    * @param {Tick}
+   * @param {HoursClock | MinutesClock} clock (optional)
    */
-  selectTick (tick) {
-    const line = this.actualClock.elements.line
-    const rotate = this.actualClock.getRotate(tick.props.number)
+  selectTick (tick, clock = this.actualClock) {
+    const line = clock.elements.line
+    const rotate = clock.getRotate(tick.props.number)
 
     line.style.transform = 'translateY(-75%) rotate(' + rotate + 'deg)'
 
     tick.getRoot().classList.add('selected')
 
-    this.deselectTick(this.actualClock.selectedTick)
-    this.actualClock.selectedTick = tick
-    this.updateHour()
+    this.deselectTick(clock.selectedTick)
+    clock.selectedTick = tick
+    this.updateTime()
   }
 
   /**
@@ -245,20 +302,20 @@ export default class TimePicker extends Component {
         <div className='material-time-picker' ref='root'>
           <div className='date-display'>
             <div className='date-container'>
-              <span className='hour selected' ref='hour' onClick={() => this.selectClock(this.elements.hoursClock)}>
+              <span className='hour selected' ref='hour' onClick={() => this.selectClock(true)}>
                 6
               </span>
               <span className='separate'>
                 :
               </span>
-              <span className='minutes' ref='minutes' onClick={() => this.selectClock(this.elements.minutesClock)}>
+              <span className='minutes' ref='minutes' onClick={() => this.selectClock(false)}>
                 30
               </span>
               <div className='am-pm-container'>
-                <div className='item selected' ref='am' onClick={() => this.selectTime(this.elements.am)}>
+                <div className='item selected' ref='am' onClick={() => this.selectTime(true)}>
                   AM
                 </div>
-                <div className='item' ref='pm' onClick={() => this.selectTime(this.elements.pm)}>
+                <div className='item' ref='pm' onClick={() => this.selectTime(false)}>
                   PM
                 </div>
               </div>
@@ -284,13 +341,11 @@ export default class TimePicker extends Component {
     if (props.darkOpacity == null) props.darkOpacity = 0.7
     if (props.actionButtonRippleStyle == null) {
       props.actionButtonRippleStyle = {
-        backgroundColor: '#26a69a',
+        backgroundColor: '#3f51b5',
         opacity: 0.3
       }
     }
 
-    this.toggle(true)
-
     this.actualClock = this.elements.hoursClock
 
     const buttons = (

3-panel/src/imports/materialdesign/components/TimePicker/style.scss

@@ -16,7 +16,7 @@
   & .date-display {
     width: 196px;
     height: 100%;
-    background-color: #26a69a;
+    background-color: #3f51b5;
     position: absolute;
     left: 0;
     top: 0;
@@ -84,7 +84,7 @@
       background-color: #eee;
 
       & .dot {
-        background-color: #26a69a;
+        background-color: #3f51b5;
         width: 8px;
         height: 8px;
         border-radius: 100%;
@@ -93,7 +93,7 @@
       }
 
       & .line {
-        background-color: #26a69a;
+        background-color: #3f51b5;
         height: calc(50% - 28px);
         width: 2px;
         position: absolute;
@@ -121,7 +121,7 @@
         }
 
         &.selected {
-          background-color: #26a69a;
+          background-color: #3f51b5;
           color: #fff;
         }
       }
@@ -146,7 +146,7 @@
         float: right;
         margin-right: 8px;
         background-color: transparent;
-        color: #26a69a;
+        color: #3f51b5;
         min-width: 0px;
         padding-left: 18px;
         padding-right: 18px;

3-panel/src/index.js

@@ -1,4 +1,4 @@
-import App from './views/test'
+import App from './views/App'
 import UI from './helpers/UI'
 
 import './styles.scss'

3-panel/src/views/App/index.js

@@ -30,6 +30,7 @@ import Menu from './../../imports/materialdesign/components/Menu'
 import Preloader from './../../imports/materialdesign/components/Preloader'
 import Snackbar from './../../imports/materialdesign/components/Snackbar'
 import Tooltip from './../../imports/materialdesign/components/Tooltip'
+import TimePicker from './../../imports/materialdesign/components/TimePicker'
 
 export default class App extends Component {
   beforeRender () {
@@ -427,6 +428,7 @@ export default class App extends Component {
         <DeletePicturesDialog ref='deletePicturesDialog' />
         <AddLessonDialog ref='addLessonDialog' />
         <ErrorDialog ref='errorDialog' />
+        <TimePicker ref='timePicker' onConfirm={(hour, minutes, isAM) => { this.getLessonsPlanPage().onTimePickerConfirm(hour, minutes, isAM) }} />
         <Snackbar ref='deletePostsSnackbar' text='Pomyślnie usunięto posty' />
         <Snackbar ref='deletePostSnackbar' text='Pomyślnie usunięto post' />
         <Snackbar ref='addPostSnackbar' text='Pomyślnie dodano post' />

3-panel/src/views/Pages/LessonsPlan/components/Day/index.js

@@ -110,7 +110,6 @@ export default class Day extends Component {
    * @param {Event}
    */
   onWindowMouseUp = (e) => {
-    console.log('window mouse up event')
     this.toggleMovingMode(false)
   }
 

3-panel/src/views/Pages/LessonsPlan/components/LessonHours/components/Item/index.js

@@ -1,9 +1,6 @@
 import Component from '../../../../../../../helpers/Component'
 
-import TextField from '../../../../../../../imports/materialdesign/components/TextField'
-
 export default class Item extends Component {
-
   /**
    * Gets root.
    * @return {DOMElement} root
@@ -12,16 +9,41 @@ export default class Item extends Component {
     return this.elements.root
   }
 
+  editStart = (e) => {
+    const app = window.app
+    const timePicker = app.elements.timePicker
+
+    const time = this.props.start
+    const split = time.split('.')
+    let hour = split[0]
+    const minutes = split[1]
+
+    if (hour > 12) {
+      hour -= 12
+      timePicker.selectTime(false)
+    } else if (!timePicker.isAM) {
+      timePicker.selectTime(true)
+    }
+
+    timePicker.setTime(hour, minutes)
+    timePicker.toggle(true, false)
+  }
+
   render () {
     return (
       <div className='item'>
-        <TextField ref='start' type='datetime' />
-        <TextField ref='finish' type='number' />
+        <div className='start' ref='start' onClick={this.editStart} />
+        <div className='finish' ref='finish' />
       </div>
     )
   }
 
   afterRender () {
-    this.props.getLessonHours().items.push(this)
+    const props = this.props
+
+    props.getLessonHours().items.push(this)
+
+    this.elements.start.innerHTML = props.start
+    this.elements.finish.innerHTML = props.finish
   }
 }

3-panel/src/views/Pages/LessonsPlan/components/LessonHours/index.js

@@ -25,13 +25,6 @@ export default class Day extends Component {
     for (var i = 0; i < lessonsPlanPage.lessonsStart.length; i++) {
       this.addItem(lessonsPlanPage.lessonsStart[i], lessonsPlanPage.lessonsFinish[i])
     }
-
-    for (var i = 0; i < this.items.length; i++) {
-      const item = this.items[i]
-
-      item.elements.start.setValue(lessonsPlanPage.lessonsStart[i], false)
-      item.elements.finish.setValue(lessonsPlanPage.lessonsFinish[i], false)
-    }
   }
 
   addItem (start, finish) {