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

getcable

Browse Source
This commit is contained in:
scarlett kadan 2024-05-08 17:01:33 -04:00
parent 4cea1b0832
commit 6656e3ba43
12 changed files with 380 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/assets/stylesheets/browse.scss
View File

@ -70,6 +70,7 @@ $white: #fff;
transition: all 0.3s ease-in-out;
cursor: pointer;
text-decoration: none;
background-color: transparent;
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}

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

@ -6,7 +6,8 @@ $black: #000;
$gray: #bdbdbd;
$white: #fff;
.cable {
.cable,
.loading {
background: linear-gradient(
180deg,
rgb(0 37 84 / 100%) 0%,
@ -47,4 +48,141 @@ $white: #fff;
flex-direction: column;
overflow: hidden;
background-color: transparent;
}
}
.cable-main {
width: 80%;
height: 200px;
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;
padding: 25px;
margin-bottom: 5px;
margin-top: 5px;
transition: all 0.3s ease-in-out;
text-decoration: none;
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
.cable-actions {
width: calc(80% + 50px);
height: 60px;
background-color: transparent;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
margin-bottom: 5px;
margin-top: 5px;
transition: all 0.3s ease-in-out;
text-decoration: none;
overflow: visible;
}
.cable-actions-button, .cable-actions-back {
width: 32%;
height: 100%;
background: linear-gradient(
-30deg,
rgb(187, 208, 236) 0%,
rgba(255, 255, 255, 1) 100%
);
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: row;
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;
}
.cable-actions-button:hover, .cable-main:hover, .cable-actions-back:hover {
transform: translate3d(-5px, -5px, 0);
}
.cable-actions-back {
width: auto;
background: linear-gradient(
-30deg,
rgb(187, 194, 236) 0%,
rgba(255, 255, 255, 1) 100%
);
}
.cable-actions-button span, .cable-actions-back span {
text-align: center;
font-family: "Gotham Medium";
font-size: 20px;
text-decoration: none;
color: $medium-blue;
width: auto;
height: auto;
margin: 20px;
background-color: transparent;
}
.cable-main-image {
aspect-ratio: 1/1;
width: auto;
height: 100%;
object-fit: cover;
background-color: white;
margin-right: 25px;
border: $gray solid 1px;
border-radius: 10px;
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
.cable-main-label {
width: 60%;
height: 100%;
background-color: transparent;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
.cable-main-name {
background-color: transparent;
font-size: 32px;
color: $medium-blue;
width: auto;
height: auto;
font-family: "Gotham Bold";
margin-bottom: 5px;
}
.cable-main-description {
background-color: transparent;
font-size: 18px;
color: $medium-blue;
width: auto;
height: auto;
font-family: "Gotham Medium";
margin-bottom: 30px;
}
.cable-main-brand,
.cable-main-short,
.cable-main-position {
background-color: transparent;
font-size: 16px;
color: $light-blue;
color: $light-blue;
width: auto;
height: auto;
font-family: "Gotham Medium";
}

40
src/assets/stylesheets/map.scss
View File

@ -10,34 +10,42 @@ $white: #fff;
background: linear-gradient(
180deg,
rgb(0 37 84 / 100%) 0%,
rgb(0 124 190 / 100%) 26%,
rgb(255 255 255) 39%,
rgb(255 255 255 / 100%) 100%
rgb(0 124 190 / 100%) 50%,
rgb(255, 255, 255) 100%
);
background-color: transparent;
overflow-y: visible;
width: calc(100% - 300px);
height: auto;
overflow-y: visible;
display: flex;
align-items: center;
display: block;
justify-content: center;
flex-direction: column;
overflow: visible;
align-items: center;
}
.map-image {
width: auto;
height: 250px;
width: 100%;
height: 200px;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
}
.map-image img {
width: auto;
height: 200px;
background-color: transparent;
}
.map-fieldContainer {
width: 100%;
min-height: calc(100% - 250px);
min-height: calc(100% - 200px);
height: auto;
background-color: transparent;
display: flex;
align-items: flex-start;
justify-content: center;
flex-wrap: wrap;
}
align-items: center;
justify-content: flex-start;
flex-direction: column;
overflow: hidden;
background-color: transparent;
margin-bottom: 50px;
}

40
src/assets/stylesheets/settings.scss
View File

@ -10,34 +10,42 @@ $white: #fff;
background: linear-gradient(
180deg,
rgb(0 37 84 / 100%) 0%,
rgb(0 124 190 / 100%) 26%,
rgb(255 255 255) 39%,
rgb(255 255 255 / 100%) 100%
rgb(0 124 190 / 100%) 50%,
rgb(255, 255, 255) 100%
);
background-color: transparent;
overflow-y: visible;
width: calc(100% - 300px);
height: auto;
overflow-y: visible;
display: flex;
align-items: center;
display: block;
justify-content: center;
flex-direction: column;
overflow: visible;
align-items: center;
}
.settings-image {
width: auto;
height: 250px;
width: 100%;
height: 200px;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
}
.settings-image img {
width: auto;
height: 200px;
background-color: transparent;
}
.settings-fieldContainer {
width: 100%;
min-height: calc(100% - 250px);
min-height: calc(100% - 200px);
height: auto;
background-color: transparent;
display: flex;
align-items: flex-start;
justify-content: center;
flex-wrap: wrap;
}
align-items: center;
justify-content: flex-start;
flex-direction: column;
overflow: hidden;
background-color: transparent;
margin-bottom: 50px;
}

