Add datasheet popup

2024-07-29 13:10:53 -05:00 · 2024-07-29 13:10:53 -05:00 · d2371c85ff
commit d2371c85ff
parent 5a3943ae46
6 changed files with 90 additions and 18 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -14,8 +14,9 @@
        "animate.css": "^4.1.1",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
+        "react-keep-alive": "^2.5.2",
        "react-modal": "^3.16.1",
-        "react-router-dom": "^6.22.3",
+        "react-router-dom": "^6.25.1",
        "react-scripts": "^5.0.1",
        "sass": "^1.70.0",
        "web-vitals": "^2.1.4"
@ -3619,9 +3620,10 @@
      }
    },
    "node_modules/@remix-run/router": {
-      "version": "1.15.3",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.3.tgz",
-      "integrity": "sha512-Oy8rmScVrVxWZVOpEF57ovlnhpZ8CCPlnIIumVcV9nFdiSIrus99+Lw78ekXyGvVDlIsFJbSfmSovJUhCWYV3w==",
+      "version": "1.18.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.18.0.tgz",
+      "integrity": "sha512-L3jkqmqoSVBVKHfpGZmLrex0lxR5SucGA0sUfFzGctehw+S/ggL9L/0NnC5mw6P8HUWpFZ3nQw3cRApjjWx9Sw==",
+      "license": "MIT",
      "engines": {
        "node": ">=14.0.0"
      }
@ -4268,6 +4270,12 @@
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
    },
+    "node_modules/@types/js-md5": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/@types/js-md5/-/js-md5-0.4.3.tgz",
+      "integrity": "sha512-BIga/WEqTi35ccnGysOuO4RmwVnpajv9oDB/sDQSY2b7/Ac7RyYR30bv7otZwByMvOJV9Vqq6/O1DFAnOzE4Pg==",
+      "license": "MIT"
+    },
    "node_modules/@types/json-schema": {
      "version": "7.0.15",
      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@ -8919,6 +8927,21 @@
        "he": "bin/he"
      }
    },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "node_modules/hoist-non-react-statics/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "license": "MIT"
+    },
    "node_modules/hoopy": {
      "version": "0.1.4",
      "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@ -11761,6 +11784,12 @@
        "jiti": "bin/jiti.js"
      }
    },
+    "node_modules/js-md5": {
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/js-md5/-/js-md5-0.7.3.tgz",
+      "integrity": "sha512-ZC41vPSTLKGwIRjqDh8DfXoCrdQIyBgspJVPXHBGu4nZlAEvG3nf+jO9avM9RmLiGakg7vz974ms99nEV0tmTQ==",
+      "license": "MIT"
+    },
    "node_modules/js-tokens": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@ -14711,6 +14740,22 @@
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
    },
