@extends('admin.layout.app')
@section('title', 'All Schedules')
@push('custom_css')
<link rel="stylesheet" href="{{ asset('assets/js/loader/waitMe.css') }}">
@endpush
@section('content')
<div class="row">
<div class="col-12">
<div class="page-title-box d-sm-flex align-items-center justify-content-between">
<h4 class="mb-sm-0">Programme Schedule</h4>
<div class="page-title-right">
<ol class="breadcrumb m-0">
<li class="breadcrumb-item"><a href="{{route('admin.dashboard')}}">Dashboard</a></li>
<li class="breadcrumb-item active">Programme Schedule</li>
</ol>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header align-items-center d-flex">
<h4 class="card-title mb-0 flex-grow-1">Schedule</h4>
<div class="flex-shrink-0">
<a href="{{route('admin.schedule.add')}}" class="btn btn-primary">+ Add New</a>
</div>
</div><!-- end card header -->
<div class="card-body">
<div class="live-preview">
<div class="table-responsive">
<table class="table align-middle mb-0 schedule_data_table"
data-remove-uri="{{route('admin.schedule.delete', ':id')}}">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Show Name</th>
<th scope="col">Presenters</th>
<th scope="col">Show Times</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div><!-- end card-body -->
</div>
@endsection
@push('custom_scripts')
<script src="{{ asset('assets/js/loader/waitMe.js') }}"></script>
<script type="module">
import {initializeApp} from 'https://www.gstatic.com/firebasejs/9.15.0/firebase-app.js'
import {getDatabase, ref, onValue} from 'https://www.gstatic.com/firebasejs/9.15.0/firebase-database.js'
const firebaseConfig = {
apiKey: "AIzaSyCWb6aMoFp29WaI2ITsXxXWHxDvmD_2ciM",
authDomain: "radio-kaya.firebaseapp.com",
databaseURL: "https://radio-kaya-default-rtdb.firebaseio.com",
projectId: "radio-kaya",
storageBucket: "radio-kaya.appspot.com",
messagingSenderId: "921680294488",
appId: "1:921680294488:web:17ae5a382598ef539f102d",
measurementId: "G-JQ5TKD66V2"
};
showLoader()
const app = initializeApp(firebaseConfig);
const db = getDatabase();
const starCountRef = ref(db, 'schedule')
var schedule = []
var datatable = $('.schedule_data_table').DataTable({
processing: true,
data: schedule,
columns: [
{data: 'id'},
{data: 'show_name'},
{data: 'presenters'},
{data: 'days_times'},
{data: 'action'},
],
columnDefs: [
{
targets: 0,
orderable: false,
render: function (data, type, row, meta) {
return meta.row + meta.settings._iDisplayStart + 1;
}
},
{
targets: 1,
orderable: false,
render: function (data, type, row, meta) {
return '<p class="text-capitalize">' + row.show_name + '</p>';
}
},
{
targets: 2,
render: function (data, type, row) {
return row.presenters
}
},
{
targets: -2,
orderable: false,
render: function (data, type, row) {
return decodeDaysToString(row.days) + "<br>" + row.from + '-' + row.to
}
},
{
targets: -1,
orderable: false,
render: function (data, type, row, meta) {
let url = "{{route('admin.schedule.edit',':id')}}"
url = url.replace(':id', row.id);
return `<a href="${url}" class="btn btn-primary btn-sm ">Edit</a> <a href="#" class="btn btn-danger btn-sm delete_btn" data-kt-id="${row.id}">Delete</a>`
}
},
]
})
onValue(starCountRef, (snapshot) => {
showLoader()
schedule = []
snapshot.forEach(child => {
schedule.push(child.val())
})
datatable.clear().rows.add(schedule).draw();
stopLoader()
});
function showLoader() {
$('.card').waitMe({
effect: 'bounce',
text: 'Getting Schedules. Please wait...',
color: "#fff",
bg: 'rgba(0,0,0,0.5)'
});
}
function stopLoader() {
$('.card').waitMe("hide");
}
datatable.on('draw', function () {
$('.delete_btn').on('click', function (e) {
e.preventDefault()
let key = $(this).attr('data-kt-id')
let delete_uri = $('table').attr('data-remove-uri')
delete_uri = delete_uri.replace(':id', key)
Swal.fire({
title: 'Are you sure?',
text: "You won't be able to revert this!"+key,
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then((result) => {
if (result.isConfirmed) {
$('body').waitMe({
effect: 'bounce',
text: 'Deleting. Please wait...',
color: "#fff",
bg: 'rgba(0,0,0,0.5)'
})
$.ajax({
url: delete_uri,
dataType: 'json',
type: 'GET',
success: function (json) {
$('body').waitMe("hide");
if (json.status) {
toastr.success('Show Deleted Successfully');
} else {
toastr.error('Something went wrong. Please try again later!');
Snackbar.show({
text: json.message,
pos: 'bottom-center',
backgroundColor: '#a3220f',
timeout: 3000
});
}
},
error: function (json) {
Snackbar.show({
text: 'Something went wrong. Please try again later!',
pos: 'bottom-center',
backgroundColor: '#a3220f'
});
$('body').waitMe("hide");
}
})
} else {
Swal.fire({
title: "Schedule not deleted!",
icon: "info",
confirmButtonClass: "btn btn-primary w-xs mt-2",
buttonsStyling: !1
})
}
})
})
})
function decodeDaysToString(array) {
let daysDecoded = '';
if (array.length == 1) {
switch (array[0]) {
case '0':
daysDecoded = 'Sunday';
break;
case '1':
daysDecoded = 'Monday';
break;
case '2':
daysDecoded = 'Tuesday';
break;
case '3':
daysDecoded = 'Wednesday';
break;
case '4':
daysDecoded = 'Thursday';
break;
case '5':
daysDecoded = 'Friday';
break;
case '6':
daysDecoded = 'Saturday';
break;
default:
daysDecoded = 'Sunday';
break;
}
} else {
var monToFr = ['1', '2', '3', '4', '5'];
var monToThur = ['1', '2', '3', '4'];
if (arraysEqual(array, monToThur)) {
daysDecoded = 'Monday - Thursday';
return daysDecoded;
}
if (arraysEqual(array, monToFr)) {
daysDecoded = 'Monday - Friday';
return daysDecoded;
}
for (var a = 0; a < array.length; a++) {
switch (array[a]) {
case '0':
daysDecoded += 'Sunday, ';
break;
case '1':
daysDecoded += 'Monday, ';
break;
case '2':
daysDecoded += 'Tuesday, ';
break;
case '3':
daysDecoded += 'Wednesday, ';
break;
case '4':
daysDecoded += 'Thursday, ';
break;
case '5':
daysDecoded += 'Friday, ';
break;
case '6':
daysDecoded += 'Saturday, ';
break;
default:
daysDecoded += 'Sunday, ';
break;
}
}
}
return daysDecoded;
}
function arraysEqual(a, b) {
if (a === b) return true;
if (a == null || b == null) return false;
if (a.length !== b.length) return false;
for (var i = 0; i < a.length; ++i) {
if (a[i] !== b[i]) return false;
}
return true;
}
</script>
@endpush