Added radio page
This commit is contained in:
Jorit Tijsen
@@ -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))}}">← 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 →</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))}}">← 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 →</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
|
||||
|
||||
Reference in New Issue
Block a user