+    "node_modules/react-keep-alive": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/react-keep-alive/-/react-keep-alive-2.5.2.tgz",
+      "integrity": "sha512-CoEsY5xE6rT31Z4p4UGZ/Crp0nZN+CY61ZflKzBGKB3D315jQMe2l8G5OrSEJ86V4stua7lSeFDIeG3DCuY2Rg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/js-md5": "^0.4.2",
+        "hoist-non-react-statics": "^3.3.0",
+        "js-md5": "^0.7.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.3.0",
+        "react-dom": ">=16.3.0",
+        "react-router-dom": ">=5.0.0"
+      }
+    },
    "node_modules/react-lifecycles-compat": {
      "version": "3.0.4",
      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
@ -14743,11 +14788,12 @@
      }
    },
    "node_modules/react-router": {
-      "version": "6.22.3",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.3.tgz",
-      "integrity": "sha512-dr2eb3Mj5zK2YISHK++foM9w4eBnO23eKnZEDs7c880P6oKbrjz/Svg9+nxqtHQK+oMW4OtjZca0RqPglXxguQ==",
+      "version": "6.25.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.25.1.tgz",
+      "integrity": "sha512-u8ELFr5Z6g02nUtpPAggP73Jigj1mRePSwhS/2nkTrlPU5yEkH1vYzWNyvSnSzeeE2DNqWdH+P8OhIh9wuXhTw==",
+      "license": "MIT",
      "dependencies": {
-        "@remix-run/router": "1.15.3"
+        "@remix-run/router": "1.18.0"
      },
      "engines": {
        "node": ">=14.0.0"
@ -14757,12 +14803,13 @@
      }
    },
    "node_modules/react-router-dom": {
-      "version": "6.22.3",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.3.tgz",
-      "integrity": "sha512-7ZILI7HjcE+p31oQvwbokjk6OA/bnFxrhJ19n82Ex9Ph8fNAq+Hm/7KchpMGlTgWhUxRHMMCut+vEtNpWpowKw==",
+      "version": "6.25.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.25.1.tgz",
+      "integrity": "sha512-0tUDpbFvk35iv+N89dWNrJp+afLgd+y4VtorJZuOCXK0kkCWjEvb3vTJM++SYvMEpbVwXKf3FjeVveVEb6JpDQ==",
+      "license": "MIT",
      "dependencies": {
-        "@remix-run/router": "1.15.3",
-        "react-router": "6.22.3"
+        "@remix-run/router": "1.18.0",
+        "react-router": "6.25.1"
      },
      "engines": {
        "node": ">=14.0.0"
--- a/package.json
+++ b/package.json
@ -9,8 +9,9 @@
    "animate.css": "^4.1.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
+    "react-keep-alive": "^2.5.2",
    "react-modal": "^3.16.1",
-    "react-router-dom": "^6.22.3",
+    "react-router-dom": "^6.25.1",
    "react-scripts": "^5.0.1",
    "sass": "^1.70.0",
    "web-vitals": "^2.1.4"
--- a/src/assets/stylesheets/cabledetail.scss
+++ b/src/assets/stylesheets/cabledetail.scss
@ -305,6 +305,18 @@ th:first-child {
  flex-direction: column;
 }

+.modal-datasheet {
+  width: 1000px;
+  height: 700px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: transparent;
+  flex-direction: column;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
 .modal-title span {
  width: auto;
  height: auto;
--- a/src/components/CableDetailComponent.js
+++ b/src/components/CableDetailComponent.js
@ -17,6 +17,7 @@ class Cable {
    this.image = cableData.image
      ? `http://${hostname}${cableData.image}`
      : DefaultPartImg;
+    this.datasheet = `http://${hostname}${cableData.datasheet}`
    this.dynamicProps = {};
    this.horizontal = [];
    this.vertical = [];
@ -350,8 +351,11 @@ export default class CableDetailComponent extends Component {
                  <span>✏️</span>
                  <span>Datasheet</span>
                </div>
-                <div className="modal-body">
-                  <span>Datasheet coming soon...</span>
+                <div className="modal-datasheet">
+                  {cableDetails ? (
+                    <iframe src={cableDetails.datasheet} height='70%' width='70%'></iframe>) : (<div className="datasheet"></div>)
+                }
+                  
                </div>
                <div
                  className="modal-close"
--- a/src/components/StatisticsComponent.js
+++ b/src/components/StatisticsComponent.js
@ -14,7 +14,7 @@ export default class StatisticsComponent extends Component {
          <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"
+                src="http://172.31.108.29:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=8"
                title="Belden"
                className="statistics-iframe"
              />
--- a/src/routes/StatisticsRoute.js
+++ b/src/routes/StatisticsRoute.js
@ -2,6 +2,10 @@ import React, { Component } from "react";
 import NavBar from "../components/NavBar";
 import StatisticsComponent from "../components/StatisticsComponent";
 import "../assets/stylesheets/app.scss";
+import {
+  Provider,
+  KeepAlive,
+} from 'react-keep-alive';

 export default class StatisticsRoute extends Component {
  constructor(props) {
@ -13,7 +17,11 @@ export default class StatisticsRoute extends Component {
    return (
      <div className="container">
        <NavBar socket={this.props.socket} />
-        <StatisticsComponent socketHandler={this.props.socket} />
+        <Provider>
+          <KeepAlive name="Grafana">
+            <StatisticsComponent socketHandler={this.props.socket} />
+          </KeepAlive>
+        </Provider>
      </div>
    );
  }