Adding Software file management into webrunner

slapos/runner/gittools.py

@@ -45,7 +45,7 @@ def gitStatus(config, project):
   try:
     repo = Repo(project)
     git = repo.git
-    json = git.status()
+    json = git.status().replace('#', '')
     branch = git.branch().replace(' ', '').split('\n')
     isdirty = repo.is_dirty(untracked_files=True)
     code = 1

slapos/runner/static/css/styles.css

@@ -81,9 +81,21 @@ body {
     padding-top: 3px;
     float: left;
     width: 700px;
+    height: 22px;
     text-align: center;
     color: #4c6172;
     text-shadow: 0 1px 1px #fff;
+    overflow: hidden;
+}
+#header .line{
+    width:1px;
+    border-left: 1px solid #678DAD;
+    background: #CAD4DC;
+    height: 24px;
+    float: left;
+    margin-top: 2px; 
+    margin-right: 5px;
+     margin-left:5px
 }
 
 #editor { 
@@ -163,7 +175,6 @@ body {
 #main
 {    
     background: url(../images/main_bg_all.png) repeat-y;
-    padding:10px;
     padding-left: 28px;
     padding-right: 25px;     
     min-height: 400px;   
@@ -226,17 +237,21 @@ 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;
 	background: #666666;
 	color: #fff;
+	box-shadow: 1px 1px 1px #888888;
 }
 .button:active {
 	background-position: 0 top;
 	position: relative;
 	top: 1px;
 	padding: 6px 10px 4px;
+	box-shadow: 1px 1px 1px #888888;
 }
 
 .focusField{
@@ -256,7 +271,7 @@ body {
 
 .flash{		
     margin-left:20px;
-	color:#FF5500;
+    color:#4A131F;
     font-style:italic;
     font-size:14px;
     position:relative;  
@@ -273,15 +288,21 @@ body {
 
 .clear{
     clear: both;
+    height:1px;
+}
+
+.home_content{
+
+    padding: 15px;
 }
 
 #home_box{
     background: none;    
-    margin: 15px;
     border: 1px solid #678dad;
     padding: 0;
     height: 405px;
     color: #4c6172;    
+    margin: 15px;
 }
 
 #home_box a{
@@ -324,6 +345,7 @@ body {
     font-size: 13px;
     float: left;
     width: 400px;
+    cursor:default;
 }
 
 
@@ -370,6 +392,7 @@ body {
     font-size: 13px;
     float: left;
     width: 150px;
+    cursor:default;
 }
 
 .file_tree {
@@ -381,6 +404,24 @@ body {
     padding: 5px;
 }
 
+.file_tree_short{
+    width: 352px;
+    height: 100px;
+    border: solid 1px #678dad;
+    background: #fff;
+    overflow: auto;
+    padding: 5px;
+    float:left;
+}
+
+.box_software{
+    width: 382px;
+    height: 100px;
+    background: #fff;
+    padding: 5px;
+    float:right;
+}
+
 #contentInfo{
     width: 752px;
     border: solid 1px #678dad;
@@ -415,16 +456,22 @@ body {
 
 .file_info{
     margin-top:10px;
-    background: #96b9d7;
-    color: #000;
-    padding: 4px;
-    font-size: 16px;
-    padding-left: 20px;
+    background: #e4e4e4;
+    padding: 5px 10px 5px;
+    box-shadow: 1px 1px 1px #888888;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    color: #737373;
+    font-weight: bold;
+    text-shadow: 0px 1px #FFF;
+    margin-bottom: 9px;
+    font-size: 14px;
+    cursor:default;
 }
 
 #check{
     margin-right:5px;
-    margin-top:4px;
+    margin-top:2px;
     display: none;
     float: left;
 }
@@ -451,7 +498,8 @@ body {
 select {
   -webkit-appearance: button;
   -webkit-border-radius: 2px;
-  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
+  -moz-border-radius: 2px;
+  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
   -webkit-padding-end: 20px;
   -webkit-padding-start: 2px;
   -webkit-user-select: none;

slapos/runner/static/scripts/project.js

@@ -24,7 +24,7 @@ $(document).ready( function() {
 		$.ajax({
 			type: "POST",
 			url: $SCRIPT_ROOT + '/createSoftware',
-			data: "folder=" + workdir + $("input#subfolder").val() + $("input#software").val(),
+			data: "folder=" + $("input#subfolder").val() + $("input#software").val(),
 			success: function(data){
 				if(data.code == 1){
 					location.href = $SCRIPT_ROOT + '/editSoftwareProfile'
@@ -64,8 +64,8 @@ $(document).ready( function() {
 	function selectFile(file){
 		relativeFile = file.replace(workdir, "");
 		$("#info").empty();
-		$("#info").append("Selection: " + file);
-		$("input#subfolder").val(relativeFile);
+		$("#info").append("Selection: " + relativeFile);
+		$("input#subfolder").val(file);
 		path = "";
 		if(method == "open"){
 			checkFolder(file);

slapos/runner/static/scripts/repo.js

@@ -48,7 +48,7 @@ $(document).ready( function() {
 				if(data.code == 1){
 					$("#branchlist").show();
 					$("#status").append("<h2>Your Repository status</h2>");					
-					message = data.result.split('#').join('<br/>');
+					message = data.result.split('\n').join('<br/>');
 					//alert(message);
 					$("#status").append("<p>" + message + "</p>");
 					loadBranch(data.branch);

slapos/runner/static/scripts/softwareFolder.js

+$(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);
+	    
+	var script = "/readFolder";
+	var Mode = function(name, desc, clazz, extensions) {
+		this.name = name;
+		this.desc = desc;
+		this.clazz = clazz;
+		this.mode = new clazz();
+		this.mode.name = name;
+		
+		this.extRe = new RegExp("^.*\\.(" + extensions.join("|") + ")$");
+	};
+	var modes = [		
+		new Mode("php", "PHP",require("ace/mode/php").Mode, ["php", "in", "inc"]),
+		new Mode("python", "Python", require("ace/mode/python").Mode, ["py"]),
+		new Mode("buildout", "Python Buildout config", require("ace/mode/buildout").Mode, ["cfg"])
+	    ];
+	var projectDir = $("input#project").val();
+	var send = false;
+	var edit = false;
+	var workdir = $("input#workdir").val();
+	$('#fileTree').fileTree({ root: projectDir, script: $SCRIPT_ROOT + script, folderEvent: 'click', expandSpeed: 750, collapseSpeed: 750, multiFolder: false, selectFolder: true }, function(file) { 
+		selectFile(file);
+	});
+	$("#add").click(function(){		
+		var path = $("input#project").val();
+		if (send) return false;
+		if($("input#file").val() == "" || 
+			$("input#file").val() == "Enter name here..."){
+			error("Error: Please enter your file or folder name");
+			return false;
+		}
+		if($("input#subfolder").val() != ""){
+			path = $("input#subfolder").val();
+		}
+		path = path + "/" + $("input#file").val();
+		send = true;
+		$.ajax({
+			type: "POST",
+			url: $SCRIPT_ROOT + '/createFile',
+			data: "file=" + path + "&type=" + $("#type").val(),
+			success: function(data){				
+				if(data.code == 1){
+					$('#fileTree').fileTree({ root: projectDir, script: $SCRIPT_ROOT + script, 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...");
+					$("input#subfolder").val("");					
+				}
+				else{
+					error(data.result);
+				}
+				send = false;
+			}
+		});
+		return false;
+	});
+	
+	$("#save").click(function(){
+		if(!edit){
+			error("Please select the file to edit");
+			return false;
+		}
+		send = false;
+		$.ajax({
+			type: "POST",
+			url: $SCRIPT_ROOT + '/saveFileContent',
+			data: "file=" + $("input#subfolder").val() + "&content=" + editor.getSession().getValue(),
+			success: function(data){				
+				if(data.code == 1){
+					$("#flash").fadeOut('normal');
+					$("#flash").empty();
+				}
+				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>");
+	}
+	function selectFile(file){
+		relativeFile = file.replace(projectDir, "");
+		$("#info").empty();
+		$("#info").append(relativeFile);
+		$("input#subfolder").val(file);
+		path = "";
+		send = false;
+		edit = false;
+		if(file.substr(-1) != "/"){			
+			$.ajax({
+			type: "POST",
+			url: $SCRIPT_ROOT + '/getFileContent',
+			data: "file=" + file,
+			success: function(data){				
+				if(data.code == 1){
+					$("#flash").fadeOut('normal');
+					$("#flash").empty();
+					$("#edit_info").empty();
+					var name = file.split('/');
+					$("#edit_info").append("Edit selected file (" +
+						name[name.length - 1] + ")");
+					editor.getSession().setValue(data.result);
+					setEditMode(name[name.length - 1]);
+					edit = true;
+				}
+				else{
+					error(data.result);
+				}
+				send = false;
+			}
+		});
+		}
+		else{
+			$("#edit_info").empty();
+			$("#edit_info").append("Edit your selected file");
+			editor.getSession().setValue("");
+		}
+		return;
+	}
+	
+	function setEditMode(file){
+		var CurentMode = require("ace/mode/text").Mode;		
+		editor.getSession().setMode(new CurentMode());
+		for (var i=0; i< modes.length; i++){
+			if(modes[i].extRe.test(file)){
+				editor.getSession().setMode(modes[i].mode);
+				set = true;
+				break;
+			}
+		}
+	}
+});
\ No newline at end of file

slapos/runner/templates/index.html

 {% extends "layout.html" %}
 {% block title %}SlapOs buildout web based runner {% endblock %}
 {% block body %}
+<div id="home_box">
 <div class="inner_box">
 <div class="lmenu">
     <h2><a href="{{ url_for('configRepo')}}">Create a new Project from your repository</a></h2>
-    <p>Choose your online repository, SlapOS runner is web based development tool which uses slapgrid to install and instantiate the software.</p>
+    <p>Your repository will be cloned into your project folder, you will need the url of the repository. 
+    This allow you to open and edit your local project copy and synchonize content with online repository.
+    </p>
     <img src="{{ url_for('static', filename='images/folder_html.png') }}" />
     <div class="clear"></div>
 </div>
 <div class="smenu">
     <h2><a href="{{ url_for('openProject', method='open')}}">Open Existing Project</a></h2>
-    <p>Choose your online repository, SlapOS runner is web based develop.</p>
+    <p>Once you have cloned your repository, you can open project here.</p>
     <img src="{{ url_for('static', filename='images/mydocuments.png') }}" />
     <div class="clear"></div>
 </div>
 <div class="sright_menu">
     <h2><a href="{{ url_for('manageProject')}}">Manage your Project</a></h2>
-    <p>Choose your online repository, SlapOS runner is web based develop.</p>
+    <p>You can view details of your project and commit content here.</p>
     <img src="{{ url_for('static', filename='images/manage_repo.png') }}" />
 </div>
 <div class="clear"></div>
 <div class="lmenu">
-    <h2><a href="{{ url_for('openProject', method='new')}}">Start with a new software release now</a></h2>
-    <p>Choose your online repository, SlapOS runner is web based development tool which uses slapgrid to install and instantiate the software.</p>
+    <h2><a href="{{ url_for('openProject', method='new')}}">Start a new software release</a></h2>
+    <p>Create a new software into your selected project directory. This allow you to create, edit and run a new software on SlapOs, using webrunner tools.
+    </p>
     <img src="{{ url_for('static', filename='images/folder_blue.png') }}" />
     <div class="clear"></div>
 </div>
 </div>
+</div>
 {% endblock %}

slapos/runner/templates/layout.html

@@ -67,7 +67,9 @@
             </div>
             <div id="header">
                 <div class="block_header">
-                    <a href="{{ url_for('home') }}" style="float:left"><img alt="" src="{{ url_for('static', filename='images/home.png') }}" /></a>
+                    <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>
                     <h2 class="info">{% block title %}{% endblock %} - {{session.title}}</h2>
                 </div>
                 <div class="wmenu">
@@ -102,7 +104,7 @@
                     {% endif %}
                     {% endwith %}
                 </div>                
-                <div {% if request.path == '/' %} id="home_box" {%else%} id="content" {% endif %}>
+                <div {% if request.path == '/' %} class="home_content" {%else%} id="content" {% endif %}>
                     {% if request.path != '/' %}
                         <div class="main_head">
                         </div>

slapos/runner/templates/manageProject.html

@@ -2,13 +2,12 @@
 {% block title %}Manage your Project folder{% endblock %}
 {% block head %}
   {{ 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>
   <script src="{{ url_for('static', filename='scripts/repo.js') }}" type="text/javascript" charset="utf-8"></script>
 {% endblock %}
 {% block body %}
 
-<form action="{{ url_for('updateInstanceProfile') }}" method=post>
+<form action="" method=post>
 <input type="hidden" name="workdir" id="workdir" value="{{workDir}}" />
 <input type="hidden" name="subfolder" id="subfolder" value="" />
 
@@ -16,7 +15,6 @@
 <h2>Manage your repository</h2>
 <label for='project'>Select your project into the list: </label>
 <select id="project" name="project">
-	<option value=""></option>
 	{% for folder in project%}
 	<option value="{{folder}}">{{folder}}</option>
 	{% endfor %}

slapos/runner/templates/softwareFolder.html

+{% extends "layout.html" %}
+{% block title %}Your current software folder{% endblock %}
+{% block head %}
+  {{ 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>
+  <script src="{{ url_for('static', filename='scripts/softwareFolder.js') }}" type="text/javascript" charset="utf-8"></script>
+  <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 src="{{ url_for('static', filename='ace/mode-buildout.js') }}" type="text/javascript" charset="utf-8"></script>
+    <script src="{{ url_for('static', filename='ace/mode-python.js') }}" type="text/javascript" charset="utf-8"></script>
+    <script src="{{ url_for('static', filename='ace/mode-php.js') }}" type="text/javascript" charset="utf-8"></script>
+{% endblock %}
+{% block body %}
+
+<form action="" method=post>
+<input type="hidden" name="project" id="project" value="{{project}}" />
+<input type="hidden" name="workdir" id="workdir" value="{{workDir}}" />
+<input type="hidden" name="subfolder" id="subfolder" value="" />
+<div id="file_navigation">
+	<h2>Current software file content</h2>
+	<div id="fileTree" class="file_tree_short"></div>	
+	<div class="box_software">	
+	    <h2>Add new file or folder</h2>
+	    <input type="text" name="file" id="file" size='25' value="Enter name here..." />
+	    &nbsp;&nbsp;<select name="type" id="type">
+	    <option value="file">file</option>
+	    <option value="folder">folder</option>
+	    </select>
+	    &nbsp;&nbsp;<input type="submit" name="add" id ="add" value="Add" class="button"/>
+	    <div id="file_info" class="file_info"><span id="info">Please select your file or folder into the box...</span></div>
+	</div>
+	<div class="clear"></div>
+	<div id="code" style="margin-top:10px">
+	<h2 id="edit_info">Edit your selected file</h2>
+	<div class="main_content">
+<pre id="editor">
+
+</pre>
+            </div>
+	    <input type=submit value=Update id="save" class="button">
+	</div>
+		
+</div>
+</form>
+{% endblock %}

slapos/runner/utils.py

@@ -269,7 +269,7 @@ def getProjectList(folder):
     project.append(elt)
   return project
 
-def newSoftware(folder, config):
+def newSoftware(folder, config, session):
   json = ""
   code = 0
   runner_dir = config['runner_workdir']

slapos/runner/views.py

@@ -200,7 +200,7 @@ def openFolder():
 
 @app.route('/createSoftware', methods=['POST'])
 def createSoftware():
-  return newSoftware(request.form['folder'], app.config)
+  return newSoftware(request.form['folder'], app.config, session)
 
 @app.route("/checkFolder", methods=['POST'])
 def checkFolder():
@@ -224,3 +224,37 @@ def manageProject():
 @app.route("/getProjectStatus", methods=['POST'])
 def getProjectStatus():
   return gitStatus(app.config, request.form['project'])
+
+@app.route("/curentSoftware")
+def curentSoftware():
+  project = os.path.join(app.config['runner_workdir'], ".project")
+  if os.path.exists(project):
+    return render_template('softwareFolder.html', workDir=app.config['workspace'],
+                           project=open(project).read())
+  return redirect(url_for('configRepo'))
+
+@app.route("/createFile", methods=['POST'])
+def createFile():
+  try:
+    if request.form['type'] == "file":
+      f = open(request.form['file'], 'w').write(" ")
+    else:
+      os.mkdir(request.form['file'])
+    return jsonify(code=1, result="")
+  except Exception, e:
+    return jsonify(code=0, result=str(e))
+
+@app.route("/getFileContent", methods=['POST'])
+def getFileContent():
+  if os.path.exists(request.form['file']):
+    return jsonify(code=1, result=open(request.form['file'], 'r').read())
+  else:
+    return jsonify(code=0, result="Error: No such file!")
+  
+@app.route("/saveFileContent", methods=['POST'])
+def saveFileContent():
+  if os.path.exists(request.form['file']):
+    open(request.form['file'], 'w').write(request.form['content'])
+    return jsonify(code=1, result="")
+  else:
+    return jsonify(code=0, result="Error: No such file!")  
\ No newline at end of file