NH_Gooi/nhgooi.nl
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Added radio page

Browse Source
This commit is contained in:
Jorit Tijsen
2024-03-13 17:44:35 +01:00
parent d445d90069
commit a0baa0230f
40 changed files with 749 additions and 610 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
app/Http/Controllers/Controller.php
View File

@@ -131,8 +131,25 @@ class Controller extends BaseController
public function __call($method, $arguments) {
if(substr($method, 0, 5) == 'view_') {
$view = substr($method, 5);
if(view()->exists($view)) { return view($view); }
if(view()->exists($view)) { return view($view, $this->getSidebareData()); }
}
return abort(404);
}
public function getSidebareData()
{
$populair = [];
$apiResult = $this->API('nieuws/populair?aantal=5');
foreach ($apiResult as $_newsItem) {
$populair[] = new \Model\NewsItem($_newsItem);
}
$newsItems = [];
$apiResult = $this->API('nieuws/overzicht?aantal=5');
foreach ($apiResult->news as $_newsItem) {
$newsItems[] = new \Model\NewsItem($_newsItem);
}
return ['newsItems' => $newsItems, 'populair' => $populair];
}
}

12
app/Http/Controllers/NewsController.php
View File

@@ -35,19 +35,9 @@ class NewsController extends Controller
$newsItem->video = null; // Videos will be embedded
$newsItem->content = $source->blocks;
$populair = [];
$apiResult = $this->API('nieuws/populair?aantal=5');
foreach ($apiResult as $_newsItem) {
$populair[] = new \Model\NewsItem($_newsItem);
}
$newsItems = [];
$apiResult = $this->API('nieuws/overzicht?aantal=5');
foreach ($apiResult->news as $_newsItem) {
$newsItems[] = new \Model\NewsItem($_newsItem);
}
return view('newsitem', ['newsItems' => $newsItems, 'populair' => $populair, 'news' => $newsItem, 'metadata' => $newsItem->metadata]);
return view('newsitem', array_merge($this->getSidebareData(), ['news' => $newsItem, 'metadata' => $newsItem->metadata]));
}
}

43
app/Http/Controllers/RadioController.php
View File

