354 lines
9.8 KiB
HTML
354 lines
9.8 KiB
HTML
<!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="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 href="https://fonts.googleapis.com/css?family=Kalam" rel="stylesheet" />
|
|
<link rel="stylesheet" href="./eventSchedule.css" />
|
|
<title>Event Schedule</title>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="navbar-container container">
|
|
<!-- NAVBAR: to be loaded with js -->
|
|
</div>
|
|
|
|
<header id="event-name"></header>
|
|
<div id="event-time-container">
|
|
<!-- time and date input here -->
|
|
</div>
|
|
|
|
<div class="container container-fluid" id="page">
|
|
<div id="time-block-page-container" class="container row">
|
|
<div id="date-selector-container" class="col-12">
|
|
<!-- time selector here -->
|
|
</div>
|
|
<div id="time-block-memo-container" class="col-sm-5 overflow-auto"></div>
|
|
<div id="rundown-container" class="col-sm-7 overflow-auto">
|
|
<div id="rundown" class="rundown" data-current="0">
|
|
<!-- Add Time Block and Time-stamp on window load -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Back Button -->
|
|
<a id="back-page">
|
|
<i class="bi bi-chevron-left"></i>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- create time block modal -->
|
|
|
|
<div
|
|
class="modal fade"
|
|
id="create-time-block-modal"
|
|
data-bs-backdrop="static"
|
|
data-bs-keyboard="false"
|
|
tabindex="-1"
|
|
aria-labelledby="staticBackdropLabel"
|
|
aria-hidden="true"
|
|
>
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<div></div>
|
|
<h5 class="modal-title">CREATE ACTIVITY</h5>
|
|
<div class="exit-modal">
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="input-group">
|
|
<form id="activity-form" class="register-form">
|
|
<div class="input-panel mb-3">
|
|
<div class="form-header">Activity Name *</div>
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
name="activity-name"
|
|
aria-label="first-name"
|
|
aria-describedby="basic-addon1"
|
|
/>
|
|
</div>
|
|
|
|
<div class="input-panel mb-3">
|
|
<div class="form-header">Description</div>
|
|
<textarea
|
|
id="description"
|
|
class="form-control"
|
|
name="description"
|
|
rows="5"
|
|
cols="50"
|
|
></textarea>
|
|
</div>
|
|
|
|
<div id="time-container">
|
|
<div class="input-panel mb-3">
|
|
<div class="form-header">Start Time *</div>
|
|
<input
|
|
type="time"
|
|
name="start"
|
|
class="form-control"
|
|
id="start-time"
|
|
name="start-time"
|
|
min="00:00"
|
|
max="24:00"
|
|
step="900"
|
|
required
|
|
/>
|
|
</div>
|
|
<div class="input-panel mb-3">
|
|
<div class="form-header">End Time *</div>
|
|
<input
|
|
type="time"
|
|
name="end"
|
|
class="form-control"
|
|
id="end-time"
|
|
name="end-time"
|
|
min="00:00"
|
|
max="24:00"
|
|
step="900"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="input-panel mb-3">
|
|
<div class="form-header">Remarks</div>
|
|
<textarea
|
|
id="remark"
|
|
class="form-control"
|
|
name="remark"
|
|
rows="5"
|
|
cols="50"
|
|
></textarea>
|
|
</div>
|
|
|
|
<div class="input-panel mb-3">
|
|
<div class="form-header">Display Color</div>
|
|
<input value="#f29659" id="color" class="form-control" name="color" type="color" />
|
|
</div>
|
|
|
|
<div class="modal-footer">
|
|
<button id="submit-new-activity" type="submit" class="btn btn-primary button-53">
|
|
Submit
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- edit Time block modal (name and time only) -->
|
|
|
|
<div
|
|
class="modal fade"
|
|
id="edit-time-name-modal"
|
|
data-bs-backdrop="static"
|
|
data-bs-keyboard="false"
|
|
tabindex="-1"
|
|
aria-labelledby="staticBackdropLabel"
|
|
aria-hidden="true"
|
|
>
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<div></div>
|
|
<h5 class="modal-title">EDIT NAME AND TIME</h5>
|
|
<div class="exit-modal">
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="input-group">
|
|
<form id="edit-time-name-form" class="register-form">
|
|
<div class="input-panel mb-3">
|
|
<div class="form-header">Activity Name *</div>
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
name="edit-activity-name"
|
|
id="edit-activity-name"
|
|
aria-describedby="basic-addon1"
|
|
/>
|
|
</div>
|
|
|
|
<div id="time-container">
|
|
<div class="input-panel mb-3">
|
|
<div class="form-header">Start Time *</div>
|
|
<input
|
|
type="time"
|
|
name="start"
|
|
class="form-control"
|
|
id="edit-start-time"
|
|
name="edit-start-time"
|
|
min="00:00"
|
|
max="24:00"
|
|
step="900"
|
|
required
|
|
/>
|
|
</div>
|
|
<div class="input-panel mb-3">
|
|
<div class="form-header">End Time *</div>
|
|
<input
|
|
type="time"
|
|
name="end"
|
|
class="form-control"
|
|
id="edit-end-time"
|
|
name="edit-end-time"
|
|
min="00:00"
|
|
max="24:00"
|
|
step="900"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="input-panel mb-3">
|
|
<div class="form-header">Display Color</div>
|
|
<input
|
|
value="#f29659"
|
|
id="edit-color"
|
|
class="form-control"
|
|
name="color"
|
|
type="color"
|
|
/>
|
|
</div>
|
|
|
|
<div class="modal-footer">
|
|
<button id="submit-edit-time-name" type="submit" class="btn btn-primary button-53">
|
|
Submit
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Edit Item Modal -->
|
|
<div
|
|
class="modal fade"
|
|
id="edit-item-modal"
|
|
data-bs-backdrop="static"
|
|
data-bs-keyboard="false"
|
|
tabindex="-1"
|
|
aria-labelledby="staticBackdropLabel"
|
|
aria-hidden="true"
|
|
>
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<div></div>
|
|
<h5 class="modal-title">ITEM LIST</h5>
|
|
<div class="exit-modal">
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div id="item-form-text" class="form-text">
|
|
Select items you wish to add to this activity. Blanketed indicates total quantity of each
|
|
items assigned to the event.
|
|
</div>
|
|
<div class="input-group">
|
|
<form id="edit-item-form" class="edit-item-form row">
|
|
<div class="input-panel mb-3 col-6">
|
|
<div class="form-header" id="item-form-header">Food</div>
|
|
<div class="list-items-container">
|
|
<ul
|
|
id="food-list"
|
|
class="item-list-box"
|
|
role="listbox"
|
|
tabindex="0"
|
|
aria-label="emails list"
|
|
>
|
|
<!-- to be added by JS -->
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="input-panel mb-3 col-6">
|
|
<div class="form-header" id="item-form-header">Drinks</div>
|
|
<div class="list-items-container">
|
|
<ul
|
|
id="drink-list"
|
|
class="item-list-box"
|
|
role="listbox"
|
|
tabindex="0"
|
|
aria-label="emails list"
|
|
>
|
|
<!-- to be added by JS -->
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="input-panel mb-3 col-6">
|
|
<div class="form-header" id="item-form-header">Decoration</div>
|
|
<div class="list-items-container">
|
|
<ul
|
|
id="decoration-list"
|
|
class="item-list-box"
|
|
role="listbox"
|
|
tabindex="0"
|
|
aria-label="emails list"
|
|
>
|
|
<!-- to be added by JS -->
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="input-panel mb-3 col-6">
|
|
<div class="form-header" id="item-form-header">Others</div>
|
|
<div class="list-items-container">
|
|
<ul
|
|
id="other-list"
|
|
class="item-list-box"
|
|
role="listbox"
|
|
tabindex="0"
|
|
aria-label="emails list"
|
|
>
|
|
<!-- to be added by JS -->
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-footer">
|
|
<button id="submit-edit-item" type="submit" class="btn btn-primary button-53">
|
|
Submit
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://thibaultjanbeyer.github.io/DragSelect/ds.min.js"></script>
|
|
<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="./eventSchedule.js"></script>
|
|
</body>
|
|
</html>
|