skipper-organisms
Version:
A vanilla JavaScript library for skipperhospitality management
791 lines (764 loc) • 31.6 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Organisms</title>
<link
rel="stylesheet"
href="day-range-picker/styles/day-range-picker.css"
/>
<style>
@import url("http://fonts.cdnfonts.com/css/questrial");
body {
margin: 0;
}
.pod_container {
display: block;
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
.banner_image {
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
}
.form_container {
display: flex;
position: absolute;
bottom: 30vh;
width: 100%;
-webkit-justify-content: center;
justify-content: center;
}
.booking_form {
font-family: "Questrial", sans-serif;
display: flex;
/* padding: 0; */
/* font-family: "Roboto", sans-serif; */
background: #253745;
padding: 0 25px;
}
.form_label {
display: block;
color: white;
font-size: 12px;
line-height: 28px;
/* padding-bottom: 4px; */
padding-top: 6px;
}
.booking_form select {
min-width: 60px;
max-width: 250px;
padding: 7px 14px;
font-size: 16px;
line-height: 28px;
color: #e3e200;
background: #253745;
border-radius: 0.25em;
cursor: pointer;
-moz-appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' role='img' width='1em' height='1em' preserveAspectRatio='xMidYMid meet' viewBox='0 0 24 24'%3E%3Cpath fill='%23E3E200' fill-rule='evenodd' d='m6 7l6 6l6-6l2 2l-8 8l-8-8z'/%3E%3C/svg%3E");
background-repeat: no-repeat, repeat;
background-position: right 0.7em top 50%, 0 0;
background-size: 0.65em auto, 100%;
}
.booking_form .promo-code {
width: 80px;
/* padding: 7px; */
font-size: 16px;
line-height: 28px;
color: #e3e200;
background: #253745;
/* border-radius: 0.25em; */
border: 1px solid #617c87;
}
.datepicker {
width: 50px;
padding: 0 7px;
color: #e3e200;
background: #253745;
display: block;
border: none;
font-weight: 500;
font-size: 24px;
line-height: 28px;
cursor: pointer;
}
.datepicker small {
display: block;
font-size: 12px;
line-height: 14px;
text-transform: uppercase;
}
.booking_form .submit_button {
width: 154px;
height: 40px;
align-self: center;
background: #e3e200;
border: none;
border-radius: 9px;
font-size: 14px;
line-height: 100%;
cursor: pointer;
margin-left: 12px;
}
.grid {
display: grid;
}
.grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.p-6 {
padding: 24px;
}
.pr-4 {
padding-right: 16px;
}
.px-2 {
padding-left: 8px;
padding-right: 8px;
}
.px-4 {
padding-left: 16px;
padding-right: 16px;
}
.pt-4 {
padding-top: 16px;
}
.pb-1 {
padding-bottom: 4px;
}
.pb-7 {
padding-bottom: 28px;
}
.text-center {
text-align: center;
}
.hidden {
display: none;
}
option {
margin: 20px;
color: white;
font-size: 16px;
line-height: 28px;
cursor: pointer;
}
* {
margin: 0;
box-sizing: border-box;
}
.select-box {
/* display: flex; */
min-width: 42px;
/* flex-direction: column; */
position: relative;
}
.select-box.hotel {
min-width: 200px;
}
.select-box .options-container {
background: #2f3640;
color: #f5f6fa;
max-height: 0;
width: 100%;
opacity: 0;
transition: all 0.4s;
border-radius: 0 0 8px 8px;
overflow: hidden;
position: absolute;
top: 50px;
/* order: 1; */
}
.selected {
/* border-radius: 8px; */
/* margin-bottom: 8px; */
color: #e3e200;
position: relative;
font-size: 18px;
line-height: 28px;
cursor: pointer;
padding: 4px 0 22px 0;
/* order: 0; */
}
.selected::after {
content: "";
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' role='img' width='1em' height='1em' preserveAspectRatio='xMidYMid meet' viewBox='0 0 24 24'%3E%3Cpath fill='%239DBFC8' fill-rule='evenodd' d='m6 7l6 6l6-6l2 2l-8 8l-8-8z'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
position: absolute;
height: 10px;
width: 10px;
right: 10px;
top: 10px;
transition: all 0.4s;
}
.select-box .options-container.active {
min-width: 50px;
max-height: 240px;
opacity: 1;
/* overflow-y: scroll; */
}
.select-box .options-container.active + .selected::after {
transform: rotate(180deg);
/* top: -6px; */
}
.select-box .options-container::-webkit-scrollbar {
width: 8px;
background-color: #0d141f;
border-radius: 0 8px 8px 0;
}
.select-box .options-container::-webkit-scrollbar-thumb {
background-color: #525861;
border-radius: 0 8px 8px 0;
}
.select-box .option > label {
display: block;
padding: 12px;
cursor: pointer;
}
.select-box .option:hover {
background: #414b57;
}
.select-box label {
cursor: pointer;
}
.select-box .option .radio {
display: none;
}
@media (max-width: 767px) {
.booking_form {
flex-direction: column;
padding: 0;
min-width: 320px;
}
.selected {
padding: 4px 0 12px 0;
}
.hotel .selected {
padding: 15px 14px;
font-size: 14px;
line-height: 140%;
}
.select-box .options-container {
top: 62px;
z-index: 9;
}
.hotel .selected::after {
top: 20px;
right: 20px;
}
.datepicker small {
font-size: 18px;
line-height: 140%;
}
.form_label {
font-size: 16px;
line-height: 140%;
}
.booking_form .promo-code {
width: 182px;
margin-left: 16px;
}
.submit_button {
margin-bottom: 20px;
}
.sm\:hidden {
display: none;
}
.sm\:border {
border: 1px solid #ffffff;
}
.sm\:border-t-r {
border-top-width: 1px;
border-right-width: 1px;
border-color: #ffffff;
border-style: solid;
border-bottom-width: 0px;
border-left-width: 0px;
}
.sm\:border-t {
border-top-width: 1px;
border-color: #ffffff;
border-style: solid;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}
.sm\:flex {
display: flex;
}
.sm\:grid {
display: grid;
}
.sm\:justify-between {
justify-content: space-between;
}
.sm\:items-center {
align-items: center;
}
.sm\:text-center {
text-align: center;
}
.sm\:w-10 {
width: 40px;
}
.sm\:mx-auto {
margin-left: auto;
margin-right: auto;
}
.sm\:py-2 {
padding-top: 8px;
padding-bottom: 8px;
}
.sm\:py-5 {
padding-top: 20px;
padding-bottom: 20px;
}
}
@media (min-width: 767px) {
.md\:pr-4 {
padding-right: 1rem;
}
.md\:px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
}
</style>
</head>
<body>
<div class="pod_container">
<img
src="images/pod_banner.jpg"
class="banner_image"
alt="calendar"
/>
<div class="form_container">
<form class="booking_form sm:border" id="accommodations">
<div class="md:pr-4" id="hotel-selector">
<label
class="form_label sm:hidden"
for="hotel-selector"
>
Select Hotel
</label>
<div class="select-box hotel">
<div class="options-container">
<div class="option">
<input
type="radio"
class="radio"
id="Pod_39"
value="Pod_39"
name="hotel"
/>
<label for="Pod_39">Pod 39</label>
</div>
<div class="option">
<input
type="radio"
class="radio"
id="Pod_51"
value="Pod_51"
name="hotel"
/>
<label for="Pod_51">Pod 51</label>
</div>
<div class="option">
<input
type="radio"
class="radio"
id="Pod_BK"
value="Pod_BK"
name="hotel"
/>
<label for="Pod_BK"> Pod BK </label>
</div>
<div class="option">
<input
type="radio"
class="radio"
id="Pod_TSQ"
value="Pod_TSQ"
name="hotel"
/>
<label for="Pod_TSQ">Pod TSQ</label>
</div>
<div class="option">
<input
type="radio"
class="radio"
id="music"
value="music"
name="hotel"
/>
<label for="music">Music</label>
</div>
<div class="option">
<input
type="radio"
class="radio"
id="engineering"
value="engineering"
name="hotel"
/>
<label for="engineering">Engineering</label>
</div>
</div>
<div class="selected">Select Hotel</div>
</div>
</div>
<div class="grid grid-cols-2">
<div
class="px-2 md:px-4 sm:py-2 sm:flex sm:justify-between sm:items-center sm:border-t-r"
>
<label class="form_label text-center"
>Check In</label
>
<input
type="text"
class="hidden"
name="check-in"
id="datepicker-check-in"
value="18 Feb"
/>
<label
class="datepicker text-center"
for="datepicker-check-in"
id="datepicker-check-in-label"
>18 <small>Feb</small>
</label>
</div>
<div
class="px-2 md:px-4 sm:py-2 sm:flex sm:justify-between sm:items-center sm:border-t"
>
<label class="form_label">Check Out</label>
<input
type="text"
class="hidden"
name="check-out"
id="datepicker-check-out"
value="19 Feb"
/>
<label
class="datepicker text-center"
for="datepicker-check-out"
id="datepicker-check-out-label"
>19 <small>Feb</small>
</label>
</div>
</div>
<div class="grid grid-cols-2">
<div
class="sm:grid px-2 md:px-4 sm:border-t-r"
id="rooms-selector"
>
<label
class="form_label sm:text-center"
for="rooms-selector"
>
Rooms
</label>
<div class="select-box">
<div class="options-container">
<div class="option">
<input
type="radio"
class="radio"
id="rooms_1"
value="1"
name="rooms"
checked
/>
<label for="rooms_1">1</label>
</div>
<div class="option">
<input
type="radio"
class="radio"
id="rooms_2"
value="2"
name="rooms"
/>
<label for="rooms_2">2</label>
</div>
<div class="option">
<input
type="radio"
class="radio"
id="rooms_3"
value="3"
name="rooms"
/>
<label for="rooms_3">3</label>
</div>
<div class="option">
<input
type="radio"
class="radio"
id="rooms_4"
value="4"
name="rooms"
/>
<label for="rooms_4">4</label>
</div>
<div class="option">
<input
type="radio"
class="radio"
id="rooms_5"
value="5"
name="rooms"
/>
<label for="rooms_5">5</label>
</div>
<div class="option">
<input
type="radio"
class="radio"
id="rooms_6"
value="6"
name="rooms"
/>
<label for="rooms_6">6</label>
</div>
</div>
<div class="selected sm:w-10 sm:mx-auto">1</div>
</div>
</div>
<div
class="sm:grid px-2 md:px-4 sm:border-t-r"
id="guests-selector"
>
<label
class="form_label sm:text-center"
for="guests-selector"
>
Guests
</label>
<div class="select-box">
<div class="options-container sm:w-10">
<div class="option">
<input
type="radio"
class="radio"
id="guests_1"
value="1"
name="guests"
checked
/>
<label for="guests_1">1</label>
</div>
<div class="option">
<input
type="radio"
class="radio"
id="guests_2"
value="2"
name="guests"
/>
<label for="guests_2">2</label>
</div>
<div class="option">
<input
type="radio"
class="radio"
id="guests_3"
value="3"
name="guests"
/>
<label for="guests_3">3</label>
</div>
<div class="option">
<input
type="radio"
class="radio"
id="guests_4"
value="4"
name="guests"
/>
<label for="guests_4">4</label>
</div>
<div class="option">
<input
type="radio"
class="radio"
id="guests_5"
value="5"
name="guests"
/>
<label for="rooms_5">5</label>
</div>
<div class="option">
<input
type="radio"
class="radio"
id="guests_6"
value="6"
name="guests"
/>
<label for="rooms_5">6</label>
</div>
</div>
<div class="selected sm:w-10 sm:mx-auto">1</div>
</div>
</div>
</div>
<div class="px-4 sm:py-5 sm:flex sm:border-t">
<label class="form_label" for="promo-code"
>Promo Code</label
>
<input
type="text"
class="promo-code"
name="promo-code"
id="promo-code"
/>
</div>
<button type="submit" class="submit_button">
Book Now
</button>
</form>
</div>
</div>
<script>
// Add form select elements events
const selected = document.querySelectorAll(".selected");
selected.forEach((item) => {
const optionsContainer =
item.parentElement.querySelector(".options-container");
const optionList = optionsContainer.querySelectorAll(".option");
item.addEventListener("click", () => {
optionsContainer.classList.toggle("active");
});
optionList.forEach((o) => {
o.addEventListener("click", () => {
item.innerHTML = o.querySelector("label").innerHTML;
optionsContainer.classList.remove("active");
});
});
});
</script>
<script type="module">
import { DayRangePicker } from "./day-range-picker/day-range-picker.js";
const prices = [
{
date: "2022-04-05T14:48:00.000Z",
price: 110,
},
{
date: "2022-04-06T14:48:00.000Z",
price: 112,
},
{
date: "2022-04-07T14:48:00.000Z",
price: 111,
},
{
date: "2022-04-09T14:48:00.000Z",
price: 115,
},
{
date: "2022-04-11T14:48:00.000Z",
price: 110,
},
{
date: "2022-04-14T14:48:00.000Z",
price: 122,
},
{
date: "2022-04-15T14:48:00.000Z",
price: 121,
},
{
date: "2022-04-19T14:48:00.000Z",
price: 121,
},
];
const checkIn = document.getElementById("datepicker-check-in");
const checkInLabel = document.getElementById(
"datepicker-check-in-label"
);
const checkOut = document.getElementById("datepicker-check-out");
const checkOutLabel = document.getElementById(
"datepicker-check-out-label"
);
let startDate = new Date();
startDate.setDate(startDate.getDate() + 1);
let endDate = new Date();
endDate.setDate(endDate.getDate() + 2);
let minDate = new Date();
minDate.setDate(minDate.getDate() - 2); //starting day is 2 days from now
let maxDate = new Date();
maxDate.setDate(maxDate.getDate() + 120); //maxlimit is 60 days from now;
// var picker = new DayRangePicker({field: document.getElementById("datepicker"), minDate, maxDate, showPrice: false, format: "DD/MM/YYYY"});
//var dp = new DayRangePicker({checkIn: document.getElementById("dp"), format: "yyyy-MM-dd"});
var picker = new DayRangePicker({
checkIn,
checkInLabel,
checkOut,
checkOutLabel,
startDate,
endDate,
minDate,
maxDate,
showPrice: true,
format: "DD/MM/YYYY",
});
startDate.setDate(startDate.getDate() + 1);
endDate.setDate(endDate.getDate() + 2);
// picker.setDateRange(startDate, endDate);
startDate.setDate(startDate.getDate() + 1);
picker.selectStartDate(startDate);
picker.selectEndDate(endDate);
picker.goToNextMonth();
picker.goToPrevMonth();
picker.setPriceList(prices);
console.log(picker.getCurrentDateRange());
</script>
<script>
// Form validation
function logSubmit(event) {
event.preventDefault();
let errorMessage = "";
let hotel = ""; //form.elements["hotel-selector"].querySelector('input[type="radio"]:checked').value;
const hotelSelector = form
.querySelector("#hotel-selector")
.querySelector('input[type="radio"]:checked');
if (!hotelSelector) {
errorMessage += "Please select a hotel.\n";
console.log(errorMessage);
} else {
hotel = hotelSelector.value;
}
const checkIn = form.elements["check-in"].value;
const checkOut = form.elements["check-out"].value;
const rooms = form
.querySelector("#rooms-selector")
.querySelector('input[type="radio"]:checked').value;
const guests = form
.querySelector("#guests-selector")
.querySelector('input[type="radio"]:checked').value; //form.elements["guests-selector"].value;
const promoCode = form.elements["promo-code"].value;
const formData = {
hotel,
checkIn,
checkOut,
rooms,
guests,
promoCode,
};
console.log(formData);
}
const form = document.getElementById("accommodations");
form.addEventListener("submit", logSubmit);
</script>
</body>
</html>