Skip to content
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

Feature/kevinsophia/event creator #44

Merged
merged 18 commits into from
Jun 29, 2024
Merged

Feature/kevinsophia/event creator #44

Changes from 1 commit
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
f412444
update events creator sidebar
syz16 May 15, 2024
19d11db
update warning module button styling
syz16 May 15, 2024
8c6a042
fix sidebar scrolling issue
syz16 May 17, 2024
1c701d5
fixed backend, fixed save and delete functionalities; redesign the ta…
kevindo0720 May 22, 2024
2deead8
added calendar functionality
kevindo0720 May 29, 2024
cc8a133
start end time frontend formatting
syz16 May 29, 2024
1c7b798
text field formatting
syz16 May 30, 2024
5f78f07
update imports
syz16 May 30, 2024
f7d55d6
simple character counter (does not prevent typing too much)
syz16 May 30, 2024
b1d3b28
deselect row upon closing sidebar
syz16 May 30, 2024
f54e507
put datepicker input behind gray-out when cancelling
syz16 May 30, 2024
67fff66
adjust time input box placement
syz16 May 30, 2024
7ce16fe
Merge branch 'main' into feature/kevinsophia/event-creator
jennymar Jun 2, 2024
32f02ad
Date and time are separate fields. put req in proj
jennymar Jun 2, 2024
9632e11
Backend changes built
jennymar Jun 2, 2024
33a96c6
Fixed fetch error with event and newsletter creators
jennymar Jun 4, 2024
0a24933
multiple page fix creators
jennymar Jun 29, 2024
e6564fe
frontend linting fix
jennymar Jun 29, 2024
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
Prev Previous commit
Next Next commit
start end time frontend formatting
  • Loading branch information
@syz16
syz16 committed May 29, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Verified
Learn about vigilant mode
commit cc8a133a86d11eede62b5fa389f24357c0eef3a8
100 changes: 71 additions & 29 deletions frontend/src/components/EventSidebar.tsx
View file
Original file line number Diff line number Diff line change
@@ -38,10 +38,26 @@ const EventSidebar = ({
}: eventSidebarProps) => {
const [name, setName] = useState(eventDetails ? eventDetails.name : "");
const [description, setDescription] = useState(eventDetails ? eventDetails.description : "");
const [description_short, setDescription_short] = useState(eventDetails ? eventDetails.description_short : "");
const [description_short, setDescription_short] = useState(
eventDetails ? eventDetails.description_short : "",
);
const [date, setDate] = useState(eventDetails ? new Date(eventDetails.date) : new Date());
const [startTime, setStartTime] = useState(eventDetails ? new Date(eventDetails.date).toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }) : "");
const [endTime, setEndTime] = useState(eventDetails ? new Date(new Date(eventDetails.date).getTime() + 2 * 60 * 60 * 1000).toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }) : "");
const [startTime, setStartTime] = useState(
eventDetails
? new Date(eventDetails.date).toLocaleTimeString("en-US", {
hour: "2-digit",
minute: "2-digit",
})
: "",
);
const [endTime, setEndTime] = useState(
eventDetails
? new Date(new Date(eventDetails.date).getTime() + 2 * 60 * 60 * 1000).toLocaleTimeString(
"en-US",
{ hour: "2-digit", minute: "2-digit" },
)
: "",
);
const [location, setLocation] = useState(eventDetails ? eventDetails.location : "");
const [guidelines, setGuidelines] = useState(eventDetails ? eventDetails.guidelines : "");
const [isEditing, setIsEditing] = useState<boolean>(!eventDetails);
@@ -61,7 +77,9 @@ const EventSidebar = ({
updatedEndDate.setHours(parseInt(endHour), parseInt(endMinute));

setDate(updatedStartDate);
setEndTime(updatedEndDate.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }));
setEndTime(
updatedEndDate.toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit" }),
);
}
}, [startTime, endTime]);

@@ -70,8 +88,22 @@ const EventSidebar = ({
setDescription(eventDetails ? eventDetails.description : "");
setDescription_short(eventDetails ? eventDetails.description_short : "");
setDate(eventDetails ? new Date(eventDetails.date) : new Date());
setStartTime(eventDetails ? new Date(eventDetails.date).toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }) : "");
setEndTime(eventDetails ? new Date(new Date(eventDetails.date).getTime() + 2 * 60 * 60 * 1000).toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }) : "");
setStartTime(
eventDetails
? new Date(eventDetails.date).toLocaleTimeString("en-US", {
hour: "2-digit",
minute: "2-digit",
})
: "",
);
setEndTime(
eventDetails
? new Date(new Date(eventDetails.date).getTime() + 2 * 60 * 60 * 1000).toLocaleTimeString(
"en-US",
{ hour: "2-digit", minute: "2-digit" },
)
: "",
);
setLocation(eventDetails ? eventDetails.location : "");
setGuidelines(eventDetails ? eventDetails.guidelines : "");
setIsEditing(false);
@@ -324,7 +356,6 @@ const EventSidebar = ({
}}
/>
<div className={styles.textField}>
<label>Date & Time </label>
<DatePicker
selected={date}
onChange={(date: Date) => setDate(date)}
@@ -333,34 +364,45 @@ const EventSidebar = ({
<TextFieldSmall
className={`${styles.textField} ${styles.stretch}`}
label="Date & Time"
value={date ? `${date.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}, ${startTime}-${endTime}` : ''}
value={
date
? `${date.toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric" })}, ${startTime}-${endTime}`
: ""
}
placeholder="Select date and time"
/>
}
/>
{errors.date && <p className={styles.error}>Date is required</p>}
</div>
<div style={{ display: 'flex'}}>
<TextFieldSmallest
className={styles.textField}
label="Start Time"
value={startTime}
placeholder="Start Time"
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
setStartTime(event.target.value);
}}
error={errors.date}
/>
<TextFieldSmallest
className={styles.textField}
label="End Time"
value={endTime}
placeholder="End Time"
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
setEndTime(event.target.value);
}}
error={errors.date}
/>
<div style={{ display: "flex" }}>
<div style={{ width: "100px" }}>
<TextFieldSmallest
className={styles.textField}
label="Start Time"
value={startTime}
placeholder="Start Time"
style={{ width: "100px" }}
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
setStartTime(event.target.value);
}}
error={errors.date}
/>
</div>
<p style={{ marginTop: "50px", marginLeft: "10px", marginRight: "10px" }}>to</p>
<div style={{ width: "100px" }}>
<TextFieldSmallest
className={styles.textField}
label="End Time"
value={endTime}
placeholder="End Time"
style={{ width: "100px" }}
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
setEndTime(event.target.value);
}}
error={errors.date}
/>
</div>
</div>
<TextField
className={`${styles.textField} ${styles.stretch}`}