[Kimchi-devel] [PATCH] [Kimchi 6/9] Issue 776: Adding filter on Templates screen

sguimaraes943 at gmail.com sguimaraes943 at gmail.com
Mon Dec 14 20:10:31 UTC 2015


From: samhenri <samuel.guimaraes at eldorado.org.br>

Signed-off-by: Andre Teodoro <andreteodoro.work at gmail.com>
---
 ui/js/src/kimchi.template_main.js | 32 ++++++++++++++++++--------------
 ui/pages/tabs/templates.html.tmpl | 35 +++++++++++++++++++++++------------
 2 files changed, 41 insertions(+), 26 deletions(-)

diff --git a/ui/js/src/kimchi.template_main.js b/ui/js/src/kimchi.template_main.js
index 3062856..7002b03 100644
--- a/ui/js/src/kimchi.template_main.js
+++ b/ui/js/src/kimchi.template_main.js
@@ -15,34 +15,38 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-kimchi.doListTemplates = function() {
+
+ kimchi.doListTemplates = function() {
+    $('.wok-mask').removeClass('hidden');
     kimchi.listTemplates(function(result) {
         if (result && result.length) {
             $('#noTemplates').hide();
-            var listHtml = '<li class="wok-vm-header">' +
-                '<span class="column-name">'+i18n['KCHTMPL6004M']+'</span><!--' +
-                '--><span class="column-type">'+i18n['KCHTMPL6005M']+'</span><!--' +
-                '--><span class="column-version">'+i18n['KCHTMPL6006M']+'</span><!--' +
-                '--><span class="column-processors">'+i18n['KCHTMPL6007M']+'</span><!--' +
-                '--><span class="column-memory">'+i18n['KCHTMPL6008M']+'</span><!-- ' +
-                '--><span class="column-action" style="display:none">   ' +
-                '    <span class="sr-only">'+i18n['KCHTMPL6009M']+'</span><!-- ' +
-                '--></span> ' +
-                '</li>';
+            var listHtml = '';
             var templateHtml = $('#templateTmpl').html();
             $.each(result, function(index, value) {
                 listHtml += wok.substitute(templateHtml, value);
             });
+            $('.wok-vm-list').removeClass('hidden');
+            $('#templates-container').removeClass('hidden');
             $('#templateList').html(listHtml);
             kimchi.templateBindClick();
+            $('.wok-mask').fadeOut(300, function() {});
         } else {
             $('#templateList').html('');
             $('#noTemplates').show();
+            $('.wok-vm-list').addClass('hidden');
+            $('#templates-container').addClass('hidden');
+            $('.wok-mask').fadeOut(300, function() {});
         }
-        $('.wok-mask').addClass('hidden');
+
+        var options = { valueNames: ['name-filter', 'os-type-filter', 'os-version-filter', 'cpus-filter', 'memory-filter'] };
+        var templatesList = new List('templates-container', options);
+
     }, function(err) {
         wok.message.error(err.responseJSON.reason);
-        $('.wok-mask').addClass('hidden');
+        $('.wok-mask').fadeOut(300, function() {
+            $('.wok-mask').addClass('hidden');
+        });
     });
 };
 
@@ -80,7 +84,7 @@ kimchi.templateBindClick = function() {
             }, function(err) {
                 wok.message.error(err.responseJSON.reason);
             });
-        }, function() {});
+        }, function(){});
     });
 }
 kimchi.hideTitle = function() {
diff --git a/ui/pages/tabs/templates.html.tmpl b/ui/pages/tabs/templates.html.tmpl
index e5b5720..ef4e660 100644
--- a/ui/pages/tabs/templates.html.tmpl
+++ b/ui/pages/tabs/templates.html.tmpl
@@ -24,7 +24,6 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <link rel="stylesheet" href="plugins/kimchi/css/theme-default.min.css">
     <script src="plugins/kimchi/js/kimchi.min.js"></script>
 </head>
 <body>
@@ -34,7 +33,7 @@
                 <!-- Brand and toggle get grouped for better mobile display -->
                 <div class="navbar-header">
                   <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#toolbar" aria-expanded="false">
-                    <span class="sr-only">Toggle navigation</span>
+                    <span class="sr-only">$_("Toggle navigation")</span>
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
@@ -49,11 +48,11 @@
         </div>
     </nav>
     <div class="templates">
-        <div class="container">
-            <div class="row grid-control hidden">
+        <div id="templates-container" class="container hidden">
+            <div class="row grid-control empty-when-logged-off">
                 <div class="pull-right">
-                    <label for="templates-filter" class="sr-only">$_("Filter"):</label>
-                    <input type="text" class="filter form-control" placeholder="$_("Filter")">
+                    <label for="search_input" class="sr-only">$_("Filter"):</label>
+                    <input type="text" class="filter form-control search" id="search_input" placeholder="$_("Filter")">
                 </div>
             </div>
             <div id="alert-container"></div>
@@ -61,11 +60,23 @@
                 $_("No templates found.")
             </div>
             <div id="alert-container"></div>
-            <ul id="templateList" class="wok-vm-list empty-when-logged-off">
+            <ul id="templates-grid" class="wok-vm-list hidden empty-when-logged-off">
+                <li class="wok-vm-header">
+                        <span class="column-name">$_("Template Name (ID)")</span><!--
+                  --><span class="column-type">$_("OS")</span><!--
+                  --><span class="column-version">$_("Version")</span><!--
+                  --><span class="column-processors">$_("CPUs")</span><!--
+                  --><span class="column-memory">$_("Memory")</span><!--
+                  --><span class="column-action" style="display:none"><span class="sr-only">$_("Actions")</span></span>
+                    </li>
+                    <li>
+                        <ul id="templateList" class="ul-body list">
+                        </ul>
+                    </li>
             </ul>
         </div>
     </div>
-    <div class="wok-mask hidden">
+    <div class="wok-mask">
         <div class="wok-mask-loader-container">
             <div class="wok-mask-loading">
                 <div class="wok-mask-loading-icon"></div>
@@ -94,13 +105,13 @@
                     </div>
                 </span>
             </span><!--
-            --><span class='column-type distro-icon icon-{os_distro}' val="{os_distro}">{os_distro}</span><!--
+            --><span class='column-type os-type-filter distro-icon icon-{os_distro}' val="{os_distro}">{os_distro}</span><!--
             --><span class="item-hidden">$_("OS")</span><!--
-            --><span class='column-version' val="{os_version}">{os_version}</span><!--
+            --><span class='column-version os-version-filter' val="{os_version}">{os_version}</span><!--
             --><span class="item-hidden">$_("Version")</span><!--
-            --><span class='column-processors' val="{cpus}"><strong>{cpus}</strong> cores</span><!--
+            --><span class='column-processors cpus-filter' val="{cpus}"><strong>{cpus}</strong> $_("cores")</span><!--
             --><span class="item-hidden">$_("CPUs")</span><!--
-            --><span class='column-memory' val="{memory}"><strong>{memory}</strong> M</span><!--
+            --><span class='column-memory memory-filter' val="{memory}"><strong>{memory}</strong> $_("M")</span><!--
             --><span class="item-hidden">$_("Memory")</span>
         </li>
     </script>
-- 
1.9.3




More information about the Kimchi-devel mailing list