v1?

package-lock.json

@@ -11,6 +11,7 @@
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
+        "animate.css": "^4.1.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-modal": "^3.16.1",
@@ -4970,6 +4971,11 @@
         "ajv": "^6.9.1"
       }
     },
+    "node_modules/animate.css": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/animate.css/-/animate.css-4.1.1.tgz",
+      "integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ=="
+    },
     "node_modules/ansi-escapes": {
       "version": "4.3.2",
       "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "animate.css": "^4.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-modal": "^3.16.1",

src/assets/stylesheets/browse.scss

@@ -32,7 +32,6 @@ $white: #fff;
 }
 
 .browse-image img {
-  margin-top: 50px;
   width: auto;
   height: 200px;
   background-color: transparent;
@@ -50,6 +49,8 @@ $white: #fff;
   overflow: hidden;
   background-color: transparent;
   margin-bottom: 50px;
+  animation: fadeInUp;
+  animation-duration: .5s;
 }
 
 .browse-title {
@@ -93,14 +94,15 @@ $white: #fff;
   height: 75%;
   margin-right: 25px;
   margin-left: 20px;
-  background-color: transparent;
+  background-color: white;
   border: $gray solid 1px;
   border-radius: 10px;
   filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+  aspect-ratio: 1/1;
 }
 
 .browse-cable-label {
-  width: 90%;
+  width: 83%;
   height: auto;
   background-color: transparent;
 }

src/assets/stylesheets/cabledetail.scss

@@ -48,6 +48,8 @@ $white: #fff;
   flex-direction: column;
   overflow: hidden;
   background-color: transparent;
+  animation: fadeInUp;
+  animation-duration: .5s;
 }
 
 .cable-main {

src/assets/stylesheets/map.scss

@@ -48,6 +48,8 @@ $white: #fff;
   flex-direction: column;
   overflow: visible;
   background-color: transparent;
+  animation: fadeInUp;
+  animation-duration: .5s;
 }
 
 .map-title {
@@ -103,7 +105,7 @@ $white: #fff;
 
 .map-box-row {
   width: 100%;
-  height: 70px;
+  height: 60px;
   background-color: transparent;
   border-radius: 20px;
   display: flex;
@@ -114,8 +116,9 @@ $white: #fff;
 }
 
 .map-box-circle, .map-box-spacer {
-  width: 70px;
+  width: 60px;
-  height: 70px;
+  height: 60px;
+  aspect-ratio: 1/1;
   border-radius: 50%;
   background: linear-gradient(
     15deg,

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/BrowseComponent.js

@@ -8,20 +8,29 @@ export default class BrowseComponent extends Component {
     super(props);
     this.state = {
       cableList: [],
+      isLoading: true,
     };
   }
 
   componentDidMount() {
     this.props.socket.send('{"type":"cable_map","call":"request","data":{}}');
     this.props.socket.addEventListener("message", this.handleMessage);
+    setTimeout(() => {
+      this.setState({ isLoading: false });
+    }, 500);
   }
 
   handleMessage = (event) => {
     try {
-      console.log("Message from server", event.data);
       const message = JSON.parse(event.data);
       const cableList = this.browseParse(message);
-      this.setState({ cableList });
+      if (!this.state.isLoading) {
+        this.setState({ cableList });
+      } else {
+        setTimeout(() => {
+          this.setState({ cableList });
+        }, 500 - new Date());
+      }
     } catch (error) {
       console.error("Error parsing message from server:", error);
     }
@@ -63,9 +72,26 @@ export default class BrowseComponent extends Component {
 
   searchUpdate = () => {
     let value = document.querySelector(".browse-search input").value;
-    this.props.socket.send(`{"type":"cable_search","call":"request","data":{"string":"${value}"}}`);
+    this.props.socket.send(
+      `{"type":"cable_search","call":"request","data":{"string":"${value}"}}`
+    );
   };
 
+  returnPlaceholder() {
+    return (
+      <div className="browse-cable">
+        <div className="browse-cable-image" />
+        <div className="browse-cable-label">
+          <div className="browse-cable-name"></div>
+          <div className="browse-cable-description"></div>
+          <div className="browse-cable-brand"></div>
+          <div className="browse-cable-position"></div>
+        </div>
+        <span className="browse-cable-arrow">{">"}</span>
+      </div>
+    );
+  }
+
   render() {
     return (
       <div className="browse">
@@ -81,9 +107,22 @@ export default class BrowseComponent extends Component {
               placeholder="🔎 Start typing to search..."
             />
           </div>
-          {this.state.cableList.map((cableObj, index) => (
+          {this.state.isLoading ? (
-            <React.Fragment key={index}>{cableObj.returnDiv()}</React.Fragment>
+            <React.Fragment>
-          ))}
+              {this.returnPlaceholder()}
+              {this.returnPlaceholder()}
+              {this.returnPlaceholder()}
+              {this.returnPlaceholder()}
+              {this.returnPlaceholder()}
+              {this.returnPlaceholder()}
+            </React.Fragment>
+          ) : (
+            this.state.cableList.map((cableObj, index) => (
+              <React.Fragment key={index}>
+                {cableObj.returnDiv()}
+              </React.Fragment>
+            ))
+          )}
         </div>
       </div>
     );

src/components/CableDetailComponent.js

@@ -57,6 +57,7 @@ class Cable {
           "description",
           "application",
           "category",
+          "datasheet"
         ].includes(key)
       ) {
         this.dynamicProps[key] = cableData[key];

src/components/MapComponent.js

@@ -3,6 +3,7 @@ import BeldenLogo from "../assets/images/belden-white.png";
 import cable from "../utils/Cable";
 import "../assets/stylesheets/map.scss";
 import { NavLink } from "react-router-dom";
+import "animate.css"
 
 export default class MapComponent extends Component {
   constructor(props) {

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