Rapport-Laravel/resources/views/form/list-console.blade.php

77 lines
2.6 KiB
PHP

@extends('layouts.vertical', ["page_title"=> "Dashboard", "mode" => $mode ?? "", "demo" => $demo ?? ""])
@section('content')
<div class="account-pages">
<div class="container">
<div class="row">
<div class="col-8 p-2">
<h4 class="page-title">Quick Actions</h4>
</div>
</div>
<div class="row">
@foreach($actions as $action)
@if($action->target == 'internal_action')
@continue;
@endif
<div class="col-sm-6 col-md-4 col-xl-3">
<div class="card">
<div class="card-body action-card" data-url="{{$action->url}}" style="cursor: pointer;">
<img src="{{$action->icon}}" alt="image" class="img-fluid rounded" width="200" />
<p class="mt-1 text-truncate">{{$action->name}}</p>
</div>
</div> <!-- end card-->
</div> <!-- end col -->
@endforeach
</div>
<!-- end row-->
</div>
<!-- end container -->
</div>
<!-- Long Content Scroll Modal -->
<div class="modal fade" id="scrollable-modal" tabindex="-1" role="dialog" aria-labelledby="scrollableModalTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="scrollableModalTitle">Modal title</h5>
<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">
.responsive-iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
.modal-content {
height: 90vh;
}
</style>
@endsection
@section('script')
<script type="text/javascript">
$(document).ready(function(){
$('.action-card').click(function(){
var src = $(this).attr('data-url');
$('#scrollable-modal #scrollableModalTitle').html( $(this).find('.text-truncate').html() );
$('#scrollable-modal .modal-body').empty().append(
$('<iframe>', { 'class': 'responsive-iframe', frameborder: 0, src: src })
);
$('#scrollable-modal').modal('show')
})
});
</script>
@endsection