Edit search area in Home page

src/EventHub.Web/Pages/Index.cshtml

@@ -9,11 +9,14 @@
 @section styles {
     <abp-style-bundle>
         <abp-style src="/Pages/Index.css"/>
+        <abp-style src="/libs/date-range-picker/daterangepicker.css"/>
     </abp-style-bundle>
 }
 
 @section scripts {
     <abp-script-bundle>
+        <abp-script src="/libs/date-range-picker/moment.min.js"/>
+        <abp-script src="/libs/date-range-picker/daterangepicker.js"/>
         <abp-script src="/Pages/Index.js"/>
     </abp-script-bundle>
 }
@@ -47,23 +50,30 @@
         <div class="card-body">
             <div class="form-row search-form">
                 <div class="col-md mb-3 mb-md-0">
-                    <select class="form-select" aria-label="Default select example">
+                    <select class="form-select" aria-label="language">
                         <option selected>Looking for</option>
-                        @foreach (var country in Model.Countries)
+                        @foreach (var language in Model.Languages)
                         {
-                            <option value=@country.Id>@country.Name</option>
+                            <option value=@language.TwoLetterISOLanguageName>@language.EnglishName</option>
                         }
                     </select>
                 </div>
                 <div class="col-md mb-3 mb-md-0">
-                    <div class="form-label-group">
-                        <input type="location" id="inputLocation" class="form-control" placeholder="Location" required>
-                        <label for="inputLocation">Location</label>
+                    <div class="form-label-group locationGroup">
+                        <select id="inputLocation" class="form-select" aria-label="location">
+                            <option selected>Location</option>
+                            @foreach (var country in Model.Countries)
+                            {
+                                <option value=@country.Id>@country.Name</option>
+                            }
+                        </select>
+                        <input type="hidden" id="inputCity" class="form-control" placeholder="City" aria-describedby="backToLocation">
+                        <button style="visibility: hidden" class="backToLocation">Back</button>
                     </div>
                 </div>
                 <div class="col-md mb-3 mb-md-0">
                     <div class="form-label-group">
-                        <input type="when" id="inputWhen" class="form-control" placeholder="When" required>
+                        <input type="text" id="inputWhen" class="form-control" placeholder="When" required>
                         <label for="inputWhen">When</label>
                     </div>
                 </div>

src/EventHub.Web/Pages/Index.cshtml.cs

@@ -1,4 +1,5 @@
-using System.Collections.Generic;
+using System;
+using System.Collections.Generic;
 using System.Globalization;
 using System.Linq;
 using System.Threading.Tasks;
@@ -14,6 +15,8 @@ namespace EventHub.Web.Pages
         public IReadOnlyList<EventInListDto> Events { get; private set; }
         
         public IReadOnlyList<EventInListDto> OnlineEvents { get; private set; }
+        
+        public List<CultureInfo> Languages { get; private set; }
 
         public List<CountryLookupDto> Countries { get; private set; }
 
@@ -42,7 +45,18 @@ namespace EventHub.Web.Pages
                 }
             )).Items;
             
+            Languages = CultureInfo.GetCultures(CultureTypes.NeutralCultures)
+                .DistinctBy(x => x.EnglishName)
+                .OrderBy(x => x.EnglishName)
+                .ToList();
+            Languages.Remove(Languages.Single(x => x.TwoLetterISOLanguageName == "iv")); // Invariant Language
+
             Countries = await _eventAppService.GetCountriesLookupAsync();
+            Countries.Insert(0, new CountryLookupDto
+            {
+                Id = Guid.Empty,
+                Name = "Online"
+            });
         }
 
         public async Task OnPostLoginAsync()

src/EventHub.Web/Pages/Index.css

@@ -1,3 +1,19 @@
-body {
-    
+.inputLocation {
+    width: 300px;
+    position: relative;
 }
+
+.backToLocation {
+    position: absolute;
+    top: 0;
+    border-radius: 5px;
+    right: 10px;
+    z-index: 2;
+    border: none;
+    top: 10px;
+    height: 30px;
+    cursor: pointer;
+    color: white;
+    background-color: #D64560;
+    transform: translateX(2px);
+}

src/EventHub.Web/Pages/Index.js

@@ -1,29 +1,61 @@
 $(function () {
     $('.main-slider .owl-carousel').owlCarousel({
-        loop:true,
-        center:true,
-        margin:0,
-        padding:0,
-        nav:true,
-        items:1,
+        loop: true,
+        center: true,
+        margin: 0,
+        padding: 0,
+        nav: true,
+        items: 1,
         dots: false,
     });
-    
+
     $('.card-slider .owl-carousel').owlCarousel({
-        loop:false,
-        center:false,
-        margin:30,
-        padding:0,
-        nav:true,
+        loop: false,
+        center: false,
+        margin: 30,
+        padding: 0,
+        nav: true,
         slideBy: 2,
-        responsive:{
-            0:{
-                items:1,
+        responsive: {
+            0: {
+                items: 1,
             },
-            600:{
-                items:2,
+            600: {
+                items: 2,
             },
         },
         dots: true,
     });
+
+    var countryId = "00000000-0000-0000-0000-000000000000"
+    $('#inputLocation').on('change', function (e) {
+        countryId =  this.value
+        if (countryId !== "00000000-0000-0000-0000-000000000000" && countryId !== "Location"){
+            $('#inputLocation').hide()
+            $('.locationGroup').append("<label class=\"labelCity\" for=\"inputCity\">City</label>")
+            $('.backToLocation').css('visibility', 'visible')
+            $('#inputCity').attr('type', 'text').show()
+        }
+    });
+
+    $('.backToLocation').on('click', '', function (e) {
+        $('.labelCity').remove()
+        $('.backToLocation').css('visibility', 'hidden')
+        $('#inputCity').val('').attr('type', 'text').hide()
+        $('#inputLocation').show()
+    });
+
+    var $inputWhen = $("#inputWhen");
+    $inputWhen.daterangepicker({
+        autoUpdateInput: false,
+        locale: {
+            cancelLabel: 'Clear'
+        }
+    });
+    $inputWhen.on('apply.daterangepicker', function(ev, picker) {
+        $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
+    });
+    $inputWhen.on('cancel.daterangepicker', function(ev, picker) {
+        $(this).val('');
+    });
 });