Added dummy data to calendar events

Styled calendar pages

app/Http/Controllers/CalendarController.php

@@ -6,24 +6,73 @@ use \Illuminate\Http\Request;
 
 class CalendarController extends Controller
 {
+    private $events = [
+        1 => [
+            'id' => 1,
+            'title' => 'Seinconcert Hilversum',
+            'region' => 'Hilversum',
+            'content' => 'Vrijdag 19 april treedt het Barbican Quartet op in de serie Seinconcerten in Hilversum. Op het programma staan werken van Schubert, Ravel en Britten.',
+            'starts' => '16-04-2024',
+            'ends' => '19-04-2024',
+            'url' => 'seinconcert-hilversum',
+            'images' => [
+                ['url' => 'img/news/rHjgm6CM0D.jpg']
+            ]
+        ],
+        2 => [
+            'id' => 2,
+            'title' => 'Orgelconcert Blaricum',
+            'region' => 'Blaricum',
+            'content' => '<p><strong>In april van dit jaar bestaat het Maarschalkerweerd orgel van de Vituskerk in Blaricum 150 jaar. Ter gelegenheid hiervan is er op zondag 21 april van 14.00 – 15.00 uur een orgelconcert in de Vituskerk. De vaste organisten van de Vituskerk, Bas Groenewoud en Herman van Dijk, zullen het orgel bespelen en er zal iets worden verteld over de geschiedenis van het orgel.</strong></p><p>Het orgel is in 1874 gebouw door Michaël Maarschalkerweerd. Hij bouwde orgels die in de traditie van de neogotiek passen en zijn orgels zijn zeer geschikt voor het spelen van 19e-eeuwse romantische werken. Het orgel in het Amsterdamse concertgebouw is ook van zijn hand. In zijn bedrijf werkten rond 1900 ruim twintig mensen. Na Michaels dood in 1915 werd het bedrijf voortgezet door C.H. van Brussel, J.J. Elbertse en L. Collard, die tot dan toe meesterknechten geweest waren. Elbertse verliet de firma na twee jaar om zijn eigen orgelmakerij op te richten. De firma Elbertse uit Soest heeft jarenlang dit orgel in onderhoud gehad (de tweede én derde generatie trad toe).</p><p>In 2023 fuseerde het bedrijf met de firma Van Vulpen. Het orgel in de Vituskerk was oorspronkelijk gebouwd op de koorzolder maar tijdens de grondige verbouwing van de kerk in 2004 werd het orgel naar beneden gehaald zodat het in al zijn pracht te bewonderen is en ook nodig is om dienst te doen als ondersteuning van het koor. Afgelopen jaar is het orgel in de Vituskerk grondig gerenoveerd.</p><p>Het concert begint om 14:00 uur en de entree is vrij. Collecte na afloop.</p>',
+            'starts' => '21-04-2024',
+            'ends' => '21-04-2024',
+            'url' => 'orgelconcert-blaricum',
+            'images' => [
+                ['url' => 'img/news/tgrOh0kbIS.jpg']
+            ]
+        ],
+    ];
+
+    public function __construct()
+    {
+        parent::__construct();
+
+        $events = [];
+        foreach ($this->events as $index => $event) {
+            $object = new \stdClass();
+            foreach ($event as $key => $value) {
+                $object->$key = $value;
+            }
+            $events[$index] = $object;
+        }
+        $this->events = $events;
+    }
+
     public function show(Request $request, $id)
     {
         parent::registerView($request, 'agenda', $id);
-        $apiResult = $this->API('agenda/item/' . (int)$id);
+        if ($id > 3) {
+            $apiResult = $this->API('agenda/item/' . (int)$id);
+        } else {
+            $apiResult = $this->events[$id];
+        }
         $calendarEvent = new \Model\CalendarEvent($apiResult);
 
-        return view('calendarevent', ['event' => $calendarEvent, 'metadata' => $calendarEvent->metadata]);
+        return view('calendarevent', array_merge($this->getSidebareData(), ['event' => $calendarEvent, 'metadata' => $calendarEvent->metadata]));
     }
 
     public function overview(Request $request)
     {
         $apiResult = $this->API('agenda/overzicht');
+        if (!count($apiResult)) {
+            $apiResult = $this->events;
+        }
         $calendar = [];
         foreach($apiResult as $calendarItem)
         {
             $calendar[] = new \Model\CalendarEvent($calendarItem);
         }
 
-        return view('calendarlist', ['events' => $calendar]);
+        return view('calendarlist', array_merge($this->getSidebareData(), ['events' => $calendar]));
     }
 }

