<div class="spinner" id="preloader">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
<script type="text/javascript">
(function(){
var preload = document.getElementById("preloader");
var loading = 0;
var id = setInterval(frame, 64);
function frame(){
if(loading == 100){
clearInterval(id);
} else {
loading = loading + 1;
if(loading == 90){
preload.style.opacity = "0";
}
}
}
})();
</script>
<style>
.spinner {
position: absolute;
height: 2em;
width: 2em;
overflow: show;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 70px;
text-align: center;
}
.spinner > div {
width: 18px;
height: 18px;
background-color: #36B5CD;
border-radius: 100%;
display: inline-block;
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
.spinner .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.spinner .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
@-webkit-keyframes sk-bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0) }
40% { -webkit-transform: scale(1.0) }
}
@keyframes sk-bouncedelay {
0%, 80%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
} 40% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
}
}
</style>

​

​

ALL in dropdown

​

For the first, just add another value to the list - with label ALL and some value placeholder, for instance '-'

Then in the onChange event do an if, like -

​

export function dropdown1_onChange(event) {

let value = $w('#dropdown1').value;

if (value === '-') // run query without filter

else // run query with filter

}

import wixWindow from 'wix-window';

import {session} from 'wix-storage';

import {autocomplete} from 'backend/gapi';

import {details} from 'backend/gapi';

import {reverse} from 'backend/gapi';

import {

    sendEmail, sendEmailWithRecipient

}

from 'backend/email';

 

$w.onReady(function () {

$w("#dataset1").onAfterSave(sendFormData);

$w("#repeater1").onItemReady( ($w, itemData) => {

         const text1 = $w("#text64");

         text1.text = itemData.text1;

         const text2 = $w("#text65");

         text2.text = itemData.text2;

     });

$w("#repeater3").onItemReady( ($w, itemData) => {

         const text5 = $w("#text70");

         text5.text = itemData.text5;

         const text6 = $w("#text69");

         text6.text = itemData.text6;

     });

     $w("#repeater1").collapse(); // hidden on page load

     $w("#repeater3").collapse(); // hidden on page load

 

     // handle each location detail line

     $w("#repeater2").onItemReady( ($w, itemData) => {

         const text3 = $w("#text66");

         text3.text = itemData.text3;

         const text4 = $w("#text67");

         text4.text = itemData.text4;

    }); 

    $w("#repeater2").hide(); // hidden on page load

    // retrieve saved location (if exists) from local storage

    //let id = session.getItem("place_id");

    //if(id === undefined || id === null || id.length === 0) {

        // if no location saved, find the IP-based geographic location

        //geoloc();

    //}

    //else {

        // if a location was saved in local storage, get the details

        //set_details(id); 

     //}

     

});

export function Destination_keyPress(event, $w) {

    // clear the details display of the old location

    wixWindow.scrollTo(10, 502);

    $w("#repeater2").data = [];

    $w("#repeater2").hide();

    

    if ($w('#Destination').value === "")

        $w('#repeater1').collapse();    

 

    // get the user's latest input

    let val = $w("#Destination").value;

    let key = event.key;

    if(key.length === 1) {

        val += key;

    }

    if(val.length === 0)

        return;

    // use the current value to get a list of location suggestions

    // we call the autocomplete() web module from the backend

    autocomplete(val).then(function(resp) {

    // create an array of suggestions for the repeater

        let predictions = resp.predictions;

        let suggestions = [];

        predictions.forEach(function(prediction) {

            let item = {"_id" : prediction.id, "text1" : prediction.description, "text2" : prediction.place_id};

            suggestions.push(item);

        });

        $w("#repeater1").data = suggestions; // add the suggestions to the repeater

        $w("#repeater1").expand(); // we have data so we can expand the repeater

    });

}

 

export function Origin_keyPress(event, $w) {

    // clear the details display of the old location

    wixWindow.scrollTo(10, 385);

    $w("#repeater2").data = [];

    $w("#repeater2").hide();

    

    if ($w('#Origin').value === "")

        $w('#repeater3').collapse();    

 

    // get the user's latest input

    let val = $w("#Origin").value;

    let key = event.key;

    if(key.length === 1) {

        val += key;

    }

    if(val.length === 0)

        return;

    // use the current value to get a list of location suggestions

    // we call the autocomplete() web module from the backend

    autocomplete(val).then(function(resp) {

    // create an array of suggestions for the repeater

        let predictions = resp.predictions;

        let suggestions = [];

        predictions.forEach(function(prediction) {

            let item = {"_id" : prediction.id, "text5" : prediction.description, "text6" : prediction.place_id};

            suggestions.push(item);

        });

        $w("#repeater3").data = suggestions; // add the suggestions to the repeater

        $w("#repeater3").expand(); // we have data so we can expand the repeater

    });

}

 

// this function is triggered when clicking on a suggestion list repeater item

export function container1_click(event,$w) {

    let place_id = $w("#text65").text;

    set_details(place_id);

    $w("#repeater1").collapse();

}

 

