Commit 983984f7 authored by Thomas Lechauve's avatar Thomas Lechauve

Created new theme for bootstrap

parent 043a3d07
...@@ -2,20 +2,155 @@ ...@@ -2,20 +2,155 @@
<html> <html>
<head> <head>
<title></title> <title></title>
<link href="static/css/bootstrap.min.css" /> <link href="static/less/bootstrap.edited.css" rel="stylesheet"/>
<!--<link href="static/css/bootstrap.min.css" rel="stylesheet"/>-->
<script id="service" type="text/html">
{{! Service page template }}
<article>
<form class="form-horizontal">
<fieldset>
<legend>
{{ instance_id }}
<div class="pull-right">
<div class="btn">Bang</div>
<div class="btn">Destroy</div>
<div class="btn">Certificates</div>
</div>
</legend>
<div class="control-group">
<label class="control-label">Reference</label>
<div class="controls">
<span class="uneditable-input">{{ instance_id }}</span>
</div>
</div>
<div class="control-group">
<label class="control-label">Software release</label>
<div class="controls">
<span class="uneditable-input">{{ software_release }}</span>
</div>
</div>
<div class="control-group">
<label class="control-label">Software type</label>
<div class="controls">
<span class="uneditable-input">{{ software_type }}</span>
</div>
</div>
<div class="control-group">
<label class="control-label">Status</label>
<div class="controls">
<div class="btn-group">
<button class="btn">Stop</button>
<button class="btn btn-success disabled">Started</button>
</div>
</div>
</div>
</fieldset>
</form>
<table class="table">
<caption>Connection parameters</caption>
{{# connection}}
<tr><td>key</td><td>{{ key }}</td></tr>
{{/ connection}}
</table>
<form>
<fieldset>
<legend>
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;">
<?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>
</instance>
</textarea>
</fieldset>
</form>
</article>
</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="service-error" type="text/html">
<div class="alert alert-error" style="text-align: center;">
<h4>Service : {{ id }} not found !</h4>
</div>
</script>
</head> </head>
<body> <body>
<header><h1>Vifib</h1></header>
<nav> <div class="navbar">
<ul> <div class="navbar-inner">
<li><a href="#form">Form</a></li> <div class="container-fluid">
<li><a href="#disp">List</a></li> <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</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul> </ul>
</nav> </div>
<aside></aside> </div>
<section></section> </div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<div class="well">
<ul class="nav nav-list">
<li class="nav-header">Servers</li>
<li><a href="#"><i class="icon-list"></i>List all servers</a></li>
<li><a href="#"><i class="icon-plus-sign"></i>Add new server</a></li>
<li><a href="#"><i class="icon-star"></i>Favorites</a></li>
<li class="nav-header">Services</li>
<li><a href="#"><i class="icon-list"></i>List all services</a></li>
<li><a href="#"><i class="icon-plus-sign"></i>Add new service</a></li>
<li><a href="#"><i class="icon-star"></i>Favorites</a></li>
<ul style="list-style: none">
<li><a href="#service/200"><i class="icon-"></i>inst-0</a></li>
<li><a href="#service/201"><i class="icon-"></i>inst-1</a></li>
</ul>
<li class="nav-header">Account</li>
<li><a href="#"><i class="icon-inbox"></i>Invoices</a></li>
<li><a href="#"><i class="icon-cog"></i>Settings</a></li>
<li class="nav-header">Quick search</li>
<li><form class="form-search">
<i class="icon-search"></i>
<input type="text" class="input-mini search-query">
</form></li>
</ul>
</div>
</div>
<section class="span10" id="main">
<!--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/jquery-1.7.2.js"></script>
<script type="text/javascript" src="static/js/mustache.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>
<script type="text/javascript" src="static/js/sinon-1.3.2.js"></script> <script type="text/javascript" src="static/js/sinon-1.3.2.js"></script>
<script type="text/javascript" src="static/js/slapOs.js"></script> <script type="text/javascript" src="static/js/slapOs.js"></script>
......
lessc: ENOENT, No such file or directory '/media/Data/dev/Nexedi/slapos.core/jQuery/vifib/static/bootstrap.less'
...@@ -32,9 +32,9 @@ var inst0 = ...@@ -32,9 +32,9 @@ var inst0 =
software_release: "http://example.com/example.cfg", software_release: "http://example.com/example.cfg",
software_type: "type_provided_by_the_software", software_type: "type_provided_by_the_software",
slave: "False", slave: "False",
connection: { connection: [{
custom_connection_parameter_1: "foo", custom_connection_parameter_1: "foo",
custom_connection_parameter_2: "bar"}, custom_connection_parameter_2: "bar"}],
parameter: { parameter: {
Custom1: "one string", Custom1: "one string",
Custom2: "one float", Custom2: "one float",
...@@ -53,9 +53,9 @@ var inst1 = ...@@ -53,9 +53,9 @@ var inst1 =
software_release: "http://example.com/example.cfg", software_release: "http://example.com/example.cfg",
software_type: "type_provided_by_the_software", software_type: "type_provided_by_the_software",
slave: "False", slave: "False",
connection: { connection: [{
custom_connection_parameter_1: "foo", key: "foo",
custom_connection_parameter_2: "bar"}, key: "bar"}],
parameter: { parameter: {
Custom1: "one string", Custom1: "one string",
Custom2: "one float", Custom2: "one float",
...@@ -71,7 +71,8 @@ var inst1 = ...@@ -71,7 +71,8 @@ var inst1 =
var fakeserver = sinon.fakeServer.create(); var fakeserver = sinon.fakeServer.create();
// Get instance // Get instance
fakeserver.respondWith("GET", "/instance/200",[200, {"Content-Type":"application/json; charset=utf-8"}, JSON.stringify(inst1)]); fakeserver.respondWith("GET", "/instance/200",[200, {"Content-Type":"application/json; charset=utf-8"}, JSON.stringify(inst0)]);
fakeserver.respondWith("GET", "/instance/201",[200, {"Content-Type":"application/json; charset=utf-8"}, JSON.stringify(inst1)]);
// Get instance FAIL // Get instance FAIL
fakeserver.respondWith("GET", "/instance/408",[408, {"Content-Type":"application/json; charset=utf-8"}, "NOT FOUND"]); fakeserver.respondWith("GET", "/instance/408",[408, {"Content-Type":"application/json; charset=utf-8"}, "NOT FOUND"]);
......
...@@ -14,30 +14,29 @@ ...@@ -14,30 +14,29 @@
var self = $(this); var self = $(this);
$.subscribe("urlChange", function(e, d){ $.subscribe("urlChange", function(e, d){
if(d.route == "form") { self.form('displayForm'); } if(d.route == "form") { self.form('displayForm'); }
else if(d.route == "disp") { self.form('displayData'); } else if(d.route == "service" && d.id) { self.form('displayData', d.id); }
}); });
}); });
}, },
displayData: function(){ displayData: function(id){
$(this).html("<p>Ajax loading ...</p>") $(this).html("<p>Ajax loading...</p>")
.slapos('getInstance', '200', function(data){ .slapos('getInstance', id, function(data){
$(this).html(JSON.stringify(data)); $(this).form('render', 'service', data);
}); }, {408: function(){ $(this).form('render', 'service-error', {id:id})}});
}, },
displayForm: function() { displayForm: function() {
var form = '' + $(this).form('render', 'simple-form');
'<form>' +
'<input type="text"/>' +
'<input type="submit" value="Add"/>' +
'</form>';
$(this).html(form);
$(this).find("form").submit(function(){ $(this).find("form").submit(function(){
$.redirect({route:'disp'}); $.redirect({route:'disp', id:$(this).find("input:text").val()});
return false; return false;
}); });
},
render: function(template, data){
$(this).html(ich[template](data, true));
} }
}; };
...@@ -52,4 +51,4 @@ ...@@ -52,4 +51,4 @@
}; };
})(jQuery); })(jQuery);
$("section").form(); $("#main").form();
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