first commit
This commit is contained in:
524
apps/backend/modules/stDashboard/templates/indexSuccess.php
Normal file
524
apps/backend/modules/stDashboard/templates/indexSuccess.php
Normal file
@@ -0,0 +1,524 @@
|
||||
<?php
|
||||
use_helper('stAdminGenerator');
|
||||
use_helper('stBackend');
|
||||
|
||||
$version = stApplication::getApplicationVersion('stBackend');
|
||||
|
||||
use_javascript('jquery.cookie.js');
|
||||
use_javascript('backend/dashboard.js?v='.$version);
|
||||
use_stylesheet('backend/beta/dashboard.css?v='.$version, 'last');
|
||||
?>
|
||||
<div id="dashboard">
|
||||
<ul class="tabs bs-d-flex">
|
||||
<?php foreach ($dashboards as $dashboard): ?>
|
||||
<li>
|
||||
<a href="#<?php echo $dashboard->getId() ?>-<?php echo $dashboard->getUpdatedAt() ?>" class="tab<?php if ($dashboard->getIsDefault()): ?> current<?php endif ?>"><?php echo $dashboard->getLabel() ?></a>
|
||||
</li>
|
||||
<?php endforeach; ?>
|
||||
<li class="new" <?php if (count($dashboards) >= 5): ?>style="display: none"<?php endif; ?>><a href="#new" class="action"><?php echo st_backend_get_icon('add', array('size' => 18)) ?></a></li>
|
||||
<li class="bs-ms-auto">
|
||||
<?php echo st_admin_get_viewport_width_button() ?>
|
||||
</li>
|
||||
<li class="dashboard-configuration position-relative bs-me-0">
|
||||
<a href="#"><?php echo st_admin_get_icon('settings', array('size' => 18)) ?></a>
|
||||
<ul class="dropdown_menu">
|
||||
<li><a href="#<?php echo get_gadget_column_id($default_dashboard, 1) ?>" rel="#gadgets_directory"><?php echo __('Dodaj widżet', null, 'stBackend') ?></a></li>
|
||||
<li><a href="#default" class="action"><?php echo __('Ustaw jako domyślny', null, 'stBackend') ?></a></li>
|
||||
<li><a href="#edit" class="action"><?php echo __('Edytuj pulpit', null, 'stBackend') ?></a></li>
|
||||
<li><a href="#delete" class="action"><?php echo __('Usuń pulpit', null, 'stBackend') ?></a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="clr"></div>
|
||||
<div class="panes">
|
||||
<?php foreach ($dashboards as $dashboard): ?>
|
||||
<div id="<?php echo $dashboard->getId() ?>-<?php echo $dashboard->getUpdatedAt() ?>" class="<?php echo $dashboard->getLayout() ?> overflow-hidden" style="display: none"></div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="gadgets_directory" class="popup_window preloader_160x24"></div>
|
||||
<div id="gadgets_configuration" class="popup_window preloader_160x24"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
jQuery(function($) {
|
||||
const dashboardContainer = $('#dashboard');
|
||||
var dashboard_api = initializeDashboardTabs(<?php echo $default_index ?>);
|
||||
|
||||
function editOrCreateDashboard(dashboard_id, callback) {
|
||||
|
||||
var dashboard_configuration = $('<div id="dashboard_configuration" class="popup_window preloader_160x24"></div>');
|
||||
|
||||
dashboardContainer.after(dashboard_configuration);
|
||||
|
||||
dashboard_configuration.overlay({
|
||||
speed: 'fast',
|
||||
close: '#',
|
||||
load: false,
|
||||
mask: {
|
||||
color: '#444',
|
||||
loadSpeed: 'fast',
|
||||
opacity: 0.5
|
||||
}
|
||||
});
|
||||
|
||||
dashboard_configuration.bind('onBeforeLoad', function() {
|
||||
|
||||
var api = $(this).data("overlay");;
|
||||
|
||||
var overlay = api.getOverlay();
|
||||
|
||||
var params = {};
|
||||
|
||||
if (dashboard_id) {
|
||||
params.id = dashboard_id;
|
||||
}
|
||||
|
||||
overlay.addClass('preloader_160x24');
|
||||
|
||||
$.get('<?php echo st_url_for('@stDashboard?action=ajaxEditOrCreate') ?>', params, function(html) {
|
||||
|
||||
var html = $(html);
|
||||
|
||||
var form = html.filter('.content').children('form');
|
||||
|
||||
form.find('#dashboard_configuration_label').change(function() {
|
||||
var input = $(this);
|
||||
|
||||
if (!input.val().replace(' ', ''))
|
||||
{
|
||||
input.val(input.attr('defaultValue'));
|
||||
}
|
||||
});
|
||||
|
||||
form.submit(function(event) {
|
||||
overlay.addClass('preloader_160x24');
|
||||
form.css({ visibility: 'hidden' });
|
||||
$.post(form.attr('action'), form.serializeArray(), function(data) {
|
||||
if (callback) {
|
||||
callback.call(this, data);
|
||||
}
|
||||
dashboard_api.getCurrentTab().html(data.label);
|
||||
overlay.removeClass('preloader_160x24');
|
||||
overlay.html('');
|
||||
api.close();
|
||||
dashboard_configuration.remove();
|
||||
|
||||
|
||||
}, 'json');
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
overlay.html(html);
|
||||
|
||||
overlay.find('.close').click(function(event) {
|
||||
api.close();
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
overlay.removeClass('preloader_160x24');
|
||||
});
|
||||
});
|
||||
|
||||
dashboard_configuration.data('overlay').load();
|
||||
}
|
||||
|
||||
var dashboard_menu = initializeDropdownMenu('#dashboard > ul.tabs > li.dashboard-configuration', function(event) {
|
||||
var action = $(this);
|
||||
|
||||
var dashboard = getCurrentDashboardData();
|
||||
|
||||
if (!action.hasClass('disabled'))
|
||||
{
|
||||
switch (action.attr('href')) {
|
||||
case '#default':
|
||||
window.parent.jQuery.preloader.show();
|
||||
$.get('<?php echo st_url_for('@stDashboard?action=ajaxSetDefault') ?>', {id: dashboard.id}, function () {
|
||||
window.parent.jQuery.preloader.hide();
|
||||
});
|
||||
break;
|
||||
case '#edit':
|
||||
editOrCreateDashboard(dashboard.id, function(data) {
|
||||
var pane = dashboard_api.getCurrentPane();
|
||||
if (pane.attr('class') != data.layout) {
|
||||
var index = dashboard_api.getIndex();
|
||||
var tab = dashboard_api.getCurrentTab();
|
||||
tab.attr('href', '#'+data.id+'-'+data.updated_at);
|
||||
pane.attr('id', data.id+'-'+data.updated_at);
|
||||
pane.html('');
|
||||
pane.attr('class', data.layout);
|
||||
dashboard_api.destroy();
|
||||
dashboard_api = initializeDashboardTabs(index);
|
||||
}
|
||||
});
|
||||
break;
|
||||
case '#delete':
|
||||
if (window.confirm('<?php echo __('Jesteś pewien, że chcesz usunać wybrany pulpit?', null, 'stBackend') ?>'))
|
||||
{
|
||||
$.get('<?php echo st_url_for('@stDashboard?action=ajaxDelete') ?>', {'id': dashboard.id}, function(data) {
|
||||
|
||||
var index = dashboard_api.getIndex() < dashboard_api.getTabs().length - 1 ? dashboard_api.getIndex() + 1: dashboard_api.getIndex() - 1;
|
||||
var tab = dashboard_api.getTabs().eq(index);
|
||||
dashboard_api.getCurrentTab().parent().remove();
|
||||
dashboard_api.getCurrentPane().remove();
|
||||
dashboard_api.destroy();
|
||||
dashboard_api = initializeDashboardTabs(null);
|
||||
dashboard_api.click(tab.attr('href'));
|
||||
});
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
function initializeDashboardTabs(index) {
|
||||
var tabs = $('#dashboard > .tabs').tabs('#dashboard > div.panes > div', {
|
||||
initialIndex: index,
|
||||
tabs: 'a.tab',
|
||||
onBeforeClick: function(event, i) {
|
||||
if (this.getPanes().length > 0) {
|
||||
var pane = this.getPanes().eq(i);
|
||||
|
||||
var dashboard = getCurrentDashboardData(this, i);
|
||||
|
||||
if (pane.is(':empty'))
|
||||
{
|
||||
pane.addClass('preloader_160x24');
|
||||
|
||||
$.get('<?php echo st_url_for('@stDashboard?action=ajaxChoose') ?>', {id: dashboard.id, refresh: dashboard.updated_at, culture: '<?php echo $sf_user->getCulture() ?>'}, function(html) {
|
||||
pane.removeClass('preloader_160x24');
|
||||
pane.html(html);
|
||||
initializeDashboard(pane);
|
||||
}, 'html');
|
||||
} else {
|
||||
pane.find('.gadget').each(function() {
|
||||
refreshGadgets($(this), false);
|
||||
});
|
||||
}
|
||||
|
||||
var trigger = $('#dashboard a[rel=#gadgets_directory]');
|
||||
|
||||
trigger.attr('href', trigger.attr('href').replace(/#column-[0-9]+-([0-9]+)/, '#column-'+dashboard.id+'-$1'));
|
||||
|
||||
$('#dashboard > .menu').show();
|
||||
} else {
|
||||
$('#dashboard > .menu').hide();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
var api = tabs.data('tabs');
|
||||
|
||||
if (api.getTabs().length >= 5) {
|
||||
tabs.children('.new').hide();
|
||||
} else {
|
||||
tabs.children('.new').show();
|
||||
}
|
||||
|
||||
return api;
|
||||
}
|
||||
|
||||
$('#dashboard > .tabs > li > .action').click(function(event) {
|
||||
|
||||
var action = $(this);
|
||||
|
||||
switch(action.attr('href'))
|
||||
{
|
||||
case '#new':
|
||||
editOrCreateDashboard(null, createDashboard);
|
||||
break;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
function createDashboard(data)
|
||||
{
|
||||
dashboard_api.destroy();
|
||||
var tabs = $('#dashboard > .tabs');
|
||||
tabs.children('.new').before('<li><a href="#'+data.id+'-'+data.updated_at+'" class="tab">'+data.label+'</a></li>');
|
||||
$('#dashboard > .panes').append('<div class="'+data.layout+'"></div>');
|
||||
dashboard_api = initializeDashboardTabs(tabs.find('> li > a.tab').length-1);
|
||||
initializeDashboard(dashboard_api.getCurrentPane());
|
||||
if (dashboard_api.getPanes().length > 1) {
|
||||
dashboard_menu.find('.action').removeClass('disabled');
|
||||
}
|
||||
}
|
||||
|
||||
function getCurrentDashboardData(api, index) {
|
||||
if (api == undefined) {
|
||||
api = dashboard_api;
|
||||
}
|
||||
|
||||
var tab = index != undefined ? api.getTabs().eq(index) : api.getCurrentTab();
|
||||
|
||||
var tmp = tab.attr('href').slice(1).split('-');
|
||||
|
||||
return { id: tmp[0], 'updated_at': tmp[1] };
|
||||
}
|
||||
|
||||
function addGadgetPlaceholderVisibility(column) {
|
||||
var columns = column == undefined ? dashboard_api.getCurrentPane().find('div.column') : column;
|
||||
|
||||
columns.each(function() {
|
||||
if ($(this).children('.gadget').length)
|
||||
{
|
||||
$(this).children('.add-gadget-placeholder').hide();
|
||||
}
|
||||
else
|
||||
{
|
||||
$(this).children('.add-gadget-placeholder').show();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function gadgetActionsEvent(event) {
|
||||
var dashboard = getCurrentDashboardData();
|
||||
|
||||
var action = $(this);
|
||||
|
||||
var gadget_id = action.attr('href').replace('#gadget-', '');
|
||||
|
||||
var gadget = $(this).parents('.gadget');
|
||||
|
||||
if (action.hasClass('edit')) {
|
||||
var content = gadget.children('.content');
|
||||
|
||||
var configuration = $('#gadgets_configuration');
|
||||
|
||||
configuration.overlay({
|
||||
speed: 'fast',
|
||||
mask: {
|
||||
color: '#444',
|
||||
loadSpeed: 'fast',
|
||||
opacity: 0.5
|
||||
},
|
||||
close: '.close',
|
||||
onClose: function() {
|
||||
this.getOverlay().html('');
|
||||
configuration.removeClass('preloader_160x24');
|
||||
}
|
||||
});
|
||||
|
||||
var api = configuration.data('overlay');
|
||||
|
||||
api.load();
|
||||
|
||||
$.get('<?php echo st_url_for('@stDashboard?action=ajaxEditGadget') ?>', {'id': gadget_id, 'dashboard_id': dashboard.id}, function(data) {
|
||||
api.getOverlay().html(data);
|
||||
|
||||
api.getOverlay().find('.close').click(function() {
|
||||
api.close();
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
$(document).trigger('chosen:init', configuration.find('select'));
|
||||
|
||||
var form = api.getOverlay().find('.content > form');
|
||||
|
||||
form.find('#gadget_configuration_title').change(function() {
|
||||
var input = $(this);
|
||||
|
||||
if (!input.val().replace(' ', ''))
|
||||
{
|
||||
input.val(input.attr('defaultValue'));
|
||||
}
|
||||
});
|
||||
|
||||
form.submit(function(event) {
|
||||
configuration.addClass('preloader_160x24');
|
||||
form.css({ visibility: 'hidden' });
|
||||
$.post(form.attr('action'), form.serializeArray(), function(data) {
|
||||
var header = gadget.children('h2');
|
||||
header.html(data.title);
|
||||
header.css({ 'background-color': data.color });
|
||||
if (data.refresh_by > 0) {
|
||||
initGadgetRefresh(gadget, data.refresh_by * 1000);
|
||||
}
|
||||
else {
|
||||
stopGadgetRefresh(gadget);
|
||||
}
|
||||
api.close();
|
||||
}, 'json');
|
||||
event.preventDefault();
|
||||
});
|
||||
});
|
||||
} else if (action.hasClass('delete') && window.confirm('<?php echo __('Jesteś pewien, że chcesz usunać wybrany gadżet?', null, 'stBackend') ?>')) {
|
||||
$.get('<?php echo st_url_for('@stDashboard?action=ajaxRemoveGadget') ?>', {'id': gadget_id, 'dashboard_id': dashboard.id}, function() {
|
||||
var column = gadget.parent('.column');
|
||||
gadget.remove();
|
||||
// addGadgetPlaceholderVisibility(column);
|
||||
});
|
||||
}
|
||||
else if (action.hasClass('refresh')) {
|
||||
refreshGadgets(gadget);
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
|
||||
function gadgetIframeLoad() {
|
||||
const iframe = $(this);
|
||||
const content = iframe.parent('.content');
|
||||
|
||||
content.removeClass('preloader_160x24');
|
||||
iframe.show().css({visibility: 'visible'});
|
||||
updateIframeHeight(iframe);
|
||||
}
|
||||
|
||||
function updateIframeHeight(iframe) {
|
||||
if (iframe.attr('src').charAt(0) == '/' && iframe.prop('contentDocument').body) {
|
||||
let height = iframe.prop('contentDocument').body.offsetHeight;
|
||||
iframe.css({ 'height': height+'px' });
|
||||
}
|
||||
}
|
||||
|
||||
function updateIframesHeightsOnForCurrentPane()
|
||||
{
|
||||
dashboard_api.getCurrentPane().find('iframe').each(function() {
|
||||
updateIframeHeight($(this));
|
||||
});
|
||||
}
|
||||
|
||||
function initGadget(gadget) {
|
||||
gadget.find('> .content > iframe').load(gadgetIframeLoad);
|
||||
|
||||
initializeDropdownMenu(gadget.find('> .menu > .config'), gadgetActionsEvent);
|
||||
}
|
||||
|
||||
|
||||
function gadgetsDirectory(objects) {
|
||||
objects.overlay({
|
||||
speed: 'fast',
|
||||
close: '#',
|
||||
mask: {
|
||||
color: '#444',
|
||||
loadSpeed: 'fast',
|
||||
opacity: 0.5
|
||||
},
|
||||
onBeforeLoad: function() {
|
||||
var api = this;
|
||||
var overlay = api.getOverlay();
|
||||
var dashboard = api.getTrigger().attr('href').replace('#column-', '').split('-');
|
||||
var column_id = '#column-'+dashboard[0]+'-'+dashboard[1];
|
||||
$.get('<?php echo st_url_for('@stDashboard?action=ajaxGadgetDirectory') ?>', function(html) {
|
||||
overlay.removeClass('preloader_160x24');
|
||||
overlay.html(html);
|
||||
$('#gadgets_directory .tabs').tabs("div.panes > div");
|
||||
$('#gadgets_directory .gadget a.add').click(function(event) {
|
||||
if ($(this).hasClass('preloader_26x26'))
|
||||
{
|
||||
return event.preventDefault();
|
||||
}
|
||||
|
||||
var name = $(this).attr('href').slice(1);
|
||||
|
||||
// var add_buttons = overlay.find('.gadget .add a[href=#'+name+']');
|
||||
|
||||
// add_buttons.addClass('preloader_26x26');
|
||||
|
||||
window.parent.jQuery.preloader.show();
|
||||
|
||||
api.close();
|
||||
|
||||
$.get('<?php echo st_url_for('@stDashboard?action=ajaxAddGadget') ?>', {'column': dashboard[1], 'name': name, 'dashboard_id': dashboard[0]}, function(html) {
|
||||
var gadget = $(html);
|
||||
var column = $(column_id);
|
||||
initGadget(gadget);
|
||||
column.prepend(gadget);
|
||||
// add_buttons.removeClass('preloader_26x26');
|
||||
//addGadgetPlaceholderVisibility(column);
|
||||
window.parent.jQuery.preloader.hide();
|
||||
});
|
||||
|
||||
event.preventDefault();
|
||||
});
|
||||
overlay.find('.close').click(function(event) { api.close(); event.preventDefault(); });
|
||||
});
|
||||
|
||||
},
|
||||
onClose: function() {
|
||||
this.getOverlay().html('').addClass('preloader_160x24');
|
||||
},
|
||||
closeOnClick: false
|
||||
});
|
||||
}
|
||||
|
||||
gadgetsDirectory($('#dashboard a[rel=#gadgets_directory]'));
|
||||
|
||||
function initializeDashboard(pane) {
|
||||
var dashboard_columns = pane ? pane.find('div.column') : dashboard_api.getCurrentPane().find('div.column');
|
||||
|
||||
gadgetsDirectory(dashboard_columns.find('> .add-gadget-placeholder > a[rel=#gadgets_directory]'));
|
||||
|
||||
var gadgets = dashboard_columns.children('.gadget');
|
||||
|
||||
initGadget(gadgets);
|
||||
|
||||
var changed = false;
|
||||
|
||||
dashboard_columns.sortable({
|
||||
pointerAt: 'top',
|
||||
tolerance: 'pointer',
|
||||
items: '> .gadget',
|
||||
connectWith: dashboard_columns,
|
||||
handle: '.moveable',
|
||||
cursor: 'move',
|
||||
placeholder: 'placeholder',
|
||||
forcePlaceholderSize: true,
|
||||
opacity: 0.4,
|
||||
update: function(event, ui) {
|
||||
changed = true;
|
||||
},
|
||||
start: function(event, ui) {
|
||||
//dashboard_columns.find('> .add-gadget-placeholder').hide();
|
||||
ui.item.find('> .content > iframe').css({'visibility': 'hidden'});
|
||||
ui.item.find('> .content').addClass('preloader_160x24');
|
||||
},
|
||||
beforeStop: function(event, ui) {
|
||||
|
||||
},
|
||||
stop: function(event, ui) {
|
||||
//addGadgetPlaceholderVisibility();
|
||||
if (changed)
|
||||
{
|
||||
var parent = ui.item.parent('.column');
|
||||
|
||||
var dashboard = parent.attr('id').replace('column-', '').split('-');
|
||||
|
||||
var gadget = ui.item.attr('id').replace('gadget-', '');
|
||||
|
||||
var position = parent.children('.gadget').index(ui.item);
|
||||
|
||||
var iframe = ui.item.find('> .content > iframe').css({'visibility': 'hidden'});
|
||||
ui.item.find('> .content').addClass('preloader_160x24');
|
||||
|
||||
$.post('<?php echo st_url_for('@stDashboard?action=ajaxUpdateLayout') ?>', {'column': dashboard[1], 'gadget_id': gadget, 'position': position+1, 'dashboard_id': dashboard[0]}, function() {
|
||||
var date = new Date();
|
||||
|
||||
var src = iframe.attr('src').replace(/refreshed_at=[0-9]+/, 'refreshed_at='+Math.ceil(date.getTime() / 1000));
|
||||
|
||||
iframe.attr('src', src);
|
||||
});
|
||||
|
||||
changed = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
initializeDashboard();
|
||||
|
||||
const dashboardContainerResizeObserver = new ResizeObserver(function() {
|
||||
updateIframesHeightsOnForCurrentPane();
|
||||
});
|
||||
|
||||
dashboardContainerResizeObserver.observe(dashboardContainer.get(0));
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user