No Description

table.html 6.1KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148
  1. <html>
  2. <head>
  3. <title>Draft</title>
  4. <meta name="viewport" content="width=device-width, initial-scale=1">
  5. <meta charset="UTF-8">
  6. <link rel="icon" href="/../Icon.ico" sizes="32x32">
  7. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  8. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  9. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  10. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  11. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  12. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-sanitize.js"></script>
  13. <link rel="stylesheet" href="{{ url_for('static', filename='estilo.css') }}" />
  14. <script type="text/javascript" src="{{ url_for('static', filename=jscript) }}"></script>
  15. <script>
  16. // la variable 'pagina' la usa el javascript para que el *-run.py sepa
  17. // cual funcion del python file llamar, basado en la direccion.
  18. // esta funcion se encarga de comunicarse con la base de datos.
  19. table.value("pagina", "{{pagina}}")
  20. </script>
  21. </head>
  22. <body ng-app="table" ng-controller="tableController">
  23. <nav class="navbar navbar-dark bg-dark navbar-expand">
  24. {% raw %}
  25. <a class="navbar-brand" href="{{info.dash_link}}">{{info.dash_name}}</a>
  26. {% endraw %}
  27. </nav>
  28. <div class="container-fluid">
  29. <div class="row" >
  30. <h1>
  31. {% raw %}
  32. {{info.dash_sub_name}}
  33. {% endraw %}
  34. </h1>
  35. </div>
  36. <div class="row" >
  37. <div class="col-2" >
  38. <div class="topnav">
  39. <!-- la proxima seccion de codigo es solamente para el searchbox sobre la tabla. -->
  40. <!-- ################################ con ayuda de w3schools:
  41. How TO - Filter/Search Table
  42. -->
  43. <input type="text" id="myInput" onkeyup="filter_search()" placeholder="Search..">
  44. <script>
  45. function filter_search() {
  46. // Declare variables
  47. var input, filter, table, tr, td1, td2, td3, i, txtValue1, txtValue2, txtValue3;
  48. input = document.getElementById("myInput");
  49. filter = input.value.toUpperCase();
  50. table = document.getElementById("tabla");
  51. tr = table.getElementsByTagName("tr");
  52. // Loop through all table rows, and hide those who don't match the search query
  53. for (i = 0; i < tr.length; i++) {
  54. td1 = tr[i].getElementsByTagName("td")[0];
  55. td2 = tr[i].getElementsByTagName("td")[1];
  56. td3 = tr[i].getElementsByTagName("td")[2];
  57. if (td1 || td2 || td3) {
  58. txtValue1 = td1.textContent || td1.innerText;
  59. txtValue2 = td2.textContent || td2.innerText;
  60. txtValue3 = td3.textContent || td3.innerText;
  61. if ((txtValue1.toUpperCase().indexOf(filter) > -1) ||
  62. (txtValue2.toUpperCase().indexOf(filter) > -1) ||
  63. (txtValue3.toUpperCase().indexOf(filter) > -1)) {
  64. tr[i].style.display = "";
  65. } else {
  66. tr[i].style.display = "none";
  67. }
  68. }
  69. }
  70. }
  71. </script>
  72. <!-- ################################ -->
  73. </div>
  74. </div>
  75. <div class="col-2" >
  76. <!-- <button href='./' type="submit">Submit</button> -->
  77. </div>
  78. <div class="col-4" >
  79. <!-- el boton de a~nadir, el cual lleva a un form -->
  80. {% raw %}
  81. <a class="btn button boton mr-4" href="{{info.add_link}}">{{info.add}}</a>
  82. {% endraw %}
  83. </div>
  84. </div>
  85. <div class="row" >
  86. <div class="col" >
  87. <table id='tabla'>
  88. <tr>
  89. {% raw %}
  90. <!-- imprime los titulos de cada columna -->
  91. <th ng-repeat="header in headers" class="header2">{{header.nombre}}</th>
  92. {% endraw %}
  93. </tr>
  94. <!-- para imprimir cada fila -->
  95. <tr ng-repeat="row in tabla">
  96. {% raw %}
  97. <!-- la proxima linea asume que las entradas en la tabla tienen un id unico con -->
  98. <!-- el mismo nombre de identificador a traves de los javascript, json, etc. -->
  99. <td ng-repeat="stat in row" ng-if="stat != row.user_id">
  100. <div ng-bind-html="stat"></div>
  101. </td>
  102. <td><button type="button" class="btn2 boton mr-4" name="button" data-toggle="modal" data-target="#myModalv{{row.user_id}}">{{info.bot1}}</button></td>
  103. <td><a type="button" class="btn2 boton mr-4" href="{{info.dir2}}{{row.user_id}}">{{info.bot2}}</a></td>
  104. {% endraw %}
  105. </tr>
  106. </table>
  107. </div>
  108. </div>
  109. </div>
  110. </body>
  111. <!-- comienza modal -->
  112. {% raw %}
  113. <div ng-repeat="row in modal_content" id="myModalv{{row.user_id}}" class="modal fade">
  114. <div class="modal-dialog">
  115. <!-- Modal content-->
  116. <div class="modal-content">
  117. <div class="modal-header bg2">
  118. <button type="button" class="close" data-dismiss="modal">&times;</button>
  119. <h4 class="modal-title">{{modal.infoName}}</h4>
  120. </div>
  121. <div class="modal-body bg1">
  122. <!-- <div ng-bind-html="stat"></div> -->
  123. <form action="#">
  124. <div ng-repeat="(key, value) in row" ng-if="value != row.user_id">
  125. <label for="{{key}}">{{key}}:</label><br>
  126. <input type="text" id="{{key}}" name="{{key}}" value="{{value}}" readonly><br>
  127. </div>
  128. </form>
  129. </div>
  130. <div class="modal-footer bg2">
  131. <button type="button" class="btn btn-default boton" data-dismiss="modal">Close</button>
  132. </div>
  133. </div>
  134. </div>
  135. </div>
  136. {% endraw %}
  137. <!-- termina modal -->
  138. </html>