Commit 8d52a309 authored by Svein Olav Styve's avatar Svein Olav Styve

#20 Add history navigation buttons

parent e054c562
......@@ -38,11 +38,11 @@ class App extends React.Component {
};
} else {
this.state = {
artwork: 0,
artwork: Math.floor((Math.random() * 4)),
categorySelections: {
textCat: 0,
imageCat: 0,
audioCat: 0,
textCat: Math.floor((Math.random() * 3)),
imageCat: Math.floor((Math.random() * 3)),
audioCat: Math.floor((Math.random() * 3)),
},
sessionHistory: [],
sessionCounter: 0
......@@ -50,6 +50,10 @@ class App extends React.Component {
}
}
componentDidMount() {
this.updateSession();
}
checkForEmptyLocalStorage() {
return !(localStorage.getItem('Text') === null || localStorage.getItem('Image') === null ||
localStorage.getItem('Audio') === null || localStorage.getItem('artwork') === null);
......@@ -82,7 +86,10 @@ class App extends React.Component {
});
};
sessionClicked = data => {
sessionClicked = (data, index) => {
this.setState({
sessionCounter: index + 1
})
let dataAsArray = data.split(";");
this.setState({
artwork: (parseInt(dataAsArray[0].split(":").pop()) - 1),
......@@ -97,7 +104,12 @@ class App extends React.Component {
updateSession = () => {
let newCombination = JSON.parse(sessionStorage.getItem('combinationHistory'));
if (newCombination === null) {
console.log("###");
newCombination = [];
} else {
// Remove forward history if manually selecting new artwork or category
newCombination = newCombination.splice(0, this.state.sessionCounter);
}
newCombination.push(
this.state.sessionCounter + "/" +
......@@ -107,11 +119,47 @@ class App extends React.Component {
"Audio:" + (parseInt(this.state.categorySelections.audioCat) + 1)
);
sessionStorage.setItem('combinationHistory', JSON.stringify(newCombination));
this.setState({
this.setState((oldState) => ({
sessionHistory: JSON.parse(sessionStorage.getItem('combinationHistory')),
sessionCounter: (this.state.sessionCounter + 1)
});
sessionCounter: (oldState.sessionCounter + 1)
}));
};
sessionBack = () => {
if (this.state.sessionCounter <= 1) return;
this.setState(oldState => {
let dataAsArray = oldState.sessionHistory[this.state.sessionCounter - 2].split(";");
return {
sessionCounter: (oldState.sessionCounter - 1),
artwork: (parseInt(dataAsArray[0].split(":").pop()) - 1),
categorySelections: {
textCat: (parseInt(dataAsArray[1].split(":").pop()) - 1),
imageCat: (parseInt(dataAsArray[2].split(":").pop()) - 1),
audioCat: (parseInt(dataAsArray[3].split(":").pop()) - 1)
}
}
});
}
sessionFwd = () => {
if (this.state.sessionCounter >= this.state.sessionHistory.length) return;
this.setState(oldState => {
let dataAsArray = oldState.sessionHistory[this.state.sessionCounter].split(";");
return {
sessionCounter: (oldState.sessionCounter + 1),
artwork: (parseInt(dataAsArray[0].split(":").pop()) - 1),
categorySelections: {
textCat: (parseInt(dataAsArray[1].split(":").pop()) - 1),
imageCat: (parseInt(dataAsArray[2].split(":").pop()) - 1),
audioCat: (parseInt(dataAsArray[3].split(":").pop()) - 1)
}
}
});
}
handleArtworkChange(artworkId) {
if (this.state.artwork === artworkId) return;
......@@ -186,7 +234,12 @@ class App extends React.Component {
</div>
</div>
<FavoriteSection save={this.saveAsFavorite} open={this.openFavorite}/>
<SessionElement sessionHistory={sessionHistory} handler={this}/>
<SessionElement sessionHistory={sessionHistory}
sessionClicked={this.sessionClicked}
sessionIndex={this.state.sessionCounter}
backClicked={this.sessionBack}
fwdClicked={this.sessionFwd}
/>
</header>
</div>
);
......
import React from 'react';
import '../style/SessionElement.css';
import SessionNavigation from './SessionNavigation';
export default function SessionElement(props) {
let sessionHistory = [];
if (props.sessionHistory !== null) {
sessionHistory = props.sessionHistory.map((items) =>
<p key={items} onClick={() => props.handler.sessionClicked(items.split("/").pop())}>{items.replace(/;/g, " - ").replace(/:/g, ": ").split("/").pop()}</p>
sessionHistory = props.sessionHistory.map((items, i) =>
<p className={i === props.sessionIndex - 1 ? "selectedSessionItem" : ""} key={items} onClick={() => props.sessionClicked(items.split("/").pop(), i)}>{items.replace(/;/g, " - ").replace(/:/g, ": ").split("/").pop()}</p>
);
}
return (
<div className="sessionHolder">
<div>
<h4>Combination history</h4>
{sessionHistory}
<SessionNavigation sessionHistory={sessionHistory} sessionIndex={props.sessionIndex}
backClicked={props.backClicked} fwdClicked={props.fwdClicked} />
<div className="sessionHolder">
{sessionHistory}
</div>
</div>
);
......
import React from 'react';
import '../style/SessionNavigation.css';
export default function SessionNavigation(props) {
let navBackActive = props.sessionIndex > 1 ? "" : "inactive";
let navFwdActive = props.sessionIndex <= (props.sessionHistory.length-1) ? "" : "inactive";
return (
<div className="sessionNavButtons">
<div className={"navBtn " + navBackActive} onClick={props.backClicked}> &larr; </div>
<div className={"navBtn " + navFwdActive} onClick={props.fwdClicked}> &rarr; </div>
</div>
);
}
\ No newline at end of file
......@@ -5,4 +5,10 @@
.sessionHolder p:hover {
cursor: pointer;
}
\ No newline at end of file
}
.sessionHolder > .selectedSessionItem {
background-color: #eee;
border-radius: 8px;
padding: 2px;
}
.sessionNavButtons > .navBtn {
display: inline-block;
background-color: #ddd;
border: 1px solid #555;
border-radius: 4px;
margin: 6px;
padding: 0px 8px 6px 8px;
font-size: 1.875em;
}
.sessionNavButtons > .navBtn:hover {
background-color: #bbb;
}
.sessionNavButtons > .navBtn:active {
background-color: #999;
}
.sessionNavButtons > .navBtn.inactive {
border: 1px solid #aaa;
background-color: #f8f8f8;
color: #aaa;
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment