update,
This commit is contained in:
louiscklaw
@@ -0,0 +1,972 @@
|
||||
/* @import */
|
||||
body {
|
||||
font-family: 'Calibri';
|
||||
background-color: #ffffff;
|
||||
font-size: 16px;
|
||||
font-family: 'Lato', sans-serif;
|
||||
}
|
||||
|
||||
textarea {
|
||||
border-radius: 10px;
|
||||
background: none;
|
||||
border-color: #3f3f3f;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.content {
|
||||
height: calc(100vh - 115px);
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.vertical-flex {
|
||||
flex-direction: column;
|
||||
justify-content: flex-start !important;
|
||||
align-items: flex-start !important;
|
||||
}
|
||||
|
||||
.background-frame:not(.eventname .background-frame) {
|
||||
background-color: #f9f9da;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.background-frame {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
.line1 {
|
||||
height: 15vh;
|
||||
}
|
||||
|
||||
.line2 {
|
||||
height: 65vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.participant {
|
||||
height: 65%;
|
||||
}
|
||||
|
||||
.venue {
|
||||
height: 35%;
|
||||
}
|
||||
|
||||
.frame {
|
||||
padding: 10px 0 10px 0;
|
||||
}
|
||||
|
||||
.frame-title {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.frame-title-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.frame-content-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
padding: 10px 0;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.eventname {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
line-height: 100%;
|
||||
}
|
||||
|
||||
.eventname .emoji {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.date-time .background-frame > div {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.date-time .background-frame > div:first-child {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.date-time .background-frame > div:nth-child(2) {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.date-time .background-frame {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.date-time .frame-content,
|
||||
.date-time .frame-content-label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.date-time .frame-content-label {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.date-time .frame-content {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.participant .frame-content-container {
|
||||
width: 100%;
|
||||
max-height: 70%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.venue .frame-title-container,
|
||||
.schedule .frame-title-container {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#number-of-participants {
|
||||
margin: 0 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #f2d492;
|
||||
color: #ee6c4d;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.participant .left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.datetime-form {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.red_creator {
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.input-group-text {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#invitation-link {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.copied {
|
||||
background-color: #059862;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
border: 4px solid #07c982;
|
||||
}
|
||||
|
||||
.name-block {
|
||||
display: flex;
|
||||
margin: 10px 15px 10px 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.delete_event-button-container {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 50%;
|
||||
transform: translate(0, -50%);
|
||||
}
|
||||
|
||||
.warning-sign {
|
||||
font-size: 70px;
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
border-radius: 200px;
|
||||
border: solid 4px black;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.warning {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#delete-event-modal .modal-body,
|
||||
#overwrite-venue-poll-modal .modal-body,
|
||||
#overwrite-datetime-poll-modal .modal-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
div[class^='venue_poll_'] {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
div[class^='datetime_poll_'] {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.datetime_title {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
div[class^='venue_poll_'] label {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
div[class^='datetime_poll_'] label {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.datetime_title > div:first-child {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.datetime_title > div:nth-child(2) {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.datetime_title > div:nth-child(2) div {
|
||||
width: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.venue-poll-options-container {
|
||||
margin: 10px 20px !important;
|
||||
}
|
||||
|
||||
/* ↓↓ Scroll bar ↓↓ */
|
||||
.frame-content-container::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
/* ↑↑ Scroll bar ↑↑ */
|
||||
|
||||
/* ↓↓ Buttons ↓↓ */
|
||||
.venue-buttons-container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.edit-button,
|
||||
.poll-button {
|
||||
border-radius: 100px;
|
||||
background-color: #f29559;
|
||||
color: white;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
font-size: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.poll-button {
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.invite-button {
|
||||
border-radius: 100px;
|
||||
background-color: #f29559;
|
||||
color: white;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
font-size: 13px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.info-button {
|
||||
border-radius: 100px;
|
||||
background-color: #f29559;
|
||||
color: white;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
font-size: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.delete-button {
|
||||
border-radius: 100px;
|
||||
background-color: #c74b38;
|
||||
color: white;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
font-size: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#delete-event-submit,
|
||||
#overwrite-venue-poll-submit,
|
||||
#overwrite-datetime-poll-submit {
|
||||
background-color: #d8684e;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
border: #c7492c 3px solid;
|
||||
}
|
||||
|
||||
#delete-event-modal .modal-submit-button,
|
||||
#overwrite-venue-poll-modal .modal-submit-button,
|
||||
#overwrite-datetime-poll-modal .modal-submit-button {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.switch-buttons-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.btn-outline-success,
|
||||
.btn-outline-danger {
|
||||
--bs-btn-color: #6c757d;
|
||||
--bs-btn-border-color: #6c757d;
|
||||
--bs-btn-active-bg: #6c757d;
|
||||
--bs-btn-active-border-color: #6c757d;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.btn-outline-success {
|
||||
--bs-btn-border-radius: 0.375rem 0 0 0.375rem;
|
||||
}
|
||||
|
||||
.btn-outline-danger {
|
||||
--bs-btn-border-radius: 0 0.375rem 0.375rem 0;
|
||||
}
|
||||
|
||||
.option-button-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#venue-add-option,
|
||||
#venue-remove-option {
|
||||
margin: 10px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* ↑↑ Button ↑↑ */
|
||||
|
||||
/* Modal */
|
||||
.modal-submit-button {
|
||||
font-size: 14px;
|
||||
color: #293241;
|
||||
font-family: 'Lato', sans-serif;
|
||||
background-color: #f2d492;
|
||||
padding: 10px 20px 10px 20px;
|
||||
border-radius: 20px;
|
||||
margin: 18px;
|
||||
min-width: 110px;
|
||||
border: none;
|
||||
box-shadow: 0px 1px 12px #f2d492;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.modal-login {
|
||||
font-size: 14px;
|
||||
color: #293241;
|
||||
font-family: 'Lato', sans-serif;
|
||||
background-color: #f2d492;
|
||||
padding: 10px 20px 10px 20px;
|
||||
border-radius: 20px;
|
||||
margin: 18px;
|
||||
width: 110px;
|
||||
border: none;
|
||||
box-shadow: 0px 1px 12px #f2d492;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 25px;
|
||||
font-weight: bold;
|
||||
color: #293241;
|
||||
font-family: 'Lato', sans-serif;
|
||||
transform: translateX(10px);
|
||||
}
|
||||
|
||||
.form-label {
|
||||
color: #293241;
|
||||
font-family: 'Lato', sans-serif;
|
||||
}
|
||||
|
||||
.input-group-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
|
||||
.input-title,
|
||||
.reminder-text {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.reminder-text {
|
||||
color: grey;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
border-width: 2px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
#datetime-submit,
|
||||
#venue-submit,
|
||||
#venue-poll-submit {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.form-header {
|
||||
margin: 0 0 5px 0;
|
||||
}
|
||||
|
||||
.form,
|
||||
.input-panel {
|
||||
margin: 20px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.invite-button-container {
|
||||
position: absolute;
|
||||
bottom: -25px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 80%;
|
||||
height: 20%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#participants-list-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.participants-list {
|
||||
height: 35vh;
|
||||
padding: 10px;
|
||||
margin-top: 18px;
|
||||
border-radius: 10px;
|
||||
border: solid grey 2px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.participants-list-title {
|
||||
position: absolute;
|
||||
top: -3px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: white;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#current-participants-list .participants-list-title {
|
||||
color: #2fd0c1;
|
||||
}
|
||||
|
||||
#deleted-participants-list .participants-list-title {
|
||||
color: #d02f3e;
|
||||
}
|
||||
|
||||
.user-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#participants-modal .frame-content-container > div {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.datetime-buttons-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.date-time .poll-button {
|
||||
margin: 0 0 5px 0;
|
||||
}
|
||||
|
||||
/* From eventPageSchedule.css */
|
||||
|
||||
.item-list-box {
|
||||
min-height: 150px;
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
#item-form-text {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#item-form-header {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.item-list-box {
|
||||
border-radius: 10px;
|
||||
background-color: #e8e892;
|
||||
height: 100%;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#date-selector-container {
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
padding-bottom: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
#time-block-memo-container {
|
||||
position: relative;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
#close-memo {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
font-size: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
#time-block-page-container {
|
||||
max-height: 800px;
|
||||
height: 550px;
|
||||
padding-top: 0px;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
#event-time-container {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.event-schedule {
|
||||
background-color: #efefd0 !important;
|
||||
}
|
||||
|
||||
.event-schedule:hover {
|
||||
background-color: #e8e892 !important;
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
#line {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
@media (max-width: 1000px) {
|
||||
#line {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#memo {
|
||||
font-size: large;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#time-block-memo-container {
|
||||
max-height: 300px;
|
||||
height: 300px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#rundown-container {
|
||||
max-height: 300px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#memo {
|
||||
background-color: #efefd0;
|
||||
height: 90%;
|
||||
border-radius: 10px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#page {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
height: 90%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* #line {
|
||||
position: absolute;
|
||||
} */
|
||||
|
||||
#rundown {
|
||||
max-height: 80%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
#rundown-container {
|
||||
max-height: 100%;
|
||||
position: relative;
|
||||
background-color: white;
|
||||
padding-top: 30px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.time-stamp-container {
|
||||
background-color: none;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.individual-time-block {
|
||||
height: 100%;
|
||||
padding: 2px;
|
||||
max-width: 100%;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.time-block {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
background-color: rgba(181, 180, 180, 0.625);
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
padding: 1px;
|
||||
font-size: 1.5vw;
|
||||
text-align: center;
|
||||
transition: background-color 50ms ease-out 50ms;
|
||||
}
|
||||
|
||||
.save-time-block {
|
||||
height: 100%;
|
||||
color: white;
|
||||
opacity: 0.7;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
transition: background-color 50ms ease-out 50ms;
|
||||
}
|
||||
|
||||
.save-time-block:hover {
|
||||
opacity: 0.8;
|
||||
transform: scale(1.01);
|
||||
}
|
||||
|
||||
.time-stamp {
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
right: 10px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.last-time-stamp {
|
||||
position: absolute;
|
||||
bottom: -5px;
|
||||
right: 10px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.memo-item-container {
|
||||
position: relative;
|
||||
background-color: rgba(255, 255, 255, 0.522);
|
||||
border-radius: 10px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px;
|
||||
font-size: 15px;
|
||||
}
|
||||
#memo-item-cluster {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.memo-item-label {
|
||||
font-weight: 800;
|
||||
font-size: 15px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
/* Scroll bar */
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 15px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
box-shadow: inset 0 0 5px grey;
|
||||
border-radius: 5px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #efefd0;
|
||||
border-radius: 5px;
|
||||
min-height: 250px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: white;
|
||||
}
|
||||
|
||||
#memo,
|
||||
#memo-tag {
|
||||
animation-duration: 0.5s;
|
||||
animation-name: animate-fade;
|
||||
animation-delay: 0.1s;
|
||||
animation-fill-mode: backwards;
|
||||
}
|
||||
|
||||
@keyframes animate-fade {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
#edit-activities {
|
||||
border-radius: 100px;
|
||||
background-color: #f2965985;
|
||||
color: white;
|
||||
text-align: center;
|
||||
min-width: 22px !important;
|
||||
min-height: 22px !important;
|
||||
padding: 3px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
#edit-remarks {
|
||||
border-radius: 100px;
|
||||
background-color: #f2965985;
|
||||
color: white;
|
||||
text-align: center;
|
||||
min-width: 22px !important;
|
||||
min-height: 22px !important;
|
||||
padding: 3px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
#edit-show-item {
|
||||
border-radius: 100px;
|
||||
background-color: #f2965985;
|
||||
color: white;
|
||||
text-align: center;
|
||||
min-width: 22px !important;
|
||||
min-height: 22px !important;
|
||||
padding: 3px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.modal-dialog {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#event-name {
|
||||
font-size: 2vw;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.fa-trash {
|
||||
z-index: 1000;
|
||||
right: 20px;
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
.creator-function {
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
/* CSS */
|
||||
.button-53 {
|
||||
background-color: #f29659;
|
||||
border: 0 solid #e5e7eb;
|
||||
box-sizing: border-box;
|
||||
color: #000000;
|
||||
display: flex;
|
||||
font-family: ui-sans-serif, system-ui, -apple-system, system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
|
||||
'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
justify-content: center;
|
||||
line-height: 1.75rem;
|
||||
padding: 0.75rem 1.65rem;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
text-decoration: none #000000 solid;
|
||||
text-decoration-thickness: auto;
|
||||
width: 100%;
|
||||
max-width: 460px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
transform: rotate(-2deg);
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
.button-53:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.button-53:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border: 1px solid #000000;
|
||||
bottom: 4px;
|
||||
left: 4px;
|
||||
width: calc(100% - 1px);
|
||||
height: calc(100% - 1px);
|
||||
}
|
||||
|
||||
.button-53:hover:after {
|
||||
bottom: 2px;
|
||||
left: 2px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.button-53 {
|
||||
padding: 0.75rem 3rem;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* From itemSummary */
|
||||
.shopping-list {
|
||||
height: 90%;
|
||||
border-radius: 20px;
|
||||
margin: 10px 2px 5px 5px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.shopping-list .item-list {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.border {
|
||||
border: 10px solid #9bafd0;
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
max-height: 500px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.pending-item-header,
|
||||
.pending-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.bi-filter-circle {
|
||||
color: #495871;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.shorting-btn {
|
||||
border: none;
|
||||
border-radius: 20px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.check-btn {
|
||||
border: none;
|
||||
border-radius: 20px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -0,0 +1,579 @@
|
||||
<!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="./event.css" />
|
||||
<title>Event Summary</title>
|
||||
</head>
|
||||
|
||||
<body style="display: none">
|
||||
<div class="navbar-container container">
|
||||
<!-- NAVBAR: to be loaded with js -->
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="eventname frame line1">
|
||||
<div class="background-frame">
|
||||
<!-- Event Name: to be added by JS -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<div class="date-time frame line1">
|
||||
<div class="background-frame">
|
||||
<!-- Event Name: to be added by JS -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="participant-venue line2">
|
||||
<div class="participant frame">
|
||||
<div class="background-frame vertical-flex">
|
||||
<!-- Participants: to be added by JS -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="venue frame">
|
||||
<div class="background-frame vertical-flex">
|
||||
<!-- Venue: to be added by JS -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="schedule frame line2">
|
||||
<div class="background-frame vertical-flex">
|
||||
<!-- Schedule: to be added by JS -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="item frame line2">
|
||||
<div class="background-frame vertical-flex">
|
||||
<!-- Item: to be added by JS -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal Parts -->
|
||||
<!-- Date/Time Modal -->
|
||||
<div
|
||||
class="modal fade"
|
||||
id="datetime-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">Date & 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">
|
||||
<form>
|
||||
<div class="switch-buttons-container">
|
||||
<input
|
||||
type="radio"
|
||||
class="btn-check"
|
||||
name="options-outlined"
|
||||
id="edit-datetime-switch"
|
||||
autocomplete="off"
|
||||
checked
|
||||
/>
|
||||
<label class="btn btn-outline-success" for="edit-datetime-switch">Editing</label>
|
||||
<input
|
||||
type="radio"
|
||||
class="btn-check"
|
||||
name="options-outlined"
|
||||
id="poll-datetime-switch"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<label class="btn btn-outline-danger" for="poll-datetime-switch">Polling</label>
|
||||
</div>
|
||||
</form>
|
||||
<!-- Edit datetime part -->
|
||||
<div class="input-group edit-input">
|
||||
<div class="input-group-container">
|
||||
<div class="input-title">Please edit your date & time below.</div>
|
||||
<form id="datetime-form">
|
||||
<div class="datetime-start input-panel mb-3">
|
||||
<div class="form-label">Start date and time</div>
|
||||
<input
|
||||
class="clock"
|
||||
type="datetime-local"
|
||||
id="datetime-start"
|
||||
name="datetime_start"
|
||||
min="2021-06-07T00:00"
|
||||
max="2035-12-30T00:00"
|
||||
step="900"
|
||||
/>
|
||||
</div>
|
||||
<div class="datetime-end input-panel mb-3">
|
||||
<div class="form-label">End date and time</div>
|
||||
<input
|
||||
class="clock"
|
||||
type="datetime-local"
|
||||
id="datetime-end"
|
||||
name="datetime_end"
|
||||
min="2021-06-07T00:00"
|
||||
max="2035-12-30T00:00"
|
||||
step="900"
|
||||
/>
|
||||
</div>
|
||||
<div class="input-panel mb-3">
|
||||
<div class="reminder-text">
|
||||
Please fill in both start and end date/time. <br />
|
||||
Enter the time in 15 mins interval, e.g. 15:00 or 15:15 or 15:30 or 15:45.
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button id="datetime-submit" type="submit" class="modal-submit-button">
|
||||
Edit
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Poll Datetime Form -->
|
||||
<div class="input-group poll-input hide">
|
||||
<div class="input-group-container">
|
||||
<div class="input-title">Please enter your polling options below:</div>
|
||||
<form id="datetime-poll-form">
|
||||
<div class="datetime-poll-options-container input-panel mb-3">
|
||||
<div class="datetime_title">
|
||||
<div></div>
|
||||
<div>
|
||||
<div>Start</div>
|
||||
<div>End</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="datetime_poll_1">
|
||||
<label for="datetime_poll">Option 1: </label>
|
||||
<input
|
||||
class="clock"
|
||||
type="datetime-local"
|
||||
id="datetime_poll_start"
|
||||
name="datetime_poll_start"
|
||||
min="2021-06-07T00:00"
|
||||
max="2035-12-30T00:00"
|
||||
step="900"
|
||||
/>
|
||||
<input
|
||||
class="clock"
|
||||
type="datetime-local"
|
||||
id="datetime_poll_end"
|
||||
name="datetime_poll_end"
|
||||
min="2021-06-07T00:00"
|
||||
max="2035-12-30T00:00"
|
||||
step="900"
|
||||
/>
|
||||
</div>
|
||||
<div class="datetime_poll_2">
|
||||
<label for="datetime_poll">Option 2: </label>
|
||||
<input
|
||||
class="clock"
|
||||
type="datetime-local"
|
||||
id="datetime_poll_start"
|
||||
name="datetime_poll_start"
|
||||
min="2021-06-07T00:00"
|
||||
max="2035-12-30T00:00"
|
||||
step="900"
|
||||
/>
|
||||
<input
|
||||
class="clock"
|
||||
type="datetime-local"
|
||||
id="datetime_poll_end"
|
||||
name="datetime_poll_end"
|
||||
min="2021-06-07T00:00"
|
||||
max="2035-12-30T00:00"
|
||||
step="900"
|
||||
/>
|
||||
</div>
|
||||
<!-- More options added by JS -->
|
||||
</div>
|
||||
<div class="input-panel mb-3">
|
||||
<div class="reminder-text">
|
||||
Please fill in both start and end date/time. <br />
|
||||
Enter the time in 15 mins interval, e.g. 15:00 or 15:15 or 15:30 or 15:45.
|
||||
</div>
|
||||
</div>
|
||||
<div class="option-button-container">
|
||||
<button id="datetime-add-option" class="modal-submit-button">
|
||||
<i class="fa-solid fa-plus"></i>  Option
|
||||
</button>
|
||||
<button id="datetime-remove-option" class="modal-submit-button">
|
||||
<i class="fa-solid fa-minus"></i>  Option
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button id="datetime-poll-submit" type="submit" class="modal-submit-button">
|
||||
Start Polling
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Overwrite datetime Poll Confirmation Modal -->
|
||||
<div
|
||||
class="modal fade"
|
||||
id="overwrite-datetime-poll-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">Overwrite Poll</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="warning-sign">
|
||||
<i class="fa-solid fa-exclamation"></i>
|
||||
</div>
|
||||
<div class="warning">Are you sure?</div>
|
||||
<div class="reminder-text">Overwritten poll cannot be restored!</div>
|
||||
<div class="modal-footer">
|
||||
<button id="overwrite-datetime-poll-submit" type="submit" class="modal-submit-button">
|
||||
OVERWRITE
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Venue Modal -->
|
||||
<div
|
||||
class="modal fade"
|
||||
id="venue-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">Venue</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">
|
||||
<form>
|
||||
<div class="switch-buttons-container">
|
||||
<input
|
||||
type="radio"
|
||||
class="btn-check"
|
||||
name="options-outlined"
|
||||
id="edit-venue-switch"
|
||||
autocomplete="off"
|
||||
checked
|
||||
/>
|
||||
<label class="btn btn-outline-success" for="edit-venue-switch">Editing</label>
|
||||
<input
|
||||
type="radio"
|
||||
class="btn-check"
|
||||
name="options-outlined"
|
||||
id="poll-venue-switch"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<label class="btn btn-outline-danger" for="poll-venue-switch">Polling</label>
|
||||
</div>
|
||||
</form>
|
||||
<!-- Edit Venue Form -->
|
||||
<div class="input-group edit-input">
|
||||
<div class="input-group-container">
|
||||
<div class="input-title">Please enter your venue below:</div>
|
||||
<form id="venue-form">
|
||||
<div class="venue-start input-panel mb-3">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
name="venue"
|
||||
aria-label="venue"
|
||||
aria-describedby="basic-addon1"
|
||||
/>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button id="venue-submit" type="submit" class="modal-submit-button">
|
||||
Edit
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Poll Venue Form -->
|
||||
<div class="input-group poll-input hide">
|
||||
<div class="input-group-container">
|
||||
<div class="input-title">Please enter your polling options below:</div>
|
||||
<form id="venue-poll-form">
|
||||
<div class="venue-poll-options-container input-panel mb-3">
|
||||
<div class="venue_poll_1">
|
||||
<label for="venue_poll">Option 1: </label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
name="venue_poll"
|
||||
aria-label="venue_poll"
|
||||
aria-describedby="basic-addon1"
|
||||
/>
|
||||
</div>
|
||||
<div class="venue_poll_2">
|
||||
<label for="venue_poll">Option 2: </label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
name="venue_poll"
|
||||
aria-label="venue_poll"
|
||||
aria-describedby="basic-addon1"
|
||||
/>
|
||||
</div>
|
||||
<!-- More options added by JS -->
|
||||
</div>
|
||||
<div class="option-button-container">
|
||||
<button id="venue-add-option" class="modal-submit-button">
|
||||
<i class="fa-solid fa-plus"></i>  Option
|
||||
</button>
|
||||
<button id="venue-remove-option" class="modal-submit-button">
|
||||
<i class="fa-solid fa-minus"></i>  Option
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button id="venue-poll-submit" type="submit" class="modal-submit-button">
|
||||
Start Polling
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Overwrite Venue Poll Confirmation Modal -->
|
||||
<div
|
||||
class="modal fade"
|
||||
id="overwrite-venue-poll-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">Overwrite Poll</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="warning-sign">
|
||||
<i class="fa-solid fa-exclamation"></i>
|
||||
</div>
|
||||
<div class="warning">Are you sure?</div>
|
||||
<div class="reminder-text">Overwritten poll cannot be restored!</div>
|
||||
<div class="modal-footer">
|
||||
<button id="overwrite-venue-poll-submit" type="submit" class="modal-submit-button">
|
||||
OVERWRITE
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Delete Participants Modal -->
|
||||
<div
|
||||
class="modal fade"
|
||||
id="participants-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">Participants</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">
|
||||
<div class="input-group-container">
|
||||
<div class="input-title">Please edit your participants below:</div>
|
||||
<div id="participants-list-container">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-sm-6">
|
||||
<div class="participants-list" id="current-participants-list">
|
||||
<div class="participants-list-title">Current</div>
|
||||
<!-- Current Participants Here -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="participants-list" id="deleted-participants-list">
|
||||
<div class="participants-list-title">Deleted</div>
|
||||
<!-- Participants To Be Removed Here -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button id="participants-submit" type="submit" class="modal-submit-button">Submit</button>
|
||||
<button id="participants-reset" type="reset" class="modal-submit-button">Reset</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Invitation Link Modal -->
|
||||
<div
|
||||
class="modal fade"
|
||||
id="invitation-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">Invitation</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-title">Please send your friend the invitation link below:</div>
|
||||
<div class="input-group mb-3">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
aria-label="invitation"
|
||||
name="invitation"
|
||||
aria-describedby="invitation-link"
|
||||
readonly
|
||||
/>
|
||||
<a class="input-group-text" id="invitation-link">Copy Link</a>
|
||||
</div>
|
||||
<form id="invitation-form">
|
||||
<div class="modal-footer">
|
||||
<div class="reminder-text">
|
||||
Note: Previous link will be invalid <br />
|
||||
when new link is created.
|
||||
</div>
|
||||
<button id="invitation-submit" type="submit" class="modal-submit-button">
|
||||
Create New Link
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Delete Event Confirmation Modal -->
|
||||
<div
|
||||
class="modal fade"
|
||||
id="delete-event-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">Delete Event</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="warning-sign">
|
||||
<i class="fa-solid fa-exclamation"></i>
|
||||
</div>
|
||||
<div class="warning">Are you sure?</div>
|
||||
<div class="reminder-text">You will not be able to revert this action!</div>
|
||||
<div class="modal-footer">
|
||||
<button id="delete-event-submit" type="submit" class="modal-submit-button">
|
||||
DELETE EVENT
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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="./event.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,477 @@
|
||||
import { addNavbar } from '/functions/addNavbar.js';
|
||||
import { loadName } from '/functions/loadName.js';
|
||||
import { loadEventDetails, pasteInvitationLink } from '../loadEvent.js';
|
||||
import { deletedParticipantsList } from '../listenButtons.js';
|
||||
import { getEventSchedule } from './eventPageSchedule/eventPageSchedule.js';
|
||||
import { fetchPendingItems } from './itemSummary.js';
|
||||
|
||||
window.addEventListener('load', async () => {
|
||||
addNavbar();
|
||||
await loadName();
|
||||
await loadEventDetails();
|
||||
getEventSchedule();
|
||||
await fetchPendingItems('food');
|
||||
document.body.style.display = 'block';
|
||||
});
|
||||
|
||||
// Submit datetime form
|
||||
document.querySelector('#datetime-form').addEventListener('submit', async function (e) {
|
||||
e.preventDefault();
|
||||
const form = e.target;
|
||||
const startTime = form.datetime_start.value ? new Date(form.datetime_start.value).toISOString() : null;
|
||||
const endTime = form.datetime_end.value ? new Date(form.datetime_end.value).toISOString() : null;
|
||||
const nowTimeValue = new Date().getTime();
|
||||
const startTimeValue = new Date(startTime).getTime();
|
||||
const endTimeValue = new Date(endTime).getTime();
|
||||
|
||||
let dataPass = true;
|
||||
|
||||
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) {
|
||||
const formObj = {
|
||||
startTime,
|
||||
endTime
|
||||
};
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const eventId = params.get('event-id');
|
||||
const res = await fetch(`/events/detail/datetime/${eventId}`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(formObj)
|
||||
});
|
||||
|
||||
const eventsResult = await res.json();
|
||||
if (eventsResult.status) {
|
||||
alert('Date & Time successfully updated!');
|
||||
const myModal = bootstrap.Modal.getInstance(document.getElementById('datetime-modal'));
|
||||
myModal.hide();
|
||||
loadEventDetails();
|
||||
} else {
|
||||
alert('Unable to update.');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Datetime edit-poll toggle
|
||||
document.querySelector('#edit-datetime-switch').addEventListener('change', () => {
|
||||
document.querySelector('#datetime-modal .edit-input').classList.toggle('hide');
|
||||
document.querySelector('#datetime-modal .poll-input').classList.toggle('hide');
|
||||
});
|
||||
document.querySelector('#poll-datetime-switch').addEventListener('change', () => {
|
||||
document.querySelector('#datetime-modal .edit-input').classList.toggle('hide');
|
||||
document.querySelector('#datetime-modal .poll-input').classList.toggle('hide');
|
||||
});
|
||||
|
||||
// Datetime polling add option button
|
||||
document.querySelector('#datetime-add-option').addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
const numberOfOptions = document.querySelectorAll('div[class^="datetime_poll_"]').length;
|
||||
let newDiv = document.createElement('div');
|
||||
newDiv.classList = `datetime_poll_${numberOfOptions + 1}`;
|
||||
newDiv.innerHTML = `
|
||||
<label for="datetime_poll">Option ${numberOfOptions + 1}: </label>
|
||||
<input class="clock" type="datetime-local" id="datetime_poll_start" name="datetime_poll_start"
|
||||
min="2021-06-07T00:00" max="2035-12-30T00:00" step="900">
|
||||
<input class="clock" type="datetime-local" id="datetime_poll_end" name="datetime_poll_end"
|
||||
min="2021-06-07T00:00" max="2035-12-30T00:00" step="900">
|
||||
`;
|
||||
document.querySelector('.datetime-poll-options-container').appendChild(newDiv);
|
||||
});
|
||||
|
||||
// Datetime polling remove option button
|
||||
document.querySelector('#datetime-remove-option').addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
const venuePollOptionsDivList = document.querySelectorAll('div[class^="datetime_poll_"]');
|
||||
const numberOfOptions = venuePollOptionsDivList.length;
|
||||
if (numberOfOptions > 2) {
|
||||
venuePollOptionsDivList[numberOfOptions - 1].remove();
|
||||
}
|
||||
});
|
||||
|
||||
// Submit datetime polling
|
||||
document.querySelector('#datetime-poll-form').addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const eventId = params.get('event-id');
|
||||
let dataPass = true;
|
||||
let formList = [];
|
||||
const form = e.target;
|
||||
const startList = form.datetime_poll_start;
|
||||
const endList = form.datetime_poll_end;
|
||||
|
||||
for (let i = 0; i < startList.length; i++) {
|
||||
if (!startList[i].value || !endList[i].value) {
|
||||
dataPass = false;
|
||||
alert('Please fill in all options!');
|
||||
break;
|
||||
} else if (new Date(startList[i].value).getTime() <= new Date().getTime()) {
|
||||
dataPass = false;
|
||||
alert('Start time must be later than today!');
|
||||
break;
|
||||
} else if (new Date(startList[i].value).getTime() >= new Date(endList[i].value).getTime()) {
|
||||
dataPass = false;
|
||||
alert('Start time must be before end time!');
|
||||
break;
|
||||
} else {
|
||||
formList.push({
|
||||
start: new Date(startList[i].value),
|
||||
end: new Date(endList[i].value)
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (dataPass) {
|
||||
const res = await fetch(`/events/poll/datetime/${eventId}`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(formList)
|
||||
});
|
||||
const result = await res.json();
|
||||
if (result.status) {
|
||||
alert('Successfully created a datetime poll!');
|
||||
window.location.href = `/poll/datetimePoll.html?${params}&is-creator=1`;
|
||||
} else {
|
||||
if (result.created) {
|
||||
// Modal not yet added
|
||||
alert('Poll has been created before!');
|
||||
const datetimePollModal = bootstrap.Modal.getInstance(document.getElementById('datetime-modal'));
|
||||
datetimePollModal.hide();
|
||||
const datetimePollOverwriteModal = new bootstrap.Modal(
|
||||
document.getElementById('overwrite-datetime-poll-modal')
|
||||
);
|
||||
datetimePollOverwriteModal.show();
|
||||
} else {
|
||||
alert('Unable to create poll.');
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Overwrite datetime poll confirmed
|
||||
document.querySelector('#overwrite-datetime-poll-submit').addEventListener('click', async (e) => {
|
||||
e.preventDefault();
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const eventId = params.get('event-id');
|
||||
let dataPass = true;
|
||||
let formList = [];
|
||||
const form = document.querySelector('#datetime-poll-form');
|
||||
const startList = form.datetime_poll_start;
|
||||
const endList = form.datetime_poll_end;
|
||||
|
||||
for (let i = 0; i < startList.length; i++) {
|
||||
if (!startList[i].value || !endList[i].value) {
|
||||
dataPass = false;
|
||||
alert('Please fill in all options!');
|
||||
break;
|
||||
} else if (new Date(startList[i].value).getTime() <= new Date().getTime()) {
|
||||
dataPass = false;
|
||||
alert('Start time must be later than today!');
|
||||
break;
|
||||
} else if (new Date(startList[i].value).getTime() >= new Date(endList[i].value).getTime()) {
|
||||
dataPass = false;
|
||||
alert('Start time must be before end time!');
|
||||
break;
|
||||
} else {
|
||||
formList.push({
|
||||
start: new Date(startList[i].value),
|
||||
end: new Date(endList[i].value)
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (dataPass) {
|
||||
const res = await fetch(`/events/poll/datetime/replacement/${eventId}`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(formList)
|
||||
});
|
||||
const result = await res.json();
|
||||
if (result.status) {
|
||||
alert('Successfully created a datetime poll!');
|
||||
window.location.href = `/poll/datetimePoll.html?${params}&is-creator=1`;
|
||||
} else {
|
||||
alert('Unable to create poll.');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Submit venue form
|
||||
document.querySelector('#venue-form').addEventListener('submit', async function (e) {
|
||||
e.preventDefault();
|
||||
const form = e.target;
|
||||
const venue = form.venue.value;
|
||||
|
||||
let dataPass = true;
|
||||
|
||||
if (!venue) {
|
||||
dataPass = false;
|
||||
alert('Please enter new venue to update!');
|
||||
}
|
||||
|
||||
if (dataPass) {
|
||||
const formObj = {
|
||||
venue
|
||||
};
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const eventId = params.get('event-id');
|
||||
const res = await fetch(`/events/detail/venue/${eventId}`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(formObj)
|
||||
});
|
||||
|
||||
const eventsResult = await res.json();
|
||||
if (eventsResult.status) {
|
||||
alert('Venue successfully updated!');
|
||||
const myModal = bootstrap.Modal.getInstance(document.getElementById('venue-modal'));
|
||||
myModal.hide();
|
||||
loadEventDetails();
|
||||
} else {
|
||||
alert('Unable to update.');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Venue edit-poll toggle
|
||||
document.querySelector('#edit-venue-switch').addEventListener('change', () => {
|
||||
document.querySelector('#venue-modal .edit-input').classList.toggle('hide');
|
||||
document.querySelector('#venue-modal .poll-input').classList.toggle('hide');
|
||||
});
|
||||
document.querySelector('#poll-venue-switch').addEventListener('change', () => {
|
||||
document.querySelector('#venue-modal .edit-input').classList.toggle('hide');
|
||||
document.querySelector('#venue-modal .poll-input').classList.toggle('hide');
|
||||
});
|
||||
|
||||
// Venue polling add option button
|
||||
document.querySelector('#venue-add-option').addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
const numberOfOptions = document.querySelectorAll('div[class^="venue_poll_"]').length;
|
||||
let newDiv = document.createElement('div');
|
||||
newDiv.classList = `venue_poll_${numberOfOptions + 1}`;
|
||||
newDiv.innerHTML = `
|
||||
<label for="venue_poll">Option ${numberOfOptions + 1}: </label>
|
||||
<input type="text" class="form-control" name="venue_poll" aria-label="venue_poll"
|
||||
aria-describedby="basic-addon1" />
|
||||
`;
|
||||
document.querySelector('.venue-poll-options-container').appendChild(newDiv);
|
||||
});
|
||||
|
||||
// Venue polling remove option button
|
||||
document.querySelector('#venue-remove-option').addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
const venuePollOptionsDivList = document.querySelectorAll('div[class^="venue_poll_"]');
|
||||
const numberOfOptions = venuePollOptionsDivList.length;
|
||||
if (numberOfOptions > 2) {
|
||||
venuePollOptionsDivList[numberOfOptions - 1].remove();
|
||||
}
|
||||
});
|
||||
|
||||
// Submit venue polling
|
||||
document.querySelector('#venue-poll-form').addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const eventId = params.get('event-id');
|
||||
let dataPass = true;
|
||||
let formList = [];
|
||||
const form = e.target;
|
||||
const formInputNodeList = form.venue_poll;
|
||||
formInputNodeList.forEach((each) => {
|
||||
if (!!each.value) {
|
||||
formList.push(each.value);
|
||||
}
|
||||
});
|
||||
if (formList.length < 2) {
|
||||
dataPass = false;
|
||||
alert('Please enter at least 2 options!');
|
||||
}
|
||||
if (dataPass) {
|
||||
const res = await fetch(`/events/poll/venue/${eventId}`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(formList)
|
||||
});
|
||||
const result = await res.json();
|
||||
if (result.status) {
|
||||
alert('Successfully created a venue poll!');
|
||||
window.location.href = `/poll/venuePoll.html?event-id=${eventId}&is-creator=1`;
|
||||
} else {
|
||||
if (result.created) {
|
||||
alert('Poll has been created before!');
|
||||
const venuePollModal = bootstrap.Modal.getInstance(document.getElementById('venue-modal'));
|
||||
venuePollModal.hide();
|
||||
const venuePollOverwriteModal = new bootstrap.Modal(
|
||||
document.getElementById('overwrite-venue-poll-modal')
|
||||
);
|
||||
venuePollOverwriteModal.show();
|
||||
} else {
|
||||
alert('Unable to create poll.');
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Overwrite venue poll confirmed
|
||||
document.querySelector('#overwrite-venue-poll-submit').addEventListener('click', async (e) => {
|
||||
e.preventDefault();
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const eventId = params.get('event-id');
|
||||
let dataPass = true;
|
||||
let formList = [];
|
||||
const form = document.querySelector('#venue-poll-form');
|
||||
const formInputNodeList = form.venue_poll;
|
||||
formInputNodeList.forEach((each) => {
|
||||
if (!!each.value) {
|
||||
formList.push(each.value);
|
||||
}
|
||||
});
|
||||
if (formList.length < 2) {
|
||||
formList = false;
|
||||
alert('Please enter at least 2 options!');
|
||||
}
|
||||
if (dataPass) {
|
||||
const res = await fetch(`/events/poll/venue/replacement/${eventId}`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(formList)
|
||||
});
|
||||
const result = await res.json();
|
||||
if (result.status) {
|
||||
alert('Successfully created a venue poll!');
|
||||
window.location.href = `/poll/venuePoll.html?event-id=${eventId}&is-creator=1`;
|
||||
} else {
|
||||
alert('Unable to create poll.');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Submit participants form
|
||||
document.querySelector('#participants-submit').addEventListener('click', async () => {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const eventId = parseInt(params.get('event-id'));
|
||||
const res = await fetch(`/events/participants/${eventId}`, {
|
||||
method: 'DELETE',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(deletedParticipantsList)
|
||||
});
|
||||
if (res.status !== 200) {
|
||||
const data = await res.json();
|
||||
alert(data.msg);
|
||||
return;
|
||||
}
|
||||
const result = await res.json();
|
||||
if (result.status) {
|
||||
if (result.notDeletable.length) {
|
||||
let warnText = 'Unable to remove following participant(s):';
|
||||
for (let each of result.notDeletable) {
|
||||
warnText += `
|
||||
# ${each.deletedParticipant.id} ${each.deletedParticipant.first_name} ${each.deletedParticipant.last_name}
|
||||
Unsettled Item(s):`;
|
||||
for (let i = 0; i < each.itemInCharge.length; i++) {
|
||||
warnText += `
|
||||
[${each.itemInCharge[i].type_name}] ${each.itemInCharge[i].name}`;
|
||||
}
|
||||
warnText += `
|
||||
|
||||
`;
|
||||
}
|
||||
alert(warnText);
|
||||
deletedParticipantsList.splice(0, deletedParticipantsList.length);
|
||||
loadEventDetails();
|
||||
//Warn
|
||||
} else {
|
||||
deletedParticipantsList.splice(0, deletedParticipantsList.length);
|
||||
loadEventDetails();
|
||||
alert('Successfully deleted all selected participants!');
|
||||
}
|
||||
} else {
|
||||
alert('Unable to delete selected participants!');
|
||||
}
|
||||
});
|
||||
|
||||
// Reset participants form
|
||||
document.querySelector('#participants-reset').addEventListener('click', async () => {
|
||||
deletedParticipantsList.splice(0, deletedParticipantsList.length);
|
||||
loadEventDetails();
|
||||
});
|
||||
|
||||
// Submit Invitation Copy Link Button
|
||||
document.querySelector('#invitation-form').addEventListener('submit', async function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const eventId = params.get('event-id');
|
||||
const res = await fetch(`/events/detail/invitation/${eventId}`);
|
||||
|
||||
const invitationResult = await res.json();
|
||||
if (invitationResult.status) {
|
||||
pasteInvitationLink(eventId, invitationResult.invitation_token);
|
||||
alert('Link renewed!');
|
||||
} else {
|
||||
alert('Unable to create link.');
|
||||
}
|
||||
});
|
||||
|
||||
// Copy Invitation Link Button
|
||||
document.querySelector('#invitation-link').addEventListener('click', (e) => {
|
||||
const linkTextDiv = document.querySelector('#invitation-modal .form-control');
|
||||
// Select the text field
|
||||
linkTextDiv.select();
|
||||
linkTextDiv.setSelectionRange(0, 99999); // For mobile devices
|
||||
|
||||
// Copy the text inside the text field
|
||||
navigator.clipboard.writeText(linkTextDiv.value);
|
||||
|
||||
// Change button to copied
|
||||
e.target.classList.add('copied');
|
||||
const currentWidth = e.target.offsetWidth;
|
||||
e.target.style.width = `${currentWidth}px`;
|
||||
e.target.innerHTML = 'Copied!';
|
||||
|
||||
// Change back the button to normal
|
||||
setTimeout(() => {
|
||||
e.target.classList.remove('copied');
|
||||
e.target.innerHTML = 'Copy Link';
|
||||
}, 5000);
|
||||
});
|
||||
|
||||
// Delete Event Button
|
||||
document.querySelector('#delete-event-submit').addEventListener('click', async () => {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const eventId = params.get('event-id');
|
||||
const res = await fetch(`/events/${eventId}`, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
const result = await res.json();
|
||||
if (result.status) {
|
||||
alert('Event deleted!');
|
||||
window.location.href = '/index.html';
|
||||
} else {
|
||||
alert('Unable to delete event!');
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,307 @@
|
||||
export async function getEventSchedule() {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const eventId = params.get('event-id');
|
||||
const isCreator = params.get('is-creator');
|
||||
|
||||
const res = await fetch(`/events/?event-id=${eventId}&is-creator=${isCreator}`);
|
||||
|
||||
if (res.status !== 200) {
|
||||
const data = await res.json();
|
||||
alert(data.msg);
|
||||
return;
|
||||
}
|
||||
|
||||
const result = await res.json();
|
||||
|
||||
if (result.status) {
|
||||
const option = {
|
||||
hour12: false,
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: '2-digit'
|
||||
};
|
||||
|
||||
const startDateTime = new Date(result.detail.start_datetime)
|
||||
.toLocaleString('en-US', option)
|
||||
.replace(', ', ' ')
|
||||
.slice(0, -3);
|
||||
const endDateTime = new Date(result.detail.end_datetime)
|
||||
.toLocaleString('en-US', option)
|
||||
.replace(', ', ' ')
|
||||
.slice(0, -3);
|
||||
const activitiesArr = result.activities;
|
||||
const startTime = startDateTime.slice(-5);
|
||||
const endTime = endDateTime.slice(-5);
|
||||
const startDate = startDateTime.slice(0, 10);
|
||||
const endDate = endDateTime.slice(0, 10);
|
||||
const startYear = startDateTime.slice(6, 10);
|
||||
const endYear = endDateTime.slice(6, 10);
|
||||
const startMonth = startDateTime.slice(0, 2);
|
||||
const endMonth = endDateTime.slice(0, 2);
|
||||
const startDay = startDateTime.slice(3, 5);
|
||||
const endDay = endDateTime.slice(3, 5);
|
||||
|
||||
const date = `${startYear}${startMonth}${startDay}`;
|
||||
|
||||
let startTimeInMin = toMin(startTime);
|
||||
let endTimeInMin = toMin(endTime);
|
||||
|
||||
const dayDifference = (new Date(endDate).getTime() - new Date(startDate).getTime()) / 1000 / 60 / 60 / 24;
|
||||
|
||||
if (
|
||||
dayDifference > 0 &&
|
||||
date !== `${startYear}${startMonth}${startDay}` &&
|
||||
date !== `${endYear}${endMonth}${endDay}`
|
||||
) {
|
||||
startTimeInMin = 0;
|
||||
endTimeInMin = 1440;
|
||||
}
|
||||
|
||||
if (dayDifference > 0 && date === `${startYear}${startMonth}${startDay}`) {
|
||||
endTimeInMin = 1440;
|
||||
}
|
||||
|
||||
if (dayDifference > 0 && date === `${endYear}${endMonth}${endDay}`) {
|
||||
startTimeInMin = 0;
|
||||
}
|
||||
|
||||
await getPresetTimeBlock(startTimeInMin);
|
||||
await getSavedTimeBlocks(activitiesArr);
|
||||
await correctDiv(startTimeInMin, endTimeInMin);
|
||||
setGlobalHeight(2);
|
||||
}
|
||||
}
|
||||
|
||||
async function getPresetTimeBlock(startTime) {
|
||||
let rundown = document.querySelector('#rundown');
|
||||
|
||||
//generate time block for 24 hours
|
||||
for (let i = 0; i < 96; i++) {
|
||||
let start = i * 15;
|
||||
let end = (i + 1) * 15;
|
||||
const timeString = minToTimeString(start);
|
||||
const height = end - start;
|
||||
rundown.innerHTML += `
|
||||
<div id="time-block-container-${start}" start="${start}" end="${end}" class="individual-time-block row">
|
||||
<span id="time-stamp-box" class="time-stamp-container col-sm-2">
|
||||
<div id="stamp-${start}" class="time-stamp">${timeString}</div>
|
||||
</span>
|
||||
<span id="time-block-${start}" start="${start}" end="${end}" class="time-block col-sm-10"></span>
|
||||
</div>
|
||||
`;
|
||||
document.querySelector(`#time-block-${start}`).style.height = `${height}px`;
|
||||
}
|
||||
|
||||
//set scroll bar top
|
||||
document.querySelector(`#time-block-${startTime}`).innerHTML = 'Event Start Time';
|
||||
const scrollBarDiv = document.querySelector('#rundown-container');
|
||||
scrollBarDiv.scrollTop = document.querySelector(`#time-block-${startTime}`).offsetTop;
|
||||
}
|
||||
|
||||
async function getSavedTimeBlocks(activitiesArr) {
|
||||
activitiesArr.forEach(async (activity) => {
|
||||
const start = activity.start_time;
|
||||
const title = activity.title;
|
||||
const startTimeInMin = toMin(activity.start_time);
|
||||
const endTimeInMin = toMin(activity.end_time);
|
||||
const divHeight = endTimeInMin - startTimeInMin;
|
||||
const id = activity.id;
|
||||
const presetColor = '#f29659';
|
||||
let color = activity.color;
|
||||
|
||||
if (activity.color === null || undefined) {
|
||||
color = presetColor;
|
||||
}
|
||||
|
||||
document.querySelector(`#time-block-container-${startTimeInMin}`).innerHTML = `
|
||||
<span id="time-stamp-box" class="time-stamp-container col-2">
|
||||
<div id="stamp-${startTimeInMin}" class="time-stamp">${start}</div>
|
||||
</span>
|
||||
<span value="${id}" type="button" id="time-block-${startTimeInMin}" start="${startTimeInMin}" end="${endTimeInMin}" class="time-block save-time-block col-10">
|
||||
</span>
|
||||
|
||||
`;
|
||||
document.querySelector(`#time-block-${startTimeInMin}`).innerHTML = title;
|
||||
document.querySelector(`#time-block-${startTimeInMin}`).style.height = `${divHeight}px`;
|
||||
document.querySelector(`#time-block-${startTimeInMin}`).style.backgroundColor = `${color}`;
|
||||
});
|
||||
}
|
||||
|
||||
async function fixDivHeight(x) {
|
||||
if (x > 0) {
|
||||
const divCluster = document.querySelectorAll('.time-block');
|
||||
divCluster.forEach((div) => {
|
||||
let nextDiv;
|
||||
if (div.parentElement.nextElementSibling?.childNodes) {
|
||||
nextDiv = div.parentElement.nextElementSibling.childNodes[3];
|
||||
}
|
||||
const height = parseInt(div.getAttribute('end')) - parseInt(div.getAttribute('start'));
|
||||
if (!!div.parentElement.nextElementSibling?.childNodes) {
|
||||
if (nextDiv) {
|
||||
if (div.classList === nextDiv.classList && !div.classList.contains('save-time-block')) {
|
||||
div.style.height = newHeight;
|
||||
const newHeight = parseInt(nextDiv.getAttribute('end')) - parseInt(div.getAttribute('start'));
|
||||
div.setAttribute(`start`, `${nextDiv.getAttribute('end')}`);
|
||||
nextDiv.parentElement.innerHTML = '';
|
||||
} else if (height > 60 && !div.classList.contains('save-time-block')) {
|
||||
div.style.height = '60px';
|
||||
const redundantHeight = height - 60;
|
||||
nextDiv.setAttribute(`start`, `${parseInt(nextDiv.getAttribute('start')) + redundantHeight}`);
|
||||
} else {
|
||||
div.style.height = `${height}px`;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
fixDivHeight(x - 1);
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
function toMin(timeInput) {
|
||||
const hourInMin = parseInt(timeInput.slice(0, 2)) * 60;
|
||||
const min = parseInt(timeInput.slice(3, 5));
|
||||
return hourInMin + min;
|
||||
}
|
||||
|
||||
async function setGlobalHeight(input) {
|
||||
const allBlocks = document.querySelectorAll('.time-block');
|
||||
allBlocks.forEach((block) => {
|
||||
const originalHeight = parseInt(block.style.height.slice(0, -2));
|
||||
block.style.height = `${originalHeight * input}px`;
|
||||
});
|
||||
}
|
||||
|
||||
async function fixTimeStamp() {
|
||||
const timeStampDiv = document.querySelectorAll('.time-stamp');
|
||||
timeStampDiv.forEach((stamp) => {
|
||||
let nextTimeBlock;
|
||||
let placeholder = stamp.parentElement.nextElementSibling;
|
||||
|
||||
while (placeholder) {
|
||||
if (placeholder.classList.contains('time-block')) {
|
||||
nextTimeBlock = placeholder;
|
||||
break;
|
||||
}
|
||||
placeholder = placeholder.nextElementSibling;
|
||||
}
|
||||
const time = minToTimeString(parseInt(nextTimeBlock.getAttribute('start')));
|
||||
stamp.innerHTML = time;
|
||||
});
|
||||
}
|
||||
|
||||
async function deleteRedundantDiv(x) {
|
||||
const divCluster = document.querySelectorAll(`.time-block`);
|
||||
if (x > 0) {
|
||||
for (let i = 0; i < divCluster.length; i++) {
|
||||
if (!!divCluster[i + 1]) {
|
||||
const endTime = parseInt(divCluster[i].getAttribute('end'));
|
||||
const nextStartTime = parseInt(divCluster[i + 1].getAttribute('start'));
|
||||
if (endTime > nextStartTime) {
|
||||
divCluster[i + 1].parentElement.remove();
|
||||
} else if (endTime < nextStartTime) {
|
||||
divCluster[i + 1].setAttribute(`start`, `${endTime}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
deleteRedundantDiv(x - 1);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
async function correctDiv(eventStartTimeInMin, eventEndTimeInMin) {
|
||||
const divCluster = document.querySelectorAll(`.time-block`);
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const isCreator = params.get('is-creator');
|
||||
|
||||
for (let i = 0; i < divCluster.length; i++) {
|
||||
const startTime = parseInt(divCluster[i].getAttribute('start'));
|
||||
const endTime = parseInt(divCluster[i].getAttribute('end'));
|
||||
const height = endTime - startTime;
|
||||
const timeString = minToTimeString(startTime);
|
||||
|
||||
if (!!divCluster[i + 1]) {
|
||||
divCluster[i].style.height = `${height}px`;
|
||||
const nextStartTime = parseInt(divCluster[i + 1].getAttribute('start'));
|
||||
const nextEndTime = parseInt(divCluster[i + 1].getAttribute('end'));
|
||||
const newDivHeight = nextStartTime - endTime;
|
||||
const nextStartTimeFormat = minToTimeString(nextStartTime);
|
||||
|
||||
if (endTime < nextStartTime && startTime >= eventStartTimeInMin && startTime < eventEndTimeInMin) {
|
||||
divCluster[i].parentNode.insertAdjacentHTML(
|
||||
'afterend',
|
||||
`
|
||||
<div id="time-block-container-${endTime}" class="individual-time-block row">
|
||||
<span id="time-stamp-box" class="time-stamp-container col-2">
|
||||
<div id="stamp-${endTime}" class="time-stamp">${nextStartTimeFormat}</div>
|
||||
</span>
|
||||
<span type="button" id="time-block-${endTime}" start="${endTime}" end="${nextStartTime}" class="time-block event-schedule col-10" data-bs-toggle="modal" data-bs-target="#create-time-block-modal"></span>
|
||||
</div>
|
||||
`
|
||||
);
|
||||
document.querySelector(`#time-block-${endTime}`).style.height = `${newDivHeight}px`;
|
||||
} else if (endTime < nextStartTime) {
|
||||
divCluster[i].parentNode.insertAdjacentHTML(
|
||||
'afterend',
|
||||
`
|
||||
<div id="time-block-container-${endTime}" class="individual-time-block row">
|
||||
<span id="time-stamp-box" class="time-stamp-container col-2">
|
||||
<div id="stamp-${endTime}" class="time-stamp">${nextStartTimeFormat}</div>
|
||||
</span>
|
||||
<span id="time-block-${endTime}" start="${endTime}" end="${nextStartTime}" class="time-block col-10"></span>
|
||||
</div>
|
||||
`
|
||||
);
|
||||
document.querySelector(`#time-block-${endTime}`).style.height = `${newDivHeight}px`;
|
||||
}
|
||||
|
||||
document.querySelector(`#stamp-${startTime}`).innerHTML = timeString;
|
||||
divCluster[i].style.height = `${height}`;
|
||||
}
|
||||
|
||||
if (
|
||||
startTime >= eventStartTimeInMin &&
|
||||
startTime < eventEndTimeInMin &&
|
||||
!divCluster[i].classList.contains('save-time-block')
|
||||
) {
|
||||
divCluster[i].classList.add('event-schedule');
|
||||
if (isCreator === '1') {
|
||||
divCluster[i].setAttribute(`data-bs-target`, `#create-time-block-modal`);
|
||||
divCluster[i].setAttribute(`type`, 'button');
|
||||
divCluster[i].setAttribute(`data-bs-toggle`, `modal`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
deleteRedundantDiv(100);
|
||||
fixTimeStamp();
|
||||
fixDivHeight(10);
|
||||
}
|
||||
|
||||
function minToTimeString(timeInMin) {
|
||||
if (timeInMin < 10) {
|
||||
return `00:0${timeInMin}`;
|
||||
} else if (timeInMin < 60) {
|
||||
return `00:${timeInMin}`;
|
||||
} else if (Math.floor(timeInMin / 60) < 10 && timeInMin % 60 < 10) {
|
||||
const hour = Math.floor(timeInMin / 60);
|
||||
const min = timeInMin % 60;
|
||||
return `0${hour}:0${min}`;
|
||||
} else if (Math.floor(timeInMin / 60) >= 10 && timeInMin % 60 < 10) {
|
||||
const hour = Math.floor(timeInMin / 60);
|
||||
const min = timeInMin % 60;
|
||||
return `${hour}:0${min}`;
|
||||
} else if (Math.floor(timeInMin / 60) >= 10 && timeInMin % 60 >= 10) {
|
||||
const hour = Math.floor(timeInMin / 60);
|
||||
const min = timeInMin % 60;
|
||||
return `${hour}:${min}`;
|
||||
} else if (Math.floor(timeInMin / 60) < 10 && timeInMin % 60 >= 10) {
|
||||
const hour = Math.floor(timeInMin / 60);
|
||||
const min = timeInMin % 60;
|
||||
return `0${hour}:${min}`;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,410 @@
|
||||
body {
|
||||
position: relative;
|
||||
margin-left: 2px;
|
||||
margin-right: 20px;
|
||||
font-family: 'Kalam';
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.input-panel {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.item-list-box {
|
||||
min-height: 150px;
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
#item-form-text {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#item-form-header {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.item-list-box {
|
||||
border-radius: 10px;
|
||||
background-color: #e8e892;
|
||||
height: 100%;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
align-items: center;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
#date-selector-container {
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
padding-bottom: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
border-radius: 5px;
|
||||
background: none;
|
||||
border-color: #3f3f3f;
|
||||
max-height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
header {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#time-block-memo-container {
|
||||
position: relative;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
#close-memo {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
font-size: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
#time-block-page-container {
|
||||
max-height: 800px;
|
||||
height: 550px;
|
||||
padding-top: 0px;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
#event-time-container {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.event-schedule {
|
||||
background-color: #efefd0 !important;
|
||||
}
|
||||
|
||||
.event-schedule:hover {
|
||||
background-color: #e8e892 !important;
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
#line {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
@media (max-width: 1000px) {
|
||||
#line {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#memo {
|
||||
font-size: large;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#time-block-memo-container {
|
||||
max-height: 300px;
|
||||
height: 300px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#rundown-container {
|
||||
max-height: 300px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#memo {
|
||||
background-color: #efefd0;
|
||||
height: 90%;
|
||||
border-radius: 10px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#page {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
height: 90%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* #line {
|
||||
position: absolute;
|
||||
} */
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.create-button {
|
||||
position: fixed;
|
||||
left: 30px;
|
||||
bottom: 30px;
|
||||
}
|
||||
|
||||
#rundown {
|
||||
max-height: 80%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
#rundown-container {
|
||||
max-height: 100%;
|
||||
position: relative;
|
||||
background-color: white;
|
||||
padding-top: 30px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.time-stamp-container {
|
||||
background-color: none;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.individual-time-block {
|
||||
height: 100%;
|
||||
padding: 2px;
|
||||
max-width: 100%;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.time-block {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
background-color: rgba(181, 180, 180, 0.625);
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
padding: 1px;
|
||||
font-size: 1.5vw;
|
||||
text-align: center;
|
||||
transition: background-color 50ms ease-out 50ms;
|
||||
}
|
||||
|
||||
.save-time-block {
|
||||
height: 100%;
|
||||
color: white;
|
||||
opacity: 0.7;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
transition: background-color 50ms ease-out 50ms;
|
||||
}
|
||||
|
||||
.save-time-block:hover {
|
||||
opacity: 0.8;
|
||||
transform: scale(1.01);
|
||||
}
|
||||
|
||||
.time-stamp {
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
right: 10px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.last-time-stamp {
|
||||
position: absolute;
|
||||
bottom: -5px;
|
||||
right: 10px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.memo-item-container {
|
||||
position: relative;
|
||||
background-color: rgba(255, 255, 255, 0.522);
|
||||
border-radius: 10px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px;
|
||||
font-size: 15px;
|
||||
}
|
||||
#memo-item-cluster {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.memo-item-label {
|
||||
font-weight: 800;
|
||||
font-size: 15px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
/* Scroll bar */
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 15px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
box-shadow: inset 0 0 5px grey;
|
||||
border-radius: 5px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #efefd0;
|
||||
border-radius: 5px;
|
||||
min-height: 250px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: white;
|
||||
}
|
||||
|
||||
#memo,
|
||||
#memo-tag {
|
||||
animation-duration: 0.5s;
|
||||
animation-name: animate-fade;
|
||||
animation-delay: 0.1s;
|
||||
animation-fill-mode: backwards;
|
||||
}
|
||||
|
||||
@keyframes animate-fade {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
#edit-activities {
|
||||
border-radius: 100px;
|
||||
background-color: #f2965985;
|
||||
color: white;
|
||||
text-align: center;
|
||||
min-width: 22px !important;
|
||||
min-height: 22px !important;
|
||||
padding: 3px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
#edit-remarks {
|
||||
border-radius: 100px;
|
||||
background-color: #f2965985;
|
||||
color: white;
|
||||
text-align: center;
|
||||
min-width: 22px !important;
|
||||
min-height: 22px !important;
|
||||
padding: 3px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
#edit-show-item {
|
||||
border-radius: 100px;
|
||||
background-color: #f2965985;
|
||||
color: white;
|
||||
text-align: center;
|
||||
min-width: 22px !important;
|
||||
min-height: 22px !important;
|
||||
padding: 3px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.edit-button {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
}
|
||||
|
||||
.modal-dialog {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#event-name {
|
||||
font-size: 2vw;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.fa-trash {
|
||||
z-index: 1000;
|
||||
right: 20px;
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
.creator-function {
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
/* CSS */
|
||||
.button-53 {
|
||||
background-color: #f29659;
|
||||
border: 0 solid #e5e7eb;
|
||||
box-sizing: border-box;
|
||||
color: #000000;
|
||||
display: flex;
|
||||
font-family: ui-sans-serif, system-ui, -apple-system, system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
|
||||
'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
justify-content: center;
|
||||
line-height: 1.75rem;
|
||||
padding: 0.75rem 1.65rem;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
text-decoration: none #000000 solid;
|
||||
text-decoration-thickness: auto;
|
||||
width: 100%;
|
||||
max-width: 460px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
transform: rotate(-2deg);
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
.button-53:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.button-53:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border: 1px solid #000000;
|
||||
bottom: 4px;
|
||||
left: 4px;
|
||||
width: calc(100% - 1px);
|
||||
height: calc(100% - 1px);
|
||||
}
|
||||
|
||||
.button-53:hover:after {
|
||||
bottom: 2px;
|
||||
left: 2px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.button-53 {
|
||||
padding: 0.75rem 3rem;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
export async function fetchPendingItems(selectType) {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const eventId = params.get('event-id');
|
||||
const resShopList = await (await fetch(`/items/pendingItems?eventID=${eventId}`)).json();
|
||||
if (resShopList.status) {
|
||||
let listItems = '';
|
||||
|
||||
for (const items of resShopList.itemObj[selectType]) {
|
||||
listItems += `
|
||||
<tr id="list-item-${items.id}">
|
||||
<td>
|
||||
<div class="pending-item">
|
||||
${items.name}
|
||||
<button id="checking-${items.id}" class="check-btn">
|
||||
<i class="bi bi-check-circle"></i>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
}
|
||||
document.querySelector(`#shopping-list-update`).innerHTML = listItems;
|
||||
checkShoppingListItem();
|
||||
|
||||
document.querySelectorAll(`.dropdown-item`).forEach((dropdown) => {
|
||||
dropdown.addEventListener('click', function (e) {
|
||||
const selectType = e.currentTarget.innerHTML.toLowerCase();
|
||||
fetchPendingItems(selectType);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function checkShoppingListItem() {
|
||||
document.querySelectorAll(`.check-btn`).forEach((button) => {
|
||||
button.addEventListener('click', async function (e) {
|
||||
const itemID = e.currentTarget.id.slice(9);
|
||||
const res = await fetch(`/items/pendingItems/${itemID}`, {
|
||||
method: 'PUT'
|
||||
});
|
||||
if ((await res.json()).status === true) {
|
||||
const updateOnTheList = document.querySelector('#list-item-' + itemID);
|
||||
updateOnTheList.remove();
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user