update code.

src/index.py

@@ -1,3 +1,4 @@
+#!/usr/bin/python
 from flask import Flask, render_template, request, redirect
 import os
 from pymongo import MongoClient
@@ -5,7 +6,7 @@ from bson.objectid import ObjectId
 
 
 def connect():
-    connection = MongoClient("localhost", 27017)
+    connection = MongoClient("10.0.1.10", 27017)
     handle = connection["dpTapeDB"]
     handle.authenticate("gui", "GahN7chi")
     return handle
@@ -17,9 +18,19 @@ handle = connect()
 @app.route("/index", methods=['GET'])
 @app.route("/", methods=['GET'])
 def index():
+    #results = [x for x in handle.digilst.find()[0:5]]
+    return render_template('index.html')
+    #, results=results)
+
+@app.route("/index_old", methods=['GET'])
+def index_old():
     results = [x for x in handle.digilst.find()[0:5]]
-    return render_template('index.html', results=results)
+    return render_template('index_old.html', results=results)
 
+@app.route("/loaddata", methods=['GET'])
+def loaddata():
+    results = [x for x in handle.digilst.find()[0:5]]
+    return render_template('data.json', results=results)
 
 @app.route("/insert", methods=['GET'])
 def insert():

src/static/js/demo.js

@@ -0,0 +1,219 @@
+/**
+ *  highlightRow and highlight are used to show a visual feedback. If the row has been successfully modified, it will be highlighted in green. Otherwise, in red
+ */
+function highlightRow(rowId, bgColor, after)
+{
+	var rowSelector = $("#" + rowId);
+	rowSelector.css("background-color", bgColor);
+	rowSelector.fadeTo("normal", 0.5, function() { 
+		rowSelector.fadeTo("fast", 1, function() { 
+			rowSelector.css("background-color", '');
+		});
+	});
+}
+
+function highlight(div_id, style) {
+	highlightRow(div_id, style == "error" ? "#e5afaf" : style == "warning" ? "#ffcc00" : "#8dc70a");
+}
+        
+/**
+   updateCellValue calls the PHP script that will update the database. 
+ */
+function updateCellValue(editableGrid, rowIndex, columnIndex, oldValue, newValue, row, onResponse)
+{      
+	$.ajax({
+		url: 'update.php',
+		type: 'POST',
+		dataType: "html",
+	   		data: {
+			tablename : editableGrid.name,
+			id: editableGrid.getRowId(rowIndex), 
+			newvalue: editableGrid.getColumnType(columnIndex) == "boolean" ? (newValue ? 1 : 0) : newValue, 
+			colname: editableGrid.getColumnName(columnIndex),
+			coltype: editableGrid.getColumnType(columnIndex)			
+		},
+		success: function (response) 
+		{ 
+			// reset old value if failed then highlight row
+			var success = onResponse ? onResponse(response) : (response == "ok" || !isNaN(parseInt(response))); // by default, a sucessfull reponse can be "ok" or a database id 
+			if (!success) editableGrid.setValueAt(rowIndex, columnIndex, oldValue);
+		    highlight(row.id, success ? "ok" : "error"); 
+		},
+		error: function(XMLHttpRequest, textStatus, exception) { alert("Ajax failure\n" + errortext); },
+		async: true
+	});
+   
+}
+   
+
+
+function DatabaseGrid() 
+{ 
+	this.editableGrid = new EditableGrid("demo", {
+		enableSort: true,
+	    // define the number of row visible by page
+      	pageSize: 50,
+      // Once the table is displayed, we update the paginator state
+        tableRendered:  function() {  updatePaginator(this); },
+   	    tableLoaded: function() { datagrid.initializeGrid(this); },
+		modelChanged: function(rowIndex, columnIndex, oldValue, newValue, row) {
+   	    	updateCellValue(this, rowIndex, columnIndex, oldValue, newValue, row);
+       	}
+ 	});
+	this.fetchGrid(); 
+	
+}
+
+DatabaseGrid.prototype.fetchGrid = function()  {
+	// call a PHP script to get the data
+	this.editableGrid.loadJSON("loaddata.php?db_tablename=demo");
+};
+
+DatabaseGrid.prototype.initializeGrid = function(grid) {
+
+  var self = this;
+
+// render for the action column
+	grid.setCellRenderer("action", new CellRenderer({ 
+		render: function(cell, id) {                 
+		      cell.innerHTML+= "<i onclick=\"datagrid.deleteRow("+id+");\" class='fa fa-trash-o red' ></i>";
+		}
+	})); 
+
+
+	grid.renderGrid("tablecontent", "testgrid");
+};    
+
+DatabaseGrid.prototype.deleteRow = function(id) 
+{
+
+  var self = this;
+
+  if ( confirm('Are you sur you want to delete the row id ' + id )  ) {
+
+        $.ajax({
+		url: 'delete.php',
+		type: 'POST',
+		dataType: "html",
+		data: {
+			tablename : self.editableGrid.name,
+			id: id 
+		},
+		success: function (response) 
+		{ 
+			if (response == "ok" )
+		        self.editableGrid.removeRow(id);
+		},
+		error: function(XMLHttpRequest, textStatus, exception) { alert("Ajax failure\n" + errortext); },
+		async: true
+	});
+
+        
+  }
+			
+}; 
+
+
+DatabaseGrid.prototype.addRow = function(id) 
+{
+
+  var self = this;
+
+        $.ajax({
+		url: 'add.php',
+		type: 'POST',
+		dataType: "html",
+		data: {
+			tablename : self.editableGrid.name,
+			name:  $("#name").val(),
+			firstname:  $("#firstname").val()
+		},
+		success: function (response) 
+		{ 
+			if (response == "ok" ) {
+   
+                // hide form
+                showAddForm();   
+        		$("#name").val('');
+                $("#firstname").val('');
+			    
+                alert("Row added : reload model");
+                self.fetchGrid();
+           	}
+            else 
+              alert("error");
+		},
+		error: function(XMLHttpRequest, textStatus, exception) { alert("Ajax failure\n" + errortext); },
+		async: true
+	});
+
+        
+			
+}; 
+
+
+
+
+function updatePaginator(grid, divId)
+{
+    divId = divId || "paginator";
+	var paginator = $("#" + divId).empty();
+	var nbPages = grid.getPageCount();
+
+	// get interval
+	var interval = grid.getSlidingPageInterval(20);
+	if (interval == null) return;
+	
+	// get pages in interval (with links except for the current page)
+	var pages = grid.getPagesInInterval(interval, function(pageIndex, isCurrent) {
+		if (isCurrent) return "<span id='currentpageindex'>" + (pageIndex + 1)  +"</span>";
+		return $("<a>").css("cursor", "pointer").html(pageIndex + 1).click(function(event) { grid.setPageIndex(parseInt($(this).html()) - 1); });
+	});
+		
+	// "first" link
+	var link = $("<a class='nobg'>").html("<i class='fa fa-fast-backward'></i>");
+	if (!grid.canGoBack()) link.css({ opacity : 0.4, filter: "alpha(opacity=40)" });
+	else link.css("cursor", "pointer").click(function(event) { grid.firstPage(); });
+	paginator.append(link);
+
+	// "prev" link
+	link = $("<a class='nobg'>").html("<i class='fa fa-backward'></i>");
+	if (!grid.canGoBack()) link.css({ opacity : 0.4, filter: "alpha(opacity=40)" });
+	else link.css("cursor", "pointer").click(function(event) { grid.prevPage(); });
+	paginator.append(link);
+
+	// pages
+	for (p = 0; p < pages.length; p++) paginator.append(pages[p]).append(" ");
+	
+	// "next" link
+	link = $("<a class='nobg'>").html("<i class='fa fa-forward'>");
+	if (!grid.canGoForward()) link.css({ opacity : 0.4, filter: "alpha(opacity=40)" });
+	else link.css("cursor", "pointer").click(function(event) { grid.nextPage(); });
+	paginator.append(link);
+
+	// "last" link
+	link = $("<a class='nobg'>").html("<i class='fa fa-fast-forward'>");
+	if (!grid.canGoForward()) link.css({ opacity : 0.4, filter: "alpha(opacity=40)" });
+	else link.css("cursor", "pointer").click(function(event) { grid.lastPage(); });
+	paginator.append(link);
+}; 
+
+
+function showAddForm() {
+  if ( $("#addform").is(':visible') ) 
+      $("#addform").hide();
+  else
+      $("#addform").show();
+}
+
+        
+
+   
+
+
+
+
+  
+
+
+

