v1?
This commit is contained in:
parent
5a8abf08bd
commit
8fe33095dd
@ -8,7 +8,7 @@ $white: #fff;
|
||||
|
||||
.navbar {
|
||||
width: 300px;
|
||||
height: 100%;
|
||||
height: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
@ -25,6 +25,21 @@ $white: #fff;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.navbar-top-container {
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.navbar-top-secret {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.navbar-top-hamburger {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
|
||||
@ -49,4 +49,137 @@ $white: #fff;
|
||||
overflow: hidden;
|
||||
background-color: transparent;
|
||||
margin-bottom: 50px;
|
||||
animation: fadeInUp;
|
||||
animation-duration: .5s;
|
||||
}
|
||||
|
||||
.settings-title {
|
||||
width: 80%;
|
||||
height: auto;
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
color: $white;
|
||||
font-family: "Gotham Medium";
|
||||
margin: 10px;
|
||||
background-color: transparent;
|
||||
margin-bottom: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.settings-powerContainer, .settings-creditsContainer {
|
||||
width: 80%;
|
||||
height: 100px;
|
||||
background: linear-gradient(
|
||||
-30deg,
|
||||
rgb(187, 208, 236) 0%,
|
||||
rgba(255, 255, 255, 1) 100%
|
||||
);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
flex-direction: row;
|
||||
border-radius: 20px;
|
||||
border: 1px solid $gray;
|
||||
margin-bottom: 5px;
|
||||
margin-top: 5px;
|
||||
transition: all 0.3s ease-in-out;
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
|
||||
}
|
||||
|
||||
.settings-creditsContainer {
|
||||
height: 500px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.settings-powerButton {
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
border-radius: 20px;
|
||||
background: linear-gradient(
|
||||
15deg,
|
||||
rgb(223, 223, 223) 0%,
|
||||
rgb(255, 255, 255) 100%
|
||||
);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: all 0.3s ease-in-out;
|
||||
filter: drop-shadow(5px 5px 2px rgba(0, 0, 0, 0.15));
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
margin-right: 20px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.settings-powerButton span {
|
||||
width: auto;
|
||||
height: auto;
|
||||
font-size: 20px;
|
||||
margin-top: 2px;
|
||||
color: $medium-blue;
|
||||
font-family: "Gotham Bold";
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.settings-credits {
|
||||
width: 95%;
|
||||
height: 430px;
|
||||
background-color: transparent;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.entry-links, .entry-name, .entry-position, .settings-credits-title {
|
||||
width: auto;
|
||||
height: auto;
|
||||
text-align: left;
|
||||
font-family: "Gotham Medium";
|
||||
color: $light-blue;
|
||||
font-size: 20px;
|
||||
background-color: transparent;
|
||||
background: transparent;
|
||||
text-decoration: none;
|
||||
margin-bottom: 7px;
|
||||
margin-right: 30px;
|
||||
}
|
||||
|
||||
.settings-credits-title {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: $dark-blue;
|
||||
font-family: "Gotham Medium";
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.entry {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.entry-name {
|
||||
width: auto;
|
||||
height: auto;
|
||||
color: $medium-blue;
|
||||
}
|
||||
|
||||
.entry-position {
|
||||
width: auto;
|
||||
height: auto;
|
||||
color: $light-blue
|
||||
}
|
||||
|
||||
.entry-links {
|
||||
width: auto;
|
||||
height: auto;
|
||||
color: $hover-blue
|
||||
}
|
||||
@ -49,6 +49,8 @@ $white: #fff;
|
||||
overflow: hidden;
|
||||
background-color: transparent;
|
||||
margin-bottom: 50px;
|
||||
animation: fadeInUp;
|
||||
animation-duration: .5s;
|
||||
}
|
||||
|
||||
.statistics-title {
|
||||
|
||||
@ -1,150 +0,0 @@
|
||||
$dark-blue: #002554;
|
||||
$medium-blue: #004990;
|
||||
$light-blue: #007cbe;
|
||||
$hover-blue: #25b3ff;
|
||||
$black: #000;
|
||||
$gray: #bdbdbd;
|
||||
$white: #fff;
|
||||
|
||||
.summary {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgb(0 37 84 / 100%) 0%,
|
||||
rgb(0 124 190 / 100%) 50%,
|
||||
rgb(255, 255, 255) 100%
|
||||
);
|
||||
background-color: transparent;
|
||||
overflow-y: visible;
|
||||
width: calc(100% - 300px);
|
||||
height: auto;
|
||||
display: block;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.summary-image {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
background: transparent;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.summary-image img {
|
||||
width: auto;
|
||||
height: 200px;
|
||||
background-color: transparent;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.summary-fieldContainer {
|
||||
width: 100%;
|
||||
min-height: calc(100% - 200px);
|
||||
height: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
background-color: transparent;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.summary-title {
|
||||
width: 80%;
|
||||
height: auto;
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
color: $white;
|
||||
font-family: "Gotham Medium";
|
||||
margin: 10px;
|
||||
background-color: transparent;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.summary-grid {
|
||||
width: 80%;
|
||||
height: auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
background-color: transparent;
|
||||
overflow: visible;
|
||||
// add row gap
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.summary-grid-container {
|
||||
width: 32%;
|
||||
height: 300px;
|
||||
background: linear-gradient(
|
||||
-30deg,
|
||||
rgb(187, 208, 236) 0%,
|
||||
rgba(255, 255, 255, 1) 100%
|
||||
);
|
||||
margin-top: 5px;
|
||||
|
||||
display: flex; /* Center the content */
|
||||
align-items: center; /* Center vertically */
|
||||
justify-content: center; /* Center horizontally */
|
||||
|
||||
border-radius: 20px;
|
||||
border: 1px solid $gray;
|
||||
transition: all 0.3s ease-in-out;
|
||||
text-decoration: none;
|
||||
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
|
||||
cursor: pointer;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.summary-iframe {
|
||||
width: 95%; /* Ensure iframes take up full width of their grid cell */
|
||||
height: 95%; /* Adjust the height of iframes */
|
||||
border-radius: 20px;
|
||||
|
||||
|
||||
// Debug Borders
|
||||
// border-width: 5px;
|
||||
// border-style: solid;
|
||||
}
|
||||
|
||||
// .summary-iframe {
|
||||
// width: 400px;
|
||||
// height: 400px;
|
||||
// min-height: 1px;
|
||||
// background: transparent;
|
||||
// margin: 10px;
|
||||
// display: block;
|
||||
// }
|
||||
|
||||
// .summary-fieldContainer-pp {
|
||||
// width: 25%;
|
||||
// height: 300px;
|
||||
// border-radius: 20px;
|
||||
// text-align: center;
|
||||
// padding: 10px;
|
||||
// }
|
||||
|
||||
// .summary-fieldContainer-graph {
|
||||
// width: 25%;
|
||||
// }
|
||||
|
||||
|
||||
// .summary-dashboard {
|
||||
// width: 100%;
|
||||
// height: 900px;
|
||||
// border-radius: 20px;
|
||||
// text-align: center;
|
||||
// padding: 10px;
|
||||
// }
|
||||
|
||||
// .summary-fieldContainer-dashboard {
|
||||
// width: 100%;
|
||||
// height: 300px;
|
||||
// border-radius: 20px;
|
||||
// text-align: center;
|
||||
// padding: 10px;
|
||||
// }
|
||||
@ -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-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>
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,7 +1,6 @@
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
import { createBrowserRouter, RouterProvider } from "react-router-dom";
|
||||
import SummaryRoute from "./routes/SummaryRoute";
|
||||
import BrowseRoute from "./routes/BrowseRoute";
|
||||
import SettingsRoute from "./routes/SettingsRoute";
|
||||
import MapRoute from "./routes/MapRoute";
|
||||
@ -26,7 +25,7 @@ const init = () => {
|
||||
const router = createBrowserRouter([
|
||||
{
|
||||
path: "/",
|
||||
element: <SummaryRoute socket={socket}></SummaryRoute>,
|
||||
element: <BrowseRoute socket={socket}></BrowseRoute>,
|
||||
// errorElement: <ErrorRoute></ErrorRoute>,
|
||||
},
|
||||
{
|
||||
|
||||
@ -13,7 +13,7 @@ export default class SettingsRoute extends Component {
|
||||
return (
|
||||
<div className="container">
|
||||
<NavBar />
|
||||
<SettingsComponent socketHandler={this.props.socket} />
|
||||
<SettingsComponent socket={this.props.socket} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,20 +0,0 @@
|
||||
import React, { Component } from "react";
|
||||
import NavBar from "../components/NavBar";
|
||||
import SummaryComponent from "../components/SummaryComponent";
|
||||
import "../assets/stylesheets/app.scss";
|
||||
|
||||
export default class HomeRoute extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
document.title = "Summary";
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="container">
|
||||
<NavBar />
|
||||
<SummaryComponent socketHandler={this.props.socket} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user