public/css/style.css

@@ -74,6 +74,9 @@ body {
   width: fit-content;
   margin: 0 auto;
 }
+.btn.fit_content {
+  width: fit-content;
+}
 .btn.btn_facebook_share {
   background-image: none;
   background-color: #0f259d;
@@ -156,7 +159,7 @@ div.pp_default .pp_close:hover {
 }
 
 .header {
-  height: 110px;
+  height: 111px;
 }
 .header .logo {
   float: left;
@@ -900,10 +903,6 @@ div.pp_default .pp_close:hover {
   color: #282828;
 }
 
-.sidebar .box {
-  width: calc(100% - 38px);
-}
-
 @media (max-width: 768px) {
   .sidebar {
     width: 100%;
@@ -1183,30 +1182,6 @@ div.pp_default .pp_close:hover {
   border-bottom: 1px solid #efefef;
   padding-bottom: 18px;
 }
-.post_container .post_tags {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  height: 31px;
-  margin: 20px 0;
-}
-.post_container .post_tags li {
-  float: left;
-  margin-right: 10px;
-}
-.post_container .post_tags li a {
-  display: block;
-  padding: 6px 15px 7px;
-  border-radius: 3px;
-  background-image: linear-gradient(to left, #0d1ca3, #45aaf8);
-  font-family: Nunito, serif;
-  font-size: 10px;
-  font-weight: bold;
-  text-align: center;
-  color: #fff;
-  text-decoration: none;
-  text-transform: uppercase;
-}
 .post_container .post_body {
   width: 100%;
   font-family: Nunito, serif;
@@ -1293,6 +1268,31 @@ div.pp_default .pp_close:hover {
   color: #ED1C24;
 }
 
+.post_tags {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  height: 31px;
+  margin: 20px 0;
+}
+.post_tags li {
+  float: left;
+  margin-right: 10px;
+}
+.post_tags li a {
+  display: block;
+  padding: 6px 15px 7px;
+  border-radius: 3px;
+  background-image: linear-gradient(to left, #0d1ca3, #45aaf8);
+  font-family: Nunito, serif;
+  font-size: 10px;
+  font-weight: bold;
+  text-align: center;
+  color: #fff;
+  text-decoration: none;
+  text-transform: uppercase;
+}
+
 #schedule a {
   text-decoration: none;
 }

resources/assets/sass/components/_button.scss

@@ -25,6 +25,10 @@
     margin: 0 auto;
   }
 
+  &.fit_content {
+    width: fit-content;
+  }
+
   &.btn_facebook_share {
     background-image: none;
     background-color: #0f259d;

resources/assets/sass/components/_post.scss

@@ -17,30 +17,6 @@
     padding-bottom: 18px;
   }
 
-  .post_tags {
-    @include reset-list;
-    height: 31px;
-    margin: 20px 0;
-
-    li {
-      float: left;
-      margin-right: 10px;
-
-      a {
-        display: block;
-        padding: 6px 15px 7px;
-        border-radius: 3px;
-        background-image: linear-gradient(to left, #0d1ca3, #45aaf8);
-        font-family: Nunito, serif;
-        font-size: 10px;
-        font-weight: bold;
-        text-align: center;
-        color: $text-inverted-color;
-        text-decoration: none;
-        text-transform: uppercase;
-      }
-    }
-  }
   .post_body {
     width: 100%;
 
@@ -130,3 +106,27 @@
     }
   }
 }
+.post_tags {
+  @include reset-list;
+  height: 31px;
+  margin: 20px 0;
+
+  li {
+    float: left;
+    margin-right: 10px;
+
+    a {
+      display: block;
+      padding: 6px 15px 7px;
+      border-radius: 3px;
+      background-image: linear-gradient(to left, #0d1ca3, #45aaf8);
+      font-family: Nunito, serif;
+      font-size: 10px;
+      font-weight: bold;
+      text-align: center;
+      color: $text-inverted-color;
+      text-decoration: none;
+      text-transform: uppercase;
+    }
+  }
+}

resources/views/calendarevent.blade.php

@@ -1,10 +1,14 @@
-@extends('layouts/full')
+@extends('layouts/sidebar')
 
 @section('title')
   {{$event->title}}
 @endsection
 
-@section('breadcrumb')
+@section('page_class')
+	news_post post_container breadcrumb_no_border
+@endsection
+
+@section('breadcrumb_top')
 	<ul class="bread_crumb">
 		<li><a title="Home" href="/">Home</a></li>
 		<li class="separator"><i class="fa-solid fa-chevron-right"></i></li>
@@ -16,9 +20,12 @@
 
 @section('content')
 
-<div class="row">
+<div class="post_body">
 	<div class="post single small_image">
 		<ul class="post_details clearfix">
+			@if($event->region)
+				<li class="detail category"><i class="fa-solid fa-location-dot"></i> Regio <a title="{{$event->region}}">{{$event->region}}</a></li>
+			@endif
 			<li class="detail date">
 				<i class="fa-regular fa-clock"></i>
 				{{Formatter::relativeDate($event->starts, 'W d m y?')}}
@@ -26,9 +33,6 @@
 					t/m {{Formatter::relativeDate($event->ends, 'd m y?')}}
 				@endif
 			</li>
-			@if($event->region && $event->region != "Regio")
-			<li class="detail category">Regio {{$event->region}}</a></li>
-			@endif
 		</ul>
 
 
@@ -56,7 +60,7 @@
 			</div>
 		@endif
 
-		<div class="post_content page_margin_top clearfix">
+		<div class="post_content clearfix" style="margin-top: 20px;">
 			<div class="content_box">
 				@if($event->images)
 					@if(count($event->images) == 1)

resources/views/calendarlist.blade.php

@@ -1,9 +1,19 @@
-@extends('layouts/full')
+@extends('layouts/sidebar')
 
 @section('title')
     Regioagenda
 @endsection
 
+@section('page_class')
+    news_post post_container breadcrumb_no_border
+@endsection
+@section('container_class')
+    grey_background
+@endsection
+
+@section('content_class')
+@endsection
+
 @section('breadcrumb')
     <ul class="bread_crumb">
         <li><a title="Home" href="/">Home</a></li>
@@ -23,176 +33,77 @@
 
     @section('content')
         @parent
-        <div class="page_body">
-            <nav>
-                <ul class="pager">
-                    <li class="action_button previous-month"><a href="#">&larr; Eerder</a></li>
-                    <li class="action_button current-month"><a href="#">Komende week</a></li>
-                    <li class="action_button everything"><a href="#">Toon alles</a></li>
-                    <li class="action_button next-month"><a href="#">Later &rarr;</a></li>
-                </ul>
-            </nav>
-
-
-            <div class="row">
-                <div class="month" data-month="0">
-                    <h4 class="box_header page_margin_top_section">Komende week</h4>
-                    <ul class="blog big">
-
-                        @php($nextWeek = new DateTimeImmutable('midnight +7 days'))
-                        @php($heading = null)
-                        @php($month = 0)
-
-                        @foreach($events as $event)
-                            @if($event->starts >= ($heading ? $heading : $nextWeek))
-                    </ul>
-                </div>
+        <div data-tabs class="page_body">
+            <div class="tabs">
+                <h4 data-tab-content-id="tab_previous" class="box_header small flex-grow-1"><span>Eerder</span></h4>
+                <h4 data-tab-content-id="tab_current_week" class="box_header small flex-grow-1 active"><span>Komende week</span></h4>
+                <h4 data-tab-content-id="tab_everything" class="box_header small flex-grow-1"><span>Toon alles</span></h4>
+                <h4 data-tab-content-id="tab_next" class="box_header small"><span>Later</span></h4>
             </div>
-            <div class="row">
-                <div class="month" data-month="{{++$month}}">
-                    <h4 class="box_header page_margin_top_section">{{$heading ? "De agenda van" : "De rest van"}} {{Formatter::fullDate($event->starts, 'm y?')}}</h4>
-                    <ul class="blog big">
-                        @php($heading = new DateTimeImmutable('first day of next month ' . $event->starts->format('Y-m-d')))
-                        @endif
 
-                        @php($image = isset($event->images) && count($event->images) ? $event->images[0] : null)
-                        <li class="post {{$image ? "" : "no_img"}}">
-                            @if($image)
-                                <a href="{{$event->url}}" title="{{$event->title}}">
-                                    <img src='{{$imgBase . $image->url}}' alt="{{$image->title}}">
-                                </a>
-                            @endif
-                            <div class="post_content">
-                                <h2><a href="{{$event->url}}" title="{{$event->title}}">{{$event->title}}</a></h2>
-                                <ul class="post_details">
-                                    <li class="category"><span href="#"
-                                                               title="{{$event->region}}">{{$event->region}}</span></li>
-                                    <li class="date">
-                                        {{Formatter::relativeDate($event->starts, 'W d m y?')}}
-                                        @if($event->ends && $event->starts != $event->ends)
-                                            t/m {{Formatter::relativeDate($event->ends, 'd m y?')}}
-                                        @endif
-                                    </li>
-                                </ul>
-                                <p>{!!Formatter::excerpt($event->content, 250)!!}</p>
-                                <a class="read_more" href="{{$event->url}}" title="Lees verder"><span
-                                            class="arrow"></span><span>Lees verder</span></a>
+            @php($tabs = [
+                [
+                    'id' => 'tab_previous',
+                    'start' =>  new DateTime('1-1-1990'),
+                    'end' =>  new DateTime('sunday previous week'),
+                ],
+                [
+                    'id' => 'tab_current_week',
+                    'start' =>  new DateTime('monday this week'),
+                    'end' =>  new DateTime('sunday this week'),
+                ],
+                [
+                    'id' => 'tab_everything',
+                    'start' =>  new DateTime('1-1-1990'),
+                    'end' =>  new DateTime('31-12-3000'),
+                ],
+                [
+                    'id' => 'tab_next',
+                    'start' =>  new DateTime('monday next week'),
+                    'end' =>  new DateTime('31-12-3000'),
+                ]
+            ])
+            @foreach($tabs as $tab)
+                <div style="padding: 0" class="tab_content{{$tab['id'] == 'tab_current_week' ? ' active' : ''}}" id="{{$tab['id']}}">
+                    @php($count = 0)
+                    @foreach($events as $event)
+                        @if($event->starts >= $tab['start'] && $event->ends <= $tab['end'])
+                            @php($count++)
+                            <?php $url = route('agenda.details', ['id' => $event->id, 'title' => $event->title]); ?>
+                            <div class="box featured">
+                                <div class="row">
+                                    <div class="col-12 col-md-6">
+                                        <a href="{{$url}}" title="{{$event->title}}">
+                                            <img src="{{$event->images && $event->images[0] && $event->images[0]->url ? $imgBase . $event->images[0]->url : '/images/noimage.png'}}"/>
+                                        </a>
+                                    </div>
+                                    <div class="col-12 col-md-6">
+                                        <h2 class="post_title"><a href="{{$url}}" title="{{$event->title}}">{!!$event->title!!}</a></h2>
+                                        <div class="sub_title" style="flex-wrap: wrap">
+                                            <ul class="post_tags" style="width: 100%; margin: 0 0 8px 0;height: 25px;">
+                                                <li><a style="padding: 3px 8px 3px" title="{{$event->region}}">{{$event->region}}</a></li>
+                                            </ul>
+                                            <span class="post_date" style="line-height: 1.17; height: 14px;" title="{{Formatter::relativeDate($event->starts, 'W d m y?')}}">
+                                                <i class="fa-regular fa-clock"></i> {{Formatter::relativeDate($event->starts, 'W d m y?')}}
+                                                @if($event->ends && $event->starts != $event->ends)
+                                                    t/m {{strtolower(Formatter::relativeDate($event->ends, 'W d m y?'))}}
+                                                @endif
+                                            </span>
+                                        </div>
+                                        <p class="clipText clipText-7" title="{{Formatter::excerpt($event->content, 150)}}">
+                                            {!!Formatter::excerpt($event->content, 150)!!}
+                                        </p>
+                                        <a class="btn fit_content" href="{{$url}}">Lees verder</a>
+                                    </div>
+                                </div>
                             </div>
-                        </li>
-                        @endforeach
-                    </ul>
+                        @endif
+                    @endforeach
+                    @if($count == 0)
+                    <p>Er zijn geen items gevonden. Iets te melden? Mail het naar <a href="mailto:info@nhgooi.nl">info@nhgooi.nl</a>.</p>
+                    @endif
                 </div>
-            </div>{{--row--}}
-            <nav>
-                <ul class="pager">
-                    <li class="action_button previous-month"><a href="#">&larr; Eerder</a></li>
-                    <li class="action_button current-month"><a href="#">Komende week</a></li>
-                    <li class="action_button everything"><a href="#">Toon alles</a></li>
-                    <li class="action_button next-month"><a href="#">Later &rarr;</a></li>
-                </ul>
-            </nav>
+            @endforeach
         </div>
     @endsection
-
-    @push('styles')
-        <style>
-            .pager {
-                display: flex;
-                width: 100%;
-                margin-top: 5px;
-                margin-bottom: 5px;
-            }
-
-            .pager .action_button {
-                flex: 1;
-            }
-
-            .pager .current-month,
-            .pager .everything {
-                text-align: center;
-            }
-
-            .pager .next-month {
-                text-align: right;
-            }
-        </style>
-    @endpush
-
-    @push('scripts')
-        <script type="text/javascript">
-          var month = 0;
-          var months = {{$month}};
-          var $current = null;
-
-          function gotoPage(month) {
-            $new = (month === null) ? $(".month") : $(".month[data-month=" + month + "]");
-            if ($current == null) {
-              $(".month").hide("fast");
-              $new.fadeIn("fast");
-            } else {
-              ($container = $("#contentSection")).css('height', $container.height() + "px").css('overflow', 'hidden');
-              animations = $current.length;
-              $current.fadeOut("fast", function () {
-                $new.fadeIn("fast", function () {
-                  if (--animations > 0) {
-                    return;
-                  }
-                  curHeight = $container.height();
-                  autoHeight = $container.css('height', 'auto').height();
-                  $container.height(curHeight).animate({height: autoHeight}, 250, function () {
-                    $container.css('height', 'auto');
-                  });
-                });
-              });
-            }
-
-            $current = $new;
-            window.location.hash = (month === null) ? "alles" : ("page-" + month);
-
-            $previous = $(".pager .previous-month, .pager .current-month");
-            if (month == 0) {
-              $previous.addClass('disabled');
-            } else {
-              $previous.removeClass('disabled');
-            }
-
-            $next = $(".pager .next-month");
-            if (month == months) {
-              $next.addClass('disabled');
-            } else {
-              $next.removeClass('disabled');
-            }
-          }
-
-          $(".pager .previous-month").click(function (e) {
-            if (month > 0) gotoPage(--month);
-            e.preventDefault();
-          });
-          $(".pager .current-month").click(function (e) {
-            if (month != 0) gotoPage(month = 0);
-            e.preventDefault();
-          });
-          $(".pager .next-month").click(function (e) {
-            if (month < months) gotoPage(++month);
-            e.preventDefault();
-          });
-          $(".pager .everything").click(function (e) {
-            gotoPage(null);
-            e.preventDefault();
-          });
-          gotoPage(0);
-
-          window.onhashchange = function () {
-            if (window.location.hash == "#alles") {
-              gotoPage(null);
-            } else {
-              newMonth = window.location.hash.substr(6);
-              if (newMonth != month) {
-                gotoPage(newMonth);
-              }
-            }
-          }
-        </script>
-
-    @endpush
 @endif

resources/views/layouts/sidebar.blade.php

@@ -1,10 +1,16 @@
 @extends('layouts/master')
 
+@section('content_class')box
+@endsection
+
 @section('page')
     <div class="@yield('container_class')">
         <div class="row @yield('page_class')">
+            <div class="col-12">
+                @yield('breadcrumb_top')
+            </div>
             <div class="col-12 col-md content_container">
-                <div class="box full-width md_margin_top">
+                <div class="full-width md_margin_top @yield('content_class')">
                     @yield('breadcrumb')
                     @yield('tags')
                     <h1 class="page_title">@yield('title')</h1>