update,
This commit is contained in:
louiscklaw
@@ -0,0 +1,110 @@
|
||||
.bi-chevron-left {
|
||||
font-size: 30px;
|
||||
position: fixed;
|
||||
top: 90px;
|
||||
left: 50px;
|
||||
color: #444a58;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* event body CSS */
|
||||
#from-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 30px 10px;
|
||||
}
|
||||
|
||||
.box {
|
||||
margin: 10px 10px;
|
||||
}
|
||||
|
||||
.form-header {
|
||||
font-size: 20px;
|
||||
font-family: 'Lato', sans-serif;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.venue-check {
|
||||
display: flex;
|
||||
font-size: 16px;
|
||||
font-family: 'Lato', sans-serif;
|
||||
}
|
||||
|
||||
.form-check {
|
||||
margin: 10px;
|
||||
font-size: 16 px;
|
||||
font-family: 'Lato', sans-serif;
|
||||
}
|
||||
|
||||
/* Date part */
|
||||
.eventDate-box {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.event-time-label {
|
||||
font-size: 19px;
|
||||
font-family: 'Lato', sans-serif;
|
||||
margin: 4px 10px 4px 0px;
|
||||
}
|
||||
|
||||
.event-time-label-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.event-time-label-box > input {
|
||||
color: #495871;
|
||||
}
|
||||
|
||||
.clock {
|
||||
margin: 4px 10px 4px 0px;
|
||||
}
|
||||
|
||||
/* parking */
|
||||
.parking-box {
|
||||
display: flex;
|
||||
margin: 15px 0px 5px 0px;
|
||||
color: #495871;
|
||||
}
|
||||
|
||||
.parking-number-input {
|
||||
margin-left: 10px;
|
||||
width: 70px;
|
||||
}
|
||||
|
||||
/* budget */
|
||||
.budget-box {
|
||||
color: #495871;
|
||||
font-family: 'Lato', sans-serif;
|
||||
margin: 5px 0px;
|
||||
}
|
||||
|
||||
.budget-box span {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
/* submit btn */
|
||||
.submit-btn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
max-height: 50px;
|
||||
}
|
||||
|
||||
#event-submit {
|
||||
border: none;
|
||||
margin-top: 10px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.event-date-reminder {
|
||||
color: grey;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* Remark Css */
|
||||
.form-control {
|
||||
border-width: 2px;
|
||||
border-radius: 10px;
|
||||
width: 90%;
|
||||
}
|
||||
@@ -0,0 +1,95 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link
|
||||
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css"
|
||||
rel="stylesheet"
|
||||
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT"
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
|
||||
integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A=="
|
||||
crossorigin="anonymous"
|
||||
referrerpolicy="no-referrer"
|
||||
/>
|
||||
<link rel="stylesheet" href="./newEvent.css" />
|
||||
<title>Add New Party</title>
|
||||
</head>
|
||||
|
||||
<body style="display: none">
|
||||
<div class="navbar-container container">
|
||||
<!-- NAVBAR: to be loaded with js -->
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<a href="/index.html"><i class="bi bi-chevron-left"></i></a>
|
||||
<div class="row">
|
||||
<form id="from-container">
|
||||
<div class="outer-container">
|
||||
<div class="event-name-box">
|
||||
<div class="form-header">Name of the Event *</div>
|
||||
<input id="event-name-input" type="text" class="form-control" name="event_name" />
|
||||
</div>
|
||||
<div class="Venue-box">
|
||||
<div class="form-header">Venue of the party</div>
|
||||
<input type="text" class="form-control" name="event_venue" />
|
||||
</div>
|
||||
<div class="event-date">
|
||||
<div class="eventDate-box">
|
||||
<div class="event-time-label-box">
|
||||
<label for="meeting-time-start" class="event-time-label">Start date & time:</label>
|
||||
<label for="meeting-time-end" class="event-time-label">End date & time:</label>
|
||||
</div>
|
||||
<div class="event-time-label-box">
|
||||
<input
|
||||
class="clock"
|
||||
type="datetime-local"
|
||||
id="meeting-time-start"
|
||||
name="event_date_start"
|
||||
min="2021-06-07T00:00"
|
||||
max="2035-12-30T00:00"
|
||||
step="900"
|
||||
/>
|
||||
<input
|
||||
class="clock"
|
||||
type="datetime-local"
|
||||
id="meeting-time-end"
|
||||
name="event_date_end"
|
||||
min="2021-06-07T00:00"
|
||||
max="2035-12-30T00:00"
|
||||
step="900"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="event-date-reminder">
|
||||
Enter the time in 15 mins interval, e.g. 15:00 or 15:15 or 15:30 or 15:45.
|
||||
</div>
|
||||
|
||||
<!-- submit btn -->
|
||||
<div class="submit-btn">
|
||||
<button id="event-submit">
|
||||
<img src="/asset/submit_button.svg" alt="Submit Button" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script
|
||||
src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"
|
||||
integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8"
|
||||
crossorigin="anonymous"
|
||||
></script>
|
||||
<script type="module" src="./newEvent.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,69 @@
|
||||
import { addNavbar } from '/functions/addNavbar.js';
|
||||
import { loadName } from '/functions/loadName.js';
|
||||
|
||||
function onlyNumbers(str) {
|
||||
return /^[0-9]+$/.test(str);
|
||||
}
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
addNavbar();
|
||||
loadName();
|
||||
document.body.style.display = 'block';
|
||||
});
|
||||
|
||||
document.querySelector('#from-container').addEventListener('submit', async function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
const form = e.target;
|
||||
const eventName = form.event_name.value;
|
||||
const eventVenue = form.event_venue.value || null;
|
||||
const startTime = form.event_date_start.value ? new Date(form.event_date_start.value).toISOString() : null;
|
||||
const endTime = form.event_date_end.value ? new Date(form.event_date_end.value).toISOString() : null;
|
||||
|
||||
let dataPass = true;
|
||||
|
||||
if (!eventName) {
|
||||
dataPass = false;
|
||||
alert('Please fill in the event name!');
|
||||
}
|
||||
|
||||
const nowTimeValue = new Date().getTime();
|
||||
const startTimeValue = new Date(startTime).getTime();
|
||||
const endTimeValue = new Date(endTime).getTime();
|
||||
|
||||
// check time validity
|
||||
if (startTimeValue && endTimeValue) {
|
||||
if (startTimeValue <= nowTimeValue) {
|
||||
dataPass = false;
|
||||
alert('Start time must be later than time now!');
|
||||
} else if (startTimeValue >= endTimeValue) {
|
||||
dataPass = false;
|
||||
alert('Start time cannot equals or later than end time!');
|
||||
}
|
||||
} else if (!!startTimeValue + !!endTimeValue) {
|
||||
dataPass = false;
|
||||
alert('You cannot only leave 1 time blank!');
|
||||
}
|
||||
|
||||
if (dataPass) {
|
||||
let formObj = {
|
||||
eventName,
|
||||
eventVenue,
|
||||
startTime,
|
||||
endTime
|
||||
};
|
||||
|
||||
const res = await fetch('/events', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(formObj)
|
||||
});
|
||||
|
||||
const eventsResult = await res.json();
|
||||
if (eventsResult.msg === 'Posted to DB') {
|
||||
window.location.href = '/index.html'; //
|
||||
}
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user