Update Webrunner templates and styles

slapos/runner/static/css/styles.css

@@ -6,12 +6,12 @@ padding: 0px;
 }
 
 a{
-	color: #4DA0C6;
+    text-decoration: none;
+    color: #19485C;
 }
 
-a:hover {
-	text-decoration: none;
-	color: #000;
+a:hover {	
+    color: #4DA0C6;
 }
 
 table {
@@ -241,8 +241,6 @@ body {
     font-weight: bold;
     border:1px solid #000;
     margin-top:10px;
-    -webkit-border-radius: 3px;
-    -moz-border-radius: 3px;
 }
 .button:hover {
 	background-position: 0 center;
@@ -426,11 +424,11 @@ body {
 }
 
 #contentInfo{
-    width: 752px;
+    width: 756px;
     border: solid 1px #678dad;
     background: #fff;
     overflow: auto;
-    padding: 5px;
+    padding: 3px;
 }
 
 #contentInfo p{
@@ -472,6 +470,16 @@ body {
     cursor:default;
 }
 
+#contentInfo h2{
+    background: #e4e4e4;
+    width: 100%;
+    height: 25px;
+    padding-top:2px;
+    text-indent: 5px;
+    color: #737373;
+    text-shadow: 0px 1px #FFF;
+}
+
 #check{
     margin-right:5px;
     margin-top:2px;
@@ -496,7 +504,7 @@ body {
     height: 1px;
     width: 734px;
     margin: 10px;
-    margin-top: 15px;
+    margin-top: 20px;
 }
 
 select {

slapos/runner/static/scripts/inspectSoftware.js

+$(document).ready( function() {
+	var send = false;
+	var runnerDir = $("input#runnerdir").val();
+	var ajaxRun;
+	fillContent();
+	$("#softwarelist").change(function(){
+		$("#info").empty();
+		$("#info").append("Please select your file or folder into the box...");
+		fillContent();
+	});
+	
+	function selectFile(file){
+		var relativeFile = file.replace(runnerDir + "/" + $("#softwarelist").val(), "");
+		$("#info").empty();
+		$("#info").append("Selection: " + relativeFile);
+		return;
+	}
+	
+	function fillContent(selectedElt){
+		var folder = $("#softwarelist").val();
+		var elt = $("option:selected", $("#softwarelist"));
+		$('#fileTree').fileTree({ root: runnerDir + "/" + folder, script: $SCRIPT_ROOT + '/readFolder', 
+			folderEvent: 'click', expandSpeed: 750, collapseSpeed: 750, multiFolder: false, selectFolder: true }, function(file) { 
+			selectFile(file);
+		});
+		$("#softcontent").empty();		
+		$("#softcontent").append("File content: " + elt.attr('title'));
+	}
+	
+	$("#open").click(function(){
+		var elt = $("option:selected", $("#softwarelist"));
+		$.ajax({
+			type: "POST",
+			url: $SCRIPT_ROOT + '/setCurentProject',
+			data: "path=" + elt.attr('rel'),
+			success: function(data){
+				if(data.code == 1){
+					location.href = $SCRIPT_ROOT + '/editSoftwareProfile'
+				}
+				else{
+					error(data.result);
+				}
+			}
+		});
+		return false;
+	});
+	
+	$("#delete").click(function(){
+		if(send) return;
+		send = false;
+		$.ajax({
+			type: "POST",
+			url: $SCRIPT_ROOT + '/removeSoftwareDir',
+			data: "name=" + $("#softwarelist").val(),
+			success: function(data){
+				if(data.code == 1){
+					var folder = $("#softwarelist").val();
+					$('#fileTree').fileTree({ root: runnerDir + "/" + folder, script: $SCRIPT_ROOT + '/readFolder', folderEvent: 'click', expandSpeed: 750,
+						collapseSpeed: 750, multiFolder: false, selectFolder: true }, function(file) { 
+					selectFile(file);
+					});
+					$("input#file").val("");
+					$("#flash").fadeOut('normal');
+					$("#flash").empty();
+					$("#info").empty();
+					$("#info").append("Please select your file or folder into the box...");
+					$("#softwarelist").empty();
+					for(i=0; i<data.result.length; i++){
+						$("#softwarelist").append('<option value="' + data.result[i]["md5"] + 
+							'" title="' + data.result[i]["title"] +'" rel="' + 
+							data.result[i]["path"] +'">' + data.result[i]["title"] + '</option>');
+					}
+				}
+				else{
+					error(data.result);
+				}
+				send = false;
+			}
+		});
+		return false;	
+	});
+	
+	function error(msg){
+		$("#flash").fadeOut('normal');
+		$("#flash").empty();
+		$("#flash").fadeIn('normal');
+		$("#flash").append("<ul class='flashes'><li>" + msg + "</li></ul>");
+	}
+});
\ No newline at end of file

slapos/runner/static/scripts/project.js

@@ -62,7 +62,7 @@ $(document).ready( function() {
 	});
 	
 	function selectFile(file){
-		relativeFile = file.replace(workdir, "");
+		var relativeFile = file.replace(workdir, "");
 		$("#info").empty();
 		$("#info").append("Selection: " + relativeFile);
 		$("input#subfolder").val(file);

slapos/runner/static/scripts/repo.js

 $(document).ready( function() {
-	var send = false;	
+	var send = false;
+	var getStatus;
 	gitStatus();
 	$("#project").change(function(){		
 		if (send){
@@ -9,7 +10,21 @@ $(document).ready( function() {
 		gitStatus();
 	});
 	$("#activebranch").change(function(){
-		
+		var branch = $("#activebranch").val();
+		var project = $("#project").val();
+		$.ajax({
+			type: "POST",
+			url: $SCRIPT_ROOT + '/changeBranch',
+			data: "project=" + $("input#workdir").val() + "/" + project + "&name=" + branch,
+			success: function(data){
+				if(data.code == 1){
+					gitStatus();
+				}
+				else{
+					error(data.result);
+				}
+			}
+		});
 	});
 	$("#addbranch").click(function(){
 		if($("input#branchname").val() == "" || 
@@ -17,7 +32,22 @@ $(document).ready( function() {
 			error("Error: Please Enter your branch name");
 			return false;
 		}
-		alert($("input#branchname").val());
+		var project = $("#project").val();
+		var branch = $("input#branchname").val();
+		$.ajax({
+			type: "POST",
+			url: $SCRIPT_ROOT + '/newBranch',
+			data: "project=" + $("input#workdir").val() + "/" + project + "&name=" + branch,
+			success: function(data){
+				if(data.code == 1){
+					$("input#branchname").val("");
+					gitStatus();
+				}
+				else{
+					error(data.result);
+				}
+			}
+		});
 		return false;
 	});
 	$("#commit").click(function(){
@@ -26,7 +56,36 @@ $(document).ready( function() {
 			error("Error: Please Enter the commit message");
 			return false;
 		}
-		alert($("input#commitmsg").val());
+		if (send){ 
+			return false;
+		}
+		send = true;
+		var project = $("#project").val();
+		$("#imgwaitting").fadeIn('normal');
+		$("#commit").empty();
+		$("#commit").attr("value", "Wait...");
+		$.ajax({
+			type: "POST",
+			url: $SCRIPT_ROOT + '/pushProjectFiles',
+			data: "project=" + $("input#workdir").val() + "/" + project + "&msg=" + $("input#commitmsg").val(),
+			success: function(data){
+				if(data.code == 1){
+					if (data.result != ""){
+						error(data.result);
+					}
+					else
+						error("Commit done!");
+					gitStatus();
+				}
+				else{
+					error(data.result);
+				}
+				$("#imgwaitting").hide()
+				$("#commit").empty();
+				$("#commit").attr("value", "Commit");
+				send = false;
+			}			
+		});
 		return false;
 	});
 	function gitStatus(){
@@ -40,25 +99,31 @@ $(document).ready( function() {
 			return;
 		}
 		send = true;
+		var urldata = $("input#workdir").val() + "/" + project;
 		getStatus = $.ajax({
 			type: "POST",
 			url: $SCRIPT_ROOT + '/getProjectStatus',
-			data: "project=" + $("input#workdir").val() + "/" + project,
-			success: function(data){				
+			data: "project=" + urldata,
+			success: function(data){
 				if(data.code == 1){
 					$("#branchlist").show();
 					$("#status").append("<h2>Your Repository status</h2>");					
 					message = data.result.split('\n').join('<br/>');
 					//alert(message);
-					$("#status").append("<p>" + message + "</p>");
-					loadBranch(data.branch);
+					$("#status").append("<p>" + message + "</p>");									
 					if(data.dirty){
 						$("#push").show();
+						$("#status").append("<br/><h2>Display Diff for current Project</h2>");
+						$("#status").append("<p style='font-size:15px;'>You have changes in your project." + 
+							" <a href='" + $SCRIPT_ROOT + "/getProjectDiff/"
+							+ encodeURI(project) + "'>Watch the diff</a></p>");	
 					}
+					loadBranch(data.branch);
 				}
 				else{
-					$("#flash").append("<ul class='flashes'><li>Error: " + data.result + "</li></ul>");
+					error(data.result);
 				}
+				send = false;
 			}
 		});
 	}
@@ -67,7 +132,7 @@ $(document).ready( function() {
 		for(i=0; i< branch.length; i++){
 			selected = (branch[i].indexOf('*') == 0)? "selected":"";
 			$("#activebranch").append("<option value='" + branch[i] +
-				"'>" + branch[i] + "</option>");
+				"' " + selected + ">" + branch[i] + "</option>");
 		}
 	}
 	

slapos/runner/templates/layout.html

@@ -69,7 +69,7 @@
                 <div class="block_header">
                     <a href="{{ url_for('home') }}" style="float:left;" title="Home"><img alt="" src="{{ url_for('static', filename='images/home.png') }}" /></a>
 		    <div class="line"></div>
-		    <a href="{{ url_for('curentSoftware') }}" style="float:left" title="Current Software Folder"><img alt="" src="{{ url_for('static', filename='images/project.png') }}" /></a>
+		    <a href="{{ url_for('curentSoftware') }}" style="float:left" title="Edit current software release"><img alt="" src="{{ url_for('static', filename='images/project.png') }}" /></a>
 		    <div class="line"></div>
                     <h2 class="info">{% block title %}{% endblock %} - {{session.title}}</h2>
                 </div>
@@ -120,7 +120,7 @@
                 </div>
             </div>
             <div id="footer">
-                SlapOs webrunner &copy; Vifib SARL 2011 - All right reserved - Creative Commons Shared Alike Non Commercial
+                SlapOs web runner &copy; Vifib SARL 2011 - All right reserved - Creative Commons Shared Alike Non Commercial
             </div>
         </div>
     </body>

slapos/runner/templates/manageProject.html

 {% extends "layout.html" %}
-{% block title %}Manage your Project folder{% endblock %}
+{% block title %}Manage your Project{% endblock %}
 {% block head %}
   {{ super() }}  
   <script src="{{ url_for('static', filename='jquery/jqueryFileTree.js') }}" type="text/javascript" charset="utf-8"></script>
@@ -21,12 +21,11 @@
 </select>
 <br/><br/>
 <div id="contentInfo">
-	<div id="status">
+	<div id="status" style="margin-bottom:20px;">
 		<h2>Please select one project...</h2>
-	</div>	
-	<div id="branchlist">
-	<div class="div"></div>
-	<h2>Your Repository Branch</h2>
+	</div>
+	<div id="branchlist" style="margin-bottom:20px;">
+	<h2>Your Repository Branches</h2>
 	<div style="margin-left:15px;">
 	<label for='activebranch'>Select the active Branch here: </label>
 	<select name="activebranch" id="activebranch">
@@ -36,13 +35,13 @@
 	<input type="submit" name="addbranch" id ="addbranch" value="Add" class="button"/>
 	</div>
 	</div>	
-	<div id="push">
-	<div class="div"></div>
-	<h2>Commit All your changes</h2>
+	<div id="push" style="margin-bottom:20px;">
+	<h2>Commit All your changes (On active branch)</h2>
 	<div style="margin-left:15px;">
 	<label for='commitmsg'>Enter your commit message here: </label>
 	<input type="text" name="commitmsg" id="commitmsg" size='40' value="Enter message..." />
 	<input type="submit" name="commit" id ="commit" value="Commit" class="button"/>
+	<img class="waitting" id="imgwaitting" src="{{ url_for('static', filename='images/waiting.gif') }}" alt="" />
 	</div>	
 	</div>
 	<br/>

slapos/runner/templates/projectDiff.html

+{% extends "layout.html" %}
+{% block title %}Diff for '{{project}}'{% endblock %}
+{% block head %}
+  {{ super() }}  
+  <script src="{{ url_for('static', filename='ace/ace-uncompressed.js') }}" type="text/javascript" charset="utf-8"></script>
+  <script src="{{ url_for('static', filename='ace/theme-crimson_editor.js') }}" type="text/javascript" charset="utf-8"></script>
+  <script type="text/javascript">
+    $(document).ready( function() {
+        var editor = ace.edit("editor");
+        editor.setTheme("ace/theme/crimson_editor");
+    
+        var CurentMode = require("ace/mode/text").Mode;
+        editor.getSession().setMode(new CurentMode());
+        editor.getSession().setTabSize(2);
+        editor.getSession().setUseSoftTabs(true);
+        editor.renderer.setHScrollBarAlwaysVisible(false);
+        editor.setReadOnly(true);
+    });
+  </script>
+{% endblock %}
+{% block body %}
+<form action="{{ url_for('manageProject') }}" method=get>
+    <dl>
+        <dd><h2>Diff file for "{{project}}"</h2></dd>
+        <dd>
+            <div class="main_content">
+                <pre id="editor">
+{{ diff }}
+                </pre>
+            </div>
+        </dd>
+        <dd><input type=submit value="Back" class="button"></dd>
+    </dl>
+</form>
+{% endblock %}
+

slapos/runner/templates/runResult.html

@@ -4,17 +4,23 @@
   {{ super() }}
   <link href="{{ url_for('static', filename='css/jqueryFileTree.css', _external=False) }}" rel="stylesheet" type="text/css" media="screen" />
   <script src="{{ url_for('static', filename='jquery/jqueryFileTree.js') }}" type="text/javascript" charset="utf-8"></script>
-  {%if result != "" %}
-  <script type="text/javascript" charset="utf-8">
-    $(document).ready( function() {
-      $('#fileTree').fileTree({ root: "{{result}}", script: $SCRIPT_ROOT + "/readFolder", folderEvent: 'click', expandSpeed: 750, collapseSpeed: 750, multiFolder: false, selectFolder: false }, function(file) { 
-			alert(file);
-		});
-    });
-  </script>
-  {%endif%}
+  <script src="{{ url_for('static', filename='scripts/inspectSoftware.js') }}" type="text/javascript" charset="utf-8"></script>
 {% endblock %}
 {% block body %}
-<h2>Result for {{ type }}</h2>
+<h2>All compiled software</h2>
+<input type="hidden" name="runnerdir" id="runnerdir" value="{{softwareRoot}}" />
+<label for='softwarelist'>Select software: </label>
+<select name="softwarelist" id="softwarelist">
+{%for soft in softwares %}
+<option value="{{soft['md5']}}" title="{{soft['title']}}" rel="{{soft['path']}}">{{soft['title']}}</option>
+{%endfor%}
+</select>
+&nbsp;&nbsp;<button id ="delete" class="button" title="Remove this software">Remove</button>
+&nbsp;&nbsp;<button id ="open" class="button" title="Set this software as current software">Open</button>
+<br/><br/>
+<h2 id="softcontent">No content to displays</h2>
 <div id="fileTree" class="file_tree"></div>
+<div id="file_info" class="file_info">
+<span id="info">Please select your file or folder into the box...</span></div>
+<br/>
 {% endblock %}

slapos/runner/templates/viewLog.html

 {% extends "layout.html" %}
+{% block title %}View {{ type }} log{% endblock %}
 {% block body %}
 Currently running: <span class="message">{{ running }}</span><br>
 <strong>Note:</strong> You can refresh this page from time to time to have updates.<br>