373 lines
20 KiB
PHP
373 lines
20 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" />
|
|
<link href="{{asset('assets/libs/jquery-toast-plugin/jquery-toast-plugin.min.css')}}" rel="stylesheet" type="text/css" />
|
|
<link href="{{asset('assets/libs/sweetalert2/sweetalert2.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>
|
|
@foreach($props['buttons'] as $key => $button)
|
|
@switch($button)
|
|
@case('edit')
|
|
<a href="{{$base_url}}/edit?id={{$item->id}}" class="action-icon"> <i class="mdi mdi-square-edit-outline text-warning"></i></a>
|
|
@break
|
|
@case('delete')
|
|
<a href="{{$base_url}}/delete?id={{$item->id}}" class="action-icon"> <i class="mdi mdi-delete text-danger"></i></a>
|
|
@break
|
|
@default
|
|
@php
|
|
if(isset($button['href']) && $button['href'] != '') {
|
|
$href = $item->{$button['href']};
|
|
} else {
|
|
$querystring = $button['querystring'];
|
|
foreach((array)$item as $k => $v) {
|
|
if(strpos($querystring,'{'.strtoupper($k).'}') !== false)
|
|
$querystring = str_replace('{'.strtoupper($k).'}', $v, $querystring);
|
|
}
|
|
$href = $base_url.'/'.$key.'?'.$querystring;
|
|
}
|
|
$target = '_self';
|
|
if(isset($button['target']) && $button['target'] != '') {
|
|
$target = $button['target'];
|
|
}
|
|
@endphp
|
|
<a href="{{$href}}" target="{{$target}}" class="action-icon"> <i class="mdi mdi-{{$button['icon']}}"></i></a>
|
|
@endswitch
|
|
@endforeach
|
|
<button type="button" class="btn btn-secondary btn-xs assets-btn" data="{{json_encode($item)}}">Assets</button>
|
|
<button type="button" class="btn btn-warning btn-xs btn-send-notification" data="{{json_encode($item)}}"><i class="mdi mdi-bell"></i></button>
|
|
|
|
</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 class="modal fade" id="assets-modal" tabindex="-1" role="dialog" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title" id="myCenterModalLabel">Created Assets</h4>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div id="accordion">
|
|
<div class="card mb-0">
|
|
<div class="card-header" id="headingOne">
|
|
<h5 class="m-0">
|
|
<a href="#collapseOne" class="text-dark" data-bs-toggle="collapse" aria-expanded="true" aria-controls="collapseOne">
|
|
Dynamic Microsite
|
|
</a>
|
|
</h5>
|
|
</div>
|
|
|
|
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-bs-parent="#accordion">
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<div class="input-group">
|
|
<input type="text" class="form-control" value="">
|
|
<button class="btn input-group-text btn-dark waves-effect waves-light copy-btn" type="button">Copy</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card mb-0">
|
|
<div class="card-header" id="headingTwo">
|
|
<h5 class="m-0">
|
|
<a href="#collapseTwo" class="collapsed text-dark" data-bs-toggle="collapse" aria-expanded="false" aria-controls="collapseTwo">
|
|
Dynamic Brochure
|
|
</a>
|
|
</h5>
|
|
</div>
|
|
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-bs-parent="#accordion">
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<div class="input-group">
|
|
<input type="text" class="form-control" value="">
|
|
<button class="btn input-group-text btn-dark waves-effect waves-light copy-btn" type="button">Copy</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card mb-0">
|
|
<div class="card-header" id="headingThree">
|
|
<h5 class="m-0">
|
|
<a href="#collapseThree" class="collapsed text-dark" data-bs-toggle="collapse" aria-expanded="false" aria-controls="collapseThree">
|
|
Dynamic Registration
|
|
</a>
|
|
</h5>
|
|
</div>
|
|
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-bs-parent="#accordion">
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<div class="input-group">
|
|
<input type="text" class="form-control" value="">
|
|
<button class="btn input-group-text btn-dark waves-effect waves-light copy-btn" type="button">Copy</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card mb-0">
|
|
<div class="card-header" id="headingFour">
|
|
<h5 class="m-0">
|
|
<a href="#collapseFour" class="collapsed text-dark" data-bs-toggle="collapse" aria-expanded="false" aria-controls="collapseFour">
|
|
Dynamic Attendance
|
|
</a>
|
|
</h5>
|
|
</div>
|
|
<div id="collapseFour" class="collapse" aria-labelledby="headingFour" data-bs-parent="#accordion">
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<div class="input-group">
|
|
<input type="text" class="form-control" value="">
|
|
<button class="btn input-group-text btn-dark waves-effect waves-light copy-btn" type="button">Copy</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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 src="{{asset('assets/libs/jquery-toast-plugin/jquery-toast-plugin.min.js')}}"></script>
|
|
<script src="{{asset('assets/libs/sweetalert2/sweetalert2.min.js')}}"></script>
|
|
<script src="{{asset('assets/js/pages/toastr.init.js')}}"></script>
|
|
<script>
|
|
$(document).ready(function() {
|
|
$('.btn-send-notification').on('click', function() {
|
|
let data = JSON.parse($(this).attr('data'))
|
|
console.log(data)
|
|
var sessionId = data.id
|
|
if (!sessionId) {
|
|
Swal.fire('Error', 'Session ID not found.', 'error');
|
|
return;
|
|
}
|
|
Swal.fire({
|
|
title: 'Are you sure?',
|
|
text: "This will send a notification to all concerned users.",
|
|
icon: 'warning',
|
|
showCancelButton: true,
|
|
confirmButtonColor: '#3085d6',
|
|
cancelButtonColor: '#d33',
|
|
confirmButtonText: 'Yes, send it!'
|
|
}).then(function(result) {
|
|
if (result.isConfirmed) {
|
|
Swal.fire({
|
|
title: 'Sending...',
|
|
text: 'Please wait while the notification is being sent.',
|
|
allowOutsideClick: false,
|
|
allowEscapeKey: false,
|
|
didOpen: () => {
|
|
Swal.showLoading();
|
|
}
|
|
});
|
|
$.ajax({
|
|
url: '/session/sendnotification',
|
|
method: 'GET',
|
|
data: {
|
|
session_id: sessionId,
|
|
_token: '{{ csrf_token() }}'
|
|
},
|
|
success: function(response) {
|
|
Swal.fire('Sent!', 'Notification has been sent.', 'success');
|
|
},
|
|
error: function(xhr) {
|
|
Swal.fire('Error', 'Failed to send notification.', 'error');
|
|
}
|
|
});
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
<script type="text/javascript">
|
|
jQuery(document).ready(function($){
|
|
$('#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")
|
|
})
|
|
|
|
$('.assets-btn').click(function(){
|
|
let data = JSON.parse($(this).attr('data'))
|
|
$('#collapseOne input').val('{{ env('APP_URL') }}/microsite/'+data.type+'-'+data.code)
|
|
$('#collapseTwo input').val('{{ env('APP_URL') }}/brochure/'+data.code)
|
|
$('#collapseThree input').val('{{ env('APP_URL') }}/register/'+data.code)
|
|
$('#collapseFour input').val('{{ env('APP_URL') }}/attendance/'+data.code)
|
|
$('#assets-modal').modal('show')
|
|
})
|
|
|
|
$('.copy-btn').click(function(){
|
|
console.log( $(this).parent().find('input').val() )
|
|
copytexttoclipboard($(this).parent().find('input').val())
|
|
})
|
|
|
|
function copytexttoclipboard(text) {
|
|
var textArea = document.createElement("textarea");
|
|
textArea.style.position = 'fixed';
|
|
textArea.style.top = 0;
|
|
textArea.style.left = 0;
|
|
textArea.style.width = '2em';
|
|
textArea.style.height = '2em';
|
|
textArea.style.padding = 0;
|
|
textArea.style.border = 'none';
|
|
textArea.style.outline = 'none';
|
|
textArea.style.boxShadow = 'none';
|
|
textArea.style.background = 'transparent';
|
|
document.body.appendChild(textArea);
|
|
textArea.value = text;
|
|
textArea.textContent = text;
|
|
textArea.focus();
|
|
textArea.select();
|
|
navigator.clipboard.writeText(text)
|
|
console.log(text)
|
|
try {
|
|
var successful = document.execCommand('copy');
|
|
console.log(successful)
|
|
$.NotificationApp.send("success!", "Copied the link to your Clipboard", 'top-center', '#5ba035', 'success');
|
|
} catch (err) {
|
|
$.NotificationApp.send("Oops, unable to copy!", "Please copy the link manually.", 'top-center', '#bf441d', 'error');
|
|
//console.log('Oops, unable to copy');
|
|
}
|
|
document.body.removeChild(textArea);
|
|
}
|
|
|
|
});
|
|
|
|
</script>
|
|
<!-- end demo js-->
|
|
@endsection |