239 lines
12 KiB
PHP
239 lines
12 KiB
PHP
@extends('layouts.vertical', ["page_title"=> "Datatables"])
|
|
|
|
@section('css')
|
|
<!-- third party css -->
|
|
<link href="{{asset('assets/libs/datatables/datatables.min.css')}}" rel="stylesheet" type="text/css" />
|
|
<link href="{{asset('assets/libs/bootstrap-datepicker/bootstrap-datepicker.min.css')}}" rel="stylesheet" type="text/css" />
|
|
<!-- third party css end -->
|
|
@endsection
|
|
|
|
@section('content')
|
|
<!-- Start Content-->
|
|
<div class="container-fluid">
|
|
|
|
<!-- start page title -->
|
|
<div class="row">
|
|
<div class="col-md-6 p-2">
|
|
<h4 class="page-title">{{$title}} Management</h4>
|
|
</div>
|
|
<div class="col-md-6 p-2">
|
|
@if(isset($buttons))
|
|
@foreach($buttons as $button)
|
|
<a href="{{$button['link']}}" class="btn btn-{{$button['title']=='Add New'?'success':'dark'}} waves-effect waves-light float-end me-2" id="btn-{{strtolower(str_replace(' ', '-', $button['title']))}}">{{$button['title']}}</a>
|
|
@endforeach
|
|
@endif
|
|
</div>
|
|
</div>
|
|
<!-- end page title -->
|
|
@if(session()->has('message'))
|
|
<div class="alert alert-success">
|
|
{{ session()->get('message') }}
|
|
</div>
|
|
@endif
|
|
@if(session()->has('error'))
|
|
<div class="alert alert-danger">
|
|
{{ session()->get('error') }}
|
|
</div>
|
|
@endif
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<table id="list-page-datatable" class="table w-100 nowrap">
|
|
<thead>
|
|
<tr>
|
|
@foreach($fields as $field => $props)
|
|
<th>{{$props['title']}}</th>
|
|
@endforeach
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach($items as $item)
|
|
<tr>
|
|
@foreach($fields as $field => $props)
|
|
@if($field != 'actions')
|
|
<td>
|
|
@switch($props['type'])
|
|
@case('image')
|
|
<img src="{{ $item->{$field} }}" class="img-thumbnail">
|
|
@break
|
|
@case('text')
|
|
@case('select')
|
|
{{ isset($item->{$field}) ? $item->{$field} : '' }}
|
|
@break
|
|
@case('date')
|
|
{{ date("d M Y", strtotime($item->{$field})) }}
|
|
@break
|
|
|
|
@endswitch
|
|
</td>
|
|
@else
|
|
<td>
|
|
<a href="{{$base_url}}/delete?id={{$item->id}}" class="action-icon"> <i class="mdi mdi-delete text-danger"></i></a>
|
|
<button type="button" class="btn btn-link view-response" response_id="{{$item->id}}" data_object='{{ json_encode( ['user_name'=>$item->user_name,'media_type'=>$item->media_type,'title'=>$item->title,'media_url'=>$item->media_url,'createdAt'=>$item->createdAt] ) }}'> <i class="mdi mdi-eye text-info mdi-24px"></i></button>
|
|
@if($item->no_of_evaluations > 0)
|
|
<button type="button" class="btn btn-link view-evaluations" response_id="{{$item->id}}" data_object='{{ json_encode(isset($item->evaluations)?$item->evaluations:"[]") }}'> <i class="mdi mdi-clipboard-check-outline text-success mdi-24px"></i></button>
|
|
@endif
|
|
</td>
|
|
@endif
|
|
@endforeach
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
|
|
</div> <!-- end card body-->
|
|
</div> <!-- end card -->
|
|
</div><!-- end col-->
|
|
</div>
|
|
<!-- end row-->
|
|
</div> <!-- container -->
|
|
|
|
<!-- Right modal content -->
|
|
<div id="date_filter_modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
|
|
<div class="modal-dialog modal-sm">
|
|
<div class="modal-content">
|
|
<div class="modal-header border-0">
|
|
<h4 class="modal-title" id="standard-modalLabel">Filter results by date</h4>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="row">
|
|
<form method="get" id="form-date-filter">
|
|
<div class="col-12">
|
|
<div class="mb-3">
|
|
<label class="form-label">From Date</label>
|
|
<input type="text" name="startdate" class="form-control" data-provide="datepicker" value="{{isset($startdate)?date("m/d/Y", strtotime($startdate)):''}}" data-date-autoclose="true">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12">
|
|
<div class="mb-3">
|
|
<label class="form-label">To Date</label>
|
|
<input type="text" name="enddate" class="form-control" data-provide="datepicker" value="{{isset($enddate)?date("m/d/Y", strtotime($enddate)):''}}" data-date-autoclose="true">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button type="submit" class="btn btn-success btn-sm">Filter</button>
|
|
<button type="button" class="btn btn-danger btn-sm" data-bs-dismiss="modal">Close</button>
|
|
</form>
|
|
</div>
|
|
</div><!-- /.modal-content -->
|
|
</div><!-- /.modal-dialog -->
|
|
</div><!-- /.modal -->
|
|
|
|
<div id="response_modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="standard-modalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title" id="standard-modalLabel">Modal Heading</h4>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
</div>
|
|
</div><!-- /.modal-content -->
|
|
</div><!-- /.modal-dialog -->
|
|
</div><!-- /.modal -->
|
|
|
|
|
|
<style type="text/css">
|
|
.img-thumbnail { max-width: 100px }
|
|
</style>
|
|
@endsection
|
|
|
|
@section('script')
|
|
<!-- third party js -->
|
|
<script src="{{asset('assets/libs/datatables/datatables.min.js')}}"></script>
|
|
<script src="{{asset('assets/libs/bootstrap-datepicker/bootstrap-datepicker.min.js')}}"></script>
|
|
<script type="text/javascript">
|
|
jQuery(document).ready(function($){
|
|
var responses =
|
|
|
|
$('.view-evaluations').click(function(event){
|
|
var evals = JSON.parse($(this).attr('data_object'))
|
|
$('#response_modal .modal-title').html('Evaluations')
|
|
var html = ''
|
|
for(let eval of evals) {
|
|
html += `<h4>Evaluated by <strong>${eval.user_info.name}</strong> on <strong>${ eval.createdAt.split('.')[0].replace("T", " ") }</strong></h4>`
|
|
html += `<div class="row">`
|
|
for(let score of eval.scores) {
|
|
html += `<div class="col-6">${score.name}</div><div class="col-6">${score.score}/${score.scale} (${score.regard})</div>`
|
|
}
|
|
html += `<div class="col-12">Feedback: ${eval.feedback}</div>`
|
|
html += `</div><hr />`
|
|
}
|
|
$('#response_modal .modal-body').html(html)
|
|
$('#response_modal').modal('show')
|
|
})
|
|
|
|
$('.view-response').click(function(event){
|
|
var resp = JSON.parse($(this).attr('data_object'))
|
|
$('#response_modal .modal-title').html('Uploaded By: ' + resp.user_name)
|
|
switch(resp.media_type.toLowerCase()) {
|
|
case 'video':
|
|
$('#response_modal .modal-body').html(`<h4>${resp.title}</h4>
|
|
<h5>${ resp.createdAt.split('.')[0].replace("T", " ") }</h5>
|
|
<div>
|
|
<video style="width:100%; hright:100%" controls>
|
|
<source src="${resp.media_url}" type="video/mp4">
|
|
<source src="movie.ogg" type="video/ogg">
|
|
Your browser does not support the video tag.
|
|
</video>
|
|
</div>
|
|
`)
|
|
break;
|
|
case 'audio':
|
|
$('#response_modal .modal-body').html(`<h4>${resp.title}</h4>
|
|
<h5>${ resp.createdAt.split('.')[0].replace("T", " ") }</h5>
|
|
<div>
|
|
<audio controls>
|
|
<source src="${resp.media_url}" type="audio/mpeg">
|
|
<source src="${resp.media_url}" type="audio/ogg">
|
|
|
|
Your browser does not support the audio element.
|
|
</audio>
|
|
</div>
|
|
`)
|
|
break;
|
|
case 'image':
|
|
$('#response_modal .modal-body').html(`<h4>${resp.title}</h4>
|
|
<h5>${ resp.createdAt.split('.')[0].replace("T", " ") }</h5>
|
|
<div>
|
|
<img src="${resp.media_url}" class="img-fluid">
|
|
</div>
|
|
`)
|
|
break;
|
|
case 'pdf':
|
|
$('#response_modal .modal-body').html(`<h4>${resp.title}</h4>
|
|
<h5>${ resp.createdAt.split('.')[0].replace("T", " ") }</h5>
|
|
<div>
|
|
<embed src="${resp.media_url}" style="width:100%; height:100%">
|
|
</div>
|
|
`)
|
|
break;
|
|
}
|
|
$('#response_modal').modal('show')
|
|
})
|
|
|
|
$('#list-page-datatable').DataTable({
|
|
stateSave: true,
|
|
"scrollX": true,
|
|
"language": {
|
|
"paginate": {
|
|
"previous": "<i class='mdi mdi-chevron-left'>",
|
|
"next": "<i class='mdi mdi-chevron-right'>"
|
|
}
|
|
},
|
|
"drawCallback": function () {
|
|
$('.dataTables_paginate > .pagination').addClass('pagination-rounded');
|
|
}
|
|
});
|
|
|
|
$("#btn-date-filter").click(function(){
|
|
$("#date_filter_modal").modal("show")
|
|
})
|
|
});
|
|
|
|
</script>
|
|
<!-- end demo js-->
|
|
@endsection |