Bryan/slider scss

src/app/components/Slider.jsx → src/app/components/MainSlider.jsx

@@ -2,8 +2,6 @@ import React, { Component } from 'react';
 import Slider from 'rc-slider';
 import Tooltip from 'rc-tooltip';
 
-import 'rc-slider/assets/index.css';
-import 'rc-tooltip/assets/bootstrap.css';
 
 const { Handle } = Slider;
 
@@ -32,7 +30,6 @@ class mainSlider extends Component {
 
   render() {
     return (
-      <div>
         <Slider
           min={0}
           max={this.props.snapshotLength - 1}
@@ -44,7 +41,6 @@ class mainSlider extends Component {
           }}
           handle={handle}
         />
-      </div>
     );
   }
 }

src/app/containers/MainContainer.jsx

@@ -17,6 +17,9 @@ class MainContainer extends Component {
     this.handleSendSnapshot = this.handleSendSnapshot.bind(this);
     this.handleJumpSnapshot = this.handleJumpSnapshot.bind(this);
     this.emptySnapshot = this.emptySnapshot.bind(this);
+    this.moveBackward = this.moveBackward.bind(this);
+    this.moveForward = this.moveForward.bind(this);
+    this.playForward = this.playForward.bind(this);
   }
 
   componentDidMount() {
@@ -41,14 +44,43 @@ class MainContainer extends Component {
     this.setState({ port });
   }
 
+  moveBackward(){
+    const { snapshots, snapshotIndex } = this.state;
+    if(snapshots.length>0 && snapshotIndex>0) {
+      const newIndex = snapshotIndex-1;
+      this.handleJumpSnapshot(newIndex);
+      this.setState({ snapshotIndex: newIndex });
+    }
+  }
+
+  moveForward(){
+    const { snapshots, snapshotIndex } = this.state;
+    if(snapshotIndex<snapshots.length-1){
+      const newIndex = snapshotIndex+1;
+      this.handleJumpSnapshot(newIndex);
+      this.setState({ snapshotIndex: newIndex });
+    }
+  }
+
+  playForward(){
+    var play = setInterval(()=>{
+      const { snapshots, snapshotIndex } = this.state;
+      if(snapshotIndex<snapshots.length-1){
+        const newIndex = snapshotIndex+1;
+        this.handleJumpSnapshot(newIndex);
+        this.setState({ snapshotIndex: newIndex });
+      } else clearInterval(play);
+    },1000)
+    play();
+  }
+
   emptySnapshot() {
     const { port } = this.state;
     this.setState({ snapshots: [], snapshotIndex: 0 });
     port.postMessage({ action: 'emptySnap' });
   }
 
-  // change the snapshot index
-  // this will change the state shown in the state container but won't change the DOM
+  // change the snapshot index, this will change the state shown in the state container but won't change the DOM
   handleChangeSnapshot(snapshotIndex) {
     // snapshotIndex
     // --> 1. affects the action that is highlighted
@@ -111,6 +143,9 @@ class MainContainer extends Component {
           handleChangeSnapshot={this.handleChangeSnapshot}
           handleJumpSnapshot={this.handleJumpSnapshot}
           snapshotIndex={snapshotIndex}
+          moveBackward = {this.moveBackward}
+          moveForward = {this.moveForward}
+          playForward = {this.playForward}
         />
       </div>
     );

src/app/containers/TravelContainer.jsx

@@ -1,23 +1,34 @@
 import React, { Component } from 'react';
-import Slider from '../components/Slider';
+import MainSlider from '../components/MainSlider'
+
+
+
 
 class TravelContainer extends Component {
   constructor(props) {
     super(props);
   }
 
+
+
   render() {
     return (
-      <div>
-        <div className="travel-container">TravelContainer</div>
-        <Slider
-          className="travel-slider"
-          snapshotLength={this.props.snapshotsLength}
-          handleChangeSnapshot={this.props.handleChangeSnapshot}
+      <div className="travel-container">
+        <div className="play-button" onClick={this.props.playForward}>
+            play
+        </div>
+        <MainSlider
+          snapshotLength = {this.props.snapshotsLength} 
+          handleChangeSnapshot = {this.props.handleChangeSnapshot}
+          snapshotIndex = {this.props.snapshotIndex}
           handleJumpSnapshot={this.props.handleJumpSnapshot}
-          snapshotIndex={this.props.snapshotIndex}
         />
-        {`travelContainer snapshotIndex ${this.props.snapshotIndex}`}
+        <div className="backward-button" onClick={this.props.moveBackward}>
+          {'<'}
+        </div>
+        <div className="forward-button" onClick={this.props.moveForward}>
+          {'>'}
+        </div>
       </div>
     );
   }

src/app/styles/components/_buttons.scss

@@ -16,6 +16,24 @@
   background-color: $highlight-color;
 }
 
+.play-button {
+  @extend %button-shared;
+  width: 60px;
+  margin: 10px;
+}
+
+.backward-button {
+  @extend %button-shared;
+  width: 30px;
+  margin: 7px;
+}
+
+.forward-button {
+  @extend %button-shared;
+  width: 30px;
+  margin: 7px;
+}
+
 %button-shared {
   display: flex;
   justify-content: center;