58
src/assets/stylesheets/summary.scss
View File

@ -10,34 +10,62 @@ $white: #fff;
background: linear-gradient(
180deg,
rgb(0 37 84 / 100%) 0%,
rgb(0 124 190 / 100%) 26%,
rgb(255 255 255) 39%,
rgb(255 255 255 / 100%) 100%
rgb(0 124 190 / 100%) 50%,
rgb(255, 255, 255) 100%
);
background-color: transparent;
overflow-y: visible;
width: calc(100% - 300px);
height: auto;
overflow-y: visible;
display: flex;
align-items: center;
display: block;
justify-content: center;
flex-direction: column;
overflow: visible;
align-items: center;
}
.summary-image {
width: auto;
height: 250px;
width: 100%;
height: 200px;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
}
.summary-image img {
width: auto;
height: 200px;
background-color: transparent;
}
.summary-fieldContainer {
width: 100%;
min-height: calc(100% - 250px);
min-height: calc(100% - 200px);
height: auto;
background-color: transparent;
display: flex;
align-items: flex-start;
justify-content: center;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
flex-direction: column;
overflow: hidden;
background-color: transparent;
margin-bottom: 50px;
}
.summary-fieldContainer-pp {
width: 25%;
height: 300px;
border-radius: 20px;
text-align: center;
padding: 10px;
}
.summary-fieldContainer-graph {
width: 25%;
}
.summary-fieldContainer-dashboard {
width: 100%;
height: 300px;
border-radius: 20px;
text-align: center;
padding: 10px;
}

20
src/components/BrowseComponent.js
View File

