10:10 p.m.
From: samhenri <samuel.guimaraes(a)eldorado.org.br>
Signed-off-by: Andre Teodoro <andreteodoro.work(a)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