From e139f9de8ab59adece48964f61c5837d7dc78de5 Mon Sep 17 00:00:00 2001 From: brandon <41245867+murphybrandon@users.noreply.github.com> Date: Wed, 6 Mar 2019 12:53:55 -0500 Subject: [PATCH 1/3] have scroll bar working --- src/app/components/App.jsx | 51 ++++++++++++++++--- src/app/components/DetailCards/DetailsNav.jsx | 9 +--- .../components/EventCards/EventCreator.jsx | 5 +- src/app/components/EventCards/FilterBar.jsx | 15 ++++++ src/app/components/EventCards/TimeTravel.jsx | 18 ++----- src/app/container/Details.jsx | 4 +- src/app/container/Events.jsx | 9 ---- src/app/container/TimeSlider.jsx | 33 ++++++++++++ src/app/data.jsx | 43 +++++++--------- src/app/index.html | 1 + src/app/style.css | 36 +++++++++++++ src/app/styles/Events.jsx | 25 ++++++--- src/app/styles/SplitPane.jsx | 12 ++--- src/app/styles/TimeSlider.jsx | 22 ++++++++ 14 files changed, 203 insertions(+), 80 deletions(-) create mode 100644 src/app/components/EventCards/FilterBar.jsx create mode 100644 src/app/container/TimeSlider.jsx create mode 100644 src/app/style.css create mode 100644 src/app/styles/TimeSlider.jsx diff --git a/src/app/components/App.jsx b/src/app/components/App.jsx index 4d23775..669d967 100644 --- a/src/app/components/App.jsx +++ b/src/app/components/App.jsx @@ -1,8 +1,12 @@ import React, { useContext, Component } from 'react'; import { createGlobalStyle } from 'styled-components'; +// data +import data from '../data.jsx' + // containers import SplitPane from '../container/SplitPane.jsx'; +import TimeSlider from '../container/TimeSlider.jsx'; // left pane = events, right pane = details import Events from '../container/Events.jsx'; @@ -30,7 +34,6 @@ const GlobalStyle = createGlobalStyle` } `; - class App extends Component { constructor(props) { super(props); @@ -39,15 +42,19 @@ class App extends Component { data: [], isPlaying: false, isRecording: false, + isSearching: false, + isPlayingIndex: 0, }; + this.port = null; - this.isPlayingIndex = 0; this.addActionToView = this.addActionToView.bind(this); this.toTheFuture = this.toTheFuture.bind(this); this.toThePast = this.toThePast.bind(this); this.setIsPlaying = this.setIsPlaying.bind(this); this.setIsRecording = this.setIsRecording.bind(this); this.actionInPlay = this.actionInPlay.bind(this); + this.handleBarChange = this.handleBarChange.bind(this); + this.searchChange = this.searchChange.bind(this); } componentDidMount() { @@ -71,10 +78,11 @@ class App extends Component { // functionality to change 'play' button to 'stop' setIsPlaying() { - if (this.isPlayingIndex === this.state.data.length - 1) { - this.isPlayingIndex = 0; + if (this.state.isPlayingIndex === this.state.data.length - 1) { + this.state.isPlayingIndex = 0; } + console.log('isplaying') let { isPlaying } = this.state; isPlaying = !isPlaying; this.setState({ isPlaying }); @@ -121,6 +129,25 @@ class App extends Component { }); } + // filter search bar results + // *** NOT FINISHED *** + searchChange(e) { + const { data } = this.state; + console.log(data); + } + + // time travel bar change + handleBarChange(e) { + const { data } = this.state; + const { id, action, state } = data[e.target.value]; + + this.setState({ + id, + action, + state, + isPlayingIndex: e.target.value, + }); + } // function to travel to the FUTURE toTheFuture() { @@ -141,6 +168,7 @@ class App extends Component { } render() { + console.log(this.state.isPlayingIndex); const { action, id, @@ -163,10 +191,6 @@ class App extends Component { addAction={this.addActionToView} toTheFuture={this.toTheFuture} toThePast={this.toThePast} - isPlaying={isPlaying} - isRecording={isRecording} - setIsPlaying={this.setIsPlaying} - setIsRecording={this.setIsRecording} activeEventId={id} /> )} @@ -179,6 +203,17 @@ class App extends Component { /> )} /> + ); } diff --git a/src/app/components/DetailCards/DetailsNav.jsx b/src/app/components/DetailCards/DetailsNav.jsx index 4f25a35..69cd774 100644 --- a/src/app/components/DetailCards/DetailsNav.jsx +++ b/src/app/components/DetailCards/DetailsNav.jsx @@ -8,15 +8,10 @@ import { Buttons, Button, DetailsNavWrapper, Ul } from '../../styles/Nav.jsx'; export default function RightNav(props) { return ( - //make this nav bar with react router - //sync it so each active link displays appropriate div - //with info - - //style pages so inputted information is styled correctly <> - + @@ -28,5 +23,5 @@ export default function RightNav(props) { - ) + ); } diff --git a/src/app/components/EventCards/EventCreator.jsx b/src/app/components/EventCards/EventCreator.jsx index 3ea8355..108d2c2 100644 --- a/src/app/components/EventCards/EventCreator.jsx +++ b/src/app/components/EventCards/EventCreator.jsx @@ -9,9 +9,8 @@ export default function EventCreator(props) { } = props; return ( - ☰ - {action} - {actionTime || '00:00:01'} + ☰{action} + {actionTime || '00:00:01'} ); diff --git a/src/app/components/EventCards/FilterBar.jsx b/src/app/components/EventCards/FilterBar.jsx new file mode 100644 index 0000000..347bd7f --- /dev/null +++ b/src/app/components/EventCards/FilterBar.jsx @@ -0,0 +1,15 @@ +import React from 'react'; + +export default function FilterBar(props) { + const { + searchChange, + } = props; + + return ( + + ); +} diff --git a/src/app/components/EventCards/TimeTravel.jsx b/src/app/components/EventCards/TimeTravel.jsx index 6fae855..d044257 100644 --- a/src/app/components/EventCards/TimeTravel.jsx +++ b/src/app/components/EventCards/TimeTravel.jsx @@ -1,29 +1,21 @@ import React from 'react'; // styled component -import { TimeTravelContainer, EventTimeDiv } from '../../styles/Events.jsx'; +import { PreviousNextWrapper, PrevNextButton } from '../../styles/Events.jsx'; export default function TimeTavel(props) { const { toTheFuture, toThePast, - setIsRecording, - isRecording, - setIsPlaying, - isPlaying, } = props; return ( <> - - {isRecording ? 'PAUSE' : 'RECORD'} - {isPlaying ? 'STOP' : 'PLAY' } - - - PREVIOUS - NEXT - + + PREVIOUS + NEXT + ); } diff --git a/src/app/container/Details.jsx b/src/app/container/Details.jsx index 28800bb..b249d76 100644 --- a/src/app/container/Details.jsx +++ b/src/app/container/Details.jsx @@ -26,10 +26,10 @@ export default function Details(props) { <> - {/* routing components and rendering them with props */} } /> @@ -35,10 +30,6 @@ class Events extends Component { ); diff --git a/src/app/container/TimeSlider.jsx b/src/app/container/TimeSlider.jsx new file mode 100644 index 0000000..e7924c0 --- /dev/null +++ b/src/app/container/TimeSlider.jsx @@ -0,0 +1,33 @@ +import React from 'react'; + +// styled component + +import { TimeTravelContainer, EventTimeDiv } from '../../app/styles/Events.jsx'; +import { SliderWrapper, Button } from '../styles/TimeSlider.jsx' + +const TimeSlider = (props) => { + const { + toTheFuture, + toThePast, + setIsRecording, + isRecording, + setIsPlaying, + isPlaying, + isPlayingIndex, + data, + handleBarChange, + } = props; + + return ( + <> + + + + + + + ); +}; + +export default TimeSlider; diff --git a/src/app/data.jsx b/src/app/data.jsx index 68e06e3..5214cf3 100644 --- a/src/app/data.jsx +++ b/src/app/data.jsx @@ -1,7 +1,7 @@ export default [ { id: 1234, - action: '@@INIT', + action: { type: 'INIT', payload: '' }, state: { totalMarkets: 0, totalCards: 0, @@ -12,20 +12,18 @@ export default [ }, { id: 1235, - action: 'SET_NEW_LOCATION', - payload: 'nyc', + action: { type: 'SET_NEW_LOCATION', payload: 'nyc' }, state: { totalMarkets: 0, totalCards: 0, marketList: [], lastMarketId: 10000, - newLocation: 'nyc' - } + newLocation: 'nyc', + }, }, { id: 1236, - action: 'ADD_MARKET', - payload: 'nyc', + action: { type: 'ADD_MARKET', payload: 'nyc' }, state: { totalMarkets: 1, totalCards: 0, @@ -34,15 +32,15 @@ export default [ location: 'nyc', cards: 0, marketId: 10001 - } + }, ], lastMarketId: 10001, - newLocation: '' - } + newLocation: '', + }, }, { id: 1237, - action: 'SET_NEW_LOCATION', + action: { type: 'SET_NEW_LOCATION', payload: 'la' }, payload: 'la', state: { totalMarkets: 1, @@ -51,17 +49,16 @@ export default [ { location: 'nyc', cards: 0, - marketId: 10001 - } + marketId: 10001, + }, ], lastMarketId: 10001, - newLocation: 'la' - } + newLocation: 'la', + }, }, { id: 1238, - action: 'ADD_MARKET', - payload: 'la', + action: { type: 'ADD_MARKET', payload: 'boston' }, state: { totalMarkets: 2, totalCards: 0, @@ -83,8 +80,7 @@ export default [ }, { id: 1239, - action: 'ADD_CARD', - payload: 'marketId: 10002', + action: { type: 'ADD_CARD', payload: 'marketId: 10002' }, state: { totalMarkets: 2, totalCards: 1, @@ -106,8 +102,7 @@ export default [ }, { id: 1240, - action: 'ADD_CARD', - payload: 'marketID: 10002', + action: { type: 'ADD_CARD', payload: 'marketId: 10002' }, state: { totalMarkets: 2, totalCards: 2, @@ -129,8 +124,7 @@ export default [ }, { id: 1249, - action: 'ADD_CARD', - payload: 'marketID: 10003', + action: { type: 'ADD_CARD', payload: 'marketId: 10003' }, state: { totalMarkets: 2, totalCards: 2, @@ -157,8 +151,7 @@ export default [ }, { id: 1241, - action: 'DELETE_CARD', - payload: 'marketID: 10002', + action: { type: 'DELETE_CARD', payload: 'marketId: 10002' }, state: { totalMarkets: 2, totalCards: 1, diff --git a/src/app/index.html b/src/app/index.html index 24eadc2..93e3bd3 100644 --- a/src/app/index.html +++ b/src/app/index.html @@ -3,6 +3,7 @@ React Rewind + diff --git a/src/app/style.css b/src/app/style.css new file mode 100644 index 0000000..0295f31 --- /dev/null +++ b/src/app/style.css @@ -0,0 +1,36 @@ +input[type=range] { + height: 25px; + -webkit-appearance: none; + margin: 10px 0; + width: 70%; + border-radius: 50px; + background-color: transparent; +} +input[type=range]:focus { + outline: none; +} +/* bar */ +input[type=range]::-webkit-slider-runnable-track { + width: 100%; + height: 10px; + cursor: pointer; + animate: 0.2s; + box-shadow: 0px 0px 0px #000000; + background: white; + border-radius: 10px; + border: 0px solid #000000; +} +input[type=range]::-webkit-slider-thumb { + box-shadow: 0px 0px 0px #000000; + border: 0px solid rgb(123, 123, 123); + height: 28px; + width: 28px; + border-radius: 25px; + background: rgb(230, 230, 230); + cursor: pointer; + -webkit-appearance: none; + margin-top: -10px; +} +input[type=range]:focus::-webkit-slider-runnable-track { + background: rgb(255, 255, 255); +} \ No newline at end of file diff --git a/src/app/styles/Events.jsx b/src/app/styles/Events.jsx index 123433a..cd33569 100644 --- a/src/app/styles/Events.jsx +++ b/src/app/styles/Events.jsx @@ -1,6 +1,6 @@ import styled from 'styled-components'; -// formats the events display +// the entire events display wrapper export const EventsWrapper = styled.div` min-height: 100px; max-height: 200px; @@ -8,9 +8,9 @@ export const EventsWrapper = styled.div` border-bottom: 1px solid white; `; -// events actions bar +// single event card export const EventCard = styled.div` - background-color: ${props => props.selectedEvent === 'false' ? 'none' : "#484C54"}; + background-color: ${props => props.selectedEvent === 'false' ? 'none' : "#4F5A65"}; display: flex; justify-content: space-between; align-items: center; @@ -27,8 +27,7 @@ export const EventCard = styled.div` } `; - - +// time card on event card export const EventTimeDiv = styled.div` width: 25%; text-align: center; @@ -37,8 +36,20 @@ export const EventTimeDiv = styled.div` border-radius: 5px; `; -export const TimeTravelContainer = styled.div` - padding-top: 5%; +// wrapper for previous and next buttons +export const PreviousNextWrapper = styled.div` + padding-top: 4%; + padding-bottom: 4%; display: flex; justify-content: space-evenly; `; + +// button for previous and next (copied from EventTimeDiv for trial) +export const PrevNextButton = styled.div` + cursor: pointer; + width: 25%; + text-align: center; + background-color: ${props => props.selectedEvent === 'false' ? '#484C54' : "#3C444F"}; + color: ${props => props.selectedEvent === 'false' ? 'white' : "white"}; + border-radius: 5px; +`; diff --git a/src/app/styles/SplitPane.jsx b/src/app/styles/SplitPane.jsx index 20f3b67..c2f47df 100644 --- a/src/app/styles/SplitPane.jsx +++ b/src/app/styles/SplitPane.jsx @@ -1,20 +1,19 @@ import styled from 'styled-components'; -export const FullBackground = styled.div` - height: 100%; - background-color: blue; -`; - +// wrapper for total split pane views export const PaneWrapper = styled.div` font-family: "arial"; font-size: .80em; color: #E8E8F4; background-color: #2A2E3A; - height: 100vh; + /* CHANGED HEIGHT FROM 100VH */ + height: 100%; + /* margin-bottom: 30px; */ display: flex; justify-content: space-around; `; +// wrapper for events (left hand side) export const LeftPane = styled.div` background-color: #2A2E3A; border-right: 3px double #484C54; @@ -22,6 +21,7 @@ export const LeftPane = styled.div` width: 43%; `; +// wrapper for details (right hand side) export const RightPane = styled.div` color: white; background-color: #2A2E3A; diff --git a/src/app/styles/TimeSlider.jsx b/src/app/styles/TimeSlider.jsx new file mode 100644 index 0000000..bc077a2 --- /dev/null +++ b/src/app/styles/TimeSlider.jsx @@ -0,0 +1,22 @@ +import styled from 'styled-components'; + +export const SliderWrapper = styled.div` + display: flex; + height: 60px; + justify-content: space-evenly; + align-items: center; + border-top: 1px solid #191c23; + width: 100%; + background-color: #3C444F; +`; + +export const Button = styled.div` + display: flex; + align-content: center; + justify-content: center; + font-size: 20px; + width: 40px; + color: white; + font-family: 'arial'; + +`; \ No newline at end of file From 173a31cf6e3a00e46b0d03a541a34049fa50777c Mon Sep 17 00:00:00 2001 From: Victor Varaschin Date: Wed, 6 Mar 2019 13:14:45 -0500 Subject: [PATCH 2/3] Delete data.jsx --- src/app/data.jsx | 174 ----------------------------------------------- 1 file changed, 174 deletions(-) delete mode 100644 src/app/data.jsx diff --git a/src/app/data.jsx b/src/app/data.jsx deleted file mode 100644 index 5214cf3..0000000 --- a/src/app/data.jsx +++ /dev/null @@ -1,174 +0,0 @@ -export default [ - { - id: 1234, - action: { type: 'INIT', payload: '' }, - state: { - totalMarkets: 0, - totalCards: 0, - marketList: [], - lastMarketId: 10000, - newLocation: '' - } - }, - { - id: 1235, - action: { type: 'SET_NEW_LOCATION', payload: 'nyc' }, - state: { - totalMarkets: 0, - totalCards: 0, - marketList: [], - lastMarketId: 10000, - newLocation: 'nyc', - }, - }, - { - id: 1236, - action: { type: 'ADD_MARKET', payload: 'nyc' }, - state: { - totalMarkets: 1, - totalCards: 0, - marketList: [ - { - location: 'nyc', - cards: 0, - marketId: 10001 - }, - ], - lastMarketId: 10001, - newLocation: '', - }, - }, - { - id: 1237, - action: { type: 'SET_NEW_LOCATION', payload: 'la' }, - payload: 'la', - state: { - totalMarkets: 1, - totalCards: 0, - marketList: [ - { - location: 'nyc', - cards: 0, - marketId: 10001, - }, - ], - lastMarketId: 10001, - newLocation: 'la', - }, - }, - { - id: 1238, - action: { type: 'ADD_MARKET', payload: 'boston' }, - state: { - totalMarkets: 2, - totalCards: 0, - marketList: [ - { - location: 'nyc', - cards: 0, - marketId: 10001 - }, - { - location: 'la', - cards: 0, - marketId: 10002 - } - ], - lastMarketId: 10002, - newLocation: '' - } - }, - { - id: 1239, - action: { type: 'ADD_CARD', payload: 'marketId: 10002' }, - state: { - totalMarkets: 2, - totalCards: 1, - marketList: [ - { - location: 'nyc', - cards: 0, - marketId: 10001 - }, - { - location: 'la', - cards: 1, - marketId: 10002 - } - ], - lastMarketId: 10002, - newLocation: '' - } - }, - { - id: 1240, - action: { type: 'ADD_CARD', payload: 'marketId: 10002' }, - state: { - totalMarkets: 2, - totalCards: 2, - marketList: [ - { - location: 'nyc', - cards: 0, - marketId: 10001 - }, - { - location: 'la', - cards: 2, - marketId: 10002 - } - ], - lastMarketId: 10002, - newLocation: '' - } - }, - { - id: 1249, - action: { type: 'ADD_CARD', payload: 'marketId: 10003' }, - state: { - totalMarkets: 2, - totalCards: 2, - marketList: [ - { - location: 'nyc', - cards: 0, - marketId: 10001 - }, - { - location: 'la', - cards: 2, - marketId: 10002 - }, - { - location: 'boston', - cards: 2, - marketId: 10002 - } - ], - lastMarketId: 10002, - newLocation: '' - } - }, - { - id: 1241, - action: { type: 'DELETE_CARD', payload: 'marketId: 10002' }, - state: { - totalMarkets: 2, - totalCards: 1, - marketList: [ - { - location: 'nyc', - cards: 0, - marketId: 10001 - }, - { - location: 'la', - cards: 1, - marketId: 10002 - } - ], - lastMarketId: 10002, - newLocation: '' - } - } -]; \ No newline at end of file From 3e41dc240f803dd61f938bdc65048aed6b38fbf5 Mon Sep 17 00:00:00 2001 From: Victor Varaschin Date: Wed, 6 Mar 2019 13:15:48 -0500 Subject: [PATCH 3/3] Update App.jsx --- src/app/components/App.jsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/app/components/App.jsx b/src/app/components/App.jsx index 669d967..4268d6d 100644 --- a/src/app/components/App.jsx +++ b/src/app/components/App.jsx @@ -1,9 +1,6 @@ import React, { useContext, Component } from 'react'; import { createGlobalStyle } from 'styled-components'; -// data -import data from '../data.jsx' - // containers import SplitPane from '../container/SplitPane.jsx'; import TimeSlider from '../container/TimeSlider.jsx';