index.html 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  4. <title>DP Tape DB - digilst - GUI</title>
  5. <link rel="stylesheet" type="text/css" href="{{url_for('static', filename='css/bootstrap.css')}}">
  6. <link rel="stylesheet" type="text/css" href="{{url_for('static', filename='font-awesome-4.1.0/css/font-awesome.css')}}">
  7. <script type="text/javascript" src="{{ url_for('static', filename='js/editablegrid.js') }}"></script>
  8. <script type="text/javascript" src="{{ url_for('static', filename='js/jquery-1.11.1.min.js') }}" ></script>
  9. <script type="text/javascript" src="{{ url_for('static', filename='js/dpdb.js') }}"></script>
  10. <!-- [DO NOT DEPLOY] --> <script type="text/javascript" src="{{ url_for('static', filename='js/editablegrid_renderers.js') }}"></script>
  11. <!-- [DO NOT DEPLOY] --> <script type="text/javascript" src="{{ url_for('static', filename='js/editablegrid_editors.js') }}"></script>
  12. <!-- [DO NOT DEPLOY] --> <script type="text/javascript" src="{{ url_for('static', filename='js/editablegrid_validators.js') }}"></script>
  13. <!-- [DO NOT DEPLOY] --> <script type="text/javascript" src="{{ url_for('static', filename='js/editablegrid_utils.js') }}"></script>
  14. <!-- [DO NOT DEPLOY] --> <script type="text/javascript" src="{{ url_for('static', filename='js/editablegrid_charts.js') }}"></script>
  15. <script>
  16. /*window.onload = function() {
  17. editableGrid = new EditableGrid("DemoGridAttach", {
  18. pageSize: 50,
  19. sortIconUp: "{{url_for('static', filename='img/up.png')}}",
  20. sortIconDown: "{{url_for('static', filename='img/down.png')}}",
  21. modelChanged: function(rowIndex, columnIndex, oldValue, newValue, row) {
  22. updateCellValue(this, rowIndex, columnIndex, oldValue, newValue, row);
  23. }
  24. });
  25. // we build and load the metadata in Javascript
  26. editableGrid.load({ metadata: [
  27. { name: "Date", datatype: "string", editable: true },
  28. { name: "Date2", datatype: "string", editable: true },
  29. { name: "Titel", datatype: "string", editable: true },
  30. { name: "Languages", datatype: "string", editable: true },
  31. { name: "Country", datatype: "string", editable: true },
  32. { name: "City", datatype: "string", editable: true },
  33. { name: "Place", datatype: "string", editable: true },
  34. { name: "Category", datatype: "string", editable: true },
  35. { name: "Duration", datatype: "string", editable: true },
  36. { name: "Location", datatype: "string", editable: true },
  37. { name: "Format", datatype: "string", editable: true },
  38. { name: "Note", datatype: "string", editable: true },
  39. { name: "Status", datatype: "string", editable: true },
  40. { name: "Date2", datatype: "string", editable: true }
  41. ]});
  42. // then we attach to the HTML table and render it
  43. editableGrid.attachToHTMLTable('htmlgrid');
  44. editableGrid.renderGrid();
  45. } */
  46. var datagrid = new DatabaseGrid();
  47. window.onload = function() {
  48. // key typed in the filter field
  49. $("#filter").keyup(function() {
  50. datagrid.editableGrid.filter( $(this).val());
  51. // To filter on some columns, you can set an array of column index
  52. //datagrid.editableGrid.filter( $(this).val(), [0,3,5]);
  53. });
  54. $("#showaddformbutton").click( function() {
  55. showAddForm();
  56. });
  57. $("#cancelbutton").click( function() {
  58. showAddForm();
  59. });
  60. $("#addbutton").click(function() {
  61. datagrid.addRow();
  62. });
  63. };
  64. </script>
  65. </head>
  66. <body>
  67. <div align="center">
  68. <h1>DP Tape DB - digilst</h1>
  69. </div>
  70. <!-- Feedback message zone -->
  71. <div id="message"></div>
  72. <div id="toolbar">
  73. <input type="text" id="filter" name="filter" placeholder="Filter :type any text here" />
  74. <a id="showaddformbutton" class="button green"><i class="fa fa-plus"></i> Add new row</a>
  75. </div>
  76. <!-- simple form, used to add a new row -->
  77. <div id="addform" style="display:none">
  78. <input type="text" name="date" id="date" placeholder="Date" />
  79. <input type="text" name="date2" id="date2" placeholder="Date2" />
  80. <input type="text" name="titel" id="titel" placeholder="Titel" />
  81. <input type="text" name="languages" id="languages" placeholder="Language" />
  82. <input type="text" name="country" id="country" placeholder="Country" />
  83. <input type="text" name="city" id="city" placeholder="City" />
  84. <input type="text" name="place" id="place" placeholder="Place" />
  85. <input type="text" name="category" id="category" placeholder="Category" />
  86. <input type="text" name="duration" id="duration" placeholder="Duration" />
  87. <input type="text" name="location" id="location" placeholder="Location" />
  88. <input type="text" name="format" id="format" placeholder="Format" />
  89. <input type="text" name="note" id="note" placeholder="Note" />
  90. <input type="text" name="status" id="status" placeholder="Status" /><br>
  91. <!--
  92. <div class="row">
  93. <input type="text" id="name" name="name" placeholder="name" />
  94. </div>
  95. <div class="row">
  96. <input type="text" id="firstname" name="firstname" placeholder="firstname" />
  97. </div>
  98. -->
  99. <div class="row tright">
  100. <a id="addbutton" class="button green" ><i class="fa fa-save"></i> Insert</a>
  101. <a id="cancelbutton" class="button delete">Cancel</a>
  102. </div>
  103. </div>
  104. <!-- Paginator control -->
  105. <div id="paginator"></div>
  106. <!-- Grid contents -->
  107. <div id="tablecontent"></div>
  108. <!-- Paginator control -->
  109. <div id="paginator"></div>
  110. </body>
  111. </html>