Jukebox/jukebox-web
10
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

qr code added

Browse Source
This commit is contained in:
scarlett kadan
2024-08-20 00:18:20 -04:00
parent b0c6bf37b8
commit 03ed1f22e8
7 changed files with 63 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
public/index.html
View File

@@ -5,39 +5,27 @@
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>Belden Jukebox</title> <title>Belden Jukebox</title>
</head> </head>
<body> <body>
<noscript>Belden Jukebox UI</noscript> <noscript>
<p>
<b>Belden Jukebox Error:</b><br />
JavaScript is required to run this application.<br />
Please enable JavaScript in your browser.<br /><br />
<a
href="https://www.enable-javascript.com/"
target="_blank"
rel="noopener noreferrer"
>
Here are the instructions how to enable JavaScript in your web
browser!
</a>
</p>
</noscript>
<div id="root"></div> <div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body> </body>
</html> </html>

BIN
src/assets/images/default_qr.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.4 KiB

22
src/assets/stylesheets/cabledetail.scss
View File

@@ -62,7 +62,7 @@ $white: #fff;
); );
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: space-between;
flex-direction: row; flex-direction: row;
border-radius: 20px; border-radius: 20px;
border: 1px solid $gray; border: 1px solid $gray;
@@ -134,7 +134,8 @@ $white: #fff;
background-color: transparent; background-color: transparent;
} }
.cable-main-image { .cable-main-image,
.cable-main-imageqr {
aspect-ratio: 1/1; aspect-ratio: 1/1;
width: auto; width: auto;
height: 100%; height: 100%;
@@ -146,6 +147,23 @@ $white: #fff;
filter: drop-shadow(0 4px 4px rgb(0 0 0 / 25%)); filter: drop-shadow(0 4px 4px rgb(0 0 0 / 25%));
} }
.cable-main-imageqr {
margin-right: 0;
margin-left: 25px;
display: flex;
align-items: center;
justify-content: center;
}
.cable-main-imageqr img {
width: 80%;
height: 80%;
object-fit: cover;
background-color: white;
border: $gray solid 1px;
filter: drop-shadow(0 4px 4px rgb(0 0 0 / 25%));
}
.cable-main-label { .cable-main-label {
width: 60%; width: 60%;
height: 100%; height: 100%;

18
src/components/CableDetailComponent.js
View File

@@ -1,6 +1,7 @@
import React, { Component } from "react"; import React, { Component } from "react";
import BeldenLogo from "../assets/images/belden-white.png"; import BeldenLogo from "../assets/images/belden-white.png";
import DefaultPartImg from "../assets/images/part.png"; import DefaultPartImg from "../assets/images/part.png";
import DefaultQRImg from "../assets/images/default_qr.png";
import { NavLink } from "react-router-dom"; import { NavLink } from "react-router-dom";
import Modal from "react-modal"; import Modal from "react-modal";
import "../assets/stylesheets/cabledetail.scss"; import "../assets/stylesheets/cabledetail.scss";
@@ -26,6 +27,9 @@ class Cable {
this.short_description = cableData.short_description; this.short_description = cableData.short_description;
this.application = cableData.application; this.application = cableData.application;
this.category = cableData.category; this.category = cableData.category;
this.qrcode = cableData.qrcode
? `http://${hostname}${cableData.qrcode}`
: DefaultQRImg;
if (this.description === undefined) { if (this.description === undefined) {
if (this.short_description !== undefined) { if (this.short_description !== undefined) {
@@ -60,6 +64,7 @@ class Cable {
"application", "application",
"category", "category",
"datasheet", "datasheet",
"qrcode",
].includes(key) ].includes(key)
) { ) {
this.dynamicProps[key] = cableData[key]; this.dynamicProps[key] = cableData[key];
@@ -320,6 +325,19 @@ export default class CableDetailComponent extends Component {
{parseInt(cableDetails.position) + 1} {parseInt(cableDetails.position) + 1}
</div> </div>
</div> </div>
{cableDetails.qrcode !== DefaultQRImg ? (
<div className="cable-main-imageqr">
<img src={cableDetails.qrcode} alt="" />
</div>
) : (
<div
className="cable-main-imageqr"
src={cableDetails.qrcode}
alt=""
style={{ visibility: "hidden" }}
/>
)}
</div> </div>
) : ( ) : (
<div className="cable-main"></div> <div className="cable-main"></div>

4
src/components/NavBar.js
View File

@@ -11,7 +11,7 @@ export default class NavBar extends Component {
this.state = { this.state = {
modalOpen_activeArm: false, modalOpen_activeArm: false,
modalOpacity: 0, modalOpacity: 0,
mode: "idle" mode: "idle",
}; };
this.openModal = this.openModal.bind(this); this.openModal = this.openModal.bind(this);
this.closeModal = this.closeModal.bind(this); this.closeModal = this.closeModal.bind(this);
@@ -56,7 +56,7 @@ export default class NavBar extends Component {
if (this.state.mode === "idle") { if (this.state.mode === "idle") {
this.closeModal("modalOpen_activeArm"); this.closeModal("modalOpen_activeArm");
} }
}, 3000); }, 1500);
} else { } else {
this.openModal("modalOpen_activeArm"); this.openModal("modalOpen_activeArm");
} }

2
src/components/StatisticsComponent.js
View File

@@ -14,7 +14,7 @@ export default class StatisticsComponent extends Component {
<div className="statistics-grid"> <div className="statistics-grid">
<div className="statistics-grid-container"> <div className="statistics-grid-container">
<iframe <iframe
src="http://172.31.108.29:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=8" src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=8"
title="Belden" title="Belden"
className="statistics-iframe" className="statistics-iframe"
/> />

8
src/utils/Cable.js
View File

@@ -1,9 +1,10 @@
import React from "react"; import React from "react";
import DefaultPartImg from "../assets/images/part.png"; import DefaultPartImg from "../assets/images/part.png";
import DefaultQRImg from "../assets/images/default_qr.png";
import { NavLink } from "react-router-dom"; import { NavLink } from "react-router-dom";
import "../assets/stylesheets/browse.scss"; import "../assets/stylesheets/browse.scss";
const hostname = window.location.hostname; // Get the hostname from the URL bar const hostname = window.location.hostname; // Get the hostname from the URL bar
export default class cable { export default class cable {
constructor( constructor(
@@ -15,7 +16,8 @@ export default class cable {
short_description, short_description,
image, image,
category, category,
application application,
qrcode
) { ) {
this.part_number = part_number; this.part_number = part_number;
this.position = position; this.position = position;
@@ -28,6 +30,8 @@ export default class cable {
this.short_description = short_description; this.short_description = short_description;
this.description = description; this.description = description;
this.qrcode = qrcode ? `http://${hostname}${qrcode}` : DefaultQRImg;
if (short_description === undefined) { if (short_description === undefined) {
if (this.description !== undefined) { if (this.description !== undefined) {
this.short_description = this.description; this.short_description = this.description;