Viewing file: bc194beff23336fc113cc4e0fd58fc74.php (34.86 KB) -rw-r--r-- Select action/file-type: (+) | (+) | (+) | Code (+) | Session (+) | (+) | SDB (+) | (+) | (+) | (+) | (+) | (+) |
<?php $__env->startSection('title', trans('customer.responder_create')); ?>
<?php $__env->startSection('extra-css'); ?> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <style> #zoom-container { width: 100%; height: 100vh; overflow: hidden; border: 1px solid #ccc; position: relative; }
#zoom-content { width: 100%; height: 100%; transition: transform 0.2s ease; cursor: grab; }
#zoom-content:active { cursor: grabbing; }
.main-root-section { background: #f4f6f9; border-radius: 5px; display: flex; justify-content: space-between; }
.custom-content { color: white; background-color: green; padding: 5px; border-radius: 5px; position: absolute; top: 0; left: 0; }
.draggable-item { height: 200px; width: 200px; border: 1px solid #afa6a6; margin: 10px; padding: 5px; cursor: grab; position: relative; background: #fafafa; }
.start_dot { position: absolute; top: 45%; left: -5px; height: 10px; width: 10px; overflow: hidden; }
.end_dot { position: absolute; top: 45%; right: -5px; height: 10px; width: 10px; overflow: hidden; cursor: cell; }
.dot-black { height: 9px; width: 9px; border-radius: 100%; background: black; }
.box-element-icon-section i { font-size: 11px !important; }
.box-element-title { font-size: 14px; font-weight: 600; }
.box-element-secondary-title { margin-top: 7px; font-size: 12px; }
.node-settings .node-settings-title { border-bottom: 1px solid #dad9d9; font-size: 16px; }
.add_new_element { cursor: pointer; padding: 5px; }
.preview_modal{ cursor: pointer; padding: 5px; } .delete_element{ padding: 3px; cursor: pointer !important; } .bg-grid-style{ background: #fff0; background-image: linear-gradient(rgb(237 241 237 / 65%) 0.1em, #cdcaca1a 0.1em), linear-gradient(90deg, rgb(220 223 220 / 41%) 0.1em, transparent 0.1em); background-size: 3em 3em; } </style> <?php $__env->stopSection(); ?>
<?php $__env->startSection('content'); ?> <!-- Main content --> <section class="content"> <div class="row"> <div class="col-12"> <div class="card"> <div class="card-header"> <h2 class="card-title"><?php echo e(trans('customer.responder_details')); ?></h2> <a class="btn btn-info float-right" href="<?php echo e(route('customer.responders.index')); ?>"><?php echo app('translator')->get('admin.form.button.back'); ?></a> </div> <!-- /.card-header --> <!-- form start --> <form action=""> <div class="row p-3 bg-grid-style"> <div class="col-md-2"> <div class="main-root-section p-2"> <h5>Root #1</h5> <span data-parent-node="root" id="add_new_element" class="float-right add_new_element"><i class="fa fa-plus"></i></span> </div> </div>
<div class="col-md-10" id="append_elements"> <div class="draggable-item d-none" data-reference=""> <div class="p-2"> <div> <span class="box-element-title"> Node #1.1 </span>
<span class="float-right box-element-icon-section"> <i class="fa fa-file d-none"></i> <i class="fa fa-eye ml-1 preview_modal"></i> <i class="fa fa-copy d-none ml-1"></i> <i class="fa fa-plus d-none ml-1"></i> </span> </div> <h6 class="mb-1 box-element-secondary-title"> 0 replied(2) </h6> <h6 class="mb-1 box-element-secondary-title"> 0 clicked(2) </h6> <h6 class="mb-1 box-element-secondary-title"> 0 listened(2) </h6> <h6 class="mb-1 box-element-secondary-title"><strong>Keyword</strong>: STOP</h6> <h6 class="mb-1 box-element-secondary-title"><strong>Intend</strong>: </h6> </div> <div class="start_dot"> <div class="dot-black"></div> </div> <div class="end_dot"> <div class="dot-black"></div> </div> </div>
<?php echo $return_html; ?>
</div> </div>
</form> </div>
</div> <!-- /.card --> </div> <!-- /.col --> </div> <!-- /.row --> </section> <!-- /.content -->
<!-- Modal --> <div class="modal fade" id="elementModal" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <form id="previewNodeForm"> <div class="modal-header"> <h5 class="modal-title">Node #<span id="previewNode"></span></h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <input type="hidden" name="current_details_id" class="current_details_id"> <div class="modal-body"> <div class="node-settings"> <p class="pb-2 node-settings-title"><b><?php echo e(trans('customer.node_settings')); ?></b></p> <?php echo csrf_field(); ?>
<div id="template_id_section">
</div> <div id="keyword_id_section">
</div> <div class="form-group"> <label class="mt-2" for=""><?php echo e(trans('customer.keyword')); ?></label> <textarea name="keyword" class="form-control keyword-section" cols="3" placeholder="<?php echo e(trans('Input Keyword')); ?>" rows="3"></textarea> </div>
<div class="form-group"> <label class="mt-2" for="group_id"><?php echo e(trans('customer.populate_contact_group')); ?></label> <select name="group_id" id="group_id" class="form-control single-select2" placeholder="<?php echo e(trans('Select Contact Group')); ?>"> <?php $__currentLoopData = $contact_groups; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $contact_group): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?> <option value="<?php echo e($contact_group->id); ?>"><?php echo e($contact_group->name); ?></option> <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?> </select> </div>
<div class="form-group"> <label for=""><?php echo e(trans('customer.on_fly_creatives')); ?></label> <button type="button" class="btn btn-outline-primary d-block w-100 add_more_fly"> <i class="fa fa-plus mr-2"></i> <?php echo e(trans('customer.add_more_on_fly_creatives')); ?>
</button> </div>
<div class="form-group create-new-template d-none"> <label for=""><?php echo e(trans('customer.title')); ?></label> <input type="text" class="form-control template_title" placeholder="Enter Template Title"> </div> <div class="form-group create-new-template d-none"> <label for=""><?php echo e(trans('customer.template_body')); ?></label> <textarea cols="3" rows="3" placeholder="Enter Template Body.." class="form-control template_body"></textarea> </div> <div class="form-group create-new-template justify-content-end d-none"> <button class="btn btn-danger btn-sm reset_template" type="button">Reset</button> <button class="btn btn-success btn-sm save_template" type="button">Save</button> </div>
<p class="pb-2 mt-2 node-settings-title"><b><?php echo e(trans('customer.intends')); ?></b></p> <div class="form-group" id="allIntends">
</div>
<p class="pb-2 mt-2 node-settings-title"><b><?php echo e(trans('Keyword Groups')); ?></b></p> <div class="form-group" id="keywordGroups"> <?php $__currentLoopData = $keyword_groups; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $keyword_group): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?> <button class="btn btn-outline-primary keyword_group_no_<?php echo e($keyword_group->id); ?> btn-sm choose_keyword ml-2" type="button" data-id="<?php echo e($keyword_group->id); ?>"><?php echo e($keyword_group->name); ?></button> <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?> </div>
</div>
</div> <div class="modal-footer"> <button id="savePreview" type="button" class="btn btn-primary">Save</button> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </form> </div> </div> </div>
<?php $__env->stopSection(); ?>
<?php $__env->startSection('extra-scripts'); ?> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script src="<?php echo e(asset('js/leader-line.min.js')); ?>"></script> <script> let lines = []; let isConnectingDots = false; let startLineId;
function lineAlreadyExist(start, end) { const index = lines[start + '-' + end]; if (index) { return true; } return false; }
function drawLine(start, end) { if (lineAlreadyExist(start, end)) { lines[start + '-' + end].position(); } else { const line = new LeaderLine( document.getElementById(start), document.getElementById(end), { dash: { animation: true }, color: '#000', size: 2, path: 'grid', startSocket: 'right', endSocket: 'left' } ); lines[start + '-' + end] = line; }
}
function triggerDraggable(selector) { $(selector).draggable({ containment: "parent", obstacle: ".draggable-item", preventCollision: true, start: function() { // $(this).addClass("d-none"); }, stop: function(event, ui) { // $(this).removeClass("d-none"); const draggedElementId = $(this).attr('id'); const relatedKeys = Object.keys(lines).filter(key => key.includes(draggedElementId)); relatedKeys.forEach((value) => { const draggedRef = value.split('-'); drawLine(draggedRef[0], draggedRef[1]); }); } }); };
function triggerMouseDownEvent(selector) { $(selector).on('mousedown', function(e) { e.preventDefault(); startLineId = $(this).parent().attr('id'); isConnectingDots = true; $(".draggable-item").draggable({ disabled: true }); }) }
triggerDraggable(".draggable-item"); triggerMouseDownEvent('.end_dot');
$(document).on('mouseup', function(e) { e.preventDefault(); if (isConnectingDots && startLineId) { if ($(e.target).closest('.draggable-item')) { const el = $(e.target).closest('.draggable-item'); const endLineId = el.attr('id'); if (endLineId) { drawLine(startLineId, endLineId); }
} $(".draggable-item").draggable({ disabled: false }); isConnectingDots = false; } startLineId = null;
}) </script>
<script> let scale = 1; let isDragging = false; let initialX = 0; let initialY = 0; let offsetX = 0; let offsetY = 0;
function zoom(event) { event.preventDefault();
const delta = event.deltaY || event.detail || event.wheelDelta;
// Adjust the scaling factor based on the direction of the scroll scale += delta > 0 ? -0.1 : 0.1;
// Set a minimum and maximum scale value scale = Math.min(Math.max(0.1, scale), 3);
// Apply the scale transformation to the content document.getElementById('zoom-content').style.transform = `scale(${scale}) translate(${offsetX}px, ${offsetY}px)`; }
function startDrag(event) { isDragging = true; initialX = event.clientX; initialY = event.clientY; }
function stopDrag() { isDragging = false; }
function drag(event) { if (isDragging) { event.preventDefault(); const x = event.clientX; const y = event.clientY; offsetX += x - initialX; offsetY += y - initialY; initialX = x; initialY = y;
// Apply the transform to the content document.getElementById('zoom-content').style.transform = `scale(${scale}) translate(${offsetX}px, ${offsetY}px)`; } } </script>
<script> let ResponderDetails=[];
$(document).on('click', '.preview_modal', function(e) { e.preventDefault();
$('#savePreview').html('Save'); $('#savePreview').removeAttr('disabled');
const detail_id=$(this).attr('data-detail-id'); $('.current_details_id').val(detail_id) $('.keyword-section').attr('data-detail-id', detail_id)
$('.add_more_fly').addClass('d-block').removeClass('d-none');
$('.create-new-template').addClass('d-none');
$('#elementModal').modal('show');
let find_spe_value=ResponderDetails.at(detail_id);
if(find_spe_value){
let templates = ''; if (find_spe_value.template) { templates = JSON.parse(find_spe_value.template);
$('.choose_template').removeClass('active');
$.each(templates, function (index, value) { $('.template_no_' + value).addClass('active'); }); }else{ $('.choose_template').removeClass('active'); }
let keyword_groups = ''; if (find_spe_value.keyword_groups) { keyword_groups = JSON.parse(find_spe_value.keyword_groups);
$('.choose_keyword').removeClass('active');
$.each(keyword_groups, function (index, value) { $('.keyword_group_no_' + value).addClass('active'); }); }else{ $('.choose_keyword').removeClass('active'); }
$('.keyword-section').val(find_spe_value.keyword) $('#group_id').val(find_spe_value.group).trigger('change'); }else{ $('.choose_template').removeClass('active'); $('#template_id_section').html(''); $('#group_id').val(''); $('#group_id').trigger('change'); $('.keyword-section').val('') }
});
$(document).on('click', '#savePreview', function(e){ e.preventDefault();
$('#savePreview').html(' <i class="fa fa-spinner fa-spin"></i> Loading'); $('#savePreview').attr('disabled', 'disabled');
const id=$('.current_details_id').val(); const keywords=$('.keyword-section').val(); const group_id=$('#group_id').val(); const style=$('.get_style_'+id).attr('style');
var templates = []; $('.choose_template.active').each(function() { templates.push($(this).attr('data-id')); }); let intends=[]; $('.choose_template.active').each(function() { intends.push($(this).attr('data-title')); }); let keyword_groups=[]; $('.choose_keyword.active').each(function() { keyword_groups.push($(this).attr('data-id')); });
$.ajax({ type:'POST', url:'<?php echo e(route('customer.responders.detail.store')); ?>', data:{ '_token':'<?php echo e(csrf_token()); ?>', id:id, 'responder_id':'<?php echo e($responder->id); ?>', 'keywords':keywords, 'group_id':group_id, 'templates':templates, 'keyword_groups':keyword_groups, 'style':style },
success:function(res){ if(res.status=='success'){ ResponderDetails[id]=res.data $('.current_details_id').val('');
$('#elementModal').modal('hide'); const tmp_intends=intends.join(', ') $('.show_intends_'+id).text(tmp_intends) } }
}); });
$(document).on('keyup or paste', '.keyword-section', function(e){
const detail_id=$(this).attr('data-detail-id'); const keyword=$(this).val(); $('.keyword_section_'+detail_id).text(keyword); });
$(document).ready(function() {
$('.single-select2').select2({ multiple: false, placeholder: '--Select Contact Group--' }); });
$(document).on('click', '.add_more_fly', function(e) {
$('.template_title').val(); $('.template_body').val();
$(this).addClass('d-none').removeClass('d-block');
$('.create-new-template').removeClass('d-none'); });
$(document).on('click', '.reset_template', function(e) {
$('.add_more_fly').addClass('d-block').removeClass('d-none');
$('.create-new-template').addClass('d-none'); });
$(document).on('click', '.save_template', function(e) {
$.ajax({ type: 'POST', url: '<?php echo e(route('customer.save.sms.template')); ?>', data: { title: $('.template_title').val(), 'body': $('.template_body').val(), '_token': '<?php echo e(csrf_token()); ?>' },
success: function(res) {
if (res.status == 'success') { getSmsTemplates();
$('.add_more_fly').addClass('d-block').removeClass('d-none'); $('.create-new-template').addClass('d-none'); } } })
});
$(document).ready(function() {
getSmsTemplates();
});
function getSmsTemplates() { $.ajax({ type: 'GET', url: '<?php echo e(route('customer.get.all.sms.templates')); ?>',
success: function(res) { if (res.status == 'success') { let templates_data = '';
$.each(res.data, function(index, value) { templates_data += `<button data-title="${value.title}" class="btn btn-outline-primary template_no_${value.id} btn-sm choose_template ml-2" type="button" data-id="${value.id}">${value.title}</button>`; });
$('#allIntends').html(templates_data)
} } }) }
$(document).on('click', '.choose_template', function(e) { e.preventDefault();
const id=$(this).attr('data-id');
if($(this).hasClass('active')){ $(this).removeClass('active'); $('.delete_template_id_'+id).remove(); }else{ $(this).addClass('active'); $('#template_id_section').append(`<input type="hidden" class="template_ids delete_template_id_${id}" value="${id}">`); }
});
$(document).on('click', '.choose_keyword', function(e) { e.preventDefault(); const id=$(this).attr('data-id'); if($(this).hasClass('active')){ $(this).removeClass('active'); $('.delete_keyword_id_'+id).remove(); }else{ $(this).addClass('active'); $('#keyword_id_section').append(`<input type="hidden" class="keyword_ids delete_keyword_id_${id}" value="${id}">`); } });
let nodeCounter = 0; let element_counter = 0; $(document).on('click', '.add_new_element', function(e) { e.preventDefault(); let html = ''; let newCurrentNode = ''; let newParentNode = ''; element_counter++;
let dataNode = $(this).attr('data-node'); let startId = $(this).attr('data-id'); let dataCurrentNode = $(this).attr('data-current-node'); let dataParentNode = $(this).attr('data-parent-node'); let parent_id = $(this).attr('data-parent-id');
if (!dataCurrentNode) { newCurrentNode = element_counter; newParentNode = dataParentNode; } else { let parentNodeCount = parseFloat($(`[data-parent-node="${dataCurrentNode}"]`).length); newCurrentNode = dataCurrentNode + "." + (parentNodeCount + 1); newParentNode = dataCurrentNode; }
$('#previewNode').text(newCurrentNode);
if (!startId) { startId = "add_new_element"; }
const top = $("#start_" + (element_counter - 1)).css('top'); const left = $("#start_" + (element_counter - 1)).css('left');
$.ajax({ 'type':'POST', 'url':'<?php echo e(route('customer.responders.detail.create')); ?>', data:{ node:newCurrentNode,responder_id:'<?php echo e($responder->id); ?>','parent_id':parent_id,'_token':'<?php echo e(csrf_token()); ?>' },
success:function(res){ if(res.status=='success'){
html = `<div class="draggable-item get_style_${res.data}" data-id="${res.data}" id="start_${element_counter}" style="position:relative;left:${left};top:${top}"> <div class="p-2"> <div> <span class="box-element-title"> Node # <span class="node-counter">${newCurrentNode}</span> </span>
<span class="float-right box-element-icon-section"> <i class="fa fa-file d-none"></i> <i data-detail-id="${res.data}" data-parent-node=${newParentNode} class="fa fa-eye ml-1 preview_modal preview_element_${res.data}"></i> <i class="fa fa-copy d-none ml-1"></i> <i data-id="start_${element_counter}" data-parent-node=${newParentNode} data-parent-id="${res.data}" data-current-node=${newCurrentNode} class="add_new_element fa fa-plus ml-1"></i> <i data-parent-node=${newParentNode} data-current-node=${newCurrentNode} data-detail-id="${res.data}" class="delete_element fa fa-trash ml-1"></i> </span> </div> <h6 class="mb-1 box-element-secondary-title d-none"> 0 replied(2) </h6> <h6 class="mb-1 box-element-secondary-title d-none"> 0 clicked(2) </h6> <h6 class="mb-1 box-element-secondary-title d-none"> 0 listened(2) </h6> <h6 class="mb-1 box-element-secondary-title"><strong>Keyword</strong>: <span class="keyword_section_${res.data}"></span></h6> <h6 class="mb-1 box-element-secondary-title"><strong>Intend</strong>: <span class="show_intends_${res.data}"></span> </h6> </div> <div class="start_dot"><div class="dot-black"></div></div> <div class="end_dot"><div class="dot-black"></div></div> </div>`;
$('#append_elements').append(html); triggerDraggable(".draggable-item"); triggerMouseDownEvent('.end_dot'); // drawLine(startId, `start_${res.data}`) drawLine(startId, `start_${element_counter}`)
} } }) });
let element_counter_id=0; let startId=''; let tttt=''; function decodeEntities(encodedString) { var parser = new DOMParser(); var dom = parser.parseFromString('<!doctype html><body>' + encodedString, 'text/html'); return dom.body.textContent; }
<?php $__currentLoopData = $responder->details; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $dt): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?> element_counter_id='<?php echo e($dt->id); ?>'; <?php if($dt->parent_id): ?> startId= 'start_'+'<?php echo e($dt->parent_id); ?>' <?php else: ?> startId='add_new_element'; <?php endif; ?> var decodedJSONString = decodeEntities('<?php echo e($dt->template); ?>'); var keywordDecodedJSONString = decodeEntities('<?php echo e($dt->keyword_groups); ?>');
ResponderDetails['<?php echo e($dt->id); ?>']= { 'keyword': '<?php echo e($dt->keyword); ?>', 'group': '<?php echo e($dt->group); ?>', 'parent_id': '<?php echo e($dt->parent_id); ?>', 'responder_id': '<?php echo e($dt->responder_id); ?>', 'template': decodedJSONString, 'keyword_groups': keywordDecodedJSONString, 'id': '<?php echo e($dt->id); ?>', };
triggerDraggable(".draggable-item"); triggerMouseDownEvent('.end_dot'); drawLine(startId, `start_${element_counter_id}`) element_counter++;
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
let filteredArray=[]; let deleted_ids=[];
function findElementChilds(elements, parent_id) { if (parent_id) { deleted_ids.push(parent_id) }
elements.forEach((value) => { const draggedRef = value.split('-'); deleted_ids.push(draggedRef[1])
const relatedNewKeys = Object.keys(lines).filter(key => key.includes(draggedRef[1] + '-')); if (relatedNewKeys) { findElementChilds(relatedNewKeys); } }); }
$(document).on('click', '.delete_element', function (e){ e.preventDefault();
const parent_id= $(this).closest('.draggable-item').attr('id');
const relatedKeys = Object.keys(lines).filter(key => key.includes(parent_id+'-'));
//Find Parent Element const relatedParentKey = Object.keys(lines).filter(key => key.includes('-'+parent_id)); let deleteParentKeys=relatedParentKey[0].split('-'); deleteParentKeys=deleteParentKeys[0];
findElementChilds(relatedKeys,parent_id);
for (const key in lines) { lines[key].remove(); }
filteredArray=lines; $.each(deleted_ids, function(index, key_value){ $('#'+key_value).addClass('d-none');
const id=$('#'+key_value).attr('data-id');
filteredArray = Object.fromEntries( Object.entries(filteredArray).filter(([key, value]) =>{ return !key.includes(key_value) }) );
$.ajax({ type:'GET', url:'<?php echo e(route('customer.responders.detail.delete')); ?>', data:{ id:id },
success:function(res){ if(res.status=='success'){ $('#'+key_value).remove(); } } }); });
lines=[];
$.each(filteredArray, function (index, value){ const draggedRef = index.split('-'); const start=draggedRef[0]; const end=draggedRef[1];
triggerDraggable(".draggable-item"); triggerMouseDownEvent('.end_dot'); drawLine(start, end) });
const getAllChild = Object.keys(lines).filter(key => key.includes(deleteParentKeys+'-'));
setPosition(getAllChild);
triggerDraggable(".draggable-item"); triggerMouseDownEvent('.end_dot');
deleted_ids=[]; });
function setPosition(element){
$.each(element, function(index, value){
const draggedRef = value.split('-');
const start=draggedRef[0]; const end=draggedRef[1];
let top = $('#'+start).css('top');
let left = $('#'+start).css('left');
$('#'+end).css('top', top); $('#'+end).css('left', left);
drawLine(start, end)
const getEndChild = Object.keys(lines).filter(key => key.includes(end+'-'));
if(getEndChild){ setPosition(getEndChild); } });
}
$('#savePreview_old').on('click',function(e){ e.preventDefault(); const formData=$('#previewNodeForm').serialize(); $.ajax({ method:'POST', url:'<?php echo e(route('customer.responders.store')); ?>', data:formData, success:function(res){ console.log(res); } }) }) </script> <?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.customer', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/picotech/domains/sms.picotech.app/public_html/resources/views/customer/responder/create.blade.php ENDPATH**/ ?>
|