v1?

src/assets/stylesheets/navbar.scss

@@ -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;

src/assets/stylesheets/settings.scss

@@ -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
 }

src/assets/stylesheets/statistics.scss

@@ -49,6 +49,8 @@ $white: #fff;
   overflow: hidden;
   background-color: transparent;
   margin-bottom: 50px;
+  animation: fadeInUp;
+  animation-duration: .5s;
 }
 
 .statistics-title {

src/assets/stylesheets/summary.scss

@@ -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;
-// }

src/components/NavBar.js

@@ -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")) {
+    if (path.includes("statistics")) {
-      document.getElementById("browse").style.backgroundColor = "#007CBE";
+      document.getElementById("statistics").style.backgroundColor = "#007CBE";
-      document.getElementById("browse-s").style.color = "white";
+      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("browse").style.backgroundColor = "#007CBE";
-      document.getElementById("home-s").style.color = "white";
+      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>

src/components/SettingsComponent.js

@@ -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>
     );
   }

src/components/SummaryComponent.js

@@ -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>
-    );
-  }
-}

src/index.js

@@ -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>,
     },
     {

src/routes/SettingsRoute.js

@@ -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>
     );
   }

src/routes/SummaryRoute.js

@@ -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>
-    );
-  }
-}