electron/admin-server1/public/index.html

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Панель администратора</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="toast-container"></div>
    <div class="container">
        <h1>Панель администратора</h1>
        <div class="tabs">
            <button id="tab-main" class="tab-btn active">Общее</button>
            <button id="tab-settings" class="tab-btn">Настройки</button>
            <button id="tab-monitoring" class="tab-btn">Мониторинг</button>
        </div>
        <div id="main-tab">
            <div id="status">
                <p>Статус сервера: <span id="server-status">загрузка...</span></p>
                <button id="refresh-status-btn" class="btn-small">Обновить</button>
            </div>

            <div id="db-status-container">
                <div>
                    <p>Админ -> БД: <span id="admin-db-status">неизвестно</span></p>
                    <small id="admin-db-message"></small>
                </div>
                <div>
                    <p>Программа -> БД: <span id="backend-db-status">неизвестно</span></p>
                    <small id="backend-db-message"></small>
                </div>
                <button id="check-db-btn" class="btn-small">Проверить</button>
            </div>

            <div class="network-diag-container">
                <h2>Сетевая диагностика (Ping)</h2>
                <div class="ping-controls">
                    <input type="text" id="ping-ip" placeholder="Введите IP-адрес или хост">
                    <button id="ping-btn" class="btn-small">Пинг</button>
                    <button id="ping-stop-btn" class="btn-small" disabled>Стоп</button>
                    <button id="ping-clear-btn" class="btn-small">Очистить</button>
                </div>
                <pre id="ping-output"></pre>
            </div>

            <div class="logs-container">
                <h2>Логи приложения</h2>
                <div class="log-controls">
                    <button id="refresh-logs-btn" class="btn-small">Обновить логи</button>
                    <button id="clear-logs-btn" class="btn-small">Очистить</button>
                </div>
                <pre id="logs-content">Нажмите "Обновить логи" для просмотра</pre>
            </div>

            <div class="logs-container">
                <h2>Логи считывателя</h2>
                <div class="log-controls">
                    <button id="refresh-card-logs-btn" class="btn-small">Обновить логи считывателя</button>
                </div>
                <pre id="ping-output">
                <pre id="card-logs-content">Нажмите "Обновить логи считывателя" для просмотра</pre>
                </pre></pre>
            </div>

            <div class="config-container">
                <h2>Конфигурация</h2>
                <form id="config-form">
                    <div class="form-group">
                        <label for="payslipsPath">Путь к расчетным листкам:</label>
                        <div class="input-with-button">
                            <input type="text" id="payslipsPath" name="payslipsPath" required>
                            <button type="button" id="browse-btn">Обзор...</button>
                        </div>
                    </div>
                    <button type="submit">Сохранить</button>
                </form>
                <p id="config-status"></p>
            </div>
        </div>

        <div id="settings-tab" style="display:none">
            <h2>Настройки</h2> 
          <div id="server-params-section"><h3>Параметры серверов</h3> 
          <form id="server-params-form" novalidate> 
            <fieldset><legend>Admin-server</legend> 
                <label>PORT: <input type="number" id="admin-port" min="1" max="65535" required></label><br> 
                        <label>ADMIN_URL: <input type="text" id="admin-url" pattern="https?://.+" required></label>
            </fieldset> 
            <fieldset><legend>Backend</legend> 
                <label>host: <input type="text" id="backend-host" required></label><br> 
                <label>port: <input type="number" id="backend-port" min="1" max="65535" required></label> 
            </fieldset> 
            <button type="submit">Сохранить</button> 
            <span id="server-params-status" class="form-error"></span> 
                </form>
            </div>
          <div id="db-section"><h3>Подключения к БД</h3> 
            <form id="mysql-form" novalidate><fieldset><legend>MySQL (модераторы)</legend> 
              <label>MYSQL_HOST: <input type="text" id="mysql-host" required></label><br> 
              <label>MYSQL_PORT: <input type="number" id="mysql-port" min="1" max="65535" required></label><br> 
              <label>MYSQL_USER: <input type="text" id="mysql-user" required></label><br> 
                    <label>MYSQL_PASSWORD:
                        <div class="password-wrapper">
                            <input type="password" id="mysql-pass" readonly>
                            <button type="button" class="btn-small" data-action="edit-pass" data-target="mysql-pass">Изменить</button>
                        </div>
                    </label><br>
              <label>MYSQL_DATABASE: <input type="text" id="mysql-db" required></label><br> 
              <button type="submit">Сохранить</button> 
              <span id="mysql-status" class="form-error"></span> 
            </fieldset></form> 
          </div> 
          <div id="cors-section"><h3>CORS (ALLOWED_ORIGINS)</h3> 
            <form id="cors-form"> 
              <ul id="cors-list"></ul> 
              <input type="text" id="cors-new-origin" placeholder="Добавить origin..."> 
              <button type="button" id="cors-add-btn" disabled>Добавить</button> 
              <button type="submit">Сохранить</button> 
              <span id="cors-status" class="form-error"></span> 
            </form> 
          </div> 
          <div id="moders-section"><h3>Модераторы</h3> 
            <form id="add-moder-form" novalidate> 
              <input type="text" id="add-moder-username" placeholder="Логин" required> 
              <input type="password" id="add-moder-password" placeholder="Пароль (мин. 4 символа)" minlength="4" required> 
              <button type="submit">Добавить</button> 
              <span id="add-moder-status" class="form-error"></span> 
            </form> 
            <table id="moders-table" class="moders-table"><thead><tr><th>ID</th><th>Логин</th><th>Действия</th></tr></thead><tbody></tbody></table> 
          </div>
        </div>

        <div id="monitoring-tab" style="display:none;">
            <h2>Мониторинг системы</h2>
            <div id="monitoring-status-container">
                <!-- Статусы будут здесь -->
            </div>

            <h3>Проблемные события (Warn/Error)</h3>
            <div class="monitoring-filters">
                <label>Уровень: 
                    <select id="log-level-filter">
                        <option value="all">Все</option>
                        <option value="ERROR">Error</option>
                        <option value="WARN">Warn</option>
                    </select>
                </label>
                <label>Источник: 
                    <select id="log-source-filter">
                        <option value="all">Все</option>
                        <option value="Admin">Admin</option>
                        <option value="Backend">Backend</option>
                        <option value="CardReader">CardReader</option>
                    </select>
                </label>
                 <button id="refresh-monitoring-btn" class="btn-small">Обновить</button>
            </div>
            <table id="monitoring-log-table" class="moders-table">
                <thead>
                    <tr>
                        <th style="width: 20%;">Время</th>
                        <th style="width: 10%;">Уровень</th>
                        <th style="width: 15%;">Источник</th>
                        <th>Сообщение</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- Данные будут здесь -->
                </tbody>
            </table>
        </div>
    </div>

    <!-- Модальное окно для подтверждений -->
    <div id="confirm-modal" class="modal">
        <div class="modal-content">
            <p id="confirm-modal-text">Вы уверены?</p>
            <div class="modal-buttons">
                <button id="confirm-modal-yes" class="btn-danger">Да</button>
                <button id="confirm-modal-no" class="btn-secondary">Отмена</button>
            </div>
        </div>
    </div>

    <script src="app.js"></script>
</body>
</html>