qr code added
This commit is contained in:
parent
b0c6bf37b8
commit
03ed1f22e8
@ -5,39 +5,27 @@
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<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" />
|
||||
<!--
|
||||
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" />
|
||||
<!--
|
||||
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>
|
||||
</head>
|
||||
<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>
|
||||
<!--
|
||||
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>
|
||||
</html>
|
||||
|
||||
BIN
src/assets/images/default_qr.png
Normal file
BIN
src/assets/images/default_qr.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.4 KiB |
@ -62,7 +62,7 @@ $white: #fff;
|
||||
);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
border-radius: 20px;
|
||||
border: 1px solid $gray;
|
||||
@ -134,7 +134,8 @@ $white: #fff;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.cable-main-image {
|
||||
.cable-main-image,
|
||||
.cable-main-imageqr {
|
||||
aspect-ratio: 1/1;
|
||||
width: auto;
|
||||
height: 100%;
|
||||
@ -146,6 +147,23 @@ $white: #fff;
|
||||
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 {
|
||||
width: 60%;
|
||||
height: 100%;
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import React, { Component } from "react";
|
||||
import BeldenLogo from "../assets/images/belden-white.png";
|
||||
import DefaultPartImg from "../assets/images/part.png";
|
||||
import DefaultQRImg from "../assets/images/default_qr.png";
|
||||
import { NavLink } from "react-router-dom";
|
||||
import Modal from "react-modal";
|
||||
import "../assets/stylesheets/cabledetail.scss";
|
||||
@ -26,6 +27,9 @@ class Cable {
|
||||
this.short_description = cableData.short_description;
|
||||
this.application = cableData.application;
|
||||
this.category = cableData.category;
|
||||
this.qrcode = cableData.qrcode
|
||||
? `http://${hostname}${cableData.qrcode}`
|
||||
: DefaultQRImg;
|
||||
|
||||
if (this.description === undefined) {
|
||||
if (this.short_description !== undefined) {
|
||||
@ -60,6 +64,7 @@ class Cable {
|
||||
"application",
|
||||
"category",
|
||||
"datasheet",
|
||||
"qrcode",
|
||||
].includes(key)
|
||||
) {
|
||||
this.dynamicProps[key] = cableData[key];
|
||||
@ -320,6 +325,19 @@ export default class CableDetailComponent extends Component {
|
||||
{parseInt(cableDetails.position) + 1}
|
||||
</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 className="cable-main"></div>
|
||||
|
||||
@ -11,7 +11,7 @@ export default class NavBar extends Component {
|
||||
this.state = {
|
||||
modalOpen_activeArm: false,
|
||||
modalOpacity: 0,
|
||||
mode: "idle"
|
||||
mode: "idle",
|
||||
};
|
||||
this.openModal = this.openModal.bind(this);
|
||||
this.closeModal = this.closeModal.bind(this);
|
||||
@ -56,7 +56,7 @@ export default class NavBar extends Component {
|
||||
if (this.state.mode === "idle") {
|
||||
this.closeModal("modalOpen_activeArm");
|
||||
}
|
||||
}, 3000);
|
||||
}, 1500);
|
||||
} else {
|
||||
this.openModal("modalOpen_activeArm");
|
||||
}
|
||||
|
||||
@ -14,7 +14,7 @@ export default class StatisticsComponent extends Component {
|
||||
<div className="statistics-grid">
|
||||
<div className="statistics-grid-container">
|
||||
<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"
|
||||
className="statistics-iframe"
|
||||
/>
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
import React from "react";
|
||||
import DefaultPartImg from "../assets/images/part.png";
|
||||
import DefaultQRImg from "../assets/images/default_qr.png";
|
||||
import { NavLink } from "react-router-dom";
|
||||
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 {
|
||||
constructor(
|
||||
@ -15,7 +16,8 @@ export default class cable {
|
||||
short_description,
|
||||
image,
|
||||
category,
|
||||
application
|
||||
application,
|
||||
qrcode
|
||||
) {
|
||||
this.part_number = part_number;
|
||||
this.position = position;
|
||||
@ -28,6 +30,8 @@ export default class cable {
|
||||
this.short_description = short_description;
|
||||
this.description = description;
|
||||
|
||||
this.qrcode = qrcode ? `http://${hostname}${qrcode}` : DefaultQRImg;
|
||||
|
||||
if (short_description === undefined) {
|
||||
if (this.description !== undefined) {
|
||||
this.short_description = this.description;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user