@ -19,23 +19,23 @@ class cable {
this.name = name;
this.brand = brand;
this.description = description;
this.short_description = short_description;
if (image === undefined) {
this.image = DefaultPartImg;
} else {
this.image = image;
}
this.short_description = short_description
? short_description
: description;
this.image = image
? `http://localhost${image}`
: DefaultPartImg;
}
returnDiv() {
return (
<NavLink className="browse-cable" to={"/cable/" + this.part_number}>
<NavLink className="browse-cable" to={"/browse/cable/" + this.position}>
<img className="browse-cable-image" src={this.image} alt="Cable" />
<div className="browse-cable-label">
<div className="browse-cable-name">{this.name}</div>
<div className="browse-cable-description">
<span style={{ color: "#007cbe" }}></span>
{this.description}
{this.short_description}
</div>
<div className="browse-cable-brand">
<span style={{ color: "black", backgroundColor: "transparent" }}>
@ -85,6 +85,7 @@ export default class BrowseComponent extends Component {
let map = message.data.map;
for (let i = 0; i < map.length; i++) {
let part_number = map[i].part_number;
let image = map[i].image;
let position = map[i].position;
let name = map[i].name;
let brand = map[i].brand;
@ -97,7 +98,8 @@ export default class BrowseComponent extends Component {
name,
brand,
description,
short_description
short_description,
image
)
);
}

171
src/components/CableDetailComponent.js
View File

@ -4,82 +4,143 @@ import DefaultPartImg from "../assets/images/part.png";
import { NavLink } from "react-router-dom";
import "../assets/stylesheets/cabledetail.scss";
class cable {
constructor(
part_number,
position,
name,
brand,
description,
short_description,
image
) {
this.part_number = part_number;
this.position = position;
this.name = name;
this.brand = brand;
this.description = description;
this.short_description = short_description;
if (image === undefined) {
this.image = DefaultPartImg;
} else {
this.image = image;
}
}
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;
this.dynamicProps = {};
returnDiv() {
return (
<NavLink className="browse-cable" to={"/cable/" + this.part_number}>
<img className="browse-cable-image" src={this.image} alt="Cable" />
<div className="browse-cable-label">
<div className="browse-cable-name">{this.name}</div>
<div className="browse-cable-brand">
<span style={{ color: "#007cbe" }}>Brand: </span>
{this.brand}
</div>
<div className="browse-cable-description">
<span style={{ color: "#007cbe" }}>About: </span>
{this.description}
</div>
</div>
<span className="browse-cable-arrow">{">"}</span>
</NavLink>
);
Object.keys(cableData).forEach((key) => {
if (!["partnum", "id", "brand", "position", "image"].includes(key)) {
this.dynamicProps[key] = cableData[key];
}
});
}
}
export default class CableDetailComponent extends Component {
constructor(props) {
super(props);
this.state = {
cableDetails: null,
};
}
componentDidMount() {
// this.props.socket.send('{"type":"cable_map","call":"request","data":{}}');
// this.props.socket.addEventListener("message", this.handleMessage);
const id = this.props.cableId;
console.log("ID: ", id);
const cablePos = window.location.href.split("/").pop();
this.props.socket.send(
`{"type":"cable_details","call":"request","data":{"position":["${cablePos}"]}}`
);
this.props.socket.addEventListener("message", this.handleMessage);
}
// handleMessage = (event) => {
// try {
// console.log("Message from server", event.data);
// const message = JSON.parse(event.data);
// } catch (error) {
// console.error("Error parsing message from server:", error);
// }
// };
handleMessage = (event) => {
try {
console.log("Message from server", event.data);
const message = JSON.parse(event.data);
const cableDetails = new Cable(message.data.cables[0]);
this.setState({ cableDetails });
} catch (error) {
console.error("Error parsing message from server:", error);
}
};
// componentWillUnmount() {
// this.props.socket.removeEventListener("message", this.handleMessage);
// }
componentWillUnmount() {
this.props.socket.removeEventListener("message", this.handleMessage);
}
renderTables() {
const { cableDetails } = this.state;
if (!cableDetails) return null;
return Object.keys(cableDetails.dynamicProps).map((key) => (
<div key={key}>
<h2>{key.replace(/([A-Z])/g, " $1").trim()}</h2>
<table>
<tbody>
{Object.entries(cableDetails.dynamicProps[key]).map(
([propKey, value]) => (
<tr key={propKey}>
<td>{propKey}</td>
<td>{Array.isArray(value) ? value.join(", ") : value}</td>
</tr>
)
)}
</tbody>
</table>
</div>
));
}
render() {
const { cableDetails } = this.state;
return (
<div className="cable">
<div className="cable-image">
<img src={BeldenLogo} alt="Belden" />
</div>
<div className="cable-fieldContainer">
<div className="cable-actions">
<NavLink to="/browse" className="cable-actions-back">
<span>⬅️ Back</span>
</NavLink>
</div>
{cableDetails ? (
<div className="cable-main">
<img
className="cable-main-image"
src={cableDetails.image}
alt="Cable"
/>
<div className="cable-main-label">
<div className="cable-main-name">{cableDetails.partnum}</div>
<div className="cable-main-description">
{cableDetails.description}
</div>
<div className="cable-main-brand">
<span
style={{ color: "black", backgroundColor: "transparent" }}
>
Brand:{" "}
</span>
{cableDetails.brand}
</div>
<div className="cable-main-position">
<span
style={{ color: "black", backgroundColor: "transparent" }}
>
Position:{" "}
</span>
{cableDetails.position}
</div>
</div>
</div>
) : (
<div className="cable-main"></div>
)}
<div className="cable-actions">
<div className="cable-actions-button">
<span>➤ Datasheet</span>
<span>✏️</span>
</div>
<div className="cable-actions-button">
<span>➤ Show</span>
<span>💡</span>
</div>
<div className="cable-actions-button">
<span>➤ Dispense</span>
<span>🤲</span>
</div>
</div>
</div>
</div>
);

7
src/components/MapComponent.js
View File

@ -6,8 +6,11 @@ export default class MapComponent extends Component {
render() {
return (
<div className="map">
<img className="map-image" src={BeldenLogo} alt="Belden" />
<div className="map-fieldContainer"></div>
<div className="map-image">
<img src={BeldenLogo} alt="Belden" />
</div>
<div className="map-fieldContainer">
</div>
</div>
);
}

4
src/components/SettingsComponent.js
View File

@ -6,7 +6,9 @@ export default class SettingsComponent extends Component {
render() {
return (
<div className="settings">
<img className="settings-image" src={BeldenLogo} alt="Belden" />
<div className="settings-image">
<img src={BeldenLogo} alt="Belden" />
</div>
<div className="settings-fieldContainer"></div>
</div>
);

19
src/components/SummaryComponent.js
View File

@ -6,15 +6,18 @@ export default class SummaryComponent extends Component {
render() {
return (
<div className="summary">
<img className="summary-image" src={BeldenLogo} alt="Belden" />
<div className="summary-fieldContainer"></div>
<div className="summary-image">
<img src={BeldenLogo} alt="Belden" />
</div>
<div className="summary-fieldContainer">
<p className="summary-fieldContainer-pp">hello this is from inside a pp hello this is from inside a pp hello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pphello this is from inside a pp</p>
</div>
<div className="summary-fieldContainer-dashboard">
<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>
{/* <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> */}
<iframe
src="http://192.168.1.12:3000/d-solo/cdiqwmlr8c9ogf/sensors?orgId=1&refresh=1s&theme=light&panelId=9"
width="450"
height="200"
frameborder="0"
></iframe>
</div>
);
}

2
src/index.js
View File

@ -43,7 +43,7 @@ const init = () => {
// errorElement: <ErrorRoute></ErrorRoute>,
},
{
path: "/cable/:cableId",
path: "/browse/cable/:cablePos",
element: <CableDetailRoute socket={socket} />,
// errorElement: <ErrorRoute></ErrorRoute>,
},

2
src/routes/CableDetailRoute.js
View File

@ -13,7 +13,7 @@ export default class CableDetailRoute extends Component {
return (
<div className="container">
<NavBar />
<CableDetailComponent />
<CableDetailComponent socket={this.props.socket} />
</div>
);
}