[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