Merge branch 'individual-pages' into develop

package.json

@@ -26,6 +26,8 @@
  "react-bootstrap": "^1.0.0-beta.16",
  "react-chartjs-2": "^2.9.0",
  "react-dom": "^16.12.0",
+ "react-router-bootstrap": "^0.25.0",
+ "react-router-dom": "^5.1.2",
  "react-scripts": "3.4.0",
  "react-tooltip": "^4.0.3",
  "timeago.js": "^4.0.2"

src/App.js

@@ -1,18 +1,21 @@
 import React, { Component } from "react";
+import { Switch, Route } from "react-router-dom";
 import axios from "axios";
-import { Button } from "react-bootstrap";
 
 import Population from "./components/Population.jsx";
 import Invasions from "./components/Invasions.jsx";
 import SillyMeter from "./components/SillyMeter.jsx";
+import All from "./components/All.jsx";
+import Navbar from "./components/Navbar.jsx";
 
 class App extends Component {
  state = {
  invData: [],
  popData: [],
  sillyData: [],
  lastUpdate: "Updating...",
- mode: "Light"
+ mode: "Light",
+ version: "v0.2-dev"
  };
 
  loadData = async () => {
@@ -76,22 +79,46 @@ class App extends Component {
 
  render() {
  return (
- <div className="container py-2">
- <div className="row">
- <div className="col-5 text-left">
- <Invasions invData={this.state.invData} />
- </div>
- <div className="col-7 text-right">
- <Population popData={this.state.popData} />
- <hr />
- <SillyMeter sillyData={this.state.sillyData} />
- </div>
- </div>
- <div className="fixed-bottom text-center text-muted py-3">
- <Button variant="outline-info" size="sm" onClick={this.loadData}>
- {this.state.lastUpdate}
- </Button>
+ <div className="app">
+ <div className="container py-2">
+ <Switch>
+ <Route
+ path="/"
+ exact
+ render={props => (
+ <All
+ {...props}
+ invData={this.state.invData}
+ popData={this.state.popData}
+ sillyData={this.state.sillyData}
+ />
+ )}
+ />
+ <Route
+ path="/inv"
+ render={props => (
+ <Invasions invData={this.state.invData} single={true} />
+ )}
+ />
+ <Route
+ path="/pop"
+ render={props => (
+ <Population popData={this.state.popData} single={true} />
+ )}
+ />
+ <Route
+ path="/silly"
+ render={props => (
+ <SillyMeter {...props} sillyData={this.state.sillyData} />
+ )}
+ />
+ </Switch>
  </div>
+ <Navbar
+ refresh={this.loadData}
+ lastUpdate={this.state.lastUpdate}
+ version={this.state.version}
+ />
  </div>
  );
  }

src/components/All.jsx

@@ -0,0 +1,24 @@
+import React, { Component } from "react";
+
+import Population from "./Population.jsx";
+import Invasions from "./Invasions.jsx";
+import SillyMeter from "./SillyMeter.jsx";
+
+class All extends Component {
+ render() {
+ return (
+ <div className="row">
+ <div className="col-5 text-left">
+ <Invasions invData={this.props.invData} />
+ </div>
+ <div className="col-7 text-right">
+ <Population popData={this.props.popData} />
+ <hr />
+ <SillyMeter sillyData={this.props.sillyData} />
+ </div>
+ </div>
+ );
+ }
+}
+
+export default All;

src/components/Invasions.jsx

@@ -1,57 +1,73 @@
 import React, { Component } from "react";
-import { Circle } from "rc-progress";
+import { Circle, Line } from "rc-progress";
 import AnimatedNumber from "react-animated-number/build/AnimatedNumber";
 import * as timeago from "timeago.js";
 import ReactTooltip from "react-tooltip";
 
-function Districts(props) {
- const formatValue = value => value.toFixed(0);
- const duration = 800;
-
- if (props.data === null) {
- return "Loading invasions";
- }
- return (
- <ul className="list-group list-group-flush">
- {props.data.map(item => (
- <li key={item.district} className="list-group-item">
+class Invasions extends Component {
+ styling(item) {
+ switch (this.props.single) {
+ case true:
+ return (
  <div className="row">
- <div className="col-9">
- <b data-tip={"started " + item.started}>{item.cog}</b>
+ <div className="col">
+ <b>{item.cog}</b>
  <br />
- <ReactTooltip place="right" type="dark" effect="solid" />
  <span className="text-muted">
- in {item.district}, ending {item.eta}
+ invaded <b>{item.district}</b> {item.started}, leaving{" "}
+ {item.eta}
  </span>
  </div>
- <div className="col-2">
- <Circle
+ <div className="col text-right">
+ <Line
  percent={item.percent}
- strokeWidth={10}
+ strokeWidth={1}
  strokeColor={item.colour}
  />
- </div>
- <div className="col-1 text-right">
+ <span className="badge badge-dark">
+ Progress:{" "}
+ <AnimatedNumber
+ value={item.percent}
+ formatValue={this.formatValue}
+ duration={this.duration}
+ />
+ %
+ </span>{" "}
  <AnimatedNumber
  value={item.progress}
- formatValue={formatValue}
- duration={duration}
+ formatValue={this.formatValue}
+ duration={this.duration}
  />
- /
- <AnimatedNumber
- value={item.max}
- formatValue={formatValue}
- duration={duration}
+ /{item.max}
+ </div>
+ </div>
+ );
+ default:
+ return (
+ <div className="row">
+ <div className="col">
+ <b data-tip={"started " + item.started}>{item.cog}</b>
+ <br />
+ <ReactTooltip place="right" type="dark" effect="solid" />
+ <span className="text-muted">
+ in <b>{item.district}</b>, ending {item.eta}
+ </span>
+ </div>
+ <div className="col-2">
+ <Circle
+ percent={item.percent}
+ strokeWidth={8}
+ strokeColor={item.colour}
+ data-tip={
+ item.progress + "/" + item.max + " ( " + item.percent + "% )"
+ }
  />
  </div>
  </div>
- </li>
- ))}
- </ul>
- );
-}
+ );
+ }
+ }
 
-class Invasions extends Component {
  InvasionData() {
  // first we need to get the data
  const { invData } = this.props;
@@ -78,7 +94,7 @@ class Invasions extends Component {
  ? "#ff9800" // 75-90% done
  : percent >= 50
  ? "#ffc107" // 50-75% done
- : "4caf50"; // 0-50% done
+ : "#4caf50"; // 0-50% done
 
  const invCog = invasion[1].Type.replace(/[^-.()0-9a-z& ]/gi, "");
  const eta = timeago.format(new Date(invasion[1].EstimatedCompletion));
@@ -99,13 +115,22 @@ class Invasions extends Component {
  return data;
  }
 
+ formatValue = value => value.toFixed(0);
+ duration = 500;
+
  render() {
- const items = this.InvasionData();
+ const data = this.InvasionData();
 
  return (
  <>
  <h1>Invasions</h1>
- <Districts data={items} />
+ <ul className="list-group list-group-flush">
+ {data.map(item => (
+ <li key={item.district} className="list-group-item">
+ {this.styling(item)}
+ </li>
+ ))}
+ </ul>
  </>
  );
  }

src/components/Navbar.jsx

@@ -0,0 +1,40 @@
+import React, { Component } from "react";
+import { Button, Nav, Navbar } from "react-bootstrap";
+import { LinkContainer } from "react-router-bootstrap";
+
+class NavBar extends Component {
+ render() {
+ return (
+ <Navbar bg="dark" variant="dark" fixed="bottom">
+ <Navbar.Brand>Toontown Rewritten Dashboard</Navbar.Brand>
+ <Nav className="mr-auto">
+ <LinkContainer to="/" exact>
+ <Nav.Link>All</Nav.Link>
+ </LinkContainer>
+ <LinkContainer to="/inv">
+ <Nav.Link>Invasions</Nav.Link>
+ </LinkContainer>
+ <LinkContainer to="/pop">
+ <Nav.Link>Population</Nav.Link>
+ </LinkContainer>
+ <LinkContainer to="/silly">
+ <Nav.Link>Silly Meter</Nav.Link>
+ </LinkContainer>
+ <Nav.Link disabled>Settings</Nav.Link>
+ </Nav>
+ <Navbar.Text>
+ {this.props.version} |{" "}
+ <Button
+ variant="outline-primary"
+ size="sm"
+ onClick={this.props.refresh}
+ >
+ {this.props.lastUpdate}
+ </Button>
+ </Navbar.Text>
+ </Navbar>
+ );
+ }
+}
+
+export default NavBar;

src/components/Population.jsx

@@ -3,21 +3,15 @@ import { Doughnut } from "react-chartjs-2";
 import AnimatedNumber from "react-animated-number";
 
 class Population extends Component {
- getPopulationData(arg) {
+ getTotalPopulationData(arg) {
  // first we need to get the data
  const { popData } = this.props;
  // if we're still loading, slap a huge loading for everything
  if (popData.totalPopulation === undefined) {
  return 0;
  }
 
- // send total pop if it's total
- if (arg === "total") {
- return popData.totalPopulation;
- }
-
- // send the district's data
- return popData.populationByDistrict[arg];
+ return popData.totalPopulation;
  }
 
  getPopulationChartData() {
@@ -113,13 +107,22 @@ class Population extends Component {
  formatValue = value => value.toFixed(0);
  duration = 500;
 
+ styling() {
+ switch (this.props.single) {
+ case true:
+ return 135;
+ default:
+ return 130;
+ }
+ }
+
  render() {
  return (
  <div>
  <h1>Current Population</h1>
  <h4>
  <AnimatedNumber
- value={this.getPopulationData("total")}
+ value={this.getTotalPopulationData()}
  formatValue={this.formatValue}
  duration={this.duration}
  />{" "}
@@ -135,6 +138,7 @@ class Population extends Component {
  boxWidth: 20
  }
  }}
+ height={this.styling()}
  options={{
  tooltips: {
  mode: "nearest",

src/index.js

@@ -2,5 +2,11 @@ import React from "react";
 import ReactDOM from "react-dom";
 import "bootstrap/dist/css/bootstrap.css";
 import App from "./App";
+import { BrowserRouter } from "react-router-dom";
 
-ReactDOM.render(<App />, document.getElementById("root"));
+ReactDOM.render(
+ <BrowserRouter>
+ <App />
+ </BrowserRouter>,
+ document.getElementById("root")
+);