@@ -7,32 +7,47 @@ use \Model\Programma;
class RadioController extends Controller
{
public function schedule(Request $request, $shiftWeeks = 0)
public function schedule(Request $request, $date = '')
{
$apiResult = $this->API('programma/schema/week/' . (int)$shiftWeeks);
$apiResult = $this->API('programma/schema/week/0');
$start = self::JsonToDateTime($apiResult->startdate);
$end = self::JsonToDateTime($apiResult->enddate);
$schedule = [];
foreach($apiResult->schedule as $program)
{
$schedule[] = [
$schedule[self::JsonToDateTime($program->start)->format('Ymd')][] = [
'starttime' => self::JsonToDateTime($program->start),
'endtime' => self::JsonToDateTime($program->end),
'shift' => (int)$shiftWeeks,
'shift' => 0,
'program' => new \Model\Program($program->program)
];
}
return view($request->ajax() ? 'radioscheduleweek' : 'radioschedule', ['start' => $start, 'end' => $end, 'schedule' => $schedule, 'shift' => $shiftWeeks]);
if ($date) {
$days = [
'custom' => (new \DateTime($date))->format('Ymd'),
];
} else {
$days = [
'day_before_yesterday' => (new \DateTime("-2 day"))->format('Ymd'),
'yesterday' => (new \DateTime("yesterday"))->format('Ymd'),
'today' => (new \DateTime("now"))->format('Ymd'),
'tomorrow' => (new \DateTime("+1 day"))->format('Ymd'),
'day_after_tomorrow' => (new \DateTime("+2 day"))->format('Ymd'),
'custom' => (new \DateTime($date))->format('Ymd'),
];
}
return view($request->ajax() ? 'partial/radioscheduleweek' : 'radioschedule', ['start' => $start, 'end' => $end, 'schedule' => $schedule, 'shift' => 0, 'days' => $days, 'date' => $date]);
}
public function onair()
{
$data = $this->API('programma/schema/onair');
return response()->json($data);
}
public function program($id)
public function program($id)
{
$apiResult = $this->API('programma/details/' . (int)$id);
return view('radioprogram', ['program' => new \Model\Program($apiResult)]);
@@ -45,7 +60,7 @@ class RadioController extends Controller
$podcast = new \Model\Podcast($apiResult);
$related = [];
if($podcast->program != null)
if($podcast->program != null)
{
$apiRelated = $this->API("podcast/programma/{$podcast->program->id}?date={$podcast->created->format('Y-m-d')}");
foreach($apiRelated->podcasts as $relatedItem)
@@ -54,7 +69,7 @@ class RadioController extends Controller
}
}
return view('podcastitem', ['podcast' => $podcast, 'metadata' => $podcast->metadata, 'related' => $related, 'searchURL' => 'gemist/zoeken']);
return view('podcastitem', array_merge($this->getSidebareData(), ['podcast' => $podcast, 'metadata' => $podcast->metadata, 'related' => $related, 'searchURL' => 'gemist/zoeken']));
}
public function podcasts(Request $request, $programma = null)
@@ -65,14 +80,14 @@ class RadioController extends Controller
$action = 'programma/' . (int)$programma;
$viewData['program'] = new \Model\Program($this->API('programma/details/' . (int)$programma));
}
return $this->getPodcastList($request, $action, $viewData);
return $this->getPodcastList($request, $action, array_merge($this->getSidebareData(), $viewData));
}
public function searchpodcast(Request $request, $query)
{
return $this->getPodcastList($request, 'zoeken/' . $query)->with('query', urldecode($query));
}
}
public function terugluisteren(Request $request)
{
@@ -89,9 +104,9 @@ class RadioController extends Controller
}
}
return view('programlist', ['programs' => array_reverse($programs)]);
return view('programlist', array_merge($this->getSidebareData(), ['programs' => array_reverse($programs)]));
}
private function getPodcastList(Request $request, $action, $viewData = [])
{
$page = (int)$request->get('pagina', 1);

BIN
public/css/airplay.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 606 B

1
public/css/airplay.svg Normal file
View File

@@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="17" height="14" viewBox="0 0 16.9 13.9"><defs><style>.fill{fill:#fff;}</style></defs><title>7</title><g id="airplay"><polygon class="fill" points="0 0 16.9 0 16.9 10.4 13.2 10.4 11.9 8.9 15.4 8.9 15.4 1.6 1.5 1.6 1.5 8.9 5 8.9 3.6 10.4 0 10.4 0 0"/><polygon class="fill" points="2.7 13.9 8.4 7 14.2 13.9 2.7 13.9"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 417 B

BIN
public/css/chromecast.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 951 B

1
public/css/chromecast.svg Normal file
View File

@@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.3 13.4" x="0" y="0" width="17" height="14"><defs><style>.cls-1{fill:#fff;}</style></defs><title>5</title><path id="chromecast" class="cls-1" d="M80.4,13v2.2h2.2A2.22,2.22,0,0,0,80.4,13Zm0-2.9v1.5a3.69,3.69,0,0,1,3.7,3.68s0,0,0,0h1.5a5.29,5.29,0,0,0-5.2-5.2h0ZM93.7,4.9H83.4V6.1a9.59,9.59,0,0,1,6.2,6.2h4.1V4.9h0ZM80.4,7.1V8.6a6.7,6.7,0,0,1,6.7,6.7h1.4a8.15,8.15,0,0,0-8.1-8.2h0ZM95.1,1.9H81.8a1.54,1.54,0,0,0-1.5,1.5V5.6h1.5V3.4H95.1V13.7H89.9v1.5h5.2a1.54,1.54,0,0,0,1.5-1.5V3.4A1.54,1.54,0,0,0,95.1,1.9Z" transform="translate(-80.3 -1.9)"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 637 B

1
public/css/components/posts.css.map Normal file
View File

@@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["../../../resources/assets/sass/components/posts.scss","../../../resources/assets/sass/abstracts/_mixin.scss"],"names":[],"mappings":"AAEE;EACE;ECAF;EACA;EACA;EDAE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAIN;ECzBA;EACA;EACA;EDyBE;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EAEA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAIJ;ECvGF;EACA;EACA;;ADwGI;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AAEF;EACE;;AAKN;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;;AAEF;EACE","file":"posts.css"}

BIN
public/css/jumpforward.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

1
public/css/jumpforward.svg Normal file
View File

@@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 19" x="0" y="0" width="19" height="19"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:none;stroke:#fff;stroke-width:2px;}</style></defs><title>2</title><g id="jumpforward"><path class="cls-1" d="M32.1,2.3L27.8,4.5V0.2Z" transform="translate(-20.7 -0.2)"/><path class="cls-1" d="M34.8,2.3L30.5,4.5V0.2Z" transform="translate(-20.7 -0.2)"/><path class="cls-2" d="M29.9,2.3a8.15,8.15,0,0,0-8.2,8.1h0" transform="translate(-20.7 -0.2)"/><path class="cls-2" d="M21.8,10a8.15,8.15,0,0,0,8.1,8.2h0" transform="translate(-20.7 -0.2)"/><path class="cls-2" d="M29.5,18.2a8.15,8.15,0,0,0,8.2-8.1h0" transform="translate(-20.7 -0.2)"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 718 B

1
public/css/mediaplayer_plugins.min.css vendored Normal file
View File

@@ -0,0 +1 @@
.mejs-airplay-button>button,.mejs__airplay-button>button{background:url(airplay.svg) no-repeat 0 4px}.mejs-airplay-button>button .fill,.mejs__airplay-button>button .fill{fill:#fff}.mejs-airplay-button>button.active .fill,.mejs__airplay-button>button.active .fill{fill:#66a8cc}.mejs-chromecast-button>button,.mejs__chromecast-button>button{--disconnected-color:#fff;background:none;display:inline-block}.mejs-chromecast-container,.mejs__chromecast-container{background:#000;color:#fff;font-size:10px;left:0;padding:5px;position:absolute;top:0;z-index:1}.mejs-chromecast-layer>img,.mejs__chromecast-layer>img{left:0;position:absolute;top:0;z-index:0}.mejs-chromecast-icon,.mejs__chromecast-icon{background:url(chromecast.svg) no-repeat 0 0;display:inline-block;height:14px;margin-right:5px;width:17px}.mejs-contextmenu,.mejs__contextmenu{background:#fff;border:1px solid #999;border-radius:4px;left:0;padding:10px;position:absolute;top:0;width:150px;z-index:1}.mejs-contextmenu-separator,.mejs__contextmenu-separator{background:#333;font-size:0;height:1px;margin:5px 6px}.mejs-contextmenu-item,.mejs__contextmenu-item{color:#333;cursor:pointer;font-size:12px;padding:4px 6px}.mejs-contextmenu-item:hover,.mejs__contextmenu-item:hover{background:#2c7c91;color:#fff}.mejs-jump-forward-button>button,.mejs__jump-forward-button>button{background:url(jumpforward.svg) no-repeat 0 0;color:#fff;font-size:8px;line-height:normal;position:relative}.mejs-skip-back-button>button,.mejs__skip-back-button>button{background:url(skipback.svg) no-repeat 0 -1px;color:#fff;font-size:8px;line-height:normal;position:relative}

BIN
public/css/skipback.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 410 B

17
public/css/skipback.svg Normal file
View File

@@ -0,0 +1,17 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="-290 291 19 19" style="enable-background:new -290 291 19 19;" xml:space="preserve">
<style type="text/css">
.st0{fill:#fff;}
.st1{fill:none;stroke:#fff;stroke-width:2;}
</style>
<title>2</title>
<g id="jumpforward">
<path class="st0" d="M-278.6,291v4.3l-4.3-2.2L-278.6,291z"/>
<path class="st0" d="M-281.3,291v4.3l-4.3-2.2L-281.3,291z"/>
<path class="st1" d="M-272.5,301.2L-272.5,301.2C-272.5,301.2-272.5,301.2-272.5,301.2c0-4.5-3.7-8.1-8.2-8.1"/>
<path class="st1" d="M-280.7,309L-280.7,309C-280.7,309-280.7,309-280.7,309c4.5,0,8.1-3.7,8.1-8.2"/>
<path class="st1" d="M-288.5,300.9L-288.5,300.9C-288.5,300.9-288.5,300.9-288.5,300.9c0,4.5,3.7,8.1,8.2,8.1"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 948 B

179
public/css/style.css vendored
View File

@@ -396,13 +396,26 @@
display: flex;
justify-content: space-between;
}
.tabs.fit_content {
width: fit-content;
}
.tabs .box_header {
padding-right: 20px;
}
.tabs .box_header:last-of-type {
padding-right: 0;
}
.tabs .box_header span {
color: #999;
border-bottom: none;
cursor: pointer;
padding-bottom: 3px;
}
.tabs .box_header.extra-small span {
font-size: 12px;
}
.tabs .box_header.small span {
font-size: 13px;
font-size: 14px;
}
.tabs .box_header.medium span {
font-size: 18px;
@@ -410,6 +423,7 @@
.tabs .box_header.active span, .tabs .box_header:hover span {
color: #0f259d;
border-bottom: 3px solid #0f259d;
padding-bottom: 0;
}
.tab_content {
@@ -432,17 +446,18 @@
height: 100%;
object-fit: cover;
}
.blog .post h2 {
.blog .post .post_title {
margin: 0;
}
.blog .post h2 a {
font-family: Montserrat, serif;
font-size: 14px;
font-weight: 600;
line-height: 1.43;
color: #1a1a1a;
}
.blog .post .post_title a {
text-decoration: none;
display: inline-block;
color: #1a1a1a;
}
.blog .post .col-8 {
padding: 0;
@@ -461,6 +476,16 @@
overflow: hidden;
white-space: nowrap;
}
.blog .post .disabled {
color: #A1A1A1;
cursor: not-allowed;
}
.blog .post .post_body {
font-family: Nunito, serif;
font-size: 15px;
line-height: 1.6;
color: #282828;
}
.sidebar .box {
width: calc(100% - 38px);
@@ -641,6 +666,40 @@
white-space: nowrap;
}
.bread_crumb {
height: 38px;
margin: 0;
padding: 0;
list-style: none;
}
.bread_crumb li {
float: left;
font-family: Nunito, serif;
font-size: 12px;
font-weight: 500;
line-height: 3.17;
text-align: left;
color: #666;
margin-right: 5px;
}
.bread_crumb li a {
color: #666;
text-decoration: none;
}
.bread_crumb li i {
font-size: 8px;
}
.page_title {
margin: 17px 0;
font-family: Montserrat, serif;
font-size: 40px;
font-weight: 600;
line-height: 1.15;
text-align: left;
color: #282828;
}
.post_container {
padding: 40px 135px;
background-color: #f9f9f9;
@@ -651,30 +710,9 @@
margin-right: 50px;
}
.post_container .bread_crumb {
height: 38px;
margin: 0;
padding: 0;
list-style: none;
border-bottom: 1px solid #efefef;
padding-bottom: 18px;
}
.post_container .bread_crumb li {
float: left;
font-family: Nunito, serif;
font-size: 12px;
font-weight: 500;
line-height: 3.17;
text-align: left;
color: #666;
margin-right: 5px;
}
.post_container .bread_crumb li a {
color: #666;
text-decoration: none;
}
.post_container .bread_crumb li i {
font-size: 8px;
}
.post_container .post_tags {
margin: 0;
padding: 0;
@@ -699,15 +737,6 @@
text-decoration: none;
text-transform: uppercase;
}
.post_container h1 {
margin: 17px 0;
font-family: Montserrat, serif;
font-size: 40px;
font-weight: 600;
line-height: 1.15;
text-align: left;
color: #282828;
}
.post_container .post_body {
width: 100%;
font-family: Nunito, serif;
@@ -792,6 +821,88 @@
color: #ED1C24;
}
#schedule a {
text-decoration: none;
}
#schedule .program-title {
font-family: Montserrat, serif;
font-size: 14px;
font-weight: 600;
line-height: 1.43;
color: #1a1a1a;
}
#schedule .program-times {
display: block;
height: 30px;
font-family: Nunito, serif;
font-size: 12px;
font-weight: 500;
line-height: 3.17;
letter-spacing: normal;
text-align: left;
color: #666;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
#schedule .no-results, #schedule .loading {
font-family: Montserrat, serif;
font-size: 14px;
font-weight: 600;
line-height: 1.43;
color: #1a1a1a;
text-align: center;
padding: 20px;
}
#schedule .no-results span, #schedule .loading span {
margin-right: 10px;
}
.page_container {
background-color: #fff;
width: calc(100% - 270px);
padding: 32px 135px;
}
.page_container.grey-background {
background-color: #f9f9f9;
}
.page_body {
font-family: Nunito, serif;
font-size: 15px;
line-height: 1.6;
color: #282828;
}
.action_button {
text-decoration: none;
color: #282828;
}
.input_container {
border: 1px solid #efefef;
border-radius: 5px;
background-color: #fff;
display: flex;
height: 48px;
font-family: Montserrat, serif;
font-size: 16px;
line-height: 1.25;
color: #1a1a1a;
}
.input_container .input_prefix, .input_container .input_postfix {
padding: 13px 10px 13px 15px;
}
.input_container input {
border: none;
padding: 13px 5px;
font-family: Montserrat, serif;
font-size: 16px;
font-weight: 600;
line-height: 1.25;
color: #1a1a1a;
}
.footer_container {
font-family: Montserrat, serif;
font-size: 14px;

2
public/css/style.css.map
View File

File diff suppressed because one or more lines are too long

27
resources/assets/sass/components/_blog.scss vendored
View File

@@ -11,17 +11,18 @@
height: 100%;
object-fit: cover;
}
h2 {
.post_title {
margin: 0;
font-family: Montserrat, serif;
font-size: 14px;
font-weight: 600;
line-height: 1.43;
color: #1a1a1a;
a {
font-family: Montserrat, serif;
font-size: 14px;
font-weight: 600;
line-height: 1.43;
color: #1a1a1a;
text-decoration: none;
display: inline-block;
color: #1a1a1a;
}
}
@@ -32,5 +33,17 @@
.post_date {
@include post_date;
}
.disabled {
color: #A1A1A1;
cursor: not-allowed;
}
.post_body {
font-family: Nunito, serif;
font-size: 15px;
line-height: 1.6;
color: #282828;
}
}
}
}

