Skip to content

S
slapos.core
Commit 6ac251db authored by Thomas Lechauve's avatar Thomas Lechauve
Browse files
Options

Instance page created

parent 6ade1e25
Show whitespace changes
Inline Side-by-side
Showing with 233 additions and 109 deletions
vifib/index.html
View file @ 6ac251db
......@@ -15,13 +15,13 @@
}
.content-primary {
float: right;
width: 65%;
width: 67%;
}
[data-role=footer] {
width: 30%;
}
}
.ui-content .ui-listview {
.content-primary .ui-listview {
margin-top: 0px;
margin-bottom: 0px;
}
......@@ -36,7 +36,7 @@
<a href="{{ link }}" data-direction="reverse" data-role="button" data-icon="{{ icon }}" data-iconpos="notext" title="{{ title }}"></a>
{{/ leftbutton }}
{{# rightbutton }}
<a href="{{ link }}" data-inline="true" data-mini="true" data-role="button" title="{{ title }}"></a>
<a href="{{ link }}" data-role="button" data-icon="{{ icon }}" data-iconpos="notext" title="{{ title }}"></a>
{{/ rightbutton }}
{{# headmenu }}
<div data-role="navbar">
......@@ -95,6 +95,14 @@
</div>
</script>
<script id="actions" type="text/html">
<!--<div data-role="controlgroup" data-type="horizontal">-->
{{# actions }}
<a href="{{ link }}" data-role="button" data-inline="true" data-mini="true">{{ name }}</a>
{{/ actions }}
<!--</div>-->
</script>
<script id="service-inlist" type="text/html">
<li><a href="{{ link }}"><h4>{{ name }}</h4></a></li>
</script>
......@@ -167,6 +175,53 @@
<h3>{{ name }}</h3>
</a>
</script>
<!--
-INSTANCE // SERVICE
-->
<script id="instance" type="text/html">
{{> headbar }}
{{> content }}
</script>
<script id="instancePanel" type="text/html">
{{> actions }}
<ul data-role="listview">
{{# information }}
<li>
{{ name }}
<h4>{{ value }}</h4>
</li>
{{/ information }}
</ul>
</script>
<script id="instance.list" type="text/html">
<form id="search-form">
<div data-role="fieldcontain" class="ui-hide-label">
<label for="search"></label>
<input type="search" name="search" placeholder="Search"/>
</div>
</form>
<ul data-role="listview" id="instance-list"></ul>
</script>
<script id="instance.listitem" type="text/html">
<a href="{{ instance_url }}">
{{# thumb_url }}
<img src="{{ thumb_url }}" />
{{/ thumb_url }}
<h3>{{ instance_id }}</h3>
</a>
</script>
<script id="instance.bangPanel" type="text/html">
<form id="form-bang">
<label for="reasons">Why bang this instance ?</label>
<textarea name="reasons"></textarea>
<div class="ui-body ui-body-b">
<fieldset class="ui-grid-a">
<button type="submit" data-theme="a">Connexion</button>
<button type="submit" data-theme="a">Cancel</button>
</fieldset>
</div>
</form>
</script>
<!--
-LOGIN
-->
......@@ -207,7 +262,7 @@
<a data-iconpos="top" data-icon="star" data-role="button" href="#/network">Networks</a>
</div>
<div class="ui-block-a">
<a data-iconpos="top" data-icon="star" data-role="button" href="#/service">Services</a>
<a data-iconpos="top" data-icon="star" data-role="button" href="#/instance">Services</a>
</div>
<div class="ui-block-b">
<a data-iconpos="top" data-icon="star" data-role="button" href="#/computer">Computers</a>
......@@ -221,6 +276,10 @@
</div>
</script>
<script id="root" type="text/html">
<div data-role="page" data-theme="c"></div>
</script>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="static/js/ICanHaz.min.js"></script>
<script type="text/javascript" src="static/js/modernizr-2.5.3.js"></script>
......@@ -232,6 +291,5 @@
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
<div data-role="page" data-theme="c"></div>
</body>
</html>
vifib/static/js/core.js
View file @ 6ac251db
......@@ -59,7 +59,7 @@
methods = {
init: function () {
var routes = [[['/', methods['showRoot']]]];
var routes = [[['/', methods.showRoot]]];
return this.each(function () {
// JQM configuration
// Initialize slapos in this context
......@@ -81,13 +81,17 @@
},
genInstanceUrl: function (uri) {
return $.router.genHash(['instance', encodeURIComponent(uri)]);
return $.router.genHash(['instance', 'id', encodeURIComponent(uri)]);
},
genSoftwareUrl: function (uri) {
return $.router.genHash(['library', 'software', encodeURIComponent(uri)]);
},
genBangUrl: function (uri) {
return methods.genInstanceUrl(uri) + "/bang";
},
extractInstanceURIFromHref: function () {
return decodeURIComponent($(this).attr('href').split('/').pop());
},
......@@ -98,10 +102,6 @@
return (i !== -1 && loc.length > i) ? decodeURIComponent(loc[i + 1]) : "";
},
genBangUrl: function (uri) {
return $.router.genHash(["instance", encodeURIComponent(uri), "bang"]);
},
authenticate: function (data) {
var d;
for (d in data) {
......@@ -132,25 +132,27 @@
showRoot: function (params) {
var route = $.router.routes.current,
nextLevel = route.level + 1;
$(this).vifib('render', 'root');
$.router.routes.add('/homepage', nextLevel, methods.showHomepage, $(":jqmData(role=page)"));
$.router.routes.add('/library', nextLevel, methods.showLibrary, $(":jqmData(role=page)"));
$.router.routes.add('/documentation', nextLevel, methods.showDocumentation, $(":jqmData(role=page)"));
$.router.routes.add('/dashboard', nextLevel, methods.showDashboard, $(":jqmData(role=page)"));
$.router.routes.add('/instance', nextLevel, methods.showInstanceList, $(":jqmData(role=page)"));
$.router.routes.add('/login', nextLevel, methods.showLogin, $(":jqmData(role=page)"));
// default page
if (params.route === '/') {
if ($.router.routes.isCurrent(params.route)) {
$.router.redirect('/homepage');
}
} else {
$.router.start(params.route, nextLevel);
}
},
//HOMEPAGE
showHomepage: function (params) {
return this.each(function () {
var mainPanel = $(this).vifib('getRender', 'homepagePanel'),
options = {
var options = {
'title': 'Vifib',
'mainPanel': mainPanel,
'mainPanel': $(this).vifib('getRender', 'homepagePanel'),
'headmenu': true,
'headlinks': [
{'name': 'Software library', 'link': '#/library'},
......@@ -301,70 +303,131 @@
})
});
},
showInstance: function (uri) {
var statusCode = {
// SERVICES // INSTANCES
showInstanceList: function (params) {
return this.each(function () {
var nextLevel = $.router.routes.current.level + 1,
statusCode = {
401: redirect,
402: payment,
404: notFound,
500: serverError
};
$(this).slapos('instanceInfo', uri, {
success: function (infos) {
if (typeof (infos) !== "object") {
infos = $.parseJSON(infos);
500: serverError,
503: serverError
},
options = {
'title': 'My Services',
'mainPanel': $(this).vifib('getRender', 'instance.list'),
'leftbutton': {
'link': $(this).vifib('isAuthenticated') ? '#/dashboard' : '#/homepage',
'icon': 'home',
'title': 'Homepage'
},
'rightbutton': {
'link': '/instance/new',
'icon': 'plus',
'title': 'add service'
}
infos.status = $(this).vifib('getRender', 'instance.' + infos.status);
infos.actions = [
{name: "Bang", url: methods.genBangUrl(decodeURIComponent(uri))}
];
$(this).vifib('render', 'instance', infos);
var form = $(this).find("#instance-form");
form.vifib('prepareForm');
},
statusCode: statusCode
listview = $(this).vifib('render', 'instance', options).find('#instance-list');
// Routing
$.router.routes.add('/instance/id/:id', nextLevel, methods.showInstance, $(this));
if (params.route !== '/instance') {
$.router.start(params.route, nextLevel);
} else {
//table.vifib('refresh', methods.refreshListInstance, 30);
$(this).slapos('instanceList', {
success: function (data) {
if (typeof (data) !== "object") {
data = $.parseJSON(data);
}
$.each(data.list, function () {
var url = this.toString(),
row = $('<li></li>').vifib('fillRowInstance', url);
//row.vifib('refresh', methods.refreshRowInstance, 30);
listview.append(row).listview('refresh');
});
},
bindStopStartButtons: function () {
$("#startInstance").click($.proxy(methods.startInstance, $(this)));
$("#stopInstance").click($.proxy(methods.stopInstance, $(this)));
statusCode: statusCode
});
}
});
},
prepareForm: function () {
$(this).vifib('bindStopStartButtons');
$("#bangInstance").click();
$(this).vifib('refresh', methods.refreshInstanceForm, 30);
fillRowInstance: function (url) {
return this.each(function () {
$(this).slapos('instanceInfo', url, {
success: function (instance) {
if (typeof (instance) !== "object") {
instance = $.parseJSON(instance);
}
$.extend(instance, {'instance_url': methods.genInstanceUrl(url)});
$(this).vifib('render', 'instance.listitem', instance);
}
});
});
},
refreshInstanceForm: function () {
showInstance: function (params) {
return this.each(function () {
var uri = $(this).vifib("extractInstanceURIFromHashtag");
$(this).slapos('instanceInfo', uri, {
var statusCode = {
401: redirect,
402: payment,
404: notFound,
500: serverError
},
nextLevel = $.router.routes.current.level + 1;
$.router.routes.add('/instance/id/:id/bang', nextLevel, methods.showBangInstance, $(this).find('.content-primary'));
if ($.router.routes.isCurrent(params.route) === false) {
$.router.start(params.route);
}
$(this).slapos('instanceInfo', params.id, {
success: function (response) {
if (typeof (response) !== "object") {
response = $.parseJSON(response);
}
var status = $(this).vifib('getRender', 'instance.' + response.status);
$("[name=software_type]").val(response.software_type);
$("#instanceStatus").html(status);
$(this).vifib('bindStopStartButtons');
}
});
});
var content = {
'information': [
{'name': 'Reference', 'value': response.instance_id},
{'name': 'Status', 'value': response.status},
{'name': 'Software release', 'value': response.software_release},
{'name': 'Software type', 'value': response.software_type}
],
'actions': [
{'name': 'Bang', 'link': methods.genBangUrl(params.id)},
{'name': 'Rename', 'link': '#/instance/rename'}
]
},
stopInstance: function () {
$(this).vifib('changeStatusInstance', 'stopped');
return false;
options = {
'title': response.instance_id,
'mainPanel': $(this).vifib('getRender', 'instancePanel', content),
'leftbutton': {
'link': $(this).vifib('isAuthenticated') ? '#/dashboard' : '#/homepage',
'icon': 'home',
'title': 'Homepage'
},
startInstance: function () {
$(this).vifib('changeStatusInstance', 'started');
return false;
'menu': true,
'menulinks': [
{'link': '#/instance', 'name': 'All services'}
],
'menu-extension': 'instances bound',
'menuextlinks': [
{'link': '#/instance/id/kvm', 'name': 'INST-2'}
]
};
//response.status = $(this).vifib('getRender', 'instance.' + response.status);
response.actions = [
{'name': "Bang", 'url': methods.genBangUrl(decodeURIComponent(params.id))}
];
$(this).vifib('render', 'instance', options);
//var form = $(this).find("#instance-form");
//form.vifib('prepareForm');
},
statusCode: statusCode
});
})
},
showBangInstance: function () {
showBangInstance: function (params) {
var statusCode = {
400: bad_request,
401: redirect,
......@@ -373,8 +436,8 @@
500: serverError
};
return this.each(function () {
$(this).vifib("render", 'form.bang.instance');
$(this).find("#form-bang").submit(function () {
$(this).vifib('render', 'instance.bangPanel');
$(this).find('#form-bang').submit(function () {
var data = $(this).serializeObject(),
uri = methods.extractInstanceURIFromHashtag();
$(this).slapos('instanceBang', uri, {
......@@ -398,6 +461,44 @@
});
},
bindStopStartButtons: function () {
$("#startInstance").click($.proxy(methods.startInstance, $(this)));
$("#stopInstance").click($.proxy(methods.stopInstance, $(this)));
},
prepareForm: function () {
$(this).vifib('bindStopStartButtons');
$("#bangInstance").click();
$(this).vifib('refresh', methods.refreshInstanceForm, 30);
},
refreshInstanceForm: function () {
return this.each(function () {
var uri = $(this).vifib("extractInstanceURIFromHashtag");
$(this).slapos('instanceInfo', uri, {
success: function (response) {
if (typeof (response) !== "object") {
response = $.parseJSON(response);
}
var status = $(this).vifib('getRender', 'instance.' + response.status);
$("[name=software_type]").val(response.software_type);
$("#instanceStatus").html(status);
$(this).vifib('bindStopStartButtons');
}
});
});
},
stopInstance: function () {
$(this).vifib('changeStatusInstance', 'stopped');
return false;
},
startInstance: function () {
$(this).vifib('changeStatusInstance', 'started');
return false;
},
getCurrentList: function () {
var list = [];
$.each($(this).find('a'), function () {
......@@ -417,19 +518,6 @@
});
},
fillRowInstance: function (url) {
return this.each(function () {
$(this).slapos('instanceInfo', url, {
success: function (instance) {
if (typeof (instance) !== "object") {
instance = $.parseJSON(instance);
}
$.extend(instance, {'url': methods.genInstanceUrl(url)});
$(this).vifib('render', 'instance.list.elem', instance);
}
});
});
},
refreshListInstance: function () {
var currentList = $(this).vifib('getCurrentList');
......@@ -450,33 +538,6 @@
});
},
listInstances: function () {
var $this = $(this),
statusCode = {
401: redirect,
402: payment,
404: notFound,
500: serverError,
503: serverError
},
table = $(this).vifib('render', 'instance.list').find('#instance-table');
table.vifib('refresh', methods.refreshListInstance, 30);
$(this).slapos('instanceList', {
success: function (data) {
if (typeof (data) !== "object") {
data = $.parseJSON(data);
}
$.each(data.list, function () {
var url = this.toString(),
row = $('<tr></tr>').vifib('fillRowInstance', url);
row.vifib('refresh', methods.refreshRowInstance, 30);
table.append(row);
});
},
statusCode: statusCode
});
},
listInvoices: function () {
$(this).vifib('render', 'invoice.list');
},
......@@ -551,6 +612,7 @@
raw = raw || true;
return this.each(function () {
$(this).html(ich[template](data, raw));
$(this).page();
$(this).trigger('pagecreate');
});
},
......@@ -613,7 +675,7 @@ $(document).bind("mobileinit", function(){
$.mobile.defaultPageTransition = 'none';
});
$(document).bind('pagecreate', function () {
$(':jqmData(role=page)').vifib();
$('body').vifib();
});
$(document).bind('pagebeforecreate', function (e, data) {
//e.preventDefault();
......
vifib/static/js/fake.js
View file @ 6ac251db
......@@ -113,7 +113,6 @@ var tmp = $.ajax;
$.ajax = function(url, options){
// it will not work with cache set to false
if (url.hasOwnProperty('cache')) { url.cache = true; }
console.log(url)
var result = tmp(url, options);
fakeserver.respond();
return result;
......
vifib/static/js/jquery.urljs.js
View file @ 6ac251db
......@@ -70,7 +70,6 @@ $.extend({
}
this.current = this.list[i][j];
this.clean(this.list[i][j].level + 1);
console.log(this.list[i][j].route);
this.list[i][j].callback(hash);
}
j += 1;
......@@ -81,6 +80,12 @@ $.extend({
isLastLevel: function () {
return this.current.level === (this.list.length - 1);
},
isCurrent: function (hash) {
var extracted = $.router.extractKeys(this.current.route),
regex = new RegExp('^' + extracted.regex + '$');
return regex.test(hash);
}
},
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7