WebUi improvements with bootstrap

plugins/webui/interface/controllers/__init__.py

@@ -2,4 +2,6 @@ from .base import *
 from .admin import *
 from .document import *
 from .listing import *
+from .users import *
+
 

plugins/webui/interface/controllers/admin.py

@@ -6,7 +6,6 @@ from lodel import logger
 
 import leapi_dyncode as dyncode
 import warnings
-from lodel import logger
 
 def index_admin(request):
     return get_response('admin/admin.html')
@@ -14,7 +13,6 @@ def index_admin(request):
 def admin_update(request):
     msg=''
     if request.method == 'POST':
-
         error = None
         datas = list()
         classname = request.form['classname']

plugins/webui/interface/controllers/users.py

@@ -0,0 +1,13 @@
+# -*- coding: utf-8 -*-
+from .base import get_response
+from ...exceptions import *
+from lodel import logger
+import leapi_dyncode as dyncode
+
+def signin(request):
+    msg=''
+    if request.method == 'POST':
+        print('Welcome')
+    else:
+        return get_response('users/signin.html')
+

plugins/webui/interface/urls.py

@@ -14,5 +14,6 @@ urls = (
     (r'^/list_classes', list_classes),
     (r'^/list_classes?$', list_classes),
     (r'^/show_object?$', show_object),
-    (r'^/show_class?$', show_class)
+    (r'^/show_class?$', show_class),
+    (r'^/signin', signin)
 )

plugins/webui/templates/admin/admin_create.html

@@ -3,20 +3,27 @@
 
 {% block title %}- Creating a new {{target.__name__}}{% endblock %}
 {% block body %}
+<ol class="breadcrumb">
+  <li><a href="/lodel_i/admin">Home</a></li>
+  <li><a href="/lodel_i/admin/object_create">Creation</a></li>
+  <li class="active">Edit</li>
+</ol>
 {% if msg is not none %}
 {% block msg %} <p style="color:red; font-size:20pt; font-weight:bold">{{ msg }}</p> {% endblock %}
 {% endif %}
-<h1>Creating a new {{target.__name__}}</h1>
- <form action="" method ="post">
+<h1 style="padding-bottom:30px;">Creating a new {{target.__name__}}</h1>
+ <form class="form-horizontal" action="" method ="post">
      <input type="hidden" name="classname" id="classname" value="{{target.__name__}}" />
 	{% for fieldname, field in target.fields().items() %}
-     <div style="padding-bottom:15px;"> {{edit.input(fieldname, field) }}</div>
+     <div class="form-group">
+     <div class="form-group" style="padding-bottom:15px;"> {{edit.input(fieldname, field) }}</div>
+     </div>
 	{% endfor %}
      <p>&nbsp;</p>
- <input type="submit" value="Save">
+     <button type="submit" class="btn btn-default">Save</button>
+     <a class="btn btn-primary" href="object_create">Return</a>
  </form>
 <div>
-    <a href="object_create">Return</a>
 </div>
 {% endblock %}
 

plugins/webui/templates/admin/admin_edit.html

@@ -3,21 +3,30 @@
 {% set objects = target.get(('lodel_id = %s') % (lodel_id)) %}
 {% set objects = target.get(('%s = %s') % (uidfield, lodel_id)) %}
 {% set obj = objects.pop() %}
-{% block title %}- Edit Object{% endblock %}
+{% block title %}Edit Object{% endblock %}
 {% block body %}
+<ol class="breadcrumb">
+  <li><a href="/lodel_i/admin">Home</a></li>
+  <li><a href="/lodel_i/admin/classes_admin">Edition</a></li>
+  <li><a href="/lodel_i/admin/class_admin?classname={{ target.__name__ }}">{{ target.__name__ }}</a></li>
+  <li class="active">Edit</li>
+</ol>
 {% if msg is not none %}
 {% block msg %} <p style="color:red; font-size:20pt; font-weight:bold">{{ msg }}</p> {% endblock %}
 {% endif %}
