(dashboard) switchable column layout

src/www/fbegin.inc

@@ -197,6 +197,12 @@ if($need_alert_display == true) {
             <?php if (isset($widgetCollection)): ?>
               <a href="#" id="updatepref" style="display:none" onclick="return updatePref();" class="btn btn-primary"><?=gettext("Save Settings");?></a>
               <button type="button" class="btn btn-default" data-toggle="modal" data-target="#modal_widgets"><span class="glyphicon glyphicon-plus-sign __iconspacer"></span><?= gettext('Add widget') ?></button>
+              <select class="selectpicker" data-width="120px" id="column_count">
+                  <option value="1" <?=$pconfig['column_count'] == "1" ? 'selected="selected"' : "";?>><?=gettext("1 column");?></option>
+                  <option value="2" <?=$pconfig['column_count'] == "2" ? 'selected="selected"' : "";?>><?=gettext("2 columns");?></option>
+                  <option value="3" <?=$pconfig['column_count'] == "3" ? 'selected="selected"' : "";?>><?=gettext("3 columns");?></option>
+                  <option value="4" <?=$pconfig['column_count'] == "4" ? 'selected="selected"' : "";?>><?=gettext("4 columns");?></option>
+              </select>
             <?php endif; ?>
           </li>
         </ul>

src/www/index.php

@@ -55,6 +55,8 @@ if ($_SERVER['REQUEST_METHOD'] === 'GET') {
         // set default dashboard view
         $pconfig['sequence'] = 'system_information-container:col1:show,interface_list-container:col1:show,traffic_graphs-container:col1:show';
     }
+    // default 2 column grid layout
+    $pconfig['column_count'] = !empty($pconfig['column_count']) ? $pconfig['column_count'] : 2;
     // build list of widgets
     $widgetCollection = array();
     $widgetSeqParts = explode(",", $pconfig['sequence']);
@@ -84,6 +86,9 @@ if ($_SERVER['REQUEST_METHOD'] === 'GET') {
 } elseif ($_SERVER['REQUEST_METHOD'] === 'POST') {
     if (!empty($_POST['sequence'])) {
         $config['widgets']['sequence'] = $_POST['sequence'];
+        if (!empty($_POST['column_count'])) {
+            $config['widgets']['column_count'] = $_POST['column_count'];
+        }
         write_config(gettext("Widget configuration has been changed."));
     }
     header("Location: index.php");
@@ -216,12 +221,29 @@ include("fbegin.inc");?>
             showSave();
         }
       });
+      $("#column_count").change(function(){
+          if ($("#column_count_input").val() != $("#column_count").val()) {
+              showSave();
+          }
+         $("#column_count_input").val($("#column_count").val());
+         $(".widgetdiv").each(function(){
+             var widget = $(this);
+             $.each(widget.attr("class").split(' '), function(index, classname) {
+                if (classname.indexOf('col-md') > -1) {
+                    widget.removeClass(classname);
+                }
+             });;
+             widget.addClass('col-md-'+(12 / $("#column_count_input").val()));
+         });
+      });
+      $("#column_count").change();
   });
 </script>
 
 <section class="page-content-main">
   <form method="post" id="iform">
     <input type="hidden" value="" name="sequence" id="sequence" />
+    <input type="hidden" value="<?= $pconfig['column_count'];?>" name="column_count" id="column_count_input" />
     <div class="container-fluid">
       <div class="row sortable">
 <?php