<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>DP Tape DB - digilst - GUI</title>
    <link rel="stylesheet" type="text/css" href="{{url_for('static', filename='css/bootstrap.css')}}">

    <script type="text/javascript" src="{{ url_for('static', filename='js/editablegrid.js') }}"></script>
	<script type="text/javascript" src="{{ url_for('static', filename='js/jquery-1.11.1.min.js') }}" ></script>

    <!-- [DO NOT DEPLOY] --> <script type="text/javascript" src="{{ url_for('static', filename='js/editablegrid_renderers.js') }}"></script>
    <!-- [DO NOT DEPLOY] --> <script type="text/javascript" src="{{ url_for('static', filename='js/editablegrid_editors.js') }}"></script>
    <!-- [DO NOT DEPLOY] --> <script type="text/javascript" src="{{ url_for('static', filename='js/editablegrid_validators.js') }}"></script>
    <!-- [DO NOT DEPLOY] --> <script type="text/javascript" src="{{ url_for('static', filename='js/editablegrid_utils.js') }}"></script>
    <!-- [DO NOT DEPLOY] --> <script type="text/javascript" src="{{ url_for('static', filename='js/editablegrid_chartsjs') }}"></script>

<!--     
        <link rel="stylesheet" type="text/css" href="{{url_for('static', filename='css/editablegrid.css')}}">
        
        <style>
            body { font-family:'lucida grande', tahoma, verdana, arial, sans-serif; font-size:11px; }
            h1 { font-size: 15px; }
            a { color: #548dc4; text-decoration: none; }
            a:hover { text-decoration: underline; }
            table.testgrid { border-collapse: collapse; border: 1px solid #CCB; width: 800px; }
            table.testgrid td, table.testgrid th { padding: 5px; border: 1px solid #E0E0E0; }
            table.testgrid th { background: #E5E5E5; text-align: left; }
            input.invalid { background: red; color: #FDFDFD; }
        </style>
 -->
    <script>
    
/**
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");
	
	*/
   
}

    
    
            window.onload = function() {
              editableGrid = new EditableGrid("DemoGridAttach", {
              	pageSize: 50,
              	sortIconUp: "{{url_for('static', filename='img/up.png')}}", 
              	sortIconDown: "{{url_for('static', filename='img/down.png')}}",
              	modelChanged: function(rowIndex, columnIndex, oldValue, newValue, row) {
   	    			updateCellValue(this, rowIndex, columnIndex, oldValue, newValue, row);
       			}
              }); 

                // we build and load the metadata in Javascript
                editableGrid.load({ 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", 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 },
                    { name: "Date2", datatype: "string", editable: true }
                ]});

                // then we attach to the HTML table and render it
                editableGrid.attachToHTMLTable('htmlgrid');
                editableGrid.renderGrid();
            } 
            
        </script>

</head>
<body>
    <div align="center">
        <h1>DP Tape DB - digilst</h1>
        <br>
        <a href="{{url_for('insert')}}"><h4>Insert row</h4></a>
        <br>
        <a href="{{url_for('update')}}"><h4>Update field</h4></a>
        <br>
        <a href="{{url_for('delete')}}"><h4>Delete row</h4></a>
        <br><br><br>
    </div>
    <table id="htmlgrid" class="table table-bordered table-striped table-fixed-header">
    <!-- <table id="htmlgrid" class="testgrid"> -->
        <tr>
            <!-- <td><h4>_id</h4></td>
            <td><h4>Date</h4></td>
            <td><h4>Date2</h4></td>
            <td><h4>Titel</h4></td>
            <td><h4>Languages</h4></td>
            <td><h4>Country</h4></td>
            <td><h4>City</h4></td>
            <td><h4>Place</h4></td>
            <td><h4>Category</h4></td>
            <td><h4>Duration</h4></td>
            <td><h4>Location</h4></td>
            <td><h4>Format</h4></td>
            <td><h4>Note</h4></td>
            <td><h4>Status</h4></td> 
            <td>_id</td>-->
            <td>Date</td>
            <td>Date2</td>
            <td>Titel</td>
            <td>Languages</td>
            <td>Country</td>
            <td>City</td>
            <td>Place</td>
            <td>Category</td>
            <td>Duration</td>
            <td>Location</td>
            <td>Format</td>
            <td>Note</td>
            <td>Status</td>
        </tr>

        {% for result in results %}
        <tr id="{{result._id}}">
            <td>{{result.Date}}</td>
            <td>{{result.Date2}}</td>
            <td>{{result.Titel}}</td>
            <td>{{result.Languages}}</td>
            <td>{{result.Country}}</td>
            <td>{{result.City}}</td>
            <td>{{result.Place}}</td>
            <td>{{result.Category}}</td>
            <td>{{result.Duration}}</td>
            <td>{{result.Location}}</td>
            <td>{{result.Format}}</td>
            <td>{{result.Note}}</td>
            <td>{{result.Status}}</td>
        </tr>
        {% endfor %}
    </table>
</body>

</html>
<!-- 
{ "_id" : ObjectId("554cc35e00f54d3069031313"), "Date" : "00.00.1981", "Date2" : "", "Titel" : "Shri Mataji Sightseenig Tour Manhatten", "Languages" : "", "Country" : "USA", "City" : "Manhatten", "Place" : "", "Category" : "?", "Duration" : "", "Location" : "", "Format" : "HDD Australia", "Note" : "", "Status" : "", "Date completed" : "08.06.2011", "Digitised output" : "00:35:35", "Video" : "", "Audio" : "", "Storage media reference" : 213, "Optimised output" : "", "OPT" : "", "EDI" : "", "AUT" : "", "Issues description" : "", "DVD" : "" }
-->
