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

v1?

Browse Source
This commit is contained in:
scarlett kadan
2024-05-13 02:34:27 -04:00
parent 5a8abf08bd
commit 8fe33095dd
10 changed files with 264 additions and 232 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/components/NavBar.js
View File

@@ -3,23 +3,55 @@ import { NavLink } from "react-router-dom";
import "../assets/stylesheets/navbar.scss";
export default class NavBar extends Component {
constructor(props) {
super(props);
this.state = {
clicks: 0,
timer: null,
};
}
componentDidMount() {
let path = window.location.pathname;
if (path.includes("browse")) {
document.getElementById("browse").style.backgroundColor = "#007CBE";
document.getElementById("browse-s").style.color = "white";
if (path.includes("statistics")) {
document.getElementById("statistics").style.backgroundColor = "#007CBE";
document.getElementById("statistics-s").style.color = "white";
} else if (path.includes("map")) {
document.getElementById("map").style.backgroundColor = "#007CBE";
document.getElementById("map-s").style.color = "white";
} else if (path.includes("cable")) {
document.getElementById("browse").style.backgroundColor = "#007CBE";
document.getElementById("browse-s").style.color = "white";
} else if (path.includes("statistics")) {
document.getElementById("statistics").style.backgroundColor = "#007CBE";
document.getElementById("statistics-s").style.color = "white";
} else {
document.getElementById("home").style.backgroundColor = "#007CBE";
document.getElementById("home-s").style.color = "white";
document.getElementById("browse").style.backgroundColor = "#007CBE";
document.getElementById("browse-s").style.color = "white";
}
}
handleClick = () => {
const { clicks, timer } = this.state;
if (clicks === 0) {
const newTimer = setTimeout(() => {
this.setState({ clicks: 0 });
clearTimeout(newTimer);
}, 1000);
this.setState({ timer: newTimer });
}
this.setState({ clicks: clicks + 1 });
if (clicks + 1 === 3) {
window.location.replace("/settings")
clearTimeout(timer);
this.setState({ clicks: 0, timer: null });
}
};
componentWillUnmount() {
if (this.state.timer) {
clearTimeout(this.state.timer);
}
}
@@ -27,19 +59,12 @@ export default class NavBar extends Component {
return (
<div className="navbar">
<div className="navbar-top">
<div className="navbar-top-hamburger">≡</div>
<div className="navbar-top-container">
<div className="navbar-top-hamburger">≡</div>
<div className="navbar-top-secret" onClick={this.handleClick}></div>
</div>
<h1>Jukebox</h1>
<ol className="navbar-list">
<NavLink
style={this.upper}
id="home"
className="navbar-list-item"
to="/"
>
<span id="home-s" style={this.lower}>
❤️ Summary
</span>
</NavLink>
<NavLink className="navbar-list-item" id="browse" to="/browse">
<span id="browse-s">🛍️ Browse</span>
</NavLink>

68
src/components/SettingsComponent.js
View File

@@ -3,13 +3,79 @@ import BeldenLogo from "../assets/images/belden-white.png";
import "../assets/stylesheets/settings.scss";
export default class SettingsComponent extends Component {
shutdownPower = () => {
console.log("Shutting down...");
this.props.socket.send('{"type":"shutdown","call":"request","data":{}}');
};
restartPower = () => {
console.log("Restarting...");
this.props.socket.send('{"type":"restart","call":"request","data":{}}');
};
render() {
return (
<div className="settings">
<div className="settings-image">
<img src={BeldenLogo} alt="Belden" />
</div>
<div className="settings-fieldContainer"></div>
<div className="settings-fieldContainer">
<h1 className="settings-title">⚙️ Settings</h1>
<div className="settings-powerContainer">
<div
className="settings-powerButton"
onClick={() => this.shutdownPower()}
>
<span>🔴 Power Off</span>
</div>
<div
className="settings-powerButton"
onClick={() => this.restartPower()}
>
<span>🟨 Restart</span>
</div>
</div>
<div className="settings-creditsContainer">
<div className="settings-credits">
<h2 className="settings-credits-title">Credits:</h2>
<div className="entry">
<span className="entry-name">Cole Deck,</span>
<span className="entry-position">Project Lead,</span>
<a className="entry-links">https://deck.sh</a>
</div>
<div className="entry">
<span className="entry-name">Natorion Johnson,</span>
<span className="entry-position">Lead PCB assembler,</span>
<a className="entry-links">https://linkedin.com/in/NatorionJ</a>
</div>
<div className="entry">
<span className="entry-name">Fannie,</span>
<span className="entry-position">CAD Design, Fabrication Planner</span>
<a className="entry-links">https://linkedin.com/in/fannieyu</a>
</div>
<div className="entry">
<span className="entry-name">Elias Frey Reschly,</span>
<span className="entry-position">Mechanical Design, Fabrication</span>
<a className="entry-links"></a>
</div>
<div className="entry">
<span className="entry-name">Scarlett Deck,</span>
<span className="entry-position">Front-End Dev, UI/UX Designer,</span>
<a className="entry-links">https://kadan.live</a>
</div>
<div className="entry">
<span className="entry-name">Lucas Ferguson,</span>
<span className="entry-position">Front-End Dev,</span>
<a className="entry-links">https://lucasferguson.webflow.io</a>
</div>
<div className="entry">
<span className="entry-name">Dustin Thomas,</span>
<span className="entry-position">Back-End Dev,</span>
<a className="entry-links">https://cptlobster.dev</a>
</div>
</div>
</div>
</div>
</div>
);
}

38
src/components/SummaryComponent.js
View File

@@ -1,38 +0,0 @@
import React, { Component } from "react";
import BeldenLogo from "../assets/images/belden-white.png";
import "../assets/stylesheets/summary.scss";
export default class SummaryComponent 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>
);
}
}