diff --git a/src/assets/images/pic_cole.jpg b/src/assets/images/pic_cole.jpg new file mode 100644 index 0000000..1aaacd5 Binary files /dev/null and b/src/assets/images/pic_cole.jpg differ diff --git a/src/assets/images/pic_dustin.jpg b/src/assets/images/pic_dustin.jpg new file mode 100644 index 0000000..3faef3c Binary files /dev/null and b/src/assets/images/pic_dustin.jpg differ diff --git a/src/assets/images/pic_fannie.jpeg b/src/assets/images/pic_fannie.jpeg new file mode 100644 index 0000000..bbcc8eb Binary files /dev/null and b/src/assets/images/pic_fannie.jpeg differ diff --git a/src/assets/images/pic_lucas.jpg b/src/assets/images/pic_lucas.jpg new file mode 100644 index 0000000..a88e502 Binary files /dev/null and b/src/assets/images/pic_lucas.jpg differ diff --git a/src/assets/images/pic_natorion.jpg b/src/assets/images/pic_natorion.jpg new file mode 100644 index 0000000..0d5ff76 Binary files /dev/null and b/src/assets/images/pic_natorion.jpg differ diff --git a/src/assets/images/pic_scarlett.jpg b/src/assets/images/pic_scarlett.jpg new file mode 100644 index 0000000..1163de5 Binary files /dev/null and b/src/assets/images/pic_scarlett.jpg differ diff --git a/src/assets/images/qr_cole.png b/src/assets/images/qr_cole.png new file mode 100644 index 0000000..11288e5 Binary files /dev/null and b/src/assets/images/qr_cole.png differ diff --git a/src/assets/images/qr_dustin.png b/src/assets/images/qr_dustin.png new file mode 100644 index 0000000..66a6766 Binary files /dev/null and b/src/assets/images/qr_dustin.png differ diff --git a/src/assets/images/qr_elias.png b/src/assets/images/qr_elias.png new file mode 100644 index 0000000..c7eb4b4 Binary files /dev/null and b/src/assets/images/qr_elias.png differ diff --git a/src/assets/images/qr_fannie.png b/src/assets/images/qr_fannie.png new file mode 100644 index 0000000..41cae47 Binary files /dev/null and b/src/assets/images/qr_fannie.png differ diff --git a/src/assets/images/qr_lucas.png b/src/assets/images/qr_lucas.png new file mode 100644 index 0000000..3a77870 Binary files /dev/null and b/src/assets/images/qr_lucas.png differ diff --git a/src/assets/images/qr_natorion.png b/src/assets/images/qr_natorion.png new file mode 100644 index 0000000..66d2241 Binary files /dev/null and b/src/assets/images/qr_natorion.png differ diff --git a/src/assets/images/qr_scarlett.png b/src/assets/images/qr_scarlett.png new file mode 100644 index 0000000..374fdc6 Binary files /dev/null and b/src/assets/images/qr_scarlett.png differ diff --git a/src/assets/stylesheets/settings.scss b/src/assets/stylesheets/settings.scss index 6482f5b..96b9e53 100644 --- a/src/assets/stylesheets/settings.scss +++ b/src/assets/stylesheets/settings.scss @@ -66,19 +66,19 @@ $white: #fff; text-align: left; } -.settings-powerContainer, +.settings-grid, .settings-creditsContainer { width: 80%; - height: 100px; + height: auto; background: linear-gradient( -30deg, rgb(187 208 236) 0%, rgb(255 255 255 / 100%) 100% ); display: flex; - align-items: center; - justify-content: flex-start; - flex-direction: row; + align-items: flex-start; + justify-content: center; + flex-direction: column; border-radius: 20px; border: 1px solid $gray; margin-bottom: 5px; @@ -89,6 +89,29 @@ $white: #fff; filter: drop-shadow(0 4px 4px rgb(0 0 0 / 25%)); } +.settings-gridInner { + width: 100%; + height: auto; + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + padding: 15px 0px 15px 0px; + background-color: transparent; +} + +.settings-grid h2 { + width: 100%; + height: auto; + font-size: 24px; + font-weight: bold; + color: $dark-blue; + font-family: "Gotham Medium"; + text-align: left; + padding: 20px 10px 0px 10px; + background-color: transparent; +} + .settings-creditsContainer { height: 500px; display: flex; @@ -96,10 +119,10 @@ $white: #fff; align-items: center; } -.settings-powerButton { - width: 200px; - height: 50px; - border-radius: 20px; +.settings-button { + width: auto; + height: 40px; + border-radius: 15px; background: linear-gradient( 15deg, rgb(223 223 223) 0%, @@ -112,78 +135,16 @@ $white: #fff; filter: drop-shadow(5px 5px 2px rgb(0 0 0 / 15%)); cursor: pointer; text-decoration: none; - margin-right: 20px; - margin-left: 20px; + margin-right: 10px; + margin-left: 10px; } -.settings-powerButton span { +.settings-button span { width: auto; height: auto; - font-size: 20px; - margin-top: 2px; + font-size: 16px; color: $medium-blue; font-family: "Gotham Bold"; background-color: transparent; -} - -.settings-credits { - width: 95%; - height: 430px; - background-color: transparent; - display: flex; - justify-content: flex-start; - align-items: flex-start; - flex-direction: column; -} - -.entry-links, -.entry-name, -.entry-position, -.settings-credits-title { - width: auto; - height: auto; - text-align: left; - font-family: "Gotham Medium"; - color: $light-blue; - font-size: 20px; - background-color: transparent; - background: transparent; - text-decoration: none; - margin-bottom: 7px; - margin-right: 30px; -} - -.settings-credits-title { - font-size: 24px; - font-weight: bold; - color: $dark-blue; - font-family: "Gotham Medium"; - margin-bottom: 10px; -} - -.entry { - width: 100%; - height: auto; - display: flex; - justify-content: flex-start; - align-items: center; - background-color: transparent; -} - -.entry-name { - width: auto; - height: auto; - color: $medium-blue; -} - -.entry-position { - width: auto; - height: auto; - color: $light-blue; -} - -.entry-links { - width: auto; - height: auto; - color: $hover-blue; -} + padding: 10px; +} \ No newline at end of file diff --git a/src/components/SettingsComponent.js b/src/components/SettingsComponent.js index df04b81..1b7c8d7 100644 --- a/src/components/SettingsComponent.js +++ b/src/components/SettingsComponent.js @@ -1,24 +1,90 @@ import React, { Component } from "react"; import BeldenLogo from "../assets/images/belden-white.png"; +import Modal from "react-modal"; import "../assets/stylesheets/settings.scss"; +Modal.setAppElement("#root"); + export default class SettingsComponent extends Component { - shutdownPower = () => { - console.log("Shutting down..."); - this.props.socket.send('{"type":"shutdown","call":"request","data":{}}'); + constructor(props) { + super(props); + this.state = { + modalOpen_quickAction: false, + modalOpacity: 0, + }; + this.openModal = this.openModal.bind(this); + this.closeModal = this.closeModal.bind(this); + } + + quickAction = (action, requirePrompt) => { + switch (action) { + case "shutdown": + console.log("Shutting down..."); + this.props.socket.send( + '{"type":"shutdown","call":"request","data":{}}' + ); + break; + case "restart": + console.log("Restarting..."); + this.props.socket.send('{"type":"restart","call":"request","data":{}}'); + break; + case "mode": + console.log("Sending 'mode' message..."); + this.props.socket.send('{"type":"mode","call":"request","data":{}}'); + break; + default: + console.log("Invalid action"); + break; + } }; - restartPower = () => { - console.log("Restarting..."); - this.props.socket.send('{"type":"restart","call":"request","data":{}}'); + openModal = (modal) => { + this.setState({ [modal]: true }, () => { + setTimeout(() => this.setState({ modalOpacity: 1 }), 10); + }); }; - modeMessage = () => { - console.log("Sending 'mode' message..."); - this.props.socket.send('{"type":"mode","call":"request","data":{}}'); + closeModal = (modal) => { + this.setState({ modalOpacity: 0 }, () => { + setTimeout(() => this.setState({ [modal]: false }), 300); + }); }; render() { + const { modalOpen_quickAction, 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: "auto", + height: "auto", + 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)", + minWidth: "30%", + minHeight: "30%", + }, + overlay: { + opacity: modalOpacity, + transition: "opacity 300ms ease-in-out", + backgroundColor: "rgba(255, 255, 255, 0.15)", + backdropFilter: "blur(5px)", + }, + }; + return (
@@ -26,30 +92,59 @@ export default class SettingsComponent extends Component {

⚙️ Settings

-
-
this.shutdownPower()} - > - 🔴 Power Off +
+

⚡Quick Actions:

+
+
this.quickAction("shutdown")} + > + 🔴 Power Off +
+
this.quickAction("restart")} + > + 🟠 Restart +
-
this.modeMessage()} - > - Send "mode" -
- {/*
this.restartPower()} - > - 🟨 Restart -
*/}
-
-
-

Credits:

-
+
+

💻Send Object:

+
+
+
+

⚒️Credits:

+
+
+
+ + this.closeModal("modalOpen_quickAction")} + style={modalStyle} + > +
+
+ ⚠️ + Arm in Motion +
+
+ Please stay clear of the arm. +
+
this.cancelAction()}> + Cancel Action +
+
+ +
+ ); + } +} + +{ + /* -
-
-
-
- ); - } +
*/ }