diff --git a/src/assets/images/pic_elias.jpg b/src/assets/images/pic_elias.jpg new file mode 100644 index 0000000..d7bdb77 Binary files /dev/null and b/src/assets/images/pic_elias.jpg differ diff --git a/src/assets/stylesheets/navbar.scss b/src/assets/stylesheets/navbar.scss index 35c4c99..a5c37b1 100644 --- a/src/assets/stylesheets/navbar.scss +++ b/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; diff --git a/src/assets/stylesheets/settings.scss b/src/assets/stylesheets/settings.scss index 96b9e53..99c190e 100644 --- a/src/assets/stylesheets/settings.scss +++ b/src/assets/stylesheets/settings.scss @@ -147,4 +147,170 @@ $white: #fff; font-family: "Gotham Bold"; background-color: transparent; padding: 10px; -} \ No newline at end of file +} + +.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; +} diff --git a/src/components/SettingsComponent.js b/src/components/SettingsComponent.js index 1b7c8d7..ce71693 100644 --- a/src/components/SettingsComponent.js +++ b/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 {
this.quickAction("shutdown")} + onClick={() => this.quickAction("shutdown", true)} > 🔴 Power Off
this.quickAction("restart")} + onClick={() => this.quickAction("restart", false)} > 🟠 Restart
+
this.quickAction("home", false)} + > + 🏠 Home Arm +

💻Send Object:

-
+
+
+ +
this.sendObject()} + > + Send +
+
+

⚒️Credits:

-
+
+
+
+ Cole Deck +
+ QR +
+
+
+

Cole Deck

+

Project Lead

+
+
+ +
+
+ Scarlett Kadan +
+ QR +
+
+
+

Scarlett Kadan

+

Lead Front-End Dev, UI/UX Designer

+
+
+ +
+
+ Natorion Johnson +
+ QR +
+
+
+

Natorion Johnson

+

Lead PCB assembler

+
+
+ +
+
+ Fannie Yu +
+ QR +
+
+
+

Fannie Yu

+

CAD Design, Fabrication Planner

+
+
+ +
+
+ Elias Reschly +
+ QR +
+
+
+

Elias Reschly

+

Mechanical Design, Fabrication

+
+
+ +
+
+ Lucas Ferguson +
+ QR +
+
+
+

Lucas Ferguson

+

Front-End Dev

+
+
+ +
+
+ +
+ QR +
+
+
+

Dustin Thomas

+

Back-End Dev

+
+
+
@@ -128,13 +314,26 @@ export default class SettingsComponent extends Component {
⚠️ - Arm in Motion + Warning
- Please stay clear of the arm. + Are you sure you want to perform this quick action?
-
this.cancelAction()}> - Cancel Action +
+
+ this.performActionCloseModal("modalOpen_quickAction") + } + > + Continue +
+
this.closeModal("modalOpen_quickAction")} + > + Cancel +
@@ -142,68 +341,3 @@ export default class SettingsComponent extends Component { ); } } - -{ - /*
- Cole Deck, - Project Lead, - - https://deck.sh - -
-
- Natorion Johnson, - Lead PCB assembler, - - https://linkedin.com/in/NatorionJ - -
-
- Fannie Yu, - - CAD Design, Fabrication Planner - - - https://linkedin.com/in/fannieyu - -
-
- Elias Frey Reschly, - - Mechanical Design, Fabrication - -
-
-
- Scarlett Kadan, - - Front-End Dev, UI/UX Designer, - - - https://kadan.live - -
-
- Lucas Ferguson, - Front-End Dev, - - https://lucasferguson.webflow.io - -
-
- Dustin Thomas, - Back-End Dev, - - https://cptlobster.dev - -
*/ -}