From c5798052929b7b7dc2081e318ab2b3e4a3af5a9b Mon Sep 17 00:00:00 2001
From: laf <neil@lathwood.co.uk>
Date: Mon, 20 Jul 2015 13:55:35 +0100
Subject: [PATCH] Updated edit ports page to use bootstrap

---
 .../update-ports.inc.php}                     |  20 +-
 html/includes/table/edit-ports.inc.php        |  74 ++++++
 html/pages/device/edit/ports.inc.php          | 243 ++++++++----------
 3 files changed, 194 insertions(+), 143 deletions(-)
 rename html/{includes/port-edit.inc.php => forms/update-ports.inc.php} (79%)
 create mode 100644 html/includes/table/edit-ports.inc.php

diff --git a/html/includes/port-edit.inc.php b/html/forms/update-ports.inc.php
similarity index 79%
rename from html/includes/port-edit.inc.php
rename to html/forms/update-ports.inc.php
index abfba60539..24754e2462 100644
--- a/html/includes/port-edit.inc.php
+++ b/html/forms/update-ports.inc.php
@@ -1,5 +1,8 @@
 <?php
 
+$status           = 'error';
+$message          = 'Error with config';
+
 // enable/disable ports/interfaces on devices.
 $device_id    = intval($_POST['device']);
 $rows_updated = 0;
@@ -52,14 +55,19 @@ foreach ($_POST as $key => $val) {
 }//end foreach
 
 if ($rows_updated > 0) {
-    $update_message = $rows_updated.' Device record updated.';
-    $updated        = 1;
+    $message = $rows_updated.' Device record updated.';
+    $status         = 'ok';
 }
 else if ($rows_updated = '-1') {
-    $update_message = 'Device record unchanged. No update necessary.';
-    $updated        = -1;
+    $message = 'Device record unchanged. No update necessary.';
+    $status         = 'ok';
 }
 else {
-    $update_message = 'Device record update error.';
-    $updated        = 0;
+    $message = 'Device record update error.';
 }
