fixed statistics

remove my init :) init();
Adding Statists Page!
2024-05-10 12:56:39 -04:00 · 2024-05-10 11:47:50 -05:00 · 2024-05-10 11:18:41 -05:00 · 2024-05-10 09:57:32 -05:00 · 2024-05-10 01:50:18 -04:00 · 2024-05-10 00:02:25 -04:00
15 changed files with 868 additions and 100 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
        "@testing-library/user-event": "^13.5.0",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
+        "react-modal": "^3.16.1",
        "react-router-dom": "^6.22.3",
        "react-scripts": "^5.0.1",
        "sass": "^1.70.0",
@@ -8026,6 +8027,11 @@
        "url": "https://github.com/sindresorhus/execa?sponsor=1"
      }
    },
+    "node_modules/exenv": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
+      "integrity": "sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw=="
+    },
    "node_modules/exit": {
      "version": "0.1.2",
      "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
@@ -14699,6 +14705,29 @@
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
    },
+    "node_modules/react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
+    "node_modules/react-modal": {
+      "version": "3.16.1",
+      "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.16.1.tgz",
+      "integrity": "sha512-VStHgI3BVcGo7OXczvnJN7yT2TWHJPDXZWyI/a0ssFNhGZWsPmB8cF0z33ewDXq4VfYMO1vXgiv/g8Nj9NDyWg==",
+      "dependencies": {
+        "exenv": "^1.2.0",
+        "prop-types": "^15.7.2",
+        "react-lifecycles-compat": "^3.0.0",
+        "warning": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "peerDependencies": {
+        "react": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18",
+        "react-dom": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18"
+      }
+    },
    "node_modules/react-refresh": {
      "version": "0.11.0",
      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -17467,6 +17496,14 @@
        "makeerror": "1.0.12"
      }
    },
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
    "node_modules/watchpack": {
      "version": "2.4.0",
      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
+    "react-modal": "^3.16.1",
    "react-router-dom": "^6.22.3",
    "react-scripts": "^5.0.1",
    "sass": "^1.70.0",
--- a/src/assets/stylesheets/browse.scss
+++ b/src/assets/stylesheets/browse.scss
@@ -50,9 +50,22 @@ $white: #fff;
  margin-bottom: 50px;
 }

