add jquery ui autocomplete to port link dialog filter fields 168/head
authorgithub138 <m.ehinger@ltur.de>
Mon, 27 Jun 2016 12:12:49 +0000 (14:12 +0200)
committergithub138 <m.ehinger@ltur.de>
Tue, 28 Jun 2016 13:04:34 +0000 (15:04 +0200)
* getAutocompleteListAJAX(): new function to handle autocomplete requests
* renderPopupPortSelector(): add autocomplete code

ChangeLog
wwwroot/inc/ajax-interface.php
wwwroot/inc/navigation.php
wwwroot/inc/popup.php

index a7b7739..ec1addc 100644 (file)
--- a/ChangeLog
+++ b/ChangeLog
@@ -13,6 +13,7 @@
        update: explain usage particulars for each tag on the editor tab
        update: increase HTML SELECT maximum width (#1611)
        update: add support for standalone UCS servers (by Brian Pothier)
+       update: add autocomplete to port link dialog object name, asset tag and port name fields
 0.20.11 2016-02-07
        bugfix: Tag Picker does not display the full tag list as a tree (#1403)
        bugfix: race conditions in 802.Q deploy (switch remained synced after recalc)
index 8a1af2f..e2c23bd 100644 (file)
@@ -296,4 +296,39 @@ function getNetUsageAJAX()
        echo getRenderedIPNetCapacity ($net);
 }
 
+
+function getAutocompleteListAJAX()
+{
+       $term = genericAssertion ('term', 'string0');
+       $realm = genericAssertion ('realm', 'string');
+
+       if (! $term)
+               return;
+
+       switch ($realm)
+       {
+               case 'object':
+                       $result = usePreparedSelectBlade ("SELECT name FROM Object WHERE name LIKE ? GROUP BY name ORDER BY name LIMIT 101", array ("%$term%"));
+                       $rows = $result->fetchAll (PDO::FETCH_COLUMN, 0);
+                       unset ($result);
+                       break;
+               case 'asset':
+                       $result = usePreparedSelectBlade ("SELECT asset_no FROM Object WHERE asset_no LIKE ? GROUP BY asset_no ORDER BY asset_no LIMIT 101", array ("%$term%"));
+                       $rows = $result->fetchAll (PDO::FETCH_COLUMN, 0);
+                       unset ($result);
+                       break;
+               case 'port':
+                       $result = usePreparedSelectBlade ("SELECT name FROM Port WHERE name LIKE ? GROUP BY name ORDER BY name LIMIT 101", array ("%$term%"));
+                       $rows = $result->fetchAll (PDO::FETCH_COLUMN, 0);
+                       unset ($result);
+                       break;
+               default:
+                       return;
+       }
+
+       if (count ($rows) > 100 )
+               $rows[] = '...';
+
+       echo json_encode ($rows);
+}
 ?>
index d83f59f..e252a4e 100644 (file)
@@ -913,6 +913,7 @@ $ajaxhandler['upd-reservation-cable'] = 'updateCableIdAJAX';
 $ajaxhandler['net-usage'] = 'getNetUsageAJAX';
 $ajaxhandler['get-slb-form'] = 'renderSLBFormAJAX';
 $ajaxhandler['triplet-preview'] = 'getTripletConfigAJAX';
+$ajaxhandler['autocomplete'] = 'getAutocompleteListAJAX';
 
 $popuphandler['objlist'] = 'renderPopupObjectSelector';
 $popuphandler['portlist'] = 'renderPopupPortSelector';
index 63eca84..afa1ac8 100644 (file)
@@ -403,6 +403,8 @@ function renderPopupPortSelector()
        )
                $spare_ports = findSparePorts ($port_info, $filter);
 
+       includeJQueryUI (TRUE);
+
        // display search form
        echo 'Link ' . formatPort ($port_info) . ' to...';
        echo '<form method=GET>';
@@ -411,14 +413,56 @@ function renderPopupPortSelector()
        echo '<input type=hidden name="helper" value="portlist">';
        echo '<input type=hidden name="port" value="' . $port_id . '">';
        echo '<table align="center" valign="bottom"><tr>';
-       echo '<td class="tdleft"><label>Object name:<br><input type=text size=8 name="filter-obj" value="' . htmlspecialchars ($filter['objects'], ENT_QUOTES) . '"></label></td>';
-       echo '<td class="tdleft"><label>Asset tag:<br><input type=text size=8 name="filter-asset_no" value="' . htmlspecialchars ($filter['asset_no'], ENT_QUOTES) . '"></label></td>';
-       echo '<td class="tdleft"><label>Port name:<br><input type=text size=6 name="filter-port" value="' . htmlspecialchars ($filter['ports'], ENT_QUOTES) . '"></label></td>';
+       echo '<td class="tdleft"><label>Object name:<br><input id="filter-obj" type=text size=8 name="filter-obj" value="' . htmlspecialchars ($filter['objects'], ENT_QUOTES) . '"></label></td>';
+       echo '<td class="tdleft"><label>Asset tag:<br><input id="filter-asset" type=text size=8 name="filter-asset_no" value="' . htmlspecialchars ($filter['asset_no'], ENT_QUOTES) . '"></label></td>';
+       echo '<td class="tdleft"><label>Port name:<br><input id="filter-port" type=text size=6 name="filter-port" value="' . htmlspecialchars ($filter['ports'], ENT_QUOTES) . '"></label></td>';
        echo '<td class="tdleft" valign="bottom"><label><input type=checkbox name="in_rack"' . ($in_rack ? ' checked' : '') . '>Nearest racks</label></td>';
        echo '<td valign="bottom"><input type=submit value="show ports"></td>';
        echo '</tr></table>';
        finishPortlet();
 
+       addJS (<<<JSEND
+               $(document).ready( function() {
+                       $("#filter-obj").autocomplete({
+                               source: "?module=ajax&ac=autocomplete&realm=object",
+                               minLength: 3,
+                               focus: function(event, ui) {
+                                               if( ui.item.value == '...' )
+                                                       event.preventDefault();
+                               },
+                               select: function(event, ui) {
+                                               if( ui.item.value == '...' )
+                                                       event.preventDefault();
+                               }
+                       });
+                       $("#filter-asset").autocomplete({
+                               source: "?module=ajax&ac=autocomplete&realm=asset",
+                               minLength: 3,
+                               focus: function(event, ui) {
+                                               if( ui.item.value == '...' )
+                                                       event.preventDefault();
+                               },
+                               select: function(event, ui) {
+                                               if( ui.item.value == '...' )
+                                                       event.preventDefault();
+                               }
+                       });
+                       $("#filter-port").autocomplete({
+                               source: "?module=ajax&ac=autocomplete&realm=port",
+                               minLength: 3,
+                               focus: function(event, ui) {
+                                               if( ui.item.value == '...' )
+                                                       event.preventDefault();
+                               },
+                               select: function(event, ui) {
+                                               if( ui.item.value == '...' )
+                                                       event.preventDefault();
+                               }
+                       });
+               });
+JSEND
+       , TRUE);
+
        // display results
        startPortlet ('Compatible spare ports');
        if (! count ($spare_ports))