First attempt of a prettier create form

lodel/plugins/webui/templates/admin/editable_component.html

@@ -13,8 +13,47 @@
 		{% elif field.base_type == 'text' %}
 			<textarea class="form-control" name="field_input_{{fieldname}}">{{value}}</textarea>
 		{% elif field.base_type == 'datetime' %}
-			<input class="form-control" type="date" value="{{value}}" name="field_input_{{fieldname}}">
+			<!-- Handle date fields - Date format for datepicker is YY/MM/DD - TODO set this format with field.datetime_format (default is '%Y-%m-%d') -->
+		 	<input class="form-control" type="text" id="field_input_{{fieldname}}" name="field_input_{{fieldname}}" />
+		 	 <script type="text/javascript">
+		        $(document).ready(function() {
+				    $('#field_input_{{fieldname}}')
+				        .datepicker({
+				            autoclose: true,
+				            format: 'yyyy/mm/dd'
+				        });
+		        });
+        	</script>
     {% elif field.base_type == 'ref' %}
+        {% set l_classes = field.allowed_classes %}
+    	{% set ref_objects = dict() %}
+    	{% for l_class in l_classes %}
+    		{% set _dummy = ref_objects.update(l_class.get(None)) %} 
+    		{% if 'fullname' in l_class.fieldnames() %}
+    			{% set displayfield = 'fullname' %}
+    		{% elif 'name' in l_class.fieldnames() %} 
+    			{% set displayfield = 'name' %}
+    		{% elif 'title' in l_class.fieldnames() %}
+    			{% set displayfield = 'title' %}
+    		{% else %}
+    			{% set displayfield = l_class.uid_fieldname() %}
+    		{% endif %}
+    		{% set uidfield = l_class.uid_fieldname() %}
+    	{% endfor %}
+    	<meta id="ref_objects" data-name="{{ ref_objects }}" >
+    	{% if (field.__class__ == List) %}
+    		<input id="{{fieldname}}" class="form-control" name="field_input_{{fieldname}}[]" type="text" value="{{sval}}" >
+    		<script type="text/javascript">
+    		$(function() {
+		    $('#{{fieldname}}').magicSuggest({
+		        data: $('#ref_objects').data(),
+		        valueField: {{ uidfield }},
+		        displayField: {{ displayfield }}
+		    });
+		    </script>
+		
+		});
+    	{% endif %}
         {% if value is iterable %}
             {% set sval=value|join(',') %}
         {% else %}

lodel/plugins/webui/templates/base_backend.html

@@ -5,7 +5,12 @@
     <title>{{ settings.sitename }} Admin{% block title %}{% endblock %}</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
     <link href="{{ static_url }}/css/template.css" rel="stylesheet">
+    <link rel="stylesheet" href="{{ static_url }}/css/bootstrap-datepicker/css/bootstrap-datepicker.css" />
+    <link rel="stylesheet" href="{{ static_url }}/css/bootstrap-datepicker/css/bootstrap-datepicker3.css" />
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+    <link href="{{ static_url }}/css/magicsuggest/magicsuggest-min.css" rel="stylesheet">
+    <!-- jQuery (necessary for Bootstrap's JavaScript plugins), for now needs to be in Head part-->
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
     {% block style %}
     {% endblock %}
     {% block scripts %}{% endblock %}
@@ -39,9 +44,12 @@
     </nav>
     {% block body %}{% endblock %}
     <script type="text/javascript">{% block javascript %}{% endblock %}</script>
-    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
+
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
     <!-- Include all compiled plugins (below), or include individual files as needed -->
-   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
+   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
-</body>
+   <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/collapse.js"></script>
+	<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/transition.js"></script>
+	<script type="text/javascript" src="{{ static_url }}/css/moment/moment.js"></script>
+	<script type="text/javascript" src="{{ static_url }}/css/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
+	<script src="{{ static_url }}/css/magicsuggest/magicsuggest-min.js"></script></body>"
 </html>