Rewritten most of the frontend to use Redux.

Also, lots of code cleanup, especially in frontend.
master
Tomek Wójcik 2017-03-13 12:25:44 +01:00
parent bfdcb87cef
commit 0451cdbbed
38 changed files with 1302 additions and 410 deletions

2
.gitignore vendored
View File

@ -11,4 +11,4 @@ build/
dist/
q3stats.egg-info/
tests_web_app/tmp/
tests_web_app/tmp/tmp*

View File

@ -24,16 +24,22 @@ import React from "react";
import ReactDOM from "react-dom";
import DashboardView from "./views/DashboardView";
import DataSource from "./lib/DataSource";
import NavigationBarView from "./views/NavigationBarView";
class AppWindow extends React.Component {
componentWillMount () {
DataSource.setRouter(this.props.router);
}
render () {
return (
<div className="q3stats-app-window">
<NavigationBarView router={this.props.router} />
<NavigationBarView
location={this.props.location}
router={this.props.router} />
<div className="q3stats-content-view">
{this.props.children || <DashboardView router={this.props.router} />}
{this.props.children || <DashboardView />}
</div>
<div className="q3stats-footer">
@ -49,8 +55,4 @@ class AppWindow extends React.Component {
}
}
AppWindow.propTypes = {
errorCode: React.PropTypes.string
};
export default AppWindow;

View File

@ -0,0 +1,70 @@
/**
* Copyright (c) 2017 Tomek Wójcik <tomek@bthlabs.pl>
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to
* deal in the Software without restriction, including without limitation the
* rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
* sell copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
* IN THE SOFTWARE.
*/
import {DASHBOARD_ACTIONS} from "../lib/defs";
import DataSource from "../lib/DataSource";
export const cleanup = () => {
return {
type: DASHBOARD_ACTIONS.CLEANUP
};
};
export const loadData = (dispatch) => {
DataSource.loadDashboardData().then((data) => {
dispatch(parseData(dispatch, data));
});
return {
type: DASHBOARD_ACTIONS.LOAD_DATA
};
};
export const parseData = (dispatch, data) => {
if (data.day) {
dispatch(loadChartData(dispatch, data.day));
}
return {
type: DASHBOARD_ACTIONS.PARSE_DATA,
data: data
};
};
export const loadChartData = (dispatch, day) => {
DataSource.loadDayChartData(day).then((data) => {
dispatch(parseChartData(data));
});
return {
type: DASHBOARD_ACTIONS.LOAD_CHART_DATA
};
};
export const parseChartData = (data) => {
return {
type: DASHBOARD_ACTIONS.PARSE_CHART_DATA,
categories: data.maps,
series: data.scores
};
};

View File

@ -0,0 +1,67 @@
/**
* Copyright (c) 2017 Tomek Wójcik <tomek@bthlabs.pl>
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to
* deal in the Software without restriction, including without limitation the
* rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
* sell copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
* IN THE SOFTWARE.
*/
import {NAVIGATION_BAR_ACTIONS} from "../lib/defs";
import DataSource from "../lib/DataSource";
export const cleanup = () => {
return {
type: NAVIGATION_BAR_ACTIONS.CLEANUP
};
};
export const expand = () => {
return {
type: NAVIGATION_BAR_ACTIONS.EXPAND
};
};
export const collapse = () => {
return {
type: NAVIGATION_BAR_ACTIONS.COLLAPSE
};
};
export const showAboutModal = () => {
return {
type: NAVIGATION_BAR_ACTIONS.SHOW_ABOUT_MODAL
};
};
export const hideAboutModal = () => {
return {
type: NAVIGATION_BAR_ACTIONS.HIDE_ABOUT_MODAL
};
};
export const showSettingsModal = () => {
return {
type: NAVIGATION_BAR_ACTIONS.SHOW_SETTINGS_MODAL
};
};
export const hideSettingsModal = () => {
return {
type: NAVIGATION_BAR_ACTIONS.HIDE_SETTINGS_MODAL
};
};

View File

@ -0,0 +1,67 @@
/**
* Copyright (c) 2017 Tomek Wójcik <tomek@bthlabs.pl>
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to
* deal in the Software without restriction, including without limitation the
* rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
* sell copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
* IN THE SOFTWARE.
*/
import {PLAYER_GAME_ACTIONS} from "../lib/defs";
import DataSource from "../lib/DataSource";
export const cleanup = () => {
return {
type: PLAYER_GAME_ACTIONS.CLEANUP
};
};
export const loadData = (dispatch, player, game) => {
DataSource.loadPlayerGameData(player, game).then((data) => {
dispatch(parseData(dispatch, data));
});
return {
type: PLAYER_GAME_ACTIONS.LOAD_DATA
};
};
export const parseData = (dispatch, data) => {
dispatch(loadChartsData(dispatch, data.player, data.game));
return {
type: PLAYER_GAME_ACTIONS.PARSE_DATA,
data: data
};
};
export const loadChartsData = (dispatch, player, game) => {
DataSource.loadPlayerGameChartsData(player, game).then((data) => {
dispatch(parseChartsData(data));
});
return {
type: PLAYER_GAME_ACTIONS.LOAD_CHARTS_DATA
};
};
export const parseChartsData = (data) => {
return {
type: PLAYER_GAME_ACTIONS.PARSE_CHARTS_DATA,
data: data
};
};

View File

@ -0,0 +1,57 @@
/**
* Copyright (c) 2017 Tomek Wójcik <tomek@bthlabs.pl>
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to
* deal in the Software without restriction, including without limitation the
* rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
* sell copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
* IN THE SOFTWARE.
*/
import {PLAYER_STATS_ACTIONS} from "../lib/defs";
import DataSource from "../lib/DataSource";
export const cleanup = () => {
return {
type: PLAYER_STATS_ACTIONS.CLEANUP
};
};
export const setMode = (mode) => {
return {
type: PLAYER_STATS_ACTIONS.SET_MODE,
mode: mode
};
};
export const loadChartData = (dispatch, player, kind, mode) => {
DataSource.loadPlayerStatsChartData(player, kind, mode).then((data) => {
dispatch(parseChartData(data, player, kind, mode));
});
return {
type: PLAYER_STATS_ACTIONS.LOAD_CHART_DATA
};
};
export const parseChartData = (data, player, kind, mode) => {
return {
type: PLAYER_STATS_ACTIONS.PARSE_CHART_DATA,
kind: kind,
mode: mode,
data: data
};
};

View File

@ -0,0 +1,48 @@
/**
* Copyright (c) 2017 Tomek Wójcik <tomek@bthlabs.pl>
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to
* deal in the Software without restriction, including without limitation the
* rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
* sell copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
* IN THE SOFTWARE.
*/
import {PLAYERS_ACTIONS} from "../lib/defs";
import DataSource from "../lib/DataSource";
export const cleanup = () => {
return {
type: PLAYERS_ACTIONS.CLEANUP
};
};
export const loadData = (dispatch) => {
DataSource.loadPlayersData().then((data) => {
dispatch(parseData(dispatch, data));
});
return {
type: PLAYERS_ACTIONS.LOAD_DATA
};
};
export const parseData = (dispatch, data) => {
return {
type: PLAYERS_ACTIONS.PARSE_DATA,
data: data
};
};

View File

@ -0,0 +1,81 @@
/**
* Copyright (c) 2017 Tomek Wójcik <tomek@bthlabs.pl>
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to
* deal in the Software without restriction, including without limitation the
* rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
* sell copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
* IN THE SOFTWARE.
*/
import {SESSIONS_ACTIONS} from "../lib/defs";
import DataSource from "../lib/DataSource";
export const cleanup = () => {
return {
type: SESSIONS_ACTIONS.CLEANUP
};
};
export const setDay = (dispatch, day) => {
let actualDay = day || "";
dispatch(loadData(dispatch, actualDay));
return {
type: SESSIONS_ACTIONS.SET_DAY,
day: actualDay
};
};
export const loadData = (dispatch, day) => {
DataSource.loadSessionData(day).then((data) => {
dispatch(parseData(dispatch, data));
});
return {
type: SESSIONS_ACTIONS.LOAD_DATA
};
};
export const parseData = (dispatch, data) => {
if (data.day) {
dispatch(loadChartData(dispatch, data.day));
}
return {
type: SESSIONS_ACTIONS.PARSE_DATA,
data: data
};
};
export const loadChartData = (dispatch, day) => {
DataSource.loadDayChartData(day).then((data) => {
dispatch(parseChartData(data));
});
return {
type: SESSIONS_ACTIONS.LOAD_CHART_DATA
};
};
export const parseChartData = (data) => {
return {
type: SESSIONS_ACTIONS.PARSE_CHART_DATA,
categories: data.maps,
series: data.scores
};
};

View File

@ -20,11 +20,17 @@
* IN THE SOFTWARE.
*/
import {ACTION_SETTINGS_SET_LAYOUT} from "../lib/defs";
import {SETTINGS_ACTIONS, SETTINGS_KEYS} from "../lib/defs";
export const setLayout = (newLayout) => {
try {
window.localStorage.setItem(SETTINGS_KEYS.LAYOUT, newLayout);
} catch (error) {
// pass
}
return {
type: ACTION_SETTINGS_SET_LAYOUT,
type: SETTINGS_ACTIONS.SET_LAYOUT,
layout: newLayout
};
};

View File

@ -27,7 +27,7 @@ import ReactDOM from "react-dom";
import {connect} from "react-redux";
import underscore from "underscore";
class ChartComponent extends React.Component {
class ChartComponent extends React.PureComponent {
constructor (props) {
super(props);

View File

@ -29,7 +29,7 @@ const LAYOUT_TO_CLASSNAME = {};
LAYOUT_TO_CLASSNAME[LAYOUT_WIDE] = "container-fluid";
LAYOUT_TO_CLASSNAME[LAYOUT_NARROW] = "container";
class ContainerComponent extends React.Component {
class ContainerComponent extends React.PureComponent {
render () {
let className = LAYOUT_TO_CLASSNAME[this.props.layout];
if (!className) {

View File

@ -24,7 +24,7 @@ import React from "react";
import {ITEM_NAMES} from "../lib/defs";
class ItemIconComponent extends React.Component {
class ItemIconComponent extends React.PureComponent {
render () {
let itemName = ITEM_NAMES[this.props.item] || "?";

View File

@ -23,7 +23,7 @@
import ClassName from "classnames";
import React from "react";
class LoaderComponent extends React.Component {
class LoaderComponent extends React.PureComponent {
render () {
let className = ClassName("q3stats-loader", {
"visible": this.props.visible

View File

@ -24,7 +24,7 @@ import React from "react";
import {POWERUP_NAMES} from "../lib/defs";
class PowerupIconComponent extends React.Component {
class PowerupIconComponent extends React.PureComponent {
render () {
let powerupName = POWERUP_NAMES[this.props.powerup] || "?";

View File

@ -24,7 +24,7 @@ import React from "react";
import {WEAPON_NAMES} from "../lib/defs";
class WeaponIconComponent extends React.Component {
class WeaponIconComponent extends React.PureComponent {
render () {
let weaponName = WEAPON_NAMES[this.props.weapon] || "?";

View File

@ -0,0 +1,64 @@
import underscore from "underscore";
import "whatwg-fetch";
const DEFAULT_INIT = {
credentials: "include"
};
class DataSource {
constructor () {
this._router = null;
}
setRouter (router) {
this._router = router;
}
_fetch (requestOrURL, init) {
init = init || {};
let actualInit = underscore.extendOwn(
underscore.clone(DEFAULT_INIT), init
);
return window.fetch(requestOrURL, actualInit).catch((error) => {
this._router.push("/error/");
throw new Error("FetchError: Unable to fetch");
}).then((response) => {
if (!response.ok) {
let statusCode = response.status || "";
this._router.push("/error/" + statusCode);
throw new Error(
"FetchError: '" + statusCode + "'" + " '" + response.statusText + "'"
);
} else {
return response.json();
}
});
}
loadDashboardData () {
return this._fetch("/api/v1/dashboard");
}
loadDayChartData (day) {
return this._fetch("/api/v1/charts/day/" + day);
}
loadSessionData (day) {
return this._fetch("/api/v1/sessions/" + day);
}
loadPlayerGameData (player, game) {
return this._fetch("/api/v1/players/" + player + "/game/" + game);
}
loadPlayerGameChartsData (player, game) {
return this._fetch("/api/v1/charts/player/" + player + "/game/" + game);
}
loadPlayersData () {
return this._fetch("/api/v1/players");
}
loadPlayerStatsChartData (player, kind, mode) {
return this._fetch(
"/api/v1/charts/player/" + player + "/" + kind + "/" + mode
);
}
}
let sharedDataSource = new DataSource();
export default sharedDataSource;

View File

@ -30,9 +30,61 @@ export const LAYOUT_CHOICES = [
[LAYOUT_NARROW, "Narrow"]
];
export const SETTINGS_KEY_LAYOUT = "layout";
export const SETTINGS_KEYS = {
LAYOUT: "layout"
};
export const ACTION_SETTINGS_SET_LAYOUT = "ACTION_SETTINGS_SET_LAYOUT";
export const DASHBOARD_ACTIONS = {
CLEANUP: "ACTION_DASHBOARD_CLEANUP",
LOAD_CHART_DATA: "ACTION_DASHBOARD_LOAD_CHART_DATA",
LOAD_DATA: "ACTION_DASHBOARD_LOAD_DATA",
PARSE_CHART_DATA: "ACTION_DASHBOARD_PARSE_CHART_DATA",
PARSE_DATA: "ACTION_DASHBOARD_PARSE_DATA"
};
export const NAVIGATION_BAR_ACTIONS = {
CLEANUP: "ACTION_NAVIGATION_BAR_CLEANUP",
EXPAND: "ACTION_NAVIGATION_BAR_EXPAND",
COLLAPSE: "ACTION_NAVIGATION_BAR_COLLAPSE",
SHOW_ABOUT_MODAL: "ACTION_NAVIGATION_BAR_SHOW_ABOUT_MODAL",
HIDE_ABOUT_MODAL: "ACTION_NAVIGATION_BAR_HIDE_ABOUT_MODAL",
SHOW_SETTINGS_MODAL: "ACTION_NAVIGATION_BAR_SHOW_SETTINGS_MODAL",
HIDE_SETTINGS_MODAL: "ACTION_NAVIGATION_BAR_HIDE_SETTINGS_MODAL"
};
export const PLAYER_GAME_ACTIONS = {
CLEANUP: "ACTION_PLAYER_GAME_CLEANUP",
LOAD_CHARTS_DATA: "ACTION_PLAYER_GAME_LOAD_CHARTS_DATA",
LOAD_DATA: "ACTION_PLAYER_GAME_LOAD_DATA",
PARSE_CHARTS_DATA: "ACTION_PLAYER_GAME_PARSE_CHARTS",
PARSE_DATA: "ACTION_PLAYER_GAME_PARSE_DATA"
};
export const PLAYER_STATS_ACTIONS = {
CLEANUP: "ACTION_PLAYER_STATS_CLEANUP",
SET_MODE: "ACTION_PLAYER_STATS_SET_MODE",
LOAD_CHART_DATA: "ACTION_PLAYER_STATS_LOAD_CHART_DATA",
PARSE_CHART_DATA: "ACTION_PLAYER_STATS_PARSE_CHART_DATA"
};
export const PLAYERS_ACTIONS = {
CLEANUP: "ACTION_PLAYERS_CLEANUP",
LOAD_DATA: "ACTION_PLAYERS_LOAD_DATA",
PARSE_DATA: "ACTION_PLAYERS_PARSE_DATA"
};
export const SESSIONS_ACTIONS = {
CLEANUP: "ACTION_SESSIONS_CLEANUP",
LOAD_CHART_DATA: "ACTION_SESSIONS_LOAD_CHART_DATA",
LOAD_DATA: "ACTION_SESSIONS_LOAD_DATA",
PARSE_CHART_DATA: "ACTION_SESSIONS_PARSE_CHART_DATA",
PARSE_DATA: "ACTION_SESSIONS_PARSE_DATA",
SET_DAY: "ACTION_SESSIONS_SET_DAY"
};
export const SETTINGS_ACTIONS = {
SET_LAYOUT: "ACTION_SETTINGS_SET_LAYOUT"
};
export const WEAPON_NAMES = {
"BFG": "BFG10k",

View File

@ -7,7 +7,6 @@ import React from "react";
import ReactDOM from "react-dom";
import {Router, Route, hashHistory} from "react-router";
import {Provider} from "react-redux";
import "whatwg-fetch";
import AppWindow from "./AppWindow";
import SessionsView from "./views/SessionsView";
@ -15,11 +14,11 @@ import PlayersView from "./views/PlayersView";
import PlayerGameView from "./views/PlayerGameView";
import PlayerStatsView from "./views/PlayerStatsView";
import ErrorView from "./views/ErrorView";
import reactStore from "./store";
import reduxStore from "./store";
window.addEventListener("load", function () {
ReactDOM.render(
<Provider store={reactStore}>
<Provider store={reduxStore}>
<Router history={hashHistory}>
<Route path="/" component={AppWindow}>
<Route path="/sessions/" component={SessionsView}>

View File

@ -0,0 +1,71 @@
/**
* Copyright (c) 2017 Tomek Wójcik <tomek@bthlabs.pl>
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to
* deal in the Software without restriction, including without limitation the
* rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
* sell copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
* IN THE SOFTWARE.
*/
import underscore from "underscore";
import {DASHBOARD_ACTIONS} from "../lib/defs";
const DEFAULT_STATE = {
loading: true,
day: "",
emosOfTheMonth: [],
fraggersOfTheMonth: [],
categories: [],
series: []
};
const dashboardReducer = (state = DEFAULT_STATE, action) => {
switch (action.type) {
case DASHBOARD_ACTIONS.CLEANUP:
return underscore.clone(DEFAULT_STATE);
case DASHBOARD_ACTIONS.LOAD_DATA:
return underscore.extendOwn({}, state, {
loading: true
});
case DASHBOARD_ACTIONS.PARSE_DATA:
return underscore.extendOwn({}, state, {
loading: false,
day: action.data.day,
emosOfTheMonth: action.data.eotm,
fraggersOfTheMonth: action.data.fotm
});
case DASHBOARD_ACTIONS.LOAD_CHART_DATA:
return underscore.extendOwn({}, state, {
categories: [],
series: []
});
case DASHBOARD_ACTIONS.PARSE_CHART_DATA:
return underscore.extendOwn({}, state, {
categories: action.categories,
series: action.series
});
default:
return state;
}
};
export default dashboardReducer;

View File

@ -22,9 +22,21 @@
import {combineReducers} from "redux";
import dashboardReducer from "./dashboard";
import navigationBarReducer from "./navigationBar";
import playerGameReducer from "./playerGame";
import playerStatsReducer from "./playerStats";
import playersReducer from "./players";
import sessionsReducer from "./sessions";
import settingsReducer from "./settings";
const Q3StatsApp = combineReducers({
dashboard: dashboardReducer,
navigationBar: navigationBarReducer,
playerGame: playerGameReducer,
playerStats: playerStatsReducer,
players: playersReducer,
sessions: sessionsReducer,
settings: settingsReducer
});

View File

@ -0,0 +1,75 @@
/**
* Copyright (c) 2017 Tomek Wójcik <tomek@bthlabs.pl>
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to
* deal in the Software without restriction, including without limitation the
* rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
* sell copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
* IN THE SOFTWARE.
*/
import underscore from "underscore";
import {NAVIGATION_BAR_ACTIONS} from "../lib/defs";
const DEFAULT_STATE = {
expanded: false,
showAboutModal: false,
showSettingsModal: false
};
const navigationBarReducer = (state = DEFAULT_STATE, action) => {
switch (action.type) {
case NAVIGATION_BAR_ACTIONS.CLEANUP:
return underscore.clone(DEFAULT_STATE);
case NAVIGATION_BAR_ACTIONS.EXPAND:
return underscore.extendOwn({}, state, {
expanded: true
});
case NAVIGATION_BAR_ACTIONS.COLLAPSE:
return underscore.extendOwn({}, state, {
expanded: false
});
case NAVIGATION_BAR_ACTIONS.SHOW_ABOUT_MODAL:
return underscore.extendOwn({}, state, {
expanded: false,
showAboutModal: true
});
case NAVIGATION_BAR_ACTIONS.HIDE_ABOUT_MODAL:
return underscore.extendOwn({}, state, {
showAboutModal: false
});
case NAVIGATION_BAR_ACTIONS.SHOW_SETTINGS_MODAL:
return underscore.extendOwn({}, state, {
expanded: false,
showSettingsModal: true
});
case NAVIGATION_BAR_ACTIONS.HIDE_SETTINGS_MODAL:
return underscore.extendOwn({}, state, {
showSettingsModal: false
});
default:
return state;
}
};
export default navigationBarReducer;

View File

@ -0,0 +1,90 @@
/**
* Copyright (c) 2017 Tomek Wójcik <tomek@bthlabs.pl>
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to
* deal in the Software without restriction, including without limitation the
* rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
* sell copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
* IN THE SOFTWARE.
*/
import underscore from "underscore";
import {PLAYER_GAME_ACTIONS} from "../lib/defs";
const DEFAULT_STATE = {
loading: true,
map: "",
weaponStats: {},
itemStats: {},
powerupStats: {},
scoreChartSeries: [],
damageChartSeries: [],
totalsChartSeries: []
};
const processSerieData = (serie, name) => {
if (!serie) {
return [];
}
return [
{
"type": "pie",
"name": name,
"data": serie
}
];
};
const playerGameReducer = (state = DEFAULT_STATE, action) => {
switch (action.type) {
case PLAYER_GAME_ACTIONS.CLEANUP:
return underscore.clone(DEFAULT_STATE);
case PLAYER_GAME_ACTIONS.LOAD_DATA:
return underscore.extendOwn({}, state, {
loading: true
});
case PLAYER_GAME_ACTIONS.PARSE_DATA:
return underscore.extendOwn({}, state, {
loading: false,
map: action.data.map,
weaponStats: action.data.weapons || {},
itemStats: action.data.items || {},
powerupStats: action.data.powerups || {}
});
case PLAYER_GAME_ACTIONS.LOAD_CHARTS_DATA:
return underscore.extendOwn({}, state, {
scoreChartSeries: [],
damageChartSeries: [],
totalsChartSeries: []
});
case PLAYER_GAME_ACTIONS.PARSE_CHARTS_DATA:
return underscore.extendOwn({}, state, {
scoreChartSeries: processSerieData(action.data.score),
damageChartSeries: processSerieData(action.data.damage),
totalsChartSeries: processSerieData(action.data.totals)
});
default:
return state;
}
};
export default playerGameReducer;

View File

@ -0,0 +1,101 @@
/**
* Copyright (c) 2017 Tomek Wójcik <tomek@bthlabs.pl>
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to
* deal in the Software without restriction, including without limitation the
* rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
* sell copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
* IN THE SOFTWARE.
*/
import underscore from "underscore";
import {PLAYER_STATS_ACTIONS} from "../lib/defs";
const DEFAULT_STATE = {
mode: "session",
sessionWinsChartData: {
categories: [],
series: []
},
mapWinsChartData: {
categories: [],
series: []
},
sessionAccuracyChartData: {
categories: [],
series: []
},
mapAccuracyChartData: {
categories: [],
series: []
}
};
const processChartData = (data, mode, kind) => {
let parsedData = {
categories: [],
series: []
};
if (mode == "session") {
parsedData.categories = data.dates;
} else {
parsedData.categories = data.maps;
}
let key = mode;
if (kind == "wins") {
key = key + "WinsChartData";
parsedData.series = [
{"name": "Wins", "data": data.wins},
{"name": "Losses", "data": data.losses}
];
} else if (kind == "accuracy") {
key = key + "AccuracyChartData";
parsedData.series = data.series;
}
let newState = {};
newState[key] = parsedData;
return newState;
};
const playerStatsReducer = (state = DEFAULT_STATE, action) => {
switch (action.type) {
case PLAYER_STATS_ACTIONS.CLEANUP:
return underscore.clone(DEFAULT_STATE);
case PLAYER_STATS_ACTIONS.SET_MODE:
return underscore.extendOwn({}, state, {
mode: action.mode
});
case PLAYER_STATS_ACTIONS.LOAD_CHART_DATA:
return state;
case PLAYER_STATS_ACTIONS.PARSE_CHART_DATA:
return underscore.extendOwn(
{}, state, processChartData(action.data, action.mode, action.kind)
);
default:
return state;
}
};
export default playerStatsReducer;

View File

@ -20,37 +20,34 @@
* IN THE SOFTWARE.
*/
import React from "react";
import underscore from "underscore";
const DEFAULT_INIT = {
credentials: "include"
import {PLAYERS_ACTIONS} from "../lib/defs";
const DEFAULT_STATE = {
loading: true,
players: []
};
class BaseView extends React.Component {
fetch (requestOrURL, init) {
init = init || {};
const playersReducer = (state = DEFAULT_STATE, action) => {
switch (action.type) {
case PLAYERS_ACTIONS.CLEANUP:
return underscore.clone(DEFAULT_STATE);
let actualInit = underscore.extendOwn(
underscore.clone(DEFAULT_INIT), init
);
case PLAYERS_ACTIONS.LOAD_DATA:
return underscore.extendOwn({}, state, {
loading: true
});
return window.fetch(requestOrURL, actualInit).catch((error) => {
this.props.router.push("/error/");
throw new Error("FetchError: Unable to fetch");
}).then((response) => {
if (!response.ok) {
let statusCode = response.status || "";
case PLAYERS_ACTIONS.PARSE_DATA:
return underscore.extendOwn({}, state, {
loading: false,
players: action.data.players
});
this.props.router.push("/error/" + statusCode);
throw new Error(
"FetchError: '" + statusCode + "'" + " '" + response.statusText + "'"
);
} else {
return response.json();
}
});
default:
return state;
}
}
};
export default BaseView;
export default playersReducer;

View File

@ -0,0 +1,79 @@
/**
* Copyright (c) 2017 Tomek Wójcik <tomek@bthlabs.pl>
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to
* deal in the Software without restriction, including without limitation the
* rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
* sell copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
* IN THE SOFTWARE.
*/
import underscore from "underscore";
import {SESSIONS_ACTIONS} from "../lib/defs";
const DEFAULT_STATE = {
loading: true,
day: "",
previousDay: "",
nextDay: "",
games: [],
categories: [],
series: []
};
const sessionsReducer = (state = DEFAULT_STATE, action) => {
switch (action.type) {
case SESSIONS_ACTIONS.CLEANUP:
return underscore.clone(DEFAULT_STATE);
case SESSIONS_ACTIONS.SET_DAY:
return underscore.extendOwn({}, state, {
day: action.day,
loading: true
});
case SESSIONS_ACTIONS.LOAD_DATA:
return underscore.extendOwn({}, state, {
loading: true
});
case SESSIONS_ACTIONS.PARSE_DATA:
return underscore.extendOwn({}, state, {
day: action.data.day,
games: action.data.games,
loading: false,
nextDay: action.data.next_day || "",
previousDay: action.data.previous_day || ""
});
case SESSIONS_ACTIONS.LOAD_CHART_DATA:
return underscore.extendOwn({}, state, {
categories: [],
series: []
});
case SESSIONS_ACTIONS.PARSE_CHART_DATA:
return underscore.extendOwn({}, state, {
categories: action.categories,
series: action.series
});
default:
return state;
}
};
export default sessionsReducer;

View File

@ -22,15 +22,13 @@
import underscore from "underscore";
import {
DEFAULT_LAYOUT, SETTINGS_KEY_LAYOUT, ACTION_SETTINGS_SET_LAYOUT
} from "../lib/defs";
import {DEFAULT_LAYOUT, SETTINGS_ACTIONS, SETTINGS_KEYS} from "../lib/defs";
const DEFAULT_STATE = {};
DEFAULT_STATE[SETTINGS_KEY_LAYOUT] = (function () {
DEFAULT_STATE[SETTINGS_KEYS.LAYOUT] = (function () {
let result = null;
try {
result = window.localStorage.getItem(SETTINGS_KEY_LAYOUT);
result = window.localStorage.getItem(SETTINGS_KEYS.LAYOUT);
} catch (error) {
// pass
}
@ -38,9 +36,9 @@ DEFAULT_STATE[SETTINGS_KEY_LAYOUT] = (function () {
return result || DEFAULT_LAYOUT;
})();
const settings = (state = DEFAULT_STATE, action) => {
const settingsReducer = (state = DEFAULT_STATE, action) => {
switch (action.type) {
case ACTION_SETTINGS_SET_LAYOUT:
case SETTINGS_ACTIONS.SET_LAYOUT:
return underscore.extendOwn({}, state, {
layout: action.layout
});
@ -50,4 +48,4 @@ const settings = (state = DEFAULT_STATE, action) => {
}
};
export default settings;
export default settingsReducer;

View File

@ -24,7 +24,7 @@ import Button from "react-bootstrap/lib/Button";
import Modal from "react-bootstrap/lib/Modal";
import React from "react";
class AboutModalView extends React.Component {
class AboutModalView extends React.PureComponent {
render () {
return (
<Modal show={this.props.show} onHide={this.props.onHide}>
@ -60,7 +60,7 @@ class AboutModalView extends React.Component {
}
}
AboutModalView.PropTypes = {
AboutModalView.propTypes = {
show: React.PropTypes.bool.isRequired,
onHide: React.PropTypes.func.isRequired
};

View File

@ -21,13 +21,14 @@
*/
import React from "react";
import {connect} from "react-redux";
import BaseView from "../lib/BaseView";
import ChartComponent from "../components/ChartComponent";
import ContainerComponent from "../components/ContainerComponent";
import LoaderComponent from "../components/LoaderComponent";
import {cleanup, loadData} from "../actions/dashboard";
class TopPlayersTableView extends React.Component {
class TopPlayersTableView extends React.PureComponent {
render () {
return (
<table className="table table-striped table-bordered table-hover">
@ -64,7 +65,7 @@ TopPlayersTableView.propTypes = {
scores: React.PropTypes.array
};
class DashboardView extends BaseView {
class DashboardView extends React.PureComponent {
constructor (props) {
super(props);
@ -91,35 +92,14 @@ class DashboardView extends BaseView {
}
}
};
this.state = {
ready: false,
day: "",
emosOfTheMonth: [],
fraggersOfTheMonth: [],
categories: null,
series: []
};
}
componentDidMount () {
this.fetch("/api/v1/dashboard").then((data) => {
this.setState({
ready: true,
day: data.day,
emosOfTheMonth: data.eotm,
fraggersOfTheMonth: data.fotm
});
this.loadChartData();
});
if (!this.props.day) {
this.props.dispatch(loadData(this.props.dispatch));
}
}
loadChartData () {
this.fetch("/api/v1/charts/day/" + this.state.day).then((data) => {
this.setState({
categories: data.maps,
series: data.scores
});
});
componentWillUnmount () {
this.props.dispatch(cleanup());
}
render () {
return (
@ -128,9 +108,9 @@ class DashboardView extends BaseView {
<ChartComponent
config={this.chartConfig}
categories={this.state.categories}
series={this.state.series}
subtitle={this.state.day} />
categories={this.props.categories}
series={this.props.series}
subtitle={this.props.day} />
<div className="row">
<div className="col-sm-6">
@ -138,7 +118,7 @@ class DashboardView extends BaseView {
<TopPlayersTableView
scoreColumnTitle="Frags"
scores={this.state.fraggersOfTheMonth} />
scores={this.props.fraggersOfTheMonth} />
</div>
<div className="col-sm-6">
@ -146,14 +126,29 @@ class DashboardView extends BaseView {
<TopPlayersTableView
scoreColumnTitle="Suicides"
scores={this.state.emosOfTheMonth} />
scores={this.props.emosOfTheMonth} />
</div>
</div>
<LoaderComponent visible={!this.state.ready} />
<LoaderComponent visible={this.props.loading} />
</ContainerComponent>
);
}
}