Stratawiz
/
Rapport-Laravel
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

List Changes

This commit is contained in:
Ravi Gulhane 2026-08-14 13:50:17 +05:30
parent 3037f38e04
commit 44a531ffaf
3 changed files with 525 additions and 331 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

232
resources/views/form/list.blade.php
View File

@ -19,11 +19,9 @@
<h4 class="page-title">{{$formname}}</h4> <h4 class="page-title">{{$formname}}</h4>
</div> </div>
<div class="col-4 p-2"> <div class="col-4 p-2">
<a href="/form/downloaddata?form_id={{$form_id}}" id="download-btn" class="btn btn-info btn-xs float-end">Download</a> <button type="button" id="export-btn" class="btn btn-info btn-xs float-end" data-bs-toggle="modal" data-bs-target="#export-modal">Export</button>
<button type="button" id="emailme" class="btn btn-warning btn-xs float-end me-2">Email</button>
</div> </div>
<div class="col-12"> <div class="col-12">
<p>Showing data for last 30 days, please use above button "Download" to download all submissions</p>
</div> </div>
</div> </div>
<!-- end page title --> <!-- end page title -->
@ -72,6 +70,15 @@
@if(isset($formdata) && isset($formdata->workflow) && $formdata->workflow == 'yes' ) @if(isset($formdata) && isset($formdata->workflow) && $formdata->workflow == 'yes' )
<th data-priority="1">Workflow Status</th> <th data-priority="1">Workflow Status</th>
@endif @endif
@foreach(($positionColumns ?? []) as $positionField)
<th data-priority="1">{{ ucfirst($positionField) }}</th>
@endforeach
@if(isset($form) && isset($form->show_manager_details) && $form->show_manager_details == 'yes' )
<th data-priority="1">L1 Manager</th>
<th data-priority="1">L1 Employee Code</th>
<th data-priority="1">L2 Manager</th>
<th data-priority="1">L2 Employee Code</th>
@endif
@foreach($questions as $code => $question) @foreach($questions as $code => $question)
@if($question->type == 'hidden') @if($question->type == 'hidden')
@continue @continue
@ -105,6 +112,33 @@
</div> </div>
</div> </div>
<div class="modal fade" id="export-modal" tabindex="-1" role="dialog" aria-labelledby="export-modal-label" aria-hidden="true">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="export-modal-label">Export</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="mb-2">
<label for="export-startdate" class="form-label">Start Date</label>
<input type="date" class="form-control form-control-sm" id="export-startdate" required>
</div>
<div class="mb-2">
<label for="export-enddate" class="form-label">End Date</label>
<input type="date" class="form-control form-control-sm" id="export-enddate" required>
</div>
<div id="export-date-error" class="text-danger small d-none"></div>
<small class="text-muted">Maximum date range is 12 months.</small>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning btn-sm" id="export-email-btn">Email</button>
<button type="button" class="btn btn-info btn-sm" id="export-download-btn">Download</button>
</div>
</div>
</div>
</div>
<style type="text/css"> <style type="text/css">
#pageloader { #pageloader {
background: rgba( 255, 255, 255, 0.8 ); background: rgba( 255, 255, 255, 0.8 );
@ -195,6 +229,15 @@
@if(isset($formdata) && isset($formdata->workflow) && $formdata->workflow == 'yes' ) @if(isset($formdata) && isset($formdata->workflow) && $formdata->workflow == 'yes' )
{ "data": "workflow_status" }, { "data": "workflow_status" },
@endif @endif
@foreach(($positionColumns ?? []) as $positionField)
{ "data": "{{ $positionField }}" },
@endforeach
@if(isset($form) && isset($form->show_manager_details) && $form->show_manager_details == 'yes')
{ "data": "manager1_name" },
{ "data": "manager1_code" },
{ "data": "manager2_name" },
{ "data": "manager2_code" },
@endif
@foreach($questions as $code => $question) @foreach($questions as $code => $question)
@if($question->type == 'hidden') @if($question->type == 'hidden')
@continue @continue
@ -237,20 +280,85 @@
@endforeach @endforeach
], ],
"initComplete": function(settings, json) { "initComplete": function(settings, json) {
var api = this.api();
var textBox = $('.dataTables_filter label input'); var textBox = $('.dataTables_filter label input');
textBox.unbind(); textBox.unbind();
textBox.bind('keyup input', function(e) { textBox.on('keydown', function(e) {
if(e.keyCode == 8 && !textBox.val() || e.keyCode == 46 && !textBox.val()) { if (e.keyCode === 13) {
// do nothing e.preventDefault();
} else if(e.keyCode == 13 || !textBox.val()) { runServerSearch($(this).val());
api.search(this.value).draw(); }
});
textBox.on('input', function() {
if (!$(this).val()) {
runServerSearch('');
} }
}); });
} }
}); });
let lastkey = '{{$lastkey}}'; let lastkey = '{{$lastkey}}';
let currentFilterParams = {};
function runServerSearch(keyword) {
currentFilterParams = Object.assign({}, currentFilterParams, {
form_id: $('#form_id').val(),
startdate: $('#startdate').val(),
enddate: $('#enddate').val()
});
keyword = (keyword || '').trim();
if (keyword) {
currentFilterParams.keyword = keyword;
} else {
delete currentFilterParams.keyword;
}
lastkey = 1;
loadRows(lastkey, false, currentFilterParams);
}
function parseYmd(ymd) {
var parts = String(ymd || '').split('-');
if (parts.length !== 3) return null;
var y = parseInt(parts[0], 10);
var m = parseInt(parts[1], 10) - 1;
var d = parseInt(parts[2], 10);
if (isNaN(y) || isNaN(m) || isNaN(d)) return null;
var date = new Date(y, m, d);
if (date.getFullYear() !== y || date.getMonth() !== m || date.getDate() !== d) return null;
return date;
}
function addMonthsClamped(date, months) {
var y = date.getFullYear();
var m = date.getMonth() + months;
var d = date.getDate();
var result = new Date(y, m, 1);
var lastDay = new Date(result.getFullYear(), result.getMonth() + 1, 0).getDate();
result.setDate(Math.min(d, lastDay));
return result;
}
function validateExportDateRange(startdate, enddate, silent) {
if (!startdate || !enddate) {
if (!silent) Swal.fire('Error!', 'Start date and end date are required.', 'error');
return false;
}
var start = parseYmd(startdate);
var end = parseYmd(enddate);
if (!start || !end) {
if (!silent) Swal.fire('Error!', 'Start date or end date is invalid.', 'error');
return false;
}
if (end < start) {
if (!silent) Swal.fire('Error!', 'End date must be on or after start date.', 'error');
return false;
}
var maxEnd = addMonthsClamped(start, 12);
if (end > maxEnd) {
if (!silent) Swal.fire('Error!', 'Date range must not exceed 12 months.', 'error');
return false;
}
return true;
}
function bindRowActions() { function bindRowActions() {
$('.btn-edit').off('click').on('click', function(){ $('.btn-edit').off('click').on('click', function(){
@ -346,10 +454,10 @@
partition: '{{ $formdata->partition ?? '' }}', partition: '{{ $formdata->partition ?? '' }}',
limit: 50 limit: 50
}; };
params['user_id'] = '{{ $formdata->user_id ?? '' }}';
@if(isset($formdata->all_data_access) && $formdata->all_data_access == 1) @if(isset($formdata->all_data_access) && $formdata->all_data_access == 1)
params['alldata'] = 1; params['alldata'] = 1;
@else @else
params['user_id'] = '{{ $formdata->user_id ?? '' }}';
params['team_report'] = 1; params['team_report'] = 1;
@endif @endif
@ -383,14 +491,16 @@
}); });
} }
let currentFilterParams = {};
$('#apply-date-range').on('click', function() { $('#apply-date-range').on('click', function() {
var keyword = currentFilterParams.keyword || '';
currentFilterParams = { currentFilterParams = {
form_id: $('#form_id').val(), form_id: $('#form_id').val(),
startdate: $('#startdate').val(), startdate: $('#startdate').val(),
enddate: $('#enddate').val() enddate: $('#enddate').val()
}; };
if (keyword) {
currentFilterParams.keyword = keyword;
}
lastkey = 1; lastkey = 1;
loadRows(lastkey, false, currentFilterParams); loadRows(lastkey, false, currentFilterParams);
}); });
@ -408,17 +518,84 @@
} }
}); });
$('.btn-primary').click(function(){ $('#export-modal').on('show.bs.modal', function() {
$("#pageloader").fadeIn(); $('#export-startdate').val($('#startdate').val() || '');
$('#export-enddate').val($('#enddate').val() || '');
$('#export-date-error').addClass('d-none').text('');
syncExportDateLimits();
}); });
$('#emailme').click(function(){ function formatYmd(date) {
var y = date.getFullYear();
var m = String(date.getMonth() + 1).padStart(2, '0');
var d = String(date.getDate()).padStart(2, '0');
return y + '-' + m + '-' + d;
}
function syncExportDateLimits() {
var startdate = $('#export-startdate').val() || '';
var enddate = $('#export-enddate').val() || '';
var start = parseYmd(startdate);
var end = parseYmd(enddate);
var $startInput = $('#export-startdate');
var $endInput = $('#export-enddate');
var $error = $('#export-date-error');
$startInput.removeAttr('max');
$endInput.removeAttr('min').removeAttr('max');
if (start) {
$endInput.attr('min', startdate);
$endInput.attr('max', formatYmd(addMonthsClamped(start, 12)));
}
if (end) {
$startInput.attr('max', enddate);
$startInput.attr('min', formatYmd(addMonthsClamped(end, -12)));
}
if (startdate && enddate && !validateExportDateRange(startdate, enddate, true)) {
var msg = 'Date range must not exceed 12 months.';
if (end && start && end < start) {
msg = 'End date must be on or after start date.';
}
$error.removeClass('d-none').text(msg);
return false;
}
$error.addClass('d-none').text('');
return true;
}
$('#export-startdate, #export-enddate').on('change input', function() {
syncExportDateLimits();
});
$('#export-download-btn').on('click', function(e) {
e.preventDefault();
var startdate = $('#export-startdate').val() || '';
var enddate = $('#export-enddate').val() || '';
if (!validateExportDateRange(startdate, enddate)) {
syncExportDateLimits();
return false;
}
var url = '/form/downloaddata?form_id=' + encodeURIComponent(formId)
+ '&startdate=' + encodeURIComponent(startdate)
+ '&enddate=' + encodeURIComponent(enddate);
window.location.href = url;
$('#export-modal').modal('hide');
});
$('#export-email-btn').on('click', function(e) {
e.preventDefault();
var startdate = $('#export-startdate').val() || '';
var enddate = $('#export-enddate').val() || '';
if (!validateExportDateRange(startdate, enddate)) {
syncExportDateLimits();
return false;
}
$("#pageloader").fadeIn(); $("#pageloader").fadeIn();
var startdate = $('#startdate').val() || ''; var url = '/form/downloaddata?email=1&form_id=' + encodeURIComponent(formId)
var enddate = $('#enddate').val() || ''; + '&startdate=' + encodeURIComponent(startdate)
var url = '/form/downloaddata?email=1&form_id=' + encodeURIComponent(formId); + '&enddate=' + encodeURIComponent(enddate);
if (startdate) url += '&startdate=' + encodeURIComponent(startdate);
if (enddate) url += '&enddate=' + encodeURIComponent(enddate);
$.ajax({ $.ajax({
type: "GET", type: "GET",
@ -426,22 +603,15 @@
success: function() { success: function() {
$('#notifications').append('<div class="alert alert-success">Email Sent Successfully</div>'); $('#notifications').append('<div class="alert alert-success">Email Sent Successfully</div>');
$("#pageloader").fadeOut(); $("#pageloader").fadeOut();
$('#export-modal').modal('hide');
}, },
error: function() { error: function(xhr) {
$("#pageloader").fadeOut(); $("#pageloader").fadeOut();
Swal.fire('Error!', 'Could not send email.', 'error'); var message = xhr.responseJSON?.message || 'Could not send email.';
Swal.fire('Error!', message, 'error');
} }
}); });
}); });
$('#startdate, #enddate').on('change', function(){
var startdate = $('#startdate').val() || '';
var enddate = $('#enddate').val() || '';
var url = '/form/downloaddata?form_id=' + encodeURIComponent(formId);
if (startdate) url += '&startdate=' + encodeURIComponent(startdate);
if (enddate) url += '&enddate=' + encodeURIComponent(enddate);
$('#download-btn').attr('href', url);
});
}); });
</script> </script>
</body> </body>