+.browse-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;
+}
+
 .browse-cable {
  width: 80%;
-  height: 100px;
+  height: 150px;
  background: linear-gradient(
    -30deg,
    rgb(187, 208, 236) 0%,
@@ -64,7 +77,6 @@ $white: #fff;
  flex-direction: row;
  border-radius: 20px;
  border: 1px solid $gray;
-  padding: 25px;
  margin-bottom: 5px;
  margin-top: 5px;
  transition: all 0.3s ease-in-out;
@@ -80,8 +92,9 @@ $white: #fff;

 .browse-cable-image {
  width: auto;
-  height: 100%;
+  height: 75%;
  margin-right: 25px;
+  margin-left: 20px;
  background-color: transparent;
  border: $gray solid 1px;
  border-radius: 10px;
@@ -98,6 +111,7 @@ $white: #fff;
  width: auto;
  height: auto;
  font-size: 35px;
+  margin-right: 20px;
  transform: scaleY(2);
  font-family: "Gotham Book";
  color: $medium-blue;
@@ -126,9 +140,11 @@ $white: #fff;

 .browse-cable-brand,
 .browse-cable-short,
-.browse-cable-position {
+.browse-cable-position,
+.browse-cable-category {
  background-color: transparent;
-  font-size: 16px;
+  font-size: 15px;
+  margin-bottom: 2px;
  color: $light-blue;
  color: $light-blue;
  width: auto;
--- a/src/assets/stylesheets/cabledetail.scss
+++ b/src/assets/stylesheets/cabledetail.scss
@@ -182,7 +182,8 @@ $white: #fff;

 .cable-main-brand,
 .cable-main-short,
-.cable-main-position {
+.cable-main-position,
+.cable-main-category {
  background-color: transparent;
  font-size: 16px;
  color: $light-blue;
@@ -287,3 +288,68 @@ th:first-child {
  margin-top: 15px;
  padding-left: 10px;
 }
+
+.modal-container {
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.modal-title,
+.modal-body,
+.modal-close {
+  width: auto;
+  height: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: transparent;
+  flex-direction: column;
+}
+
+.modal-title span {
+  width: auto;
+  height: auto;
+  font-family: "Gotham Bold";
+  font-size: 32px;
+  color: $dark-blue;
+  background-color: transparent;
+  margin-bottom: 5px;
+}
+
+.modal-body span {
+  width: auto;
+  height: auto;
+  background-color: transparent;
+  font-family: "Gotham Medium";
+  font-size: 18px;
+  color: $medium-blue;
+  margin-top: 10px;
+  margin-bottom: 30px;
+}
+
+.modal-close span {
+  width: auto;
+  height: auto;
+  background-color: transparent;
+  font-family: "Gotham Medium";
+  font-size: 18px;
+  color: $dark-blue;
+}
+
+.modal-close {
+  cursor: pointer;
+  padding: 15px 35px 15px 35px;
+  border-radius: 20px;
+  background-color: $gray;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  transition: all 0.3s ease-in-out;
+}
+
+.modal-close:hover {
+  background-color: $hover-blue;
+}
--- a/src/assets/stylesheets/map.scss
+++ b/src/assets/stylesheets/map.scss
@@ -45,7 +45,107 @@ $white: #fff;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
-  overflow: hidden;
+  overflow: visible;
  background-color: transparent;
-  margin-bottom: 50px;
+}
+
+.map-title {
+  width: 80%;
+  height: auto;
+  font-size: 32px;
+  font-weight: bold;
+  color: $white;
+  font-family: "Gotham Medium";
+  margin: 10px;
+  background-color: transparent;
+  margin-bottom: 25px;
+}
+
+.map-boxContainer {
+  width: 80%;
+  height: auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-direction: row;
+  background-color: transparent;
+  overflow: visible;
+}
+
+.map-box, .map-details {
+  height: 600px;
+  background: linear-gradient(
+    -30deg,
+    rgb(187, 208, 236) 0%,
+    rgba(255, 255, 255, 1) 100%
+  );
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  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));
+  overflow: visible;
+}
+
+.map-box {
+  width: 60%;
+}
+
+.map-details {
+  width: 38%;
+}
+
+.map-box-row {
+  width: 100%;
+  height: 60px;
+  background-color: transparent;
+  border-radius: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: row;
+
+  overflow: visible;
+}
+
+.map-box-circle, .map-box-spacer {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  background-color: $white;
+  margin-left: 3px;
+  margin-right: 3px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: all 0.3s ease-in-out;
+}
+
+.map-box-circle {
+  filter: drop-shadow(5px 5px 2px rgba(0, 0, 0, 0.15));
+  cursor: pointer;
+}
+
+.map-box-circle:hover, .map-box:hover, .map-details:hover {
+  transform: translate3d(-5px, -5px, 0);
+}
+
+.map-box-spacer {
+  background-color: transparent;
+  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0);
+  border: 1px solid transparent;
+}
+
+.map-box-circle-inner {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background-color: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
--- a/src/assets/stylesheets/statistics.scss
+++ b/src/assets/stylesheets/statistics.scss
@@ -0,0 +1,154 @@
+$dark-blue: #002554;
+$medium-blue: #004990;
+$light-blue: #007cbe;
+$hover-blue: #25b3ff;
+$black: #000;
+$gray: #bdbdbd;
+$white: #fff;
+
+.statistics {
+  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;
+}
+
+.statistics-image {
+  width: 100%;
+  height: 200px;
+  background: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.statistics-image img {
+  width: auto;
+  height: 200px;
+  background-color: transparent;
+}
+
+.statistics-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;
+}
+
+.statistics-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;
+}
+
+.statistics-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;
+}
+
+.statistics-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;
+}
+
+.statistics-grid-container:hover {
+  transform: translate3d(-5px, -5px, 0);
+}
+
+
+.statistics-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;
+// }
--- a/src/assets/stylesheets/summary.scss
+++ b/src/assets/stylesheets/summary.scss
@@ -2,6 +2,10 @@ $dark-blue: #002554;
 $medium-blue: #004990;
 $light-blue: #007cbe;
 $hover-blue: #25b3ff;
+$black: #000;
+$gray: #bdbdbd;
+$white: #fff;
+
 .summary {
  background: linear-gradient(
    180deg,
@@ -34,16 +38,6 @@ $hover-blue: #25b3ff;
 }

 .summary-fieldContainer {
-  // width: 100%;
-  // min-height: calc(100% - 250px);
-  // height: auto;
-  // background-color: transparent;
-  // display: flex;
-  // align-items: flex-start;
-  // justify-content: center;
-  // flex-wrap: wrap;
-
-  // below is taken from browse.scss
  width: 100%;
  min-height: calc(100% - 200px);
  height: auto;
@@ -56,27 +50,69 @@ $hover-blue: #25b3ff;
  margin-bottom: 50px;
 }

-
-.summary-grid {
-  width: 100%;
-  display: grid;
-  grid-template-columns: repeat(2, 1fr); /* 2 columns */
-  grid-gap: 10px; /* Adjust the gap between iframes */
-  grid-row-gap: 5px; /* Adjust the gap between rows */
-
-  
-  // Debug Borders
-      border-width: 5px;
-      border-style: solid;
+.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-grid-container:hover {
+  transform: translate3d(-5px, -5px, 0);
+}
+
+
 .summary-iframe {
-  width: 100%; /* Ensure iframes take up full width of their grid cell */
-  height: 300px; /* Adjust the height of iframes */
+  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;
+      // border-width: 5px;
+      // border-style: solid;
 }

 // .summary-iframe {
@@ -96,9 +132,18 @@ $hover-blue: #25b3ff;
 //   padding: 10px;
 // }

-.summary-fieldContainer-graph {
-  width: 25%;
-}
+// .summary-fieldContainer-graph {
+//   width: 25%;
+// }
+
+
+// .summary-dashboard {
+//   width: 100%;
+//   height: 900px;
+//   border-radius: 20px;
+//   text-align: center;
+//   padding: 10px;
+// }

 // .summary-fieldContainer-dashboard {
 //   width: 100%;
--- a/src/components/BrowseComponent.js
+++ b/src/components/BrowseComponent.js
@@ -12,20 +12,37 @@ class cable {
    brand,
    description,
    short_description,
-    image
+    image,
+    category,
+    application
  ) {
    this.part_number = part_number;
    this.position = position;
    this.name = name;
    this.brand = brand;
-    this.description = description;
-    this.short_description = short_description
-      ? short_description
-      : description;
    this.image = image ? `http://localhost${image}` : DefaultPartImg;

-    if (this.short_description != undefined) {
-      this.short_description = this.short_description.charAt(0).toUpperCase() + this.short_description.slice(1);
+    this.category = category;
+    this.application = application;
+    this.short_description = short_description;
+    this.description = description;
+
+    if (short_description === undefined) {
+      if (this.description !== undefined) {
+        this.short_description = this.description;
+      } else if (this.application !== undefined) {
+        this.short_description = this.application;
+      } else if (this.category !== undefined) {
+        this.short_description = this.category;
+      } else {
+        this.short_description = "";
+      }
+    }
+
+    if (this.short_description !== undefined) {
+      this.short_description =
+        this.short_description.charAt(0).toUpperCase() +
+        this.short_description.slice(1);
      if (this.short_description.length > 100) {
        this.short_description =
          this.short_description.substring(0, 80) + "...";
@@ -43,6 +60,14 @@ class cable {
            <span style={{ color: "#007cbe" }}></span>
            {this.short_description}
          </div>
+          {this.category ? (
+            <div className="browse-cable-category">
+              <span style={{ color: "black", backgroundColor: "transparent" }}>
+                Category:{" "}
+              </span>
+              {this.category}
+            </div>
+          ) : null}
          <div className="browse-cable-brand">
            <span style={{ color: "black", backgroundColor: "transparent" }}>
              Brand:{" "}
@@ -97,6 +122,8 @@ export default class BrowseComponent extends Component {
      let brand = map[i].brand;
      let description = map[i].description;
      let short_description = map[i].short_description;
+      let category = map[i].category;
+      let application = map[i].application;
      cableList.push(
        new cable(
          part_number,
@@ -105,7 +132,9 @@ export default class BrowseComponent extends Component {
          brand,
          description,
          short_description,
-          image
+          image,
+          category,
+          application
        )
      );
    }
@@ -123,6 +152,7 @@ export default class BrowseComponent extends Component {
          <img src={BeldenLogo} alt="Belden" />
        </div>
        <div className="browse-fieldContainer">
+          <h1 className="browse-title">Browse</h1>
          {this.state.cableList.map((cableObj, index) => (
            <React.Fragment key={index}>{cableObj.returnDiv()}</React.Fragment>
          ))}
--- a/src/components/CableDetailComponent.js
+++ b/src/components/CableDetailComponent.js
@@ -2,17 +2,17 @@ import React, { Component } from "react";
 import BeldenLogo from "../assets/images/belden-white.png";
 import DefaultPartImg from "../assets/images/part.png";
 import { NavLink } from "react-router-dom";
+import Modal from "react-modal";
 import "../assets/stylesheets/cabledetail.scss";

+Modal.setAppElement("#root");
+
 class Cable {
  constructor(cableData) {
    this.partnum = cableData.partnum;
    this.id = cableData.id;
    this.brand = cableData.brand;
    this.position = cableData.position;
-    this.description = cableData.description
-      ? cableData.image
-      : "No description available.";
    this.image = cableData.image
      ? `http://localhost${cableData.image}`
      : DefaultPartImg;
@@ -20,6 +20,30 @@ class Cable {
    this.horizontal = [];
    this.vertical = [];
    this.orderedKeys = [];
+    this.description = cableData.description;
+    this.short_description = cableData.short_description;
+    this.application = cableData.application;
+    this.category = cableData.category;
+
+    if (this.description === undefined) {
+      if (this.short_description !== undefined) {
+        this.description = this.short_description;
+      } else if (this.application !== undefined) {
+        this.description = this.application;
+      } else if (this.category !== undefined) {
+        this.description = this.category;
+      } else {
+        this.description = "";
+      }
+    }
+
+    if (this.description !== undefined) {
+      this.description =
+        this.description.charAt(0).toUpperCase() + this.description.slice(1);
+      if (this.description.length > 200) {
+        this.description = this.description.substring(0, 200) + "...";
+      }
+    }

    Object.keys(cableData).forEach((key) => {
      if (
@@ -79,9 +103,33 @@ export default class CableDetailComponent extends Component {
    super(props);
    this.state = {
      cableDetails: null,
+      modalOpen_dispense: false,
+      modalOpen_show: false,
+      modalOpen_datasheet: false,
+      modalOpacity: 0,
    };
+    this.openModal = this.openModal.bind(this);
+    this.closeModal = this.closeModal.bind(this);
  }

+  openModal = (modal) => {
+    this.setState({ [modal]: true }, () => {
+      setTimeout(() => this.setState({ modalOpacity: 1 }), 10);
+    });
+
+    if (modal === "modalOpen_dispense") {
+      this.props.socket.send(`{"type": "cable_get","call": "send","data": {"position": ${this.state.cableDetails.position}}}`);
+    } else if (modal === "modalOpen_show") {
+      this.props.socket.send(`{"type": "cable_get","call": "request","data": {"position": ${this.state.cableDetails.position}}}`);
+    }
+  };
+
+  closeModal = (modal) => {
+    this.setState({ modalOpacity: 0 }, () => {
+      setTimeout(() => this.setState({ [modal]: false }), 300);
+    });
+  };
+
  componentDidMount() {
    const cablePos = window.location.href.split("/").pop();
    this.props.socket.send(
@@ -114,14 +162,16 @@ export default class CableDetailComponent extends Component {
      return <div>Error loading data...</div>;
    }

-    const keys = Object.keys(data);
-    const maxRows = Math.max(...keys.map((key) => data[key].length));
+    const validKeys = Object.keys(data).filter((key) =>
+      Array.isArray(data[key])
+    );
+
+    const maxRows = Math.max(...validKeys.map((key) => data[key].length));

    const rows = Array.from({ length: maxRows }).map((_, rowIndex) => {
-
      return (
        <tr className="row" key={rowIndex}>
-          {keys.map((key, index) => (
+          {validKeys.map((key, index) => (
            <td className="body" key={index}>
              {data[key][rowIndex] || ""}
            </td>
@@ -136,7 +186,7 @@ export default class CableDetailComponent extends Component {
        <table>
          <thead className="thead">
            <tr className="row">
-              {keys.map((key, index) => (
+              {validKeys.map((key, index) => (
                <th className="head" key={index}>
                  {key}
                </th>
@@ -174,7 +224,42 @@ export default class CableDetailComponent extends Component {
  }

  render() {
-    const { cableDetails } = this.state;
+    const {
+      modalOpen_dispense,
+      modalOpen_show,
+      modalOpen_datasheet,
+      modalOpacity,
+      cableDetails,
+    } = this.state;
+    const modalStyle = {
+      content: {
+        opacity: modalOpacity,
+        transition: "opacity 300ms ease-in-out",
+        top: "50%",
+        left: "50%",
+        right: "auto",
+        bottom: "auto",
+        marginRight: "-50%",
+        width: "30%",
+        height: "30%",
+        transform: "translate(-50%, -50%)",
+        overflow: "hidden",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        borderRadius: "20px",
+        background:
+          "linear-gradient(-30deg, rgb(187, 194, 236) 0%, rgba(255, 255, 255, 1) 100%)",
+        boxShadow: "0 0 20px rgba(0, 0, 0, 0.5)",
+      },
+      overlay: {
+        opacity: modalOpacity,
+        transition: "opacity 300ms ease-in-out",
+        backgroundColor: "rgba(255, 255, 255, 0.15)",
+        backdropFilter: "blur(5px)",
+      },
+    };

    return (
      <div className="cable">
@@ -199,6 +284,18 @@ export default class CableDetailComponent extends Component {
                <div className="cable-main-description">
                  {cableDetails.description}
                </div>
+
+                {cableDetails.category ? (
+                  <div className="cable-main-category">
+                    <span
+                      style={{ color: "black", backgroundColor: "transparent" }}
+                    >
+                      Category:{" "}
+                    </span>
+                    {cableDetails.category}
+                  </div>
+                ) : null}
+
                <div className="cable-main-brand">
                  <span
                    style={{ color: "black", backgroundColor: "transparent" }}
@@ -221,35 +318,97 @@ export default class CableDetailComponent extends Component {
            <div className="cable-main"></div>
          )}
          <div className="cable-actions">
-            <div className="cable-actions-button">
+            <div
+              className="cable-actions-button"
+              onClick={() => this.openModal("modalOpen_datasheet")}
+            >
              <span>➤ Datasheet</span>
              <span>✏️</span>
            </div>
-            <div className="cable-actions-button">
+            <Modal
+              isOpen={modalOpen_datasheet}
+              onRequestClose={() => this.closeModal("modalOpen_datasheet")}
+              contentLabel="show"
+              style={modalStyle}
+            >
+              <div className="modal-container">
+                <div className="modal-title">
+                  <span>✏️</span>
+                  <span>Datasheet</span>
+                </div>
+                <div className="modal-body">
+                  <span>Datasheet coming soon...</span>
+                </div>
+                <div
+                  className="modal-close"
+                  onClick={() => this.closeModal("modalOpen_datasheet")}
+                >
+                  <span>Close</span>
+                </div>
+              </div>
+            </Modal>
+            <div
+              className="cable-actions-button"
+              onClick={() => this.openModal("modalOpen_show")}
+            >
              <span>➤ Show</span>
              <span>💡</span>
            </div>
-            <div className="cable-actions-button">
-              <span>➤ Dispense</span>
-              <span>🤲</span>
+            <Modal
+              isOpen={modalOpen_show}
+              onRequestClose={() => this.closeModal("modalOpen_show")}
+              contentLabel="show"
+              style={modalStyle}
+            >
+              <div className="modal-container">
+                <div className="modal-title">
+                  <span>💡</span>
+                  <span>Showing Item</span>
                </div>
+                <div className="modal-body">
+                  <span>The item will now be illuminated.</span>
+                </div>
+                <div
+                  className="modal-close"
+                  onClick={() => this.closeModal("modalOpen_show")}
+                >
+                  <span>Close</span>
+                </div>
+              </div>
+            </Modal>
+            <div
+              className="cable-actions-button"
+              onClick={() => this.openModal("modalOpen_dispense")}
+            >
+              <span>➤ Dispense</span>
+              <span>🤖</span>
+            </div>
+            <Modal
+              isOpen={modalOpen_dispense}
+              onRequestClose={() => this.closeModal("modalOpen_dispense")}
+              contentLabel="Dispense"
+              style={modalStyle}
+            >
+              <div className="modal-container">
+                <div className="modal-title">
+                  <span>🤖</span>
+                  <span>Dispensing Item</span>
+                </div>
+                <div className="modal-body">
+                  <span>Please wait for your item to be dispensed.</span>
+                </div>
+                <div
+                  className="modal-close"
+                  onClick={() => this.closeModal("modalOpen_dispense")}
+                >
+                  <span>Close</span>
+                </div>
+              </div>
+            </Modal>
          </div>

          {cableDetails ? (
            <div className="cable-tables">
-              {/* {Object.entries(cableDetails.dynamicProps).map(
-                ([key, value], index) => {
-                  if (cableDetails.horizontal.includes(key)) {
-                    return this.renderHorizontalTable(
-                      key,
-                      JSON.stringify(value)
-                    );
-                  } else {
-                    return this.renderVerticalTable(key, JSON.stringify(value));
-                  }
-                }
-              )} */}
-
              {cableDetails.orderedKeys.map((key, index) => {
                if (cableDetails.horizontal.includes(key)) {
                  return this.renderHorizontalTable(
--- a/src/components/MapComponent.js
+++ b/src/components/MapComponent.js
@@ -3,6 +3,17 @@ import BeldenLogo from "../assets/images/belden-white.png";
 import "../assets/stylesheets/map.scss";

 export default class MapComponent extends Component {
+  renderCircle(id, color) {
+    return (
+      <div className="map-box-circle" id={id}>
+        <div
+          className="map-box-circle-inner"
+          style={{ border: `${color} 4px solid` }}
+        ></div>
+      </div>
+    );
+  }
+
  render() {
    return (
      <div className="map">
@@ -10,6 +21,91 @@ export default class MapComponent extends Component {
          <img src={BeldenLogo} alt="Belden" />
        </div>
        <div className="map-fieldContainer">
+          <h1 className="map-title">Map</h1>
+          <div className="map-boxContainer">
+            <div className="map-box">
+              <div className="map-box-row" id="row-1">
+                {this.renderCircle("circle-1", "#004990")}
+                {this.renderCircle("circle-2", "#004990")}
+                {this.renderCircle("circle-3", "#004990")}
+                {this.renderCircle("circle-4", "#004990")}
+                {this.renderCircle("circle-5", "#004990")}
+              </div>
+              <div className="map-box-row" id="row-2">
+                {this.renderCircle("circle-1", "#004990")}
+                {this.renderCircle("circle-2", "#004990")}
+                {this.renderCircle("circle-3", "#004990")}
+                {this.renderCircle("circle-4", "#004990")}
+                {this.renderCircle("circle-5", "#004990")}
+                {this.renderCircle("circle-6", "#004990")}
+              </div>
+              <div className="map-box-row" id="row-3">
+                {this.renderCircle("circle-1", "#004990")}
+                {this.renderCircle("circle-2", "#004990")}
+                {this.renderCircle("circle-3", "#004990")}
+                {this.renderCircle("circle-4", "#004990")}
+                {this.renderCircle("circle-5", "#004990")}
+                {this.renderCircle("circle-6", "#004990")}
+                {this.renderCircle("circle-7", "#004990")}
+              </div>
+              <div className="map-box-row" id="row-4">
+                {this.renderCircle("circle-1", "#004990")}
+                {this.renderCircle("circle-2", "#004990")}
+                {this.renderCircle("circle-3", "#004990")}
+                <div className="map-box-spacer"></div>
+                <div className="map-box-spacer"></div>
+                {this.renderCircle("circle-4", "#004990")}
+                {this.renderCircle("circle-5", "#004990")}
+                {this.renderCircle("circle-6", "#004990")}
+              </div>
+              <div className="map-box-row" id="row-5">
+                {this.renderCircle("circle-1", "#004990")}
+                {this.renderCircle("circle-2", "#004990")}
+                {this.renderCircle("circle-3", "#004990")}
+                <div className="map-box-spacer"></div>
+                <div className="map-box-spacer"></div>
+                <div className="map-box-spacer"></div>
+                {this.renderCircle("circle-4", "#004990")}
+                {this.renderCircle("circle-5", "#004990")}
+                {this.renderCircle("circle-6", "#004990")}
+              </div>
+              <div className="map-box-row" id="row-6">
+                {this.renderCircle("circle-1", "#004990")}
+                {this.renderCircle("circle-2", "#004990")}
+                {this.renderCircle("circle-3", "#004990")}
+                <div className="map-box-spacer"></div>
+                <div className="map-box-spacer"></div>
+                {this.renderCircle("circle-4", "#004990")}
+                {this.renderCircle("circle-5", "#004990")}
+                {this.renderCircle("circle-6", "#004990")}
+              </div>
+              <div className="map-box-row" id="row-7">
+                {this.renderCircle("circle-1", "#004990")}
+                {this.renderCircle("circle-2", "#004990")}
+                {this.renderCircle("circle-3", "#004990")}
+                {this.renderCircle("circle-4", "#004990")}
+                {this.renderCircle("circle-5", "#004990")}
+                {this.renderCircle("circle-6", "#004990")}
+                {this.renderCircle("circle-7", "#004990")}
+              </div>
+              <div className="map-box-row" id="row-8">
+                {this.renderCircle("circle-1", "#004990")}
+                {this.renderCircle("circle-2", "#004990")}
+                {this.renderCircle("circle-3", "#004990")}
+                {this.renderCircle("circle-4", "#004990")}
+                {this.renderCircle("circle-5", "#004990")}
+                {this.renderCircle("circle-6", "#004990")}
+              </div>
+              <div className="map-box-row" id="row-9">
+                {this.renderCircle("circle-1", "#004990")}
+                {this.renderCircle("circle-2", "#004990")}
+                {this.renderCircle("circle-3", "#004990")}
+                {this.renderCircle("circle-4", "#004990")}
+                {this.renderCircle("circle-5", "#004990")}
+              </div>
+            </div>
+            <div className="map-details"></div>
+          </div>
        </div>
      </div>
    );
--- a/src/components/NavBar.js
+++ b/src/components/NavBar.js
@@ -17,6 +17,9 @@ export default class NavBar extends Component {
    } 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";
@@ -50,6 +53,9 @@ export default class NavBar extends Component {
            <NavLink className="navbar-list-item" id="map" to="/map">
              <span id="map-s">🗺️ Map</span>
            </NavLink>
+            <NavLink className="navbar-list-item" id="statistics" to="/statistics">
+              <span id="statistics-s">📊 Statistics</span>
+            </NavLink>
            <NavLink className="navbar-list-item" id="settings" to="/settings">
              <span id="settings-s">⚙️ Settings</span>
            </NavLink>
--- a/src/components/StatisticsComponent.js
+++ b/src/components/StatisticsComponent.js
@@ -0,0 +1,38 @@
+import React, { Component } from "react";
+import BeldenLogo from "../assets/images/belden-white.png";
+import "../assets/stylesheets/statistics.scss";
+
+export default class StatisticsComponent extends Component {
+  render() {
+    return (
+      <div className="statistics">
+        <div className="statistics-image">
+          <img src={BeldenLogo} alt="Belden" />
+        </div>
+        <div className="statistics-fieldContainer">
+          <h1 className="statistics-title">Statistics</h1>
+          <div className="statistics-grid">
+            <div className="statistics-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="statistics-iframe" />
+            </div>
+            <div className="statistics-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="statistics-iframe" />
+            </div>
+            <div className="statistics-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="statistics-iframe" />
+            </div>
+            <div className="statistics-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="statistics-iframe" />
+            </div>
+            <div className="statistics-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="statistics-iframe" />
+            </div>
+            <div className="statistics-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="statistics-iframe" />
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
--- a/src/components/SummaryComponent.js
+++ b/src/components/SummaryComponent.js
@@ -6,36 +6,30 @@ export default class SummaryComponent extends Component {
  render() {
    return (
      <div className="summary">
-        <img className="summary-image" src={BeldenLogo} alt="Belden" />
+        <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-iframe"> */}
-            <iframe
-              className="summary-iframe"
-              src="=http://192.168.1.12:3000/d/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&viewPanel=9"
-              // width="400"
-              // height="300"
-              frameborder="0"
-            ></iframe>
-            <iframe
-              className="summary-iframe"
-              src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=7"
-              // width="400"
-              // height="300"
-              frameborder="0"
-            ></iframe>
-            <iframe
-              className="summary-iframe"
-              src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=7"
-              frameborder="0"
-            ></iframe>
-            <iframe
-              className="summary-iframe"
-              src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=7"
-              frameborder="0"
-            ></iframe>
-            {/* </div> */}
-            {/* <iframe src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=7" width="450" height="200" frameborder="0"></iframe> */}
+            <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>
--- a/src/index.js
+++ b/src/index.js
@@ -5,6 +5,7 @@ import SummaryRoute from "./routes/SummaryRoute";
 import BrowseRoute from "./routes/BrowseRoute";
 import SettingsRoute from "./routes/SettingsRoute";
 import MapRoute from "./routes/MapRoute";
+import StatisticsRoute from "./routes/StatisticsRoute";
 import CableDetailRoute from "./routes/CableDetailRoute";

 // Root
@@ -43,6 +44,11 @@ const init = () => {
      element: <MapRoute socket={socket}></MapRoute>,
      // errorElement: <ErrorRoute></ErrorRoute>,
    },
+    {
+      path: "/statistics",
+      element: <StatisticsRoute socket={socket}></StatisticsRoute>,
+      // errorElement: <ErrorRoute></ErrorRoute>,
+    },
    {
      path: "/browse/cable/:cablePos",
      element: <CableDetailRoute socket={socket} />,
--- a/src/routes/StatisticsRoute.js
+++ b/src/routes/StatisticsRoute.js
@@ -0,0 +1,20 @@
+import React, { Component } from "react";
+import NavBar from "../components/NavBar";
+import StatisticsComponent from "../components/StatisticsComponent";
+import "../assets/stylesheets/app.scss";
+
+export default class StatisticsRoute extends Component {
+  constructor(props) {
+    super(props);
+    document.title = "Statistics";
+  }
+
+  render() {
+    return (
+      <div className="container">
+        <NavBar />
+        <StatisticsComponent socketHandler={this.props.socket} />
+      </div>
+    );
+  }
+}
Author	SHA1	Message	Date
Scarlett	67cb5f82a9	fixed statistics	2024-05-10 12:56:39 -04:00
Lucas	0d650bbcc0	remove my init :) init();	2024-05-10 11:47:50 -05:00
Lucas	9de494d6ae	Adding Statists Page!	2024-05-10 11:18:41 -05:00
Lucas	e784bbfa64	Adding graphs	2024-05-10 09:57:32 -05:00
Scarlett	ac94ad837f	local push	2024-05-10 01:50:18 -04:00
Scarlett	fa8f1441c8	summary start	2024-05-10 00:02:25 -04:00
Scarlett	bc4d6a6ced	Merge branch 'main' of https://git.myitr.org/Jukebox/jukebox-web	2024-05-09 23:40:22 -04:00
Lucas	51f50d59fe	Merge branch 'main' of https://git.myitr.org/Jukebox/jukebox-web	2024-05-09 22:40:15 -05:00
Scarlett	0642af3c4d	browse page is functional now	2024-05-09 23:40:11 -04:00
Lucas	132afabf73	Grid and Full Dashboard is working	2024-05-09 22:40:09 -05:00