Feature: Added new News date filter to the news page

app/Http/Controllers/NewsController.php

@@ -16,11 +16,11 @@ class NewsController extends Controller
 
     public function show(Request $request, $id)
     {
-	parent::registerView($request, 'nieuws', $id);
+        parent::registerView($request, 'nieuws', $id);
-	$preview = "";
+        $preview = "";
-	if(request()->get('preview', null) != null) {
+        if(request()->get('preview', null) != null) {
-	    $preview = "?preview=" . request()->get('preview');
+            $preview = "?preview=" . request()->get('preview');
-	}
+        }
         $apiResult = $this->API('nieuws/bericht/' . $id . $preview);
         $newsItem = new \Model\NewsItem($apiResult->news);
 
@@ -29,21 +29,18 @@ class NewsController extends Controller
 	        if (!$newsItem->content) return redirect('//nhnieuws.nl/gooi');
 
 	    case 2:
-		if(isset($apiResult->source->article)) {
+		    if(isset($apiResult->source->article)) {
                 $source = $apiResult->source->article;
                 $newsItem->published = self::TimestampToDateTime($source->created);
                 $newsItem->edited = self::TimestampToDateTime($source->updated);
                 $newsItem->author = $source->author;
                 $newsItem->images = null; // Images will be embedded
                 $newsItem->video = null; // Videos will be embedded
-		$newsItem->content = $source->blocks;
+		        $newsItem->content = $source->blocks;
-		} elseif(isset($apiResult->source->blocks)) {
+		    } elseif(isset($apiResult->source->blocks)) {
-			$newsItem->content = $apiResult->source->blocks; 
+			    $newsItem->content = $apiResult->source->blocks;
-		}
+		    }
-		
+            return view('newsitem', array_merge($this->getSidebareData(), ['type' => $apiResult->type, 'news' => $newsItem, 'metadata' => $newsItem->metadata, 'searchURL' => 'nieuws/zoeken']));
-
-
-                return view('newsitem', array_merge($this->getSidebareData(), ['type' => $apiResult->type, 'news' => $newsItem, 'metadata' => $newsItem->metadata, 'searchURL' => 'nieuws/zoeken']));
         }
     }
 
@@ -144,6 +141,9 @@ class NewsController extends Controller
             $total = 5;
         }
         $page = (int)$request->get('pagina', 1);