15
resources/assets/sass/components/_box.scss vendored
View File

@@ -27,15 +27,27 @@
.tabs {
display: flex;
justify-content: space-between;
&.fit_content {
width: fit-content;
}
.box_header {
padding-right: 20px;
&:last-of-type {
padding-right: 0;
}
span {
color: #999;
border-bottom: none;
cursor: pointer;
padding-bottom: 3px;
}
&.extra-small span {
font-size: 12px;
}
&.small span {
font-size: 13px;
font-size: 14px;
}
&.medium span {
@@ -46,6 +58,7 @@
span {
color: #0f259d;
border-bottom: 3px solid #0f259d;
padding-bottom: 0;
}
}
}

26
resources/assets/sass/components/_bread_crumb.scss vendored Normal file
View File

@@ -0,0 +1,26 @@
@use "../abstracts/mixin" as *;
.bread_crumb {
height: 38px;
@include reset-list;
li {
float: left;
font-family: Nunito, serif;
font-size: 12px;
font-weight: 500;
line-height: 3.17;
text-align: left;
color: #666;
margin-right: 5px;
a {
color: #666;
text-decoration: none;
}
i {
font-size: 8px;
}
}
}

27
resources/assets/sass/components/_input.scss vendored Normal file
View File

@@ -0,0 +1,27 @@
.input_container {
border: 1px solid #efefef;
border-radius: 5px;
background-color: #fff;
display: flex;
height: 48px;
font-family: Montserrat, serif;
font-size: 16px;
line-height: 1.25;
color: #1a1a1a;
.input_prefix, .input_postfix {
padding: 13px 10px 13px 15px;
}
input {
border: none;
padding: 13px 5px;
font-family: Montserrat, serif;
font-size: 16px;
font-weight: 600;
line-height: 1.25;
color: #1a1a1a;
}
}

18
resources/assets/sass/components/_page.scss vendored Normal file
View File

@@ -0,0 +1,18 @@
.page_container {
background-color: #fff;
width: CALC(100% - 270px);
padding: 32px 135px;
&.grey-background {
background-color: #f9f9f9;
}
}
.page_body {
font-family: Nunito, serif;
font-size: 15px;
line-height: 1.6;
color: #282828;
}
.action_button {
text-decoration: none;
color: #282828;
}

9
resources/assets/sass/components/_page_title.scss vendored Normal file
View File

@@ -0,0 +1,9 @@
.page_title {
margin: 17px 0;
font-family: Montserrat, serif;
font-size: 40px;
font-weight: 600;
line-height: 1.15;
text-align: left;
color: #282828;
}

33
resources/assets/sass/components/_post.scss vendored
View File

@@ -1,4 +1,5 @@
@use "../abstracts/mixin" as *;
.post_container {
padding: 40px 135px;
background-color: #f9f9f9;
@@ -10,31 +11,10 @@
}
.bread_crumb {
height: 38px;
@include reset-list;
border-bottom: 1px solid #efefef;
padding-bottom: 18px;
li {
float: left;
font-family: Nunito, serif;
font-size: 12px;
font-weight: 500;
line-height: 3.17;
text-align: left;
color: #666;
margin-right: 5px;
a {
color: #666;
text-decoration: none;
}
i {
font-size: 8px;
}
}
}
.post_tags {
@include reset-list;
height: 31px;
@@ -59,15 +39,6 @@
}
}
}
h1 {
margin: 17px 0;
font-family: Montserrat, serif;
font-size: 40px;
font-weight: 600;
line-height: 1.15;
text-align: left;
color: #282828;
}
.post_body {
width: 100%;

0
resources/assets/sass/components/_program.scss vendored Normal file
View File

29
resources/assets/sass/components/_schedule.scss vendored Normal file
View File

@@ -0,0 +1,29 @@
@use "../abstracts/mixin" as *;
#schedule {
a {
text-decoration: none;
}
.program-title {
font-family: Montserrat, serif;
font-size: 14px;
font-weight: 600;
line-height: 1.43;
color: #1a1a1a;
}
.program-times {
@include post_date;
}
.no-results, .loading {
font-family: Montserrat, serif;
font-size: 14px;
font-weight: 600;
line-height: 1.43;
color: #1a1a1a;
text-align: center;
padding: 20px;
span {
margin-right: 10px;
}
}
}

1
resources/assets/sass/layout/_gids.scss vendored Normal file
View File

@@ -0,0 +1 @@
@use "../components/schedule";

2
resources/assets/sass/layout/_index.scss vendored
View File

@@ -2,4 +2,6 @@
@forward 'home';
@forward 'news_post';
@forward 'post';
@forward 'gids';
@forward 'program';
@forward 'footer';