+
+$response = array(
+    'status'        => $status,
+    'message'       => $message,
+);
+echo _json_encode($response);
diff --git a/html/includes/table/edit-ports.inc.php b/html/includes/table/edit-ports.inc.php
new file mode 100644
index 0000000000..5a935b2bff
--- /dev/null
+++ b/html/includes/table/edit-ports.inc.php
@@ -0,0 +1,74 @@
+<?php
+
+$row = 1;
+
+$device_id = $_POST['device_id'];
+
+$sql = 'FROM `ports` WHERE `device_id` = ?';
+$param = array($device_id);
+
+$count_sql = "SELECT COUNT(`port_id`) $sql";
+$total     = dbFetchCell($count_sql, $param);
+if (empty($total)) {
+    $total = 0;
+}
+
+if (!isset($sort) || empty($sort)) {
+    $sort = '`ifIndex` ASC';
+}
+
+$sql .= " ORDER BY $sort";
+
+if (isset($current)) {
+    $limit_low  = (($current * $rowCount) - ($rowCount));
+    $limit_high = $rowCount;
+}
+
+if ($rowCount != -1) {
+    $sql .= " LIMIT $limit_low,$limit_high";
+}
+
+$sql = "SELECT * $sql";
+
+$response[] = array(
+    'ifIndex' => "<button id='save-form' type='submit' value='Save' class='btn btn-success btn-sm' title='Save current port disable/ignore settings'>Save</button><button type='submit' value='Reset' class='btn btn-danger btn-sm' id='form-reset' title='Reset form to previously-saved settings'>Reset</button>",
+    'label' => '',
+    'ifAdminStatus' => '',
+    'ifOperStatus' => "<button type='submit' value='Alerted' class='btn btn-default btn-sm' id='alerted-toggle' title='Toggle alerting on all currently-alerted ports'>Alerted</button><button type='submit' value='Down' class='btn btn-default btn-sm' id='down-select' title='Disable alerting on all currently-down ports'>Down</button>",
+    'disabled' => "<button type='submit' value='Toggle' class='btn btn-default btn-sm' id='disable-toggle' title='Toggle polling for all ports'>Toggle</button><button type='submit' value='Select' class='btn btn-default btn-sm' id='disable-select' title='Disable polling on all ports'>Select All</button>",
+    'ignore' => "<button type='submit' value='Toggle' class='btn btn-default btn-sm' id='ignore-toggle' title='Toggle alerting for all ports'>Toggle</button><button type='submit' value='Select' class='btn btn-default btn-sm' id='ignore-select' title='Disable alerting on all ports'>Select All</button>",
+    'ifAlias' => ''
+);
+
+foreach (dbFetchRows($sql, $param) as $port) {
+    $port = ifLabel($port);
+
+    // Mark interfaces which are OperDown (but not AdminDown) yet not ignored or disabled, or up yet ignored or disabled
+    // - as to draw the attention to a possible problem.
+
+
+    $isportbad = ($port['ifOperStatus'] == 'down' && $port['ifAdminStatus'] != 'down') ? 1 : 0;
+    $dowecare  = ($port['ignore'] == 0 && $port['disabled'] == 0) ? $isportbad : !$isportbad;
+    $outofsync = $dowecare ? " class='red'" : '';
+
+    $response[] = array(
+        'ifIndex' => $port['ifIndex'],
+        'label' => $port['label'],
+        'ifAdminStatus' => $port['ifAdminStatus'],
+        'ifOperStatus' => '<span name="operstatus_'.$port['port_id'].'"'.$outofsync.'>'.$port['ifOperStatus'].'</span>',
+        'disabled' => '<input type="checkbox" class="disable-check" name="disabled_'.$port['port_id'].'"'.($port['disabled'] ? 'checked' : '').'>
+                       <input type="hidden" name="olddis_'.$port['port_id'].'" value="'.($port['disabled'] ? 1 : 0).'"">',
+        'ignore' => '<input type="checkbox" class="ignore-check" name="ignore_'.$port['port_id'].'"'.($port['ignore'] ? 'checked' : '').'>
+                     <input type="hidden" name="oldign_'.$port['port_id'].'" value="'.($port['ignore'] ? 1 : 0).'"">',
+        'ifAlias' => $port['ifAlias']
+    );
+
+}//end foreach
+
+$output = array(
+    'current'  => $current,
+    'rowCount' => $rowCount,
+    'rows'     => $response,
+    'total'    => $total,
+);
+echo _json_encode($output);
\ No newline at end of file
diff --git a/html/pages/device/edit/ports.inc.php b/html/pages/device/edit/ports.inc.php
index d8dc562e43..00a2d52c45 100644
--- a/html/pages/device/edit/ports.inc.php
+++ b/html/pages/device/edit/ports.inc.php
@@ -1,144 +1,113 @@
-<?php
+<span id="message"></span>
 
-echo '<div style="padding: 10px;">';
-
-if ($_POST['ignoreport']) {
-    if ($_SESSION['userlevel'] == '10') {
-        include 'includes/port-edit.inc.php';
-    }
-}
-
-if ($updated && $update_message) {
-    print_message($update_message);
-}
-else if ($update_message) {
-    print_error($update_message);
-}
-
-echo "<div style='float: left; width: 100%'>
 <form id='ignoreport' name='ignoreport' method='post' action='' role='form' class='form-inline'>