602
resources/views/form/personalization-1694503336-f9a0ca13-2b04-4b76-8a1e-4c8f01e8a15f.blade.php
View File

@ -1,296 +1,308 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
@include('layouts.shared/title-meta', ['title' => "Form"]) @include('layouts.shared/title-meta', ['title' => "Form"])
@include('layouts.shared/head-css', ["mode" => $mode ?? '', "demo" => $demo ?? '']) @include('layouts.shared/head-css', ["mode" => $mode ?? '', "demo" => $demo ?? ''])
<link href="{{asset('assets/libs/sweetalert2/sweetalert2.min.css')}}" rel="stylesheet" type="text/css" /> <link href="{{asset('assets/libs/sweetalert2/sweetalert2.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{ URL::asset('assets/libs/cropper/cropper.min.css')}}" rel="stylesheet" type="text/css" /> <link href="{{ URL::asset('assets/libs/cropper/cropper.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{ URL::asset('assets/libs/dropify/dropify.min.css') }}" rel="stylesheet" type="text/css" /> <link href="{{ URL::asset('assets/libs/dropify/dropify.min.css') }}" rel="stylesheet" type="text/css" />
</head> </head>
<div id="pageloader"> <div id="pageloader">
<img src="http://cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.16.1/images/loader-large.gif" alt="processing..." /> <img src="http://cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.16.1/images/loader-large.gif" alt="processing..." />
</div> </div>
<body class="loading"> <body class="loading">
<div class="account-pages"> <div class="account-pages">
<div class="container"> <div class="container">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-md-8 col-lg-6 col-xl-5 p-0"> <div class="col-md-8 col-lg-6 col-xl-5 p-0">
<div class="card bg-pattern"> <div class="card bg-pattern">
<div class="card-body p-3 row"> <div class="card-body p-3 row">
@if(Session::has('error'))<div class="alert alert-danger">{{Session::get('error')}}</div> @if(Session::has('error'))<div class="alert alert-danger">{{Session::get('error')}}</div>
<br>@endif <br>@endif
@if(session('success'))<div class=" alert alert-success">{{ session('success') }} @if(session('success'))<div class=" alert alert-success">{{ session('success') }}
</div> </div>
<br>@endif <br>@endif
<div class="col-8"> <div class="col-8">
<h4 class="page-title">{{$form->title}}</h4> <h4 class="page-title">{{$form->title}}</h4>
</div> </div>
<div id="template-wrapper" class="row"> <div id="template-wrapper" class="row">
<h5>Select any one of the templates</h5> <h5>Select any one of the templates</h5>
@foreach($personalizations as $pers) @foreach($personalizations as $pers)
<div class="col-6 col-md-4 mt-3"> <div class="col-6 col-md-4 mt-3">
<img src="{{$pers->icon}}" class="img-fluid" persdata='{!! json_encode($pers) !!}'><br /> <img src="{{$pers->icon}}" class="img-fluid" persdata='{!! json_encode($pers) !!}'><br />
<span>{{$pers->title}}</span> <span>{{$pers->title}}</span>
</div> </div>
@endforeach @endforeach
</div> </div>
<div id="form-wrapper"> <div id="form-wrapper">
<form method="POST" action="/form/submitpersonalized" id="report-form" enctype="multipart/form-data"> <form method="POST" action="/form/submitpersonalized" id="report-form" enctype="multipart/form-data">
<input type="hidden" name="form_id" value="{{$form_id}}"> <input type="hidden" name="form_id" value="{{$form_id}}">
<input type="hidden" name="form_info" id="form_info" value=""> <input type="hidden" name="form_info" id="form_info" value="">
@csrf @csrf
<div class="row"> <div class="row">
<div class="col-7"> <div class="col-7">
<label for="field-template_id" class="form-label"> Selected Template </label> <label for="field-template_id" class="form-label"> Selected Template </label>
</div> </div>
<div class="col-4 mb-2" id="wrapper-template_id"> <div class="col-4 mb-2" id="wrapper-template_id">
<img src="" class="img-thumbnail" style="max-height:150px"> <img src="" class="img-thumbnail" style="max-height:150px">
</div> </div>
<br class="clearfix" /> <br class="clearfix" />
@foreach($questions as $question) @foreach($questions as $question)
<div class="col-md-12 mb-2 question-wrapper" id="wrapper-{{$question->id}}"> <div class="col-md-12 mb-2 question-wrapper" id="wrapper-{{$question->id}}">
<label for="field-{{$question->code}}" class="form-label">{{$question->question}} <span class="req-star text-danger" style="display:none" aria-hidden="true">*</span> </label> <label for="field-{{$question->code}}" class="form-label">{{$question->question}} <span class="req-star text-danger" style="display:none" aria-hidden="true">*</span> </label>
@switch($question->type) @switch($question->type)
@case('hidden') @case('hidden')
<input type="{{$question->type}}" id="field-{{$question->code}}" name="{{$question->code}}" value="{{isset($question->value)?$question->value:''}}"> <input type="{{$question->type}}" id="field-{{$question->code}}" name="{{$question->code}}" value="{{isset($question->value)?$question->value:''}}">
@break @break
@case('text') @case('text')
@case('email') @case('email')
@case('tel') @case('tel')
@case('date') @case('date')
<input type="{{$question->type}}" id="field-{{$question->code}}" name="{{$question->code}}" class="form-control" value="{{isset($question->value)?$question->value:''}}" maxlength={{ isset($question->code) ? ($question->code == 'message_body' ? '220' : '') : '' }}> <input type="{{$question->type}}" id="field-{{$question->code}}" name="{{$question->code}}" class="form-control" value="{{isset($question->value)?$question->value:''}}" maxlength={{ isset($question->code) ? ($question->code == 'message_body' ? '220' : '') : '' }}>
@break @break
@case('number') @case('number')
<input type="{{$question->type}}" min="0" max="9999999999" step="1" id="field-{{$question->code}}" name="{{$question->code}}" class="form-control" value="{{isset($question->value)?$question->value:0}}"> <input type="{{$question->type}}" min="0" max="9999999999" step="1" id="field-{{$question->code}}" name="{{$question->code}}" class="form-control" value="{{isset($question->value)?$question->value:0}}">
@break @break
@case('textarea') @case('textarea')
<textarea id="field-{{$question->code}}" name="{{$question->code}}" class="form-control" >{{isset($question->value)?$question->value:''}}</textarea> <textarea id="field-{{$question->code}}" name="{{$question->code}}" class="form-control" >{{isset($question->value)?$question->value:''}}</textarea>
@break @break
@case('dropdown') @case('dropdown')
<select class="form-control" id="field-{{$question->code}}" name="{{$question->code}}" > <select class="form-control" id="field-{{$question->code}}" name="{{$question->code}}" >
<option value=""> -- Select -- </option> <option value=""> -- Select -- </option>
@foreach($question->options as $option) @foreach($question->options as $option)
<option value="{{$option->value}}" {{isset($question->value) && $question->value == $option->value ? 'selected':''}}>{{$option->display}}</option> <option value="{{$option->value}}" {{isset($question->value) && $question->value == $option->value ? 'selected':''}}>{{$option->display}}</option>
@endforeach @endforeach
</select> </select>
@break @break
@case('checkbox') @case('checkbox')
@foreach($question->options as $option) @foreach($question->options as $option)
<div class="form-check mb-2 form-check-primary"> <div class="form-check mb-2 form-check-primary">
<input class="form-check-input" type="checkbox" id="field-{{$question->code}}-{{$option->value}}" name="{{$question->code}}[]" value="{{$option->value}}" {{isset($question->value) && $question->value != '' && in_array($option->value, $question->value) ? 'checked':''}}> <input class="form-check-input" type="checkbox" id="field-{{$question->code}}-{{$option->value}}" name="{{$question->code}}[]" value="{{$option->value}}" {{isset($question->value) && $question->value != '' && in_array($option->value, $question->value) ? 'checked':''}}>
<label class="form-check-label" for="field-{{$question->code}}-{{$option->value}}">{{$option->display}}</label> <label class="form-check-label" for="field-{{$question->code}}-{{$option->value}}">{{$option->display}}</label>
</div> </div>
@endforeach @endforeach
@break @break
@case('file') @case('file')
<input type="file" name="{{$question->code}}" class="dropify" <input type="file" name="{{$question->code}}" class="dropify"
data-allowed-file-extensions="png jpg jpeg" /> data-allowed-file-extensions="png jpg jpeg" />
<p class="text-muted text-center mt-2 mb-0">500MB Max File size</p> <p class="text-muted text-center mt-2 mb-0">500MB Max File size</p>
@break @break
@case('multitextbox') @case('multitextbox')
<div class="row"> <div class="row">
@foreach($question->options as $option) @foreach($question->options as $option)
<div class="col-6">{{$option->display}}</div> <div class="col-6">{{$option->display}}</div>
<div class="col-6 mb-1"> <div class="col-6 mb-1">
<input type="text" id="field-{{$option->value}}" name="{{$option->value}}" class="form-control" value="{{isset($option->val)?$option->val:''}}"> <input type="text" id="field-{{$option->value}}" name="{{$option->value}}" class="form-control" value="{{isset($option->val)?$option->val:''}}">
</div> </div>
@endforeach @endforeach
</div> </div>
@break @break
@endswitch @endswitch
</div> </div>
@endforeach @endforeach
@if(!isset($form->is_approval) || (isset($form->is_approval) && $form->is_approval != 'yes' ) ) @if(!isset($form->is_approval) || (isset($form->is_approval) && $form->is_approval != 'yes' ) )
<div class="text-center d-grid mt-3"> <div class="text-center d-grid mt-3">
<button class="btn btn-primary" type="submit" id="submit-btn"> Submit </button> <button class="btn btn-primary" type="submit" id="submit-btn"> Submit </button>
</div> </div>
@endif @endif
</div> </div>
</form> </form>
</div> </div>
<div id="cropper-wrapper"> <div id="cropper-wrapper">
<form method="POST" action="/form/submitpersonalizedimages" id="image-form" enctype="multipart/form-data"> <form method="POST" action="/form/submitpersonalizedimages" id="image-form" enctype="multipart/form-data">
<input type="hidden" name="form_id" value="{{$form_id}}"> <input type="hidden" name="form_id" value="{{$form_id}}">
@csrf @csrf
<div class="row"> <div class="row">
<div class="col-12 img-container"> <div class="col-12 img-container">
</div> </div>
<div class="col-12 mt-1"> <div class="col-12 mt-1">
<button class="btn btn-primary" id="cropandgo">Use Image and download</button> <button class="btn btn-primary" id="cropandgo">Use Image and download</button>
</div> </div>
</div> </div>
</form> </form>
</div> </div>
</div> <!-- end card-body --> </div> <!-- end card-body -->
</div> </div>
<!-- end card --> <!-- end card -->
<!-- end row --> <!-- end row -->
</div> <!-- end col --> </div> <!-- end col -->
</div> </div>
<!-- end row --> <!-- end row -->
</div> </div>
<!-- end container --> <!-- end container -->
</div> </div>
<!-- end page --> <!-- end page -->
<style type="text/css"> <style type="text/css">
#pageloader { #pageloader {
background: rgba( 255, 255, 255, 0.8 ); background: rgba( 255, 255, 255, 0.8 );
display: none; display: none;
height: 100%; height: 100%;
position: fixed; position: fixed;
width: 100%; width: 100%;
z-index: 9999; z-index: 9999;
} }
#pageloader img { #pageloader img {
left: 50%; left: 50%;
margin-left: -32px; margin-left: -32px;
margin-top: -32px; margin-top: -32px;
position: absolute; position: absolute;
top: 50%; top: 50%;
} }
</style> </style>
@include('layouts.shared/footer-script') @include('layouts.shared/footer-script')
<script src="{{asset('assets/libs/sweetalert2/sweetalert2.min.js')}}"></script> <script src="{{asset('assets/libs/sweetalert2/sweetalert2.min.js')}}"></script>
<script src="{{asset('assets/libs/cropper/cropper.min.js')}}"></script> <script src="{{asset('assets/libs/cropper/cropper.min.js')}}"></script>
<script src="{{ URL::asset('assets/libs/dropify/dropify.min.js') }}"></script> <script src="{{ URL::asset('assets/libs/dropify/dropify.min.js') }}"></script>
<script type="text/javascript"> <script type="text/javascript">
jQuery(document).ready(function($){ jQuery(document).ready(function($){
$('#form-wrapper').hide() $('#form-wrapper').hide()
$('#cropper-wrapper').hide() $('#cropper-wrapper').hide()
$('#template-wrapper .img-fluid').click(function(){ $('#template-wrapper .img-fluid').click(function(){
$('#form_info').val( $(this).attr('persdata') ) $('#form_info').val( $(this).attr('persdata') )
console.log($(this).attr('persdata')) console.log($(this).attr('persdata'))
let personalize = JSON.parse( $(this).attr('persdata') ) let personalize = JSON.parse( $(this).attr('persdata') )
$('.question-wrapper').hide() $('.question-wrapper').hide()
$('#report-form .question-wrapper').each(function () { $('#report-form .question-wrapper').each(function () {
$(this).find('.req-star').hide() $(this).find('.req-star').hide()
$(this).find(':input').removeAttr('required') $(this).find(':input').removeAttr('required')
}) })
for(let que of personalize.questions) { for(let que of personalize.questions) {
let $w = $('#wrapper-'+que) let $w = $('#wrapper-'+que)
$w.show() $w.show()
$w.find('.req-star').show() $w.find('.req-star').show()
$w.find('input:not([type="hidden"]):not([type="checkbox"]), textarea, select').attr('required', 'required') $w.find('input:not([type="hidden"]):not([type="checkbox"]), textarea, select').attr('required', 'required')
} }
$('#report-form :input').removeAttr('readonly') $('#report-form :input').removeAttr('readonly')
$('#wrapper-template_id img').attr('src', personalize.icon) $('#wrapper-template_id img').attr('src', personalize.icon)
$('#template-wrapper').hide() $('#template-wrapper').hide()
$('#form-wrapper').show() $('#form-wrapper').show()
// $('.dropify').unbind() // $('.dropify').unbind()
// $('.dropify').dropify({ // $('.dropify').dropify({
// messages: { // messages: {
// 'default': 'Drag and drop a file here or click', // 'default': 'Drag and drop a file here or click',
// 'replace': 'Drag and drop or click to replace', // 'replace': 'Drag and drop or click to replace',
// 'remove': 'Remove', // 'remove': 'Remove',
// 'error': 'Ooops, something wrong appended.' // 'error': 'Ooops, something wrong appended.'
// }, // },
// error: { // error: {
// 'fileSize': 'The file size is too big (500MB max).' // 'fileSize': 'The file size is too big (500MB max).'
// } // }
// }); // });
}) })
$('.dropify').dropify({ $('.dropify').dropify({
messages: { messages: {
'default': 'Drag and drop a file here or click', 'default': 'Drag and drop a file here or click',
'replace': 'Drag and drop or click to replace', 'replace': 'Drag and drop or click to replace',
'remove': 'Remove', 'remove': 'Remove',
'error': 'Ooops, something wrong appended.' 'error': 'Ooops, something wrong appended.'
}, },
error: { error: {
'fileSize': 'The file size is too big (500MB max).' 'fileSize': 'The file size is too big (500MB max).'
} }
}); });
$('#wrapper-template_id img').click(function(){ $('#wrapper-template_id img').click(function(){
$('#form-wrapper').hide() $('#form-wrapper').hide()
$('#cropper-wrapper').hide() $('#cropper-wrapper').hide()
$('#template-wrapper').show() $('#template-wrapper').show()
}) })
$('#report-form').on('submit', function(event){ $('#report-form').on('submit', function(event){
event.preventDefault(); event.preventDefault();
$("#pageloader").fadeIn(); $("#pageloader").fadeIn();
$.ajax({ $.ajax({
type: "POST", type: "POST",
url: '/form/submitpersonalized', url: '/form/submitpersonalized',
data: new FormData($('#report-form')[0]), data: new FormData($('#report-form')[0]),
processData: false, processData: false,
contentType: false, contentType: false,
success: function( data ) { success: function( data ) {
$('#cropper-wrapper').show() console.log(data)
$('#form-wrapper').hide() // Skip cropper when this template has no image overlay or no image was uploaded
$("#pageloader").fadeOut(); var hasImageOverlay = false
console.log(data) if (data.form_info && data.form_info.positions) {
if(data.hasOwnProperty('images_fields') && data.images_fields.length > 0 ) { try {
for(let im of data.images_fields) { hasImageOverlay = data.form_info.positions.some(function (p) {
let pos = data.form_info.positions.map(p => JSON.parse(p)) var positions = typeof p === 'string' ? JSON.parse(p) : p
console.log(pos) return Array.isArray(positions) && positions.some(function (pi) { return pi && pi.type === 'image' })
pos = pos.map(p => p.find(pi => pi.field_name == im ) ) })
console.log(pos) } catch (e) {}
pos = pos[0] }
//im = JSON.parse(im) if (data.skip_cropper || data.redirect || !hasImageOverlay || !(data.images_fields && data.images_fields.length > 0)) {
console.log(pos) document.location.href = data.redirect || '/form/generatepersonalization'
//if(im.type == 'image') { return
$('.img-container').append(`<div class="mt-5"> }
<img id="image-${im}" src="${data[im]}" alt="Picture" class="img-fluid"> $('#form-wrapper').hide()
<input type="hidden" id="field-image-${im}" name="${im}" value=""> $('#cropper-wrapper').show()
</div>`) $("#pageloader").fadeOut();
$('#cropper-wrapper #image-'+im).attr('src', data[im]) if(data.hasOwnProperty('images_fields') && data.images_fields.length > 0 ) {
var tmpImg = new Image() ; for(let im of data.images_fields) {
tmpImg.src = data[im]; let pos = data.form_info.positions.map(p => JSON.parse(p))
tmpImg.onload = function() { console.log(pos)
let $image = $('#image-'+im); pos = pos.map(p => p.find(pi => pi.field_name == im ) )
let options = { console.log(pos)
aspectRatio: pos.width/pos.height, pos = pos[0]
crop: function (e) { //im = JSON.parse(im)
console.log(e); console.log(pos)
}, //if(im.type == 'image') {
cropend: function (e) { $('.img-container').append(`<div class="mt-5">
$('#field-image-'+im).val($image.cropper("getCroppedCanvas", { maxWidth: pos.width*2, maxHeight: pos.height*2 }).toDataURL()); <img id="image-${im}" src="${data[im]}" alt="Picture" class="img-fluid">
}, <input type="hidden" id="field-image-${im}" name="${im}" value="">
ready: function (e) { </div>`)
$('#field-image-'+im).val($image.cropper("getCroppedCanvas", { maxWidth: pos.width*2, maxHeight: pos.height*2 }).toDataURL()); $('#cropper-wrapper #image-'+im).attr('src', data[im])
}, var tmpImg = new Image() ;
}; tmpImg.src = data[im];
$image.cropper(options); tmpImg.onload = function() {
} let $image = $('#image-'+im);
//} let options = {
} aspectRatio: pos.width/pos.height,
} else { crop: function (e) {
document.location.href = '/form/generatepersonalization' console.log(e);
} },
cropend: function (e) {
}, $('#field-image-'+im).val($image.cropper("getCroppedCanvas", { maxWidth: pos.width*2, maxHeight: pos.height*2 }).toDataURL());
}); },
}); ready: function (e) {
$('#field-image-'+im).val($image.cropper("getCroppedCanvas", { maxWidth: pos.width*2, maxHeight: pos.height*2 }).toDataURL());
// $('#image-form').on('submit', function(event){ },
// event.preventDefault(); };
// $("#pageloader").fadeIn(); $image.cropper(options);
// $.ajax({ }
// type: "POST", //}
// url: '/form/submitpersonalizedimages', }
// data: new FormData($('#image-form')[0]), }
// processData: false,
// contentType: false, },
// success: function( data ) { });
// console.log(data) });
// },
// }); // $('#image-form').on('submit', function(event){
// }); // event.preventDefault();
// $("#pageloader").fadeIn();
}); // $.ajax({
</script> // type: "POST",
</body> // url: '/form/submitpersonalizedimages',
// data: new FormData($('#image-form')[0]),
// processData: false,
// contentType: false,
// success: function( data ) {
// console.log(data)
// },
// });
// });
});
</script>
</body>
</html> </html>

22
resources/views/form/personalization.blade.php
View File

@ -227,10 +227,24 @@
processData: false, processData: false,
contentType: false, contentType: false,
success: function( data ) { success: function( data ) {
$('#cropper-wrapper').show()
$('#form-wrapper').hide()
$("#pageloader").fadeOut();
console.log(data) console.log(data)
// Skip cropper when this template has no image overlay or no image was uploaded
var hasImageOverlay = false
if (data.form_info && data.form_info.positions) {
try {
hasImageOverlay = data.form_info.positions.some(function (p) {
var positions = typeof p === 'string' ? JSON.parse(p) : p
return Array.isArray(positions) && positions.some(function (pi) { return pi && pi.type === 'image' })
})
} catch (e) {}
}
if (data.skip_cropper || data.redirect || !hasImageOverlay || !(data.images_fields && data.images_fields.length > 0)) {
document.location.href = data.redirect || '/form/generatepersonalization'
return
}
$('#form-wrapper').hide()
$('#cropper-wrapper').show()
$("#pageloader").fadeOut();
if(data.hasOwnProperty('images_fields') && data.images_fields.length > 0 ) { if(data.hasOwnProperty('images_fields') && data.images_fields.length > 0 ) {
for(let im of data.images_fields) { for(let im of data.images_fields) {
let pos = data.form_info.positions.map(p => JSON.parse(p)) let pos = data.form_info.positions.map(p => JSON.parse(p))
@ -266,8 +280,6 @@
} }
//} //}
} }
} else {
document.location.href = '/form/generatepersonalization'
} }
}, },