-<h1>Lodel 2 - Edit {{ target.__name__ }} with uid {{ lodel_id }} </h1>
-    <form action="" method ="post">
+<h1 style="padding-bottom:30px;">Lodel 2 - Edit {{ target.__name__ }} with uid {{ lodel_id }} </h1>
+    <form class="form-horizontal" action="" method ="post">
     <input type="hidden" name="uid" value="{{ lodel_id}}" />
     <input type="hidden" name="classname" value={{ target.__name__ }} />
     {% for fieldname, fieldvalue in obj.fields().items() %}
-       <div style="padding-bottom:15px;"> {{edit.input(fieldname, fieldvalue, obj.data(fieldname)) }} </div>
+        <div class="form-group">
+        <div style="padding-bottom:15px;"> {{edit.input(fieldname, fieldvalue, obj.data(fieldname)) }} </div>
+        </div>
     {% endfor %}
-     <input type="submit" value="Save">
+     <button type="submit" class="btn btn-primary">Save</button>
+     <a class="btn btn-default" href="classes_admin">Return</a>
     </form>
 <div>
-    <a href="classes_admin">Return</a>
+    
 </div>
 {% endblock %}

plugins/webui/templates/admin/editable_component.html

@@ -1,9 +1,11 @@
 {% macro input(fieldname, field, value='') -%}
-	<label for="field_input_{{fieldname}}">{{fieldname}}</label>
+	<label for="field_input_{{fieldname}}" class="col-sm-2 control-label">{{fieldname}}</label>
+    <div class="col-xs-6">
 	{% if field.base_type == 'bool' %}
-		<input id="field_input_{{fieldname}}" name="field_input_{{fieldname}}" type="checkbox" checked="{% if value %}checked{% endif %}" >
+    
+		<input id="field_input_{{fieldname}}" class="form-control" name="field_input_{{fieldname}}" type="checkbox" checked="{% if value %}checked{% endif %}" >
 	{% elif field.base_type == 'char' or field.base_type == 'int' %}
-		<input id="{{fieldname}}" name="field_input_{{fieldname}}" type="text" value="{{value}}" >
+		<input id="{{fieldname}}" class="form-control" name="field_input_{{fieldname}}" type="text" value="{{value}}" >
     {% elif field.base_type == 'ref' %}
         {% if value is iterable %}
             {% set sval=value|join(',') %}
@@ -11,14 +13,15 @@
             {% set sval = value %}
         {% endif %}
         {% if field.directly_editable %}
-            <input id="{{fieldname}}" name="field_input_{{fieldname}}" type="text" value="{{sval}}" >
+            <input id="{{fieldname}}" class="form-control" name="field_input_{{fieldname}}" type="text" value="{{sval}}" >
             {% set l_classe = field.linked_classes %}
             <p> Please enter uids to instances of {{ l_classe.__name__ }} separated by commas </p>
         {% else %}
-            <input id="{{fieldname}}" name="field_input_{{fieldname}}" type="text" value="{{sval}}" readonly >
+            <input id="{{fieldname}}" class="form-control" name="field_input_{{fieldname}}" type="text" value="{{sval}}" readonly >
             <p> If you want to update this field, please do it in child objects</p>
         {% endif %}
 	{% else %}
 		Unsupported base type "{{field.base_type}}" <br>
 	{% endif %}
+</div>
 {%- endmacro %}

plugins/webui/templates/admin/list_classes_admin.html

@@ -1,7 +1,12 @@
-{% extends "base.html" %}
+{% extends "base_backend.html" %}
 {% block title %}Lodel 2 - Admin - List of Classes{% endblock %}
-{% block content %} 
-<h1>Lodel 2 - Admin - List of Classes</h1>
+{% block body %} 
+<ol class="breadcrumb">
+  <li><a href="/lodel_i/admin">Home</a></li>
+  <li class="active">Edit</li>
+</ol>
+<h1>Edition</h1>
+<h2>Select a class</h2>
 <ul>
 {% for classe in my_classes %}
     {% set abst = '' %}

plugins/webui/templates/admin/list_classes_create.html

