Feature: Added new News date filter to the news page
This commit is contained in:
Jorit Tijsen
@@ -16,11 +16,11 @@ class NewsController extends Controller
|
||||
|
||||
public function show(Request $request, $id)
|
||||
{
|
||||
parent::registerView($request, 'nieuws', $id);
|
||||
$preview = "";
|
||||
if(request()->get('preview', null) != null) {
|
||||
$preview = "?preview=" . request()->get('preview');
|
||||
}
|
||||
parent::registerView($request, 'nieuws', $id);
|
||||
$preview = "";
|
||||
if(request()->get('preview', null) != null) {
|
||||
$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;
|
||||
} elseif(isset($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']));
|
||||
$newsItem->content = $source->blocks;
|
||||
} elseif(isset($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']));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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) {
|
||||
|
||||
1
public/images/icons/calendar.svg
Normal file
1
public/images/icons/calendar.svg
Normal file
@@ -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>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
8
public/js/functions.js
vendored
8
public/js/functions.js
vendored
@@ -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;
|
||||
|
||||
4
public/js/functions.min.js
vendored
4
public/js/functions.min.js
vendored
File diff suppressed because one or more lines are too long
@@ -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;
|
||||
|
||||
@@ -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="box">
|
||||
<div class="d-flex">
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user