Settings page revamp

src/assets/stylesheets/navbar.scss

@@ -220,8 +220,8 @@ $white: #fff;
 }
 
 .modal-return {
-  width: 30px;
-  height: 20px;
+  width: auto;
+  height: auto;
   align-items: center;
   justify-content: center;
   margin-left: 10px;

src/assets/stylesheets/settings.scss

@@ -148,3 +148,169 @@ $white: #fff;
   background-color: transparent;
   padding: 10px;
 }
+
+.settings-form {
+  width: 100%;
+  height: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: row;
+  background-color: transparent;
+}
+
+// text box
+#sendobject {
+  width: 90%;
+  height: 20px;
+  border-radius: 15px;
+  background-color: $white;
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  transition: all 0.3s ease-in-out;
+  filter: drop-shadow(5px 5px 2px rgb(0 0 0 / 15%));
+  text-decoration: none;
+  margin-right: 10px;
+  margin-left: 10px;
+  padding: 10px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  border: 1px solid rgb(199, 199, 199);
+  text-align: left;
+}
+
+#sendobject:focus {
+  outline: none;
+}
+
+#sendobjectButton {
+  width: 10%;
+  height: 40px;
+  border-radius: 15px;
+  background: linear-gradient(
+    15deg,
+    rgb(223 223 223) 0%,
+    rgb(255 255 255) 100%
+  );
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: all 0.3s ease-in-out;
+  filter: drop-shadow(5px 5px 2px rgb(0 0 0 / 15%));
+  cursor: pointer;
+  text-decoration: none;
+  margin-right: 10px;
+  margin-left: 10px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+#creditsgrid {
+  width: 100%;
+  height: auto;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  //background-color: red;
+}
+
+.entry {
+  width: 48%;
+  height: 150px;
+  border-radius: 15px;
+  background: linear-gradient(
+    15deg,
+    rgb(223 223 223) 0%,
+    rgb(255 255 255) 100%
+  );
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: all 0.3s ease-in-out;
+  filter: drop-shadow(5px 5px 2px rgb(0 0 0 / 15%));
+  text-decoration: none;
+  margin: 10px 10px 10px 10px;
+}
+
+.entry-image {
+  width: auto;
+  height: auto;
+  display: flex;
+  background-color: transparent;
+}
+
+.entry-img,
+.entry-qr {
+  width: 110px;
+  height: 110px;
+  background: linear-gradient(
+    15deg,
+    rgb(223 223 223) 0%,
+    rgb(255 255 255) 100%
+  );
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 15px;
+  margin: 10px;
+  filter: drop-shadow(5px 5px 2px rgb(0 0 0 / 15%));
+  border: 1px solid $gray;
+}
+
+.entry-qr {
+  margin: 0px;
+  padding: 8px;
+  width: 40px;
+  height: 40px;
+  border-radius: 50px;
+  background: white;
+  position: fixed;
+  bottom: 5px;
+  margin-left: 90px;
+}
+
+.entry-qr img {
+  border-radius: 0px;
+  width: auto;
+  height: auto;
+  background: red;
+}
+
+.entry-title {
+  width: 70%;
+  height: 50%;
+  margin-left: 30px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  flex-direction: column;
+  background-color: transparent;
+}
+
+.entry-title h2,
+.entry-title h3 {
+  width: auto;
+  height: auto;
+  font-size: 24px;
+  font-weight: bold;
+  color: $dark-blue;
+  font-family: "Gotham Medium";
+  text-align: left;
+  background-color: transparent;
+  text-align: start;
+  margin: 0px;
+  padding: 0px;
+}
+
+.entry-title h2 {
+  margin-bottom: 5px;
+}
+
+.entry-title h3 {
+  font-size: 16px;
+  font-weight: normal;
+  color: $light-blue;
+}

src/components/SettingsComponent.js

