Skip to content

Styling ethan #33

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jiangerr wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Styling ethan #33

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b1791b8
/attend-event styled
jiangerr Apr 17, 2023
d03e624
/create-form styling
jiangerr Apr 17, 2023
e52052b
/create-event styling
jiangerr Apr 17, 2023
54666bf
added fields to CreateForm
jiangerr Apr 18, 2023
537b06f
change form desc to textarea
jiangerr Apr 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 17 additions & 11 deletions src/pages/AttendEvent/AttendEvent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import "./AttendEvent.scss";
import { attendEvent } from "../../util/ServerInterfaceEvents";
import { Navigate } from "react-router";

import Logo from "../../assets/mission-safe-logo.png";

class AttendEvent extends React.Component {
constructor(props) {
super(props)
Expand All @@ -29,17 +31,17 @@ class AttendEvent extends React.Component {
async handleSubmit(event) {
event.preventDefault();
console.log(this.state);
if(this.state.code.length === 5 && this.state.email.length > 0) {
if (this.state.code.length === 5 && this.state.email.length > 0) {
try {
let attendanceResult = await attendEvent(this.state.code, {
email: this.state.email
});
if(attendanceResult) {
if (attendanceResult) {
this.setState({
redirect: true,
})
}
} catch(err) {
} catch (err) {
this.setState({
errorMessage: "Failed to register attendance. Please try again."
})
Expand All @@ -49,20 +51,24 @@ class AttendEvent extends React.Component {
}

render() {
if(this.state.redirect) {
return <Navigate to="/attend-success"/>
if (this.state.redirect) {
return <Navigate to="/attend-success" />
} else {
return (
<div className="page-container">
<p>Event Attendance</p>
<div className="page-container" id="attendance-page">
<div id="header">
<img src={Logo} alt="MissionSAFE logo" />
<p id="title">Event Attendance</p>
<p id="subtitle">Enter your information below.</p>
</div>
<div className="attendace-form">
<div className="attendance-input">
<p>Email</p>
<input onChange={this.handleUpdate} name="email" type="text" placeholder="example@email.com"/>
<p className="form-label">Email</p>
<input onChange={this.handleUpdate} name="email" type="text" placeholder="example@email.com" />
</div>
<div className="attendance-input">
<p>Event Code</p>
<input onChange={this.handleUpdate} id="code-input" name="code" type="text" placeholder="XXXXX"/>
<p className="form-label">Event Code</p>
<input onChange={this.handleUpdate} id="code-input" name="code" type="text" placeholder="XXXXX" />
</div>
</div>
<p className="attendance-error">{this.state.errorMessage}</p>
Expand Down
62 changes: 62 additions & 0 deletions src/pages/AttendEvent/AttendEvent.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
#attendance-page {
img {
height: 110px;
width: 110px;
}
}

#header {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
margin-top: 36px;

img {
margin-bottom: 25px;
}
}

#title {
font-size: 38px;
font-weight: 400;
margin-top: 0;
margin-bottom: 8px;
letter-spacing: 2px;
}

#subtitle {
margin-top: 0;
font-size: 14px;
font-weight: 400;
color: #5A5A5A
}

.attendance-form {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 25px;
}


.attendance-input input {
margin-top: 0;
background-color: #F4F4F4;
border: 1px solid #D9D9D9;
border-radius: 5px;
color: black;
padding: 6px;
color: #5A5A5A;
font-size: 14px;
width: 320px;
}

.form-label {
margin-bottom: 1px;
color: #5A5A5A;
font-size: 14px;
letter-spacing: 1px;
}
27 changes: 16 additions & 11 deletions src/pages/CreateEvent/CreateEvent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import { Navigate } from "react-router";
import { createEvent } from "../../util/ServerInterfaceEvents";
import "./CreateEvent.scss";

import Logo from "../../assets/mission-safe-logo.png";

class CreateEvent extends React.Component {
constructor(props) {
super(props);
Expand All @@ -27,15 +29,15 @@ class CreateEvent extends React.Component {

async handleSubmit(event) {
event.preventDefault();
if(this.state.program.length > 0) { // DUMMY PROGRAM CHECKING
if (this.state.program.length > 0) { // DUMMY PROGRAM CHECKING
try {
let event = await createEvent({
programs: [this.state.program],
});
this.setState({
eventCode: event.code,
})
} catch(err) {
} catch (err) {
this.setState({
errorMessage: "Failed to create event, please try again."
});
Expand All @@ -45,25 +47,28 @@ class CreateEvent extends React.Component {

render() {
try {
if(!this.props.user.active) {
return <Navigate to="/unauthorized"/>
if (!this.props.user.active) {
return <Navigate to="/unauthorized" />
} else if (this.state.eventCode) {
return <Navigate to={`/event/${this.state.eventCode}`}/>
return <Navigate to={`/event/${this.state.eventCode}`} />
} else {
return (
<div className="page-container">
<p className="event-creation-title">Event Creation</p>
<div className="page-container" id="create-event-page">
<div id="create-event-header">
<img src={Logo} alt="MissionSAFE logo" />
<p className="event-creation-title">Create Event</p>
</div>
<div className="event-options">
<p>What program is this event associated with?</p>
<input name="program" onChange={this.handleUpdate} type="text"/>
<p className="prompt">What program is this event associated with?</p>
<input name="program" onChange={this.handleUpdate} type="text" />
</div>
<p>{this.state.errorMessage}</p>
<p onClick={this.handleSubmit} className="message-page-button">Create Event</p>
</div>
)
}
} catch(err) {
return <Navigate to="/unauthorized"/>
} catch (err) {
return <Navigate to="/unauthorized" />
}
}
}
Expand Down
58 changes: 39 additions & 19 deletions src/pages/CreateEvent/CreateEvent.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,27 @@
#create-event-page img {
height: 110px;
width: 110px;
}

#create-event-header {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
margin-top: 36px;

img {
margin-bottom: 25px;
}
}

.event-creation-title {
font-size: 30px;
font-weight: 500;
color: #5A5A5A;
font-family: Arial, Helvetica, sans-serif;
margin-top: 150px;
font-size: 38px;
font-weight: 400;
margin-top: 0;
margin-bottom: 8px;
letter-spacing: 2px;
}

.event-options {
Expand All @@ -12,21 +30,23 @@
align-items: center;
justify-content: center;
margin-bottom: 10px;
}

.event-options input {
margin-top: 0;
background-color: #F4F4F4;
border: 1px solid #D9D9D9;
border-radius: 5px;
color: black;
padding: 6px;
color:#5A5A5A;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
input {
margin-top: 0;
background-color: #F4F4F4;
border: 1px solid #D9D9D9;
border-radius: 5px;
color: black;
padding: 6px;
color: #5A5A5A;
font-size: 14px;
width: 320px;
}
}

.event-options p {
margin-right: 5px;
font-family: Arial, Helvetica, sans-serif;
.prompt {
margin-bottom: 1px;
color: #5A5A5A;
font-size: 14px;
letter-spacing: 1px;
}
53 changes: 34 additions & 19 deletions src/pages/CreateForm/CreateForm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,17 @@ import { createYouthForm } from "../../util/ServerInterfaceYouth";
import { Navigate } from "react-router";
import "./CreateForm.scss"

import Logo from "../../assets/mission-safe-logo.png";

class CreateForm extends React.Component {
constructor(props) {
super(props);

this.state = {
type: window.location.pathname.split("/")[2], // "event" or "youth"
id: window.location.pathname.split("/")[3], // eventCode or fireID
name: "",
description: "",
program: "",
content: "",
errorMessage: "",
Expand All @@ -31,14 +35,14 @@ class CreateForm extends React.Component {

async handleSubmit(event) {
event.preventDefault();
if(this.state.program.length > 0 && this.state.content.length > 0) {
if (this.state.program.length > 0 && this.state.content.length > 0) {
try {
if(this.state.type === "event") {
if (this.state.type === "event") {
let form = await createEventForm(this.state.id, {
programs: [this.state.program],
content: this.state.content
});
if(form.ok) {
if (form.ok) {
this.setState({
redirect: true,
})
Expand All @@ -47,12 +51,12 @@ class CreateForm extends React.Component {
errorMessage: "Something went wrong. Please try again."
})
}
} else if(this.state.type === "youth") {
} else if (this.state.type === "youth") {
let form = await createYouthForm(this.state.id, {
programs: [this.state.program],
content: this.state.content
});
if(form.ok) {
if (form.ok) {
this.setState({
redirect: true,
})
Expand All @@ -62,7 +66,7 @@ class CreateForm extends React.Component {
})
}
}
} catch(err) {
} catch (err) {
this.setState({
errorMessage: "Failed to create form. Please try again."
})
Expand All @@ -72,30 +76,41 @@ class CreateForm extends React.Component {

render() {
try {
if(!this.props.user.active) {
return <Navigate to="/unauthorized"/>
} else if(this.state.redirect) {
return <Navigate to="/records"/>
if (!this.props.user.active) {
return <Navigate to="/unauthorized" />
} else if (this.state.redirect) {
return <Navigate to="/records" />
} else {
return (
<div className="page-container">
<p className="form-creation-title">Form Creation</p>
<div className="form-options">
<div className="page-container" id="form-create-page">
<div id="form-create-header">
<img src={Logo} alt="MissionSAFE logo" />
<p className="form-creation-title">Create Form</p>
</div>
Comment thread
jiangerr marked this conversation as resolved.
<div className="form-option">
<div className="form-option">
<p className="form-label">Form Name</p>
<input name="name" onChange={this.handleUpdate} type="text" />
</div>
<div className="form-option">
<p className="form-label">What program is this form associated with?</p>
<input name="program" onChange={this.handleUpdate} type="text" />
</div>
<div className="form-option">
<p>What program is this form associated with?</p>
<input name="program" onChange={this.handleUpdate} type="text"/>
<p className="form-label">Form Description</p>
<textarea name="description" onChange={this.handleUpdate} />
</div>
<div className="form-option">
<p>Content</p>
<textarea name="content" onChange={this.handleUpdate}/>
<p className="form-label">Content</p>
<textarea name="content" onChange={this.handleUpdate} />
</div>
</div>
<p onClick={this.handleSubmit} className="message-page-button">Create Form</p>
</div>
)
}
} catch(err) {
return <Navigate to="/unauthorized"/>
} catch (err) {
return <Navigate to="/unauthorized" />
}
}
}
Expand Down
Loading