Changeset 1025

Timestamp:

04/27/06 15:08:58 (7 years ago)

Author:

lokkju

Message:

Attempt at resolving Ticket #87.
Added ability for nodes to be display as a Filterable, Sortable, table.

filtertable.js is unobtrusive javascript for filtering tables.
sorttable.js is unobtrusive javascript for sorting tables, modified to
enable zebra stripes.

Location:

trunk/wifidog-auth/wifidog

Files:

• admin/generic_object_admin.php (modified) (1 diff)
• classes/Node.php (modified) (1 diff)
• js/filtertable.js (added)
• js/sorttable.js (added)
• local_content/common/stylesheet.css (modified) (3 diffs)

trunk/wifidog-auth/wifidog/admin/generic_object_admin.php

@@ -256 +256 @@
     case "Node":
         $newLongText = $addLongText;
-        $objectSelector = Node::getSelectNodeUI('object_id');
+        $objectSelector = Node::getSelectNodeUI('object_id',null,"table");
+        $displayEditButton = false;
         break;
 

trunk/wifidog-auth/wifidog/classes/Node.php

@@ -230 +230 @@
         * @return html markup
         */
-        public static function getSelectNodeUI($user_prefix, $sql_additional_where = null)
+        public static function getSelectNodeUI($user_prefix, $sql_additional_where = null,$type_interface = "select")
         {
                 global $db;
                 $html = '';
                 $name = "{$user_prefix}";
-                $html .= _("Node: ");
-                $sql = "SELECT node_id, name from nodes WHERE 1=1 $sql_additional_where ORDER BY node_id";
+                $sql = "SELECT node_id, name, node_deployment_status, is_splash_only_node from nodes WHERE 1=1 $sql_additional_where ORDER BY node_id";
                 $node_rows = null;
                 $db->execSql($sql, $node_rows, false);
                 if ($node_rows != null)
                 {
-                        // Naturally-sorting by node_id
                         Utils :: natsort2d($node_rows, "node_id");
-                        $i = 0;
-                        foreach ($node_rows as $node_row)
-                        {
-                                $tab[$i][0] = $node_row['node_id'];
-                                $tab[$i][1] = $node_row['node_id'].": ".$node_row['name'];
-                                $i ++;
-                        }
-                        $html .= FormSelectGenerator :: generateFromArray($tab, null, $name, null, false);
+                        if ($type_interface != "table") {
+                                $html .= _("Node");
+                                $html .=  ": ";
+                                // Naturally-sorting by node_id
+                                $i = 0;
+                                foreach ($node_rows as $node_row)
+                                {
+                                        $tab[$i][0] = $node_row['node_id'];
+                                        $tab[$i][1] = $node_row['node_id'].": ".$node_row['name'];
+                                        $i ++;
+                                }
+                                $html .= FormSelectGenerator :: generateFromArray($tab, null, $name, null, false);
+                        } else {
+                                $html .= "<fieldset class='pretty_fieldset'>\n\t<legend>Node List</legend>\n";
+                                $html .= "\t<span class='node_admin'>Filter: <input type='text' maxlength='40' size='40' id='nodes_list_filter' name='nodes_list_filter' /></span>\n\t<br/>\n";
+                                $html .= "\t<!--[if IE]><style type='text/css'>#node_list_div table.scrollable>tbody { height: 15px; }</style><![endif]-->\n";
+                                $html .= "\t<script src='" . BASE_URL_PATH . "js/filtertable.js' type='text/javascript' language='javascript' charset='utf-8'></script>\n";
+                                $html .= "\t<script src='" . BASE_URL_PATH . "js/sorttable.js' type='text/javascript' language='javascript' charset='utf-8'></script>\n";
+                                $html .= "\t<div id='node_list_div' class='node_admin tableContainer'>\n";
+                                $html .= "\t\t<table id='nodes_list' class='node_admin filterable scrollable sortable'>\n\n";
+                                $html .= "\t\t\t<thead class='fixedHeader'>\n\t\t\t\t<tr class='nofilter'>\n\t\t\t\t\t<th>Node Name</th>\n\t\t\t\t\t<th>Node ID</th>\n\t\t\t\t\t<th>Deployment Status</th>\n\t\t\t\t</tr>\n\t\t\t</thead>\n\t\t\t<tbody>";
+                                
+                                $i = 0;
+                                foreach ($node_rows as $node_row)
+                                {
+                                        $href = GENERIC_OBJECT_ADMIN_ABS_HREF."?object_id={$node_row['node_id']}&object_class=Node&action=edit";
+                                        $html .= "\t\t\t\t<tr class='row' onclick=\"javascript:location.href='{$href}'\">\n\t\t\t\t\t<td>{$node_row['name']}<noscript>(<a href='{$href}'>edit</a>)</noscript></td>\n\t\t\t\t\t<td>{$node_row['node_id']}</td>\n\t\t\t\t\t<td>{$node_row['node_deployment_status']}</td>\n\t\t\t\t</tr>\n";
+                                }
+                                $html .= "\t\t\t</tbody>\n\t\t</table>\n";
+                                $html .= "\t</div>\n";
+                                $html .= "</fieldset>\n";
+                                
+                        }
+                } else {
+                        $html .= "<div class='warningmsg'>"._("Sorry, no nodes available in the database")."</div>\n";
                 }
                 return $html;
         }
