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 @@ ...@@ -15,13 +15,13 @@
} }
.content-primary { .content-primary {
float: right; float: right;
width: 65%; width: 67%;
} }
[data-role=footer] { [data-role=footer] {
width: 30%; width: 30%;
} }
} }
.ui-content .ui-listview { .content-primary .ui-listview {
margin-top: 0px; margin-top: 0px;
margin-bottom: 0px; margin-bottom: 0px;
} }
...@@ -36,7 +36,7 @@ ...@@ -36,7 +36,7 @@
<a href="{{ link }}" data-direction="reverse" data-role="button" data-icon="{{ icon }}" data-iconpos="notext" title="{{ title }}"></a> <a href="{{ link }}" data-direction="reverse" data-role="button" data-icon="{{ icon }}" data-iconpos="notext" title="{{ title }}"></a>
{{/ leftbutton }} {{/ leftbutton }}
{{# rightbutton }} {{# 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 }} {{/ rightbutton }}
{{# headmenu }} {{# headmenu }}
<div data-role="navbar"> <div data-role="navbar">
...@@ -95,6 +95,14 @@ ...@@ -95,6 +95,14 @@
</div> </div>
</script> </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"> <script id="service-inlist" type="text/html">
<li><a href="{{ link }}"><h4>{{ name }}</h4></a></li> <li><a href="{{ link }}"><h4>{{ name }}</h4></a></li>
</script> </script>
...@@ -167,6 +175,53 @@ ...@@ -167,6 +175,53 @@
<h3>{{ name }}</h3> <h3>{{ name }}</h3>
</a> </a>
</script> </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 -LOGIN
--> -->
...@@ -207,7 +262,7 @@ ...@@ -207,7 +262,7 @@
<a data-iconpos="top" data-icon="star" data-role="button" href="#/network">Networks</a> <a data-iconpos="top" data-icon="star" data-role="button" href="#/network">Networks</a>
</div> </div>
<div class="ui-block-a"> <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>
<div class="ui-block-b"> <div class="ui-block-b">
<a data-iconpos="top" data-icon="star" data-role="button" href="#/computer">Computers</a> <a data-iconpos="top" data-icon="star" data-role="button" href="#/computer">Computers</a>
...@@ -221,6 +276,10 @@ ...@@ -221,6 +276,10 @@
</div> </div>
</script> </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 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/ICanHaz.min.js"></script>
<script type="text/javascript" src="static/js/modernizr-2.5.3.js"></script> <script type="text/javascript" src="static/js/modernizr-2.5.3.js"></script>
...@@ -232,6 +291,5 @@ ...@@ -232,6 +291,5 @@
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head> </head>
<body> <body>
<div data-role="page" data-theme="c"></div>
</body> </body>
</html> </html>
vifib/static/js/core.js
View file @ 6ac251db
...@@ -59,7 +59,7 @@ ...@@ -59,7 +59,7 @@
methods = { methods = {
init: function () { init: function () {
var routes = [[['/', methods['showRoot']]]]; var routes = [[['/', methods.showRoot]]];
return this.each(function () { return this.each(function () {
// JQM configuration // JQM configuration
// Initialize slapos in this context // Initialize slapos in this context
...@@ -81,13 +81,17 @@ ...@@ -81,13 +81,17 @@
}, },
genInstanceUrl: function (uri) { genInstanceUrl: function (uri) {
return $.router.genHash(['instance', encodeURIComponent(uri)]); return $.router.genHash(['instance', 'id', encodeURIComponent(uri)]);
}, },
genSoftwareUrl: function (uri) { genSoftwareUrl: function (uri) {
return $.router.genHash(['library', 'software', encodeURIComponent(uri)]); return $.router.genHash(['library', 'software', encodeURIComponent(uri)]);
}, },
genBangUrl: function (uri) {
return methods.genInstanceUrl(uri) + "/bang";
},
extractInstanceURIFromHref: function () { extractInstanceURIFromHref: function () {
return decodeURIComponent($(this).attr('href').split('/').pop()); return decodeURIComponent($(this).attr('href').split('/').pop());
}, },
...@@ -98,10 +102,6 @@ ...@@ -98,10 +102,6 @@
return (i !== -1 && loc.length > i) ? decodeURIComponent(loc[i + 1]) : ""; return (i !== -1 && loc.length > i) ? decodeURIComponent(loc[i + 1]) : "";
}, },
genBangUrl: function (uri) {
return $.router.genHash(["instance", encodeURIComponent(uri), "bang"]);
},
authenticate: function (data) { authenticate: function (data) {
var d; var d;
for (d in data) { for (d in data) {
...@@ -132,25 +132,27 @@ ...@@ -132,25 +132,27 @@
showRoot: function (params) { showRoot: function (params) {
var route = $.router.routes.current, var route = $.router.routes.current,
nextLevel = route.level + 1; nextLevel = route.level + 1;
$(this).vifib('render', 'root');
$.router.routes.add('/homepage', nextLevel, methods.showHomepage, $(":jqmData(role=page)")); $.router.routes.add('/homepage', nextLevel, methods.showHomepage, $(":jqmData(role=page)"));
$.router.routes.add('/library', nextLevel, methods.showLibrary, $(":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('/documentation', nextLevel, methods.showDocumentation, $(":jqmData(role=page)"));
$.router.routes.add('/dashboard', nextLevel, methods.showDashboard, $(":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)")); $.router.routes.add('/login', nextLevel, methods.showLogin, $(":jqmData(role=page)"));
// default page // default page
if (params.route === '/') { if ($.router.routes.isCurrent(params.route)) {
$.router.redirect('/homepage'); $.router.redirect('/homepage');
} } else {
$.router.start(params.route, nextLevel); $.router.start(params.route, nextLevel);
}
}, },
//HOMEPAGE //HOMEPAGE
showHomepage: function (params) { showHomepage: function (params) {
return this.each(function () { return this.each(function () {
var mainPanel = $(this).vifib('getRender', 'homepagePanel'), var options = {
options = {
'title': 'Vifib', 'title': 'Vifib',
'mainPanel': mainPanel, 'mainPanel': $(this).vifib('getRender', 'homepagePanel'),
'headmenu': true, 'headmenu': true,
'headlinks': [ 'headlinks': [
{'name': 'Software library', 'link': '#/library'}, {'name': 'Software library', 'link': '#/library'},
...@@ -301,70 +303,131 @@ ...@@ -301,70 +303,131 @@
}) })
}); });
}, },
// SERVICES // INSTANCES
showInstance: function (uri) { showInstanceList: function (params) {
var statusCode = { return this.each(function () {
var nextLevel = $.router.routes.current.level + 1,
statusCode = {
401: redirect, 401: redirect,
402: payment, 402: payment,
404: notFound, 404: notFound,
500: serverError 500: serverError,
}; 503: serverError
$(this).slapos('instanceInfo', uri, { },
success: function (infos) { options = {
if (typeof (infos) !== "object") { 'title': 'My Services',
infos = $.parseJSON(infos); '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');
}); });
}, },
statusCode: statusCode
bindStopStartButtons: function () { });
$("#startInstance").click($.proxy(methods.startInstance, $(this))); }
$("#stopInstance").click($.proxy(methods.stopInstance, $(this))); });
}, },
prepareForm: function () { fillRowInstance: function (url) {
$(this).vifib('bindStopStartButtons'); return this.each(function () {
$("#bangInstance").click(); $(this).slapos('instanceInfo', url, {
$(this).vifib('refresh', methods.refreshInstanceForm, 30); 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 () { return this.each(function () {
var uri = $(this).vifib("extractInstanceURIFromHashtag"); var statusCode = {
$(this).slapos('instanceInfo', uri, { 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) { success: function (response) {
if (typeof (response) !== "object") { if (typeof (response) !== "object") {
response = $.parseJSON(response); response = $.parseJSON(response);
} }
var status = $(this).vifib('getRender', 'instance.' + response.status); var content = {
$("[name=software_type]").val(response.software_type); 'information': [
$("#instanceStatus").html(status); {'name': 'Reference', 'value': response.instance_id},
$(this).vifib('bindStopStartButtons'); {'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'}
]
}, },
options = {
stopInstance: function () { 'title': response.instance_id,
$(this).vifib('changeStatusInstance', 'stopped'); 'mainPanel': $(this).vifib('getRender', 'instancePanel', content),
return false; 'leftbutton': {
'link': $(this).vifib('isAuthenticated') ? '#/dashboard' : '#/homepage',
'icon': 'home',
'title': 'Homepage'
}, },
'menu': true,
startInstance: function () { 'menulinks': [
$(this).vifib('changeStatusInstance', 'started'); {'link': '#/instance', 'name': 'All services'}
return false; ],
'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 = { var statusCode = {
400: bad_request, 400: bad_request,
401: redirect, 401: redirect,
...@@ -373,8 +436,8 @@ ...@@ -373,8 +436,8 @@
500: serverError 500: serverError
}; };
return this.each(function () { return this.each(function () {
$(this).vifib("render", 'form.bang.instance'); $(this).vifib('render', 'instance.bangPanel');
$(this).find("#form-bang").submit(function () { $(this).find('#form-bang').submit(function () {
var data = $(this).serializeObject(), var data = $(this).serializeObject(),
uri = methods.extractInstanceURIFromHashtag(); uri = methods.extractInstanceURIFromHashtag();
$(this).slapos('instanceBang', uri, { $(this).slapos('instanceBang', uri, {
...@@ -398,6 +461,44 @@ ...@@ -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 () { getCurrentList: function () {
var list = []; var list = [];
$.each($(this).find('a'), function () { $.each($(this).find('a'), function () {
...@@ -417,19 +518,6 @@ ...@@ -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 () { refreshListInstance: function () {
var currentList = $(this).vifib('getCurrentList'); var currentList = $(this).vifib('getCurrentList');
...@@ -450,33 +538,6 @@ ...@@ -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 () { listInvoices: function () {
$(this).vifib('render', 'invoice.list'); $(this).vifib('render', 'invoice.list');
}, },
...@@ -551,6 +612,7 @@ ...@@ -551,6 +612,7 @@
raw = raw || true; raw = raw || true;
return this.each(function () { return this.each(function () {
$(this).html(ich[template](data, raw)); $(this).html(ich[template](data, raw));
$(this).page();
$(this).trigger('pagecreate'); $(this).trigger('pagecreate');
}); });
}, },
...@@ -613,7 +675,7 @@ $(document).bind("mobileinit", function(){ ...@@ -613,7 +675,7 @@ $(document).bind("mobileinit", function(){
$.mobile.defaultPageTransition = 'none'; $.mobile.defaultPageTransition = 'none';
}); });
$(document).bind('pagecreate', function () { $(document).bind('pagecreate', function () {
$(':jqmData(role=page)').vifib(); $('body').vifib();
}); });
$(document).bind('pagebeforecreate', function (e, data) { $(document).bind('pagebeforecreate', function (e, data) {
//e.preventDefault(); //e.preventDefault();
......
vifib/static/js/fake.js
View file @ 6ac251db
...@@ -113,7 +113,6 @@ var tmp = $.ajax; ...@@ -113,7 +113,6 @@ var tmp = $.ajax;
$.ajax = function(url, options){ $.ajax = function(url, options){
// it will not work with cache set to false // it will not work with cache set to false
if (url.hasOwnProperty('cache')) { url.cache = true; } if (url.hasOwnProperty('cache')) { url.cache = true; }
console.log(url)
var result = tmp(url, options); var result = tmp(url, options);
fakeserver.respond(); fakeserver.respond();
return result; return result;
......
vifib/static/js/jquery.urljs.js
View file @ 6ac251db
...@@ -70,7 +70,6 @@ $.extend({ ...@@ -70,7 +70,6 @@ $.extend({
} }
this.current = this.list[i][j]; this.current = this.list[i][j];
this.clean(this.list[i][j].level + 1); this.clean(this.list[i][j].level + 1);
console.log(this.list[i][j].route);
this.list[i][j].callback(hash); this.list[i][j].callback(hash);
} }
j += 1; j += 1;
...@@ -81,6 +80,12 @@ $.extend({ ...@@ -81,6 +80,12 @@ $.extend({
isLastLevel: function () { isLastLevel: function () {
return this.current.level === (this.list.length - 1); 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