Spaces:
Sleeping
Sleeping
| <html lang="uk"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Таблиця {{ table_name }}</title> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"> | |
| <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"> | |
| </head> | |
| <body> | |
| <div class="container mt-4"> | |
| <div class="d-flex justify-content-between align-items-center mb-4"> | |
| <h1>Таблиця: {{ table_name }}</h1> | |
| <a href="/" class="btn btn-primary">Назад</a> | |
| </div> | |
| <!-- Структура таблиці --> | |
| <div class="card mb-4"> | |
| <div class="card-header bg-info text-white"> | |
| <h5>Структура таблиці</h5> | |
| </div> | |
| <div class="card-body p-0"> | |
| <div class="table-responsive"> | |
| <table class="table table-striped table-bordered mb-0"> | |
| <thead class="table-dark"> | |
| <tr> | |
| <th>Поле</th> | |
| <th>Тип</th> | |
| <th>Null</th> | |
| <th>Ключ</th> | |
| <th>За замовчуванням</th> | |
| <th>Додатково</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| {% for column in columns %} | |
| <tr> | |
| <td>{{ column.Field }}</td> | |
| <td>{{ column.Type }}</td> | |
| <td>{{ column.Null }}</td> | |
| <td>{{ column.Key }}</td> | |
| <td>{{ column.Default }}</td> | |
| <td>{{ column.Extra }}</td> | |
| </tr> | |
| {% endfor %} | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Дані таблиці --> | |
| <div class="card"> | |
| <div class="card-header bg-success text-white"> | |
| <h5>Дані таблиці (перші 100 рядків)</h5> | |
| </div> | |
| <div class="card-body p-0"> | |
| <div class="table-responsive"> | |
| <table class="table table-striped table-bordered mb-0"> | |
| <thead class="table-dark"> | |
| <tr> | |
| {% for column in columns %} | |
| <th>{{ column.Field }}</th> | |
| {% endfor %} | |
| </tr> | |
| </thead> | |
| <tbody> | |
| {% for row in data %} | |
| <tr> | |
| {% for column in columns %} | |
| <td>{{ row[column.Field] }}</td> | |
| {% endfor %} | |
| </tr> | |
| {% endfor %} | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <div class="card-footer"> | |
| <p class="mb-0">Показано записів: {{ data|length }} (максимум 100)</p> | |
| </div> | |
| </div> | |
| <!-- SQL генератор --> | |
| <div class="card mt-4"> | |
| <div class="card-header bg-primary text-white"> | |
| <h5>SQL запити для таблиці {{ table_name }}</h5> | |
| </div> | |
| <div class="card-body"> | |
| <div class="mb-3"> | |
| <h6>SELECT всіх даних</h6> | |
| <div class="input-group"> | |
| <input type="text" class="form-control" value="SELECT * FROM {{ table_name }}" readonly id="select-query"> | |
| <button class="btn btn-outline-secondary" type="button" onclick="copyToClipboard('select-query')">Копіювати</button> | |
| <a href="/execute?query=SELECT * FROM {{ table_name }}" class="btn btn-primary" target="_blank">Виконати</a> | |
| </div> | |
| </div> | |
| <div class="mb-3"> | |
| <h6>INSERT новий запис</h6> | |
| <div class="input-group"> | |
| <input type="text" class="form-control" value="INSERT INTO {{ table_name }} ({% for column in columns %}{{ column.Field }}{% if not loop.last %}, {% endif %}{% endfor %}) VALUES (/* значення */);" readonly id="insert-query"> | |
| <button class="btn btn-outline-secondary" type="button" onclick="copyToClipboard('insert-query')">Копіювати</button> | |
| </div> | |
| </div> | |
| <div class="mb-3"> | |
| <h6>UPDATE запис</h6> | |
| <div class="input-group"> | |
| <input type="text" class="form-control" value="UPDATE {{ table_name }} SET /* поле = значення */ WHERE /* умова */" readonly id="update-query"> | |
| <button class="btn btn-outline-secondary" type="button" onclick="copyToClipboard('update-query')">Копіювати</button> | |
| </div> | |
| </div> | |
| <div> | |
| <h6>DELETE запис</h6> | |
| <div class="input-group"> | |
| <input type="text" class="form-control" value="DELETE FROM {{ table_name }} WHERE /* умова */" readonly id="delete-query"> | |
| <button class="btn btn-outline-secondary" type="button" onclick="copyToClipboard('delete-query')">Копіювати</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| function copyToClipboard(elementId) { | |
| const element = document.getElementById(elementId); | |
| element.select(); | |
| document.execCommand('copy'); | |
| // Додати підсвічування для зворотного зв'язку | |
| element.classList.add('bg-success', 'text-white'); | |
| setTimeout(() => { | |
| element.classList.remove('bg-success', 'text-white'); | |
| }, 500); | |
| } | |
| </script> | |
| </body> | |
| </html> |