Arm in motion modal
This commit is contained in:
parent
08eebd400b
commit
9dcebb9d88
@ -33,6 +33,7 @@ $white: #fff;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.navbar-top-secret {
|
||||
@ -51,10 +52,9 @@ $white: #fff;
|
||||
justify-content: left;
|
||||
padding-left: 4px;
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 15px;
|
||||
color: $light-blue;
|
||||
background-color: transparent;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.navbar-top h1 {
|
||||
@ -80,7 +80,8 @@ $white: #fff;
|
||||
}
|
||||
|
||||
.navbar-list-item,
|
||||
.navbar-return {
|
||||
.navbar-return,
|
||||
.navbar-settings {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
margin: 0 0 3px;
|
||||
@ -95,7 +96,8 @@ $white: #fff;
|
||||
}
|
||||
|
||||
.navbar-list-item span,
|
||||
.navbar-return span {
|
||||
.navbar-return span,
|
||||
.navbar-settings span {
|
||||
background-color: transparent;
|
||||
width: auto;
|
||||
height: auto;
|
||||
@ -105,6 +107,19 @@ $white: #fff;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.navbar-settings {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
background-color: $dark-blue;
|
||||
}
|
||||
|
||||
.navbar-settings span {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.navbar-return {
|
||||
width: 90%;
|
||||
align-items: center;
|
||||
@ -131,6 +146,7 @@ $white: #fff;
|
||||
.modal-title,
|
||||
.modal-body,
|
||||
.modal-close,
|
||||
.modal-closeX,
|
||||
.modal-return {
|
||||
width: auto;
|
||||
height: auto;
|
||||
@ -175,7 +191,8 @@ $white: #fff;
|
||||
}
|
||||
|
||||
.modal-close,
|
||||
.modal-return {
|
||||
.modal-return,
|
||||
.modal-closeX {
|
||||
cursor: pointer;
|
||||
padding: 15px 35px;
|
||||
border-radius: 20px;
|
||||
@ -186,7 +203,8 @@ $white: #fff;
|
||||
}
|
||||
|
||||
.modal-close span,
|
||||
.modal-return span {
|
||||
.modal-return span,
|
||||
.modal-closeX span {
|
||||
width: auto;
|
||||
height: auto;
|
||||
background-color: transparent;
|
||||
@ -196,6 +214,11 @@ $white: #fff;
|
||||
color: $dark-blue;
|
||||
}
|
||||
|
||||
.modal-closeX {
|
||||
background-color: rgb(255, 152, 152);
|
||||
box-shadow: 0 4px 4px rgba(94, 1, 1, 0.25);
|
||||
}
|
||||
|
||||
.modal-return {
|
||||
width: 30px;
|
||||
height: 20px;
|
||||
|
||||
@ -21,14 +21,11 @@ export default class BrowseComponent extends Component {
|
||||
}
|
||||
|
||||
handleMessage = (event) => {
|
||||
//console.log("Got message!");
|
||||
try {
|
||||
const message = JSON.parse(event.data);
|
||||
const cableList = this.browseParse(message);
|
||||
this.setState({ cableList });
|
||||
} catch (error) {
|
||||
console.error("Error parsing message from server:", error);
|
||||
}
|
||||
} catch (error) {}
|
||||
};
|
||||
|
||||
browseParse(message) {
|
||||
|
||||
@ -6,7 +6,7 @@ import Modal from "react-modal";
|
||||
import "../assets/stylesheets/cabledetail.scss";
|
||||
|
||||
Modal.setAppElement("#root");
|
||||
const hostname = window.location.hostname; // Get the hostname from the URL bar
|
||||
const hostname = window.location.hostname; // Get the hostname from the URL bar
|
||||
|
||||
class Cable {
|
||||
constructor(cableData) {
|
||||
@ -17,7 +17,7 @@ class Cable {
|
||||
this.image = cableData.image
|
||||
? `http://${hostname}${cableData.image}`
|
||||
: DefaultPartImg;
|
||||
this.datasheet = `http://${hostname}${cableData.datasheet}`
|
||||
this.datasheet = `http://${hostname}${cableData.datasheet}`;
|
||||
this.dynamicProps = {};
|
||||
this.horizontal = [];
|
||||
this.vertical = [];
|
||||
@ -106,7 +106,6 @@ export default class CableDetailComponent extends Component {
|
||||
super(props);
|
||||
this.state = {
|
||||
cableDetails: null,
|
||||
modalOpen_dispense: false,
|
||||
modalOpen_show: false,
|
||||
modalOpen_datasheet: false,
|
||||
modalOpacity: 0,
|
||||
@ -120,11 +119,7 @@ export default class CableDetailComponent extends Component {
|
||||
setTimeout(() => this.setState({ modalOpacity: 1 }), 10);
|
||||
});
|
||||
|
||||
if (modal === "modalOpen_dispense") {
|
||||
this.props.socket.send(
|
||||
`{"type": "cable_get","call": "send","data": {"position": ${this.state.cableDetails.position}}}`
|
||||
);
|
||||
} else if (modal === "modalOpen_show") {
|
||||
if (modal === "modalOpen_show") {
|
||||
this.props.socket.send(
|
||||
`{"type": "cable_get","call": "request","data": {"position": ${this.state.cableDetails.position}}}`
|
||||
);
|
||||
@ -137,6 +132,12 @@ export default class CableDetailComponent extends Component {
|
||||
});
|
||||
};
|
||||
|
||||
dispense() {
|
||||
this.props.socket.send(
|
||||
`{"type": "cable_get","call": "send","data": {"position": ${this.state.cableDetails.position}}}`
|
||||
);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const cablePos = window.location.href.split("/").pop();
|
||||
this.props.socket.send(
|
||||
@ -147,13 +148,10 @@ export default class CableDetailComponent extends Component {
|
||||
|
||||
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);
|
||||
}
|
||||
} catch (error) {}
|
||||
};
|
||||
|
||||
componentWillUnmount() {
|
||||
@ -165,7 +163,6 @@ export default class CableDetailComponent extends Component {
|
||||
try {
|
||||
data = JSON.parse(object);
|
||||
} catch (error) {
|
||||
console.error("Error parsing JSON data:", error);
|
||||
return <div>Error loading data...</div>;
|
||||
}
|
||||
|
||||
@ -231,13 +228,8 @@ export default class CableDetailComponent extends Component {
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
modalOpen_dispense,
|
||||
modalOpen_show,
|
||||
modalOpen_datasheet,
|
||||
modalOpacity,
|
||||
cableDetails,
|
||||
} = this.state;
|
||||
const { modalOpen_show, modalOpen_datasheet, modalOpacity, cableDetails } =
|
||||
this.state;
|
||||
const modalStyle = {
|
||||
content: {
|
||||
opacity: modalOpacity,
|
||||
@ -260,7 +252,7 @@ export default class CableDetailComponent extends Component {
|
||||
"linear-gradient(-30deg, rgb(187, 194, 236) 0%, rgba(255, 255, 255, 1) 100%)",
|
||||
boxShadow: "0 0 20px rgba(0, 0, 0, 0.5)",
|
||||
minWidth: "30%",
|
||||
minHeight: "30%"
|
||||
minHeight: "30%",
|
||||
},
|
||||
overlay: {
|
||||
opacity: modalOpacity,
|
||||
@ -353,9 +345,14 @@ export default class CableDetailComponent extends Component {
|
||||
</div>
|
||||
<div className="modal-datasheet">
|
||||
{cableDetails ? (
|
||||
<iframe src={cableDetails.datasheet} height='70%' width='70%'></iframe>) : (<div className="datasheet"></div>)
|
||||
}
|
||||
|
||||
<iframe
|
||||
src={cableDetails.datasheet}
|
||||
height="70%"
|
||||
width="70%"
|
||||
></iframe>
|
||||
) : (
|
||||
<div className="datasheet"></div>
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
className="modal-close"
|
||||
@ -396,33 +393,11 @@ export default class CableDetailComponent extends Component {
|
||||
</Modal>
|
||||
<div
|
||||
className="cable-actions-button"
|
||||
onClick={() => this.openModal("modalOpen_dispense")}
|
||||
onClick={() => this.dispense()}
|
||||
>
|
||||
<span>➤ Dispense</span>
|
||||
<span>🔽</span>
|
||||
</div>
|
||||
<Modal
|
||||
isOpen={modalOpen_dispense}
|
||||
onRequestClose={() => this.closeModal("modalOpen_dispense")}
|
||||
contentLabel="Dispense"
|
||||
style={modalStyle}
|
||||
>
|
||||
<div className="modal-container">
|
||||
<div className="modal-title">
|
||||
<span>🔽</span>
|
||||
<span>Dispensing Item</span>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<span>Please wait for your item to be dispensed.</span>
|
||||
</div>
|
||||
<div
|
||||
className="modal-close"
|
||||
onClick={() => this.closeModal("modalOpen_dispense")}
|
||||
>
|
||||
<span>Close</span>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
|
||||
{cableDetails ? (
|
||||
|
||||
@ -32,7 +32,6 @@ export default class MapComponent extends Component {
|
||||
|
||||
handleMessage = (event) => {
|
||||
try {
|
||||
console.log("Message from server", event.data);
|
||||
const message = JSON.parse(event.data);
|
||||
const list = this.browseParse(message);
|
||||
this.setState({ cableList: list });
|
||||
@ -40,9 +39,7 @@ export default class MapComponent extends Component {
|
||||
this.select("0");
|
||||
this.updateSelection();
|
||||
}, 50);
|
||||
} catch (error) {
|
||||
console.error("Error parsing message from server:", error);
|
||||
}
|
||||
} catch (error) {}
|
||||
};
|
||||
|
||||
updateSelection() {
|
||||
|
||||
@ -9,8 +9,7 @@ export default class NavBar extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
clicks: 0,
|
||||
modalOpen_return: false,
|
||||
modalOpen_activeArm: false,
|
||||
modalOpacity: 0,
|
||||
};
|
||||
this.openModal = this.openModal.bind(this);
|
||||
@ -28,38 +27,37 @@ export default class NavBar extends Component {
|
||||
} else if (path.includes("cable")) {
|
||||
document.getElementById("browse").style.backgroundColor = "#007CBE";
|
||||
document.getElementById("browse-s").style.color = "white";
|
||||
} else if (path.includes("settings")) {
|
||||
document.getElementById("settings").style.backgroundColor = "#007CBE";
|
||||
document.getElementById("settings-s").style.color = "white";
|
||||
} else {
|
||||
document.getElementById("browse").style.backgroundColor = "#007CBE";
|
||||
document.getElementById("browse-s").style.color = "white";
|
||||
}
|
||||
|
||||
this.props.socket.addEventListener("message", this.handleMessage);
|
||||
}
|
||||
|
||||
handleClick = () => {
|
||||
const { clicks, timer } = this.state;
|
||||
if (clicks === 0) {
|
||||
const newTimer = setTimeout(() => {
|
||||
this.setState({ clicks: 0 });
|
||||
clearTimeout(newTimer);
|
||||
}, 1000);
|
||||
this.setState({ timer: newTimer });
|
||||
}
|
||||
|
||||
this.setState({ clicks: clicks + 1 });
|
||||
|
||||
if (clicks + 1 === 2) {
|
||||
window.location.replace("/settings");
|
||||
|
||||
clearTimeout(timer);
|
||||
this.setState({ clicks: 0, timer: null });
|
||||
}
|
||||
};
|
||||
|
||||
componentWillUnmount() {
|
||||
if (this.state.timer) {
|
||||
clearTimeout(this.state.timer);
|
||||
}
|
||||
this.props.socket.removeEventListener("message", this.handleMessage);
|
||||
}
|
||||
|
||||
handleMessage = (event) => {
|
||||
try {
|
||||
const message = JSON.parse(event.data);
|
||||
if (message.type === "mode") {
|
||||
let mode = JSON.parse(message.data).mode;
|
||||
if (mode === "Idle") {
|
||||
this.closeModal("modalOpen_activeArm");
|
||||
} else {
|
||||
this.openModal("modalOpen_activeArm");
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("");
|
||||
}
|
||||
};
|
||||
|
||||
openModal = (modal) => {
|
||||
this.setState({ [modal]: true }, () => {
|
||||
setTimeout(() => this.setState({ modalOpacity: 1 }), 10);
|
||||
@ -72,16 +70,20 @@ export default class NavBar extends Component {
|
||||
});
|
||||
};
|
||||
|
||||
returnCable = (tray) => {
|
||||
returnCable = () => {
|
||||
this.props.socket.send(
|
||||
`{"type": "cable_get","call": "send","data": {"tray": ${tray}}}`
|
||||
`{"type": "cable_get","call": "send","data": {"tray": 0}}`
|
||||
);
|
||||
};
|
||||
|
||||
cancelAction = () => {
|
||||
this.props.socket.send(
|
||||
`{"type": "cancel_action","call": "request","data": {}}`
|
||||
);
|
||||
console.log("Cable returned from tray " + tray);
|
||||
this.closeModal("modalOpen_return");
|
||||
};
|
||||
|
||||
render() {
|
||||
const { modalOpen_return, modalOpacity } = this.state;
|
||||
const { modalOpen_activeArm, modalOpacity } = this.state;
|
||||
|
||||
const modalStyle = {
|
||||
content: {
|
||||
@ -105,7 +107,7 @@ export default class NavBar extends Component {
|
||||
"linear-gradient(-30deg, rgb(187, 194, 236) 0%, rgba(255, 255, 255, 1) 100%)",
|
||||
boxShadow: "0 0 20px rgba(0, 0, 0, 0.5)",
|
||||
minWidth: "30%",
|
||||
minHeight: "30%"
|
||||
minHeight: "30%",
|
||||
},
|
||||
overlay: {
|
||||
opacity: modalOpacity,
|
||||
@ -120,7 +122,9 @@ export default class NavBar extends Component {
|
||||
<div className="navbar-top">
|
||||
<div className="navbar-top-container">
|
||||
<div className="navbar-top-hamburger">≡</div>
|
||||
<div className="navbar-top-secret" onClick={this.handleClick}></div>
|
||||
<NavLink className="navbar-settings" id="settings" to="/settings">
|
||||
<span id="settings-s">⚙️</span>
|
||||
</NavLink>
|
||||
</div>
|
||||
<h1>Jukebox</h1>
|
||||
<ol className="navbar-list">
|
||||
@ -139,45 +143,25 @@ export default class NavBar extends Component {
|
||||
</NavLink>
|
||||
</ol>
|
||||
</div>
|
||||
<div
|
||||
className="navbar-return"
|
||||
onClick={() => this.openModal("modalOpen_return")}
|
||||
>
|
||||
<div className="navbar-return" onClick={() => this.returnCable()}>
|
||||
<span id="browse-s">Return Cable</span>
|
||||
</div>
|
||||
|
||||
<Modal
|
||||
isOpen={modalOpen_return}
|
||||
onRequestClose={() => this.closeModal("modalOpen_return")}
|
||||
isOpen={modalOpen_activeArm}
|
||||
contentLabel="show"
|
||||
style={modalStyle}
|
||||
>
|
||||
<div className="modal-container">
|
||||
<div className="modal-title">
|
||||
<span>♻️</span>
|
||||
<span>Return Cable</span>
|
||||
<span>⚠️</span>
|
||||
<span>Arm in Motion</span>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<span>Select the tray you would like to return from.</span>
|
||||
<span>Please stay clear of the arm.</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 className="modal-closeX" onClick={() => this.cancelAction()}>
|
||||
<span>Cancel Action</span>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
@ -13,6 +13,11 @@ export default class SettingsComponent extends Component {
|
||||
this.props.socket.send('{"type":"restart","call":"request","data":{}}');
|
||||
};
|
||||
|
||||
modeMessage = () => {
|
||||
console.log("Sending 'mode' message...");
|
||||
this.props.socket.send('{"type":"mode","call":"request","data":{}}');
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="settings">
|
||||
@ -28,6 +33,12 @@ export default class SettingsComponent extends Component {
|
||||
>
|
||||
<span>🔴 Power Off</span>
|
||||
</div>
|
||||
<div
|
||||
className="settings-powerButton"
|
||||
onClick={() => this.modeMessage()}
|
||||
>
|
||||
<span>Send "mode"</span>
|
||||
</div>
|
||||
{/* <div
|
||||
className="settings-powerButton"
|
||||
onClick={() => this.restartPower()}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user