<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')}}">
	<link rel="stylesheet" type="text/css" href="{{url_for('static', filename='font-awesome-4.1.0/css/font-awesome.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>
	<script type="text/javascript" src="{{ url_for('static', filename='js/dpdb.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_charts.js') }}"></script>

    <script>
    
            /*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: "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();
            } */
            
            var datagrid = new DatabaseGrid();
			window.onload = function() { 

                // key typed in the filter field
                $("#filter").keyup(function() {
                    datagrid.editableGrid.filter( $(this).val());

                    // To filter on some columns, you can set an array of column index 
                    //datagrid.editableGrid.filter( $(this).val(), [0,3,5]);
                  });

                $("#showaddformbutton").click( function()  {
                  showAddForm();
                });
                $("#cancelbutton").click( function() {
                  showAddForm();
                });

                $("#addbutton").click(function() {
                  datagrid.addRow();
                });

        
			}; 
            
        </script>

</head>
<body>
    <div align="center">
        <h1>DP Tape DB - digilst</h1>
    </div>
	<!-- Feedback message zone -->
	<div id="message"></div>

	<div id="toolbar">
	  <input type="text" id="filter" name="filter" placeholder="Filter :type any text here"  />
	  <a id="showaddformbutton" class="button green"><i class="fa fa-plus"></i> Add new row</a>
	</div>
	
	 <!-- simple form, used to add a new row -->
        <div id="addform" style="display:none">

            <input type="text" name="date" id="date" placeholder="Date" />
            <input type="text" name="date2" id="date2" placeholder="Date2" />
            <input type="text" name="titel" id="titel" placeholder="Titel" />
            <input type="text" name="languages" id="languages" placeholder="Language" />
            <input type="text" name="country" id="country" placeholder="Country" />
            <input type="text" name="city" id="city" placeholder="City" />
            <input type="text" name="place" id="place" placeholder="Place" />
            <input type="text" name="category" id="category" placeholder="Category" />
            <input type="text" name="duration" id="duration" placeholder="Duration" />
            <input type="text" name="location" id="location" placeholder="Location" />
            <input type="text" name="format" id="format" placeholder="Format" />
            <input type="text" name="note" id="note" placeholder="Note" />
            <input type="text" name="status" id="status" placeholder="Status" /><br>


            <!--
            <div class="row">
                <input type="text" id="name" name="name" placeholder="name" />
            </div>

             <div class="row">
                <input type="text" id="firstname" name="firstname" placeholder="firstname" />
            </div>
			-->
            <div class="row tright">
              <a id="addbutton" class="button green" ><i class="fa fa-save"></i> Insert</a>
              <a id="cancelbutton" class="button delete">Cancel</a>
            </div>
        </div>
	
	<!-- Paginator control -->
	<div id="paginator"></div>
	<!-- Grid contents -->
	<div id="tablecontent"></div>

	<!-- Paginator control -->
	<div id="paginator"></div>

</body>

</html>
