UNLOZE/projects-jenz
10
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

saving some updates

Browse Source
This commit is contained in:
jenzur
2019-07-10 00:47:24 +02:00
parent f126440c11
commit 9232830451
14 changed files with 682 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files
RaceTimer/racetimer_react/src/MapBoard/MapBoard.js
+54 -20
View File
@@ -1,48 +1,82 @@
import React from 'react';
import Facade from '../Datafacade/datafacade';
import { NavLink } from 'react-router-dom';
import Loader from 'react-loader-spinner';
import { usePromiseTracker } from "react-promise-tracker";
import '../css/style.css';
const LoadingIndicator = props => {
const { promiseInProgress } = usePromiseTracker();
return promiseInProgress &&
<div
style={{
width: "100%",
height: "100",
display: "flex",
justifyContent: "center",
alignItems: "center"
}}
>
<Loader type="TailSpin" color="#2BAD60" height="100" width="100" />
</div>
};
class MapBoards extends React.Component {
constructor(props) {
super(props)
this.state = {
maps: []
maps: [],
breakload: false,
};
}
componentWillMount = async () => {
const maps = await Facade.getAllMapsFromCache();
this.setState({ breakload: false })
const maps = await Facade.getMapCountFromCache();
this.setState({ maps });
this.setState({ breakload: true })
};
render() {
return (
<React.Fragment>
<div className="alert alert-primary" >
<div id='containerMaps'>
<div>
<NavLink to={'/leaderboard/'}>
<h3> <strong className="col-lg-1 col-centered" /> Leaderboard<br /> </h3>
</NavLink>
</div>
</div>
</div>
<br />
<br />
<div className="container mm" style={{ marginTop: "85px" }}>
<div style={{
position: 'absolute', left: '50%', top: '30%'
}}>
<NavLink to={'/leaderboard/'}>
<h3> <strong class="col-lg-1 col-centered" /> leaderboard<br /> </h3>
</NavLink>
<br />
<br />
<div className="row">
{this.state.maps.map(e => (
<div>
<NavLink to={'/map/' + e.mapname + "/" + e.mapstage}>
<strong class="col-lg-1 col-centered" /> Map: {e.mapname}<br />
<strong class="col-lg-1 col-centered" /> Stage: {e.mapstage}<br />
<br />
<br />
</NavLink>
<div className="item" key={"mapdivs/" + e.mapname + "/" + e.mapstage}>
<div className="box_grid">
<li key={e.mapname + "/" + e.mapstage} id={"maps/" + e.mapname + "/" + e.mapstage}>
<div className="alert alert-primary" >
<NavLink to={'/map/' + e.mapname + "/" + e.mapstage}>
<strong className="col-lg-1 col-centered" /> Map: {e.mapname}<br />
<strong className="col-lg-1 col-centered" /> Stage: {e.mapstage}<br />
<br />
<br />
</NavLink>
</div>
</li>
</div>
</div>
))}
/</div>
</div>
{!this.state.breakload ? <h1>
Loading Maps <br /> <br /> <br /> <LoadingIndicator />
</h1> : ""}
</div>
</React.Fragment>
);
}
}
export default MapBoards;