[text] accordion 24-1

Viewer

copydownloadembedprintName: accordion 24-1
  1. <template>
  2.   <div class="">
  3.     <div
  4.       class="
  5.         container
  6.         items-center
  7.         flex flex-col
  8.         justify-center
  9.         h-36
  10.         rounded-md
  11.       "
  12.       v-bind:class="{ showTheConfirmation: isConfirmed }"
  13.     >
  14.       <div class="flex pb-2 animate-bounce">
  15.         <img :src="rightLogo" class="h-6" alt="" />
  16.         <p class="font-bold pl-2 text-xl">
  17.           Your booking request has been taken
  18.         </p>
  19.       </div>
  20.       <p class="text-center text-2xl text-red-600">
  21.         We have received your booking request, once approved you will receive an
  22.         email confirmation.
  23.       </p>
  24.     </div>
  25.     <div class="" v-bind:class="{ hideAccordion: isShowingAccordian }">
  26.       <div class="py-4">
  27.         <select
  28.           style="width: 30vw"
  29.           class="
  30.             text-base text-gray-700
  31.             bg-white
  32.             border border-solid border-gray-300
  33.             rounded
  34.             transition
  35.             ease-in-out
  36.             pl-4
  37.             py-2
  38.           "
  39.           required
  40.           v-model="formData.listOfRooms"
  41.           aria-label=""
  42.           @change="getCalenderData($event)"
  43.         >
  44.           <!-- <option>Select Room</option> -->
  45.           <option
  46.             v-for="room in listOfRooms"
  47.             :value="room.value"
  48.             :key="room.value"
  49.             class="py-1"
  50.           >
  51.             {{ room.label }}
  52.           </option>
  53.  
  54.           <!-- <option value="room1">Room 1</option>
  55.                       <option value="room2">Room 2</option> -->
  56.         </select>
  57.       </div>
  58.       <div class="tabs">
  59.         <div class="tab mb-4" v-bind:class="{ disableDateTab: isDateDisable }">
  60.           <input
  61.             type="radio"
  62.             id="rd1"
  63.             name="rd"
  64.             v-on:click="handleCloseButton1"
  65.           />
  66.           <label class="tab-label font-bold" for="rd1"
  67.             >Select Date and Time</label
  68.           >
  69.           <div class="tab-content">
  70.             <div class="container calender-height">
  71.               <!-- * Selected Time must be atleast <span class="font-extrabold text-gray-700"> 1 hour</span> -->
  72.               <vue-cal
  73.                 ref="vuecal"
  74.                 class="h-full"
  75.                 hide-weekends
  76.                 :time-from="0 * 60"
  77.                 style="height: 80vh"
  78.                 :special-hours="specialHours"
  79.                 :disable-views="['years', 'year', 'month', 'day']"
  80.                 :cell-click-hold="false"
  81.                 :drag-to-create-event="true"
  82.                 :snap-to-time="60"
  83.                 :editable-events="{
  84.                   title: false,
  85.                   drag: false,
  86.                   resize: true,
  87.                   delete: true,
  88.                   create: true,
  89.                 }"
  90.                 :clickToNavigate="true"
  91.                 :events="events"
  92.                 twelveHour
  93.                 @cell-click="
  94.                   $refs.vuecal.createEvent($event, 60, { class: 'blue-event' })
  95.                 "
  96.                 @event-duration-change="
  97.                   onEventChange('event-duration-change', $event)
  98.                 "
  99.                 :on-event-create="onEventCreate"
  100.               >
  101.               </vue-cal>
  102.               <div class="flex items-center justify-center w-full h-20">
  103.                 <button
  104.                   type="button"
  105.                   class="
  106.                     flex
  107.                     items-center
  108.                     justify-between
  109.                     px-6
  110.                     py-4
  111.                     text-md
  112.                     font-medium
  113.                     leading-5
  114.                     text-black
  115.                     transition-colors
  116.                     duration-150
  117.                     bg-white
  118.                     border-2
  119.                     rounded-full
  120.                     active:bg-blue-900
  121.                     hover:text-white
  122.                     focus:outline-none focus:shadow-outline-blue
  123.                   "
  124.                   v-on:click="handleCalenderSubmit"
  125.                 >
  126.                   Next
  127.                 </button>
  128.               </div>
  129.               <!-- <div class="calender-height border border-gray-800 p-4 rounded-md">
  130.                 <div
  131.                   class="
  132.                     fix-calender-hei
  133.                     flex
  134.                     justify-evenly
  135.                     w-full
  136.                     items-center
  137.                     text-center
  138.                   "
  139.                 >
  140.                   <div class="">
  141.                     <p class="text-base font-semibold pb-4">Select Date:</p>
  142.                     <v-calendar></v-calendar>
  143.                   </div>
  144.                   <div class="z-auto">
  145.                     <div class="">
  146.                       <p class="text-base font-semibold pb-4">Select Time:</p>
  147.                       <vue-timepicker></vue-timepicker>
  148.                       <p>to</p>
  149.                       <vue-timepicker></vue-timepicker>
  150.                     </div>
  151.                   </div>
  152.                 </div>
  153.               </div> -->
  154.             </div>
  155.           </div>
  156.         </div>
  157.         <div class="tab mb-4" v-bind:class="{ disableInfoTab: isInfoDisable }">
  158.           <input
  159.             type="radio"
  160.             id="rd2"
  161.             name="rd"
  162.             v-on:click="handleCloseButton2"
  163.           />
  164.           <label class="tab-label font-bold" for="rd2">Your Information</label>
  165.           <div class="tab-content">
  166.             <div
  167.               class="
  168.                 fix-input-width
  169.                 container
  170.                 border border-gray-800
  171.                 p-4
  172.                 rounded-md
  173.               "
  174.             >
  175.               <ValidationObserver ref="loginForm">
  176.                 <form class="w-full" method="post" v-on:submit.prevent>
  177.                   <div class="flex flex-col">
  178.                     <div
  179.                       class="
  180.                         flex flex-col
  181.                         md:flex-row
  182.                         w-full
  183.                         justify-evenly
  184.                         items-center
  185.                       "
  186.                     >
  187.                       <label
  188.                         for="fname"
  189.                         class="text-base font-medium text-gray-900 block mb-4"
  190.                         >Organization/Company Name
  191.                         <ValidationProvider v-slot="v" rules="">
  192.                           <input
  193.                             type="text"
  194.                             id="formData.companyName"
  195.                             name="Organization/Company Name"
  196.                             class="
  197.                               bg-gray-50
  198.                               border border-gray-300
  199.                               text-gray-900
  200.                               sm:text-sm
  201.                               rounded-lg
  202.                               block
  203.                               p-2.5
  204.                             "
  205.                             v-model="formData.companyName"
  206.                             placeholder="Enter company name"
  207.                           />
  208.                           <span class="text-sm font-semibold text-red-600">{{
  209.                             v.errors[0]
  210.                           }}</span>
  211.                         </ValidationProvider>
  212.                       </label>
  213.                       <label
  214.                         for="lname"
  215.                         class="text-base font-medium text-gray-900 block mb-4"
  216.                         >Contact Person
  217.                         <ValidationProvider
  218.                           v-slot="v"
  219.                           :rules="{
  220.                             regex:
  221.                               /^[A-Z]?[a-z][a-z]+\s?[A-Z]?[a-z][a-z]+\s?[A-Z]?[a-z][a-z]+$/,
  222.                           }"
  223.                         >
  224.                           <input
  225.                             type="text"
  226.                             id="formData.contactPersonName"
  227.                             name="Contact Person"
  228.                             class="
  229.                               bg-gray-50
  230.                               border border-gray-300
  231.                               text-gray-900
  232.                               sm:text-sm
  233.                               rounded-lg
  234.                               block
  235.                               p-2.5
  236.                             "
  237.                             v-model="formData.contactPersonName"
  238.                             required
  239.                             placeholder="Enter person's name"
  240.                           />
  241.                           <span class="text-sm font-semibold text-red-600">{{
  242.                             v.errors[0]
  243.                           }}</span>
  244.                         </ValidationProvider>
  245.                       </label>
  246.                     </div>
  247.                     <div
  248.                       class="
  249.                         flex flex-col
  250.                         md:flex-row
  251.                         w-full
  252.                         justify-evenly
  253.                         items-center
  254.                       "
  255.                     >
  256.                       <label
  257.                         for="email"
  258.                         class="text-base font-medium text-gray-900 block mb-4"
  259.                         >Email
  260.                         <ValidationProvider
  261.                           v-slot="v"
  262.                           :rules="{
  263.                             regex: /^[a-z0-9._-]+@[a-z0-9.-]+\.[a-z]{2,6}$/,
  264.                           }"
  265.                         >
  266.                           <input
  267.                             type="email"
  268.                             id="formData.contactEmail"
  269.                             name="Email"
  270.                             class="
  271.                               bg-gray-50
  272.                               border border-gray-300
  273.                               text-gray-900
  274.                               sm:text-sm
  275.                               rounded-lg
  276.                               block
  277.                               p-2.5
  278.                             "
  279.                             v-model="formData.contactEmail"
  280.                             required
  281.                             placeholder="Enter Email"
  282.                           />
  283.                           <span class="text-sm font-semibold text-red-600">{{
  284.                             v.errors[0]
  285.                           }}</span>
  286.                         </ValidationProvider>
  287.                       </label>
  288.                       <label
  289.                         for="mobile"
  290.                         class="text-base font-medium text-gray-900 block mb-4"
  291.                         >Phone Number
  292.                         <ValidationProvider
  293.                           v-slot="v"
  294.                           :rules="{
  295.                             regex: /^\(?(\d{3})\)?[- ]?(\d{3})[- ]?(\d{4})$/,
  296.                           }"
  297.                         >
  298.                           <div class="relative phone-number-fix">
  299.                             <input
  300.                               type="text"
  301.                               min="0"
  302.                               id="formData.phoneNumber"
  303.                               pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
  304.                               name="Phone Number"
  305.                               class="
  306.                                 bg-gray-50
  307.                                 border border-gray-300
  308.                                 text-gray-900
  309.                                 sm:text-sm
  310.                                 rounded-lg
  311.                                 block
  312.                                 p-2.5
  313.                                 pl-12
  314.                               "
  315.                               v-model="formData.phoneNumber"
  316.                               required
  317.                               placeholder="Enter Phone Number"
  318.                             />
  319.                             <!-- <input
  320.                             type="tel"
  321.                             id="formData.phoneNumber"
  322.                             pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
  323.                             maxlength="10"
  324.                             name="Phone Number"
  325.                             class="
  326.                               bg-gray-50
  327.                               border border-gray-300
  328.                               text-gray-900
  329.                               sm:text-sm
  330.                               rounded-lg
  331.                               block
  332.                               p-2.5
  333.                               pl-12
  334.                             "
  335.                             v-model="formData.phoneNumber"
  336.                             required
  337.                             placeholder="Enter Phone Number"
  338.                           /> -->
  339.                             <div
  340.                               class="
  341.                                 absolute
  342.                                 inset-y-0
  343.                                 flex
  344.                                 items-center
  345.                                 ml-3
  346.                                 pointer-events-none
  347.                               "
  348.                             >
  349.                               +61
  350.                             </div>
  351.                           </div>
  352.                           <!-- <label
  353.                         for="mobile"
  354.                         class="text-base font-medium text-gray-900 block mb-4"
  355.                         >Phone Number
  356.                         <ValidationProvider
  357.                           v-slot="v"
  358.                           :rules="{
  359.                             regex: /^\(?(\d{3})\)?[- ]?(\d{3})[- ]?(\d{4})$/,
  360.                           }"
  361.                         > -->
  362.                           <!-- <input
  363.                             type="tel"
  364.                             id="formData.phoneNumber"
  365.                             name="Phone Number"
  366.                             class="
  367.                               bg-gray-50
  368.                               border border-gray-300
  369.                               text-gray-900
  370.                               sm:text-sm
  371.                               rounded-lg
  372.                               block
  373.                               p-2.5
  374.                             "
  375.                             v-model="formData.phoneNumber"
  376.                             required
  377.                             placeholder="Enter Phone Number"
  378.                           /> -->
  379.                           <span class="text-sm font-semibold text-red-600">{{
  380.                             v.errors[0]
  381.                           }}</span>
  382.                         </ValidationProvider>
  383.                       </label>
  384.                     </div>
  385.                     <div
  386.                       class="
  387.                         flex flex-col
  388.                         md:flex-row
  389.                         w-full
  390.                         justify-evenly
  391.                         items-center
  392.                       "
  393.                     >
  394.                       <label
  395.                         for="email"
  396.                         class="text-base font-medium text-gray-900 block mb-4"
  397.                         >Expected Attendance
  398.                         <ValidationProvider v-slot="v" rules="">
  399.                           <input
  400.                             min="0"
  401.                             type="number"
  402.                             id="formData.expectedAttendance"
  403.                             name="Attendance"
  404.                             class="
  405.                               bg-gray-50
  406.                               border border-gray-300
  407.                               text-gray-900
  408.                               sm:text-sm
  409.                               rounded-lg
  410.                               block
  411.                               p-2.5
  412.                             "
  413.                             v-model="formData.expectedAttendance"
  414.                             placeholder="Enter expected attendance"
  415.                           />
  416.                           <span class="text-sm font-semibold text-red-600">{{
  417.                             v.errors[0]
  418.                           }}</span>
  419.                         </ValidationProvider>
  420.                       </label>
  421.  
  422.                       <label
  423.                         for="mobile"
  424.                         class="text-base font-medium text-gray-900 block mb-4"
  425.                         >Activity (Booking for)
  426.                         <ValidationProvider v-slot="v" rules="required">
  427.                           <textarea
  428.                             type="tel"
  429.                             id="formData.activityDetail"
  430.                             name="Activity"
  431.                             class="
  432.                               bg-gray-50
  433.                               border border-gray-300
  434.                               text-gray-900
  435.                               sm:text-sm
  436.                               rounded-lg
  437.                               block
  438.                               p-2.5
  439.                             "
  440.                             v-model="formData.activityDetail"
  441.                             required
  442.                             placeholder="Enter activity details briefly"
  443.                           />
  444.                           <span class="text-sm font-semibold text-red-600">{{
  445.                             v.errors[0]
  446.                           }}</span>
  447.                         </ValidationProvider>
  448.                       </label>
  449.                     </div>
  450.                   </div>
  451.                   <div class="flex items-center justify-center w-full h-20">
  452.                     <button
  453.                       type="submit"
  454.                       class="
  455.                         flex
  456.                         items-center
  457.                         justify-between
  458.                         px-6
  459.                         py-4
  460.                         text-md
  461.                         font-medium
  462.                         leading-5
  463.                         text-black
  464.                         transition-colors
  465.                         duration-150
  466.                         bg-white
  467.                         border-2
  468.                         rounded-full
  469.                         active:bg-blue-900
  470.                         hover:text-white
  471.                         focus:outline-none focus:shadow-outline-blue
  472.                       "
  473.                       v-on:click="handleNextButton"
  474.                     >
  475.                       Next
  476.                     </button>
  477.                   </div>
  478.                 </form>
  479.               </ValidationObserver>
  480.             </div>
  481.           </div>
  482.         </div>
  483.         <div class="tab mb-4" v-bind:class="{ disableInfoTab: isInfoDisable }">
  484.           <input
  485.             type="radio"
  486.             id="rd3"
  487.             name="rd"
  488.             v-on:click="handleCloseButton3"
  489.           />
  490.           <label class="tab-label font-bold" for="rd3">Epuipments</label>
  491.           <div class="tab-content">
  492.             <div
  493.               class="
  494.                 fix-input-width
  495.                 container
  496.                 border border-gray-800
  497.                 p-4
  498.                 rounded-md
  499.               "
  500.             >
  501.               <table class="table w-full">
  502.                 <thead>
  503.                   <tr>
  504.                     <th class="text-center" style="width:3%;"></th>
  505.                     <th class="text-center" style="width:20%;"></th>
  506.                     <th class="text-center" style="width:50%;"></th>
  507.                     <th class="text-center" style="width:27%;"></th>
  508.                   </tr>
  509.                 </thead>
  510.                 <tbody>
  511.                   <tr>
  512.                     <td class="text-right" style="">
  513.                       <input @click='checkExtra()' type="checkbox" class="form-checkbox h-4 w-4 text-gray-600 check-checked-input" checked><span class="ml-2 text-gray-700"></span>
  514.                     </td>
  515.                     <td class="text-center">
  516.                       Speaker
  517.                     </td>
  518.                     <td class="text-center">
  519.                       <p class="qty">
  520.                         <button @click="decreaseCount()" class="qtyminus" aria-hidden="true">−</button>
  521.                         <input  type="number" name="qty[]" id="qty1" min="1" max="10" step="1" value="1" style="width:3rem;">
  522.                         <button @click="increaseCount()" class="qtyplus" aria-hidden="true">&plus;</button>
  523.                       </p>
  524.                     </td>
  525.                     <td>$ 40</td>
  526.                   </tr>
  527.                   <tr>
  528.                     <td class="text-right" style="">
  529.                       <input type="checkbox" class="form-checkbox h-4 w-4 text-gray-600 check-checked-input" checked><span class="ml-2 text-gray-700"></span>
  530.                     </td>
  531.                     <td class="text-center">
  532.                       Mic
  533.                     </td>
  534.                     <td class="text-center">
  535.                       <p class="qty">
  536.                         <button @click="decreaseCount()" class="qtyminus" aria-hidden="true">−</button>
  537.                         <input type="number" name="qty[]" id="qty" min="1" max="10" step="1" value="1" style="width:3rem;">
  538.                         <button @click="increaseCount()" class="qtyplus" aria-hidden="true">&plus;</button>
  539.                       </p>
  540.                     </td>
  541.                     <td>$ 40</td>
  542.                   </tr>
  543.                   <tr>
  544.                     <td class="text-right" style="">
  545.                       <input type="checkbox" class="form-checkbox h-4 w-4 text-gray-600 check-checked-input" checked><span class="ml-2 text-gray-700"></span>
  546.                     </td>
  547.                     <td class="text-center">
  548.                       Cake
  549.                     </td>
  550.                     <td class="text-center">
  551.                       <p class="qty">
  552.                         <button @click="decreaseCount()" class="qtyminus" aria-hidden="true">−</button>
  553.                         <input type="number" name="qty[]" id="qty" min="1" max="10" step="1" value="1" style="width:3rem;">
  554.                         <button @click="increaseCount()" class="qtyplus" aria-hidden="true">&plus;</button>
  555.                       </p>
  556.                     </td>
  557.                     <td>$ 40</td>
  558.                   </tr>
  559.                 </tbody>
  560.               </table>
  561.             <div class="flex items-center justify-center w-full h-16">
  562.               <button
  563.                 type="submit"
  564.                 class="
  565.                   flex
  566.                   items-center
  567.                   justify-between
  568.                   px-6
  569.                   py-4
  570.                   text-md
  571.                   font-medium
  572.                   leading-5
  573.                   text-black
  574.                   transition-colors
  575.                   duration-150
  576.                   bg-white
  577.                   border-2
  578.                   rounded-full
  579.                   active:bg-blue-900
  580.                   hover:text-white
  581.                   focus:outline-none focus:shadow-outline-blue
  582.                 "
  583.                 v-on:click="handleExtraNextButton"
  584.               >
  585.                 Next
  586.               </button>
  587.             </div>
  588.             </div>
  589.           </div>
  590.         </div>
  591.         <div class="tab mb-4" v-bind:class="{ disableClick: isDisable }">
  592.           <input
  593.             type="radio"
  594.             id="rd4"
  595.             name="rd"
  596.             v-on:click="handleCloseButton4"
  597.           />
  598.           <label class="tab-label font-bold" for="rd4">Confirm Booking</label>
  599.           <div class="tab-content">
  600.             <div
  601.               class="
  602.                 fix-input-width
  603.                 container
  604.                 border border-gray-800
  605.                 p-4
  606.                 rounded-md
  607.               "
  608.             >
  609.               <div class="flex flex-col tracking-wider">
  610.                 <div class="grid grid-cols-2 md:gap-x-32 my-4">
  611.                   <div class="md:pl-64"><p>Booking Date & Time :</p></div>
  612.                   <div class="font-semibold flex flex-col md:flex-row">
  613.                     <p class="pr-4">{{ formData.bookingDate }}</p>
  614.                     <p>{{ formData.bookingTime }}</p>
  615.                   </div>
  616.                 </div>
  617.                 <div class="grid grid-cols-2 md:gap-x-32 my-4">
  618.                   <div class="md:pl-64"><p>Organization/Company Name :</p></div>
  619.                   <div class="font-semibold">
  620.                     <p>{{ formData.companyName }}</p>
  621.                   </div>
  622.                 </div>
  623.                 <div class="grid grid-cols-2 md:gap-x-32 my-4">
  624.                   <div class="md:pl-64"><p>Contact Person :</p></div>
  625.                   <div class="font-semibold">
  626.                     <p>{{ formData.contactPersonName }}</p>
  627.                   </div>
  628.                 </div>
  629.                 <div class="grid grid-cols-2 md:gap-x-32 my-4">
  630.                   <div class="md:pl-64"><p>Email :</p></div>
  631.                   <div class="font-semibold">
  632.                     <p>{{ formData.contactEmail }}</p>
  633.                   </div>
  634.                 </div>
  635.                 <div class="grid grid-cols-2 md:gap-x-32 my-4">
  636.                   <div class="md:pl-64"><p>Phone Number :</p></div>
  637.                   <div class="font-semibold">
  638.                     <p>+61 {{ formData.phoneNumber }}</p>
  639.                   </div>
  640.                 </div>
  641.                 <div class="grid grid-cols-2 md:gap-x-32 my-4">
  642.                   <div class="md:pl-64"><p>Expected Attendance :</p></div>
  643.                   <div class="font-semibold">
  644.                     <p>{{ formData.expectedAttendance }}</p>
  645.                   </div>
  646.                 </div>
  647.                 <div class="grid grid-cols-2 md:gap-x-32 my-4">
  648.                   <div class="md:pl-64"><p>Activity :</p></div>
  649.                   <div class="">
  650.                     <p class="font-semibold" id="activityPara">
  651.                       {{ formData.activityDetail }}
  652.                     </p>
  653.                   </div>
  654.                 </div>
  655.                 <!-- <div class="grid grid-cols-2 md:gap-x-32 my-4">
  656.                   <div class="md:pl-64"><p>Select Hall :</p></div>
  657.  
  658.                 </div> -->
  659.               </div>
  660.  
  661.               <div class="flex items-center justify-center w-full h-20 mt-4">
  662.                 <button
  663.                   class="
  664.                     flex
  665.                     items-center
  666.                     justify-between
  667.                     px-6
  668.                     py-4
  669.                     text-md
  670.                     font-medium
  671.                     leading-5
  672.                     text-black
  673.                     transition-colors
  674.                     duration-150
  675.                     bg-white
  676.                     border-2
  677.                     rounded-full
  678.                     active:bg-blue-900
  679.                     hover:text-white
  680.                     focus:outline-none focus:shadow-outline-blue
  681.                   "
  682.                   v-on:click="handleConfirmBtn"
  683.                 >
  684.                   <span class="pr-1">Confirm</span>
  685.                 </button>
  686.               </div>
  687.               <!-- </form> -->
  688.             </div>
  689.           </div>
  690.         </div>
  691.         <div class="tab">
  692.           <input type="radio" id="rd5" name="rd" />
  693.           <label for="rd5" class="tab-close"></label>
  694.         </div>
  695.       </div>
  696.     </div>
  697.   </div>
  698. </template>
  699.  
  700. <script>
  701. import VueCal from "vue-cal";
  702. import Vue from "vue";
  703. import "vue-cal/dist/vuecal.css";
  704. // import { ValidationProvider } from 'vee-validate';
  705. import { ValidationObserver } from "vee-validate";
  706. import { ValidationProvider } from "vee-validate/dist/vee-validate.full.esm";
  707. import { regex } from "vee-validate/dist/rules";
  708. import { extend } from "vee-validate";
  709.  
  710. extend("regex", regex);
  711. Vue.component("ValidationProvider", ValidationProvider);
  712. Vue.component("ValidationObserver", ValidationObserver);
  713.  
  714. extend("password", {
  715.   message:
  716.     "{_field_} must be at least 8 characters, contain One Uppercase, One lowercase, One Special character i.e (! @ # $ % ^ & *), One number.",
  717.   validate: (value) => {
  718.     const strong_password = new RegExp(
  719.       "^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})"
  720.     ); // regex to check our strong password
  721.  
  722.     return strong_password.test(value); //Test the regex. Test function returns a true or false value.
  723.   },
  724. });
  725.  
  726. export default {
  727.   components: { VueCal },
  728.   data() {
  729.     return {
  730.       bookedevent: null,
  731.       events: [],
  732.       newEvents: [],
  733.       specialHours: null,
  734.       recordCalenderClick1: 1,
  735.       recordCalenderClick2: 1,
  736.       recordCalenderClick3: 1,
  737.       recordCalenderClick4: 1,
  738.       selectedEvent: null,
  739.       extras:[],
  740.  
  741.       formData: {
  742.         companyName: "",
  743.         contactPersonName: "",
  744.         contactEmail: "",
  745.         phoneNumber: "",
  746.         expectedAttendance: "",
  747.         activityDetail: "",
  748.         bookingTime: "",
  749.         bookingDate: "",
  750.         listOfRooms: "",
  751.         output: "",
  752.         selectedDay: "",
  753.         selectedFromTime: "",
  754.         selectedToTime: "",
  755.         Time: "",
  756.         checkedCheckbox: [],
  757.       },
  758.  
  759.       listOfRooms: [
  760.         { value: "", label: "Select Hall" },
  761.         { value: "1", label: "Hall 1" },
  762.         { value: "2", label: "Hall 2" },
  763.       ],
  764.  
  765.       rightLogo: "assets/images/right.png",
  766.       isConfirmed: true,
  767.       isShowingAccordian: false,
  768.       isDisable: true,
  769.       isInfoDisable: true,
  770.       isDateDisable: true,
  771.       changedValue: 0,
  772.     };
  773.   },
  774.  
  775.   mounted(){
  776.     // this.extras = this.$store.getters.getCurrentExtra;
  777.   },
  778.  
  779.   methods: {
  780.     increaseCount() {
  781.       let quantityValue = document.querySelector("#qty").value;
  782.       this.changedValue = Number(quantityValue) + 1;
  783.       document.getElementById("qty").value = this.changedValue;
  784.     },
  785.  
  786.     decreaseCount() {
  787.       let quantityValue = document.querySelector("#qty").value;
  788.       this.changedValue = Number(quantityValue) - 1;
  789.       document.getElementById("qty").value = this.changedValue;
  790.     },
  791.  
  792.     deleteEvents() {
  793.       if (this.newEvents.length === 1) {
  794.         this.events.pop();
  795.       }
  796.       this.newEvents.pop();
  797.     },
  798.     getCalenderData(e) {
  799.       let selectedRooms = this.formData.listOfRooms;
  800.       let currentObj = this;
  801.       (currentObj.events.length = 0),
  802.         (currentObj.newEvents.length = 0),
  803.         this.axios
  804.           .get("api/get-calendar?selectedRooms=" + selectedRooms)
  805.           .then(function (response) {
  806.             currentObj.bookedevent = response.data.bookedDate;
  807.  
  808.             (currentObj.specialHours = {
  809.               1: {
  810.                 from:
  811.                   parseInt(response.data.selectedRooms[0]["timing_from"]) * 60,
  812.                 to: parseInt(response.data.selectedRooms[0]["timing_to"]) * 60,
  813.                 class: "business-hours",
  814.               },
  815.               2: {
  816.                 from:
  817.                   parseInt(response.data.selectedRooms[1]["timing_from"]) * 60,
  818.                 to: parseInt(response.data.selectedRooms[1]["timing_to"]) * 60,
  819.                 class: "business-hours",
  820.               },
  821.               3: {
  822.                 from:
  823.                   parseInt(response.data.selectedRooms[2]["timing_from"]) * 60,
  824.                 to: parseInt(response.data.selectedRooms[2]["timing_to"]) * 60,
  825.                 class: "business-hours",
  826.               },
  827.               4: {
  828.                 from:
  829.                   parseInt(response.data.selectedRooms[4]["timing_from"]) * 60,
  830.                 to: parseInt(response.data.selectedRooms[3]["timing_to"]) * 60,
  831.                 class: "business-hours",
  832.               },
  833.               5: {
  834.                 from:
  835.                   parseInt(response.data.selectedRooms[4]["timing_from"]) * 60,
  836.                 to: parseInt(response.data.selectedRooms[4]["timing_to"]) * 60,
  837.                 class: "business-hours",
  838.               },
  839.             }),
  840.               response.data.bookedDate.forEach(function (number) {
  841.                 currentObj.events.push({
  842.                   start: number.from_time,
  843.                   end: number.to_time,
  844.                   title: "Booked event",
  845.                   content: null,
  846.                   class: "red-event",
  847.                   deletable: false,
  848.                   resizable: false,
  849.                   draggable: false,
  850.                 });
  851.               });
  852.           })
  853.           .catch(function (error) {
  854.             currentObj.output = error;
  855.           });
  856.       this.isDateDisable = false;
  857.     },
  858.  
  859.     handleCloseButton1(e) {
  860.       this.recordCalenderClick1 = this.recordCalenderClick1 + 1;
  861.       if (this.recordCalenderClick1 == 2) {
  862.         document.getElementById("rd1").checked = true;
  863.         this.recordCalenderClick2 = 1;
  864.         this.recordCalenderClick3 = 1;
  865.         this.recordCalenderClick4 = 1;
  866.       } else {
  867.         document.getElementById("rd1").checked = false;
  868.         this.recordCalenderClick1 = 1;
  869.       }
  870.     },
  871.  
  872.     handleCloseButton2(e) {
  873.       this.recordCalenderClick2 = this.recordCalenderClick2 + 1;
  874.       if (this.recordCalenderClick2 == 2) {
  875.         document.getElementById("rd2").checked = true;
  876.         this.recordCalenderClick1 = 1;
  877.         this.recordCalenderClick3 = 1;
  878.         this.recordCalenderClick4 = 1;
  879.       } else {
  880.         document.getElementById("rd2").checked = false;
  881.         this.recordCalenderClick2 = 1;
  882.       }
  883.     },
  884.  
  885.     handleCloseButton3(e) {
  886.       this.recordCalenderClick3 = this.recordCalenderClick3 + 1;
  887.       if (this.recordCalenderClick3 == 2) {
  888.         document.getElementById("rd3").checked = true;
  889.         this.recordCalenderClick2 = 1;
  890.         this.recordCalenderClick1 = 1;
  891.         this.recordCalenderClick4 = 1;
  892.       } else {
  893.         document.getElementById("rd3").checked = false;
  894.         this.recordCalenderClick3 = 1;
  895.       }
  896.     },
  897.     handleCloseButton4(e) {
  898.       this.recordCalenderClick4 = this.recordCalenderClick4 + 1;
  899.       if (this.recordCalenderClick4 == 2) {
  900.         document.getElementById("rd4").checked = true;
  901.         this.recordCalenderClick2 = 1;
  902.         this.recordCalenderClick1 = 1;
  903.         this.recordCalenderClick3 = 1;
  904.       } else {
  905.         document.getElementById("rd4").checked = false;
  906.         this.recordCalenderClick4 = 1;
  907.       }
  908.     },
  909.  
  910.     handleExtraNextButton(){
  911.       let checkboxInputs = document.getElementsByClassName("check-checked-input");
  912.       console.log(checkboxInputs)
  913.       for (let checkboxInput of checkboxInputs) {
  914.         if (checkboxInput.checked){
  915.           // checkedCheckbox.push(checkboxInput)
  916.           console.log(checkboxInput)
  917.         } 
  918.       }
  919.       // console.log(this.checkedCheckbox)
  920.     },
  921.  
  922.     handleCalenderSubmit() {
  923.       var enddate = new Date(this.selectedEvent.end);
  924.       var bookedDate =
  925.         enddate.getFullYear() +
  926.         "-" +
  927.         (enddate.getMonth() + 1) +
  928.         "-" +
  929.         enddate.getDate() +
  930.         " " +
  931.         enddate.getHours() +
  932.         ":00";
  933.  
  934.       //  this.bookedevent.forEach((number) => {
  935.       //     if(bookedDate > number.from_time){
  936.       //       alert("This events already booked..!");
  937.       //       this.deleteEvents();
  938.       //     }
  939.       //   });
  940.  
  941.       if (this.selectedEvent) {
  942.         if (
  943.           this.selectedEvent.startTimeMinutes <
  944.             this.specialHours[this.selectedEvent.start.getDay()].from ||
  945.           this.selectedEvent.endTimeMinutes >
  946.             this.specialHours[this.selectedEvent.start.getDay()].to
  947.         ) {
  948.           alert(
  949.             `Please create events within business hours(09:00am to 07:00pm)`
  950.           );
  951.           this.deleteEvents();
  952.         } else {
  953.           if (
  954.             this.selectedEvent.endTimeMinutes -
  955.               this.selectedEvent.startTimeMinutes <
  956.             60
  957.           ) {
  958.             alert("Time period less than 1 hour is not allowed");
  959.           } else {
  960.             var startdate = new Date(this.selectedEvent.start);
  961.             var enddate = new Date(this.selectedEvent.end);
  962.             var fromDate = this.getDateFunction(startdate);
  963.             var selectedDayInput = this.getSelectedDay(startdate);
  964.             var toDate = this.getDateFunction(enddate);
  965.             var fromTime = this.getTimeFunction(startdate);
  966.             var toTime = this.getTimeFunction(enddate);
  967.             this.formData.bookingTime = fromTime + " to " + toTime;
  968.             this.formData.bookingDate =
  969.               fromDate == toDate ? fromDate : fromDate + " to " + toDate;
  970.             this.formData.selectedDay = selectedDayInput;
  971.             this.formData.selectedFromTime =
  972.               startdate.getFullYear() +
  973.               "-" +
  974.               (startdate.getMonth() + 1) +
  975.               "-" +
  976.               startdate.getDate() +
  977.               " " +
  978.               startdate.getHours() +
  979.               ":00";
  980.             this.formData.selectedToTime =
  981.               enddate.getFullYear() +
  982.               "-" +
  983.               (enddate.getMonth() + 1) +
  984.               "-" +
  985.               enddate.getDate() +
  986.               " " +
  987.               enddate.getHours() +
  988.               ":00";
  989.             this.formData.Time =
  990.               startdate.getFullYear() +
  991.               "-" +
  992.               (startdate.getMonth() + 1) +
  993.               "-" +
  994.               startdate.getDate();
  995.             this.isInfoDisable = false;
  996.             document.getElementById("rd2").checked = true;
  997.           }
  998.           //'2022-01-11 14:00
  999.         }
  1000.       } else {
  1001.         alert("Please create one event!");
  1002.       }
  1003.     },
  1004.  
  1005.     onEventCreate($event, deleteEventFunction) {
  1006.       if (
  1007.         $event.startTimeMinutes <
  1008.           this.specialHours[$event.start.getDay()].from ||
  1009.         $event.endTimeMinutes > this.specialHours[$event.start.getDay()].to
  1010.       ) {
  1011.         alert(`Please create events within business hours(09:00am to 07:00pm)`);
  1012.         return false;
  1013.       }
  1014.       this.deleteEvents();
  1015.       this.selectedEvent = $event;
  1016.       this.events.push($event);
  1017.       this.newEvents.push($event);
  1018.       return $event;
  1019.     },
  1020.  
  1021.     onEventChange(events, $event) {
  1022.       this.selectedEvent = $event.event;
  1023.       var enddate = new Date(this.selectedEvent.end);
  1024.       var bookedDate =
  1025.         enddate.getFullYear() +
  1026.         "-" +
  1027.         (enddate.getMonth() + 1) +
  1028.         "-" +
  1029.         enddate.getDate() +
  1030.         " " +
  1031.         enddate.getHours() +
  1032.         ":00";
  1033.       if (
  1034.         $event.event.startTimeMinutes <
  1035.           this.specialHours[$event.event.start.getDay()].from ||
  1036.         $event.event.endTimeMinutes >
  1037.           this.specialHours[$event.event.start.getDay()].to
  1038.       ) {
  1039.         alert("Please create events within business hours(09:00am to 07:00pm)");
  1040.         this.events[0] = this.selectedEvent;
  1041.         return this.selectedEvent;
  1042.       } else {
  1043.         // console.log(bookedDate)
  1044.         //  this.bookedevent.forEach((number) => {
  1045.         //     console.log(number.time)
  1046.         //     if(bookedDate >=  number.from_time){
  1047.         //       alert("This events already booked..!");
  1048.         //       this.deleteEvents();
  1049.         //     }
  1050.         // });
  1051.       }
  1052.  
  1053.       return $event.event;
  1054.     },
  1055.  
  1056.     // || ($event.event.endTimeMinutes - $event.event.startTimeMinutes) >= 60
  1057.  
  1058.     getSelectedDay(date) {
  1059.       var day = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"];
  1060.       return day[date.getDay() - 1];
  1061.     },
  1062.  
  1063.     getDateFunction(date) {
  1064.       var month = [
  1065.         "January",
  1066.         "February",
  1067.         "March",
  1068.         "April",
  1069.         "May",
  1070.         "June",
  1071.         "July",
  1072.         "August",
  1073.         "September",
  1074.         "October",
  1075.         "November",
  1076.         "December",
  1077.       ];
  1078.       var day = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"];
  1079.       var formatedDate =
  1080.         date.getDate() +
  1081.         "th" +
  1082.         " " +
  1083.         month[date.getMonth()] +
  1084.         " " +
  1085.         date.getFullYear();
  1086.       return formatedDate;
  1087.     },
  1088.  
  1089.     getTimeFunction(date) {
  1090.       var hours = date.getHours();
  1091.       var minutes = date.getMinutes();
  1092.       var ampm = hours >= 12 ? "pm" : "am";
  1093.       hours = hours % 12;
  1094.       hours = hours ? hours : 12; // the hour '0' should be '12'
  1095.       minutes = minutes < 10 ? "0" + minutes : minutes;
  1096.       var formatedTime = hours + ":" + minutes + "" + ampm;
  1097.       return formatedTime;
  1098.     },
  1099.     is(value) {
  1100.       return value ? true : "This field is ";
  1101.     },
  1102.     async handleNextButton(e) {
  1103.       e.preventDefault();
  1104.       const isValid = await this.$refs.loginForm.validate();
  1105.       var formValid = isValid;
  1106.       if (isValid) {
  1107.         this.formData.phoneNumber = this.formData.phoneNumber;
  1108.         // this.formData.phoneNumber = "+61" + this.formData.phoneNumber;
  1109.         this.isDisable = false;
  1110.         document.getElementById("rd3").checked = true;
  1111.       }
  1112.     },
  1113.  
  1114.     handleConfirmBtn() {
  1115.       if (this.formData.listOfRooms == "") {
  1116.         alert("Please select Hall");
  1117.       } else {
  1118.         let currentObj = this;
  1119.         this.axios
  1120.           .post("api/hallbookingemail", {
  1121.             data: this.formData,
  1122.           })
  1123.           .then(function (response) {
  1124.             currentObj.output = response.data;
  1125.           })
  1126.           .catch(function (error) {
  1127.             currentObj.output = error;
  1128.           });
  1129.         document.getElementById("rd4").checked = true;
  1130.         currentObj.isConfirmed = false;
  1131.         currentObj.isShowingAccordian = true;
  1132.       }
  1133.     },
  1134.   },
  1135. };
  1136. </script>
  1137.  
  1138. <style>
  1139. /* @import "vue2-timepicker/dist/VueTimepicker.css"; */
  1140.  
  1141. /* Quantity selector UI */
  1142.  
  1143.  
  1144. .qty button {
  1145.   padding: 0;
  1146.   margin: 0;
  1147.   border-style: none;
  1148.   touch-action: manipulation;
  1149.   display: inline-block;
  1150.   border: none;
  1151.   background: none;
  1152.   cursor: pointer;
  1153. }
  1154.  
  1155. /* End Reset for the demo */
  1156. /* Sass Config */
  1157. /* Contrast : 7.2:1 */
  1158. /* End Sass Config */
  1159. .qty {
  1160.   display: flex;
  1161.   flex-wrap: wrap;
  1162.   justify-content: center;
  1163.   text-align: center;
  1164. }
  1165. .qty label {
  1166.   flex: 1 0 100%;
  1167. }
  1168. .qty input {
  1169.   height: 3rem;
  1170.   font-size: 1.3rem;
  1171.   text-align: center;
  1172.   border: 1px solid #575757;
  1173. }
  1174. .qty button {
  1175.   text-align: center;
  1176.   width: 2rem;
  1177.   height: 3rem;
  1178.   color: #fff;
  1179.   font-size: 2rem;
  1180.   background: #575757;
  1181. }
  1182. .qty button.qtyminus {
  1183.   margin-right: 0.3rem;
  1184. }
  1185. .qty button.qtyplus {
  1186.   margin-left: 0.3rem;
  1187. }
  1188.  
  1189.  
  1190. input[type="number"]::-webkit-inner-spin-button,
  1191. input[type="number"]::-webkit-outer-spin-button {
  1192.   -webkit-appearance: none;
  1193.   margin: 0;
  1194. }
  1195.  
  1196. .custom-number-input input:focus {
  1197.   outline: none !important;
  1198. }
  1199.  
  1200. .custom-number-input button:focus {
  1201.   outline: none !important;
  1202. }
  1203.  
  1204. .blue-event {
  1205.   background-color: rgba(145, 175, 76, 0.35);
  1206. }
  1207.  
  1208. .red-event {
  1209.   background-color: rgba(175, 79, 76, 0.35);
  1210. }
  1211.  
  1212. .business-hours {
  1213.   background-color: rgba(255, 255, 0, 0.2);
  1214.   border: solid rgba(255, 210, 0, 0.6);
  1215.   border-width: 2px 0;
  1216. }
  1217.  
  1218. .fix-input-width {
  1219.   /* min-height: 100vh; */
  1220. }
  1221.  
  1222. .fix-input-width input,
  1223. .fix-input-width textarea,
  1224. .fix-input-width select {
  1225.   width: 30vw;
  1226. }
  1227.  
  1228. .fix-input-width input:hover,
  1229. .fix-input-width textarea:hover,
  1230. .fix-input-width select:hover {
  1231.   outline-color: #2c3e50;
  1232. }
  1233. .fix-input-width input:focus,
  1234. .fix-input-width textarea:focus,
  1235. .fix-input-width select:focus {
  1236.   outline-color: #2c3e50;
  1237. }
  1238.  
  1239. @media only screen and (max-width: 750px) {
  1240.   .fix-input-width input,
  1241.   .fix-input-width textarea,
  1242.   .fix-input-width select {
  1243.     width: 80vw;
  1244.   }
  1245. }
  1246.  
  1247. @media only screen and (min-width: 2000px) {
  1248.   .fix-input-width input,
  1249.   .fix-input-width textarea,
  1250.   .fix-input-width select {
  1251.     width: 20vw;
  1252.   }
  1253. }
  1254. @media only screen and (min-width: 3000px) {
  1255.   .fix-input-width input,
  1256.   .fix-input-width textarea,
  1257.   .fix-input-width select {
  1258.     width: 10vw;
  1259.   }
  1260. }
  1261.  
  1262. input[type="radio"] {
  1263.   position: absolute;
  1264.   opacity: 0;
  1265.   z-index: -1;
  1266. }
  1267.  
  1268. .row {
  1269.   display: flex;
  1270. }
  1271. .row .col {
  1272.   flex: 1;
  1273. }
  1274. .row .col:last-child {
  1275.   margin-left: 1em;
  1276. }
  1277.  
  1278. /* Accordion styles */
  1279. .tabs {
  1280.   border-radius: 8px;
  1281.   overflow: hidden;
  1282.   box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.5);
  1283. }
  1284.  
  1285. .tab {
  1286.   width: 100%;
  1287.   color: white;
  1288.   overflow: hidden;
  1289. }
  1290. .tab-label {
  1291.   display: flex;
  1292.   justify-content: space-between;
  1293.   padding: 1em;
  1294.   background: #2c3e50;
  1295.   /* font-weight: bold; */
  1296.   cursor: pointer;
  1297.   /* Icon */
  1298. }
  1299. .tab-label:hover {
  1300.   background: #1a252f;
  1301. }
  1302. .tab-label::after {
  1303.   content: "❯";
  1304.   width: 1em;
  1305.   height: 1em;
  1306.   text-align: center;
  1307.   transition: all 0.35s;
  1308. }
  1309. .tab-content {
  1310.   max-height: 0;
  1311.   padding: 0 1em;
  1312.   color: #2c3e50;
  1313.   background: white;
  1314.   transition: all 0.35s;
  1315. }
  1316. .tab-close {
  1317.   display: flex;
  1318.   justify-content: flex-end;
  1319.   /* padding: 1em; */
  1320.   font-size: 0.75em;
  1321.   background: white;
  1322.   cursor: pointer;
  1323. }
  1324. .tab-close:hover {
  1325.   background: #1a252f;
  1326. }
  1327.  
  1328. input:checked + .tab-label {
  1329.   background: #1a252f;
  1330. }
  1331. input:checked + .tab-label::after {
  1332.   transform: rotate(90deg);
  1333. }
  1334. input:checked ~ .tab-content {
  1335.   max-height: 100vh;
  1336.   padding: 1em;
  1337. }
  1338. </style>

Editor

You can edit this paste and save as new:


File Description
  • accordion 24-1
  • Paste Code
  • 24 Jan-2022
  • 44.65 Kb
You can Share it: