Co-authored-by: Lucas Ferguson <LucasFerguson@users.noreply.github.com>

Co-authored-by: Dustin Thomas <stdio@cptlobster.dev>

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;
+  align-items: flex-start;
-  justify-content: flex-start;
+  justify-content: center;
-  flex-direction: row;
+  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 {
+.settings-button {
-  width: 200px;
+  width: auto;
-  height: 50px;
+  height: 40px;
-  border-radius: 20px;
+  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-right: 10px;
-  margin-left: 20px;
+  margin-left: 10px;
 }
 
-.settings-powerButton span {
+.settings-button span {
   width: auto;
   height: auto;
-  font-size: 20px;
+  font-size: 16px;
-  margin-top: 2px;
   color: $medium-blue;
   font-family: "Gotham Bold";
   background-color: transparent;
-}
+  padding: 10px;
-
+}
-.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;
-}

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 = () => {
+  constructor(props) {
-    console.log("Shutting down...");
+    super(props);
-    this.props.socket.send('{"type":"shutdown","call":"request","data":{}}');
+    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 = () => {
+  openModal = (modal) => {
-    console.log("Restarting...");
+    this.setState({ [modal]: true }, () => {
-    this.props.socket.send('{"type":"restart","call":"request","data":{}}');
+      setTimeout(() => this.setState({ modalOpacity: 1 }), 10);
+    });
   };
 
-  modeMessage = () => {
+  closeModal = (modal) => {
-    console.log("Sending 'mode' message...");
+    this.setState({ modalOpacity: 0 }, () => {
-    this.props.socket.send('{"type":"mode","call":"request","data":{}}');
+      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 (
       <div className="settings">
         <div className="settings-image">
@@ -26,30 +92,59 @@ export default class SettingsComponent extends Component {
         </div>
         <div className="settings-fieldContainer">
           <h1 className="settings-title">⚙️ Settings</h1>
-          <div className="settings-powerContainer">
+          <div className="settings-grid">
-            <div
+            <h2>⚡Quick Actions:</h2>
-              className="settings-powerButton"
+            <div className="settings-gridInner">
-              onClick={() => this.shutdownPower()}
+              <div
-            >
+                className="settings-button"
-              <span>🔴 Power Off</span>
+                onClick={() => this.quickAction("shutdown")}
+              >
+                <span>🔴 Power Off</span>
+              </div>
+              <div
+                className="settings-button"
+                onClick={() => this.quickAction("restart")}
+              >
+                <span>🟠 Restart</span>
+              </div>
             </div>
-            <div
-              className="settings-powerButton"
-              onClick={() => this.modeMessage()}
-            >
-              <span>Send "mode"</span>
-            </div>
-            {/* <div
-              className="settings-powerButton"
-              onClick={() => this.restartPower()}
-            >
-              <span>🟨 Restart</span>
-            </div> */}
           </div>
-          <div className="settings-creditsContainer">
+          <div className="settings-grid">
-            <div className="settings-credits">
+            <h2>💻Send Object:</h2>
-              <h2 className="settings-credits-title">Credits:</h2>
+            <div className="settings-gridInner"></div>
-              <div className="entry">
+          </div>
+          <div className="settings-grid">
+            <h2>⚒️Credits:</h2>
+            <div className="settings-gridInner"></div>
+          </div>
+        </div>
+
+        <Modal
+          isOpen={modalOpen_quickAction}
+          contentLabel="show"
+          onRequestClose={() => this.closeModal("modalOpen_quickAction")}
+          style={modalStyle}
+        >
+          <div className="modal-container">
+            <div className="modal-title">
+              <span>⚠️</span>
+              <span>Arm in Motion</span>
+            </div>
+            <div className="modal-body">
+              <span>Please stay clear of the arm.</span>
+            </div>
+            <div className="modal-closeX" onClick={() => this.cancelAction()}>
+              <span>Cancel Action</span>
+            </div>
+          </div>
+        </Modal>
+      </div>
+    );
+  }
+}
+
+{
+  /* <div className="entry">
                 <span className="entry-name">Cole Deck,</span>
                 <span className="entry-position">Project Lead,</span>
                 <a className="entry-links" href="https://deck.sh">
@@ -110,11 +205,5 @@ export default class SettingsComponent extends Component {
                 <a className="entry-links" href="https://cptlobster.dev">
                   https://cptlobster.dev
                 </a>
-              </div>
+              </div> */
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
 }