-  <input type=hidden name='ignoreport' value='yes'>
-  <input type=hidden name=device value='".$device['device_id']."'>";
-
-echo "<table class='table table-condensed table-responsive table-striped'>
-  <tr>
-                 <th>Index</th>
-                 <th>Name</th>
-                 <th>Admin</th>
-                 <th>Oper</th>
-                 <th>Disable</th>
-                 <th>Ignore</th>
-                 <th>Description</th>
-</tr>
-<tr>
-    <td><button type='submit' value='Save' class='btn btn-success btn-sm' title='Save current port disable/ignore settings'/>Save</button><button type='submit' value='Reset' class='btn btn-danger btn-sm' id='form-reset' title='Reset form to previously-saved settings'/>Reset</button></td>
-    <td></td>
-    <td></td>
-    <td><button type='submit' value='Alerted' class='btn btn-default btn-sm' id='alerted-toggle' title='Toggle alerting on all currently-alerted ports'/>Alerted</button><button type='submit' value='Down' class='btn btn-default btn-sm' id='down-select' title='Disable alerting on all currently-down ports'/>Down</button></td>
-    <td><button type='submit' value='Toggle' class='btn btn-default btn-sm' id='disable-toggle' title='Toggle polling for all ports'/>Toggle</button><button type='submit' value='Select' class='btn btn-default btn-sm' id='disable-select' title='Disable polling on all ports'/>Select All</button></td>
-    <td><button type='submit' value='Toggle' class='btn btn-default btn-sm' id='ignore-toggle' title='Toggle alerting for all ports'/>Toggle</button><button type='submit' value='Select' class='btn btn-default btn-sm' id='ignore-select' title='Disable alerting on all ports'/>Select All</button></td>
-    <td></td>
-</tr>
-";
-?>
-
+    <input type='hidden' name='ignoreport' value='yes'>
+    <input type='hidden' name='type' value='update-ports'>
+    <input type='hidden' name='device' value='<?php echo $device['device_id'];?>'>
+    <table id='edit-ports' class='table table-condensed table-responsive table-striped'>
+        <thead>
+            <tr>
+                <th data-column-id='ifIndex'>Index</th>
+                <th data-column-id='label'>Name</th>
+                <th data-column-id='ifAdminStatus'>Admin</th>
+                <th data-column-id='ifOperStatus'>Oper</th>
+                <th data-column-id='disabled'>Disable</th>
+                <th data-column-id='ignore'>Ignore</th>
+                <th data-column-id='ifAlias'>Description</th>
+            </tr>
+        </thead>
+    </table>
+</form>
 <script>