2
resources/assets/sass/layout/_post.scss vendored
View File

@@ -1 +1,3 @@
@use "../components/bread_crumb";
@use "../components/page_title";
@use "../components/post";

3
resources/assets/sass/layout/_program.scss vendored Normal file
View File

@@ -0,0 +1,3 @@
@use "../components/page";
@use "../components/input";
@use "../components/program";

6
resources/views/home.blade.php
View File

@@ -77,7 +77,7 @@
</li>
@endif
</ul>
<h5><a href="{{url($item->url)}}"
<h5 class="post_title"><a href="{{url($item->url)}}"
title="{{$item->title}}">{!!$item->title!!}</a></h5>
<?php
$time = Formatter::relativeDate($item->published) . ' om ' . $item->published->format('H:i');
@@ -144,7 +144,7 @@
</a>
</div>
<div class="col-6">
<h2><a href="{{$url}}" title="{{$podcast->title}}">{!!$podcast->title!!}</a></h2>
<h2 class="post_title"><a href="{{$url}}" title="{{$podcast->title}}">{!!$podcast->title!!}</a></h2>
<div class="sub_title">
@if ($podcast->program)
<a class="program_name" href="{{ route('programma') . $podcast->program->url }}"
@@ -164,7 +164,7 @@
</div>
<div class="col-md-3 col-12 sidebar">
@include('widgets/nhgooiradiotv', ['headerClass' => 'small'])
@include('widgets/nhgooiradiotv', ['headerClass' => 'extra-small'])
@include('widgets/contact', [])

13
resources/views/layouts/full.blade.php
View File

@@ -1,16 +1,11 @@
@extends('layouts/master')
@section('page')
<div class="clearfix" style="height: 15px;"></div>
<div class="page_header clearfix page_margin_top">
<div class="page_header_left clearfix page_margin_top">
<h1 class="page_title">@yield('title')</h1>
</div>
<div class="page_header_right">
<div class="page_container @yield('page_class')">
<div class="bread_crumb">
@yield('breadcrumb')
</div>
</div>
<div class="page_layout clearfix">
@yield('content')
<h1 class="page_title">@yield('title')</h1>
@yield('content')
</div>
@endsection

62
resources/views/layouts/sidebar.blade.php
View File

@@ -12,45 +12,47 @@
</div>
<div class="col-4">
@if ((isset($populair) && $populair) || isset($newsItems) && $newsItems)
<div data-tabs>
<div class="tabs">
@section('sidebar')
@if ((isset($populair) && $populair) || isset($newsItems) && $newsItems)
<div data-tabs>
<div class="tabs">
@if (isset($populair) && $populair)
<h4 data-tab-content-id="tab_most_read" class="box_header active"><span>Meest gelezen</span></h4>
@endif
@if (isset($newsItems) && $newsItems)
<h4 data-tab-content-id="tab_more_news" class="box_header"><span>Meer nieuws</span></h4>
@endif
</div>
@if (isset($populair) && $populair)
<h4 data-tab-content-id="tab_most_read" class="box_header active"><span>Meest gelezen</span></h4>
<div id="tab_most_read" class="box tab_content active">
@include('partial/newslist_small', ['id' => 'items-most-read', 'news' => $populair])
<a class="btn auto_width" id="meer-nieuws-most-read" href="#" data-loadmorenews='{"container":["#items-most-read"], "url": "/nieuws/populair?id=items-most-read"}'>
<span class="fas fa-spinner fa-spin" id="loading"></span>
Klik hier voor meer nieuws
</a>
</div>
@endif
@if (isset($newsItems) && $newsItems)
<h4 data-tab-content-id="tab_more_news" class="box_header"><span>Meer nieuws</span></h4>
<div id="tab_more_news" class="box tab_content">
@include('partial/newslist_small', ['id' => 'items-more-news', 'news' => $newsItems])
<a class="btn auto_width" id="meer-nieuws-more-news" href="#" data-loadmorenews='{"container":["#items-more-news"], "url": "/nieuws/more?id=items-more-news"}'>
<span class="fas fa-spinner fa-spin" id="loading"></span>
Klik hier voor meer nieuws
</a>
</div>
@endif
</div>
@if (isset($populair) && $populair)
<div id="tab_most_read" class="box tab_content active">
@include('partial/newslist_small', ['id' => 'items-most-read', 'news' => $populair])
<a class="btn auto_width" id="meer-nieuws-most-read" href="#" data-loadmorenews='{"container":["#items-most-read"], "url": "/nieuws/populair?id=items-most-read"}'>
<span class="fas fa-spinner fa-spin" id="loading"></span>
Klik hier voor meer nieuws
</a>
</div>
@endif
@if (isset($newsItems) && $newsItems)
<div id="tab_more_news" class="box tab_content">
@include('partial/newslist_small', ['id' => 'items-more-news', 'news' => $newsItems])
<a class="btn auto_width" id="meer-nieuws-more-news" href="#" data-loadmorenews='{"container":["#items-more-news"], "url": "/nieuws/more?id=items-more-news"}'>
<span class="fas fa-spinner fa-spin" id="loading"></span>
Klik hier voor meer nieuws
</a>
<div style="width: 100%; font-family: Nunito,serif;font-size: 12px;font-weight: 500;line-height: 3.17;text-align: center;color: #666;">
- Advertentie -
</div>
@endif
</div>
@endif
<div style="width: 100%;height: 275px;margin: 11px auto 50px auto;background-color: #efefef;"></div>
<div style="width: 100%; font-family: Nunito,serif;font-size: 12px;font-weight: 500;line-height: 3.17;text-align: center;color: #666;">
- Advertentie -
</div>
<div style="width: 100%;height: 275px;margin: 11px auto 50px auto;background-color: #efefef;"></div>
@include('widgets/nhgooiradiotv', ['headerClass' => 'medium'])
@include('widgets/nhgooiradiotv', ['headerClass' => 'medium'])
@include('widgets/contact', [])
@include('widgets/contact', [])
@show
</div>
</div>

2
resources/views/partial/newslist_small.blade.php
View File

@@ -14,7 +14,7 @@
</a>
</div>
<div class="col-8">
<h2><a href="{{url($item->url)}}"
<h2 class="post_title"><a href="{{url($item->url)}}"
title="{{$item->title}}">{!!$item->title!!}</a></h2>
<?php
$time = Formatter::relativeDate($item->published) . ' om ' . $item->published->format('H:i');

6
resources/views/partial/podcastitems.blade.php
View File

@@ -3,19 +3,19 @@
<?php $url = route('gemist.fragment') . $podcast->url; ?>
<li class="post">
<div class="post_content">
<h2><a href="{{$url}}" title="{{$podcast->title}}">{!!$podcast->titleWithoutProgram()!!}</a></h2>
<h2 class="post_title"><a href="{{$url}}" title="{{$podcast->title}}">{!!$podcast->titleWithoutProgram()!!}</a></h2>
<div class="sub_title">
@if ($podcast->program)
<a class="program_name" href="{{ route('programma') . $podcast->program->url }}"
title="{{$podcast->program->name}}">{{$podcast->program->name}}</a>
@endif
<?php /** @var boolean $showTime **/ $time = Formatter::relativeDate($podcast->created) . ($showTime ? ' om ' . $podcast->published->format('H:i') : ''); ?>
<?php $time = Formatter::relativeDate($podcast->created) . (isset($showTime) && $showTime ? ' om ' . $podcast->published->format('H:i') : ''); ?>
<span class="post_date"
title="{{$time}}">
<i class="fa-regular fa-clock"></i> {{$time}}
</span>
</div>
@if($showImage && $podcast->image)
@if(isset($showImage) && $showImage && $podcast->image)
<a href="{{$url}}" title="{{$podcast->title}}" class="fixed-height">
<img src='{{$imgBase . $podcast->image->url}}' alt='{{$podcast->image->title}}'>
</a>