src/static/js/dpdb.js

@@ -0,0 +1,223 @@
+/**
+ *  highlightRow and highlight are used to show a visual feedback. If the row has been successfully modified, it will be highlighted in green. Otherwise, in red
+ */
+function highlightRow(rowId, bgColor, after)
+{
+	var rowSelector = $("#" + rowId);
+	rowSelector.css("background-color", bgColor);
+	rowSelector.fadeTo("normal", 0.5, function() { 
+		rowSelector.fadeTo("fast", 1, function() { 
+			rowSelector.css("background-color", '');
+		});
+	});
+}
+
+function highlight(div_id, style) {
+	highlightRow(div_id, style == "error" ? "#e5afaf" : style == "warning" ? "#ffcc00" : "#8dc70a");
+}
+
+/**
+updateCellValue calls the Python code that will update the database. 
+*/
+function updateCellValue(editableGrid, rowIndex, columnIndex, oldValue, newValue, row, onResponse)
+{      
+	$.ajax({
+		url: '/write_update',
+		type: 'POST',
+		dataType: "html",
+	   		data: {
+			tablename : editableGrid.name,
+			mongoid: editableGrid.getRowId(rowIndex), 
+			value: editableGrid.getColumnType(columnIndex) == "boolean" ? (newValue ? 1 : 0) : newValue, 
+			field: editableGrid.getColumnName(columnIndex)			
+		},
+		success: function (response) 
+		{ 
+			// reset old value if failed then highlight row
+			var success = onResponse ? onResponse(response) : (response == "ok" || !isNaN(parseInt(response))); // by default, a sucessfull reponse can be "ok" or a database id 
+			if (!success) editableGrid.setValueAt(rowIndex, columnIndex, oldValue);
+		    highlight(row.id, success ? "ok" : "error"); 
+		},
+		error: function(XMLHttpRequest, textStatus, exception) { alert("Ajax failure\n" + errortext); },
+		async: true
+	});
+	/* 
+	xhttp.open("POST", "ajax_test.asp", true);
+xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+xhttp.send("fname=Henry&lname=Ford");
+	
+	*/
+   
+}
+
+function DatabaseGrid() 
+{ 
+	this.editableGrid = new EditableGrid("demo", {
+		enableSort: true,
+	    // define the number of row visible by page
+      	pageSize: 50,
+      // Once the table is displayed, we update the paginator state
+        tableRendered:  function() {  updatePaginator(this); },
+   	    tableLoaded: function() { datagrid.initializeGrid(this); },
+		modelChanged: function(rowIndex, columnIndex, oldValue, newValue, row) {
+   	    	updateCellValue(this, rowIndex, columnIndex, oldValue, newValue, row);
+       	}
+ 	});
+	this.fetchGrid(); 
+	
+}
+
+DatabaseGrid.prototype.fetchGrid = function()  {
+	// call a PHP script to get the data
+	this.editableGrid.loadJSON("loaddata");
+};
+
+DatabaseGrid.prototype.initializeGrid = function(grid) {
+
+  var self = this;
+
+// render for the action column
+	grid.setCellRenderer("action", new CellRenderer({ 
+		render: function(cell, id) {                 
+		      cell.innerHTML+= "<i onclick=\"datagrid.deleteRow("+id+");\" class='fa fa-trash-o red' ></i>";
+		}
+	})); 
+
+
+	grid.renderGrid("tablecontent", "testgrid");
+};    
+
+DatabaseGrid.prototype.deleteRow = function(id) 
+{
+
+  var self = this;
+
+  if ( confirm('Are you sur you want to delete the row id ' + id )  ) {
+
+        $.ajax({
+		url: 'delete',
+		type: 'POST',
+		dataType: "html",
+		data: {
+			tablename : self.editableGrid.name,
+			mongoid: editableGrid.getRowId(rowIndex), 
+		},
+		success: function (response) 
+		{ 
+			if (response == "ok" )
+		        self.editableGrid.removeRow(id);
+		},
+		error: function(XMLHttpRequest, textStatus, exception) { alert("Ajax failure\n" + errortext); },
+		async: true
+	});
+
+        
+  }
+			
+}; 
+
+
+DatabaseGrid.prototype.addRow = function(id) 
+{
+
+  var self = this;
+
+        $.ajax({
+		url: 'add.php',
+		type: 'POST',
+		dataType: "html",
+		data: {
+			tablename : self.editableGrid.name,
+			name:  $("#name").val(),
+			firstname:  $("#firstname").val()
+		},
+		success: function (response) 
+		{ 
+			if (response == "ok" ) {
+   
+                // hide form
+                showAddForm();   
+        		$("#name").val('');
+                $("#firstname").val('');
+			    
+                alert("Row added : reload model");
+                self.fetchGrid();
+           	}
+            else 
+              alert("error");
+		},
+		error: function(XMLHttpRequest, textStatus, exception) { alert("Ajax failure\n" + errortext); },
+		async: true
+	});
+
+        
+			
+}; 
+
+
+
+
+function updatePaginator(grid, divId)
+{
+    divId = divId || "paginator";
+	var paginator = $("#" + divId).empty();
+	var nbPages = grid.getPageCount();
+
+	// get interval
+	var interval = grid.getSlidingPageInterval(20);
+	if (interval == null) return;
+	
+	// get pages in interval (with links except for the current page)
+	var pages = grid.getPagesInInterval(interval, function(pageIndex, isCurrent) {
+		if (isCurrent) return "<span id='currentpageindex'>" + (pageIndex + 1)  +"</span>";
+		return $("<a>").css("cursor", "pointer").html(pageIndex + 1).click(function(event) { grid.setPageIndex(parseInt($(this).html()) - 1); });
+	});
+		
+	// "first" link
+	var link = $("<a class='nobg'>").html("<i class='fa fa-fast-backward'></i>");
+	if (!grid.canGoBack()) link.css({ opacity : 0.4, filter: "alpha(opacity=40)" });
+	else link.css("cursor", "pointer").click(function(event) { grid.firstPage(); });
+	paginator.append(link);
+
+	// "prev" link
+	link = $("<a class='nobg'>").html("<i class='fa fa-backward'></i>");
+	if (!grid.canGoBack()) link.css({ opacity : 0.4, filter: "alpha(opacity=40)" });
+	else link.css("cursor", "pointer").click(function(event) { grid.prevPage(); });
+	paginator.append(link);
+
+	// pages
+	for (p = 0; p < pages.length; p++) paginator.append(pages[p]).append(" ");
+	
+	// "next" link
+	link = $("<a class='nobg'>").html("<i class='fa fa-forward'>");
+	if (!grid.canGoForward()) link.css({ opacity : 0.4, filter: "alpha(opacity=40)" });
+	else link.css("cursor", "pointer").click(function(event) { grid.nextPage(); });
+	paginator.append(link);
+
+	// "last" link
+	link = $("<a class='nobg'>").html("<i class='fa fa-fast-forward'>");
+	if (!grid.canGoForward()) link.css({ opacity : 0.4, filter: "alpha(opacity=40)" });
+	else link.css("cursor", "pointer").click(function(event) { grid.lastPage(); });
+	paginator.append(link);
+}; 
+
+
+function showAddForm() {
+  if ( $("#addform").is(':visible') ) 
+      $("#addform").hide();
+  else
+      $("#addform").show();
+}
+
+        
+
+   
+
+
+
+
+  
+
+
+
+

