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 {