v1
This commit is contained in:
@ -57,7 +57,7 @@ class Cable {
|
||||
"description",
|
||||
"application",
|
||||
"category",
|
||||
"datasheet"
|
||||
"datasheet",
|
||||
].includes(key)
|
||||
) {
|
||||
this.dynamicProps[key] = cableData[key];
|
||||
@ -119,9 +119,13 @@ export default class CableDetailComponent extends Component {
|
||||
});
|
||||
|
||||
if (modal === "modalOpen_dispense") {
|
||||
this.props.socket.send(`{"type": "cable_get","call": "send","data": {"position": ${this.state.cableDetails.position}}}`);
|
||||
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}}}`);
|
||||
this.props.socket.send(
|
||||
`{"type": "cable_get","call": "request","data": {"position": ${this.state.cableDetails.position}}}`
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ import BeldenLogo from "../assets/images/belden-white.png";
|
||||
import cable from "../utils/Cable";
|
||||
import "../assets/stylesheets/map.scss";
|
||||
import { NavLink } from "react-router-dom";
|
||||
import "animate.css"
|
||||
import "animate.css";
|
||||
|
||||
export default class MapComponent extends Component {
|
||||
constructor(props) {
|
||||
@ -258,7 +258,10 @@ export default class MapComponent extends Component {
|
||||
{parseInt(cable.position) + 1}
|
||||
</div>
|
||||
</div>
|
||||
<NavLink to={"/map/cable/" + cable.position} className="map-cable-moreinfo">
|
||||
<NavLink
|
||||
to={"/map/cable/" + cable.position}
|
||||
className="map-cable-moreinfo"
|
||||
>
|
||||
<span>More Info</span>
|
||||
</NavLink>
|
||||
</div>
|
||||
|
||||
@ -1,14 +1,20 @@
|
||||
import React, { Component } from "react";
|
||||
import { NavLink } from "react-router-dom";
|
||||
import Modal from "react-modal";
|
||||
import "../assets/stylesheets/navbar.scss";
|
||||
|
||||
Modal.setAppElement("#root");
|
||||
|
||||
export default class NavBar extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
clicks: 0,
|
||||
timer: null,
|
||||
modalOpen_return: false,
|
||||
modalOpacity: 0,
|
||||
};
|
||||
this.openModal = this.openModal.bind(this);
|
||||
this.closeModal = this.closeModal.bind(this);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
@ -41,8 +47,7 @@ export default class NavBar extends Component {
|
||||
this.setState({ clicks: clicks + 1 });
|
||||
|
||||
if (clicks + 1 === 3) {
|
||||
|
||||
window.location.replace("/settings")
|
||||
window.location.replace("/settings");
|
||||
|
||||
clearTimeout(timer);
|
||||
this.setState({ clicks: 0, timer: null });
|
||||
@ -55,7 +60,59 @@ export default class NavBar extends Component {
|
||||
}
|
||||
}
|
||||
|
||||
openModal = (modal) => {
|
||||
this.setState({ [modal]: true }, () => {
|
||||
setTimeout(() => this.setState({ modalOpacity: 1 }), 10);
|
||||
});
|
||||
};
|
||||
|
||||
closeModal = (modal) => {
|
||||
this.setState({ modalOpacity: 0 }, () => {
|
||||
setTimeout(() => this.setState({ [modal]: false }), 300);
|
||||
});
|
||||
};
|
||||
|
||||
returnCable = (tray) => {
|
||||
this.props.socket.send(
|
||||
`{"type": "cable_get","call": "send","data": {"tray": ${tray}}}`
|
||||
);
|
||||
console.log("Cable returned from tray " + tray);
|
||||
this.closeModal("modalOpen_return");
|
||||
};
|
||||
|
||||
render() {
|
||||
const { modalOpen_return, modalOpacity } = 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="navbar">
|
||||
<div className="navbar-top">
|
||||
@ -80,6 +137,48 @@ export default class NavBar extends Component {
|
||||
</NavLink>
|
||||
</ol>
|
||||
</div>
|
||||
<div
|
||||
className="navbar-return"
|
||||
onClick={() => this.openModal("modalOpen_return")}
|
||||
>
|
||||
<span id="browse-s">Return Cable</span>
|
||||
</div>
|
||||
<Modal
|
||||
isOpen={modalOpen_return}
|
||||
onRequestClose={() => this.closeModal("modalOpen_return")}
|
||||
contentLabel="show"
|
||||
style={modalStyle}
|
||||
>
|
||||
<div className="modal-container">
|
||||
<div className="modal-title">
|
||||
<span>♻️</span>
|
||||
<span>Return Cable</span>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<span>Select the tray you would like to return from.</span>
|
||||
</div>
|
||||
<div className="modal-tray">
|
||||
<div className="modal-return" onClick={() => this.returnCable(0)}>
|
||||
<span>1</span>
|
||||
</div>
|
||||
<div className="modal-return" onClick={() => this.returnCable(1)}>
|
||||
<span>2</span>
|
||||
</div>
|
||||
<div className="modal-return" onClick={() => this.returnCable(2)}>
|
||||
<span>3</span>
|
||||
</div>
|
||||
<div className="modal-return" onClick={() => this.returnCable(3)}>
|
||||
<span>4</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="modal-close"
|
||||
onClick={() => this.closeModal("modalOpen_return")}
|
||||
>
|
||||
<span>Cancel</span>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -41,37 +41,64 @@ export default class SettingsComponent extends Component {
|
||||
<div className="entry">
|
||||
<span className="entry-name">Cole Deck,</span>
|
||||
<span className="entry-position">Project Lead,</span>
|
||||
<a className="entry-links">https://deck.sh</a>
|
||||
<a className="entry-links" href="https://deck.sh">
|
||||
https://deck.sh
|
||||
</a>
|
||||
</div>
|
||||
<div className="entry">
|
||||
<span className="entry-name">Natorion Johnson,</span>
|
||||
<span className="entry-position">Lead PCB assembler,</span>
|
||||
<a className="entry-links">https://linkedin.com/in/NatorionJ</a>
|
||||
<a
|
||||
className="entry-links"
|
||||
href="https://linkedin.com/in/NatorionJ"
|
||||
>
|
||||
https://linkedin.com/in/NatorionJ
|
||||
</a>
|
||||
</div>
|
||||
<div className="entry">
|
||||
<span className="entry-name">Fannie,</span>
|
||||
<span className="entry-position">CAD Design, Fabrication Planner</span>
|
||||
<a className="entry-links">https://linkedin.com/in/fannieyu</a>
|
||||
<span className="entry-position">
|
||||
CAD Design, Fabrication Planner
|
||||
</span>
|
||||
<a
|
||||
className="entry-links"
|
||||
href="https://linkedin.com/in/fannieyu"
|
||||
>
|
||||
https://linkedin.com/in/fannieyu
|
||||
</a>
|
||||
</div>
|
||||
<div className="entry">
|
||||
<span className="entry-name">Elias Frey Reschly,</span>
|
||||
<span className="entry-position">Mechanical Design, Fabrication</span>
|
||||
<a className="entry-links"></a>
|
||||
<span className="entry-position">
|
||||
Mechanical Design, Fabrication
|
||||
</span>
|
||||
<div className="entry-links"></div>
|
||||
</div>
|
||||
<div className="entry">
|
||||
<span className="entry-name">Scarlett Deck,</span>
|
||||
<span className="entry-position">Front-End Dev, UI/UX Designer,</span>
|
||||
<a className="entry-links">https://kadan.live</a>
|
||||
<span className="entry-position">
|
||||
Front-End Dev, UI/UX Designer,
|
||||
</span>
|
||||
<a className="entry-links" href="https://kadan.live">
|
||||
https://kadan.live
|
||||
</a>
|
||||
</div>
|
||||
<div className="entry">
|
||||
<span className="entry-name">Lucas Ferguson,</span>
|
||||
<span className="entry-position">Front-End Dev,</span>
|
||||
<a className="entry-links">https://lucasferguson.webflow.io</a>
|
||||
<a
|
||||
className="entry-links"
|
||||
href="https://lucasferguson.webflow.io"
|
||||
>
|
||||
https://lucasferguson.webflow.io
|
||||
</a>
|
||||
</div>
|
||||
<div className="entry">
|
||||
<span className="entry-name">Dustin Thomas,</span>
|
||||
<span className="entry-position">Back-End Dev,</span>
|
||||
<a className="entry-links">https://cptlobster.dev</a>
|
||||
<a className="entry-links" href="https://cptlobster.dev">
|
||||
https://cptlobster.dev
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -13,26 +13,50 @@ export default class StatisticsComponent extends Component {
|
||||
<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" />
|
||||
<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" />
|
||||
<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" />
|
||||
<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" />
|
||||
<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" />
|
||||
<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" />
|
||||
<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>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -19,7 +19,6 @@ socket.addEventListener("open", function (event) {
|
||||
init();
|
||||
});
|
||||
|
||||
|
||||
// Initialize the app
|
||||
const init = () => {
|
||||
const router = createBrowserRouter([
|
||||
@ -65,4 +64,4 @@ const init = () => {
|
||||
<RouterProvider router={router} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
@ -12,7 +12,7 @@ export default class BrowseRoute extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="container">
|
||||
<NavBar />
|
||||
<NavBar socket={this.props.socket} />
|
||||
<BrowseComponent socket={this.props.socket} />
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -12,7 +12,7 @@ export default class CableDetailRoute extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="container">
|
||||
<NavBar />
|
||||
<NavBar socket={this.props.socket} />
|
||||
<CableDetailComponent socket={this.props.socket} />
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -12,7 +12,7 @@ export default class MapRoute extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="container">
|
||||
<NavBar />
|
||||
<NavBar socket={this.props.socket} />
|
||||
<MapComponent socket={this.props.socket} />
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -12,7 +12,7 @@ export default class SettingsRoute extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="container">
|
||||
<NavBar />
|
||||
<NavBar socket={this.props.socket} />
|
||||
<SettingsComponent socket={this.props.socket} />
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -12,7 +12,7 @@ export default class StatisticsRoute extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="container">
|
||||
<NavBar />
|
||||
<NavBar socket={this.props.socket} />
|
||||
<StatisticsComponent socketHandler={this.props.socket} />
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user