Jukebox/jukebox-web
10
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Adding Statists Page!

Browse Source
This commit is contained in:
Lucas 2024-05-10 11:18:41 -05:00
parent e784bbfa64
commit 9de494d6ae
4 changed files with 70 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/NavBar.js
View File

@ -50,6 +50,9 @@ export default class NavBar extends Component {
<NavLink className="navbar-list-item" id="map" to="/map"> <NavLink className="navbar-list-item" id="map" to="/map">
<span id="map-s">🗺️ Map</span> <span id="map-s">🗺️ Map</span>
</NavLink> </NavLink>
<NavLink className="navbar-list-item" id="map" to="/statists">
<span id="map-s">📊 Statists</span>
</NavLink>
<NavLink className="navbar-list-item" id="settings" to="/settings"> <NavLink className="navbar-list-item" id="settings" to="/settings">
<span id="settings-s">⚙️ Settings</span> <span id="settings-s">⚙️ Settings</span>
</NavLink> </NavLink>

38
src/components/StatistsComponent.js Normal file
View File

@ -0,0 +1,38 @@
import React, { Component } from "react";
import BeldenLogo from "../assets/images/belden-white.png";
import "../assets/stylesheets/summary.scss";
export default class StatistsComponent extends Component {
render() {
return (
<div className="summary">
<div className="summary-image">
<img src={BeldenLogo} alt="Belden" />
</div>
<div className="summary-fieldContainer">
<h1 className="summary-title">Summary</h1>
<div className="summary-grid">
<div className="summary-grid-container">
<iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=8" title="Belden" className="summary-iframe" />
</div>
<div className="summary-grid-container">
<iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=3" title="Belden" className="summary-iframe" />
</div>
<div className="summary-grid-container">
<iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=7" title="Belden" className="summary-iframe" />
</div>
<div className="summary-grid-container">
<iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=6" title="Belden" className="summary-iframe" />
</div>
<div className="summary-grid-container">
<iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=4" title="Belden" className="summary-iframe" />
</div>
<div className="summary-grid-container">
<iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=2" title="Belden" className="summary-iframe" />
</div>
</div>
</div>
</div>
);
}
}

10
src/index.js
View File

@ -5,6 +5,7 @@ import SummaryRoute from "./routes/SummaryRoute";
import BrowseRoute from "./routes/BrowseRoute"; import BrowseRoute from "./routes/BrowseRoute";
import SettingsRoute from "./routes/SettingsRoute"; import SettingsRoute from "./routes/SettingsRoute";
import MapRoute from "./routes/MapRoute"; import MapRoute from "./routes/MapRoute";
import StatistsRoute from "./routes/StatistsRoute";
import CableDetailRoute from "./routes/CableDetailRoute"; import CableDetailRoute from "./routes/CableDetailRoute";
// Root // Root
@ -43,6 +44,11 @@ const init = () => {
element: <MapRoute socket={socket}></MapRoute>, element: <MapRoute socket={socket}></MapRoute>,
// errorElement: <ErrorRoute></ErrorRoute>, // errorElement: <ErrorRoute></ErrorRoute>,
}, },
{
path: "/statists",
element: <StatistsRoute socket={socket}></StatistsRoute>,
// errorElement: <ErrorRoute></ErrorRoute>,
},
{ {
path: "/browse/cable/:cablePos", path: "/browse/cable/:cablePos",
element: <CableDetailRoute socket={socket} />, element: <CableDetailRoute socket={socket} />,
@ -55,4 +61,6 @@ const init = () => {
<RouterProvider router={router} /> <RouterProvider router={router} />
</div> </div>
); );
}; };
init();

20
src/routes/StatistsRoute.js Normal file
View File

@ -0,0 +1,20 @@
import React, { Component } from "react";
import NavBar from "../components/NavBar";
import StatistsComponent from "../components/StatistsComponent";
import "../assets/stylesheets/app.scss";
export default class StatistsRoute extends Component {
constructor(props) {
super(props);
document.title = "Summary";
}
render() {
return (
<div className="container">
<NavBar />
<StatistsComponent socketHandler={this.props.socket} />
</div>
);
}
}