File "config-process.blade.php"
Full Path: /home/trinadezambia/public_html/gambling/resources/views/components/config-process.blade.php
File size: 13.1 KB
MIME-type: text/html
Charset: utf-8
@php
$requiredConfig = new \App\Lib\RequiredConfig();
$configs = $requiredConfig->getConfig();
$progressPercentage = $requiredConfig->completedConfigPercent();
$completedConfig = $requiredConfig->completedConfig();
uksort($configs, function ($a, $b) use ($completedConfig) {
$aIndex = array_search($a, $completedConfig);
$bIndex = array_search($b, $completedConfig);
$aIndex = $aIndex === false ? -1 : $aIndex + 100;
$bIndex = $bIndex === false ? -1 : $bIndex + 100;
return $aIndex <=> $bIndex;
});
@endphp
@if ($requiredConfig->completedConfigCount() < $requiredConfig->totalConfigs())
<div class="configure-card-wrapper">
<div class="configure-card">
<div class="configure-card-header">
<div class="configure-card-top flex-align gap-4">
<div class="configure-card-left flex-1">
<div class="configure-card-slide">
@foreach ($configs as $key => $config)
<h6 class="configure-card-title flex-align gap-2 mb-2 flex-nowrap"
data-config_url="{{ $config['route'] }}">
<span class="configure-status @if (in_array($key, $completedConfig)) complete @endif"><i
class="fas fa-check"></i></span>
{{ __($config['title']) }}
</h6>
@endforeach
</div>
<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="0"
aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width: {{ $progressPercentage }}%"></div>
</div>
</div>
<a href="" class="configure-card-link flex-shrink-0 d-inline-flex gap-1 align-items-center">
<i class="fas fa-cog"></i>
<span class="d-none d-sm-block">@lang('Configure')</span>
</a>
</div>
<div class="configure-card-bottom flex-align mt-2">
<a href="javascript:void(0)" class="next-btn">
<i class="fa-solid fa-arrow-left"></i>
@lang('Previous')
</a>
<div class="flex-1 flex-center gap-2">
<span class="count">
<span class="configure-count">{{ $requiredConfig->completedConfigCount() }}</span>
@lang('of') <span class="configure-total">{{ $requiredConfig->totalConfigs() }}</span>
</span>
<div class="show-btn">
@lang('Show')
<span class="icon text-white">
<i class="las la-angle-down"></i>
</span>
</div>
</div>
<a href="javascript:void(0)" class="prev-btn">
@lang('Next')
<i class="fa-solid fa-arrow-right"></i>
</a>
</div>
</div>
<div class="configure-card-body">
<ul class="configure-list">
@foreach ($configs as $key => $config)
<li class="configure-item flex-between">
<div class="configure-item-name d-flex align-items-center gap-2 flex-grow-1">
<span class="configure-status @if (in_array($key, $completedConfig)) complete @endif"><i
class="fas fa-check text-white"></i></span>
<div class="d-flex justify-content-between align-items-center flex-grow-1">
<span>{{ __($config['title']) }}</span>
<a href="{{ $config['route'] }}" class="configure-item-btn flex-shrink-0 @if (in_array($key, $completedConfig)) disabled @endif">
<i class="fas fa-angle-right"></i>
<span class="d-none d-sm-block">@lang('Configure Now')</span>
</a>
</div>
</div>
</li>
@endforeach
</ul>
</div>
</div>
<div class="configure-card-btn configure-card-handle">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-settings-icon lucide-settings">
<path
d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" />
<circle cx="12" cy="12" r="3" />
</svg>
</div>
</div>
@push('script-lib')
<script src="{{ asset('assets/admin/js/jquery-ui.min.js') }}"></script>
<script src="{{ asset('assets/admin/js/jquery.ui.touch-punch.min.js') }}"></script>
@endpush
@push('script')
<script>
(function($) {
"use strict";
const configureCardWrapperStyle = localStorage.getItem('configure-card-wrapper-style');
if (configureCardWrapperStyle) {
$('.configure-card-wrapper').attr('style',configureCardWrapperStyle);
}
let isDragging = false;
let listShowed = false;
const windowWidth = $(window).width();
let elementHeight = $('.configure-card-body').outerHeight(true) + $('.configure-card-header').outerHeight(true) + 2;
if (windowWidth <= 575) {
elementHeight += 6;
}
let spaceFromRight = 20;
let spaceFromTop = 20;
let spaceFromBottom = 20;
let configBtnHeight = 64;
$('.configure-card-wrapper').draggable({
handle: '.configure-card-handle',
cancel: '.configure-card-body',
start: function(event, ui) {
isDragging = true;
ui.helper.css({
"bottom": "auto",
'transition': 'unset'
});
},
drag: function(event, ui) {
if (listShowed) {
return false;
}
const $el = ui.helper;
const elHeight = $el.outerHeight();
const windowHeight = $(window).height();
const draggedBottom = windowHeight - (ui.position.top + elHeight);
if (draggedBottom < spaceFromBottom) {
ui.position.top = windowHeight - elHeight - spaceFromBottom;
}
const topLimit = 10;
if (ui.position.top < topLimit) {
ui.position.top = topLimit;
}
return true;
},
stop: function(event, ui) {
setTimeout(() => isDragging = false, 100);
if (listShowed) {
return;
}
const $el = ui.helper;
const elWidth = $el.outerWidth();
const targetLeft = windowWidth - elWidth - spaceFromRight;
const settingBtn = $('.configure-card-btn').offset();
const bottomValue = ($(window).height() - (settingBtn.top - $(window).scrollTop())) - configBtnHeight;
let bottomValueCss = `${bottomValue < spaceFromBottom ? spaceFromBottom : bottomValue}px`;
let topCss = 'auto';
$('.configure-card-body').css({
"height": 'auto',
});
if (bottomValue > ($(window).height() - spaceFromTop - spaceFromBottom) * 0.4) { // if 40% of window height cross
bottomValueCss = 'auto';
topCss = settingBtn.top - $(window).scrollTop();
$el.css({
'align-items': 'flex-start',
})
if (windowWidth <= 991) {
topCss = settingBtn.top - $(window).scrollTop();
}
if (windowWidth <= 575) {
topCss = ((settingBtn.top - $(window).scrollTop()) + configBtnHeight) - $('.configure-card-wrapper').height();
$el.css({
'flex-direction': 'column-reverse',
'align-items': 'flex-end',
})
}
if (topCss < 10) {
topCss = 10;
}
topCss = `${topCss}px`;
if (bottomValue < 400 + 20 + 20) {
$('.configure-card-body').css({
"height": bottomValue - 20,
});
}
$('.configure-card').css({
'transform-origin': 'top right',
})
} else {
setConfigListHeight(bottomValue, settingBtn);
$el.css({
'align-items': 'flex-end',
})
$('.configure-card').css({
'transform-origin': 'bottom right',
})
if (windowWidth <= 575) {
$el.css({
'flex-direction': 'column',
})
}
}
$el.css({
"bottom": bottomValueCss,
"top": topCss,
"transition": "all linear .3s",
"left": "auto"
});
const style = $('.configure-card-wrapper').attr('style');
localStorage.setItem('configure-card-wrapper-style', style);
},
});
const setConfigListHeight = (bottomValue, settingBtn) => {
let topSpace = 20;
if ((elementHeight + configBtnHeight + bottomValue + topSpace) > $(window)
.height()) {
let fromTop = settingBtn.top + configBtnHeight;
if (windowWidth <= 575) {
fromTop -= configBtnHeight;
}
const topValue = (fromTop - topSpace - $('.configure-card-header').outerHeight(true));
$('.configure-card-body').css({
"height": topValue,
});
}
}
const configSettingBtn = $('.configure-card-btn').offset();
const fromBottomSpace = ($(window).height() - (configSettingBtn.top - $(window).scrollTop())) - configBtnHeight;
setConfigListHeight(fromBottomSpace, configSettingBtn);
$('.configure-card-btn').on('click', function(e) {
if (isDragging) {
e.preventDefault();
e.stopImmediatePropagation();
return false;
}
const toggleConfigureCard = () => {
$('.configure-card').toggleClass('show')
if ($('.configure-card').hasClass('show')) {
$('.configure-card').removeClass('hide')
} else {
$('.configure-card').addClass('hide')
}
}
if (listShowed) {
$('.show-btn').trigger('click');
setTimeout(() => {
toggleConfigureCard();
}, 500)
} else {
toggleConfigureCard();
}
})
$('.show-btn').on('click', function() {
listShowed = listShowed ? false : true;
$('.configure-card-body').slideToggle('')
$(this).toggleClass('active');
})
})(jQuery);
</script>
@endpush
@endif