130 lines
5.0 KiB
PHP
Executable File
130 lines
5.0 KiB
PHP
Executable File
<?php
|
|
$pixelsPerHour = 30;
|
|
$border = 1;
|
|
$margin = 2;
|
|
?>
|
|
|
|
@extends('layouts/full')
|
|
|
|
@section('breadcrumb')
|
|
<ul class="bread_crumb">
|
|
<li><a title="Home" href="/">Home</a></li>
|
|
<li class="separator"><i class="fa-solid fa-chevron-right"></i></li>
|
|
<li><a title="Radio" href="{{route('radio.gids')}}">Radio</a></li>
|
|
<li class="separator"><i class="fa-solid fa-chevron-right"></i></li>
|
|
<li>Radioprogrammering</li>
|
|
</ul>
|
|
@endsection
|
|
|
|
@section('title')
|
|
Radioprogrammering
|
|
@endsection
|
|
|
|
@section('content')
|
|
<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>
|
|
@endsection
|
|
|
|
@push('styles')
|
|
<style>
|
|
.schedule .time-header {
|
|
height: {{$pixelsPerHour}}px;
|
|
}
|
|
|
|
.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 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">
|
|
var isMobile = window.screen.width <= 768;
|
|
var airdatepicker = 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,
|
|
isMobile: isMobile,
|
|
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());
|
|
});
|
|
}
|
|
}
|
|
jQuery(window).resize(function() {
|
|
if ((window.screen.width <= 768) != isMobile) {
|
|
isMobile = window.screen.width <= 768;
|
|
airdatepicker.update({isMobile: isMobile});
|
|
}
|
|
});
|
|
</script>
|
|
@endpush
|