From 45817e2aeb7f8fd4b4c35143080222077efecefe Mon Sep 17 00:00:00 2001 From: Mary Delos Reyes Date: Sat, 22 Feb 2020 14:12:40 -0800 Subject: [PATCH 1/2] made check-in page --- .../Navigation-Bar/navigation-bar.scss | 19 ++-- client/src/pages/CheckIn/checkin.scss | 89 +++++++++++++++++++ client/src/pages/CheckIn/index.jsx | 37 ++++++++ client/src/pages/home/home.jsx | 0 client/src/routes/index.jsx | 21 ++--- 5 files changed, 144 insertions(+), 22 deletions(-) create mode 100644 client/src/pages/CheckIn/checkin.scss create mode 100644 client/src/pages/CheckIn/index.jsx delete mode 100644 client/src/pages/home/home.jsx diff --git a/client/src/component/Navigation-Bar/navigation-bar.scss b/client/src/component/Navigation-Bar/navigation-bar.scss index d495661..dd04e32 100644 --- a/client/src/component/Navigation-Bar/navigation-bar.scss +++ b/client/src/component/Navigation-Bar/navigation-bar.scss @@ -25,6 +25,7 @@ $btn-colors: ( width: 12%; font-size: 2%; float: right; + .link { /* This adjusts the React Router links */ @@ -33,7 +34,8 @@ $btn-colors: ( text-decoration: none; /* removes underscores of the links */ /* Extra small devices (phones, 600px and down) */ @media only screen and (max-width: 600px) { - display: none; + display: none; + } } } @@ -55,31 +57,33 @@ $btn-colors: ( @media only screen and (max-width: 600px) { /* Adjusting position of the banner to the top left corner */ width: 80px; - right: 10px; + right: 10px; } /* Small devices (portrait tablets and large phones, 600px and up) */ @media only screen and (min-width: 600px) { /* Adjusting position of the banner to the top left corner */ - width: 100px; + width: 100px; + } /* Medium devices (landscape tablets, 768px and up) */ @media only screen and (min-width: 768px) { /* Adjusting position of the banner to the top left corner */ - width: 130px; + width: 130px; } /* Large devices (laptops/desktops, 992px and up) */ @media only screen and (min-width: 992px) { /* Adjusting position of the banner to the top left corner */ - width: 150px; + width: 150px; } /* Extra large devices (large laptops and desktops, 1200px and up) */ @media only screen and (min-width: 1200px) { /* Adjusting position of the banner to the top left corner */ - width: 150px; + width: 150px; + } } @@ -100,6 +104,7 @@ $btn-colors: ( opacity: .999; border-radius: 3px; @extend .animate; + } .btn-border-o { @@ -113,6 +118,8 @@ $btn-colors: ( border-radius: 16px; height: 40px; padding: 5px; + overflow: hidden; + } &:before, diff --git a/client/src/pages/CheckIn/checkin.scss b/client/src/pages/CheckIn/checkin.scss new file mode 100644 index 0000000..aea0a5a --- /dev/null +++ b/client/src/pages/CheckIn/checkin.scss @@ -0,0 +1,89 @@ +#CheckIn{ + background-image: linear-gradient(#8d78a1, #b69087, #d15f2a); + overflow: hidden; + padding-top: 80px; + padding-bottom: 80px; + display: flex; + flex-direction: column; + align-items: center; + + +#body { + background-image: linear-gradient(#8d78a1, #b69087, #d15f2a); + color: white; + padding: 10%; + font-family: "Moon", bold; +} + + +#CheckIn-title{ + color: #D15F2A; + font-size: 20px; + position: relative; + } + + #CheckIn-container { + display: block; + border-radius: 5%; + background-color: white; // for debugging + width: 80vh; + position: relative; + text-align: center; + padding-bottom: 10px; + margin: 5% 0% 0% 0%; + + + } + #CheckIn-logo { + margin-top: 5%; + max-width: 40%; + position: relative; + bottom: 20%; + left: 30%; + } + #email{ + position: relative; + right: 10%; + } + + input[type=email] { + width: 80%; + padding: 15px; + font-size: 15px; + margin: 15px 0 22px 0; + display: inline-block; + background: rgb(204, 203, 203); + cursor: auto; + border-style: inset; + border-radius: 5px; + position: relative; + overflow:hidden; + border-width: 10px; + border-color: black; + background: transparent; + text-align: left; + } + + button { + width: 270px; + background-color: #9a544c; + padding: 10px; + color: white; + border-radius: 5px; + cursor: pointer; + font-size: 24px; + transition-duration: 0.25s; + } + +#CheckIn-text{ + padding-top: 10px; /* brings sign-up lower and shrinks down text */ + font-size: 55px; + font-weight: bold; + +} + +.CheckIn-link{ + margin-left: 5px; /* Adds a space between link and text */ +} + +} diff --git a/client/src/pages/CheckIn/index.jsx b/client/src/pages/CheckIn/index.jsx new file mode 100644 index 0000000..f89393d --- /dev/null +++ b/client/src/pages/CheckIn/index.jsx @@ -0,0 +1,37 @@ +import React, {Component} from "react"; +import LOGO from "../../assets/Images/logo.png"; +import "./checkin.scss" + + +class CheckIn extends Component { +render(){ + return ( +
+
+
+ + +
+ Check-In! +
+ +
+
+
+ +
+
+
+
+ ); + } +} + +export default CheckIn; \ No newline at end of file diff --git a/client/src/pages/home/home.jsx b/client/src/pages/home/home.jsx deleted file mode 100644 index e69de29..0000000 diff --git a/client/src/routes/index.jsx b/client/src/routes/index.jsx index 2085993..f4e4158 100644 --- a/client/src/routes/index.jsx +++ b/client/src/routes/index.jsx @@ -2,6 +2,7 @@ import Home from "../pages/Home"; // import NeonHeart from "../pages/NeonHeart"; // import CreateAccount from "../pages/createAccount"; import SignUp from "../pages/SignUp"; +import CheckIn from "../pages/CheckIn"; // import Dashboard from "../pages/dash"; // import Login from "../pages/Login"; @@ -10,26 +11,14 @@ const routes = [ path: "/", component: Home }, - // { - // path: "/neon", - // component: NeonHeart - // }, - // { - // path: "/login", - // component: Login - // }, - // { - // path: "/create", - // component: CreateAccount - // }, { path: "/signUp", component: SignUp }, - // { - // path: "/dash", - // component: Dashboard - // } + { + path: "/checkin", + component: CheckIn + } ]; export default routes; From 836251610efcdb2cb06c9879a5d68111ee58b594 Mon Sep 17 00:00:00 2001 From: Adrian Darian Date: Mon, 24 Feb 2020 23:35:13 -0800 Subject: [PATCH 2/2] Working check in page --- client/src/component/Navigation-Bar/index.jsx | 23 ++--- client/src/pages/CheckIn/index.jsx | 92 +++++++++++++++---- client/src/pages/SignUp/index.jsx | 11 +-- package.json | 1 + server.js | 29 ++++-- src/models/index.js | 11 ++- src/routes/attendees.js | 70 +++++++++++++- 7 files changed, 184 insertions(+), 53 deletions(-) diff --git a/client/src/component/Navigation-Bar/index.jsx b/client/src/component/Navigation-Bar/index.jsx index 1e47f21..683b312 100644 --- a/client/src/component/Navigation-Bar/index.jsx +++ b/client/src/component/Navigation-Bar/index.jsx @@ -1,5 +1,5 @@ import React from "react"; -//import { Link } from "react-router-dom"; +import { Link } from "react-router-dom"; import "./navigation-bar.scss"; @@ -7,9 +7,8 @@ class NavigationBar extends React.Component { render() { const isMobile = window.innerWidth <= 500; if (isMobile) { - return (null); - } - else { + return null; + } else { return ( ); diff --git a/client/src/pages/CheckIn/index.jsx b/client/src/pages/CheckIn/index.jsx index f89393d..823022d 100644 --- a/client/src/pages/CheckIn/index.jsx +++ b/client/src/pages/CheckIn/index.jsx @@ -1,37 +1,93 @@ -import React, {Component} from "react"; -import LOGO from "../../assets/Images/logo.png"; -import "./checkin.scss" +import React, { Component } from "react"; +import axios from "axios"; +import { ToastContainer, toast } from "react-toastify"; +import "react-toastify/dist/ReactToastify.css"; +import LOGO from "../../assets/Images/logo.png"; +import "./checkin.scss"; class CheckIn extends Component { -render(){ + constructor(props) { + super(props); + this.state = { + email: "" + }; + + this.handleSubmit = this.handleSubmit.bind(this); + } + + successToast = () => { + toast("Successfully Checked In!", { + position: toast.POSITION.TOP_CENTER, + className: "toast-success", + autoClose: 8000, + draggable: false + }); + }; + + errorToast = () => { + toast.error( + "You have not signed up before, please go to the other table and sign up before checking in!", + { + position: toast.POSITION_TOP_CENTER, + className: "toast-error", + draggable: false + } + ); + }; + + handleSubmit = event => { + event.preventDefault(); + + axios + .get("http://localhost:3852/api/attendees", { + params: { + email: this.state.email + } + }) + .then(async response => { + if (response.data.status === "Application Found!") { + await this.successToast(); + await axios.patch("http://localhost:3852/api/attendees", { + ...response.data.user, + status: "checked in" + }) + } else { + this.errorToast(); + } + }) + .catch(this.errorToast); + }; + + render() { return ( -
+
-
- - -
- Check-In! -
- -
+
+ +
Check-In!
+
{ + this.setState({ email: event.target.value }); + }} />
+
+
); } -} +} -export default CheckIn; \ No newline at end of file +export default CheckIn; diff --git a/client/src/pages/SignUp/index.jsx b/client/src/pages/SignUp/index.jsx index 50b973e..1c03d92 100644 --- a/client/src/pages/SignUp/index.jsx +++ b/client/src/pages/SignUp/index.jsx @@ -23,7 +23,7 @@ class SignUp extends Component { major: "", year: "", schoolStanding: "", - graduationYear: 2020, + graduationYear: 2021, dietaryRestrictions: "", specialNeeds: "", firstHackathon: true, @@ -331,14 +331,12 @@ class SignUp extends Component { const user = this.createUser(this.state); - console.log("before posting to DB: ", user); - this.setState({ loader: "" }); axios - .post("http://hackmerced.io/api/attendees", user) + .post("http://localhost:3852/api/attendees", user) .then(response => { if (response.data.submitted === "Application successfully submitted!") { this.successToast(); @@ -350,8 +348,6 @@ class SignUp extends Component { } }) .catch(this.errorToast); - - // window.location.replace("http://hackmerced.io"); }; render() { @@ -415,6 +411,7 @@ class SignUp extends Component { min={17} max={100} onChange={this.handleAgeChange} + defaultValue={18} >
@@ -475,6 +472,7 @@ class SignUp extends Component {