Commit b0d3766e authored by Thomas Lechauve's avatar Thomas Lechauve

Merge jquery.urlJS with vifib application

parent cd8770e2
(function ($) {
'use strict';
$.extend({
router: {
routes: {
list: [],
current: null,
$.extend({
router: {
routes: {
list: [],
current: null,
add: function (route, level, callback, context) {
var r, keys, i;
if (typeof this.list[level] === 'undefined') {
this.list[level] = [];
}
r = {
'route': route,
'level': level,
'callback': function (params) {
if (callback !== undefined) {
if (context !== undefined) {
callback(params);
} else {
callback.call(context, params);
}
add: function (route, level, callback, context) {
var r, keys, i;
if (typeof this.list[level] === 'undefined') {
this.list[level] = [];
}
r = {
'route': route,
'level': level,
'callback': function (params) {
if (callback !== undefined) {
if (context === undefined) {
callback(params);
} else {
callback.call(context, params);
}
},
}
},
i = this.list[level].length;
this.list[level][i] = r;
},
i = this.list[level].length;
this.list[level][i] = r;
},
clean: function (level) {
this.list = this.list.slice(0, level);
},
clean: function (level) {
this.list = this.list.slice(0, level);
},
cleanAll: function () {
this.list = this.list.slice(0, 0);
},
cleanAll: function () {
this.list = this.list.slice(0, 0);
},
search: function (hash) {
var stop = false,
i = 0, j = 0,
regex,
result,
extracted;
while ((stop === false) && (i < this.list.length)) {
j = 0;
while ((stop === false) && (j < this.list[i].length)) {
extracted = $.router.extractKeys(this.list[i][j].route);
regex = new RegExp('^' + extracted.regex + '$');
if (regex.test(hash.route)) {
result = regex.exec(hash.route);
stop = true;
result.shift();
for (var k = 0; k < result.length; k += 1) {
hash[extracted.keys[k]] = result[k];
}
this.current = this.list[i][j];
this.list[i][j].callback(hash);
search: function (hash) {
var stop = false,
i = 0, j = 0,
regex,
result,
extracted;
while ((stop === false) && (i < this.list.length)) {
j = 0;
while ((stop === false) && (j < this.list[i].length)) {
extracted = $.router.extractKeys(this.list[i][j].route);
regex = new RegExp('^' + extracted.regex + '$');
if (regex.test(hash.route)) {
result = regex.exec(hash.route);
stop = true;
result.shift();
for (var k = 0; k < result.length; k += 1) {
hash[extracted.keys[k]] = result[k];
}
j += 1;
this.current = this.list[i][j];
this.list[i][j].callback(hash);
}
i += 1;
j += 1;
}
i += 1;
}
},
}
},
extractKeys: function (regex) {
var re_key = new RegExp(/:(\w+)/),
keys = [],
result;
while (re_key.test(regex)) {
result = re_key.exec(regex);
keys.push(result[1]);
regex = regex.replace(result[0], '([^\/]+)');
}
return {'regex': regex, 'keys': keys}
},
extractKeys: function (regex) {
var re_key = new RegExp(/:(\w+)/),
keys = [],
result;
while (re_key.test(regex)) {
result = re_key.exec(regex);
keys.push(result[1]);
regex = regex.replace(result[0], '([^\/]+)');
}
return {'regex': regex, 'keys': keys}
},
deserialize: function (params) {
var result = {},
p,
params = params.split('&');
while (params.length) {
p = params.shift().split('=');
if (p[0] !== '') {
if (p.length === 2) {
result[p[0]] = p[1] === 'true' ? true : p[1];
} else {
result[p[0]] = true;
}
deserialize: function (params) {
var result = {},
p,
params = params.split('&');
while (params.length) {
p = params.shift().split('=');
if (p[0] !== '') {
if (p.length === 2) {
result[p[0]] = p[1] === 'true' ? true : p[1];
} else {
result[p[0]] = true;
}
}
return result;
},
}
return result;
},
serialize: function (obj) {
return $.param(obj);
},
serialize: function (obj) {
return $.param(obj);
},
parseHash: function (hashTag) {
var re = new RegExp(/(?:^#([a-zA-Z0-9\/_-]+))(?:\?([A-Za-z0-9\/&=_-]+))?/g),
groups = re.exec(hashTag),
r, params = {};
groups.shift();
// route
r = groups[0];
// params
if (groups[1] !== undefined) {
params = this.deserialize(groups[1]);
}
return params.length === 0 ? {'route': r} : $.extend({'route': r}, params);
},
parseHash: function (hashTag) {
var re = new RegExp(/(?:^#?([a-zA-Z0-9\/_-]+))(?:\?([A-Za-z0-9\/&=_-]+))?/g),
groups = re.exec(hashTag),
r, params = {};
groups.shift();
// route
r = groups[0];
// params
if (groups[1] !== undefined) {
params = this.deserialize(groups[1]);
}
return params.length === 0 ? {'route': r} : $.extend({'route': r}, params);
},
hashHandler: function () {
var hashTag = window.location.href.split('#')[1],
hashInfo = this.parseHash(hashTag);
this.routes.call(hashInfo)
},
}
});
hashHandler: function () {
var hashTag = window.location.href.split('#')[1],
hashInfo = $.router.parseHash(hashTag);
$.router.routes.search(hashInfo)
},
}
});
$(window).bind('hashchange', $.router.hashchangeHandler);
$(window).bind('load', $.router.hashchangeHandler);
}(jQuery));
$(window).bind('hashchange', $.router.hashHandler);
$(window).bind('load', $.router.hashHandler);
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="static/css/bootstrap.min.css" rel="stylesheet"/>
<style type="text/css" media="screen">
[class*="span"] h3 { text-align: center; }
.dashboard{ text-align: center; }
<title></title>
<link href="static/css/bootstrap.min.css" rel="stylesheet"/>
<style type="text/css" media="screen">
[class*="span"] h3 { text-align: center; }
.dashboard{ text-align: center; }
.catalog-item{
display: inline-block;
padding: 20px 30px 20px 30px;
......@@ -34,40 +34,40 @@
color: white;
opacity: 1;
}
</style>
</style>
<script id="dashboard" type="text/html">
<div class="row-fluid">
<div class="span12">
<div id="carousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active" style="min-height: 200px; background-color: red">
image 1
<div class="carousel-caption">
<h4>Order online applications that are hosted in Vifib's distributed cloud.</h4>
</div>
</div>
<div class="item" style="min-height: 200px; background-color: green">
image 2
<div class="carousel-caption">
<h4>Bring your own servers to the clouds and extend Vifib's distributed cloud with your own machines.</h4>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span6 dashboard">
<h3>Get a Virtual Machine from Vifib for 1/month</h3>
<a class="btn btn-info" href="#/">Order a KVM now</a>
</div>
<div class="span6 dashboard">
<h3>Explore the world of Vifib provided software</h3>
<a class="btn btn-info" href="#/">Browse the Catalog</a>
</div>
</div>
</script>
<script id="dashboard" type="text/html">
<div class="row-fluid">
<div class="span12">
<div id="carousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active" style="min-height: 200px; background-color: red">
image 1
<div class="carousel-caption">
<h4>Order online applications that are hosted in Vifib's distributed cloud.</h4>
</div>
</div>
<div class="item" style="min-height: 200px; background-color: green">
image 2
<div class="carousel-caption">
<h4>Bring your own servers to the clouds and extend Vifib's distributed cloud with your own machines.</h4>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span6 dashboard">
<h3>Get a Virtual Machine from Vifib for 1/month</h3>
<a class="btn btn-info" href="#/">Order a KVM now</a>
</div>
<div class="span6 dashboard">
<h3>Explore the world of Vifib provided software</h3>
<a class="btn btn-info" href="#/">Browse the Catalog</a>
</div>
</div>
</script>
<script id="catalog.preview" type="text/html">
<h2>Brand new softwares</h2>
......@@ -100,40 +100,40 @@
</li>
</script>
<script id="server.list" type="text/html">
<article>
<table class="table table-condensed">
<caption><h2>Computers list</h2></caption>
<tr><th>Name</th><th>Reference</th><th>State</th></tr>
<tr><td>Couscous</td><td>Comp-1</td><td><span class="label label-success">Started</span></td></tr>
<tr><td>Merguez</td><td>Comp-3</td><td><span class="label label-success">Started</span></td></tr>
<tr><td>Plop</td><td>Comp-5</td><td><span class="label label-important">Stopped</span></td></tr>
</table>
</article>
</script>
<script id="instance.list" type="text/html">
<table class="table table-condensed" id="instance-table">
<caption><h2>Instances list</h2></caption>
</table>
</script>
<script id="server.list" type="text/html">
<article>
<table class="table table-condensed">
<caption><h2>Computers list</h2></caption>
<tr><th>Name</th><th>Reference</th><th>State</th></tr>
<tr><td>Couscous</td><td>Comp-1</td><td><span class="label label-success">Started</span></td></tr>
<tr><td>Merguez</td><td>Comp-3</td><td><span class="label label-success">Started</span></td></tr>
<tr><td>Plop</td><td>Comp-5</td><td><span class="label label-important">Stopped</span></td></tr>
</table>
</article>
</script>
<script id="instance.list" type="text/html">
<table class="table table-condensed" id="instance-table">
<caption><h2>Instances list</h2></caption>
</table>
</script>
<script id="instance.list.elem" type="text/html">
<td><a href="{{ url }}">{{ title }}</a></td><td>{{ status }}</td>
</script>
<script id="invoice.list" type="text/html">
<article>
<table class="table table-condensed">
<caption><h2>Invoices</h2></caption>
<tr><th>Number</th><th>Total price</th><th>Currency</th><th>Payment</th></tr>
<tr><td>43</td><td>1.0</td><td>Euro</td><td><span class="label label-warning">Waiting</span></td></th>
<tr><td>44</td><td>0.0</td><td>Euro</td><td><span class="label label-success">Payed</span></td></th>
<tr><td>45</td><td>1.0</td><td>Euro</td><td><span class="label label-success">Payed</span></td></th>
<tr><td>01</td><td></td><td>Euro</td><td><span class="label label-important">Ongoing</span></td></th>
</table>
</article>
</script>
<script id="instance.list.elem" type="text/html">
<td><a href="{{ url }}">{{ title }}</a></td><td>{{ status }}</td>
</script>
<script id="invoice.list" type="text/html">
<article>
<table class="table table-condensed">
<caption><h2>Invoices</h2></caption>
<tr><th>Number</th><th>Total price</th><th>Currency</th><th>Payment</th></tr>
<tr><td>43</td><td>1.0</td><td>Euro</td><td><span class="label label-warning">Waiting</span></td></th>
<tr><td>44</td><td>0.0</td><td>Euro</td><td><span class="label label-success">Payed</span></td></th>
<tr><td>45</td><td>1.0</td><td>Euro</td><td><span class="label label-success">Payed</span></td></th>
<tr><td>01</td><td></td><td>Euro</td><td><span class="label label-important">Ongoing</span></td></th>
</table>
</article>
</script>
<script id="form.bang.instance" type="text/html">
<form class="form-horizontal" id="form-bang">
......@@ -144,40 +144,40 @@
</form>
</script>
<script id="form.new.instance" type="text/html">
<article>
<form class="form-horizontal">
<fieldset>
<legend>Request a new instance</legend>
<div class="control-group">
<label class="control-label">Name</label>
<div class="controls">
<input type="text" class="input-large" required name="title"/>
</div>
</div>
<div class="control-group">
<script id="form.new.instance" type="text/html">
<article>
<form class="form-horizontal">
<fieldset>
<legend>Request a new instance</legend>
<div class="control-group">
<label class="control-label">Name</label>
<div class="controls">
<input type="text" class="input-large" required name="title"/>
</div>
</div>
<div class="control-group">
<label class="control-label">Software release</label>
<div class="controls">
<input type="text" class="input-xlarge" required name="software_release"/>
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary" name="submit">Request</button>
</div>
</fieldset>
</form>
</article>
</script>
<div class="controls">
<input type="text" class="input-xlarge" required name="software_release"/>
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary" name="submit">Request</button>
</div>
</fieldset>
</form>
</article>
</script>
<script id="auth" type="text/html">
<article>
<p>Authentification needed. Are you agree to be redirect to login ?</p>
<a href="{{ host }}?response_type=token&client_id={{ client_id }}&redirect_uri={{ redirect }}">Redirect</a>
</article>
</script>
<script id="auth" type="text/html">
<article>
<p>Authentification needed. Are you agree to be redirect to login ?</p>
<a href="{{ host }}?response_type=token&client_id={{ client_id }}&redirect_uri={{ redirect }}">Redirect</a>
</article>
</script>
<script id="instance" type="text/html">
{{! Service page template }}
<script id="instance" type="text/html">
{{! Service page template }}
<div class="subnav">
<ul class="nav nav-pills">
{{# actions }}
......@@ -185,7 +185,7 @@
{{/ actions}}
</ul>
</div>
<form class="form-horizontal" id="instance-form">
<form class="form-horizontal" id="instance-form">
<fieldset>
<legend>
{{ title }}
......@@ -216,31 +216,31 @@
</div>
</fieldset>
<table class="table">
<caption>Connection parameters</caption>
{{# parameter}}
<tr><td>{{parameter.0}}</td><td></td></tr>
{{/ parameter}}
</table>
<table class="table">
<caption>Connection parameters</caption>
{{# parameter}}
<tr><td>{{parameter.0}}</td><td></td></tr>
{{/ parameter}}
</table>
<fieldset>
<legend>
Parameter XML
<div class="pull-right">
<button type="submit" class="btn btn-primary">Save changes</button>
<button class="btn">Cancel</button>
</div>
Parameter XML
<div class="pull-right">
<button type="submit" class="btn btn-primary">Save changes</button>
<button class="btn">Cancel</button>
</div>
</legend>
<textarea name="xml" style="width: 98%; height: 110px;">
<textarea name="xml" style="width: 98%; height: 110px;">
<?xml version="1.0" encoding="utf-8"?>
<instance>
<parameter id="nbd_ip">2a01:e35:2e27:460:e2cb:4eff:fed9:48dc</parameter>
<parameter id="nbd_port">1024</parameter>
<parameter id="nbd_ip">2a01:e35:2e27:460:e2cb:4eff:fed9:48dc</parameter>
<parameter id="nbd_port">1024</parameter>
</instance>
</textarea>
</textarea>
</fieldset>
</form>
</script>
</form>
</script>
<script id="instance.stop_requested" type="text/html">
<div class="btn-group">
......@@ -262,87 +262,87 @@
<button class="btn btn-success disabled" disabled="disabled" id="startInstance">Started</button>
</div>
</script>
<script id="simple-form" type="text/html">
<form class="form-inline">
<fieldset>
<div class="input-append">
<input required class="span2" size="16" type="text"/>
<button class="btn" type="submit">Go !</button>
</div>
</fieldset>
</form>
</script>
<script id="simple-form" type="text/html">
<form class="form-inline">
<fieldset>
<div class="input-append">
<input required class="span2" size="16" type="text"/>
<button class="btn" type="submit">Go !</button>
</div>
</fieldset>
</form>
</script>
<script id="error" type="text/html">
<div class="alert alert-{{ state }}">
<a class="close" data-dismiss="alert" href="#">×</a>
<h4 class="alert-heading">{{ state }} - {{ date }}</h4>
<script id="error" type="text/html">
<div class="alert alert-{{ state }}">
<a class="close" data-dismiss="alert" href="#">×</a>
<h4 class="alert-heading">{{ state }} - {{ date }}</h4>
{{ message }}
</div>
</script>
</div>
</script>
</head>
<body>
<div id="loading" style="position: absolute; right: 20px; top: 20px;"></div>
<div class="navbar">
<div class="navbar-inner">
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--<a href="#" class="brand">Vifib</a>-->
<img src="static/img/vifib_logo.gray.png" style="max-height: 40px" />
</div>
<div class="span10">
<ul class="nav">
<li><a href="#/dashboard">Dashboard</a></li>
<li><a href="#/about">About</a></li>
<li><a href="#/contact">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div id="loading" style="position: absolute; right: 20px; top: 20px;"></div>
<div class="navbar">
<div class="navbar-inner">
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--<a href="#" class="brand">Vifib</a>-->
<img src="static/img/vifib_logo.gray.png" style="max-height: 40px" />
</div>
<div class="span10">
<ul class="nav">
<li><a href="#/dashboard">Dashboard</a></li>
<li><a href="#/about">About</a></li>
<li><a href="#/contact">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span3">
<div class="well" style="padding:0">
<ul class="nav nav-list">
<div class="container-fluid">
<div class="row-fluid">
<div class="span3">
<div class="well" style="padding:0">
<ul class="nav nav-list">
<li class="nav-header">Softwares</li>
<li><a href="#/catalog"><i class="icon-"></i>Browse catalog</a></li>
<li><a href="#/catalog/all"><i class="icon-"></i>Softwares availables</a></li>
<li class="nav-header">Servers</li>
<li><a href="#/computers"><i class="icon-list"></i>List all servers</a></li>
<li><a href="#/computer"><i class="icon-plus-sign"></i>Add new server</a></li>
<li class="nav-header">Services</li>
<li><a href="#/instances"><i class="icon-list"></i>List all instances</a></li>
<li><a href="#/instance"><i class="icon-plus-sign"></i>Add new instance</a></li>
<li class="nav-header">Account</li>
<li><a href="#/invoices"><i class="icon-inbox"></i>Invoices</a></li>
<li><a href="#/settings"><i class="icon-cog"></i>Settings</a></li>
</ul>
</div>
</div>
<section class="span9" id="main" style="min-height: 200px">
<!--Body content-->
</section>
</div>
</div>
<li><a href="#/catalog"><i class="icon-"></i>Browse catalog</a></li>
<li><a href="#/catalog/all"><i class="icon-"></i>Softwares availables</a></li>
<li class="nav-header">Servers</li>
<li><a href="#/computers"><i class="icon-list"></i>List all servers</a></li>
<li><a href="#/computer"><i class="icon-plus-sign"></i>Add new server</a></li>
<li class="nav-header">Services</li>
<li><a href="#/instances"><i class="icon-list"></i>List all instances</a></li>
<li><a href="#/instance"><i class="icon-plus-sign"></i>Add new instance</a></li>
<li class="nav-header">Account</li>
<li><a href="#/invoices"><i class="icon-inbox"></i>Invoices</a></li>
<li><a href="#/settings"><i class="icon-cog"></i>Settings</a></li>
</ul>
</div>
</div>
<section class="span9" id="main" style="min-height: 200px">
<!--Body content-->
</section>
</div>
</div>
<script type="text/javascript" src="static/js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="static/js/bootstrap-transition.js"></script>
<script type="text/javascript" src="static/js/bootstrap-alert.js"></script>
<script type="text/javascript" src="static/js/bootstrap-carousel.js"></script>
<script type="text/javascript" src="static/js/spin.js"></script>
<script type="text/javascript" src="static/js/jquery-spin.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/sinon-1.3.2.js"></script>
<script type="text/javascript" src="static/js/jquery.slapos.js"></script>
<!--<script type="text/javascript" src="static/js/fake.js"></script>-->
<script type="text/javascript" src="static/js/urlHandler.js"></script>
<script type="text/javascript" src="static/js/core.js"></script>
<script type="text/javascript" src="static/js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="static/js/bootstrap-transition.js"></script>
<script type="text/javascript" src="static/js/bootstrap-alert.js"></script>
<script type="text/javascript" src="static/js/bootstrap-carousel.js"></script>
<script type="text/javascript" src="static/js/spin.js"></script>
<script type="text/javascript" src="static/js/jquery-spin.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/sinon-1.3.2.js"></script>
<script type="text/javascript" src="static/js/jquery.slapos.js"></script>
<script type="text/javascript" src="static/js/jquery.urljs.js"></script>
<!--<script type="text/javascript" src="static/js/fake.js"></script>-->
<script type="text/javascript" src="static/js/core.js"></script>
</body>
</html>
......@@ -5,31 +5,7 @@
*/
(function ($) {
'use strict';
var routes = {
'/catalog' : 'showCatalog',
'/catalog/all' : 'showCatalogAll',
'/instance' : 'requestInstance',
'/instance/:url' : 'showInstance',
'/instance/:url/bang' : 'showBangInstance',
'/computers' : 'listComputers',
'/instances' : 'listInstances',
'/invoices' : 'listInvoices',
'/dashboard' : 'showDashboard'
},
router = function (e, d) {
var $this = $(this);
$.each(routes, function (pattern, callback) {
pattern = pattern.replace(/:\w+/g, '([^\/]+)');
var regex = new RegExp('^' + pattern + '$'),
result = regex.exec(d);
if (result) {
result.shift();
methods[callback].apply($this, result);
}
});
},
getDate = function () {
var getDate = function () {
var today = new Date();
return [today.getFullYear(), today.getMonth(), today.getDay()].join('/') +
' ' + [today.getHours(), today.getMinutes(), today.getSeconds()].join(':');
......@@ -83,23 +59,33 @@
methods = {
init: function () {
// Initialize slapos in this context
$(this).slapos({'host': 'http://10.8.2.34:12006/erp5/portal_vifib_rest_api_v1'});
var $this = $(this);
// Bind Loading content
$('#loading').ajaxStart(function () {
$(this).spin(spinOptions);
}).ajaxStop(function () {
$(this).spin(false);
});
// Bind to urlChange event
var routes = [];
routes[0] = [
['/catalog', methods['showCatalog']],
['/catalog/all', methods['showCatalogAll']],
['/instance', methods['requestInstance']],
['/instance/:url', methods['showInstance']],
['/instance/:url/bang', methods['showBangInstance']],
['/computers', methods['listComputers']],
['/instances', methods['listInstances']],
['/invoices', methods['listInvoices']],
['/dashboard', methods['showDashboard']]
];
return this.each(function () {
$.subscribe('urlChange', function (e, d) {
router.call($this, e, d);
});
$.subscribe('auth', function (e, d) {
$(this).vifib('authenticate', d);
// Initialize slapos in this context
$(this).slapos({'host': 'http://10.8.2.34:12006/erp5/portal_vifib_rest_api_v1'});
// Bind Loading content
$('#loading').ajaxStart(function () {
$(this).spin(spinOptions);
}).ajaxStop(function () {
$(this).spin(false);
});
for (var level = 0; level < routes.length; level += 1) {
for (var i = 0; i < routes[level].length; i += 1) {
var r = routes[level][i];
$.router.routes.add(r[0], level, r[1], $(this));
}
}
});
},
......
......@@ -61,5 +61,7 @@ $.redirectHandler = function(e, url){ window.location.hash = $.genHash(url); };
$.redirect = function(url){ $.publish('redirect', [url]); };
$.subscribe('redirect', $.redirectHandler)
console.log("plop")
$(window).bind('hashchange', $.hashHandler);
$(window).bind('load', $.hashHandler);
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