mirror of
https://github.com/fusionpbx/fusionpbx.git
synced 2025-12-30 00:53:50 +00:00
912 lines
33 KiB
PHP
912 lines
33 KiB
PHP
<?php
|
|
/*
|
|
FusionPBX
|
|
Version: MPL 1.1
|
|
|
|
The contents of this file are subject to the Mozilla Public License Version
|
|
1.1 (the "License"); you may not use this file except in compliance with
|
|
the License. You may obtain a copy of the License at
|
|
http://www.mozilla.org/MPL/
|
|
|
|
Software distributed under the License is distributed on an "AS IS" basis,
|
|
WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
|
|
for the specific language governing rights and limitations under the
|
|
License.
|
|
|
|
The Original Code is FusionPBX
|
|
|
|
The Initial Developer of the Original Code is
|
|
Mark J Crane <markjcrane@fusionpbx.com>
|
|
Portions created by the Initial Developer are Copyright (C) 2022-2025
|
|
the Initial Developer. All Rights Reserved.
|
|
|
|
Contributor(s):
|
|
Mark J Crane <markjcrane@fusionpbx.com>
|
|
*/
|
|
|
|
//includes files
|
|
require_once dirname(__DIR__, 2) . "/resources/require.php";
|
|
|
|
//if config.conf file does not exist then redirect to the install page
|
|
if (file_exists("/usr/local/etc/fusionpbx/config.conf")){
|
|
//BSD
|
|
}
|
|
elseif (file_exists("/etc/fusionpbx/config.conf")){
|
|
//Linux
|
|
}
|
|
elseif (file_exists(getenv('SystemDrive') . DIRECTORY_SEPARATOR . 'ProgramData' . DIRECTORY_SEPARATOR . 'fusionpbx' . DIRECTORY_SEPARATOR . 'config.conf')) {
|
|
// Windows
|
|
}
|
|
else {
|
|
header("Location: /core/install/install.php");
|
|
exit;
|
|
}
|
|
|
|
//additional includes
|
|
require_once "resources/check_auth.php";
|
|
|
|
//disable login message
|
|
if (isset($_GET['msg']) && $_GET['msg'] == 'dismiss') {
|
|
unset($_SESSION['login']['message']);
|
|
|
|
$sql = "update v_default_settings ";
|
|
$sql .= "set default_setting_enabled = false ";
|
|
$sql .= "where ";
|
|
$sql .= "default_setting_category = 'login' ";
|
|
$sql .= "and default_setting_subcategory = 'message' ";
|
|
$sql .= "and default_setting_name = 'text' ";
|
|
$database->execute($sql);
|
|
unset($sql);
|
|
}
|
|
|
|
//build a list of groups the user is a member of to be used in a SQL in
|
|
if (is_array($_SESSION['user']['groups'])) {
|
|
foreach ($_SESSION['user']['groups'] as $group) {
|
|
$group_uuids[] = $group['group_uuid'];
|
|
}
|
|
}
|
|
if (is_array($group_uuids)) {
|
|
$group_uuids_in = "'".implode("','", $group_uuids)."'";
|
|
}
|
|
|
|
//get the dashboard uuid
|
|
$sql = "select dashboard_uuid ";
|
|
$sql .= "from v_dashboards ";
|
|
$sql .= "where dashboard_enabled = true ";
|
|
$sql .= "and (";
|
|
$sql .= " domain_uuid = :domain_uuid ";
|
|
$sql .= " or domain_uuid is null ";
|
|
$sql .= ") ";
|
|
if (!empty($_GET['name'])) {
|
|
$sql .= "and dashboard_name = :dashboard_name ";
|
|
$parameters['dashboard_name'] = $_GET['name'];
|
|
}
|
|
$sql .= "order by case when domain_uuid = :domain_uuid then 0 else 1 end ";
|
|
$parameters['domain_uuid'] = $_SESSION['domain_uuid'];
|
|
$result = $database->select($sql, $parameters ?? null, 'all');
|
|
$dashboard_uuid = $result[0]['dashboard_uuid'] ?? null;
|
|
unset($sql, $parameters);
|
|
|
|
//get the list
|
|
$sql = "select ";
|
|
$sql .= "dashboard_uuid, ";
|
|
$sql .= "dashboard_widget_uuid, ";
|
|
$sql .= "widget_name, ";
|
|
$sql .= "widget_path, ";
|
|
$sql .= "widget_icon, ";
|
|
$sql .= "widget_icon_color, ";
|
|
$sql .= "widget_url, ";
|
|
$sql .= "widget_target, ";
|
|
$sql .= "widget_width, ";
|
|
$sql .= "widget_height, ";
|
|
$sql .= "widget_content, ";
|
|
$sql .= "widget_content_text_align, ";
|
|
$sql .= "widget_content_details, ";
|
|
$sql .= "widget_chart_type, ";
|
|
$sql .= "widget_label_enabled, ";
|
|
$sql .= "widget_label_text_color, ";
|
|
$sql .= "widget_label_text_color_hover, ";
|
|
$sql .= "widget_label_background_color, ";
|
|
$sql .= "widget_label_background_color_hover, ";
|
|
$sql .= "widget_number_text_color, ";
|
|
$sql .= "widget_number_text_color_hover, ";
|
|
$sql .= "widget_number_background_color, ";
|
|
$sql .= "widget_background_color, ";
|
|
$sql .= "widget_background_color_hover, ";
|
|
$sql .= "widget_detail_background_color, ";
|
|
$sql .= "widget_background_gradient_style, ";
|
|
$sql .= "widget_background_gradient_angle, ";
|
|
$sql .= "widget_column_span, ";
|
|
$sql .= "widget_row_span, ";
|
|
$sql .= "widget_details_state, ";
|
|
$sql .= "dashboard_widget_parent_uuid, ";
|
|
$sql .= "widget_order, ";
|
|
$sql .= "cast(widget_enabled as text), ";
|
|
$sql .= "widget_description ";
|
|
$sql .= "from v_dashboard_widgets as d ";
|
|
$sql .= "where widget_enabled = true ";
|
|
$sql .= "and dashboard_widget_uuid in ( ";
|
|
$sql .= " select dashboard_widget_uuid from v_dashboard_widget_groups where group_uuid in ( ";
|
|
$sql .= " ".$group_uuids_in." ";
|
|
$sql .= " ) ";
|
|
$sql .= ") ";
|
|
$sql .= "and dashboard_uuid = :dashboard_uuid ";
|
|
$sql .= "order by widget_order, widget_name asc ";
|
|
$parameters['dashboard_uuid'] = $dashboard_uuid;
|
|
$widgets = $database->select($sql, $parameters ?? null, 'all');
|
|
unset($sql, $parameters);
|
|
|
|
//get the list of widget uuids
|
|
$widget_uuid_list = [];
|
|
foreach ($widgets as $row) {
|
|
$widget_uuid_list[] = $row['dashboard_widget_uuid'];
|
|
}
|
|
|
|
//get http post variables and set them to php variables
|
|
if (count($_POST) > 0 && permission_exists('dashboard_edit')) {
|
|
//set the variables from the http values
|
|
if (isset($_POST["widget_order"])) {
|
|
$widget_order = explode(",", $_POST["widget_order"]);
|
|
$x = 0;
|
|
|
|
foreach ($widget_order as $widget) {
|
|
list($widget_id, $parent_id, $order) = explode("|", $widget);
|
|
$parent_uuid = null;
|
|
|
|
foreach ($widgets as $row) {
|
|
$dashboard_widget_id = 'id_'.md5(preg_replace('/[^-A-Fa-f0-9]/', '', $row['dashboard_widget_uuid']));
|
|
if ($widget_id == $dashboard_widget_id) {
|
|
if (!empty($parent_id)) {
|
|
//find parent uuid
|
|
foreach ($widgets as $parent_row) {
|
|
$parent_widget_id = 'id_'.md5(preg_replace('/[^-A-Fa-f0-9]/', '', $parent_row['dashboard_widget_uuid']));
|
|
if ($parent_widget_id === $parent_id) {
|
|
$parent_uuid = $parent_row['dashboard_widget_uuid'];
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
$array['dashboard_widgets'][$x]['dashboard_widget_uuid'] = $row['dashboard_widget_uuid'];
|
|
$array['dashboard_widgets'][$x]['widget_name'] = $row['widget_name'];
|
|
$array['dashboard_widgets'][$x]['widget_icon'] = $row['widget_icon'];
|
|
$array['dashboard_widgets'][$x]['widget_url'] = $row['widget_url'];
|
|
$array['dashboard_widgets'][$x]['widget_content'] = $row['widget_content'];
|
|
$array['dashboard_widgets'][$x]['widget_content_text_align'] = $row['widget_content_text_align'];
|
|
$array['dashboard_widgets'][$x]['widget_content_details'] = $row['widget_content_details'];
|
|
$array['dashboard_widgets'][$x]['widget_target'] = $row['widget_target'];
|
|
$array['dashboard_widgets'][$x]['widget_width'] = $row['widget_width'];
|
|
$array['dashboard_widgets'][$x]['widget_height'] = $row['widget_height'];
|
|
$array['dashboard_widgets'][$x]['widget_order'] = $order;
|
|
$array['dashboard_widgets'][$x]['dashboard_widget_parent_uuid'] = $parent_uuid;
|
|
$x++;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
//save the data
|
|
if (is_array($array)) {
|
|
$database->save($array);
|
|
}
|
|
|
|
//redirect the browser
|
|
message::add($text['message-update']);
|
|
header("Location: /core/dashboard/".(!empty($_GET['name']) ? "?name=".urlencode($_GET['name']) : null));
|
|
return;
|
|
}
|
|
}
|
|
|
|
//add multi-lingual support
|
|
$language = new text;
|
|
$text = $language->get();
|
|
|
|
//add the settings object
|
|
$settings = new settings(["domain_uuid" => $_SESSION['domain_uuid'], "user_uuid" => $_SESSION['user_uuid']]);
|
|
|
|
//load the header
|
|
$document['title'] = $text['title-dashboard'];
|
|
require_once "resources/header.php";
|
|
|
|
//include websockets
|
|
$version = md5(file_get_contents(__DIR__ . '/resources/javascript/ws_client.js'));
|
|
echo "<script src='/core/dashboard/resources/javascript/ws_client.js?v=$version'></script>\n";
|
|
|
|
//include sortablejs
|
|
echo "<script src='/resources/sortablejs/sortable.min.js'></script>";
|
|
|
|
//include chart.js
|
|
echo "<script src='/resources/chartjs/chart.min.js'></script>";
|
|
echo "<script src='/resources/chartjs/chartjs-adapter-date-fns.bundle.min.js'></script>";
|
|
echo "<script src='/resources/chartjs/chartjs-plugin-streaming.js'></script>";
|
|
|
|
//chart variables
|
|
echo "<script>\n";
|
|
echo " var chart_text_font = '".$settings->get('theme', 'dashboard_number_text_font', 'arial')."';\n";
|
|
echo " var chart_text_size = '".$settings->get('theme', 'dashboard_chart_text_size', '30px')."';\n";
|
|
echo " Chart.overrides.doughnut.cutout = '".$settings->get('theme', 'dashboard_chart_cutout', '75%')."';\n";
|
|
echo " Chart.defaults.responsive = true;\n";
|
|
echo " Chart.defaults.maintainAspectRatio = false;\n";
|
|
echo " Chart.defaults.plugins.legend.display = false;\n";
|
|
echo "</script>\n";
|
|
|
|
//determine initial state all button to display
|
|
$expanded_all = true;
|
|
if (!empty($widgets)) {
|
|
foreach ($widgets as $row) {
|
|
if ($row['widget_details_state'] == 'contracted' || $row['widget_details_state'] == 'hidden' || $row['widget_details_state'] == 'disabled') { $expanded_all = false; }
|
|
}
|
|
}
|
|
|
|
//show the content
|
|
echo "<div class='action_bar' id='action_bar'>\n";
|
|
echo " <div class='heading'><b>".$text['title-dashboard']."</b></div>\n";
|
|
echo " <div class='actions'>\n";
|
|
echo " <form id='dashboard' method='post' _onsubmit='setFormSubmitting()'>\n";
|
|
if ($settings->get('theme', 'menu_style', '') != 'side') {
|
|
echo " ".$text['label-welcome']." <a href='".PROJECT_PATH."/core/users/user_profile.php'>".$_SESSION["username"]."</a> ";
|
|
}
|
|
if (permission_exists('dashboard_edit')) {
|
|
echo button::create(['type'=>'button','label'=>$text['button-back'],'icon'=>$settings->get('theme', 'button_icon_back'),'id'=>'btn_back','name'=>'btn_back','style'=>'display: none;','onclick'=>"edit_mode('off');"]);
|
|
echo button::create(['type'=>'submit','label'=>$text['button-save'],'icon'=>$settings->get('theme', 'button_icon_save'),'id'=>'btn_save','name'=>'btn_save','style'=>'display: none; margin-left: 15px;']);
|
|
}
|
|
echo "<span id='expand_contract'>\n";
|
|
echo button::create(['type'=>'button','label'=>$text['button-expand_all'],'icon'=>$settings->get('theme', 'button_icon_expand'),'id'=>'btn_expand','name'=>'btn_expand','style'=>($expanded_all ? 'display: none;' : null),'onclick'=>"$('.hud_details').slideDown('fast'); $(this).hide(); $('#btn_contract').show(); toggle_grid_row_span_all();"]);
|
|
echo button::create(['type'=>'button','label'=>$text['button-collapse_all'],'icon'=>$settings->get('theme', 'button_icon_contract'),'id'=>'btn_contract','name'=>'btn_contract','style'=>(!$expanded_all ? 'display: none;' : null),'onclick'=>"$('.hud_details').slideUp('fast'); $(this).hide(); $('#btn_expand').show(); toggle_grid_row_span_all();"]);
|
|
echo "</span>\n";
|
|
if (permission_exists('dashboard_edit')) {
|
|
echo button::create(['type'=>'button','label'=>$text['button-edit'],'icon'=>$settings->get('theme', 'button_icon_edit'),'id'=>'btn_edit','name'=>'btn_edit','style'=>'margin-left: 15px;','onclick'=>"edit_mode('on');"]);
|
|
echo button::create(['type'=>'button','label'=>$text['button-settings'],'icon'=>$settings->get('theme', 'button_icon_add'),'id'=>'btn_add','name'=>'btn_add','link'=>'dashboard.php']);
|
|
}
|
|
echo " <input type='hidden' id='widget_order' name='widget_order' value='' />\n";
|
|
echo " </form>\n";
|
|
echo " </div>\n";
|
|
echo " <div style='clear: both;'></div>\n";
|
|
echo "</div>\n";
|
|
|
|
//display login message
|
|
//if (if_group("superadmin") && !empty($settings->get('login', 'message')) && $settings->get('login', 'message') != '') {
|
|
// echo "<div class='login_message' width='100%'><b>".$text['login-message_attention']."</b> ".$settings->get('login', 'message')." (<a href='?msg=dismiss'>".$text['login-message_dismiss']."</a>)</div>\n";
|
|
//}
|
|
|
|
?>
|
|
|
|
<style>
|
|
|
|
:root {
|
|
--row-height: 89.5px;
|
|
--grid-gap: 16px;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.widget {
|
|
/*background-color: #eee;*/
|
|
cursor: pointer;
|
|
}
|
|
|
|
.widgets {
|
|
max-width: 100%;
|
|
margin: 0 auto;
|
|
display: grid;
|
|
grid-gap: var(--grid-gap);
|
|
}
|
|
|
|
div.hud_content {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
align-content: start;
|
|
-webkit-transition: .4s;
|
|
-moz-transition: .4s;
|
|
transition: .4s;
|
|
}
|
|
|
|
div.hud_chart {
|
|
height: 150px;
|
|
padding-top: 7px;
|
|
}
|
|
|
|
/* dashboard settings */
|
|
<?php
|
|
foreach ($widgets as $row) {
|
|
$widget_id = 'id_'.md5(preg_replace('/[^-A-Fa-f0-9]/', '', $row['dashboard_widget_uuid']));
|
|
if (!empty($row['widget_icon_color'])) {
|
|
echo "#".$widget_id." .hud_stat .fas {\n";
|
|
echo " color: ".$row['widget_icon_color'].";\n";
|
|
echo "}\n";
|
|
}
|
|
if ($row['widget_label_enabled'] === false && $row['widget_path'] != 'dashboard/parent') {
|
|
echo "#".$widget_id." .hud_title:first-of-type {\n";
|
|
echo " display: none;\n";
|
|
echo "}\n";
|
|
echo "#".$widget_id." .hud_content {\n";
|
|
echo " align-content: center;\n";
|
|
echo "}\n";
|
|
echo "#".$widget_id." .hud_chart {\n";
|
|
echo " padding-top: 0;\n";
|
|
echo "}\n";
|
|
}
|
|
if (!empty($row['widget_label_text_color']) || !empty($row['widget_label_background_color'])) {
|
|
echo "#".$widget_id." > .hud_box > .hud_content > .hud_title:first-of-type {\n";
|
|
if (!empty($row['widget_label_text_color'])) { echo " color: ".$row['widget_label_text_color'].";\n"; }
|
|
if (!empty($row['widget_label_background_color'])) { echo " background-color: ".$row['widget_label_background_color'].";\n"; }
|
|
echo "}\n";
|
|
}
|
|
if (!empty($row['widget_label_text_color_hover']) || !empty($row['widget_label_background_color_hover'])) {
|
|
echo "#".$widget_id.":hover > .hud_box > .hud_content > .hud_title:first-of-type {\n";
|
|
if (!empty($row['widget_label_text_color_hover'])) { echo " color: ".$row['widget_label_text_color_hover'].";\n"; }
|
|
if (!empty($row['widget_label_background_color_hover'])) { echo " background-color: ".$row['widget_label_background_color_hover'].";\n"; }
|
|
echo "}\n";
|
|
}
|
|
if (!empty($row['widget_number_text_color'])) {
|
|
echo "#".$widget_id." > .hud_box > .hud_content > .hud_stat {\n";
|
|
echo " color: ".$row['widget_number_text_color'].";\n";
|
|
echo "}\n";
|
|
}
|
|
if (!empty($row['widget_number_text_color_hover'])) {
|
|
echo "#".$widget_id.":hover > .hud_box > .hud_content > .hud_stat {\n";
|
|
echo " color: ".$row['widget_number_text_color_hover'].";\n";
|
|
echo "}\n";
|
|
}
|
|
if (!empty($row['widget_background_color'])) {
|
|
$background_color = json_validate($row['widget_background_color']) ? json_decode($row['widget_background_color'], true) : $row['widget_background_color'];
|
|
if (!isset($background_color[1])) {
|
|
$background_color[1] = '';
|
|
}
|
|
echo "#".$widget_id." > .hud_box:first-of-type {\n";
|
|
echo " background: ".$background_color[0].";\n";
|
|
if (empty($row['widget_background_gradient_style']) || $row['widget_background_gradient_style'] == 'mirror') {
|
|
echo " background-image: linear-gradient(".(empty($row['widget_background_gradient_angle']) ? '0deg' : $row['widget_background_gradient_angle'].'deg').", ".$background_color[1]." 0%, ".$background_color[0]." 30%, ".$background_color[0]." 70%, ".$background_color[1]." 100%);\n";
|
|
}
|
|
else { //simple
|
|
echo " background-image: linear-gradient(".(empty($row['widget_background_gradient_angle']) ? '0deg' : $row['widget_background_gradient_angle'].'deg').", ".$background_color[0]." 0%, ".$background_color[1]." 100%);\n";
|
|
}
|
|
echo "}\n";
|
|
}
|
|
if (!empty($row['widget_background_color_hover'])) {
|
|
$background_color_hover = json_validate($row['widget_background_color_hover']) ? json_decode($row['widget_background_color_hover'], true) : $row['widget_background_color_hover'];
|
|
if (!isset($background_color_hover[1])) {
|
|
$background_color_hover[1] = '';
|
|
}
|
|
echo "#".$widget_id.":hover > .hud_box:first-of-type {\n";
|
|
echo " background: ".$background_color_hover[0].";\n";
|
|
if (empty($row['widget_background_gradient_style']) || $row['widget_background_gradient_style'] == 'mirror') {
|
|
echo " background-image: linear-gradient(".(empty($row['widget_background_gradient_angle']) ? '0deg' : $row['widget_background_gradient_angle'].'deg').", ".$background_color_hover[1]." 0%, ".$background_color_hover[0]." 30%, ".$background_color_hover[0]." 70%, ".$background_color_hover[1]." 100%);\n";
|
|
}
|
|
else { //simple
|
|
echo " background-image: linear-gradient(".(empty($row['widget_background_gradient_angle']) ? '0deg' : $row['widget_background_gradient_angle'].'deg').", ".$background_color_hover[0]." 0%, ".$background_color_hover[1]." 100%);\n";
|
|
}
|
|
echo "}\n";
|
|
}
|
|
if (!empty($row['widget_detail_background_color'])) {
|
|
$detail_background_color = json_validate($row['widget_detail_background_color']) ? json_decode($row['widget_detail_background_color'], true) : $row['widget_detail_background_color'];
|
|
if (!isset($detail_background_color[1])) {
|
|
$detail_background_color[1] = '';
|
|
}
|
|
echo "#".$widget_id." > .hud_box > .hud_details {\n";
|
|
echo " background: ".$detail_background_color[0].";\n";
|
|
if (empty($row['widget_background_gradient_style']) || $row['widget_background_gradient_style'] == 'mirror') {
|
|
echo " background-image: linear-gradient(".(empty($row['widget_background_gradient_angle']) ? '0deg' : $row['widget_background_gradient_angle'].'deg').", ".$detail_background_color[1]." 0%, ".$detail_background_color[0]." 30%, ".$detail_background_color[0]." 70%, ".$detail_background_color[1]." 100%);\n";
|
|
}
|
|
else { //simple
|
|
echo " background-image: linear-gradient(".(empty($row['widget_background_gradient_angle']) ? '0deg' : $row['widget_background_gradient_angle'].'deg').", ".$detail_background_color[0]." 0%, ".$detail_background_color[1]." 100%);\n";
|
|
}
|
|
echo "}\n";
|
|
}
|
|
if ($row['widget_path'] == "dashboard/icon") {
|
|
echo "#".$widget_id." div.hud_content,\n";
|
|
echo "#".$widget_id." span.hud_title,\n";
|
|
echo "#".$widget_id." span.hud_stat {\n";
|
|
echo " transition: .4s;\n";
|
|
echo "}\n";
|
|
}
|
|
switch ($row['widget_row_span']) {
|
|
case 1:
|
|
echo "#".$widget_id." > .hud_box > .hud_content {\n";
|
|
echo " height: var(--row-height);\n";
|
|
echo "}\n";
|
|
echo "#".$widget_id." .hud_stat {\n";
|
|
echo " line-height: 0;\n";
|
|
echo " font-size: 30pt;\n";
|
|
echo "}\n";
|
|
echo "#".$widget_id." .hud_stat .fas {\n";
|
|
echo " line-height: 0;\n";
|
|
echo " font-size: 24pt;\n";
|
|
echo "}\n";
|
|
echo "#".$widget_id." > .hud_box > .hud_content > .hud_chart {\n";
|
|
echo " height: 54px;\n";
|
|
echo " width: 180px;\n";
|
|
echo " padding-top: 0;\n";
|
|
echo "}\n";
|
|
break;
|
|
case 2:
|
|
echo "#".$widget_id." > .hud_box > .hud_content {\n";
|
|
echo " height: calc((var(--row-height) * 2) + var(--grid-gap));\n";
|
|
echo "}\n";
|
|
break;
|
|
case 3:
|
|
echo "#".$widget_id." > .hud_box > .hud_content {\n";
|
|
echo " height: calc((var(--row-height) * 3) + (var(--grid-gap) * 2));\n";
|
|
echo "}\n";
|
|
break;
|
|
case 4:
|
|
echo "#".$widget_id." > .hud_box > .hud_content {\n";
|
|
echo " height: calc((var(--row-height) * 4) + (var(--grid-gap) * 3));\n";
|
|
echo "}\n";
|
|
break;
|
|
default: //if empty
|
|
echo "#".$widget_id." > .hud_box > .hud_content {\n";
|
|
echo " height: calc((var(--row-height) * 2) + var(--grid-gap));\n";
|
|
echo "}\n";
|
|
}
|
|
$row_span = $row['widget_row_span'] * 4;
|
|
$expanded_row_span = $row_span + 13;
|
|
//has detail expand button
|
|
if ($row['widget_details_state'] === "expanded" || $row['widget_details_state'] === "contracted") {
|
|
$row_span += 1;
|
|
$expanded_row_span += 1;
|
|
}
|
|
if (!empty($row['widget_row_span'])) {
|
|
echo "#".$widget_id." {\n";
|
|
echo " --row-span: ".$row['widget_row_span'].";\n";
|
|
echo "}\n";
|
|
echo "#".$widget_id." {\n";
|
|
echo " grid-row: span ".$row_span.";\n";
|
|
echo "}\n";
|
|
echo "#".$widget_id.".expanded {\n";
|
|
echo " grid-row: span ".$expanded_row_span.";\n";
|
|
echo "}\n";
|
|
}
|
|
if (!empty($row['widget_column_span'])) {
|
|
echo "#".$widget_id." {\n";
|
|
echo " grid-column: span ".$row['widget_column_span'].";\n";
|
|
echo "}\n";
|
|
}
|
|
if ($row['widget_path'] != "dashboard/icon" && $row['widget_chart_type'] != "icon" && $row['widget_column_span'] == 1) {
|
|
echo "#".$widget_id.".child_widget {\n";
|
|
echo " grid-column: span 2;\n";
|
|
echo "}\n";
|
|
}
|
|
}
|
|
?>
|
|
|
|
/* Screen smaller than 575px? 1 columns */
|
|
@media (max-width: 575px) {
|
|
.widgets { grid-template-columns: repeat(1, minmax(100px, 1fr)); }
|
|
.col-num { grid-column: span 1; }
|
|
<?php
|
|
foreach ($widgets as $row) {
|
|
$widget_id = 'id_'.md5(preg_replace('/[^-A-Fa-f0-9]/', '', $row['dashboard_widget_uuid']));
|
|
if (!empty($row['widget_column_span'])) {
|
|
echo "#".$widget_id." {\n";
|
|
echo " grid-column: span 1;\n";
|
|
echo "}\n";
|
|
}
|
|
if ($row['widget_details_state'] == "hidden" || $row['widget_details_state'] == "disabled") {
|
|
echo "#".$widget_id." .hud_box .hud_expander, \n";
|
|
echo "#".$widget_id." .hud_box .hud_details {\n";
|
|
echo " display: none;\n";
|
|
echo "}\n";
|
|
}
|
|
}
|
|
?>
|
|
}
|
|
|
|
/* Screen larger than 575px? 2 columns */
|
|
@media (min-width: 575px) {
|
|
.widgets { grid-template-columns: repeat(2, minmax(100px, 1fr)); }
|
|
.col-num { grid-column: span 2; }
|
|
<?php
|
|
foreach ($widgets as $row) {
|
|
$widget_id = 'id_'.md5(preg_replace('/[^-A-Fa-f0-9]/', '', $row['dashboard_widget_uuid']));
|
|
if ($row['widget_column_span'] > 2) {
|
|
echo "#".$widget_id." {\n";
|
|
echo " grid-column: span 2;\n";
|
|
echo "}\n";
|
|
}
|
|
if ($row['widget_details_state'] == "expanded") {
|
|
echo "#".$widget_id." .hud_box .hud_details {\n";
|
|
echo " display: block;\n";
|
|
echo "}\n";
|
|
}
|
|
if ($row['widget_details_state'] == "contracted") {
|
|
echo "#".$widget_id." .widget .hud_box .hud_details {\n";
|
|
echo " display: none;\n";
|
|
echo "}\n";
|
|
}
|
|
if ($row['widget_details_state'] == "hidden" || $row['widget_details_state'] == "disabled") {
|
|
echo "#".$widget_id." .hud_box .hud_expander, \n";
|
|
echo "#".$widget_id." .hud_box .hud_details {\n";
|
|
echo " display: none;\n";
|
|
echo "}\n";
|
|
}
|
|
}
|
|
?>
|
|
}
|
|
|
|
/* Screen larger than 1300px? 3 columns */
|
|
@media (min-width: 1300px) {
|
|
.widgets { grid-template-columns: repeat(3, minmax(100px, 1fr)); }
|
|
.col-num { grid-column: span 2; }
|
|
<?php
|
|
foreach ($widgets as $row) {
|
|
$widget_id = 'id_'.md5(preg_replace('/[^-A-Fa-f0-9]/', '', $row['dashboard_widget_uuid']));
|
|
if ($row['widget_column_span'] > 3) {
|
|
echo "#".$widget_id." {\n";
|
|
echo " grid-column: span 3;\n";
|
|
echo "}\n";
|
|
}
|
|
}
|
|
?>
|
|
}
|
|
|
|
/* Screen larger than 1500px? 4 columns */
|
|
@media (min-width: 1500px) {
|
|
.widgets { grid-template-columns: repeat(4, minmax(100px, 1fr)); }
|
|
.col-num { grid-column: span 2; }
|
|
<?php
|
|
foreach ($widgets as $row) {
|
|
$widget_id = 'id_'.md5(preg_replace('/[^-A-Fa-f0-9]/', '', $row['dashboard_widget_uuid']));
|
|
if (!empty($row['widget_column_span'])) {
|
|
echo "#".$widget_id." {\n";
|
|
echo " grid-column: span ".$row['widget_column_span'].";\n";
|
|
echo "}\n";
|
|
}
|
|
}
|
|
?>
|
|
}
|
|
|
|
/* Screen larger than 2000px? 5 columns */
|
|
@media (min-width: 2000px) {
|
|
.widgets { grid-template-columns: repeat(5, minmax(100px, 1fr)); }
|
|
.col-num { grid-column: span 2; }
|
|
}
|
|
|
|
</style>
|
|
|
|
<script>
|
|
|
|
document.addEventListener('click', function(event) {
|
|
let hud_content = event.target.closest('.hud_content');
|
|
let hud_expander = event.target.closest('.hud_expander');
|
|
|
|
if (hud_content || hud_expander) {
|
|
let widget = event.target.closest('div.widget, div.child_widget');
|
|
|
|
if (widget.classList.contains('disabled')) {
|
|
return;
|
|
}
|
|
|
|
if (widget && widget.id) {
|
|
toggle_grid_row_span(widget.id);
|
|
}
|
|
}
|
|
});
|
|
|
|
function toggle_grid_row_span(widget_id) {
|
|
let widget = document.getElementById(widget_id);
|
|
|
|
if (widget.classList.contains('expanded')) {
|
|
widget.classList.remove('expanded');
|
|
}
|
|
else {
|
|
widget.classList.add('expanded');
|
|
}
|
|
}
|
|
|
|
let first_toggle = false;
|
|
|
|
function toggle_grid_row_span_all() {
|
|
const widgets = document.querySelectorAll('div.widget, div.child_widget');
|
|
|
|
widgets.forEach(widget => {
|
|
if (widget.classList.contains('disabled')) {
|
|
return;
|
|
}
|
|
|
|
if (!first_toggle && widget.classList.contains('expanded')) {
|
|
return;
|
|
}
|
|
|
|
if (widget.classList.contains('expanded') || widget.getAttribute('data-expanded-all') === 'true') {
|
|
widget.classList.remove('expanded');
|
|
widget.setAttribute('data-expanded-all', 'false');
|
|
}
|
|
else {
|
|
widget.classList.add('expanded');
|
|
widget.setAttribute('data-expanded-all', 'true');
|
|
}
|
|
});
|
|
|
|
first_toggle = true;
|
|
}
|
|
|
|
function update_parent_height() {
|
|
const parent_widgets = document.querySelectorAll('.parent_widget');
|
|
|
|
parent_widgets.forEach(parent_widget => {
|
|
if (!parent_widget.dataset.originalHeight) {
|
|
parent_widget.dataset.originalHeight = parseFloat(window.getComputedStyle(parent_widget).height.replace('px', ''));
|
|
}
|
|
const widget = parent_widget.closest('.widget');
|
|
const row_gap = parseInt(window.getComputedStyle(document.documentElement).getPropertyValue('--grid-gap').replace('px', ''));
|
|
const row_height = parseInt(window.getComputedStyle(document.documentElement).getPropertyValue('--row-height').replace('px', ''));
|
|
const original_row_span = parseInt(window.getComputedStyle(widget).getPropertyValue('--row-span').replace('span ', ''));
|
|
const original_height = parseFloat(parent_widget.dataset.originalHeight);
|
|
const content_height = parent_widget.scrollHeight;
|
|
const new_row_span = Math.ceil(content_height / (row_height + row_gap));
|
|
|
|
if (content_height !== original_height) {
|
|
widget.style.gridRow = `span ${new_row_span * 4}`;
|
|
}
|
|
else {
|
|
widget.style.gridRow = `span ${original_row_span * 4}`;
|
|
}
|
|
|
|
parent_widget.style.minHeight = `${original_height}px`;
|
|
parent_widget.style.height = `auto`;
|
|
});
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', update_parent_height);
|
|
window.addEventListener('resize', update_parent_height);
|
|
|
|
</script>
|
|
|
|
<?php
|
|
|
|
//include the dashboards
|
|
echo "<div class='widgets' id='widgets' style='padding: 0 5px;'>\n";
|
|
$x = 0;
|
|
foreach ($widgets as $row) {
|
|
//skip child widgets unless the parent doesn't exist
|
|
if (!empty($row['dashboard_widget_parent_uuid']) && in_array($row['dashboard_widget_parent_uuid'], $widget_uuid_list)) {
|
|
continue;
|
|
}
|
|
|
|
//set the variables
|
|
$widget_uuid = $row['dashboard_widget_uuid'] ?? '';
|
|
$widget_name = $row['widget_name'] ?? '';
|
|
$widget_icon = $row['widget_icon'] ?? '';
|
|
$widget_url = $row['widget_url'] ?? '';
|
|
$widget_target = $row['widget_target'] ?? '';
|
|
$widget_width = $row['widget_width'] ?? '';
|
|
$widget_height = $row['widget_height'] ?? '';
|
|
$widget_content = $row['widget_content'] ?? '';
|
|
$widget_content_text_align = $row['widget_content_text_align'] ?? '';
|
|
$widget_content_details = $row['widget_content_details'] ?? '';
|
|
$widget_chart_type = $row['widget_chart_type'] ?? '';
|
|
$widget_label_text_color = $row['widget_label_text_color'] ?? $settings->get('theme', 'dashboard_label_text_color', '');
|
|
$widget_number_text_color = $row['widget_number_text_color'] ?? $settings->get('theme', 'dashboard_number_text_color', '');
|
|
$widget_number_background_color = $row['widget_number_background_color'] ?? $settings->get('theme', 'dashboard_number_background_color', '');
|
|
$widget_details_state = $row['widget_details_state'] ?? 'disabled';
|
|
$widget_row_span = $row['widget_row_span'] ?? '';
|
|
|
|
//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
|
|
$widget_uuid = preg_replace($uuid_pattern, '', $widget_uuid);
|
|
$widget_id = 'id_'.md5($widget_uuid);
|
|
$widget_name = trim(preg_replace($text_pattern, '', $widget_name));
|
|
$widget_icon = preg_replace($text_pattern, '', $widget_icon);
|
|
$widget_url = trim(preg_replace($text_pattern, '', $widget_url));
|
|
$widget_target = trim(preg_replace($text_pattern, '', $widget_target));
|
|
$widget_width = trim(preg_replace($text_pattern, '', $widget_width));
|
|
$widget_height = trim(preg_replace($text_pattern, '', $widget_height));
|
|
$widget_content = preg_replace($text_pattern, '', $widget_content);
|
|
$widget_content = str_replace("\n", '<br />', $widget_content);
|
|
$widget_content_text_align = trim(preg_replace($text_pattern, '', $widget_content_text_align));
|
|
$widget_content_details = preg_replace($text_pattern, '', $widget_content_details);
|
|
$widget_content_details = str_replace("\n", '<br />', $widget_content_details);
|
|
$widget_chart_type = preg_replace($text_pattern, '', $widget_chart_type);
|
|
$widget_label_text_color = preg_replace($text_pattern, '', $widget_label_text_color);
|
|
$widget_number_text_color = preg_replace($text_pattern, '', $widget_number_text_color);
|
|
$widget_number_background_color = preg_replace($text_pattern, '', $widget_number_background_color);
|
|
$widget_details_state = preg_replace($text_pattern, '', $widget_details_state);
|
|
$widget_row_span = preg_replace($number_pattern, '', $widget_row_span);
|
|
$widget_path = preg_replace($text_pattern, '', strtolower($row['widget_path']));
|
|
|
|
//find the application and widget
|
|
$widget_path_array = explode('/', $widget_path);
|
|
$application_name = $widget_path_array[0];
|
|
$widget_path_name = $widget_path_array[1];
|
|
$path_array = glob(dirname(__DIR__, 2).'/*/'.$application_name.'/resources/dashboard/'.$widget_path_name.'.php');
|
|
|
|
echo "<div class='widget ".$widget_details_state."' id='".$widget_id."' ".($widget_path == 'dashboard/parent' ? "data-is-parent='true'" : null)." draggable='false'>\n";
|
|
if (file_exists($path_array[0])) {
|
|
include $path_array[0];
|
|
}
|
|
echo "</div>\n";
|
|
|
|
$x++;
|
|
}
|
|
echo "</div>\n";
|
|
|
|
//begin edit
|
|
if (permission_exists('dashboard_edit')) {
|
|
?>
|
|
|
|
<style>
|
|
/*To prevent user selecting inside the drag source*/
|
|
[draggable] {
|
|
-moz-user-select: none;
|
|
-khtml-user-select: none;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
div.widget.editable {
|
|
cursor: move;
|
|
}
|
|
|
|
.hud_box.editable {
|
|
transition: 0.2s;
|
|
border: 1px dashed rgba(0,0,0,0.4);
|
|
}
|
|
|
|
.hud_box.editable:hover {
|
|
box-shadow: 0 5px 10px rgba(0,0,0,0.2);
|
|
border: 1px dashed rgba(0,0,0,0.4);
|
|
transform: scale(1.03, 1.03);
|
|
transition: 0.2s;
|
|
}
|
|
|
|
.hud_box .hud_box.editable:hover {
|
|
box-shadow: none;
|
|
transform: none;
|
|
}
|
|
|
|
.ghost {
|
|
border: 2px dashed rgba(0,0,0,1);
|
|
<?php $br = format_border_radius($settings->get('theme', 'dashboard_border_radius') ?? null, '5px'); ?>
|
|
-webkit-border-radius: <?php echo $br['tl']['n'].$br['tl']['u']; ?> <?php echo $br['tr']['n'].$br['tr']['u']; ?> <?php echo $br['br']['n'].$br['br']['u']; ?> <?php echo $br['bl']['n'].$br['bl']['u']; ?>;
|
|
-moz-border-radius: <?php echo $br['tl']['n'].$br['tl']['u']; ?> <?php echo $br['tr']['n'].$br['tr']['u']; ?> <?php echo $br['br']['n'].$br['br']['u']; ?> <?php echo $br['bl']['n'].$br['bl']['u']; ?>;
|
|
border-radius: <?php echo $br['tl']['n'].$br['tl']['u']; ?> <?php echo $br['tr']['n'].$br['tr']['u']; ?> <?php echo $br['br']['n'].$br['br']['u']; ?> <?php echo $br['bl']['n'].$br['bl']['u']; ?>;
|
|
<?php unset($br); ?>
|
|
opacity: 0.2;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
const widgets = document.getElementById('widgets');
|
|
let sortable;
|
|
|
|
//make widgets draggable
|
|
function edit_mode(state) {
|
|
|
|
if (state == 'on') {
|
|
$('span#expand_contract, #btn_edit, #btn_add').hide();
|
|
$('.hud_box').addClass('editable');
|
|
$('#btn_back, #btn_save').show();
|
|
$('div.widget').attr('draggable',true).addClass('editable');
|
|
$('div.child_widget').attr('draggable',true).addClass('editable');
|
|
|
|
function update_widget_order() {
|
|
let widget_ids_list = [];
|
|
let order = 10;
|
|
|
|
widgets.querySelectorAll(':scope > 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_widget');
|
|
if (nested_container) {
|
|
nested_container.querySelectorAll(':scope > div.child_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: {
|
|
name: 'shared',
|
|
pull: function(to, from, dragEl) {
|
|
return !dragEl.hasAttribute('data-is-parent');
|
|
},
|
|
put: true,
|
|
},
|
|
animation: 150,
|
|
draggable: '.widget',
|
|
preventOnFilter: true,
|
|
ghostClass: 'ghost',
|
|
onSort: update_widget_order,
|
|
onAdd: function (event) {
|
|
event.item.classList.add('widget');
|
|
update_widget_order();
|
|
},
|
|
onRemove: function (event) {
|
|
event.item.classList.remove('widget');
|
|
update_widget_order();
|
|
},
|
|
onMove: function (event) {
|
|
if (event.to !== event.from) {
|
|
event.dragged.classList.remove('widget');
|
|
} else {
|
|
event.dragged.classList.add('widget');
|
|
}
|
|
},
|
|
});
|
|
|
|
document.querySelectorAll('.parent_widget').forEach(function(container) {
|
|
Sortable.create(container, {
|
|
group: {
|
|
name: 'shared',
|
|
pull: function(to, from, dragEl) {
|
|
return true;
|
|
},
|
|
put: function(to, from, dragEl) {
|
|
return !dragEl.hasAttribute('data-is-parent');
|
|
},
|
|
},
|
|
animation: 150,
|
|
draggable: '.child_widget',
|
|
ghostClass: 'ghost',
|
|
fallbackOnBody: true,
|
|
swapThreshold: 0.65,
|
|
onSort: function (event) {
|
|
update_widget_order();
|
|
update_parent_height();
|
|
},
|
|
onAdd: function (event) {
|
|
event.item.classList.add('child_widget');
|
|
update_widget_order();
|
|
update_parent_height();
|
|
},
|
|
onRemove: function (event) {
|
|
update_widget_order();
|
|
update_parent_height();
|
|
},
|
|
onMove: function (event) {
|
|
if (event.to !== event.from) {
|
|
event.dragged.classList.remove('child_widget');
|
|
} else {
|
|
event.dragged.classList.add('child_widget');
|
|
}
|
|
},
|
|
});
|
|
});
|
|
|
|
}
|
|
else { // off
|
|
|
|
$('div.widget').attr('draggable',false).removeClass('editable');
|
|
$('div.child_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_widget').forEach(el => {
|
|
const nested_sortable = Sortable.get(el);
|
|
if (nested_sortable) {
|
|
nested_sortable.option('disabled', true);
|
|
}
|
|
});
|
|
|
|
}
|
|
}
|
|
</script>
|
|
<?php
|
|
} //end edit
|
|
|
|
//show the footer
|
|
require_once "resources/footer.php";
|
|
|
|
?>
|