server/src/main/webapp/WEB-INF/templates/fragment/spaceForm.html
changeset 127 906fed13c1e1
parent 123 daa99448319d
child 128 93a1fbe6a848
--- a/server/src/main/webapp/WEB-INF/templates/fragment/spaceForm.html	Tue Mar 26 08:27:58 2013 +0100
+++ b/server/src/main/webapp/WEB-INF/templates/fragment/spaceForm.html	Tue Apr 02 01:56:11 2013 +0200
@@ -2,37 +2,96 @@
 <html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:th="http://www.thymeleaf.org">
 <head>
-<meta charset="utf-8">
+<meta charset="utf-8"/>
 <title>Space form</title>
 </head>
 <body>
-<div id="Fragment" th:fragment="spaceFormFragment" >
-  <form action="#" th:object="${space}" th:action="@{/}" method="post">
-       <fieldset>
-         <input type="hidden" th:field="*{id}" />
-         <div>
-           <label for="title" th:text="#{renkan.form.title}">Title: </label> 
-           <input type="text" th:field="*{title}" /> 
-         </div> 
-         <div>
-           <label for="uri" th:text="#{renkan.form.uri}">Uri: </label> 
-           <input type="text" th:field="*{uri}" /> 
-         </div> 
-         <div>
-           <label for="description" th:text="#{renkan.form.description}">Description: </label> 
-           <textarea th:field="*{description}"></textarea> 
-         </div> 
-         <div>
-           <label for="color" th:text="#{renkan.form.color}">Color: </label> 
-           <input type="text" th:field="*{color}" /> 
-         </div>
-         <div>
-           <label for="binConfig" th:text="#{renkan.form.space.bin_config}">Bin config: </label> 
-           <textarea th:field="*{binConfig}"></textarea> 
-         </div> 
+<div id="spaceForm" th:fragment="spaceFormFragment" >
+  <script type="text/javascript" th:inline="javascript">
+    //<![CDATA[
+               
+        function showformErrors(errors) {
+        	$(".form-error").remove();
+        	
+        	$.each(errors,function(k,v){
+        		$("#"+k).after('<div class="form-error">'+v+'</div>');
+        	});
+        	$(".form-error").effect("highlight", {}, 1500);
+        }
+              
+        function spaceFormSubmit() {
+        	
+        	var errors = {};
+        	var valid = true;
+        	
+        	if(!$('#title').val()) {
+        		errors['title'] = /*[[#{renkan.error.title.empty}]]*/"renkan.error.title.empty";
+        		valid = false;
+        	}
+            
+            try
+            {
+               var json = JSON.parse($('#binConfig').val());
+            }
+            catch(e)
+            {
+               console.log(e);
+               errors['binConfigDiv'] = /*[[#{renkan.error.bin_config.json}]]*/"renkan.error.bin_config.json";
+               valid = false;
+            }
+            
+            showformErrors(errors);
+                        
+            return valid;
+        }
+        
+        $(function(){
+            var editor = ace.edit("binConfigDiv");
+            editor.setTheme("ace/theme/xcode");
+            editor.getSession().setMode("ace/mode/json");
+            editor.getSession().on('change', function(e) {
+            	$('#binConfig').val(editor.getValue());
+            });
+            
+            $('#color').spectrum({
+            	showInput: true,
+            	showAlpha: true,
+            	showPalette: true,
+            	showInitial: true
+            });
+        });
+    //]]>
+  </script>
+  <form action="#" th:object="${space}" th:action="@{/admin/spaces/save}" method="post" onsubmit="return spaceFormSubmit()">
+     <fieldset class="form-fields">
+       <input type="hidden" th:field="*{id}" th:if="*{id}" />
+       <input type="hidden" th:field="*{binConfig}"/>
+       <div>
+         <label for="title" th:text="#{renkanAdmin.form.title}">Title: </label> 
+         <input type="text" th:field="*{title}" />
+         <div th:if="${#fields.hasErrors('title')}" th:errors="*{title}" class="form-error"></div>
+       </div> 
+       <div>
+         <label for="uri" th:text="#{renkanAdmin.form.uri}">Uri: </label> 
+         <input type="text" th:field="*{uri}" /> 
+       </div> 
+       <div>
+         <label for="description" th:text="#{renkanAdmin.form.description}">Description: </label> 
+         <textarea th:field="*{description}"></textarea> 
+       </div> 
+       <div>
+         <label for="color" th:text="#{renkanAdmin.form.color}">Color: </label> 
+         <input type="text" th:field="*{color}" /> 
+       </div>
+       <div>
+         <label for="binConfigDiv" th:text="#{renkanAdmin.form.space.bin_config}">Bin config: </label> 
+         <div id="binConfigDiv" th:text="*{binConfig}"></div>
+         <div th:if="${#fields.hasErrors('binConfig')}" th:errors="*{binConfig}" class="form-error"></div>
+       </div> 
 
        <div class="submit"> 
-         <button type="submit" name="save" th:text="#{renkan.form.space.submit}">Save</button> 
+         <button type="submit" name="save" th:text="#{renkanAdmin.form.space.submit}">Save</button>
+         <!--button type="button" name="cancel" th:text="#{renkanAdmin.form.space.cancel}" th:onclick="location">Cancel</button-->
        </div> 
       
      </fieldset>