export function container3_click(event, $w) {

    let place_id1 = $w("#text69").text;

    set_details1(place_id1);

    $w("#repeater3").collapse();

}

 

function set_details(val) {

    details(val).then(function(resp) {

        // find the city (locality) and country of the location

        let place = resp.result;

        var filtered_array = place.address_components.filter(function(address_component){

            return address_component.types.includes("country");

        }); 

        var country = filtered_array.length ? filtered_array[0].long_name: "";

        filtered_array = place.address_components.filter(function(address_component){

            return address_component.types.includes("locality");

        }); 

        var locality = filtered_array.length ? filtered_array[0].long_name: "";

 console.log("details: " + locality);

 

        let name = place.formatted_address;

        let id = place.place_id;

        let utc = place.utc_offset;

        let lat = place.geometry.location.lat;

        let lng = place.geometry.location.lng; 

 

        // save the details of the location with wix-storage

        session.setItem("place_city", name);

        session.setItem("place_lat", lat);

        session.setItem("place_lng", lng);

        session.setItem("place_utc", utc);

        session.setItem("place_id", id);

        $w("#Destination").value = name; // set input field to location

   

        // array of location detail items for the repeater

        let detailsList = 

        [

            {

                "_id": "1",

                "text3": "place name",

                "text4": name

            },

            {

                "_id": "2",

                "text3": "latitude",

                "text4": "" + lat

            },

            {

                "_id": "3",

                "text3": "longitude",

                "text4": "" + lng

            },

            {

                "_id": "4",

                "text3": "utc",

                "text4": "" + utc

            },

            {

                "_id": "5",

                "text3": "place id",

                "text4": id

            }   

        ];   

 

        // set the details repeater data and show it

        //$w("#repeater2").data = detailsList; // add data to our repeater

        //$w("#repeater2").hide();

    }); 

}

function set_details1(val) {

    details(val).then(function(resp) {

        // find the city (locality) and country of the location

        let place = resp.result;

        var filtered_array = place.address_components.filter(function(address_component){

            return address_component.types.includes("country");

        }); 

        var country = filtered_array.length ? filtered_array[0].long_name: "";

        filtered_array = place.address_components.filter(function(address_component){

            return address_component.types.includes("locality");

        }); 

        var locality = filtered_array.length ? filtered_array[0].long_name: "";

 console.log("details: " + locality);

 

        let name = place.formatted_address;

        let id = place.place_id1;

        let utc = place.utc_offset;

        let lat = place.geometry.location.lat;

        let lng = place.geometry.location.lng; 

 

        // save the details of the location with wix-storage

        session.setItem("place_city", name);

        session.setItem("place_lat", lat);

        session.setItem("place_lng", lng);

        session.setItem("place_utc", utc);

        session.setItem("place_id1", id);

        $w("#Origin").value = name; // set input field to location

   

        // array of location detail items for the repeater

        let detailsList = 

        [

            {

                "_id": "1",

                "text3": "place name",

                "text4": name

            },

            {

                "_id": "2",

                "text3": "latitude",

                "text4": "" + lat

            },

            {

                "_id": "3",

                "text3": "longitude",

                "text4": "" + lng

            },

            {

                "_id": "4",

                "text3": "utc",

                "text4": "" + utc

            },

            {

                "_id": "5",

                "text3": "place id1",

                "text4": id

            }   

        ];   

 

        // set the details repeater data and show it

        //$w("#repeater2").data = detailsList; // add data to our repeater

        //$w("#repeater2").hide();

    }); 

}

export function geoloc() {

    wixWindow.getCurrentGeolocation()

    .then( (obj) => {

        let lat = obj.coords.latitude; 

        let lng = obj.coords.longitude;

        reverse(lat, lng).then(function(resp) {

            let status = resp.status;

            if(status === "ZERO_RESULTS") {

                let name = "Pittsburgh, PA, USA";

                session.setItem("place_city", name);

                session.setItem("place_lat", "40.44062479999999");

                session.setItem("place_lng", "-79.9958864");

                session.setItem("place_utc", "-300");

                session.setItem("place_id", "ChIJA4UGSG_xNIgRNBuiWqEV-Y0");

                $w("#Destination").value = name;

                return;

            }

            let results = resp.results;

            var country = null, city = null, place_id = null;

            var c, lc, component;

            for (var r = 0, rl = results.length; r < rl; r += 1) {

                let result = results[r];

                // look for city (locality) and country

                if (!city && result.types[0] === 'locality') {

               for (c = 0, lc = result.address_components.length; c < lc; c += 1) {

                   component = result.address_components[c];

                   if (component.types[0] === 'locality') {

                       city = component.long_name;

                       continue;

                   }

                   if (component.types[0] === 'country') {

                       country = component.long_name;

                       if(city && country)

                           break;

                   }

               }

           }

           else {

               continue;

           }

           if (city && country) {

               place_id = result.place_id;

               set_details(place_id);

               break;

           }

        }   

    });   

  } )

  .catch( (error) => {

     let errorMsg = error;

     console.log(errorMsg);

   });

}

