306 lines
15 KiB
PHP
306 lines
15 KiB
PHP
@extends('layouts.backendTemplate')
|
|
|
|
@section('content')
|
|
|
|
<style>
|
|
.link-container {
|
|
display: flex;
|
|
/* Use flexbox for alignment */
|
|
align-items: center;
|
|
/* Center items vertically */
|
|
justify-content: space-between;
|
|
/* Space between the URL and button */
|
|
}
|
|
|
|
.file-url {
|
|
flex: 1;
|
|
/* Allow the URL to take up available space */
|
|
color: #007bff;
|
|
/* Link color */
|
|
text-decoration: none;
|
|
/* Remove underline */
|
|
overflow: hidden;
|
|
/* Hide overflow */
|
|
white-space: nowrap;
|
|
/* Prevent text wrapping */
|
|
text-overflow: ellipsis;
|
|
/* Add ellipsis for overflow */
|
|
margin-right: 10px;
|
|
/* Space between text and button */
|
|
}
|
|
</style>
|
|
|
|
<!--begin::Main-->
|
|
<div class="app-main flex-column flex-row-fluid" id="kt_app_main">
|
|
|
|
<div class="d-flex flex-column flex-column-fluid">
|
|
|
|
|
|
@include('uc.breadcrumbList', [
|
|
'title' => 'Video Management Folder ' . $folderView->name,
|
|
'pageName' => 'Video Management',
|
|
])
|
|
|
|
|
|
<div id="kt_app_content" class="app-content flex-column-fluid">
|
|
|
|
<div id="kt_app_content_container" class="app-container container-xxl">
|
|
|
|
<div class="card">
|
|
|
|
@if (Session::has('messageSuccess'))
|
|
<div class="card-body">
|
|
@include('uc/messageSuccess')
|
|
</div>
|
|
@endif
|
|
|
|
@if (Session::has('messageFail'))
|
|
<div class="card-body">
|
|
@include('uc/messageFail')
|
|
</div>
|
|
@endif
|
|
|
|
|
|
<div class="card-header border-0 pt-6">
|
|
<div class="d-flex align-items-center position-relative my-1">
|
|
</div>
|
|
|
|
@if (Auth::user()->role != 2)
|
|
<div class="card-toolbar">
|
|
<div class="d-flex justify-content-end" data-kt-customer-table-toolbar="base">
|
|
<a href="{{ url('video/add/' . $folderView->id) }}" class="btn btn-primary">Add
|
|
</a>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
</div>
|
|
|
|
|
|
<div class="card-header border-0 pt-5">
|
|
|
|
<div class="card-title">
|
|
<div class="d-flex align-items-center position-relative my-1">
|
|
<span class="svg-icon svg-icon-1 position-absolute ms-4">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<rect opacity="0.5" x="17.0365" y="15.1223" width="8.15546" height="2"
|
|
rx="1" transform="rotate(45 17.0365 15.1223)" fill="currentColor">
|
|
</rect>
|
|
<path
|
|
d="M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z"
|
|
fill="currentColor"></path>
|
|
</svg>
|
|
</span>
|
|
|
|
<input type="text" table-filter="search"
|
|
class="form-control form-control-solid w-250px ps-15" placeholder="Search" />
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="card-body py-4">
|
|
<!--begin::Table-->
|
|
<table class="table align-middle table-row-dashed fs-6 gy-5" id="data-table">
|
|
<!--begin::Table head-->
|
|
<thead>
|
|
<!--begin::Table row-->
|
|
<tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
|
|
<th class="min-w-125px">Name</th>
|
|
<th class="min-w-125px">Created</th>
|
|
<th class="text-end min-w-100px">Manage</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody class="text-gray-600 fw-semibold">
|
|
|
|
@foreach ($itemView as $obj)
|
|
<tr>
|
|
<td>
|
|
<div class="d-flex flex-column">
|
|
<a href="#" class="text-gray-800 text-hover-primary mb-1">
|
|
<video controls class="h-100px" style="height: 150px!important;">
|
|
<source src="{{ env('R2_SCHEMA_URL') . $obj['name'] }}"
|
|
type="video/mp4">
|
|
Your browser does not support the video element.
|
|
</video>
|
|
</a>
|
|
<span>{{ $obj['name'] }}</span>
|
|
</div>
|
|
</td>
|
|
|
|
|
|
<td>
|
|
{{ Carbon\Carbon::parse($obj['created_at'])->format('d, M Y') }}
|
|
</td>
|
|
|
|
<td class="min-w-100px text-end">
|
|
|
|
{{-- Download --}}
|
|
<a href="{{ env('R2_SCHEMA_URL') . $obj['name'] }}" target="_blank"
|
|
class="btn btn-sm btn-icon btn-light btn-active-light-primary"
|
|
type="button" data-bs-toggle="tooltip" aria-label="Coming soon"
|
|
data-bs-original-title="Coming soon" data-kt-initialized="1">
|
|
<i class="bi bi-download fs-3"></i>
|
|
</a>
|
|
|
|
{{-- Copy --}}
|
|
<button type="button" data-action="copy"
|
|
data-url="{{ env('R2_SCHEMA_URL') . $obj['name'] }}"
|
|
class="btn btn-sm btn-icon btn-light btn-active-light-primary copy-button">
|
|
<span class="svg-icon svg-icon-2">
|
|
<svg width="24" height="24" viewBox="0 0 24 24"
|
|
fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path opacity="0.5"
|
|
d="M18 2H9C7.34315 2 6 3.34315 6 5H8C8 4.44772 8.44772 4 9 4H18C18.5523 4 19 4.44772 19 5V16C19 16.5523 18.5523 17 18 17V19C19.6569 19 21 17.6569 21 16V5C21 3.34315 19.6569 2 18 2Z"
|
|
fill="currentColor"></path>
|
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
|
d="M14.7857 7.125H6.21429C5.62255 7.125 5.14286 7.6007 5.14286 8.1875V18.8125C5.14286 19.3993 5.62255 19.875 6.21429 19.875H14.7857C15.3774 19.875 15.8571 19.3993 15.8571 18.8125V8.1875C15.8571 7.6007 15.3774 7.125 14.7857 7.125ZM6.21429 5C4.43908 5 3 6.42709 3 8.1875V18.8125C3 20.5729 4.43909 22 6.21429 22H14.7857C16.5609 22 18 20.5729 18 18.8125V8.1875C18 6.42709 16.5609 5 14.7857 5H6.21429Z"
|
|
fill="currentColor"></path>
|
|
</svg>
|
|
</span>
|
|
<!--end::Svg Icon-->
|
|
</button>
|
|
|
|
|
|
{{-- Delete --}}
|
|
@if (Auth::user()->role != 2)
|
|
<a href="#" data-id="{{ $obj['id'] }}"
|
|
class="btn btn-icon btn-bg-light btn-active-color-primary btn-sm delete-item">
|
|
<span class="svg-icon svg-icon-3">
|
|
<svg width="24" height="24" viewBox="0 0 24 24"
|
|
fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M5 9C5 8.44772 5.44772 8 6 8H18C18.5523 8 19 8.44772 19 9V18C19 19.6569 17.6569 21 16 21H8C6.34315 21 5 19.6569 5 18V9Z"
|
|
fill="currentColor" />
|
|
<path opacity="0.5"
|
|
d="M5 5C5 4.44772 5.44772 4 6 4H18C18.5523 4 19 4.44772 19 5V5C19 5.55228 18.5523 6 18 6H6C5.44772 6 5 5.55228 5 5V5Z"
|
|
fill="currentColor" />
|
|
<path opacity="0.5"
|
|
d="M9 4C9 3.44772 9.44772 3 10 3H14C14.5523 3 15 3.44772 15 4V4H9V4Z"
|
|
fill="currentColor" />
|
|
</svg>
|
|
</span>
|
|
</a>
|
|
@endif
|
|
</td>
|
|
|
|
|
|
</tr>
|
|
@endforeach
|
|
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
@stop
|
|
|
|
|
|
@section('script')
|
|
|
|
<script type="text/javascript">
|
|
const baseUrl = "{{ url('video') }}";
|
|
var datatable;
|
|
datatable = $("#data-table").DataTable({
|
|
"info": false,
|
|
"order": []
|
|
});
|
|
|
|
// Filter by search
|
|
const filterSearch = document.querySelector('[table-filter="search"]');
|
|
filterSearch.addEventListener('keyup', function(e) {
|
|
datatable.search(e.target.value).draw();
|
|
});
|
|
|
|
// filter by status
|
|
const filterStatus = document.querySelector('[table-filter="status"]');
|
|
$(filterStatus).on('change', e => {
|
|
let value = e.target.value;
|
|
if (value === 'all') {
|
|
value = '';
|
|
}
|
|
datatable.column(4).search(value).draw();
|
|
});
|
|
|
|
|
|
// Remove
|
|
$(document).on('click', '.delete-item', function() {
|
|
swal.fire({
|
|
allowOutsideClick: false,
|
|
text: "Are you sure you would like to Delete?",
|
|
icon: "warning",
|
|
buttonsStyling: false,
|
|
showDenyButton: true,
|
|
confirmButtonText: "Yes",
|
|
denyButtonText: 'No',
|
|
customClass: {
|
|
confirmButton: "btn btn-primary",
|
|
denyButton: "btn btn-light-danger"
|
|
}
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
|
|
alertLoading("Loading")
|
|
|
|
// set up ajax
|
|
initAjaxSetupToken();
|
|
|
|
const ajaxProp = {
|
|
url: "{{ url('video/delete') }}",
|
|
type: 'POST',
|
|
data: {
|
|
item_id: $(this).data('id')
|
|
},
|
|
};
|
|
|
|
//const id = $(this).data('id');
|
|
const id = "{{ $folderView->id }}";
|
|
|
|
$.ajax(ajaxProp).done(function(res) {
|
|
if (res.status) {
|
|
const url = "{{ url('video/folder') }}/" + id;
|
|
alertSuccessWithUrl('Notice', "Delete success", url);
|
|
hideLoading();
|
|
} else {
|
|
alertFail('Notice', res.message ?? "Unsuccessfully");
|
|
hideLoading();
|
|
}
|
|
}).fail(function(xhr, status, error) {
|
|
logAjaxError(xhr, status, error);
|
|
alertFail('Notice', error.message ?? "Unsuccessfully");
|
|
hideLoading();
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const copyButtons = document.querySelectorAll('.copy-button');
|
|
|
|
copyButtons.forEach(button => {
|
|
button.addEventListener('click', function() {
|
|
const urlToCopy = button.getAttribute('data-url');
|
|
|
|
// Copy the URL to the clipboard
|
|
navigator.clipboard.writeText(urlToCopy).then(() => {
|
|
alert(
|
|
'Link copied to clipboard!'
|
|
); // You can change this to a toast notification
|
|
}).catch(err => {
|
|
console.error('Could not copy text: ', err);
|
|
});
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
|
|
@endsection
|