86
resources/views/partial/radioscheduleweek.blade.php
View File

@@ -1,59 +1,29 @@
<div class="schedule">
<div class="timeslots">
<div class="date-header"></div>
@for($h = 0; $h < 24; $h += 1.0)
<div class="time-header">{{$time = gmdate("H:i", $h * 3600)}} uur</div>
@endfor
</div>
@php($date = null)
@php($hour = 0)
@php($now = new \DateTime("now"))
@foreach($schedule as $item)
@php($diff = $item['endtime']->diff($item['starttime']))
@php($duration = $diff->d * 24 + $diff->h + $diff->i / 60)
@php($isCurrent = ($now >= $item['starttime']) && ($now <= $item['endtime']))
@php($class = ($item['program']->priority < 2 ? ' special' : '')
. ($item['program']->nonstop || $item['program']->rerun ? ' non-stop' : '')
. ($isCurrent ? ' current' : ''))
@php($starttime = $item['starttime'])
@while($duration > 0)
@if(($formattedDate = Formatter::fullDate($starttime, 'W d/M')) != $date)
@if($date != null)
</div>
@endif
<div class="date-column">
<div class="date-header">{{$formattedDate}}</div>
@php($date = $formattedDate)
@php($hour = 0)
@endif
@php($durationToday = ($hour + $duration <= 24) ? $duration : (24 - $hour))
<a href="{{route('programma') . $item['program']->url}}" class="program{{$class}}" style="height: {{$durationToday * $pixelsPerHour - 2 * $border - $margin}}px;" title="{{$item['program']->name . ($item['program']->tagline ? "\n" . $item['program']->tagline : "")}}">
<div class="program-title">
@if($isCurrent) <div class="current-marker"><span>On air</span></div> @endif
{{$item['program']->name}}
</div>
<div class="program-content">
<div class="program-times"><span class="fa fa-clock"></span> {{$item['starttime']->format('H:i')}} &ndash; {{$item['endtime']->format('H:i')}}</div>
@if($item['program']->tagline)
<hr/>
<div class="tagline">{{$item['program']->tagline}}</div>
@endif
</div>
</a>
@php($hour += $durationToday)
@php($duration -= $durationToday)
@if($duration > 0)
@php($starttime->add(new \DateInterval('P1D'))->setTime(0, 0, 0))
@endif
@endwhile
@endforeach
</div>
</div>
@php($now = new \DateTime("now"))
@foreach($days as $title => $day)
<div id="tab_radio_items_{{$title}}" class="tab_content{{(!$date && $title == 'today') || ($date && $title == 'custom') ? ' active' : ''}}">
<div class="row">
@if(isset($schedule[$day]) && $schedule[$day])
@foreach($schedule[$day] as $item)
@php($isCurrent = ($now >= $item['starttime']) && ($now <= $item['endtime']))
<div class="col-3">
<a class="box full-width" href="{{route('programma') . $item['program']->url}}"
title="{{$item['program']->name . ($item['program']->tagline ? "\n" . $item['program']->tagline : "")}}">
<div class="program-title">
@if($isCurrent)
<div class="current-marker"><span>On air</span></div>
@endif
{{$item['program']->name}}
</div>
<div class="program-times"><i class="fa-regular fa-clock"></i>
{{$item['starttime']->format('H:i')}} &ndash; {{$item['endtime']->format('H:i')}}
</div>
</a>
</div>
@endforeach
@else
<div class="no-results col-12">Geen resultaten gevonden.</div>
@endif
</div>
</div>
@endforeach

72
resources/views/podcastlist.blade.php
View File

