123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159 |
- <html>
-
- <!-- empieza los includes -->
- <head>
- <title>Draft</title>
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <meta charset="UTF-8">
- <link rel="icon" href="/../Icon.ico" sizes="32x32">
- <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> -->
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
- <!-- <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> -->
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-sanitize.js"></script>
-
- <!-- el .css -->
- <link rel="stylesheet" href="{{ url_for('static', filename='estilo.css') }}" />
-
- <!-- los .js que quiero usar -->
- <script type="text/javascript" src="{{ url_for('static', filename=jscript) }}"></script>
- <script>
- // la variable 'pagina' la usa el javascript para que el run.py sepa cual python file abrir.
- // este python file se encarga de comunicarse con la base de datos.
- table.value("pagina", "{{pagina}}")
- </script>
- {% raw %}
- <!-- {{headers}} -->
- <!-- {{tabla}} -->
- <!-- {{info}} -->
- <!-- {{modal}} -->
- <!-- {{modal_content}} -->
- {% endraw %}
-
- </head>
- <!-- termina los includes -->
-
-
- <body ng-app="table" ng-controller="tableController">
- <nav class="navbar navbar-dark bg-dark navbar-expand">
- {% raw %}
- <a class="navbar-brand" href="{{info.dash_link}}">{{info.dash_name}}</a>
- {% endraw %}
- </nav>
-
- <div class="container-fluid">
- <div class="row" >
- <h1>
- {% raw %}
- {{info.dash_sub_name}}
- {% endraw %}
- </h1>
- </div>
- <div class="row" >
- <div class="col-2" >
- <div class="topnav">
- <!-- ################################ con ayuda de w3schools:
- How TO - Filter/Search Table-->
- <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search..">
- <script>
- function myFunction() {
- // Declare variables
- var input, filter, table, tr, td1, td2, td3, i, txtValue1, txtValue2, txtValue3;
- input = document.getElementById("myInput");
- filter = input.value.toUpperCase();
- table = document.getElementById("tabla");
- tr = table.getElementsByTagName("tr");
-
- // Loop through all table rows, and hide those who don't match the search query
- for (i = 0; i < tr.length; i++) {
- td1 = tr[i].getElementsByTagName("td")[0];
- td2 = tr[i].getElementsByTagName("td")[1];
- td3 = tr[i].getElementsByTagName("td")[2];
- if (td1 || td2 || td3) {
- txtValue1 = td1.textContent || td1.innerText;
- txtValue2 = td2.textContent || td2.innerText;
- txtValue3 = td3.textContent || td3.innerText;
- if ((txtValue1.toUpperCase().indexOf(filter) > -1) ||
- (txtValue2.toUpperCase().indexOf(filter) > -1) ||
- (txtValue3.toUpperCase().indexOf(filter) > -1)) {
- tr[i].style.display = "";
- } else {
- tr[i].style.display = "none";
- }
- }
- }
- }
- </script>
- <!-- ################################ -->
- </div>
- </div>
- <div class="col-2" >
- <!-- <button href='./' type="submit">Submit</button> -->
- </div>
- <div class="col-4" >
- {% raw %}
- <a class="btn button boton mr-4" href="{{info.add_link}}">{{info.add}}</a>
- {% endraw %}
- </div>
- </div>
- <div class="row" >
- <div class="col" >
- <table id='tabla'>
- <tr>
- {% raw %}
- <th ng-repeat="header in headers" class="header2">{{header.nombre}}</th>
- {% endraw %}
- </tr>
- <tr ng-repeat="row in tabla">
- {% raw %}
- <!-- la proxima linea asume que las entradas en la tabla tienen un id unico con -->
- <!-- el mismo nombre de identificador a traves de los javascript, json, etc. -->
- <td ng-repeat="stat in row" ng-if="stat != row.user_id">
- <div ng-bind-html="stat"></div>
- </td>
- <td><button type="button" class="btn2 boton mr-4" name="button" data-toggle="modal" data-target="#myModalv{{row.user_id}}">Ver mas</button></td>
- <td><a type="button" class="btn2 boton mr-4" href="{{info.dir2}}{{row.user_id}}">Editar</a></td>
-
- {% endraw %}
- </tr>
- </table>
- </div>
- </div>
- </div>
- </body>
-
- <!-- comienza modal -->
- {% raw %}
- <div ng-repeat="row in modal_content" id="myModalv{{row.user_id}}" class="modal fade">
- <div class="modal-dialog">
-
- <!-- Modal content-->
- <div class="modal-content">
- <div class="modal-header bg2">
- <button type="button" class="close" data-dismiss="modal">×</button>
- <h4 class="modal-title">{{modal.infoName}}</h4>
- </div>
- <div class="modal-body bg1">
- <!-- <div ng-bind-html="stat"></div> -->
- <form action="#">
- <div ng-repeat="(key, value) in row" ng-if="value != row.user_id">
- <label for="{{key}}">{{key}}:</label><br>
- <input type="text" id="{{key}}" name="{{key}}" value="{{value}}" readonly><br>
- </div>
- </form>
-
- </div>
- <div class="modal-footer bg2">
- <button type="button" class="btn btn-default boton" data-dismiss="modal">Close</button>
- </div>
- </div>
-
- </div>
- </div>
- {% endraw %}
- <!-- termina modal -->
-
- </html>
|