Dashboard - Add row span setting (#7007)

This commit is contained in:
Alex
2024-06-12 16:49:34 -06:00
committed by GitHub
parent 1998df7c70
commit 7640cd21c9
16 changed files with 165 additions and 27 deletions
+58 -9
View File
@@ -81,6 +81,7 @@
$sql .= "dashboard_background_color, \n";
$sql .= "dashboard_detail_background_color, \n";
$sql .= "dashboard_column_span, \n";
$sql .= "dashboard_row_span, \n";
$sql .= "dashboard_details_state, \n";
$sql .= "dashboard_order, \n";
$sql .= "cast(dashboard_enabled as text), \n";
@@ -221,7 +222,7 @@
grid-gap: 1rem;
}
div.hud_container {
div.hud_content {
display: flex;
flex-wrap: wrap;
justify-content: center;
@@ -233,15 +234,17 @@ div.hud_chart {
padding-top: 7px;
}
span.hud_stat { padding-bottom: 27px; }
/* Dashboard settings */
<?php
foreach($dashboard as $row) {
$dashboard_name = str_replace(" ", "_", strtolower($row['dashboard_name']));
$background_color = json_decode($row['dashboard_background_color'], true);
$detail_background_color = json_decode($row['dashboard_detail_background_color'], true);
echo "#".$dashboard_name." .hud_box .hud_container {";
$dashboard_row_span = $row['dashboard_row_span'] ?? 2;
if (!isset($row['dashboard_row_span']) && in_array($dashboard_name, ["new_messages", "missed_calls", "recent_calls"])) {
$dashboard_row_span = 1;
}
echo "#".$dashboard_name." .hud_box .hud_content {";
echo " background: ".$background_color[0].";";
echo " background-image: linear-gradient(to right, ".$background_color[1]." 0%, ".$background_color[0]." 30%, ".$background_color[0]." 70%, ".$background_color[1]." 100%);";
echo "}";
@@ -256,6 +259,35 @@ span.hud_stat { padding-bottom: 27px; }
echo " background: ".$detail_background_color[0].";";
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%);";
echo "}";
switch ($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.1;\n";
echo " font-size: 30pt;\n";
echo "}\n";
echo "#".$dashboard_name." .hud_chart {\n";
echo " height: 50px;\n";
echo "}\n";
echo "#".$dashboard_name." div.hud_content .fas {\n";
echo " line-height: 0.1;\n";
echo " font-size: 30pt;\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;
}
}
?>
@@ -343,9 +375,17 @@ span.hud_stat { padding-bottom: 27px; }
<script>
function toggle_grid_row_end(dashboard_name) {
var widget = document.getElementById(dashboard_name.toLowerCase().replace(/ /g, "_"));
var widget = document.getElementById(dashboard_name.toLowerCase().replace(/ /g, '_'));
var state = widget.getAttribute('data-state');
var current_row_end = widget.style.gridRowEnd;
widget.style.gridRowEnd = (current_row_end == 'span 2') ? 'span 5' : 'span 2';
if (state == 'expanded') {
widget.style.gridRowEnd = 'span ' + (Number(current_row_end.replace('span ', '')) - 3);
widget.dataset.state = "contracted";
} else {
widget.style.gridRowEnd = 'span ' + (Number(current_row_end.replace('span ', '')) + 3);
widget.dataset.state = 'expanded';
}
}
</script>
@@ -361,10 +401,19 @@ function toggle_grid_row_end(dashboard_name) {
$dashboard_chart_type = $row['dashboard_chart_type'];
$dashboard_heading_text_color = $row['dashboard_heading_text_color'] ?? $settings->get('theme', 'dashboard_heading_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'];
$grid_row_end = (!isset($dashboard_details_state) && in_array($dashboard_name, ["New Messages", "Missed Calls", "Recent Calls"]) ? "grid-row-end: span 2;" : ($dashboard_details_state == "expanded" || empty($dashboard_details_state) ? "grid-row-end: span 5;" : "grid-row-end: span 2;"));
$dashboard_details_state = $row['dashboard_details_state'] ?? "expanded";
$dashboard_row_span = $row['dashboard_row_span'] ?? 2;
if (!isset($row['dashboard_details_state']) && in_array($dashboard_name, ["New Messages", "Missed Calls", "Recent Calls"])) {
$dashboard_details_state = "hidden";
}
if ($dashboard_details_state == "expanded") {
$dashboard_row_span += 3;
}
if (!isset($row['dashboard_row_span']) && !isset($row['dashboard_details_state']) && in_array($dashboard_name, ["New Messages", "Missed Calls", "Recent Calls"])) {
$dashboard_row_span = 1;
}
echo "<div class='widget' style='".$grid_row_end."' id='".str_replace(" ", "_", strtolower($row['dashboard_name']))."' draggable='false'>\n";
echo "<div class='widget' style='grid-row-end: span ".$dashboard_row_span.";' data-state='".$dashboard_details_state."' id='".str_replace(" ", "_", strtolower($dashboard_name))."' draggable='false'>\n";
include($row['dashboard_path']);
echo "</div>\n";
$x++;