@@ -11,12 +11,21 @@ export default class SettingsComponent extends Component {
     this.state = {
       modalOpen_quickAction: false,
       modalOpacity: 0,
+      action: "",
     };
     this.openModal = this.openModal.bind(this);
     this.closeModal = this.closeModal.bind(this);
   }
 
   quickAction = (action, requirePrompt) => {
+    if (requirePrompt) {
+      this.openModal("modalOpen_quickAction", action);
+    } else {
+      this.quickActionPerform(action);
+    }
+  };
+
+  quickActionPerform = (action) => {
     switch (action) {
       case "shutdown":
         console.log("Shutting down...");
@@ -28,9 +37,9 @@ export default class SettingsComponent extends Component {
         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":{}}');
+      case "home":
+        console.log("Homing...");
+        this.props.socket.send('{"type":"home","call":"request","data":{}}');
         break;
       default:
         console.log("Invalid action");
@@ -38,10 +47,11 @@ export default class SettingsComponent extends Component {
     }
   };
 
-  openModal = (modal) => {
+  openModal = (modal, action) => {
     this.setState({ [modal]: true }, () => {
-      setTimeout(() => this.setState({ modalOpacity: 1 }), 10);
+      setTimeout(() => this.setState({ modalOpacity: 1 }), 100);
     });
+    this.setState({ action });
   };
 
   closeModal = (modal) => {
@@ -50,6 +60,20 @@ export default class SettingsComponent extends Component {
     });
   };
 
+  performActionCloseModal = () => {
+    console.log("Performing action: " + this.state.action);
+    this.quickActionPerform(this.state.action);
+    this.closeModal("modalOpen_quickAction");
+  };
+
+  sendObject = () => {
+    const object = document.getElementById("sendobject").value;
+    console.log("Sending object: " + object);
+    this.props.socket.send
+      ? this.props.socket.send(object)
+      : console.log("No socket connection");
+  };
+
   render() {
     const { modalOpen_quickAction, modalOpacity } = this.state;
 
@@ -97,25 +121,187 @@ export default class SettingsComponent extends Component {
             <div className="settings-gridInner">
               <div
                 className="settings-button"
-                onClick={() => this.quickAction("shutdown")}
+                onClick={() => this.quickAction("shutdown", true)}
               >
                 <span>🔴 Power Off</span>
               </div>
               <div
                 className="settings-button"
-                onClick={() => this.quickAction("restart")}
+                onClick={() => this.quickAction("restart", false)}
               >
                 <span>🟠 Restart</span>
               </div>
+              <div
+                className="settings-button"
+                onClick={() => this.quickAction("home", false)}
+              >
+                <span>🏠 Home Arm</span>
+              </div>
             </div>
           </div>
           <div className="settings-grid">
             <h2>💻Send Object:</h2>
-            <div className="settings-gridInner"></div>
+            <div className="settings-gridInner">
+              <form className="settings-form">
+                <input
+                  id="sendobject"
+                  type="text"
+                  name="sendobject"
+                  placeholder={`{"type":"cable_map","call":"request","data":{}}`}
+                />
+                <div
+                  className="settings-button"
+                  id="sendobjectButton"
+                  onClick={() => this.sendObject()}
+                >
+                  <span>Send</span>
+                </div>
+              </form>
+            </div>
           </div>
           <div className="settings-grid">
             <h2>⚒️Credits:</h2>
-            <div className="settings-gridInner"></div>
+            <div id="creditsgrid" className="settings-gridInner">
+              <div className="entry">
+                <div className="entry-image">
+                  <img
+                    className="entry-img"
+                    src={require("../assets/images/pic_cole.jpg")}
+                    alt="Cole Deck"
+                  />
+                  <div className="entry-qr">
+                    <img
+                      src={require("../assets/images/qr_cole.png")}
+                      alt="QR"
+                    />
+                  </div>
+                </div>
+                <div className="entry-title">
+                  <h2>Cole Deck</h2>
+                  <h3>Project Lead</h3>
+                </div>
+              </div>
+
+              <div className="entry">
+                <div className="entry-image">
+                  <img
+                    className="entry-img"
+                    src={require("../assets/images/pic_scarlett.jpg")}
+                    alt="Scarlett Kadan"
+                  />
+                  <div className="entry-qr">
+                    <img
+                      src={require("../assets/images/qr_scarlett.png")}
+                      alt="QR"
+                    />
+                  </div>
+                </div>
+                <div className="entry-title">
+                  <h2>Scarlett Kadan</h2>
+                  <h3>Lead Front-End Dev, UI/UX Designer</h3>
+                </div>
+              </div>
+
+              <div className="entry">
+                <div className="entry-image">
+                  <img
+                    className="entry-img"
+                    src={require("../assets/images/pic_natorion.jpg")}
+                    alt="Natorion Johnson"
+                  />
+                  <div className="entry-qr">
+                    <img
+                      src={require("../assets/images/qr_natorion.png")}
+                      alt="QR"
+                    />
+                  </div>
+                </div>
+                <div className="entry-title">
+                  <h2>Natorion Johnson</h2>
+                  <h3>Lead PCB assembler</h3>
+                </div>
+              </div>
+
+              <div className="entry">
+                <div className="entry-image">
+                  <img
+                    className="entry-img"
+                    src={require("../assets/images/pic_fannie.jpeg")}
+                    alt="Fannie Yu"
+                  />
+                  <div className="entry-qr">
+                    <img
+                      src={require("../assets/images/qr_fannie.png")}
+                      alt="QR"
+                    />
+                  </div>
+                </div>
+                <div className="entry-title">
+                  <h2>Fannie Yu</h2>
+                  <h3>CAD Design, Fabrication Planner</h3>
+                </div>
+              </div>
+
+              <div className="entry">
+                <div className="entry-image">
+                  <img
+                    className="entry-img"
+                    src={require("../assets/images/pic_elias.jpg")}
+                    alt="Elias Reschly"
+                  />
+                  <div className="entry-qr">
+                    <img
+                      src={require("../assets/images/qr_elias.png")}
+                      alt="QR"
+                    />
+                  </div>
+                </div>
+                <div className="entry-title">
+                  <h2>Elias Reschly</h2>
+                  <h3>Mechanical Design, Fabrication</h3>
+                </div>
+              </div>
+
+              <div className="entry">
+                <div className="entry-image">
+                  <img
+                    className="entry-img"
+                    src={require("../assets/images/pic_lucas.jpg")}
+                    alt="Lucas Ferguson"
+                  />
+                  <div className="entry-qr">
+                    <img
+                      src={require("../assets/images/qr_lucas.png")}
+                      alt="QR"
+                    />
+                  </div>
+                </div>
+                <div className="entry-title">
+                  <h2>Lucas Ferguson</h2>
+                  <h3>Front-End Dev</h3>
+                </div>
+              </div>
+
+              <div className="entry">
+                <div className="entry-image">
+                  <img
+                    className="entry-img"
+                    src={require("../assets/images/pic_dustin.jpg")}
+                    alt=""
+                  />
+                  <div className="entry-qr">
+                    <img
+                      src={require("../assets/images/qr_dustin.png")}
+                      alt="QR"
+                    />
+                  </div>
+                </div>
+                <div className="entry-title">
+                  <h2>Dustin Thomas</h2>
+                  <h3>Back-End Dev</h3>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
 
@@ -128,13 +314,26 @@ export default class SettingsComponent extends Component {
           <div className="modal-container">
             <div className="modal-title">
               <span>⚠️</span>
-              <span>Arm in Motion</span>
+              <span>Warning</span>
             </div>
             <div className="modal-body">
-              <span>Please stay clear of the arm.</span>
+              <span>Are you sure you want to perform this quick action?</span>
             </div>
-            <div className="modal-closeX" onClick={() => this.cancelAction()}>
-              <span>Cancel Action</span>
+            <div className="modal-tray">
+              <div
+                className="modal-return"
+                onClick={() =>
+                  this.performActionCloseModal("modalOpen_quickAction")
+                }
+              >
+                <span>Continue</span>
+              </div>
+              <div
+                className="modal-return"
+                onClick={() => this.closeModal("modalOpen_quickAction")}
+              >
+                <span>Cancel</span>
+              </div>
             </div>
           </div>
         </Modal>
@@ -142,68 +341,3 @@ 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" 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"
-                  href="https://linkedin.com/in/NatorionJ"
-                >
-                  https://linkedin.com/in/NatorionJ
-                </a>
-              </div>
-              <div className="entry">
-                <span className="entry-name">Fannie Yu,</span>
-                <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>
-                <div className="entry-links"></div>
-              </div>
-              <div className="entry">
-                <span className="entry-name">Scarlett Kadan,</span>
-                <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"
-                  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" href="https://cptlobster.dev">
-                  https://cptlobster.dev
-                </a>
-              </div> */
-}