@@ -1,47 +1,47 @@
@extends('layouts/sidebar')
@section('title')
@section('title')
Fragment gemist
@endsection
@section('page_class')post_container @endsection
@section('breadcrumb')
@if(isset($program))
<ul class="bread_crumb">
@if(isset($program))
<li><a title="Fragment gemist" href="{{url('radio/gemist')}}">Fragment gemist</a></li>
<li class="separator icon_small_arrow right_gray">&nbsp;</li>
<li>{{$program->name}}</li>
@endif
</ul>
@endsection
@endif
@endsection
@section('content')
@parent
<div id="gemist_tabs" class="no_scroll clearfix">
<ul class="tabs_navigation clearfix">
<li>
<a href="{{route('gemist.programma')}}" title="Programma gemist">
Programma gemist
</a>
<span></span>
</li>
<li class="ui-tabs-active col_1_2"">
<a href="{{route('gemist.fragment')}}" title="Fragment gemist">
Fragment gemist
</a>
<span></span>
</li>
</ul>
<div class="tabs fit_content">
<h4 class="box_header">
<a href="{{route('gemist.programma')}}" title="Programma gemist">
<span>Programma gemist</span>
</a>
</h4>
<h4 class="box_header active">
<a href="{{route('gemist.fragment')}}" title="Fragment gemist">
<span>Fragment gemist</span>
</a>
</h4>
</div>
</div>
@if(isset($program))
@if(isset($program))
<h2>{{$program->name}}</h2>
<p class="align-right">
<a href="{{route('gemist')}}" title="Alle programma's" class="btn btn-info">&larr; Toon alles</a>
<a href="{{route('programma') . $program->url}}" title="{{$program->name}}" class="btn btn-info">Programmainfo</a>
</p>
@else
<p>Hele uitzendingen kunt u binnen twee weken terugluisteren via <a href="{{route('gemist.programma')}}">programma gemist</a>.
<p class="page_body">Hele uitzendingen kunt u binnen twee weken terugluisteren via <a href="{{route('gemist.programma')}}">programma gemist</a>.
@endif
@if($podcasts)
@@ -51,7 +51,7 @@
@include('partial.podcastitems', ['podcasts' => $podcasts])
</div><!--/.row-->
</div>
<div id="loading" style="display: none">
<div class="progress progress-striped active">
<div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
@@ -64,28 +64,28 @@
<script>
var page = 1;
var isLoading = 0;
var $items = $('#items');
var $isLoading = $('#loading');
var $items = $('#items');
var $isLoading = $('#loading');
$(function() {
$(window).scroll(function () {
var $this = $(this);
var $this = $(this);
var tweak = 10;
if(!isLoading && (page > 0) && ($this.scrollTop() >= $items.height() - $this.height() - tweak))
{
isLoading = 1;
isLoading = 1;
$isLoading.show();
$.ajax({ url: document.location.pathname + '?pagina=' + (++page) })
.always(function() { isLoading = 0; $isLoading.hide(); })
.done(function(data) {
if(!data) {
if(page > 1) $items.append("<hr /><p>Er zijn geen podcasts (meer).</p>");
page = -1;
.done(function(data) {
if(!data) {
if(page > 1) $items.append("<hr /><p class=\"page_body\">Er zijn geen podcasts (meer).</p>");
page = -1;
return;
}
$newPage = $("<div />").append(data);
$newPage = $("<div />").append(data);
$items.append($newPage);
$newPage.find("audio, video").mediaelementplayer({ stretching: 'responsive' });
$newPage.find("audio, video").mediaelementplayer({ stretching: 'responsive' });
});
}
});
@@ -93,11 +93,11 @@
</script>
@endpush
@else
<p>Er zijn geen fragmenten beschikbaar.</p>
<p class="page_body">Er zijn geen fragmenten beschikbaar.</p>
@endif
@endsection
@push('styles')

54
resources/views/programlist.blade.php
View File

@@ -1,54 +1,54 @@
@extends('layouts/sidebar')
@section('title')
@section('title')
Programma gemist
@endsection
@section('page_class')news_post post_container @endsection
@section('breadcrumb')
@if(isset($program))
<ul class="bread_crumb">
@if(isset($program))
<li><a title="Programma gemist" href="{{route('gemist.programma')}}">Programma gemist</a></li>
<li class="separator icon_small_arrow right_gray">&nbsp;</li>
<li>{{$program->name}}</li>
@endif
</ul>
@endsection
@endif
@endsection
@section('content')
@parent
<div id="gemist_tabs" class="no_scroll clearfix">
<ul class="tabs_navigation clearfix">
<li class="ui-tabs-active">
<a href="{{route('gemist.programma')}}" title="Programma gemist">
Programma gemist
</a>
<span></span>
</li>
<li>
<a href="{{route('gemist.fragment')}}" title="Fragment gemist">
Fragment gemist
</a>
<span></span>
</li>
</ul>
<div class="tabs fit_content">
<h4 class="box_header active">
<a href="{{route('gemist.programma')}}" title="Programma gemist">
<span>Programma gemist</span>
</a>
</h4>
<h4 class="box_header">
<a href="{{route('gemist.fragment')}}" title="Fragment gemist">
<span>Fragment gemist</span>
</a>
</h4>
</div>
</div>
<p>U kunt programma's terugluisteren tot twee weken na uitzending. Items blijven onbeperkt beschikbaar via <a href="{{route('gemist.fragment')}}">fragment gemist</a>.</p>
<p class="page_body">U kunt programma's terugluisteren tot twee weken na uitzending. Items blijven onbeperkt beschikbaar via <a href="{{route('gemist.fragment')}}">fragment gemist</a>.</p>
<div class="page_layout clearfix">
<div class="row grid" id="items">
<div class="row" id="items">
@php($i = 0)
@foreach($programs as $program)
@foreach($programs as $program)
@if($i % 2 == 0)
@if($i > 0) </ul><!--/.row--> @endif
<ul class='blog row grid'>
<ul class='blog'>
@endif
<?php $url = route('programma') . $program->program->url; ?>
<?php $endStartDiff = $program->end->diff($program->start);
$duration = 24 * $endStartDiff->d + $endStartDiff->h; ?>
<li class="post card column column_1_2">
<li class="post">
<div class="post_content">
<h2><a href="{{$url}}" title="{{$program->program->name}}">{!!$program->program->name!!}</a></h2>
@if($program->current)
@@ -67,7 +67,7 @@
<p>{!! Formatter::excerpt($program->program->description, 200) !!}</p>
</div>
</li>
@php($i++)
@endforeach
@@ -77,15 +77,15 @@
</div><!--/.row-->
</div>
@endsection
@push('scripts')
<script type="text/javascript">
var $onAirIcon = $('#items .onair span.fa');
setInterval(function() {
setInterval(function() {
$onAirIcon.removeClass('fa-play');
setTimeout(function() {
setTimeout(function() {
$onAirIcon.addClass('fa-play');
}, 500);
}, 1000);

232
resources/views/radioprogram.blade.php
View File

@@ -1,125 +1,123 @@
@extends('layouts/full')
@extends('layouts/sidebar')
@section('title')
{{$program->name}}
{{$program->name}}
@endsection
@section('page_class')grey-background page_container @endsection
@section('breadcrumb')
<ul class="bread_crumb">
<li><a title="Radioprogrammering" href="{{route('radio.gids')}}">Radioprogrammering</a></li>
<li class="separator icon_small_arrow right_gray">&nbsp;</li>
<li>Programma-informatie</li>
</ul>
@endsection
<ul class="bread_crumb">
<li><a title="Radioprogrammering" href="{{route('radio.gids')}}">Radioprogrammering</a></li>
<li class="separator"><i class="fa-solid fa-chevron-right"></i></li>
<li>Programma-informatie</li>
</ul>
@endsection
@section('content')
@php($now = new \DateTimeImmutable())
<div class="page_layout page_margin_top clearfix">
<div class="row page_margin_top">
<div class="column column_2_3">
<div class="post single">
<p>{!!$program->description!!}</p>
</div>
</div>
<div class="column column_1_3">
<div id="komende_uitzendingen">
<h4 class="box_header page_margin_top_section">Komende week</h4>
@if(($next = $program->next) && count($next))
<ul class="blog podcasts">
@foreach($next as $n)
<li class="post">
<p class="post_details simple">
<b>{{$n->name}}</b><br/>
@if($n->starts < $now)
Nu te horen tot {{$n->ends->format('H:i')}} uur<br />
<a href="{{ $player = route('luister.live') }}" target="_radioplayer" class="action_button" onclick="window.open('{{$player}}', '_radioplayer','width=400,height=400'); return false;"><span class="fa fa-play"></span> <span>Luister live</span></a>
@break
@else
{{ Formatter::relativeDate( $n->starts, 'W d m' ) }} om {{ $n->starts->format('H:i') }} uur.
@endif
</p>
</li>
@endforeach
</ul>
@else
<p>Er staat komende week geen uitzending van {{$program->name}} gepland.</p>
@endif
</div>
<div class="clearfix"></div>
<h4 class="box_header page_margin_top_section clearfix">Terugluisteren</h4>
<div class="tabs no_scroll clearfix">
<ul class="tabs_navigation clearfix">
<li>
<a href="#uitzending" title="Uitzendingen">
Uitzending
</a>
<span></span>
</li>
<li>
<a href="#fragmenten" title="Contact">
Fragmenten
</a>
<span></span>
</li>
</ul>
<div id="uitzending">
<div class="clearfix"></div>
<p>U kunt uitzendingen tot twee weken geleden terugluisteren. <a href="#fragmenten">Fragmenten</a> blijven onbeperkt beschikbaar.</p>
@if(($recent = $program->recent) && count($recent))
<ul class="blog podcasts">
@foreach($recent as $r)
@php($duration = $r->ends->diff($r->starts)->h)
<li class="post">
<p class="post_details simple">
<b>{{$r->name}}</b><br/>
{{ Formatter::relativeDate( $r->starts, 'W d m' ) }} om {{ $r->starts->format('H:i') }} uur. <br />
@if($r->rerun || $r->nonstop)
<span title="U kunt geen herhalingen en non-stopuitzendingen terugluisteren."><span class="action_button disabled"><span class="fa fa-play"></span> <span>Luister terug</span></a>
@else
<a href="{{$url = route('luister.programma') . '/' . $r->starts->format('Y/m/d/H') . '/' . $duration}}" class="action_button player"><span class="fa fa-play"></span> <span>Luister terug</span></a>
@endif
</p>
</li>
@endforeach
</ul>
@endif
</div>
<div id="fragmenten">
<div class="clearfix"></div>
<p>Fragmenten uit dit programma, zoals interviews, vindt u onder "Radio &ndash; Fragment gemist".</p>
<p>
<a href="{{ route('gemist.programma') . $program->url }}" class="action_button">
<span class="fa fa-list"></span>
<span>Bekijk alle fragmenten</span>
</a>
</p>
</div>
</div>
<div id="contact">
@if($program->email)
<h4 class="box_header page_margin_top_section">Contact</h4>
<p><a href="mailto:{{$program->email}}@nhgooi.nl" class="action_button">
<span class="fa fa-envelope"></span>
<span>{{$program->email}}@nhgooi.nl</a>
</a></p>
@endif
</div>
@if(($hosts = $program->hosts) && count($hosts))
<ul class="list">
@foreach($hosts as $host)
<li class="bullet style_2">{{ Html::mailto($host->email . '@nhgooi.nl', $host->name) }}</li>
@endforeach
</ul>
@endif
</div><!--./left_content-->
</div><!--./col-->
</div><!--./row-->
</div><!--./row-->
</div>
</div>
</div>
<p class="page_body">{!!$program->description!!}</p>
@endsection
@section('sidebar')
@php($now = new \DateTimeImmutable())
<div id="komende_uitzendingen">
<h4 class="box_header"><span>Komende week</span></h4>
@if(($next = $program->next) && count($next))
<div class="box full-width">
<ul class="blog podcasts">
@foreach($next as $n)
<li class="post">
<p class="post_details simple">
<span class="post_title">{{$n->name}}</span>
@if($n->starts < $now)
<span class="post_date" title="Nu te horen tot {{$n->ends->format('H:i')}} uur.">
<i class="fa-regular fa-clock"></i> Nu te horen tot {{$n->ends->format('H:i')}} uur.
</span> <br />
<a href="{{ $player = route('luister.live') }}" target="_radioplayer"
class="action_button"
onclick="window.open('{{$player}}', '_radioplayer','width=400,height=400'); return false;"><span
class="fa fa-play"></span> <span>Luister live</span></a>
@break
@else
<span class="post_date" title="{{ Formatter::relativeDate( $n->starts, 'W d m' ) }} om {{ $n->starts->format('H:i') }} uur.">
<i class="fa-regular fa-clock"></i> {{ Formatter::relativeDate( $n->starts, 'W d m' ) }} om {{ $n->starts->format('H:i') }} uur.
</span>
@endif
</p>
</li>
@endforeach
</ul>
</div>
@else
<p class="page_body">Er staat komende week geen uitzending van {{$program->name}} gepland.</p>
@endif
</div>
<div class="clearfix"></div>
<h4 class="box_header"><span>Terugluisteren</span></h4>
<div data-tabs>
<div class="tabs fit_content">
<h4 data-tab-content-id="tab_broadcast" class="box_header active"><span>Uitzending</span></h4>
<h4 data-tab-content-id="tab_fragments" class="box_header"><span>Fragmenten</span></h4>
</div>
<div id="tab_broadcast" class="box tab_content active">
<p class="page_body">U kunt uitzendingen tot twee weken geleden terugluisteren. <a href="#fragmenten">Fragmenten</a> blijven
onbeperkt beschikbaar.</p>
@if(($recent = $program->recent) && count($recent))
<ul class="blog podcasts">
@foreach($recent as $r)
@php($duration = $r->ends->diff($r->starts)->h)
<li class="post">
<p class="post_details simple">
<span class="post_title">{{$r->name}}</span>
<span class="post_date" title="{{ Formatter::relativeDate( $r->starts, 'W d m' ) }} om {{ $r->starts->format('H:i') }} uur.">
<i class="fa-regular fa-clock"></i> {{ Formatter::relativeDate( $r->starts, 'W d m' ) }} om {{ $r->starts->format('H:i') }} uur.
</span>
@if($r->rerun || $r->nonstop)
<span title="U kunt geen herhalingen en non-stopuitzendingen terugluisteren."><span
class="action_button disabled"><span class="fa fa-play"></span> <span>Luister terug</span></a>
@else
<a href="{{$url = route('luister.programma') . '/' . $r->starts->format('Y/m/d/H') . '/' . $duration}}"
class="action_button player"><span class="fa fa-play"></span> <span>Luister terug</span></a>
@endif
</p>
</li>
@endforeach
</ul>
@endif
</div>
<div id="tab_fragments" class="box tab_content">
<div class="clearfix"></div>
<p class="page_body">Fragmenten uit dit programma, zoals interviews, vindt u onder "Radio &ndash; Fragment gemist".</p>
<p>
<a href="{{ route('gemist.programma') . $program->url }}" class="action_button">
<span class="fa fa-list"></span>
<span>Bekijk alle fragmenten</span>
</a>
</p>
</div>
</div>
<div id="contact">
@if($program->email)
<h4 class="box_header page_margin_top_section">Contact</h4>
<p><a href="mailto:{{$program->email}}@nhgooi.nl" class="action_button">
<span class="fa fa-envelope"></span>
<span>{{$program->email}}@nhgooi.nl</a>
</a></p>
@endif
</div>
@if(($hosts = $program->hosts) && count($hosts))
<ul class="list">
@foreach($hosts as $host)
<li class="bullet style_2">{{ Html::mailto($host->email . '@nhgooi.nl', $host->name) }}</li>
@endforeach
</ul>
@endif
</div><!--./left_content-->
</div><!--./col-->
</div><!--./row-->
</div><!--./row-->
@endsection

312
resources/views/radioschedule.blade.php
View File

@@ -1,227 +1,117 @@
<?php
$pixelsPerHour = 30;
$border = 1;
$margin = 2;
<?php
$pixelsPerHour = 30;
$border = 1;
$margin = 2;
?>
@extends('layouts/full')
@section('title')
Radioprogrammering
@section('breadcrumb')
<ul class="bread_crumb">
<li>Radioprogrammering</li>
</ul>
@endsection
@section('title')
Radioprogrammering
@endsection
@section('content')
<nav>
<ul class="pager">
<li class="action_button previous-week"><a href="{{route('radio.gids', ($shift - 1))}}">&larr; Week eerder</a></li>
<li class="action_button current-week"><a href="{{route('radio.gids')}}">Deze week</a></li>
<li class="action_button next-week"><a href="{{route('radio.gids', ($shift + 1))}}">Week later &rarr;</a></li>
</ul>
</nav>
<div id="loading" style="display: none; height: 300px;">
<div class="progress progress-striped active">
<div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
<b>Programmaschema ophalen...</b>
</div>
<div data-tabs>
<nav>
<div class="tabs fit_content">
<h4 data-tab-content-id="tab_radio_items_day_before_yesterday" class="box_header small">
<span>Eergisteren</span>
</h4>
<h4 data-tab-content-id="tab_radio_items_yesterday" class="box_header small">
<span>Gisteren</span>
</h4>
<h4 data-tab-content-id="tab_radio_items_today" class="box_header small{{$date ? '' : ' active'}}">
<span>Vandaag</span>
</h4>
<h4 data-tab-content-id="tab_radio_items_tomorrow" class="box_header small">
<span>Morgen</span>
</h4>
<h4 data-tab-content-id="tab_radio_items_day_after_tomorrow" class="box_header small">
<span>overmorgen</span>
</h4>
<div class="input_container" style="margin: 5px 0 0 20px;">
<div class="input_prefix">Dag</div>
<input id="custom_date" type="text" style="width: 100px;" value="{{ $date ?? (new DateTime())->format('d-m-Y') }}"/>
<div id="custom_date_icon" class="input_postfix"><i class="fa-solid fa-calendar-days"></i></div>
</div>
</div>
</nav>
<div id="loading" style="display: none; height: 300px;">
<div class="progress progress-striped active">
<div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"
style="width: 100%">
<b>Programmaschema ophalen...</b>
</div>
</div>
</div>
<div id='schedule'>
@include('partial/radioscheduleweek', ['schedule' => $schedule, 'days' => $days, 'date' => $date])
</div>
</div>
</div>
<div id='schedule'>
@include('partial/radioscheduleweek', ['schedule' => $schedule])
</div>
<nav>
<ul class="pager">
<li class="action_button previous-week"><a href="{{route('radio.gids', ($shift - 1))}}">&larr; Week eerder</a></li>
<li class="action_button current-week"><a href="{{route('radio.gids')}}">Deze week</a></li>
<li class="action_button next-week"><a href="{{route('radio.gids', ($shift + 1))}}">Week later &rarr;</a></li>
</ul>
</nav>
@endsection
@push('styles')
<style>
.pager {
display: flex;
width: 100%;
margin-top: 5px;
margin-bottom: 5px;
}
<style>
.schedule .time-header {
height: {{$pixelsPerHour}}px;
}
.pager .previous-week,
.pager .current-week,
.pager .next-week {
flex: 1;
}
.pager .current-week {
text-align: center;
}
.pager .next-week {
text-align: right;
}
@media (max-width: 992px) { /* smaller than desktop */
.schedule {
display: block;
}
.schedule .time-header {
display: none;
}
.schedule .date-header {
font-size: 150%;
font-weight: bold;
height: auto;
margin-top: 15px;
}
.schedule a.program {
/* override the style="height.." */
height: auto !important;
margin-left: 15px !important;
margin-bottom: 3px !important;
}
.schedule .program .program-content {
font-size: 90%;
}
.schedule .program.non-stop .program-title {
background-color: #8F9BA6;
}
}
@media (min-width: 992px) { /* desktop */
.schedule {
display: flex;
}
.schedule .date-header {
height: 3em;
text-align: center;
font-size: 120%;
vertical-align: bottom;
}
.schedule .program .program-content {
display: none;
}
.schedule .program .program-title {
display: block;
height: 100%;
}
.schedule .program.non-stop .program-title {
background-color: transparent;
color: #8F9BA6;
}
}
.schedule {
color: black;
width: 100%;
}
.schedule .time-header {
height: {{$pixelsPerHour}}px;
}
.schedule .timeslots {
width: 80px;
min-width: 80px;
}
.schedule .date-column {
flex: 1;
}
.schedule a.program {
display: block;
color: black;
text-decoration: none;
margin: {{$margin}}px;
border: solid {{$border}}px #03A6E0;
border-radius: 2px;
overflow: hidden;
}
.schedule a.program:hover {
color: white;
background-color: #71c1de;
}
.schedule .program.current {
border-color: #BD0013;
}
.schedule .program .program-times {
text-align: center;
margin: 3px;
}
.schedule .program.current .program-title {
background-color: #71c1de;
color: white;
}
.schedule .program.non-stop {
border-color: #6C757D;
}
.schedule .program.special {
color: #03A6E0;
}
.schedule .program .current-marker {
margin: 5px;
text-align: center;
}
.schedule .program .current-marker span {
padding: 3px;
color: white;
text-align: center;
background-color: #BD0013;
border-radius: 3px;
}
.schedule .program .program-title {
padding: 5px;
color: white;
font-weight: bold;
background-color: #03A6E0;
}
.schedule .program .program-content {
margin: 3px;
text-align: center;
}
.schedule .program hr {
margin: 3px;
border: none;
border-top: 1px solid #03A6E0;
border-radius: 5px;
}
</style>
.schedule a.program {
margin: {{$margin}}px;
border: solid {{$border}}px #03A6E0;
}
</style>
<link href="https://cdn.jsdelivr.net/npm/air-datepicker@3.5.0/air-datepicker.min.css" rel="stylesheet">
@endpush
@push('scripts')
<script type="text/javascript">
function scrollToMiddle($elt) {
if($elt.length == 0) { return; }
var elem_position = $elt.offset().top;
var window_height = $(window).height();
var y = elem_position - window_height / 2;
window.scrollTo(0,y);
}
$(function() { scrollToMiddle($(".current-marker")); });
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.30.1/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/air-datepicker@3.5.0/air-datepicker.min.js"></script>
<script type="text/javascript">
new AirDatepicker('#custom_date', {
locale: {
days: ['zondag', 'maandag', 'dinsdag', 'woensdag', 'donderdag', 'vrijdag', 'zaterdag'],
daysShort: ['zo', 'ma', 'di', 'wo', 'do', 'vr', 'za'],
daysMin: ['zo', 'ma', 'di', 'wo', 'do', 'vr', 'za'],
months: ['Januari', 'Februari', 'Maart', 'April', 'Mei', 'Juni', 'Juli', 'Augustus', 'September', 'Oktober', 'November', 'December'],
monthsShort: ['Jan', 'Feb', 'Mrt', 'Apr', 'Mei', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dec'],
today: 'Vandaag',
clear: 'Legen',
dateFormat: 'dd-MM-yyyy',
timeFormat: 'HH:mm',
firstDay: 0
},
selectedDates: [new Date()],
autoClose: true,
onSelect: function onSelect(fd, date, inst) {
getCustomProgramDate();
}
});
$('#custom_date_icon').click(function(){
$('#custom_date').focus();
});
$('#custom_date').on('change, keyup', function(){
getCustomProgramDate()
});
function getCustomProgramDate()
{
if (moment($('#custom_date').val(), 'DD-MMM-YYYY').isValid()) {
$('#tab_radio_items_custom .row').html('<span class="loading"><span class="fas fa-spinner fa-spin"></span>Laden...</span>')
$('.box_header, .tab_content').removeClass('active');
$('#tab_radio_items_custom').addClass('active');
$.get(document.location.href + '/' + $('#custom_date').val()).done(function (data) {
data = '<div>' + data + '</div>';
$('#tab_radio_items_custom').html($(data).find('#tab_radio_items_custom').html());
});
}
}
</script>
@endpush

43
resources/views/widgets/nhgooiradiotv.blade.php
View File

@@ -1,15 +1,30 @@
<div class="tabs">
<h4 class="box_header {{$headerClass ?? ''}} active"><span>NH Gooi Radio live</span></h4>
<h4 class="box_header {{$headerClass ?? ''}}"><span>NH Gooi TV live</span></h4>
</div>
<div class="box radio_box">
<img class="logo-radio" src="/images/logo-radio.png"/>
<h2>Muziek & Informatie</h2>
<span class="post_date">
<i class="fa-regular fa-clock"></i> 02:00 - 20:00
</span>
<p>Non-stop muziekmix en regionieuws</p>
<a class="btn" href="#">Contact de studio</a>
<a class="btn" href="#">Luister live</a>
<a class="btn" href="#">Kijk live mee</a>
<div data-tabs>
<div class="tabs">
<h4 data-tab-content-id="tab_gooi_radio_live" class="box_header {{$headerClass ?? ''}} active"><span>NH Gooi Radio live</span>
</h4>
<h4 data-tab-content-id="tab_gooi_tv_live" class="box_header {{$headerClass ?? ''}}">
<span>NH Gooi TV live</span></h4>
</div>
<div id="tab_gooi_radio_live" class="tab_content active box radio_box">
<img class="logo-radio" src="/images/logo-radio.png"/>
<h2 class="post_title">Muziek & Informatie</h2>
<span class="post_date">
<i class="fa-regular fa-clock"></i> 02:00 - 20:00
</span>
<p>Non-stop muziekmix en regionieuws</p>
<a class="btn" href="#">Contact de studio</a>
<a class="btn" href="#">Luister live</a>
<a class="btn" href="#">Kijk live mee</a>
</div>
<div id="tab_gooi_tv_live" class="tab_content box radio_box">
<img class="logo-radio" src="/images/logo-radio.png"/>
<h2 class="post_title">Muziek & Informatie</h2>
<span class="post_date">
<i class="fa-regular fa-clock"></i> 02:00 - 20:00
</span>
<p>Non-stop muziekmix en regionieuws</p>
<a class="btn" href="#">Contact de studio</a>
<a class="btn" href="#">Luister live</a>
<a class="btn" href="#">Kijk live mee</a>
</div>
</div>

2
routes/web.php
View File

@@ -40,7 +40,7 @@ Route::get('/onair', 'RadioController@onair')->name('onair');
Route::get('/agenda', 'CalendarController@overview')->name('agenda');
Route::get('/agenda/{id}/{title}', 'CalendarController@show')->where(['id' => '\d+'])->name('agenda.details');
Route::get('/gids/{shift?}', 'RadioController@schedule')->where(['shift' => '-?\d+'])->name('radio.gids');
Route::get('/gids/{date?}', 'RadioController@schedule')->where(['date' => '-?\d{1,2}-\d{1,2}-\d{4}'])->name('radio.gids');
Route::get('/programma/{id}/{title}', 'RadioController@program')->where(['id' => '\d+']);
Route::get('/programma')->name('programma');