@@ -1,7 +1,12 @@
-{% extends "base.html" %}
+{% extends "base_backend.html" %}
 {% block title %}Lodel 2 - Admin - List of Classes{% endblock %}
-{% block content %} 
-<h1>Lodel 2 - Admin - Choose a class for create an instance</h1>
+{% block body %}
+<ol class="breadcrumb">
+  <li><a href="/lodel_i/admin">Home</a></li>
+  <li class="active">Edit</li>
+</ol>
+<h1>Creation</h1>
+<h2>Choose a type to create an instance</h1>
 <ul>
 {% for classe in my_classes %}
     {% set abst = '' %}

plugins/webui/templates/admin/show_class_admin.html

@@ -1,7 +1,12 @@
-{% extends "base.html" %}
+{% extends "base_backend.html" %}
 {% block title %}Lodel 2 - Admin - Class {{ target.__name__ }} {% endblock %}
-{% block content %} 
-<h1>Lodel 2 - Admin - Class {{target.__name__  }} </h1>
+{% block body %} 
+<ol class="breadcrumb">
+  <li><a href="/lodel_i/admin">Home</a></li>
+  <li><a href="/lodel_i/admin/classes_admin">Edition</a></li>
+  <li class="active">{{target.__name__  }}</li>
+</ol>
+<h1>Edition - {{target.__name__  }} </h1>
 
  {% if not target.is_abstract() %}
     {% set objects = target.get(None) %}

plugins/webui/templates/base.html

@@ -28,12 +28,14 @@
         </div>
         <div id="navbar" class="navbar-collapse collapse">
           <ul class="nav navbar-nav">
-            <li class="active"><a href="lodel_i/">Home</a></li>
+            <li class="active"><a href="/lodel_i/">Home</a></li>
             <li><a href="list_classes">All types</a></li>
           </ul>
           <ul class="nav navbar-nav navbar-right">
-            <li><a href="admin">Back-end</a></li>
+            <li id="backend-nav"><a href="admin" class="btn btn-link disabled">Back-end</a></li>
+            <li id="backend-nav"><a href="admin" class="btn btn-link">Back-end</a></li>
               <li id="signin-nav"><a href="signin">Sign In</a></li>
+              <li id="signout-nav" style="display: none;"><a href="signout">Logout</a>
           </ul>
         </div><!--/.nav-collapse -->
       </div>

plugins/webui/templates/base_backend.html

@@ -25,9 +25,9 @@
         </div>
         <div id="navbar" class="navbar-collapse collapse">
           <ul class="nav navbar-nav">
-            <li class="active"><a href="admin">Home</a></li>
-            <li><a href="admin/object_create">Create</a></li>
-            <li><a href="admin/classes_admin">Edit</a></li>
+            <li class="active"><a href="/lodel_i/admin">Home</a></li>
+            <li><a href="/lodel_i/admin/object_create">Create</a></li>
+            <li><a href="/lodel_i/admin/classes_admin">Edit</a></li>
           </ul>
           <ul class="nav navbar-nav navbar-right">
             <li><a href="/lodel_i/">Front-End</a></li>

plugins/webui/templates/css/bootstrap-3.3.7/docs/examples/signin/signin.css