+        if ($url == 'overzicht' && $request->get('dateStart', null) && $request->get('dateEnd', null)) {
+            $url = 'datum/' . $request->get('dateStart', null) . '/' . $request->get('dateEnd', null);
+        }
         $apiResult = $this->API('nieuws/' . $url . '?pagina=' . (int)max(1, $page) . ($total ? '&aantal=' . $total : ''));
         $news = [];
         foreach ($apiResult->news as $newsItem) {

public/images/icons/calendar.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1"><path d="m40.873 54.653h72.749v-36.653a12 12 0 0 1 24 0v36.653h106.378v-36.653a12 12 0 0 1 24 0v36.653h106.378v-36.653a12 12 0 0 1 24 0v36.653h72.749a28.958 28.958 0 0 1 28.873 28.873v81.25h-488v-81.25a28.958 28.958 0 0 1 28.873-28.873zm72.749 0v36.653a12 12 0 0 0 24 0v-36.653zm130.378 0v36.653a12 12 0 0 0 24 0v-36.653zm130.378 0v36.653a12 12 0 0 0 24 0v-36.653zm-85.24 186.469a12 12 0 0 1 16.969 16.968l-55.5 55.5a12 12 0 0 1 -16.969 0l-27.748-27.748a12 12 0 0 1 16.969-16.969l19.264 19.264 47.012-47.012zm-148.879 0a12 12 0 0 1 16.968 16.968l-55.5 55.5a12 12 0 0 1 -16.969 0l-27.744-27.751a12 12 0 0 1 16.969-16.969l19.264 19.264zm223 124.551h83.241a12 12 0 0 1 12 12v55.5a12 12 0 0 1 -12 12h-83.243a12 12 0 0 1 -12-12v-55.5a12 12 0 0 1 12-12zm71.245 24h-59.247v31.5h59.243v-31.5zm-220.124-24h83.245a12 12 0 0 1 12 12v55.5a12 12 0 0 1 -12 12h-83.247a12 12 0 0 1 -12-12v-55.5a12 12 0 0 1 12-12zm71.245 24h-59.247v31.5h59.245v-31.5zm-220.125-24h83.245a12 12 0 0 1 12 12v55.5a12 12 0 0 1 -12 12h-83.245a12 12 0 0 1 -12-12v-55.5a12 12 0 0 1 12-12zm71.245 24h-59.245v31.5h59.245zm226.512-152.067h83.243a12 12 0 0 1 12 12v55.5a12 12 0 0 1 -12 12h-83.243a12 12 0 0 1 -12-12v-55.5a12 12 0 0 1 12-12zm71.245 24h-59.245v31.5h59.243v-31.5zm65.5-72.83h-488.002v288.351a28.958 28.958 0 0 0 28.873 28.873h430.254a28.958 28.958 0 0 0 28.873-28.873z" fill-rule="evenodd"/></svg>

public/js/functions.js

@@ -31,14 +31,16 @@ $(document).ready(function(){
       loadingElementId: '#loading',
       container: '',
       url: document.location.pathname,
-      nextPage: 2
+      nextPage: 2,
+      dateStart: null,
+      dateEnd:null
     };
 
     $.extend(options, _options);
     var $isLoading = $(options.loadingElementId, this);
     $isLoading.hide();
 
-    this.click(function (e) {
+    this.unbind('click').click(function (e) {
       e.preventDefault();
       if (!isLoading) {
         // Set flag and update UI
@@ -48,7 +50,7 @@ $(document).ready(function(){
         var $container = $(options.container)
 
         // Fire request for the next page
-        $.ajax({url: options.url + (options.url.indexOf('?') >= 0 ? '&' : '?') + 'pagina=' + options.nextPage})
+        $.ajax({url: options.url + (options.url.indexOf('?') >= 0 ? '&' : '?') + 'pagina=' + options.nextPage + (options.dateStart ? '&dateStart=' + options.dateStart : '') + (options.dateEnd ? '&dateEnd=' + options.dateEnd : '')})
           .always(function () {
             // Whether success or failure, update the UI again
             isLoading = 0;

resources/assets/js/functions/loadMoreNews.js

@@ -9,14 +9,16 @@
       loadingElementId: '#loading',
       container: '',
       url: document.location.pathname,
-      nextPage: 2
+      nextPage: 2,
+      dateStart: null,
+      dateEnd:null
     };
 
     $.extend(options, _options);
     var $isLoading = $(options.loadingElementId, this);
     $isLoading.hide();
 
-    this.click(function (e) {
+    this.unbind('click').click(function (e) {
       e.preventDefault();
       if (!isLoading) {
         // Set flag and update UI
@@ -26,7 +28,7 @@
         var $container = $(options.container)
 
         // Fire request for the next page
-        $.ajax({url: options.url + (options.url.indexOf('?') >= 0 ? '&' : '?') + 'pagina=' + options.nextPage})
+        $.ajax({url: options.url + (options.url.indexOf('?') >= 0 ? '&' : '?') + 'pagina=' + options.nextPage + (options.dateStart ? '&dateStart=' + options.dateStart : '') + (options.dateEnd ? '&dateEnd=' + options.dateEnd : '')})
           .always(function () {
             // Whether success or failure, update the UI again
             isLoading = 0;

resources/views/news.blade.php

@@ -8,6 +8,60 @@
     news
 @endsection
 
+@push('scripts')
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
+    <style>
+        .input-group-text svg {
+            width: 24px;
+            height:24px;
+            fill: #0f259d
+        }
+        .datepicker {
+            border: 1px solid lightgray;
+            border-radius: 4px;
+            padding: 5px;
+        }
+        .daterangepicker .drp-buttons .btn {
+            border: none;
+            padding: 10px 39px 10px 39px;
+            font-size: 14px;
+            font-weight: bold;
+            cursor: pointer;
+        }
+        .daterangepicker.show-calendar .drp-buttons {
+            display: flex;
+        }
+        .daterangepicker .drp-selected {
+            display: none;
+        }
+    </style>
+    <script>
+      $(function() {
+        $('input[name="daterange"]').daterangepicker({
+          opens: 'left',
+          autoUpdateInput: false,
+          locale: {
+            cancelLabel: 'Annuleer',
+            applyLabel: 'Filteren'
+          }
+        }, function(start, end, label) {
+          $('input[name="daterange"]').val(start.format('DD-MM-YYYY') + ' - ' + end.format('DD-MM-YYYY'));
+          var $moreNews = $('.content_container #meer-nieuws');
+          var options = $('#meer-nieuws').data('loadmorenews');
+          options.dateStart = start.format('YYYY-MM-DD');
+          options.dateEnd = end.format('YYYY-MM-DD');
+          options.nextPage = 1;
+          console.log(options);
+          $('.content_container #items-more-news li').remove();
+          $moreNews.loadMoreNews(options);
+          $moreNews.click();
+        });
+      });
+    </script>
+@endpush
+
 @section('content')
     <div class="clearfix">
         {{-- body --}}
@@ -21,8 +75,16 @@
                 <div class="col-12 col-md content_container">
                     <div class="row">
                         <div class="col-md-12 col-12">
-                            <h4 class="box_header"><span>Meer nieuws</span></h4>
+                            <div class="d-flex">
-                            <div class="box">
+                                <h4 class="box_header flex-grow-1"><span>Meer nieuws</span></h4>
+                                <h4 class="box_header ms-auto">
+                                    <div class="d-flex">
+                                        <div class="input-group-text me-sm-2" id="basic-addon1">{!!file_get_contents(__DIR__ . '/../../../public/images/icons/calendar.svg')!!}</div>
+                                        <input class="datepicker" type="text" name="daterange" placeholder="Selecteer datum" value=""/>
+                                    </div>
+                                </h4>
+                            </div>
+                            <div class="box" style="width: CALC(100% - 55px);">
                                 @include('partial/newslist_small', ['id' => 'items-more-news', 'news' => $news])
                             </div>
                         </div>