dpdb.js: handle updates flags, ...

src/static/js/dpdb.js

@@ -1,3 +1,8 @@
+// helper function to get path of a image
+function image(relativePath) {
+	return "static/img/" + relativePath;
+}
+
 /**
  *  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
  */
@@ -16,6 +21,7 @@ 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. 
 */
@@ -34,11 +40,16 @@ function updateCellValue(editableGrid, rowIndex, columnIndex, oldValue, newValue
 		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 
+			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); },
+		error: function(XMLHttpRequest, textStatus, exception) {
+			editableGrid.setValueAt(rowIndex, columnIndex, oldValue);
+			highlight(row.id, "error"); 
+			alert("Ajax failure\n status:" + textStatus); 
+		},
 		async: true
 	});
 	/* 
@@ -75,7 +86,63 @@ DatabaseGrid.prototype.fetchGrid = function()  {
 
 DatabaseGrid.prototype.initializeGrid = function(grid) {
 
-  var self = this;
+	var self = this;
+	
+	// the list of allowed countries depend on the selected continent
+	if (grid.hasColumn('Flag')) {
+
+		grid.setEnumProvider("Flag", new EnumProvider({ 
+	
+			// the function getOptionValuesForEdit is called each time the cell is edited
+			// here we do only client-side processing, but you could use Ajax here to talk with your server
+			// if you do, then don't forget to use Ajax in synchronous mode 
+			getOptionValuesForEdit: function (grid, column, rowIndex) {
+				var country = grid.getValueAt(rowIndex, grid.getColumnIndex("Flag"));
+				return { "Austria":"Austria", "Belgium":"Belgium", "France":"France", "UK":"United Kingdom", "Netherlands":"Netherlands","USA":"United States of America"};
+				return null;
+			}
+		}));
+	}
+
+	grid.getColumn("Flag").cellEditor.minWidth = 105;
+
+	// use a flag image to render the selected country
+	grid.setCellRenderer("Flag", new CellRenderer({
+			render: function(cell, value) { cell.innerHTML = value ? "<img src='" + image("flags/" + value.toLowerCase() + ".png") + "' alt='" + value + "'/>" : ""; cell.style.textAlign = "center"; }
+	})); 
+
+
+	// register the function that will handle model changes
+	modelChanged = function(rowIndex, columnIndex, oldValue, newValue, row) { 
+		displayMessage("Value for '" + this.getColumnName(columnIndex) + "' in row " + this.getRowId(rowIndex) + " has changed from '" + oldValue + "' to '" + newValue + "'");
+		if (this.getColumnName(columnIndex) == "Flag") this.setValueAt(rowIndex, this.getColumnIndex("Flag"), ""); // if we changed the continent, reset the country
+		//this.renderCharts();
+	};
+
+	// update paginator whenever the table is rendered (after a sort, filter, page change, etc.)
+	tableRendered = function() { this.updatePaginator(); };
+
+	// update charts when the table is sorted or filtered
+	tableFiltered = function() {/* this.renderCharts();*/ };
+	tableSorted = function() { /*this.renderCharts();*/ };
+
+	rowSelected = function(oldRowIndex, newRowIndex) {
+		if (oldRowIndex < 0) displayMessage("Selected row '" + this.getRowId(newRowIndex) + "'");
+		else displayMessage("Selected row has changed from '" + this.getRowId(oldRowIndex) + "' to '" + this.getRowId(newRowIndex) + "'");
+	};
+
+	/*
+	// set active (stored) filter if any
+	_$('filter').value = currentFilter ? currentFilter : '';
+
+	// filter when something is typed into filter
+	_$('filter').onkeyup = function() { editableGrid.filter(_$('filter').value); };
+
+	// bind page size selector
+	$("#pagesize").val(pageSize).change(function() { editableGrid.setPageSize($("#pagesize").val()); });
+	$("#barcount").val(maxBars).change(function() { editableGrid.maxBars = $("#barcount").val(); /*editableGrid.renderCharts(); * / });
+	*/
+
 
 // render for the action column
 	grid.setCellRenderer("action", new CellRenderer({ 
@@ -108,7 +175,7 @@ DatabaseGrid.prototype.deleteRow = function(id)
 			if (response == "ok" )
 		        self.editableGrid.removeRow(id);
 		},
-		error: function(XMLHttpRequest, textStatus, exception) { alert("Ajax failure\n" + errortext); },
+		error: function(XMLHttpRequest, textStatus, exception) { alert("Ajax failure\n Could not delete" + id + "\n status:" + textStatus); },
 		async: true
 	});
 
@@ -170,7 +237,7 @@ DatabaseGrid.prototype.addRow = function(id)
             else 
               alert("error");
 		},
-		error: function(XMLHttpRequest, textStatus, exception) { alert("Ajax failure\n" + errortext); },
+		error: function(XMLHttpRequest, textStatus, exception) { alert("Ajax failure\n status:" + textStatus); },
 		async: true
 	});