mirror of
https://github.com/fusionpbx/fusionpbx.git
synced 2025-12-30 00:53:50 +00:00
Dashboard - Allow drag and drop in parent widgets (#7431)
* Dashboard - Allow drag and drop in parent widgets * Update parent.php * Update index.php * Update config.php * Update missed_calls.php * Update recent_calls.php * Update voicemails.php * Update active_calls.php * Update config.php * Update config.php * Update config.php * Update voicemails.php * Update parent.php * Update voicemails.php * Update parent.php * Update parent.php * Update index.php --------- Co-authored-by: FusionPBX <markjcrane@gmail.com>
This commit is contained in:
@@ -70,11 +70,9 @@ $row_style["1"] = "row_style1";
|
||||
//icon and count
|
||||
echo "<div class='hud_content' ".($dashboard_details_state == "disabled" ?: "onclick=\"$('#hud_active_calls_details').slideToggle('fast'); toggle_grid_row_end('".$dashboard_name."')\"").">\n";
|
||||
echo "<span class='hud_title'><a onclick=\"document.location.href='".PROJECT_PATH."/app/active_calls/active_calls.php'\">".$text['title']."</a></span>\n";
|
||||
echo "<div class='hud_content'>\n";
|
||||
echo "<div style='position: relative; display: inline-block;'>\n";
|
||||
echo "<span class='hud_stat'><i class=\"fas ".$dashboard_icon." \"></i></span>\n";
|
||||
echo "<span id='calls_active_count' name='calls_active_count' style=\"background-color: ".(!empty($dashboard_number_background_color) ? $dashboard_number_background_color : '#03c04a')."; color: ".(!empty($dashboard_number_text_color) ? $dashboard_number_text_color : '#ffffff')."; font-size: 12px; font-weight: bold; text-align: center; position: absolute; top: 23px; left: 24.5px; padding: 2px 7px 1px 7px; border-radius: 10px; white-space: nowrap;\">0</span>\n";
|
||||
echo "</div>\n";
|
||||
echo "<div style='position: relative; display: inline-block;'>\n";
|
||||
echo "<span class='hud_stat'><i class=\"fas ".$dashboard_icon." \"></i></span>\n";
|
||||
echo "<span id='calls_active_count' name='calls_active_count' style=\"background-color: ".(!empty($dashboard_number_background_color) ? $dashboard_number_background_color : '#03c04a')."; color: ".(!empty($dashboard_number_text_color) ? $dashboard_number_text_color : '#ffffff')."; font-size: 12px; font-weight: bold; text-align: center; position: absolute; top: 23px; left: 24.5px; padding: 2px 7px 1px 7px; border-radius: 10px; white-space: nowrap;\">0</span>\n";
|
||||
echo "</div>\n";
|
||||
echo "</div>\n";
|
||||
|
||||
|
||||
@@ -4,6 +4,7 @@ $array['dashboard'][$x]['dashboard_uuid'] = '9083305a-ebb4-4b67-bb9b-8c09cf03026
|
||||
$array['dashboard'][$x]['dashboard_name'] = 'Call Center Agents';
|
||||
$array['dashboard'][$x]['dashboard_path'] = 'call_centers/call_center_agents';
|
||||
$array['dashboard'][$x]['dashboard_icon'] = '';
|
||||
$array['dashboard'][$x]['dashboard_icon_color'] = '';
|
||||
$array['dashboard'][$x]['dashboard_url'] = '';
|
||||
$array['dashboard'][$x]['dashboard_target'] = '';
|
||||
$array['dashboard'][$x]['dashboard_width'] = '';
|
||||
|
||||
@@ -5,6 +5,7 @@ $array['dashboard'][$x]['dashboard_uuid'] = 'f1c722d5-b714-4fa2-9664-5f6d24d4466
|
||||
$array['dashboard'][$x]['dashboard_name'] = 'Device Keys';
|
||||
$array['dashboard'][$x]['dashboard_path'] = 'devices/device_keys';
|
||||
$array['dashboard'][$x]['dashboard_icon'] = '';
|
||||
$array['dashboard'][$x]['dashboard_icon_color'] = '';
|
||||
$array['dashboard'][$x]['dashboard_url'] = '';
|
||||
$array['dashboard'][$x]['dashboard_target'] = 'self';
|
||||
$array['dashboard'][$x]['dashboard_width'] = '';
|
||||
|
||||
@@ -105,12 +105,10 @@
|
||||
|
||||
//dashboard icon
|
||||
if (!isset($dashboard_chart_type) || $dashboard_chart_type == "icon") {
|
||||
echo "<span class='hud_content'>\n";
|
||||
echo "<div style='position: relative; display: inline-block;'>\n";
|
||||
echo " <div style='position: relative; display: inline-block;'>\n";
|
||||
echo " <span class='hud_stat'><i class=\"fas ".$dashboard_icon." \"></i></span>\n";
|
||||
echo " <span style=\"background-color: ".(!empty($dashboard_number_background_color) ? $dashboard_number_background_color : '#03c04a')."; color: ".(!empty($dashboard_number_text_color) ? $dashboard_number_text_color : '#ffffff')."; font-size: 12px; font-weight: bold; text-align: center; position: absolute; top: 23px; left: 24.5px; padding: 2px 7px 1px 7px; border-radius: 10px; white-space: nowrap;\">".$messages['new']."</span>\n";
|
||||
echo " </div>\n";
|
||||
echo "</span>";
|
||||
}
|
||||
|
||||
echo "</div>\n";
|
||||
|
||||
@@ -146,12 +146,10 @@
|
||||
|
||||
//dashboard icon
|
||||
if (!isset($dashboard_chart_type) || $dashboard_chart_type == "icon") {
|
||||
echo "<span class='hud_content'>\n";
|
||||
echo "<div style='position: relative; display: inline-block;'>\n";
|
||||
echo " <div style='position: relative; display: inline-block;'>\n";
|
||||
echo " <span class='hud_stat'><i class=\"fas ".$dashboard_icon." \"></i></span>\n";
|
||||
echo " <span style=\"background-color: ".(!empty($dashboard_number_background_color) ? $dashboard_number_background_color : '#EA4C46')."; color: ".(!empty($dashboard_number_text_color) ? $dashboard_number_text_color : '#ffffff')."; font-size: 12px; font-weight: bold; text-align: center; position: absolute; top: 23px; left: 24.5px; padding: 2px 7px 1px 7px; border-radius: 10px; white-space: nowrap;\">".$num_rows."</span>\n";
|
||||
echo " </div>\n";
|
||||
echo "</span>";
|
||||
}
|
||||
echo "</div>\n";
|
||||
|
||||
|
||||
@@ -144,12 +144,10 @@
|
||||
|
||||
//dashboard icon
|
||||
if (!isset($dashboard_chart_type) || $dashboard_chart_type == "icon") {
|
||||
echo "<div class='hud_content'>\n";
|
||||
echo " <div style='position: relative; display: inline-block;'>\n";
|
||||
echo " <span class='hud_stat'><i class=\"fas ".$dashboard_icon." \"></i></span>\n";
|
||||
echo " <span style=\"background-color: ".(!empty($dashboard_number_background_color) ? $dashboard_number_background_color : '#417ed3')."; color: ".(!empty($dashboard_number_text_color) ? $dashboard_number_text_color : '#ffffff')."; font-size: 12px; font-weight: bold; text-align: center; position: absolute; top: 23px; left: 24.5px; padding: 2px 7px 1px 7px; border-radius: 10px; white-space: nowrap;\">".$num_rows."</span>\n";
|
||||
echo " </div>\n";
|
||||
echo "</div>";
|
||||
}
|
||||
|
||||
echo "</div>\n";
|
||||
|
||||
@@ -5,6 +5,7 @@ $array['dashboard'][$x]['dashboard_uuid'] = '3b0cbb2f-733d-4646-8332-7d108808f2f
|
||||
$array['dashboard'][$x]['dashboard_name'] = 'Contacts';
|
||||
$array['dashboard'][$x]['dashboard_path'] = 'dashboard/icon';
|
||||
$array['dashboard'][$x]['dashboard_icon'] = 'fa-regular fa-address-card';
|
||||
$array['dashboard'][$x]['dashboard_icon_color'] = '#0292ff';
|
||||
$array['dashboard'][$x]['dashboard_url'] = '/core/contacts/contacts.php';
|
||||
$array['dashboard'][$x]['dashboard_target'] = 'self';
|
||||
$array['dashboard'][$x]['dashboard_width'] = '';
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
|
||||
<?php
|
||||
/*
|
||||
FusionPBX
|
||||
@@ -105,10 +106,10 @@
|
||||
$sql .= "dashboard_details_state, ";
|
||||
$sql .= "dashboard_order, ";
|
||||
$sql .= "cast(dashboard_enabled as text), ";
|
||||
$sql .= "dashboard_description ";
|
||||
$sql .= "dashboard_description, ";
|
||||
$sql .= "dashboard_parent_uuid ";
|
||||
$sql .= "from v_dashboard as d ";
|
||||
$sql .= "where dashboard_enabled = 'true' ";
|
||||
$sql .= "and dashboard_parent_uuid is null ";
|
||||
$sql .= "and dashboard_uuid in (";
|
||||
$sql .= " select dashboard_uuid from v_dashboard_groups where group_uuid in (";
|
||||
$sql .= " ".$group_uuids_in." ";
|
||||
@@ -123,13 +124,25 @@
|
||||
//set the variables from the http values
|
||||
if (isset($_POST["widget_order"])) {
|
||||
$widgets = explode(",", $_POST["widget_order"]);
|
||||
$dashboard_order = '0';
|
||||
$x = 0;
|
||||
|
||||
foreach ($widgets as $widget) {
|
||||
list($widget_id, $parent_id, $order) = explode("|", $widget);
|
||||
$parent_uuid = null;
|
||||
|
||||
foreach ($dashboard as $row) {
|
||||
$dashboard_name = trim(preg_replace("/[^a-z]/", '_', strtolower($row['dashboard_name'])),'_');
|
||||
if ($widget == $dashboard_name) {
|
||||
$dashboard_order = $dashboard_order + 10;
|
||||
if ($widget_id == $dashboard_name) {
|
||||
if (!empty($parent_id)) {
|
||||
//find parent uuid
|
||||
foreach ($dashboard as $parent_row) {
|
||||
$parent_dashboard_name = trim(preg_replace("/[^a-z]/", '_', strtolower($parent_row['dashboard_name'])), '_');
|
||||
if ($parent_dashboard_name === $parent_id) {
|
||||
$parent_uuid = $parent_row['dashboard_uuid'];
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
$array['dashboard'][$x]['dashboard_uuid'] = $row['dashboard_uuid'];
|
||||
$array['dashboard'][$x]['dashboard_name'] = $row['dashboard_name'];
|
||||
$array['dashboard'][$x]['dashboard_icon'] = $row['dashboard_icon'];
|
||||
@@ -140,8 +153,10 @@
|
||||
$array['dashboard'][$x]['dashboard_target'] = $row['dashboard_target'];
|
||||
$array['dashboard'][$x]['dashboard_width'] = $row['dashboard_width'];
|
||||
$array['dashboard'][$x]['dashboard_height'] = $row['dashboard_height'];
|
||||
$array['dashboard'][$x]['dashboard_order'] = $dashboard_order;
|
||||
$array['dashboard'][$x]['dashboard_order'] = $order;
|
||||
$array['dashboard'][$x]['dashboard_parent_uuid'] = $parent_uuid;
|
||||
$x++;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -386,6 +401,11 @@ foreach ($dashboard as $row) {
|
||||
echo " height: 195px;\n";
|
||||
echo "}\n";
|
||||
}
|
||||
if ($row['dashboard_column_span'] > 1) {
|
||||
echo "#".$dashboard_name." div.parent_widgets.hud_content {\n";
|
||||
echo " justify-content: space-evenly;\n";
|
||||
echo "}\n";
|
||||
}
|
||||
|
||||
}
|
||||
?>
|
||||
@@ -576,12 +596,13 @@ function toggle_grid_row_end_all() {
|
||||
$widget_name = $dashboard_path_array[1];
|
||||
$path_array = glob(dirname(__DIR__, 2).'/*/'.$application_name.'/resources/dashboard/'.$widget_name.'.php');
|
||||
|
||||
echo "<div class='widget' style='grid-row-end: span ".$dashboard_row_span.";' data-state='".$dashboard_details_state."' id='".$dashboard_name_id."' draggable='false'>\n";
|
||||
if (file_exists($path_array[0])) {
|
||||
include $path_array[0];
|
||||
if (empty($row['dashboard_parent_uuid'])) {
|
||||
echo "<div class='widget' style='grid-row-end: span ".$dashboard_row_span.";' data-state='".$dashboard_details_state."' id='".$dashboard_name_id."' draggable='false'>\n";
|
||||
if (file_exists($path_array[0])) {
|
||||
include $path_array[0];
|
||||
}
|
||||
echo "</div>\n";
|
||||
}
|
||||
echo "</div>\n";
|
||||
|
||||
$x++;
|
||||
}
|
||||
echo "</div>\n";
|
||||
@@ -632,8 +653,9 @@ function toggle_grid_row_end_all() {
|
||||
</style>
|
||||
|
||||
<script>
|
||||
var widgets = document.getElementById('widgets');
|
||||
var sortable;
|
||||
const widgets = document.getElementById('widgets');
|
||||
let sortable;
|
||||
|
||||
//make widgets draggable
|
||||
function edit_mode(state) {
|
||||
|
||||
@@ -642,39 +664,85 @@ function toggle_grid_row_end_all() {
|
||||
$('.hud_box').addClass('editable');
|
||||
$('#btn_back, #btn_save').show();
|
||||
$('div.widget').attr('draggable',true).addClass('editable');
|
||||
$('div.parent_widget').attr('draggable',true).addClass('editable');
|
||||
|
||||
function update_widget_order() {
|
||||
let widget_ids_list = [];
|
||||
let order = 10;
|
||||
|
||||
document.querySelectorAll('#widgets > div.widget[id]').forEach(widget => {
|
||||
const widget_id = widget.id;
|
||||
|
||||
//add the widgets to the list
|
||||
widget_ids_list.push(`${widget_id}|null|${order}`);
|
||||
order += 10;
|
||||
|
||||
//add the nested widgets to the list
|
||||
const nested_container = widget.querySelector('.parent_widgets');
|
||||
if (nested_container) {
|
||||
nested_container.querySelectorAll(':scope > div.parent_widget[id]').forEach(nested => {
|
||||
const child_id = nested.id;
|
||||
widget_ids_list.push(`${child_id}|${widget_id}|${order}`);
|
||||
order += 10;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('widget_order').value = widget_ids_list;
|
||||
}
|
||||
|
||||
sortable = Sortable.create(widgets, {
|
||||
group: 'nested',
|
||||
animation: 150,
|
||||
draggable: ".widget",
|
||||
draggable: '.widget',
|
||||
preventOnFilter: true,
|
||||
ghostClass: 'ghost',
|
||||
onSort: function (evt) {
|
||||
let widget_ids = document.querySelectorAll("#widgets > div[id]");
|
||||
let widget_ids_list = [];
|
||||
for (let i = 0; i < widget_ids.length; i++) {
|
||||
widget_ids_list.push(widget_ids[i].id);
|
||||
}
|
||||
document.getElementById('widget_order').value = widget_ids_list;
|
||||
onSort: update_widget_order,
|
||||
onAdd: function (evt) {
|
||||
evt.item.classList.add('widget');
|
||||
update_widget_order();
|
||||
},
|
||||
onRemove: function (evt) {
|
||||
evt.item.classList.remove('widget');
|
||||
update_widget_order();
|
||||
},
|
||||
});
|
||||
|
||||
// set initial widget order
|
||||
let widget_ids = document.querySelectorAll("#widgets > div[id]");
|
||||
let widget_ids_list = [];
|
||||
for (let i = 0; i < widget_ids.length; i++) {
|
||||
widget_ids_list.push(widget_ids[i].id);
|
||||
}
|
||||
document.getElementById('widget_order').value = widget_ids_list;
|
||||
document.querySelectorAll('.parent_widgets').forEach(function(container) {
|
||||
Sortable.create(container, {
|
||||
group: 'nested',
|
||||
animation: 150,
|
||||
draggable: '.parent_widget',
|
||||
ghostClass: 'ghost',
|
||||
fallbackOnBody: true,
|
||||
onSort: update_widget_order,
|
||||
onAdd: function (evt) {
|
||||
evt.item.classList.add('parent_widget');
|
||||
update_widget_order();
|
||||
},
|
||||
onRemove: function (evt) {
|
||||
evt.item.classList.remove('parent_widget');
|
||||
update_widget_order();
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
}
|
||||
else { // off
|
||||
|
||||
$('div.widget').attr('draggable',false).removeClass('editable');
|
||||
$('div.parent_widget').attr('draggable',false).removeClass('editable');
|
||||
$('.hud_box').removeClass('editable');
|
||||
$('#btn_back, #btn_save').hide();
|
||||
$('span#expand_contract, #btn_edit, #btn_add').show();
|
||||
|
||||
sortable.option('disabled', true);
|
||||
document.querySelectorAll('.parent_widgets').forEach(el => {
|
||||
const nested_sortable = Sortable.get(el);
|
||||
if (nested_sortable) {
|
||||
nested_sortable.option('disabled', true);
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@@ -23,6 +23,7 @@
|
||||
$sql .= "dashboard_name, ";
|
||||
$sql .= "dashboard_path, ";
|
||||
$sql .= "dashboard_icon, ";
|
||||
$sql .= "dashboard_icon_color, ";
|
||||
$sql .= "dashboard_url, ";
|
||||
$sql .= "dashboard_target, ";
|
||||
$sql .= "dashboard_width, ";
|
||||
@@ -38,9 +39,12 @@
|
||||
$sql .= "dashboard_label_background_color_hover, ";
|
||||
$sql .= "dashboard_number_text_color, ";
|
||||
$sql .= "dashboard_number_text_color_hover, ";
|
||||
$sql .= "dashboard_number_background_color, ";
|
||||
$sql .= "dashboard_background_color, ";
|
||||
$sql .= "dashboard_background_color_hover, ";
|
||||
$sql .= "dashboard_detail_background_color, ";
|
||||
$sql .= "dashboard_background_gradient_style, ";
|
||||
$sql .= "dashboard_background_gradient_angle, ";
|
||||
$sql .= "dashboard_column_span, ";
|
||||
$sql .= "dashboard_row_span, ";
|
||||
$sql .= "dashboard_details_state, ";
|
||||
@@ -62,110 +66,125 @@
|
||||
$window_parameters .= "width=".$dashboard_width.",height=".$dashboard_height;
|
||||
}
|
||||
|
||||
//dashboard settings
|
||||
echo "<style>\n";
|
||||
foreach ($parent_widgets as $row) {
|
||||
$dashboard_name = trim(preg_replace("/[^a-z]/", '_', strtolower($row['dashboard_name'])),'_');
|
||||
if (!empty($row['dashboard_label_text_color']) || !empty($row['dashboard_label_background_color'])) {
|
||||
echo "#".$dashboard_name." .hud_title {\n";
|
||||
if (!empty($row['dashboard_label_text_color'])) { echo " color: ".$row['dashboard_label_text_color'].";\n"; }
|
||||
if (!empty($row['dashboard_label_background_color'])) { echo " background-color: ".$row['dashboard_label_background_color'].";\n"; }
|
||||
echo "}\n";
|
||||
}
|
||||
if (!empty($row['dashboard_label_text_color_hover']) || !empty($row['dashboard_label_background_color_hover'])) {
|
||||
echo "#".$dashboard_name.":hover .hud_title {\n";
|
||||
if (!empty($row['dashboard_label_text_color_hover'])) { echo " color: ".$row['dashboard_label_text_color_hover'].";\n"; }
|
||||
if (!empty($row['dashboard_label_background_color_hover'])) { echo " background-color: ".$row['dashboard_label_background_color_hover'].";\n"; }
|
||||
echo "}\n";
|
||||
}
|
||||
if (!empty($row['dashboard_number_text_color'])) {
|
||||
echo "#".$dashboard_name." .hud_stat {\n";
|
||||
echo " color: ".$row['dashboard_number_text_color'].";\n";
|
||||
echo "}\n";
|
||||
}
|
||||
if (!empty($row['dashboard_number_text_color_hover'])) {
|
||||
echo "#".$dashboard_name.":hover .hud_stat {\n";
|
||||
echo " color: ".$row['dashboard_number_text_color_hover'].";\n";
|
||||
echo "}\n";
|
||||
}
|
||||
if (!empty($row['dashboard_background_color'])) {
|
||||
$background_color = json_decode($row['dashboard_background_color'], true);
|
||||
echo "#".$dashboard_name." {\n";
|
||||
echo " background: ".$background_color[0].";\n";
|
||||
echo " background-image: linear-gradient(to right, ".$background_color[1]." 0%, ".$background_color[0]." 30%, ".$background_color[0]." 70%, ".$background_color[1]." 100%);\n";
|
||||
echo "}\n";
|
||||
}
|
||||
if (!empty($row['dashboard_background_color_hover'])) {
|
||||
$background_color_hover = json_decode($row['dashboard_background_color_hover'], true);
|
||||
echo "#".$dashboard_name.":hover {\n";
|
||||
echo " background: ".$background_color_hover[0].";\n";
|
||||
echo " background-image: linear-gradient(to right, ".$background_color_hover[1]." 0%, ".$background_color_hover[0]." 30%, ".$background_color_hover[0]." 70%, ".$background_color_hover[1]." 100%);\n";
|
||||
echo "}\n";
|
||||
}
|
||||
if (!empty($row['dashboard_detail_background_color'])) {
|
||||
$detail_background_color = json_decode($row['dashboard_detail_background_color'], true);
|
||||
echo "#".$dashboard_name." .hud_details {\n";
|
||||
echo " background: ".$detail_background_color[0].";\n";
|
||||
echo " background-image: linear-gradient(to right, ".$detail_background_color[1]." 0%, ".$detail_background_color[0]." 30%, ".$detail_background_color[0]." 70%, ".$detail_background_color[1]." 100%);\n";
|
||||
echo "}\n";
|
||||
}
|
||||
if ($row['dashboard_label_enabled'] == 'false') {
|
||||
echo "#".$dashboard_name." .hud_title {\n";
|
||||
echo " display: none;\n";
|
||||
echo "}\n";
|
||||
echo "#".$dashboard_name." .hud_content {\n";
|
||||
echo " align-content: center;\n";
|
||||
echo "}\n";
|
||||
}
|
||||
if ($row['dashboard_path'] == "dashboard/icon") {
|
||||
echo "#".$dashboard_name.",\n";
|
||||
echo "#".$dashboard_name." span.hud_title,\n";
|
||||
echo "#".$dashboard_name." span.hud_stat {\n";
|
||||
echo " transition: .4s;\n";
|
||||
echo " border-radius: 5px;\n";
|
||||
echo "}\n";
|
||||
}
|
||||
switch ($row['dashboard_row_span']) {
|
||||
case 1:
|
||||
echo "#".$dashboard_name." .hud_content {\n";
|
||||
echo " height: 89.5px;\n";
|
||||
echo "}\n";
|
||||
echo "#".$dashboard_name." .hud_stat {\n";
|
||||
echo " line-height: 0;\n";
|
||||
echo " font-size: 30pt;\n";
|
||||
echo "}\n";
|
||||
echo "#".$dashboard_name." .hud_chart {\n";
|
||||
echo " height: 54px;\n";
|
||||
echo " width: 180px;\n";
|
||||
echo " padding-top: 0;\n";
|
||||
echo "}\n";
|
||||
echo "#".$dashboard_name." div.hud_content .fas {\n";
|
||||
echo " line-height: 0;\n";
|
||||
echo " font-size: 24pt;\n";
|
||||
echo "}\n";
|
||||
break;
|
||||
case 2:
|
||||
echo "#".$dashboard_name." .hud_content {\n";
|
||||
echo " height: 195px;\n";
|
||||
echo "}\n";
|
||||
break;
|
||||
case 3:
|
||||
echo "#".$dashboard_name." .hud_content {\n";
|
||||
echo " height: 300.5px;\n";
|
||||
echo "}\n";
|
||||
break;
|
||||
}
|
||||
?>
|
||||
|
||||
<style>
|
||||
|
||||
div.parent_widgets .hud_content {
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
div.parent_widgets {
|
||||
row-gap: 1rem;
|
||||
}
|
||||
|
||||
div.parent_widget div.hud_box:first-of-type {
|
||||
min-width: 120px;
|
||||
flex: 0 0 33.3333%;
|
||||
box-sizing: border-box;
|
||||
box-shadow: none;
|
||||
-webkit-transition: .1s;
|
||||
-moz-transition: .1s;
|
||||
transition: .1s;
|
||||
}
|
||||
|
||||
div.parent_widget:has(i) div.hud_box {
|
||||
max-height: 89.5px;
|
||||
}
|
||||
|
||||
div.parent_widget:hover:has(i) div.hud_box,
|
||||
div.parent_widget.editable:hover:has(i) div.hud_box {
|
||||
transform: scale(1.05, 1.05);
|
||||
-webkit-transition: .1s;
|
||||
-moz-transition: .1s;
|
||||
transition: .1s;
|
||||
}
|
||||
|
||||
/* dashboard settings */
|
||||
<?php
|
||||
foreach ($parent_widgets as $row) {
|
||||
$dashboard_name = trim(preg_replace("/[^a-z]/", '_', strtolower($row['dashboard_name'])),'_');
|
||||
if (!empty($row['dashboard_icon_color'])) {
|
||||
echo "#".$dashboard_name." .hud_stat:has(i) {\n";
|
||||
echo " color: ".$row['dashboard_icon_color'].";\n";
|
||||
echo "}\n";
|
||||
}
|
||||
echo "</style>\n";
|
||||
if (!empty($row['dashboard_label_text_color']) || !empty($row['dashboard_label_background_color'])) {
|
||||
echo "#".$dashboard_name." .hud_title {\n";
|
||||
if (!empty($row['dashboard_label_text_color'])) { echo " color: ".$row['dashboard_label_text_color'].";\n"; }
|
||||
if (!empty($row['dashboard_label_background_color'])) { echo " background-color: ".$row['dashboard_label_background_color'].";\n"; }
|
||||
echo "}\n";
|
||||
}
|
||||
if (!empty($row['dashboard_label_text_color_hover']) || !empty($row['dashboard_label_background_color_hover'])) {
|
||||
echo "#".$dashboard_name.":hover .hud_title {\n";
|
||||
if (!empty($row['dashboard_label_text_color_hover'])) { echo " color: ".$row['dashboard_label_text_color_hover'].";\n"; }
|
||||
if (!empty($row['dashboard_label_background_color_hover'])) { echo " background-color: ".$row['dashboard_label_background_color_hover'].";\n"; }
|
||||
echo "}\n";
|
||||
}
|
||||
if (!empty($row['dashboard_number_text_color'])) {
|
||||
echo "#".$dashboard_name." .hud_stat {\n";
|
||||
echo " color: ".$row['dashboard_number_text_color'].";\n";
|
||||
echo "}\n";
|
||||
}
|
||||
if (!empty($row['dashboard_number_text_color_hover'])) {
|
||||
echo "#".$dashboard_name.":hover .hud_stat {\n";
|
||||
echo " color: ".$row['dashboard_number_text_color_hover'].";\n";
|
||||
echo "}\n";
|
||||
}
|
||||
if (!empty($row['dashboard_background_color'])) {
|
||||
$background_color = json_decode($row['dashboard_background_color'], true);
|
||||
echo "#".$dashboard_name." {\n";
|
||||
echo " background: ".$background_color[0].";\n";
|
||||
echo " background-image: linear-gradient(to right, ".$background_color[1]." 0%, ".$background_color[0]." 30%, ".$background_color[0]." 70%, ".$background_color[1]." 100%);\n";
|
||||
echo "}\n";
|
||||
}
|
||||
if (!empty($row['dashboard_background_color_hover'])) {
|
||||
$background_color_hover = json_decode($row['dashboard_background_color_hover'], true);
|
||||
echo "#".$dashboard_name.":hover {\n";
|
||||
echo " background: ".$background_color_hover[0].";\n";
|
||||
echo " background-image: linear-gradient(to right, ".$background_color_hover[1]." 0%, ".$background_color_hover[0]." 30%, ".$background_color_hover[0]." 70%, ".$background_color_hover[1]." 100%);\n";
|
||||
echo "}\n";
|
||||
}
|
||||
if (!empty($row['dashboard_detail_background_color'])) {
|
||||
$detail_background_color = json_decode($row['dashboard_detail_background_color'], true);
|
||||
echo "#".$dashboard_name." .hud_details {\n";
|
||||
echo " background: ".$detail_background_color[0].";\n";
|
||||
echo " background-image: linear-gradient(to right, ".$detail_background_color[1]." 0%, ".$detail_background_color[0]." 30%, ".$detail_background_color[0]." 70%, ".$detail_background_color[1]." 100%);\n";
|
||||
echo "}\n";
|
||||
}
|
||||
if ($row['dashboard_label_enabled'] == 'false') {
|
||||
echo "#".$dashboard_name." .hud_title {\n";
|
||||
echo " display: none;\n";
|
||||
echo "}\n";
|
||||
echo "#".$dashboard_name." .hud_content {\n";
|
||||
echo " align-content: center;\n";
|
||||
echo "}\n";
|
||||
}
|
||||
if ($row['dashboard_path'] == "dashboard/icon") {
|
||||
echo "#".$dashboard_name.",\n";
|
||||
echo "#".$dashboard_name." span.hud_title,\n";
|
||||
echo "#".$dashboard_name." span.hud_stat {\n";
|
||||
echo " transition: .4s;\n";
|
||||
echo " border-radius: 5px;\n";
|
||||
echo "}\n";
|
||||
}
|
||||
}
|
||||
?>
|
||||
|
||||
</style>
|
||||
|
||||
<?php
|
||||
|
||||
//include the dashboards
|
||||
echo "<div class='hud_box' style='width: 100%; overflow: scroll;'>\n";
|
||||
echo " <div class='hud_content'>\n";
|
||||
echo "<div class='hud_box' style='overflow: scroll;'>\n";
|
||||
echo " <div class='parent_widgets hud_content'>\n";
|
||||
|
||||
$x = 0;
|
||||
foreach ($parent_widgets as $row) {
|
||||
$dashboard_name = $row['dashboard_name'];
|
||||
$dashboard_label = $row['dashboard_name'];
|
||||
//set the variables
|
||||
$dashboard_uuid = $row['dashboard_uuid'] ?? '';
|
||||
$dashboard_name = $row['dashboard_name'] ?? '';
|
||||
$dashboard_label = $row['dashboard_name'] ?? '';
|
||||
$dashboard_icon = $row['dashboard_icon'] ?? '';
|
||||
$dashboard_url = $row['dashboard_url'] ?? '';
|
||||
$dashboard_target = $row['dashboard_target'] ?? '';
|
||||
@@ -174,18 +193,50 @@
|
||||
$dashboard_content = $row['dashboard_content'] ?? '';
|
||||
$dashboard_content_text_align = $row['dashboard_content_text_align'] ?? '';
|
||||
$dashboard_content_details = $row['dashboard_content_details'] ?? '';
|
||||
//$dashboard_chart_type = $row['dashboard_chart_type'] ?? "doughnut";
|
||||
$dashboard_label_text_color = $row['dashboard_label_text_color'] ?? $settings->get('theme', 'dashboard_label_text_color');
|
||||
$dashboard_number_text_color = $row['dashboard_number_text_color'] ?? $settings->get('theme', 'dashboard_number_text_color');
|
||||
//$dashboard_details_state = $row['dashboard_details_state'] ?? "expanded";
|
||||
//$dashboard_row_span = $row['dashboard_row_span'] ?? 2;
|
||||
//if ($dashboard_details_state == "expanded") {
|
||||
// $dashboard_row_span += 3;
|
||||
//}
|
||||
$dashboard_chart_type = $row['dashboard_chart_type'] ?? "doughnut";
|
||||
$dashboard_label_text_color = $row['dashboard_label_text_color'] ?? $settings->get('theme', 'dashboard_label_text_color', '');
|
||||
$dashboard_number_text_color = $row['dashboard_number_text_color'] ?? $settings->get('theme', 'dashboard_number_text_color', '');
|
||||
$dashboard_number_background_color = $row['dashboard_number_background_color'] ?? $settings->get('theme', 'dashboard_number_background_color', '');
|
||||
$dashboard_details_state = $row['dashboard_details_state'] ?? "expanded";
|
||||
$dashboard_row_span = $row['dashboard_row_span'] ?? 2;
|
||||
|
||||
echo "<div class='icon_widget' style='width: 120px; margin: 15px 15px 8px 15px;' id='".trim(preg_replace("/[^a-z]/", '_', strtolower($dashboard_name)),'_')."' onclick=\"window.open('".$dashboard_url."', '".$dashboard_target."', '".$window_parameters."')\" draggable='false'>\n";
|
||||
echo " <span class='hud_title'>".escape($dashboard_label)."</span>";
|
||||
echo " <span class='hud_stat' style='padding: 0 0 7px 0;'><i class=\"fas ".$dashboard_icon."\" style='font-size: 24pt;'></i></span>\n";
|
||||
//define the regex patterns
|
||||
$uuid_pattern = '/[^-A-Fa-f0-9]/';
|
||||
$number_pattern = '/[^-A-Za-z0-9()*#]/';
|
||||
$text_pattern = '/[^a-zA-Z0-9 _\-\/.\?:\=#\n]/';
|
||||
|
||||
//sanitize the data
|
||||
$dashboard_uuid = preg_replace($uuid_pattern, '', $dashboard_uuid);
|
||||
$dashboard_name = trim(preg_replace($text_pattern, '', $dashboard_name));
|
||||
$dashboard_name_id = trim(preg_replace("/[^a-z_]/", '_', strtolower($dashboard_name)),'_');
|
||||
$dashboard_icon = preg_replace($text_pattern, '', $dashboard_icon);
|
||||
$dashboard_url = trim(preg_replace($text_pattern, '', $dashboard_url));
|
||||
$dashboard_target = trim(preg_replace($text_pattern, '', $dashboard_target));
|
||||
$dashboard_width = trim(preg_replace($text_pattern, '', $dashboard_width));
|
||||
$dashboard_height = trim(preg_replace($text_pattern, '', $dashboard_height));
|
||||
$dashboard_content = preg_replace($text_pattern, '', $dashboard_content);
|
||||
$dashboard_content = str_replace("\n", '<br />', $dashboard_content);
|
||||
$dashboard_content_text_align = trim(preg_replace($text_pattern, '', $dashboard_content_text_align));
|
||||
$dashboard_content_details = preg_replace($text_pattern, '', $dashboard_content_details);
|
||||
$dashboard_content_details = str_replace("\n", '<br />', $dashboard_content_details);
|
||||
$dashboard_chart_type = preg_replace($text_pattern, '', $dashboard_chart_type);
|
||||
$dashboard_label_text_color = preg_replace($text_pattern, '', $dashboard_label_text_color);
|
||||
$dashboard_number_text_color = preg_replace($text_pattern, '', $dashboard_number_text_color);
|
||||
$dashboard_number_background_color = preg_replace($text_pattern, '', $dashboard_number_background_color);
|
||||
$dashboard_details_state = preg_replace($text_pattern, '', $dashboard_details_state);
|
||||
$dashboard_row_span = preg_replace($number_pattern, '', $dashboard_row_span);
|
||||
$dashboard_path = preg_replace($text_pattern, '', strtolower($row['dashboard_path']));
|
||||
|
||||
//find the application and widget
|
||||
$dashboard_path_array = explode('/', $dashboard_path);
|
||||
$application_name = $dashboard_path_array[0];
|
||||
$parent_widget_name = $dashboard_path_array[1];
|
||||
$path_array = glob(dirname(__DIR__, 4).'/*/'.$application_name.'/resources/dashboard/'.$parent_widget_name.'.php');
|
||||
|
||||
echo "<div class='parent_widget' onclick=\"".(!empty($dashboard_url && $dashboard_path == "dashboard/icon") ? "window.open('". $dashboard_url ."', '". $dashboard_target ."', '". $window_parameters ."')" : "")."\" id='".$dashboard_name_id."' draggable='false'>\n";
|
||||
if (file_exists($path_array[0])) {
|
||||
include $path_array[0];
|
||||
}
|
||||
echo "</div>\n";
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user