src/static/js/editablegrid.js

@@ -191,14 +191,14 @@ EditableGrid.prototype.init = function (name, config)
 		if ( typeof config != "undefined" && typeof config['sortIconUp'] != "undefined" ) 
 			this.sortUpImage.src = config['sortIconUp'];
 		else
-			this.sortUpImage.src = this.baseUrl + "/images/bullet_arrow_up.png";
+			this.sortUpImage.src ="/static/img/bullet_arrow_up.png";
 
 
 		this.sortDownImage = new Image();
 		if ( typeof config != "undefined" && typeof config['sortIconDown'] != "undefined" ) 
 			this.sortDownImage.src = config['sortIconDown'];
 		else
-			this.sortDownImage.src = this.baseUrl + "/images/bullet_arrow_down.png";
+			this.sortDownImage.src = "/static/img/bullet_arrow_down.png";
 	}
 
 	// restore stored parameters, or use default values if nothing stored

src/templates/data.json

@@ -0,0 +1,22 @@
+{"metadata":[
+	{"name": "_id","datatype": "string","editable": false },
+	{"name": "Date","datatype": "string","editable": true },
+	{"name": "Date2","datatype": "string","editable": true },
+	{"name": "Titel","datatype": "string","editable": true },
+	{"name": "Languages","datatype": "string","editable": true },
+	{"name": "Country","label":"Country","datatype":"string","editable":true},
+	{"name": "City","datatype": "string","editable": true },
+	{"name": "Place","datatype": "string","editable": true },
+	{"name": "Category","datatype": "string","editable": true },
+	{"name": "Duration","datatype": "string","editable": true },
+	{"name": "Location","datatype": "string","editable": true },
+	{"name": "Format","datatype": "string","editable": true },
+	{"name": "Note","datatype": "string","editable": true },
+	{"name": "Status","datatype": "string","editable": true }
+],
+"data":[
+{% for result in results %}
+{"id":"{{result._id}}","values":{"Date":"{{result.Date}}","Date2":"{{result.Date2}}","Titel":"{{result.Titel}}","Languages":"{{result.Languages}}","Country":"{{result.Country}}","City":"{{result.City}}","Place":"{{result.Place}}","Category":"{{result.Category}}","Duration":"{{result.Duration}}","Location":"{{result.Location}}","Format":"{{result.Format}}","Note":"{{result.Note}}","Status":"{{result.Status}}"}},
+{% endfor %}
+{}
+]}