Merge pull request 'Added description how to use it.' (#17) from feature-news-date-filter into dev

Reviewed-on: #17

app/Http/Controllers/Controller.php

@@ -21,15 +21,15 @@ class Controller extends BaseController
     {
         $data = json_decode(Storage::disk('local')->get($file));
         foreach ($path as $subobject) {
-            $data = $data->$subobject;
+            $data = $data->$subobject ?? [];
-	}
+	    }
         $items = [];
         foreach ($data as $item_data) {
             $items[] = new $class($item_data);
             if ($maxItems && count($items) == $maxItems) {
                 break;
             }
-	}
+	    }
 
         return $items;
     }
@@ -113,16 +113,16 @@ class Controller extends BaseController
             'ssl' => [
                 "verify_peer" => false,
                 "verify_peer_name" => false,
-	    ],
+            ],
-	    'http' => [
+            'http' => [
-		'method' => 'GET',
+            'method' => 'GET',
-                'header' => 'X-Api-Key: ' . sha1(request()->server('REMOTE_ADDR')) . "\r\n"
+                    'header' => 'X-Api-Key: ' . sha1(request()->server('REMOTE_ADDR')) . "\r\n"
-                         . 'X-User-Agent: ' . request()->server('HTTP_USER_AGENT') . "\r\n"
+                             . 'X-User-Agent: ' . request()->server('HTTP_USER_AGENT') . "\r\n"
-	    ]
+            ]
         ];
 //\dump($http_response_header);
-	$result = @file_get_contents($this->API_URL . $url, false, stream_context_create($arrContextOptions));
+	    $result = @file_get_contents($this->API_URL . $url, false, stream_context_create($arrContextOptions));
-	return $result ? json_decode($result) : null;
+	    return $result ? json_decode($result) : null;
     }
 
     protected function checkAPI($url)

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,9 +141,12 @@ 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) {
+        foreach ($apiResult->news ?? [] as $newsItem) {
             $news[] = new \Model\NewsItem($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,29 +31,33 @@ $(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
         isLoading = 1;
         $isLoading.show();
         var $button = $(this).attr("disabled", "disabled");
-        var $container = $(options.container)
+        var $container = $(options.container);
+        $container.each(function(){$(this).find('.no-results').remove();});
 
         // 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;
             $isLoading.hide();
             $button.removeAttr("disabled");
+            $(options.container + ' .loader').remove();
           })
           .done(function (data) {
             if (!data) {
@@ -67,6 +71,12 @@ $(document).ready(function(){
               var id = this.toString();
               $(id).append($('<div>'+data+'</div>').find(id).length ? $('<div>'+data+'</div>').find(id).children() : $(data));
             });
+            $container.each(function () {
+              var id = this.toString();
+              if (!$(id).find('li').length) {
+                $(id).append('<li class="no-results">Geen items gevonden.</li>');
+              }
+            });
             ++options.nextPage;
           });
       }

resources/assets/js/functions/loadMoreNews.js

@@ -9,29 +9,33 @@
       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
         isLoading = 1;
         $isLoading.show();
         var $button = $(this).attr("disabled", "disabled");
-        var $container = $(options.container)
+        var $container = $(options.container);
+        $container.each(function(){$(this).find('.no-results').remove();});
 
         // 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;
             $isLoading.hide();
             $button.removeAttr("disabled");
+            $(options.container + ' .loader').remove();
           })
           .done(function (data) {
             if (!data) {
@@ -45,6 +49,12 @@
               var id = this.toString();
               $(id).append($('<div>'+data+'</div>').find(id).length ? $('<div>'+data+'</div>').find(id).children() : $(data));
             });
+            $container.each(function () {
+              var id = this.toString();
+              if (!$(id).find('li').length) {
+                $(id).append('<li class="no-results">Geen items gevonden.</li>');
+              }
+            });
             ++options.nextPage;
           });
       }

resources/views/news.blade.php

@@ -8,6 +8,91 @@
     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;
+            width: 48%;
+            float: left;
+        }
+        .daterangepicker .drp-selected {
+            display: none;
+        }
+        .daterangepicker.show-calendar .drp-buttons:before {
+            display: block;
+            content: 'Selecteer een begindatum en een einddatum.';
+            height: 23px;
+            width: 90%;
+            text-align: center;
+            padding-left: 10px;
+        }
+    </style>
+    <script>
+      $(function() {
+        $('input[name="daterange"]').daterangepicker({
+          opens: 'left',
+          autoUpdateInput: false,
+          locale: {
+            cancelLabel: 'Annuleer',
+            applyLabel: 'Filteren',
+            "daysOfWeek": [
+              "Zo",
+              "Ma",
+              "Di",
+              "Wo",
+              "Do",
+              "Vr",
+              "Za"
+            ],
+            "monthNames": [
+              "Januari",
+              "Februari",
+              "Maart",
+              "April",
+              "Mei",
+              "Juni",
+              "Juli",
+              "Augustus",
+              "September",
+              "Oktober",
+              "November",
+              "December"
+            ],
+            "firstDay": 1
+          }
+        }, 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;
+          $('.content_container #items-more-news li').remove();
+          $('.content_container #items-more-news').append('<li class="loader"><span class="fas fa-spinner fa-spin"></span> Laden...</li>');
+          $moreNews.loadMoreNews(options);
+          $moreNews.click();
+        });
+      });
+    </script>
+@endpush
+
 @section('content')
     <div class="clearfix">
         {{-- body --}}
@@ -21,8 +106,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>