Skip to content

O
OpnSense
Commit 76649640 authored by Ad Schellevis's avatar Ad Schellevis
Browse files
Options

(dashboard) make widgets draggable and sortable again 

still need to add a selectable number of columns (col-md-6 fixed now)
parent 6c1fe153
Show whitespace changes
Inline Side-by-side
Showing with 107 additions and 80 deletions
src/www/index.php
View file @ 76649640
...@@ -34,7 +34,6 @@ ini_set('output_buffering', 'true'); ...@@ -34,7 +34,6 @@ ini_set('output_buffering', 'true');
// Start buffering with a cache size of 100000 // Start buffering with a cache size of 100000
ob_start(null, "1000"); ob_start(null, "1000");
// Load Essential Includes // Load Essential Includes
require_once('guiconfig.inc'); require_once('guiconfig.inc');
...@@ -65,11 +64,13 @@ if ($_SERVER['REQUEST_METHOD'] === 'GET') { ...@@ -65,11 +64,13 @@ if ($_SERVER['REQUEST_METHOD'] === 'GET') {
$widgetItem['display_name'] = ucwords(str_replace("_", " ", $widgetItem['name'])); $widgetItem['display_name'] = ucwords(str_replace("_", " ", $widgetItem['name']));
$widgetItem['filename'] = $php_file; $widgetItem['filename'] = $php_file;
$widgetItem['state'] = "none"; $widgetItem['state'] = "none";
$widgetItem['sortKey'] = $widgetItem['name'] == 'system_information' ? "" : $widgetItem['name']; /// default sort order
$widgetItem['sortKey'] = $widgetItem['name'] == 'system_information' ? "00000000" : "99999999";
foreach ($widgetSeqParts as $seqPart) { foreach ($widgetSeqParts as $seqPart) {
$tmp = explode(':', $seqPart); $tmp = explode(':', $seqPart);
if (count($tmp) == 3 && explode('-', $tmp[0])[0] == $widgetItem['name']) { if (count($tmp) == 3 && explode('-', $tmp[0])[0] == $widgetItem['name']) {
$widgetItem['state'] = $tmp[2]; $widgetItem['state'] = $tmp[2];
$widgetItem['sortKey'] = $tmp[1];
} }
} }
$widgetCollection[] = $widgetItem; $widgetCollection[] = $widgetItem;
...@@ -94,7 +95,6 @@ foreach (glob("/usr/local/www/widgets/include/*.inc") as $filename) { ...@@ -94,7 +95,6 @@ foreach (glob("/usr/local/www/widgets/include/*.inc") as $filename) {
include("head.inc"); include("head.inc");
?> ?>
<body> <body>
<?php <?php
include("fbegin.inc");?> include("fbegin.inc");?>
...@@ -113,7 +113,6 @@ include("fbegin.inc");?> ...@@ -113,7 +113,6 @@ include("fbegin.inc");?>
<h1><?= gettext("Starting initial configuration!") ?></h1> <h1><?= gettext("Starting initial configuration!") ?></h1>
</div> </div>
</header> </header>
<section class="page-content-main"> <section class="page-content-main">
<div class="container-fluid col-xs-12 col-sm-10 col-md-9"> <div class="container-fluid col-xs-12 col-sm-10 col-md-9">
<div class="row"> <div class="row">
...@@ -142,63 +141,93 @@ include("fbegin.inc");?> ...@@ -142,63 +141,93 @@ include("fbegin.inc");?>
else:?> else:?>
<script src='/javascript/index/ajax.js'></script> <script src='/javascript/index/ajax.js'></script>
<script src='/ui/js/jquery-sortable.js'></script>
<script type="text/javascript"> <script type="text/javascript">
//<![CDATA[ function addWidget(selectedDiv) {
function addWidget(selectedDiv) {
$('#'+selectedDiv).show(); $('#'+selectedDiv).show();
$('#'+selectedDiv+'-config').val('show'); $('#'+selectedDiv+'-config').val('show');
showSave(); showSave();
} }
function configureWidget(selectedDiv) { function configureWidget(selectedDiv) {
selectIntLink = '#' + selectedDiv + "-settings"; selectIntLink = '#' + selectedDiv + "-settings";
if ($(selectIntLink).css('display') == "none") { if ($(selectIntLink).css('display') == "none") {
$(selectIntLink).show(); $(selectIntLink).show();
} else { } else {
$(selectIntLink).hide(); $(selectIntLink).hide();
} }
} }
function showWidget(selectedDiv,swapButtons) { function showWidget(selectedDiv,swapButtons) {
$('#'+selectedDiv+'-container').show(); $('#'+selectedDiv+'-container').show();
$('#'+selectedDiv+'-min').show(); $('#'+selectedDiv+'-min').show();
$('#'+selectedDiv+'-max').hide(); $('#'+selectedDiv+'-max').hide();
$('#'+selectedDiv+'-config').val('show'); $('#'+selectedDiv+'-config').val('show');
showSave(); showSave();
} }
function minimizeWidget(selectedDiv,swapButtons) { function minimizeWidget(selectedDiv, swapButtons) {
$('#'+selectedDiv+'-container').hide(); $('#'+selectedDiv+'-container').hide();
$('#'+selectedDiv+'-min').hide(); $('#'+selectedDiv+'-min').hide();
$('#'+selectedDiv+'-max').show(); $('#'+selectedDiv+'-max').show();
$('#'+selectedDiv+'-config').val('hide'); $('#'+selectedDiv+'-config').val('hide');
showSave(); showSave();
} }
function closeWidget(selectedDiv) { function closeWidget(selectedDiv) {
$('#'+selectedDiv).hide(); $('#'+selectedDiv).hide();
$('#'+selectedDiv+'-config').val('close'); $('#'+selectedDiv+'-config').val('close');
showSave(); showSave();
} }
function showSave() { function showSave() {
$('#updatepref').show(); $('#updatepref').show();
} }
function updatePref() { function updatePref() {
var widgetInfo = []; var widgetInfo = [];
var index = 0;
$('.widgetdiv').each(function(key) { $('.widgetdiv').each(function(key) {
widgetInfo.push($(this).attr('id')+'-container:col1:'+$('input[name='+$(this).attr('id')+'-config]').val()); if ($(this).is(':visible')) {
// only capture visible widgets
var index_str = "0000000" + index;
index_str = index_str.substr(index_str.length-8);
widgetInfo.push($(this).attr('id')+'-container:'+index_str+':'+$('input[name='+$(this).attr('id')+'-config]').val());
index++;
}
}); });
$("#sequence").val(widgetInfo.join(',')); $("#sequence").val(widgetInfo.join(','));
$("#iform").submit(); $("#iform").submit();
return false; return false;
} }
//]]>
</script> </script>
<script type="text/javascript">
$( document ).ready(function() {
// move non visible items to bottom
$(".widgetdiv").each(function(){
if (!$(this).is(':visible')) {
$(this).insertBefore($("#end_of_block"));
}
});
// sortable widgets
$(".sortable").sortable({
handle: '.content-box-head',
itemSelector: '.widgetdiv',
containerSelector: '.sortable',
placeholder: '<div class="placeholder"><i class="fa fa-hand-o-right" aria-hidden="true"></i></div>',
afterMove: function (placeholder, container, closestItemOrContainer) {
showSave();
}
});
});
</script>
<section class="page-content-main"> <section class="page-content-main">
<form method="post" id="iform">
<input type="hidden" value="" name="sequence" id="sequence" />
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row sortable">
<?php <?php
$crash_report = get_crash_report(); $crash_report = get_crash_report();
if ($crash_report != '') { if ($crash_report != '') {
...@@ -236,8 +265,6 @@ function updatePref() { ...@@ -236,8 +265,6 @@ function updatePref() {
}?> }?>
<section class="col-xs-12 col-md-6 widgetdiv" id="<?= $widgetItem['name'] ?>" style="display:<?= $divdisplay ?>;"> <section class="col-xs-12 col-md-6 widgetdiv" id="<?= $widgetItem['name'] ?>" style="display:<?= $divdisplay ?>;">
<div class="content-box"> <div class="content-box">
<form method="post" id="iform">
<input type="hidden" value="" name="sequence" id="sequence" />
<header class="content-box-head container-fluid"> <header class="content-box-head container-fluid">
<ul class="list-inline __nomb"> <ul class="list-inline __nomb">
<li><h3> <li><h3>
...@@ -246,7 +273,7 @@ function updatePref() { ...@@ -246,7 +273,7 @@ function updatePref() {
<u><span onclick="location.href='/<?= $$widgettitlelink ?>'" style="cursor:pointer"> <u><span onclick="location.href='/<?= $$widgettitlelink ?>'" style="cursor:pointer">
<?php <?php
endif; endif;
echo !empty($$widgettitle) ? $$widgettitle : $widgetItem['display_name']; echo empty($$widgettitle) ? $widgetItem['display_name'] : $$widgettitle;
if (isset($$widgettitlelink)):?> if (isset($$widgettitlelink)):?>
</span></u> </span></u>
<?php <?php
...@@ -262,8 +289,7 @@ function updatePref() { ...@@ -262,8 +289,7 @@ function updatePref() {
</li> </li>
</ul> </ul>
</header> </header>
</form> <div class="content-box-main collapse in container" id="<?= $widgetItem['name'] ?>-container" style="display:<?= $mindiv ?>">
<div class="content-box-main collapse in" id="<?= $widgetItem['name'] ?>-container" style="display:<?= $mindiv ?>">
<input type="hidden" value="<?= $inputdisplay ?>" id="<?= $widgetItem['name'] ?>-config" name="<?= $widgetItem['name'] ?>-config" /> <input type="hidden" value="<?= $inputdisplay ?>" id="<?= $widgetItem['name'] ?>-config" name="<?= $widgetItem['name'] ?>-config" />
<?php <?php
if ($divdisplay != "block"):?> if ($divdisplay != "block"):?>
...@@ -274,9 +300,7 @@ function updatePref() { ...@@ -274,9 +300,7 @@ function updatePref() {
</div> </div>
<?php <?php
else: else:
if ($divdisplay == 'block') {
include($widgetItem['filename']); include($widgetItem['filename']);
}
endif; endif;
?> ?>
</div> </div>
...@@ -284,10 +308,13 @@ function updatePref() { ...@@ -284,10 +308,13 @@ function updatePref() {
</section> </section>
<?php <?php
endforeach;?> endforeach;?>
<section id="end_of_block"></section>
</div> </div>
</div> </div>
</form>
</section> </section>
<?php <?php
// include widget javascripts
foreach (glob("/usr/local/www/widgets/javascript/*.js") as $filename):?> foreach (glob("/usr/local/www/widgets/javascript/*.js") as $filename):?>
<script src="/widgets/javascript/<?=basename($filename);?>" type="text/javascript"></script> <script src="/widgets/javascript/<?=basename($filename);?>" type="text/javascript"></script>
<?php <?php
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Technounit-GROUP 2023