@@ -0,0 +1,40 @@
+body {
+  padding-top: 40px;
+  padding-bottom: 40px;
+  background-color: #eee;
+}
+
+.form-signin {
+  max-width: 330px;
+  padding: 15px;
+  margin: 0 auto;
+}
+.form-signin .form-signin-heading,
+.form-signin .checkbox {
+  margin-bottom: 10px;
+}
+.form-signin .checkbox {
+  font-weight: normal;
+}
+.form-signin .form-control {
+  position: relative;
+  height: auto;
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
+  padding: 10px;
+  font-size: 16px;
+}
+.form-signin .form-control:focus {
+  z-index: 2;
+}
+.form-signin input[type="email"] {
+  margin-bottom: -1px;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.form-signin input[type="password"] {
+  margin-bottom: 10px;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}

plugins/webui/templates/css/template.css

@@ -0,0 +1,6 @@
+body {
+  min-height: 2000px;
+  padding-top: 70px;
+  padding-left: 70px;
+} 
+

plugins/webui/templates/listing/list_classes.html

@@ -1,11 +1,11 @@
 {% extends "base.html" %}
 {% block title %}Lodel 2 - List of Classes{% endblock %}
 {% block content %} 
-<h1>Lodel 2 - List of Classes</h1>
+<h1>All types</h1>
 <ul>
 {% for classe in my_classes %}
     {% if classe.is_abstract() and allclasses == 1 %}
-        {% set abst = ' - Abstract class ' %}
+        {% set abst = ' - Abstract type ' %}
         <li> <a href="show_class?classname={{ classe.__name__ }}" target="_blank">{{ classe.__name__ }} </a>{{ abst }}</li>
     {% elif not classe.is_abstract() %}
         {% set abst = ' - ' ~ classe.get(None)|length %}

plugins/webui/templates/listing/show_class.html

@@ -1,10 +1,15 @@
 {% extends "base.html" %}
 {% block title %}Lodel 2 - Class {{ classname }} {% endblock %}
 {% block content %} 
-<h1>Lodel 2 - Class {{ classname }} </h1>
+<ol class="breadcrumb">
+  <li><a href="/lodel_i/">Home</a></li>
+  <li><a href="/lodel_i/list_classes">Types</a></li>
+  <li class="active">{{ classname }}</li>
+</ol>
+<h1>Type {{ classname }} </h1>
  {% set my_class  = leapi.name2class(classname) %}
  {% if my_class.child_classes()|length >0 %}
-     <h2> Childs classes</h2>
+     <h2> Childs types</h2>
      <ul>
      {% for child in my_class.child_classes() %}
          {% if child.is_abstract() %}
@@ -17,6 +22,7 @@
      </ul>
   {% endif %}
  {% if not my_class.is_abstract() %}
+<h2>Instances</h2>
     {% set uid_f = my_class.uid_fieldname() %}
     {% set objects = my_class.get(None) %}
     <ul>

plugins/webui/templates/listing/show_object.html

@@ -7,9 +7,15 @@
 {% set classname = obj.data('classname') %}
 {% set my_class = my_class.name2class(classname) %}
 {% endif %}
-{% block title %}Lodel 2 - Object {{ lodel_id }} {% endblock %}
+{% block title %}Object {{ lodel_id }} {% endblock %}
 {% import "components/components.html" as components %}
 {% block content %}
+<ol class="breadcrumb">
+  <li><a href="/lodel_i/">Home</a></li>
+  <li><a href="/lodel_i/list_classes">Types</a></li>
+  <li><a href="/lodel_i/show_class?classname={{ classname }}">{{ classname }}</a></li>
+  <li class="active">{{ lodel_id }}</li>
+</ol>
 <h1>Lodel 2 - {{ classname }} with uid {{ lodel_id }}</h1>
     
 <ul>

plugins/webui/templates/users/signin.html

@@ -0,0 +1,40 @@
+{% extends "base.html" %}
+{% block title %}Lodel 2 - Sign In{% endblock %}
+<!-- Custom styles for this template -->
+{% block style %}
+    <link href="http://127.0.0.1/css/signin.css" rel="stylesheet">
+{% endblock %}
+{% block content %} 
+<div class="container">
+    <h1>Lodel2 - Sign In</h1>
+<form class="form-horizontal">
+  <div class="form-group">
+    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
+    <div class="col-xs-4">
+      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
+    </div>
+  </div>
+  <div class="form-group">
+    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
+    <div class="col-xs-4">
+      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
+    </div>
+  </div>
+  <div class="form-group">
+    <div class="col-sm-offset-2 col-sm-10">
+      <div class="checkbox">
+        <label>
+          <input type="checkbox"> Remember me
+        </label>
+      </div>
+    </div>
+  </div>
+  <div class="form-group">
+    <div class="col-sm-offset-2 col-sm-10">
+      <button type="submit" class="btn btn-default">Sign in</button>
+    </div>
+  </div>
+</form>
+
+    </div> <!-- /container -->
+{% endblock %}