-    $('#disable-toggle').click(function(event) {
-        // invert selection on all disable buttons
-        event.preventDefault();
-        $('input[name^="disabled_"]').trigger('click');
-    });
-    $('#ignore-toggle').click(function(event) {
-        // invert selection on all ignore buttons
-        event.preventDefault();
-        $('input[name^="ignore_"]').trigger('click');
-    });
-    $('#disable-select').click(function(event) {
-        // select all disable buttons
-        event.preventDefault();
-        $('.disable-check').prop('checked',true);
-    });
-    $('#ignore-select').click(function(event) {
-        // select all ignore buttons
-        event.preventDefault();
-        $('.ignore-check').prop('checked',true);
-    });
-    $('#down-select').click(function(event) {
-        // select ignore buttons for all ports which are down
-        event.preventDefault();
-        $('[name^="operstatus_"]').each(function() {
-            var name = $(this).attr('name');
-            var text = $(this).text();
-            if (name && text == 'down') {
-                // get the interface number from the object name
-                var port_id = name.split('_')[1];
-                // find its corresponding checkbox and toggle it
-                $('input[name="ignore_' + port_id + '"]').trigger('click');
-            }
+
+    $(document).ready(function() {
+        $('form#ignoreport').submit(function (event) {
+            $('#disable-toggle').click(function (event) {
+                // invert selection on all disable buttons
+                event.preventDefault();
+                $('input[name^="disabled_"]').trigger('click');
+            });
+            $('#ignore-toggle').click(function (event) {
+                // invert selection on all ignore buttons
+                event.preventDefault();
+                $('input[name^="ignore_"]').trigger('click');
+            });
+            $('#disable-select').click(function (event) {
+                // select all disable buttons
+                event.preventDefault();
+                $('.disable-check').prop('checked', true);
+            });
+            $('#ignore-select').click(function (event) {
+                // select all ignore buttons
+                event.preventDefault();
+                $('.ignore-check').prop('checked', true);
+            });
+            $('#down-select').click(function (event) {
+                // select ignore buttons for all ports which are down
+                event.preventDefault();
+                $('[name^="operstatus_"]').each(function () {
+                    var name = $(this).attr('name');
+                    var text = $(this).text();
+                    if (name && text == 'down') {
+                        // get the interface number from the object name
+                        var port_id = name.split('_')[1];
+                        // find its corresponding checkbox and toggle it
+                        $('input[name="ignore_' + port_id + '"]').trigger('click');
+                    }
+                });
+            });
+            $('#alerted-toggle').click(function (event) {
+                // toggle ignore buttons for all ports which are in class red
+                event.preventDefault();
+                $('.red').each(function () {
+                    var name = $(this).attr('name');
+                    if (name) {
+                        // get the interface number from the object name
+                        var port_id = name.split('_')[1];
+                        // find its corresponding checkbox and toggle it
+                        $('input[name="ignore_' + port_id + '"]').trigger('click');
+                    }
+                });
+            });
+            $('#form-reset').click(function (event) {
+                // reset objects in the form to their previous values
+                event.preventDefault();
+                $('#ignoreport')[0].reset();
+            });
+            $('#save-form').click(function (event) {
+                // reset objects in the form to their previous values
+                event.preventDefault();
+                $.ajax({
+                    type: "POST",
+                    url: "/ajax_form.php",
+                    data: $('form#ignoreport').serialize(),
+                    dataType: "json",
+                    success: function(data){
+                        if (data.status == 'ok') {
+                            $("#message").html('<div class="alert alert-info">' + data.message + '</div>')
+                        } else {
+                            $("#message").html('<div class="alert alert-danger">' + data.message + '</div>');
+                        }
+                    },
+                    error: function(){
+                        $("#message").html('<div class="alert alert-danger">Error creating config item</div>');
+                    }
+                });
+            });
+            event.preventDefault();
         });
     });
-    $('#alerted-toggle').click(function(event) {
-        // toggle ignore buttons for all ports which are in class red
-        event.preventDefault();
-        $('.red').each(function() {
-            var name = $(this).attr('name');
-            if (name) {
-                // get the interface number from the object name
-                var port_id = name.split('_')[1];
-                // find its corresponding checkbox and toggle it
-                $('input[name="ignore_' + port_id + '"]').trigger('click');
-            }
-        });
-    });
-    $('#form-reset').click(function(event) {
-        // reset objects in the form to their previous values
-        event.preventDefault();
-        $('#ignoreport')[0].reset();
+
+    var grid = $("#edit-ports").bootgrid({
+        ajax: true,
+        rowCount: [50,100,250,-1],
+        post: function ()
+        {
+            return {
+                id: 'edit-ports',
+                device_id: "<?php echo $device['device_id']; ?>"
+            };
+        },
+        url: "/ajax_table.php"
     });
 </script>
-
-<?php
-$row = 1;
-
-foreach (dbFetchRows('SELECT * FROM `ports` WHERE `device_id` = ? ORDER BY `ifIndex` ', array($device['device_id'])) as $port) {
-    $port = ifLabel($port);
-
-    if (is_integer($row / 2)) {
-        $row_colour = $list_colour_a;
-    }
-    else {
-        $row_colour = $list_colour_b;
-    }
-
-    echo '<tr>';
-    echo '<td>'.$port['ifIndex'].'</td>';
-    echo '<td>'.$port['label'].'</td>';
-    echo '<td>'.$port['ifAdminStatus'].'</td>';
-
-    // Mark interfaces which are OperDown (but not AdminDown) yet not ignored or disabled, or up yet ignored or disabled
-    // - as to draw the attention to a possible problem.
-    $isportbad = ($port['ifOperStatus'] == 'down' && $port['ifAdminStatus'] != 'down') ? 1 : 0;
-    $dowecare  = ($port['ignore'] == 0 && $port['disabled'] == 0) ? $isportbad : !$isportbad;
-    $outofsync = $dowecare ? " class='red'" : '';
-
-    echo "<td><span name='operstatus_".$port['port_id']."'".$outofsync.'>'.$port['ifOperStatus'].'</span></td>';
-
-    echo '<td>';
-    echo "<input type=checkbox class='disable-check' name='disabled_".$port['port_id']."'".($port['disabled'] ? 'checked' : '').'>';
-    echo "<input type=hidden name='olddis_".$port['port_id']."' value=".($port['disabled'] ? 1 : 0).'>';
-    echo '</td>';
-
-    echo '<td>';
-    echo "<input type=checkbox class='ignore-check' name='ignore_".$port['port_id']."'".($port['ignore'] ? 'checked' : '').'>';
-    echo "<input type=hidden name='oldign_".$port['port_id']."' value=".($port['ignore'] ? 1 : 0).'>';
-    echo '</td>';
-    echo '<td>'.$port['ifAlias'].'</td>';
-
-    echo "</tr>\n";
-
-    $row++;
-}//end foreach
-
-echo '</table>';
-echo '</form>';
-echo '</div>';