+        
 
         /** Get the selected Network object.

trunk/wifidog-auth/wifidog/local_content/common/stylesheet.css

@@ -315 +315 @@
 
 .admin_section_list { /* list of elements inside a section */
-display: compact;
+        display: compact;
 }
 /*.admin_section_list_item { display: inline; }*/
@@ -555 +555 @@
 .flickr_tags li a {
     color: white;
-    font-size: normal;
+    /* font-size: normal; - invalid? */
     text-decoration: none;
 }
@@ -737 +737 @@
 }
 /********** End Google map section **********/
+
+/********** Scrollable Table Section ********/
+#node_list_div {
+        background: inherit;
+        overflow: auto;
+        height: 400px;
+        width: 97%;
+        min-width: 500px;
+        text-align: center;
+        border: 1px solid blue;
+}
+#node_list_div table.scrollable>tbody {
+        /* child selector syntax which IE6 and older do not support */
+        overflow: auto;
+        height: 378px;
+        width: 100%;
+}
+\html div.tableContainer table/* */ {
+        margin: 0 -16px 0 0
+}
+\html div.tableContainer/* */ {
+        padding: 0 16px 0 0;
+}
+table.scrollable thead tr {
+        position: relative;
+}
+html>body thead tr {
+        width: 100%;
+}
+table.scrollable {
+    width: 99%;
+    border-collapse: collapse;
+    border-spacing: 0px;
+}
+table.scrollable thead th {
+    display:inline-block;
+    font-weight: bold;
+    text-align: center;
+    border-top: solid 2px #000000;
+    border-bottom: solid 2px #000000;
+    background-color: #CCC;
+    color: #000099;
+    width: 200px;
+}
+table.scrollable tr.row:hover,tr.hover{
+        background-color: #2175bc;
+        color: #ff0000;
+}
+table.scrollable tr {
+        cursor: pointer;
+}
+table.scrollable td {
+    color: #000000;
+    padding-left: 5px;
+    font-size: 12px;
+    text-align: left;
+}
+table.scrollable thead td:last-child { padding-right: 25px; }
+
+table.scrollable thead th:last-child { padding-right: 25px; }
+
+/******* End Scrollable Table Section ********/
+
+/********** Sortable Table Section ***********/
+
+table.sortable a.sortheader {
+    background-color:#CCC;
+    color:#000099;
+    font-weight: bold;
+    text-decoration: none;
+    display: block;
+    font-size: 12px;
+}
+table.sortable span.sortarrow {
+    color: black;
+    text-decoration: none;
+}
+table.sortable tr.odd {
+        background-color: #eee;
+}
+table.sortable tr.even {
+        background-color: #fff;
+}
+
+
+/****** End Sortable Table Section ***********/