UNLOZE/projects-jenz
9
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/Datafacade/datafacade.js
+67 -24
View File
@@ -1,9 +1,11 @@
import React from 'react';
import { trackPromise } from 'react-promise-tracker';
const URLleaderboard = "http://localhost:8080/racetimer_endpoints-1.0/api/timers/leaderboard";
const URLPlayer = "http://localhost:8080/racetimer_endpoints-1.0/api/timers/player/";
const URLPlayerMaps = "http://localhost:8080/racetimer_endpoints-1.0/api/timers/player/maps/";
const URLMaps = "http://localhost:8080/racetimer_endpoints-1.0/api/timers/map/";
const URLAllMaps = "http://localhost:8080/racetimer_endpoints-1.0/api/timers/allmaps";
const URLMapsSize = "http://localhost:8080/racetimer_endpoints-1.0/api/timers/mapsizecache";
function handleHttpErrors(res) {
if (!res.ok) {
@@ -20,8 +22,6 @@ class DataFacade extends React.Component {
};
}
getLeaderBoardFromCache = async (incrementer) => {
const CachedTime = JSON.parse(localStorage.getItem("leaderboardTimer"));
const timeExpired = CachedTime ? Date.now() - CachedTime : 0;
@@ -36,22 +36,27 @@ class DataFacade extends React.Component {
const cachedLeaderBoard = JSON.parse(leaderBoardData);
return cachedLeaderBoard;
} else {
const players = await fetch(URLleaderboard + "/" + incrementer).then(handleHttpErrors);
const players = await trackPromise(fetch(URLleaderboard + "/" + incrementer).then(handleHttpErrors));
if (leaderBoardData !== null) {
const cachedLeaderBoard = JSON.parse(leaderBoardData);
if (players === null) {
return cachedLeaderBoard;
}
players.map(e => (
cachedLeaderBoard.push(e)
))
localStorage.setItem("leaderboard", JSON.stringify(cachedLeaderBoard));
return cachedLeaderBoard;
} else {
} else if (incrementer === 0) {
localStorage.setItem("leaderboard", JSON.stringify(players));
return players;
}
}
};
}
getAllMapsFromCache = async () => {
getMapCountFromCache = async () => {
const CachedTime = JSON.parse(localStorage.getItem("allmapsTimer"));
const timeExpired = CachedTime ? Date.now() - CachedTime : 0;
//30 mins
@@ -64,11 +69,14 @@ class DataFacade extends React.Component {
const cachedAllMaps = JSON.parse(allMapsData);
return cachedAllMaps;
} else {
const allMaps = await fetch(URLAllMaps).then(handleHttpErrors);
localStorage.setItem("allmaps", JSON.stringify(allMaps));
return allMaps;
const maps = await trackPromise(fetch(URLAllMaps).then(handleHttpErrors));
localStorage.setItem("allmaps", JSON.stringify(maps));
return maps;
}
};
}
getPlayerFromCache = async (steamID) => {
const CachedTime = JSON.parse(localStorage.getItem("initialCachedplayers" + steamID));
@@ -84,13 +92,13 @@ class DataFacade extends React.Component {
const player = JSON.parse(playerData);
return player;
} else {
const player = await fetch(URLPlayer + steamID).then(handleHttpErrors);
const player = await trackPromise(fetch(URLPlayer + steamID).then(handleHttpErrors));
localStorage.setItem(storageString, JSON.stringify(player));
return player;
}
}
getPlayerTimesFromCache = async (steamID) => {
getPlayerTimesFromCache = async (steamID, incrementer) => {
const CachedTime = JSON.parse(localStorage.getItem("initialCachedplayersTimes" + steamID));
const timeExpired = CachedTime ? Date.now() - CachedTime : 0;
//30 mins
@@ -100,17 +108,45 @@ class DataFacade extends React.Component {
}
var storageString = "playertimes/" + steamID;
var playerTimesData = localStorage.getItem(storageString);
if (playerTimesData) {
if (incrementer === 0 && playerTimesData) {
const cachedPlayerTimes = JSON.parse(playerTimesData)
return cachedPlayerTimes;
} else {
const playertimes = await fetch(URLPlayerMaps + steamID).then(handleHttpErrors);
localStorage.setItem(storageString, JSON.stringify(playertimes));
return playertimes;
const playertimes = await trackPromise(fetch(URLPlayerMaps + steamID + "/" + incrementer).then(handleHttpErrors));
if (playerTimesData !== null) {
const cachedPlayerTimes = JSON.parse(playerTimesData);
playertimes.map(e => (
cachedPlayerTimes.push(e)
))
localStorage.setItem(storageString, JSON.stringify(cachedPlayerTimes));
return cachedPlayerTimes;
} else if (incrementer === 0) {
localStorage.setItem(storageString, JSON.stringify(playertimes));
return playertimes;
}
}
}
getMapTimesFromCache = async (mapname, stage) => {
getMapTimesFromCacheSize = async (mapname, stage) => {
const CachedTime = JSON.parse(localStorage.getItem("maptimessizecached" + mapname + stage));
const timeExpired = CachedTime ? Date.now() - CachedTime : 0;
//30 mins
if (!CachedTime || timeExpired > 30 * 60000) {
localStorage.setItem("maptimessizecached" + mapname + stage, JSON.stringify(Date.now()));
localStorage.removeItem("mapsizecache" + mapname + stage);
}
var maptimesCacheSizeData = localStorage.getItem("mapsizecache" + mapname + stage);
if (maptimesCacheSizeData) {
const cachedsize = JSON.parse(maptimesCacheSizeData);
return cachedsize;
} else {
const mapCacheSize = await fetch(URLMapsSize + "/" + mapname + "/" + stage).then(handleHttpErrors);
localStorage.setItem("mapsizecache" + mapname + stage, JSON.stringify(mapCacheSize));
return mapCacheSize;
}
}
getMapTimesFromCache = async (mapname, stage, incrementer) => {
const CachedTime = JSON.parse(localStorage.getItem("maptimescached" + mapname + stage));
const timeExpired = CachedTime ? Date.now() - CachedTime : 0;
//30 mins
@@ -119,16 +155,23 @@ class DataFacade extends React.Component {
localStorage.removeItem("map/" + mapname + stage);
}
var mapTimesData = localStorage.getItem("map/" + mapname + stage);
if (mapTimesData) {
if (incrementer === 0 && mapTimesData) {
const cachedMapTimes = JSON.parse(mapTimesData);
return cachedMapTimes;
} else {
const mapTimes = await fetch(URLMaps + mapname + "/" + stage).then(handleHttpErrors);
localStorage.setItem("map/" + mapname + stage, JSON.stringify(mapTimes));
return mapTimes;
const mapTimes = await trackPromise(fetch(URLMaps + mapname + "/" + stage + "/" + incrementer).then(handleHttpErrors));
if (mapTimesData !== null) {
const cachedMapTimes = JSON.parse(mapTimesData);
mapTimes.map(e => (
cachedMapTimes.push(e)
))
localStorage.setItem("map/" + mapname + stage, JSON.stringify(cachedMapTimes));
return cachedMapTimes;
} else if (incrementer === 0) {
localStorage.setItem("map/" + mapname + stage, JSON.stringify(mapTimes));
return mapTimes;
}
}
}
}
};
export default new DataFacade();
RaceTimer/racetimer_react/src/Leaderboard/Leaderboard.js
+37 -10
View File
@@ -1,6 +1,23 @@
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";
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 Leaderboard extends React.Component {
constructor(props) {
@@ -8,13 +25,17 @@ class Leaderboard extends React.Component {
this.state = {
players: [],
breakload: true,
scrollListener: {},
};
this.scrollListener = this.handleScroll.bind(this);
}
componentWillMount() {
this.scrollListener = window.addEventListener("scroll", e => {
this.handleScroll(e);
});
window.addEventListener('scroll', this.scrollListener);
}
componentWillUnmount() {
window.removeEventListener("scroll", this.scrollListener);
}
componentDidMount = async () => {
@@ -45,18 +66,23 @@ class Leaderboard extends React.Component {
this.setState({ breakload: true })
}
render() {
return (
<React.Fragment>
<div className="alert alert-primary" >
<div id='containerMaps'>
<div>
<NavLink to={'/mapboard/'}>
<h3> <strong className="col-lg-1 col-centered" /> MapBoard<br /> </h3>
</NavLink>
</div>
</div>
</div>
<ul>
<div className="container mm" style={{ marginTop: "85px" }}>
<div style={{
position: 'absolute', left: '50%', top: '30%'
}}>
<NavLink to={'/mapboard/'}>
<h3> <strong className="col-lg-1 col-centered" /> MapBoard<br /> </h3>
</NavLink>
<br />
<br />
{this.state.players.map(e => (
@@ -73,9 +99,9 @@ class Leaderboard extends React.Component {
</NavLink>
</li>
))}
{!this.state.breakload ? <h1> <br /> <br /><p className="loading">
Loading More Players...
</p> </h1> : ""}
{!this.state.breakload ? <h1>
Loading Players <br /> <br /> <br /> <LoadingIndicator />
</h1> : ""}
</div>
</div>
</ul>
@@ -84,4 +110,5 @@ class Leaderboard extends React.Component {
}
}
export default Leaderboard;
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;
RaceTimer/racetimer_react/src/Maps/Maps.js
+93 -29
View File
@@ -1,6 +1,25 @@
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 Maps extends React.Component {
@@ -9,57 +28,102 @@ class Maps extends React.Component {
this.state = {
mapTimes: [],
mapName: '',
breakload: true,
scrollListener: {},
fetchsize: 0,
};
this.scrollListener = this.handleScroll.bind(this);
}
componentWillMount = async () => {
window.addEventListener('scroll', this.scrollListener);
this.setState({ breakload: false })
const mapname = this.props.match.params.mapname;
const stage = this.props.match.params.stage;
const mapTimes = await Facade.getMapTimesFromCache(mapname, stage);
const mapTimes = await Facade.getMapTimesFromCache(mapname, stage, 0);
const fetchsize = await Facade.getMapTimesFromCacheSize(mapname, stage);
this.setState({ mapTimes });
this.setState({ mapName: mapname })
this.setState({ breakload: true })
this.setState({ fetchsize });
};
componentWillUnmount() {
window.removeEventListener("scroll", this.scrollListener);
}
findSecondLast(array) {
return array[array.length - 2];
}
handleScroll = () => {
if (this.state.breakload && this.state.fetchsize > this.state.mapTimes.length) {
const player = this.findSecondLast(this.state.mapTimes);
var lastLi = document.getElementById('maps/' + player.steamID);
var lastLiOffset = lastLi.offsetTop + lastLi.clientHeight;
var pageOffset = window.pageYOffset + window.innerHeight;
if (pageOffset > lastLiOffset) {
this.setState({ breakload: false })
this.loadPlayers();
}
}
};
loadPlayers = async () => {
const mapname = this.props.match.params.mapname;
const stage = this.props.match.params.stage;
const mapTimes = await Facade.getMapTimesFromCache(mapname, stage, this.state.mapTimes.length + 1);
this.setState({ mapTimes });
this.setState({ breakload: true })
}
render() {
return (
<React.Fragment>
<div className="alert alert-primary" >
<NavLink to={'/leaderboard/'}>
<h3> <strong className="col-lg-1 col-centered" /> leaderboard<br /> </h3>
</NavLink>
<NavLink to={'/mapboard/'}>
<h3> <strong className="col-lg-1 col-centered" /> MapBoard<br /> </h3>
</NavLink>
<div id='containerMaps'>
<div>
<NavLink to={'/leaderboard/'}>
<h3> <strong className="col-lg-1 col-centered" /> leaderboard<br /> </h3>
</NavLink>
</div>
<div>
<NavLink to={'/mapboard/'}>
<h3> <strong className="col-lg-1 col-centered" /> MapBoard<br /> </h3>
</NavLink>
</div>
</div>
</div>
<div className="container mm" style={{ marginTop: "85px" }}>
<div className="container mm">
<div style={{
position: 'absolute', left: '50%', top: '30%'
}}>
<br />
<br />
<div>
<strong className="col-lg-1 col-centered" />{this.state.mapName}<br />
<br />
<br />
{this.state.mapTimes.map(e => (
<div className="item" key={e.steamID}>
<div className="box_grid">
<NavLink to={'/player/' + e.steamID}>
<strong className="col-lg-1 col-centered" /> SteamID: {e.steamID}<br />
<strong className="col-lg-1 col-centered" /> Name: {e.name}<br />
<img src={e.avatar} alt=""/> <br />
</NavLink>
<strong className="col-lg-1 col-centered" /> Position: {e.position}<br />
<strong className="col-lg-1 col-centered" /> Mappoints: {e.mapPoint}<br />
<strong className="col-lg-1 col-centered" /> Time: 0{e.mapTimeMinutes}:{e.mapTimeSeconds}<br />
<br />
<br />
</div>
<h2> <strong className="col-lg-1 col-centered" />{this.state.mapName}<br /> </h2>
<br />
<br />
{this.state.mapTimes.map(e => (
<li key={e.steamID} id={"maps/" + e.steamID}>
<div className="box_grid">
<NavLink to={'/player/' + e.steamID}>
<strong className="col-lg-1 col-centered" /> SteamID: {e.steamID}<br />
<strong className="col-lg-1 col-centered" /> Name: {e.name}<br />
<img src={e.avatar} alt="" /> <br />
</NavLink>
<strong className="col-lg-1 col-centered" /> Position: {e.position}<br />
<strong className="col-lg-1 col-centered" /> Mappoints: {e.mapPoint}<br />
<strong className="col-lg-1 col-centered" /> Time: 0{e.mapTimeMinutes}:{e.mapTimeSeconds}<br />
<br />
<br />
</div>
))}
</li>
))}
{!this.state.breakload ? <h1>
Loading Players <br /> <br /> <LoadingIndicator />
</h1> : ""}
</div>
</div>
</div>
</React.Fragment>
RaceTimer/racetimer_react/src/Player/Player.js
+73 -4
View File
@@ -1,7 +1,24 @@
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="Circles" color="#2BAD60" height="100" width="100" />
</div>
};
class Player extends React.Component {
constructor(props) {
super(props)
@@ -9,20 +26,68 @@ class Player extends React.Component {
player: {},
mapTimes: [],
breakload: true,
scrollListener: {},
};
this.scrollListener = this.handleScroll.bind(this);
}
componentWillMount = async () => {
window.addEventListener('scroll', this.scrollListener);
this.setState({ breakload: false })
const steamid = this.props.match.params.steamid;
const player = await Facade.getPlayerFromCache(steamid);
const mapTimes = await Facade.getPlayerTimesFromCache(steamid);
const mapTimes = await Facade.getPlayerTimesFromCache(steamid, 0);
this.setState({ player });
this.setState({ mapTimes });
this.setState({ breakload: true })
};
componentWillUnmount() {
window.removeEventListener("scroll", this.scrollListener);
}
findSecondLast(array) {
return array[array.length - 2];
}
handleScroll = () => {
if (this.state.breakload && this.state.player.Times > this.state.mapTimes.length) {
const map = this.findSecondLast(this.state.mapTimes);
var lastLi = document.getElementById("playermaps/" + map.mapname + "/" + map.mapstage);
var lastLiOffset = lastLi.offsetTop + lastLi.clientHeight;
var pageOffset = window.pageYOffset + window.innerHeight;
if (pageOffset > lastLiOffset) {
this.setState({ breakload: false })
this.loadMaps();
}
}
};
loadMaps = async () => {
const steamid = this.props.match.params.steamid;
const mapTimes = await Facade.getPlayerTimesFromCache(steamid, this.state.mapTimes.length + 1);
this.setState({ mapTimes });
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>
<NavLink to={'/mapboard/'}>
<h3> <strong className="col-lg-1 col-centered" /> MapBoard<br /> </h3>
</NavLink>
</div>
</div>
</div>
<div className="container mm" style={{ marginTop: "85px" }}>
<div style={{
position: 'absolute', left: '50%', top: '30%'
@@ -39,7 +104,7 @@ class Player extends React.Component {
<br />
</a>
{this.state.mapTimes.map(e => (
<div key={"mapkey/" + e.mapname + "/" + e.mapstage}>
<li key={"mapkey/" + e.mapname + "/" + e.mapstage} id={"playermaps/" + e.mapname + "/" + e.mapstage}>
<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 />
@@ -49,8 +114,12 @@ class Player extends React.Component {
<br />
<br />
</NavLink>
</div>
</li>
))}
{!this.state.breakload ? <h1>
Loading Stats <br /> <br /> <LoadingIndicator />
</h1> : ""}
</div>
</div>
</div>
RaceTimer/racetimer_react/src/css/style.css
+52
View File
@@ -7584,4 +7584,56 @@ a.social_bt.google:before {
.react-fetch-progress-bar {
backgroundColor: red !important;
height: 10px;
}
.rowBoards{display:flex; flex-direction:row;}
#containerMaps {
width:100%;
text-align:center;
}
#containerMaps > div {
width: calc(100% / 6);
display: inline-block;
vertical-align: top;
text-align:center;
margin:2%;
padding:20px;
}
#containerMaps2 {
width:100%;
text-align:center;
}
#containerMaps2 > div {
width: calc(100% / 10);
display: inline-block;
vertical-align: top;
text-align:center;
margin:2%;
}
.centered {
height: 20vh; /* Magic here */
display: flex;
justify-content: center;
align-items: center;
}
.rowC{display:flex; flex-direction:row;}
.flexbox-container {
display: flex;
flex-direction: row;
height: 100vh;
width: 100%;
}
.myForm {
max-width: 1000px;
display: flex;
flex-wrap: wrap;
}