export function radioGroup1_change(event) {

    if ($w('#radioGroup1').value === "Return")

        $w('#ReturnDate').enable();

    else    

        $w('#ReturnDate').disable();

}

 

export function button5_click(event, $w) {

    $w('#box9').expand();

    $w('#button5').hide();

    $w('#button6').show();

}

 

export function Accommodation_change(event, $w) {

    if ($w('#Accommodation').checked){

        $w('#box10').expand();}

    else    

        {$w('#box10').collapse();}

    if ($w('#Accommodation').checked)

        {$w('#text62').html = "yes";}

    else    

        {$w('#text62').html = "no";}

        

} 

 

function sendFormData() {

    const subjectAdmin = `New flight booking enquiry from ${$w("#Name").value}}`;

    const subjectRecipient = `${$w("#Name").value} Thanks for your flight booking enquiry!`;

    const bodyRecipient = `<img src="https://i.imgur.com/zqydNCk.jpg" width = "500" height = "135"><br>

    <span style="font-size:14px" "font-family: Avenir">Hello <span style="font-weight:800">${$w("#Name").value},</span><br><br>

    \rThank you for your enquiry for the best value business and first class flights online.<br>

    \rWe will get a quote to you as quick as possible - usually well within 24 hours.<br><br>

    \rThanks again for your request!<br><br>

    \rKind regards,<br><br>

    \r<span style="font-weight:800">Book The Best</span><br><br>

    \r--------------------<br>

    \r<span style="font-weight:800">e: </span><br>

    \r<span style="font-weight:800">w:</span> </span>

  `;

 

    const bodyAdmin = `<span style="font-size:14px" "font-family: Avenir">Hello Book the Best,<br><br>

    

    \rYou have just received a new booking enquiry.  Below are the details:<br><br>

    \r<span style="font-weight:800">Name:<span style="font-weight:normal"> ${$w("#Name").value}</span></br>

    \r<span style="font-weight:800">Email: </span><span style="font-weight:normal">${$w("#Email").value}</span></br>

    \r<span style="font-weight:800">Phone: </span><span style="font-weight:normal">${$w("#Phone").value}</span></br>

    \r<span style="font-weight:800">Adults:  </span><span style="font-weight:normal">${$w("#Adults").value}</span></br>

    \r<span style="font-weight:800">Children:  </span><span style="font-weight:normal">${$w("#Children").value}</span></br>

    \r<span style="font-weight:800">Infants:  </span><span style="font-weight:normal">${$w("#Infants").value}</span></br>

    \r<span style="font-weight:800">Origin:  </span><span style="font-weight:normal">${$w("#Origin").value}</span></br>

    \r<span style="font-weight:800">Destination:  </span><span style="font-weight:normal">${$w("#Destination").value}</span></br>

    \r<span style="font-weight:800">Departure Date:  </span><span style="font-weight:normal">${$w("#DepartureDate").value}</span></br>

    \r<span style="font-weight:800">Return Date:  </span><span style="font-weight:normal">${$w("#ReturnDate").value}</span></br>

    \r<span style="font-weight:800">Flexible Dates?:  </span><span style="font-weight:normal">${$w("#text71").text}</span></br>

    \r<span style="font-weight:800">Accommodation required?:  </span><span style="font-weight:normal">${$w("#text62").text}</span></br>

    \r<span style="font-weight:800">Check In:  </span><span style="font-weight:normal">${$w("#CheckIn").value}</span></br>

    \r<span style="font-weight:800">Check Out:  </span><span style="font-weight:normal">${$w("#CheckOut").value}</span></br><br>

    <span style="font-weight:normal">

    \r----------------------------------------------------------------<br>

    \rTo Access All Your Contact Information:<br>

    \rStep 1) Sign into your Wix account and select book the best.<br>

    \rStep 2) Click the "Wix Database" app.<br>

    \rStep 3) Under Collections, Click "Flight Bookings".<br>

    \rStep 4) Your Contact information will be collected here.<br>

    \r----------------------------------------------------------------<br><br>

    \rIf you have any questions about our lead generation forms please email info@tailoredwebdesign.com.au.</span>`;

    const recipient = $w("#Email").value;

 

    sendEmailWithRecipient(subjectRecipient, bodyRecipient, recipient)

        .then(() => sendEmail(subjectAdmin, bodyAdmin));

}

 

let date = new Date();

let day = date.getDate();

let month = date.getMonth()+1;

let year = date.getFullYear();

let dateStr = day + "/" + month + "/" + year;

console.log(dateStr);    // show result in the developers console

 

export function FlexibleDate_change(event, $w) {

    if ($w('#FlexibleDate').checked) 

        $w('#text71').html = "yes";

    else    

        $w('#text71').html = "no";

} 

 

 

export function button16_click(event, $w) {

    $w("#Origin").value = null;

    $w("#repeater3").collapse();

}

 

export function button17_click(event, $w) {

    $w("#Destination").value = null;

    $w("#repeater1").collapse();

}