- <template>
- <div class="">
- <div
- class="
- container
- items-center
- flex flex-col
- justify-center
- h-36
- rounded-md
- "
- v-bind:class="{ showTheConfirmation: isConfirmed }"
- >
- <div class="flex pb-2 animate-bounce">
- <img :src="rightLogo" class="h-6" alt="" />
- <p class="font-bold pl-2 text-xl">
- Your booking request has been taken
- </p>
- </div>
- <p class="text-center text-2xl text-red-600">
- We have received your booking request, once approved you will receive an
- email confirmation.
- </p>
- </div>
- <div class="" v-bind:class="{ hideAccordion: isShowingAccordian }">
- <div class="py-4">
- <select
- style="width: 30vw"
- class="
- text-base text-gray-700
- bg-white
- border border-solid border-gray-300
- rounded
- transition
- ease-in-out
- pl-4
- py-2
- "
- required
- v-model="formData.listOfRooms"
- aria-label=""
- @change="getCalenderData($event)"
- >
- <!-- <option>Select Room</option> -->
- <option
- v-for="room in listOfRooms"
- :value="room.value"
- :key="room.value"
- class="py-1"
- >
- {{ room.label }}
- </option>
- <!-- <option value="room1">Room 1</option>
- <option value="room2">Room 2</option> -->
- </select>
- </div>
- <div class="tabs">
- <div class="tab mb-4" v-bind:class="{ disableDateTab: isDateDisable }">
- <input
- type="radio"
- id="rd1"
- name="rd"
- v-on:click="handleCloseButton1"
- />
- <label class="tab-label font-bold" for="rd1"
- >Select Date and Time</label
- >
- <div class="tab-content">
- <div class="container calender-height">
- <!-- * Selected Time must be atleast <span class="font-extrabold text-gray-700"> 1 hour</span> -->
- <vue-cal
- ref="vuecal"
- class="h-full"
- hide-weekends
- :time-from="0 * 60"
- style="height: 80vh"
- :special-hours="specialHours"
- :disable-views="['years', 'year', 'month', 'day']"
- :cell-click-hold="false"
- :drag-to-create-event="true"
- :snap-to-time="60"
- :editable-events="{
- title: false,
- drag: false,
- resize: true,
- delete: true,
- create: true,
- }"
- :clickToNavigate="true"
- :events="events"
- twelveHour
- @cell-click="
- $refs.vuecal.createEvent($event, 60, { class: 'blue-event' })
- "
- @event-duration-change="
- onEventChange('event-duration-change', $event)
- "
- :on-event-create="onEventCreate"
- >
- </vue-cal>
- <div class="flex items-center justify-center w-full h-20">
- <button
- type="button"
- class="
- flex
- items-center
- justify-between
- px-6
- py-4
- text-md
- font-medium
- leading-5
- text-black
- transition-colors
- duration-150
- bg-white
- border-2
- rounded-full
- active:bg-blue-900
- hover:text-white
- focus:outline-none focus:shadow-outline-blue
- "
- v-on:click="handleCalenderSubmit"
- >
- Next
- </button>
- </div>
- <!-- <div class="calender-height border border-gray-800 p-4 rounded-md">
- <div
- class="
- fix-calender-hei
- flex
- justify-evenly
- w-full
- items-center
- text-center
- "
- >
- <div class="">
- <p class="text-base font-semibold pb-4">Select Date:</p>
- <v-calendar></v-calendar>
- </div>
- <div class="z-auto">
- <div class="">
- <p class="text-base font-semibold pb-4">Select Time:</p>
- <vue-timepicker></vue-timepicker>
- <p>to</p>
- <vue-timepicker></vue-timepicker>
- </div>
- </div>
- </div>
- </div> -->
- </div>
- </div>
- </div>
- <div class="tab mb-4" v-bind:class="{ disableInfoTab: isInfoDisable }">
- <input
- type="radio"
- id="rd2"
- name="rd"
- v-on:click="handleCloseButton2"
- />
- <label class="tab-label font-bold" for="rd2">Your Information</label>
- <div class="tab-content">
- <div
- class="
- fix-input-width
- container
- border border-gray-800
- p-4
- rounded-md
- "
- >
- <ValidationObserver ref="loginForm">
- <form class="w-full" method="post" v-on:submit.prevent>
- <div class="flex flex-col">
- <div
- class="
- flex flex-col
- md:flex-row
- w-full
- justify-evenly
- items-center
- "
- >
- <label
- for="fname"
- class="text-base font-medium text-gray-900 block mb-4"
- >Organization/Company Name
- <ValidationProvider v-slot="v" rules="">
- <input
- type="text"
- id="formData.companyName"
- name="Organization/Company Name"
- class="
- bg-gray-50
- border border-gray-300
- text-gray-900
- sm:text-sm
- rounded-lg
- block
- p-2.5
- "
- v-model="formData.companyName"
- placeholder="Enter company name"
- />
- <span class="text-sm font-semibold text-red-600">{{
- v.errors[0]
- }}</span>
- </ValidationProvider>
- </label>
- <label
- for="lname"
- class="text-base font-medium text-gray-900 block mb-4"
- >Contact Person
- <ValidationProvider
- v-slot="v"
- :rules="{
- regex:
- /^[A-Z]?[a-z][a-z]+\s?[A-Z]?[a-z][a-z]+\s?[A-Z]?[a-z][a-z]+$/,
- }"
- >
- <input
- type="text"
- id="formData.contactPersonName"
- name="Contact Person"
- class="
- bg-gray-50
- border border-gray-300
- text-gray-900
- sm:text-sm
- rounded-lg
- block
- p-2.5
- "
- v-model="formData.contactPersonName"
- required
- placeholder="Enter person's name"
- />
- <span class="text-sm font-semibold text-red-600">{{
- v.errors[0]
- }}</span>
- </ValidationProvider>
- </label>
- </div>
- <div
- class="
- flex flex-col
- md:flex-row
- w-full
- justify-evenly
- items-center
- "
- >
- <label
- for="email"
- class="text-base font-medium text-gray-900 block mb-4"
- >Email
- <ValidationProvider
- v-slot="v"
- :rules="{
- regex: /^[a-z0-9._-]+@[a-z0-9.-]+\.[a-z]{2,6}$/,
- }"
- >
- <input
- type="email"
- id="formData.contactEmail"
- name="Email"
- class="
- bg-gray-50
- border border-gray-300
- text-gray-900
- sm:text-sm
- rounded-lg
- block
- p-2.5
- "
- v-model="formData.contactEmail"
- required
- placeholder="Enter Email"
- />
- <span class="text-sm font-semibold text-red-600">{{
- v.errors[0]
- }}</span>
- </ValidationProvider>
- </label>
- <label
- for="mobile"
- class="text-base font-medium text-gray-900 block mb-4"
- >Phone Number
- <ValidationProvider
- v-slot="v"
- :rules="{
- regex: /^\(?(\d{3})\)?[- ]?(\d{3})[- ]?(\d{4})$/,
- }"
- >
- <div class="relative phone-number-fix">
- <input
- type="text"
- min="0"
- id="formData.phoneNumber"
- pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
- name="Phone Number"
- class="
- bg-gray-50
- border border-gray-300
- text-gray-900
- sm:text-sm
- rounded-lg
- block
- p-2.5
- pl-12
- "
- v-model="formData.phoneNumber"
- required
- placeholder="Enter Phone Number"
- />
- <!-- <input
- type="tel"
- id="formData.phoneNumber"
- pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
- maxlength="10"
- name="Phone Number"
- class="
- bg-gray-50
- border border-gray-300
- text-gray-900
- sm:text-sm
- rounded-lg
- block
- p-2.5
- pl-12
- "
- v-model="formData.phoneNumber"
- required
- placeholder="Enter Phone Number"
- /> -->
- <div
- class="
- absolute
- inset-y-0
- flex
- items-center
- ml-3
- pointer-events-none
- "
- >
- +61
- </div>
- </div>
- <!-- <label
- for="mobile"
- class="text-base font-medium text-gray-900 block mb-4"
- >Phone Number
- <ValidationProvider
- v-slot="v"
- :rules="{
- regex: /^\(?(\d{3})\)?[- ]?(\d{3})[- ]?(\d{4})$/,
- }"
- > -->
- <!-- <input
- type="tel"
- id="formData.phoneNumber"
- name="Phone Number"
- class="
- bg-gray-50
- border border-gray-300
- text-gray-900
- sm:text-sm
- rounded-lg
- block
- p-2.5
- "
- v-model="formData.phoneNumber"
- required
- placeholder="Enter Phone Number"
- /> -->
- <span class="text-sm font-semibold text-red-600">{{
- v.errors[0]
- }}</span>
- </ValidationProvider>
- </label>
- </div>
- <div
- class="
- flex flex-col
- md:flex-row
- w-full
- justify-evenly
- items-center
- "
- >
- <label
- for="email"
- class="text-base font-medium text-gray-900 block mb-4"
- >Expected Attendance
- <ValidationProvider v-slot="v" rules="">
- <input
- min="0"
- type="number"
- id="formData.expectedAttendance"
- name="Attendance"
- class="
- bg-gray-50
- border border-gray-300
- text-gray-900
- sm:text-sm
- rounded-lg
- block
- p-2.5
- "
- v-model="formData.expectedAttendance"
- placeholder="Enter expected attendance"
- />
- <span class="text-sm font-semibold text-red-600">{{
- v.errors[0]
- }}</span>
- </ValidationProvider>
- </label>
- <label
- for="mobile"
- class="text-base font-medium text-gray-900 block mb-4"
- >Activity (Booking for)
- <ValidationProvider v-slot="v" rules="required">
- <textarea
- type="tel"
- id="formData.activityDetail"
- name="Activity"
- class="
- bg-gray-50
- border border-gray-300
- text-gray-900
- sm:text-sm
- rounded-lg
- block
- p-2.5
- "
- v-model="formData.activityDetail"
- required
- placeholder="Enter activity details briefly"
- />
- <span class="text-sm font-semibold text-red-600">{{
- v.errors[0]
- }}</span>
- </ValidationProvider>
- </label>
- </div>
- </div>
- <div class="flex items-center justify-center w-full h-20">
- <button
- type="submit"
- class="
- flex
- items-center
- justify-between
- px-6
- py-4
- text-md
- font-medium
- leading-5
- text-black
- transition-colors
- duration-150
- bg-white
- border-2
- rounded-full
- active:bg-blue-900
- hover:text-white
- focus:outline-none focus:shadow-outline-blue
- "
- v-on:click="handleNextButton"
- >
- Next
- </button>
- </div>
- </form>
- </ValidationObserver>
- </div>
- </div>
- </div>
- <div class="tab mb-4" v-bind:class="{ disableInfoTab: isInfoDisable }">
- <input
- type="radio"
- id="rd3"
- name="rd"
- v-on:click="handleCloseButton3"
- />
- <label class="tab-label font-bold" for="rd3">Epuipments</label>
- <div class="tab-content">
- <div
- class="
- fix-input-width
- container
- border border-gray-800
- p-4
- rounded-md
- "
- >
- <table class="table w-full">
- <thead>
- <tr>
- <th class="text-center" style="width:3%;"></th>
- <th class="text-center" style="width:20%;"></th>
- <th class="text-center" style="width:50%;"></th>
- <th class="text-center" style="width:27%;"></th>
- </tr>
- </thead>
- <tbody id="requipementTable">
- </tbody>
- </table>
- <div class="flex items-center justify-center w-full h-16">
- <button
- type="submit"
- class="
- flex
- items-center
- justify-between
- px-6
- py-4
- text-md
- font-medium
- leading-5
- text-black
- transition-colors
- duration-150
- bg-white
- border-2
- rounded-full
- active:bg-blue-900
- hover:text-white
- focus:outline-none focus:shadow-outline-blue
- "
- v-on:click="handleExtraNextButton"
- >
- Next
- </button>
- </div>
- </div>
- </div>
- </div>
- <div class="tab mb-4" v-bind:class="{ disableClick: isDisable }">
- <input
- type="radio"
- id="rd4"
- name="rd"
- v-on:click="handleCloseButton4"
- />
- <label class="tab-label font-bold" for="rd4">Confirm Booking</label>
- <div class="tab-content">
- <div
- class="
- fix-input-width
- container
- border border-gray-800
- p-4
- rounded-md
- "
- >
- <div class="flex flex-col tracking-wider">
- <div class="grid grid-cols-2 md:gap-x-32 my-4">
- <div class="md:pl-64"><p>Booking Date & Time :</p></div>
- <div class="font-semibold flex flex-col md:flex-row">
- <p class="pr-4">{{ formData.bookingDate }}</p>
- <p>{{ formData.bookingTime }}</p>
- </div>
- </div>
- <div class="grid grid-cols-2 md:gap-x-32 my-4">
- <div class="md:pl-64"><p>Organization/Company Name :</p></div>
- <div class="font-semibold">
- <p>{{ formData.companyName }}</p>
- </div>
- </div>
- <div class="grid grid-cols-2 md:gap-x-32 my-4">
- <div class="md:pl-64"><p>Contact Person :</p></div>
- <div class="font-semibold">
- <p>{{ formData.contactPersonName }}</p>
- </div>
- </div>
- <div class="grid grid-cols-2 md:gap-x-32 my-4">
- <div class="md:pl-64"><p>Email :</p></div>
- <div class="font-semibold">
- <p>{{ formData.contactEmail }}</p>
- </div>
- </div>
- <div class="grid grid-cols-2 md:gap-x-32 my-4">
- <div class="md:pl-64"><p>Phone Number :</p></div>
- <div class="font-semibold">
- <p>+61 {{ formData.phoneNumber }}</p>
- </div>
- </div>
- <div class="grid grid-cols-2 md:gap-x-32 my-4">
- <div class="md:pl-64"><p>Expected Attendance :</p></div>
- <div class="font-semibold">
- <p>{{ formData.expectedAttendance }}</p>
- </div>
- </div>
- <div class="grid grid-cols-2 md:gap-x-32 my-4">
- <div class="md:pl-64"><p>Activity :</p></div>
- <div class="">
- <p class="font-semibold" id="activityPara">
- {{ formData.activityDetail }}
- </p>
- </div>
- </div>
- <!-- <div class="grid grid-cols-2 md:gap-x-32 my-4">
- <div class="md:pl-64"><p>Select Hall :</p></div>
- </div> -->
- </div>
- <div class="flex items-center justify-center w-full h-20 mt-4">
- <button
- class="
- flex
- items-center
- justify-between
- px-6
- py-4
- text-md
- font-medium
- leading-5
- text-black
- transition-colors
- duration-150
- bg-white
- border-2
- rounded-full
- active:bg-blue-900
- hover:text-white
- focus:outline-none focus:shadow-outline-blue
- "
- v-on:click="handleConfirmBtn"
- >
- <span class="pr-1">Confirm</span>
- </button>
- </div>
- <!-- </form> -->
- </div>
- </div>
- </div>
- <div class="tab">
- <input type="radio" id="rd5" name="rd" />
- <label for="rd5" class="tab-close"></label>
- </div>
- </div>
- </div>
- </div>
- </template>
- <script>
- import VueCal from "vue-cal";
- import Vue from "vue";
- import "vue-cal/dist/vuecal.css";
- // import { ValidationProvider } from 'vee-validate';
- import { ValidationObserver } from "vee-validate";
- import { ValidationProvider } from "vee-validate/dist/vee-validate.full.esm";
- import { regex } from "vee-validate/dist/rules";
- import { extend } from "vee-validate";
- extend("regex", regex);
- Vue.component("ValidationProvider", ValidationProvider);
- Vue.component("ValidationObserver", ValidationObserver);
- extend("password", {
- message:
- "{_field_} must be at least 8 characters, contain One Uppercase, One lowercase, One Special character i.e (! @ # $ % ^ & *), One number.",
- validate: (value) => {
- const strong_password = new RegExp(
- "^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})"
- ); // regex to check our strong password
- return strong_password.test(value); //Test the regex. Test function returns a true or false value.
- },
- });
- export default {
- components: { VueCal },
- data() {
- return {
- bookedevent: null,
- events: [],
- newEvents: [],
- specialHours: null,
- recordCalenderClick1: 1,
- recordCalenderClick2: 1,
- recordCalenderClick3: 1,
- recordCalenderClick4: 1,
- selectedEvent: null,
- extras:[],
- formData: {
- companyName: "",
- contactPersonName: "",
- contactEmail: "",
- phoneNumber: "",
- expectedAttendance: "",
- activityDetail: "",
- bookingTime: "",
- bookingDate: "",
- listOfRooms: "",
- output: "",
- selectedDay: "",
- selectedFromTime: "",
- selectedToTime: "",
- Time: "",
- checkedCheckbox: [],
- },
- listOfRooms: [
- { value: "", label: "Select Hall" },
- { value: "1", label: "Hall 1" },
- { value: "2", label: "Hall 2" },
- ],
- rightLogo: "assets/images/right.png",
- isConfirmed: true,
- isShowingAccordian: false,
- isDisable: true,
- isInfoDisable: true,
- isDateDisable: true,
- changedValue: 0,
- };
- },
- mounted(){
- // this.extras = this.$store.getters.getCurrentExtra;
- },
- methods: {
- increaseCount() {
- let quantityValue = document.querySelector("#qty").value;
- this.changedValue = Number(quantityValue) + 1;
- document.getElementById("qty").value = this.changedValue;
- },
- decreaseCount() {
- let quantityValue = document.querySelector("#qty").value;
- this.changedValue = Number(quantityValue) - 1;
- document.getElementById("qty").value = this.changedValue;
- },
- deleteEvents() {
- if (this.newEvents.length === 1) {
- this.events.pop();
- }
- this.newEvents.pop();
- },
- getCalenderData(e) {
- let selectedRooms = this.formData.listOfRooms;
- let currentObj = this;
- (currentObj.events.length = 0),
- (currentObj.newEvents.length = 0),
- this.axios
- .get("api/get-calendar?selectedRooms=" + selectedRooms)
- .then(function (response) {
- currentObj.bookedevent = response.data.bookedDate;
- (currentObj.specialHours = {
- 1: {
- from:
- parseInt(response.data.selectedRooms[0]["timing_from"]) * 60,
- to: parseInt(response.data.selectedRooms[0]["timing_to"]) * 60,
- class: "business-hours",
- },
- 2: {
- from:
- parseInt(response.data.selectedRooms[1]["timing_from"]) * 60,
- to: parseInt(response.data.selectedRooms[1]["timing_to"]) * 60,
- class: "business-hours",
- },
- 3: {
- from:
- parseInt(response.data.selectedRooms[2]["timing_from"]) * 60,
- to: parseInt(response.data.selectedRooms[2]["timing_to"]) * 60,
- class: "business-hours",
- },
- 4: {
- from:
- parseInt(response.data.selectedRooms[4]["timing_from"]) * 60,
- to: parseInt(response.data.selectedRooms[3]["timing_to"]) * 60,
- class: "business-hours",
- },
- 5: {
- from:
- parseInt(response.data.selectedRooms[4]["timing_from"]) * 60,
- to: parseInt(response.data.selectedRooms[4]["timing_to"]) * 60,
- class: "business-hours",
- },
- }),
- response.data.bookedDate.forEach(function (number) {
- currentObj.events.push({
- start: number.from_time,
- end: number.to_time,
- title: "Booked event",
- content: null,
- class: "red-event",
- deletable: false,
- resizable: false,
- draggable: false,
- });
- });
- })
- .catch(function (error) {
- currentObj.output = error;
- });
- this.isDateDisable = false;
- },
- handleCloseButton1(e) {
- this.recordCalenderClick1 = this.recordCalenderClick1 + 1;
- if (this.recordCalenderClick1 == 2) {
- document.getElementById("rd1").checked = true;
- this.recordCalenderClick2 = 1;
- this.recordCalenderClick3 = 1;
- this.recordCalenderClick4 = 1;
- } else {
- document.getElementById("rd1").checked = false;
- this.recordCalenderClick1 = 1;
- }
- },
- handleCloseButton2(e) {
- this.recordCalenderClick2 = this.recordCalenderClick2 + 1;
- if (this.recordCalenderClick2 == 2) {
- document.getElementById("rd2").checked = true;
- this.recordCalenderClick1 = 1;
- this.recordCalenderClick3 = 1;
- this.recordCalenderClick4 = 1;
- } else {
- document.getElementById("rd2").checked = false;
- this.recordCalenderClick2 = 1;
- }
- },
- handleCloseButton3(e) {
- this.recordCalenderClick3 = this.recordCalenderClick3 + 1;
- if (this.recordCalenderClick3 == 2) {
- document.getElementById("rd3").checked = true;
- this.recordCalenderClick2 = 1;
- this.recordCalenderClick1 = 1;
- this.recordCalenderClick4 = 1;
- } else {
- document.getElementById("rd3").checked = false;
- this.recordCalenderClick3 = 1;
- }
- },
- handleCloseButton4(e) {
- this.recordCalenderClick4 = this.recordCalenderClick4 + 1;
- if (this.recordCalenderClick4 == 2) {
- document.getElementById("rd4").checked = true;
- this.recordCalenderClick2 = 1;
- this.recordCalenderClick1 = 1;
- this.recordCalenderClick3 = 1;
- } else {
- document.getElementById("rd4").checked = false;
- this.recordCalenderClick4 = 1;
- }
- },
- handleExtraNextButton(){
- let checkboxInputs = document.getElementsByClassName("check-checked-input");
- console.log(checkboxInputs)
- for (let checkboxInput of checkboxInputs) {
- if (checkboxInput.checked){
- // checkedCheckbox.push(checkboxInput)
- console.log(checkboxInput)
- }
- }
- // console.log(this.checkedCheckbox)
- },
- handleCalenderSubmit() {
- var enddate = new Date(this.selectedEvent.end);
- var bookedDate =
- enddate.getFullYear() +
- "-" +
- (enddate.getMonth() + 1) +
- "-" +
- enddate.getDate() +
- " " +
- enddate.getHours() +
- ":00";
- // this.bookedevent.forEach((number) => {
- // if(bookedDate > number.from_time){
- // alert("This events already booked..!");
- // this.deleteEvents();
- // }
- // });
- if (this.selectedEvent) {
- if (
- this.selectedEvent.startTimeMinutes <
- this.specialHours[this.selectedEvent.start.getDay()].from ||
- this.selectedEvent.endTimeMinutes >
- this.specialHours[this.selectedEvent.start.getDay()].to
- ) {
- alert(
- `Please create events within business hours(09:00am to 07:00pm)`
- );
- this.deleteEvents();
- } else {
- if (
- this.selectedEvent.endTimeMinutes -
- this.selectedEvent.startTimeMinutes <
- 60
- ) {
- alert("Time period less than 1 hour is not allowed");
- } else {
- var startdate = new Date(this.selectedEvent.start);
- var enddate = new Date(this.selectedEvent.end);
- var fromDate = this.getDateFunction(startdate);
- var selectedDayInput = this.getSelectedDay(startdate);
- var toDate = this.getDateFunction(enddate);
- var fromTime = this.getTimeFunction(startdate);
- var toTime = this.getTimeFunction(enddate);
- this.formData.bookingTime = fromTime + " to " + toTime;
- this.formData.bookingDate =
- fromDate == toDate ? fromDate : fromDate + " to " + toDate;
- this.formData.selectedDay = selectedDayInput;
- this.formData.selectedFromTime =
- startdate.getFullYear() +
- "-" +
- (startdate.getMonth() + 1) +
- "-" +
- startdate.getDate() +
- " " +
- startdate.getHours() +
- ":00";
- this.formData.selectedToTime =
- enddate.getFullYear() +
- "-" +
- (enddate.getMonth() + 1) +
- "-" +
- enddate.getDate() +
- " " +
- enddate.getHours() +
- ":00";
- this.formData.Time =
- startdate.getFullYear() +
- "-" +
- (startdate.getMonth() + 1) +
- "-" +
- startdate.getDate();
- this.isInfoDisable = false;
- document.getElementById("rd2").checked = true;
- }
- //'2022-01-11 14:00
- }
- } else {
- alert("Please create one event!");
- }
- },
- onEventCreate($event, deleteEventFunction) {
- if (
- $event.startTimeMinutes <
- this.specialHours[$event.start.getDay()].from ||
- $event.endTimeMinutes > this.specialHours[$event.start.getDay()].to
- ) {
- alert(`Please create events within business hours(09:00am to 07:00pm)`);
- return false;
- }
- this.deleteEvents();
- this.selectedEvent = $event;
- this.events.push($event);
- this.newEvents.push($event);
- return $event;
- },
- onEventChange(events, $event) {
- this.selectedEvent = $event.event;
- var enddate = new Date(this.selectedEvent.end);
- var bookedDate =
- enddate.getFullYear() +
- "-" +
- (enddate.getMonth() + 1) +
- "-" +
- enddate.getDate() +
- " " +
- enddate.getHours() +
- ":00";
- if (
- $event.event.startTimeMinutes <
- this.specialHours[$event.event.start.getDay()].from ||
- $event.event.endTimeMinutes >
- this.specialHours[$event.event.start.getDay()].to
- ) {
- alert("Please create events within business hours(09:00am to 07:00pm)");
- this.events[0] = this.selectedEvent;
- return this.selectedEvent;
- } else {
- // console.log(bookedDate)
- // this.bookedevent.forEach((number) => {
- // console.log(number.time)
- // if(bookedDate >= number.from_time){
- // alert("This events already booked..!");
- // this.deleteEvents();
- // }
- // });
- }
- return $event.event;
- },
- // || ($event.event.endTimeMinutes - $event.event.startTimeMinutes) >= 60
- getSelectedDay(date) {
- var day = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"];
- return day[date.getDay() - 1];
- },
- getDateFunction(date) {
- var month = [
- "January",
- "February",
- "March",
- "April",
- "May",
- "June",
- "July",
- "August",
- "September",
- "October",
- "November",
- "December",
- ];
- var day = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"];
- var formatedDate =
- date.getDate() +
- "th" +
- " " +
- month[date.getMonth()] +
- " " +
- date.getFullYear();
- return formatedDate;
- },
- getTimeFunction(date) {
- var hours = date.getHours();
- var minutes = date.getMinutes();
- var ampm = hours >= 12 ? "pm" : "am";
- hours = hours % 12;
- hours = hours ? hours : 12; // the hour '0' should be '12'
- minutes = minutes < 10 ? "0" + minutes : minutes;
- var formatedTime = hours + ":" + minutes + "" + ampm;
- return formatedTime;
- },
- is(value) {
- return value ? true : "This field is ";
- },
- async handleNextButton(e) {
- e.preventDefault();
- const isValid = await this.$refs.loginForm.validate();
- var formValid = isValid;
- if (isValid) {
- this.formData.phoneNumber = this.formData.phoneNumber;
- // this.formData.phoneNumber = "+61" + this.formData.phoneNumber;
- this.isDisable = false;
- document.getElementById("rd3").checked = true;
- this.getRequipment();
- }
- },
- getRequipment(){
- let currentObj = this;
- this.axios
- .get("api/get-equipment")
- .then(function (response) {
- var requipementDataTable = [];
- response.data.forEach(function (data) {
- currentObj.requipementDataTable.push(
- '<tr><td class="text-right" style=""><input type="checkbox" class="form-checkbox h-4 w-4 text-gray-600 check-checked-input" ><span class="ml-2 text-gray-700"></span></td><td class="text-center">'+data.name+'</td><td class="text-center"><p class="qty"><button @click="decreaseCount()" class="qtyminus" aria-hidden="true">−</button><input type="number" name="qty[]" id="qty" min="1" max="10" step="1" value="1" style="width:3rem;"><button @click="increaseCount()" class="qtyplus" aria-hidden="true">+</button></p></td><td>$ '+data.price+'</td></tr>');
- });
- document.getElementById("requipementTable").append(requipementDataTable);
- })
- .catch(function (error) {
- currentObj.output = error;
- });
- },
- handleConfirmBtn() {
- if (this.formData.listOfRooms == "") {
- alert("Please select Hall");
- } else {
- let currentObj = this;
- this.axios
- .post("api/hallbookingemail", {
- data: this.formData,
- })
- .then(function (response) {
- currentObj.output = response.data;
- })
- .catch(function (error) {
- currentObj.output = error;
- });
- document.getElementById("rd4").checked = true;
- currentObj.isConfirmed = false;
- currentObj.isShowingAccordian = true;
- }
- },
- },
- };
- </script>
- <style>
- /* @import "vue2-timepicker/dist/VueTimepicker.css"; */
- /* Quantity selector UI */
- .qty button {
- padding: 0;
- margin: 0;
- border-style: none;
- touch-action: manipulation;
- display: inline-block;
- border: none;
- background: none;
- cursor: pointer;
- }
- /* End Reset for the demo */
- /* Sass Config */
- /* Contrast : 7.2:1 */
- /* End Sass Config */
- .qty {
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
- text-align: center;
- }
- .qty label {
- flex: 1 0 100%;
- }
- .qty input {
- height: 3rem;
- font-size: 1.3rem;
- text-align: center;
- border: 1px solid #575757;
- }
- .qty button {
- text-align: center;
- width: 2rem;
- height: 3rem;
- color: #fff;
- font-size: 2rem;
- background: #575757;
- }
- .qty button.qtyminus {
- margin-right: 0.3rem;
- }
- .qty button.qtyplus {
- margin-left: 0.3rem;
- }
- input[type="number"]::-webkit-inner-spin-button,
- input[type="number"]::-webkit-outer-spin-button {
- -webkit-appearance: none;
- margin: 0;
- }
- .custom-number-input input:focus {
- outline: none !important;
- }
- .custom-number-input button:focus {
- outline: none !important;
- }
- .blue-event {
- background-color: rgba(145, 175, 76, 0.35);
- }
- .red-event {
- background-color: rgba(175, 79, 76, 0.35);
- }
- .business-hours {
- background-color: rgba(255, 255, 0, 0.2);
- border: solid rgba(255, 210, 0, 0.6);
- border-width: 2px 0;
- }
- .fix-input-width {
- /* min-height: 100vh; */
- }
- .fix-input-width input,
- .fix-input-width textarea,
- .fix-input-width select {
- width: 30vw;
- }
- .fix-input-width input:hover,
- .fix-input-width textarea:hover,
- .fix-input-width select:hover {
- outline-color: #2c3e50;
- }
- .fix-input-width input:focus,
- .fix-input-width textarea:focus,
- .fix-input-width select:focus {
- outline-color: #2c3e50;
- }
- @media only screen and (max-width: 750px) {
- .fix-input-width input,
- .fix-input-width textarea,
- .fix-input-width select {
- width: 80vw;
- }
- }
- @media only screen and (min-width: 2000px) {
- .fix-input-width input,
- .fix-input-width textarea,
- .fix-input-width select {
- width: 20vw;
- }
- }
- @media only screen and (min-width: 3000px) {
- .fix-input-width input,
- .fix-input-width textarea,
- .fix-input-width select {
- width: 10vw;
- }
- }
- input[type="radio"] {
- position: absolute;
- opacity: 0;
- z-index: -1;
- }
- .row {
- display: flex;
- }
- .row .col {
- flex: 1;
- }
- .row .col:last-child {
- margin-left: 1em;
- }
- /* Accordion styles */
- .tabs {
- border-radius: 8px;
- overflow: hidden;
- box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.5);
- }
- .tab {
- width: 100%;
- color: white;
- overflow: hidden;
- }
- .tab-label {
- display: flex;
- justify-content: space-between;
- padding: 1em;
- background: #2c3e50;
- /* font-weight: bold; */
- cursor: pointer;
- /* Icon */
- }
- .tab-label:hover {
- background: #1a252f;
- }
- .tab-label::after {
- content: "❯";
- width: 1em;
- height: 1em;
- text-align: center;
- transition: all 0.35s;
- }
- .tab-content {
- max-height: 0;
- padding: 0 1em;
- color: #2c3e50;
- background: white;
- transition: all 0.35s;
- }
- .tab-close {
- display: flex;
- justify-content: flex-end;
- /* padding: 1em; */
- font-size: 0.75em;
- background: white;
- cursor: pointer;
- }
- .tab-close:hover {
- background: #1a252f;
- }
- input:checked + .tab-label {
- background: #1a252f;
- }
- input:checked + .tab-label::after {
- transform: rotate(90deg);
- }
- input:checked ~ .tab-content {
- max-height: 100vh;
- padding: 1em;
- }
- </style>
[text] test
Viewer
*** This page was generated with the meta tag "noindex, nofollow". This happened because you selected this option before saving or the system detected it as spam. This means that this page will never get into the search engines and the search bot will not crawl it. There is nothing to worry about, you can still share it with anyone.
Editor
You can edit this paste and save as new:
File Description
- test
- Paste Code
- 24 Jan-2022
- 43.13 Kb
You can Share it: