что то амт
This commit is contained in:
@@ -66,21 +66,9 @@
|
||||
<option value="dark">Dark</option>
|
||||
<option value="system">System</option>
|
||||
</select>
|
||||
<button id="usersButton" onclick="app.showUsersModal()" class="hidden flex items-center gap-2 px-4 py-2 bg-slate-100 text-slate-700 rounded-lg hover:bg-slate-200 transition-colors text-sm font-medium">
|
||||
<i data-lucide="users" class="w-4 h-4"></i>
|
||||
Users
|
||||
</button>
|
||||
<button id="backupsButton" onclick="app.showBackupsModal()" class="hidden flex items-center gap-2 px-4 py-2 bg-slate-100 text-slate-700 rounded-lg hover:bg-slate-200 transition-colors text-sm font-medium">
|
||||
<i data-lucide="archive" class="w-4 h-4"></i>
|
||||
Backups
|
||||
</button>
|
||||
<button id="settingsButton" onclick="app.showSettingsModal()" class="hidden flex items-center gap-2 px-4 py-2 bg-slate-100 text-slate-700 rounded-lg hover:bg-slate-200 transition-colors text-sm font-medium">
|
||||
<i data-lucide="sliders-horizontal" class="w-4 h-4"></i>
|
||||
Settings
|
||||
</button>
|
||||
<button id="auditButton" onclick="app.showAuditModal()" class="hidden flex items-center gap-2 px-4 py-2 bg-slate-100 text-slate-700 rounded-lg hover:bg-slate-200 transition-colors text-sm font-medium">
|
||||
<i data-lucide="history" class="w-4 h-4"></i>
|
||||
Audit
|
||||
<button id="managementButton" onclick="app.showManagementPanel('settings')" class="hidden flex items-center gap-2 px-4 py-2 bg-slate-100 text-slate-700 rounded-lg hover:bg-slate-200 transition-colors text-sm font-medium">
|
||||
<i data-lucide="panel-left-open" class="w-4 h-4"></i>
|
||||
Menu
|
||||
</button>
|
||||
<button id="logsButton" onclick="app.showLogsPanel()" class="hidden flex items-center gap-2 px-4 py-2 bg-slate-100 text-slate-700 rounded-lg hover:bg-slate-200 transition-colors text-sm font-medium">
|
||||
<i data-lucide="scroll-text" class="w-4 h-4"></i>
|
||||
@@ -260,6 +248,178 @@ SELECT * FROM users LIMIT 10;"></textarea>
|
||||
</div>
|
||||
<div class="bg-slate-900 text-slate-200 rounded-xl border border-slate-800 p-4 font-mono text-sm log-terminal overflow-auto" id="logOutput">Select a container to load recent logs.</div>
|
||||
</div>
|
||||
<div id="managementPanel" class="hidden h-full">
|
||||
<div class="grid lg:grid-cols-[240px,1fr] gap-6 h-full">
|
||||
<aside class="bg-white rounded-2xl border border-slate-200 p-4 space-y-2">
|
||||
<button id="managementTab-settings" onclick="app.showManagementPanel('settings')" class="w-full flex items-center gap-3 px-4 py-3 rounded-xl text-left bg-slate-100 text-slate-700">
|
||||
<i data-lucide="sliders-horizontal" class="w-4 h-4"></i>
|
||||
<span>Settings</span>
|
||||
</button>
|
||||
<button id="managementTab-backups" onclick="app.showManagementPanel('backups')" class="w-full flex items-center gap-3 px-4 py-3 rounded-xl text-left text-slate-700 hover:bg-slate-100">
|
||||
<i data-lucide="archive" class="w-4 h-4"></i>
|
||||
<span>Backups</span>
|
||||
</button>
|
||||
<button id="managementTab-users" onclick="app.showManagementPanel('users')" class="w-full flex items-center gap-3 px-4 py-3 rounded-xl text-left text-slate-700 hover:bg-slate-100">
|
||||
<i data-lucide="users" class="w-4 h-4"></i>
|
||||
<span>Users</span>
|
||||
</button>
|
||||
<button id="managementTab-audit" onclick="app.showManagementPanel('audit')" class="w-full flex items-center gap-3 px-4 py-3 rounded-xl text-left text-slate-700 hover:bg-slate-100">
|
||||
<i data-lucide="history" class="w-4 h-4"></i>
|
||||
<span>Audit</span>
|
||||
</button>
|
||||
</aside>
|
||||
<section class="min-h-0">
|
||||
<div id="managementSection-settings" class="hidden bg-white rounded-2xl border border-slate-200 h-full overflow-auto p-6 space-y-6">
|
||||
<div>
|
||||
<h3 class="text-2xl font-bold text-slate-800">System settings</h3>
|
||||
<p class="text-sm text-slate-500 mt-1">Telegram, automatic backups and retention are configured here.</p>
|
||||
</div>
|
||||
<section class="space-y-4">
|
||||
<div>
|
||||
<h4 class="text-lg font-semibold text-slate-800">Automatic backups</h4>
|
||||
<p class="text-sm text-slate-500">The panel creates a database archive and, optionally, a site snapshot every day.</p>
|
||||
</div>
|
||||
<label class="flex items-center gap-2 text-sm text-slate-700">
|
||||
<input type="checkbox" id="managementSettingsBackupsEnabled" class="w-4 h-4">
|
||||
Enable automatic backups
|
||||
</label>
|
||||
<div class="grid sm:grid-cols-3 gap-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-slate-700 mb-1">Time</label>
|
||||
<input type="time" id="managementSettingsBackupTime" class="w-full px-4 py-2 border border-slate-300 rounded-lg">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-slate-700 mb-1">Keep last archives</label>
|
||||
<input type="number" id="managementSettingsKeepLast" min="1" max="90" class="w-full px-4 py-2 border border-slate-300 rounded-lg">
|
||||
</div>
|
||||
<div class="flex items-end">
|
||||
<label class="flex items-center gap-2 text-sm text-slate-700">
|
||||
<input type="checkbox" id="managementSettingsIncludeAppSnapshot" class="w-4 h-4">
|
||||
Include site settings and audit snapshot
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="space-y-4">
|
||||
<div>
|
||||
<h4 class="text-lg font-semibold text-slate-800">Telegram notifications</h4>
|
||||
<p class="text-sm text-slate-500">Used for backup errors, restore events and scheduled notifications.</p>
|
||||
</div>
|
||||
<label class="flex items-center gap-2 text-sm text-slate-700">
|
||||
<input type="checkbox" id="managementSettingsTelegramEnabled" class="w-4 h-4">
|
||||
Enable Telegram notifications
|
||||
</label>
|
||||
<div class="grid sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-slate-700 mb-1">Bot token</label>
|
||||
<input type="text" id="managementSettingsTelegramToken" class="w-full px-4 py-2 border border-slate-300 rounded-lg" placeholder="123456:ABC...">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-slate-700 mb-1">Chat ID</label>
|
||||
<input type="text" id="managementSettingsTelegramChatId" class="w-full px-4 py-2 border border-slate-300 rounded-lg" placeholder="-1001234567890">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div class="flex justify-end">
|
||||
<button onclick="app.saveSettings()" class="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors">Save settings</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="managementSection-backups" class="hidden bg-white rounded-2xl border border-slate-200 h-full overflow-auto p-6 space-y-4">
|
||||
<div class="flex flex-wrap items-start justify-between gap-4">
|
||||
<div>
|
||||
<h3 class="text-2xl font-bold text-slate-800">Backups</h3>
|
||||
<p class="text-sm text-slate-500 mt-1">Archives contain the SQL dump and, if enabled, the application snapshot.</p>
|
||||
</div>
|
||||
<button onclick="app.createBackup()" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg">Create archive</button>
|
||||
</div>
|
||||
<label class="flex items-center gap-2 text-sm text-slate-700">
|
||||
<input type="checkbox" id="managementRestoreAppSnapshot" class="w-4 h-4" checked>
|
||||
Restore users, settings and audit snapshot together with the database
|
||||
</label>
|
||||
<div id="managementBackupsList" class="space-y-3"></div>
|
||||
</div>
|
||||
<div id="managementSection-users" class="hidden bg-white rounded-2xl border border-slate-200 h-full overflow-auto">
|
||||
<div class="grid xl:grid-cols-[1.15fr,0.85fr] min-h-full">
|
||||
<div class="border-r border-slate-200 overflow-auto">
|
||||
<div class="p-6 border-b border-slate-200">
|
||||
<h3 class="text-2xl font-bold text-slate-800">Users</h3>
|
||||
<p class="text-sm text-slate-500 mt-1">Create accounts and tune access to folders, tables and destructive actions.</p>
|
||||
</div>
|
||||
<table class="w-full text-sm">
|
||||
<thead class="bg-slate-50 border-b border-slate-200">
|
||||
<tr>
|
||||
<th class="text-left p-3">Username</th>
|
||||
<th class="text-left p-3">Role</th>
|
||||
<th class="text-left p-3">Status</th>
|
||||
<th class="text-left p-3">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="managementUsersTableBody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="p-6 overflow-auto space-y-3">
|
||||
<input type="hidden" id="managementUserEditMode" value="">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-slate-700 mb-1">Username</label>
|
||||
<input type="text" id="managementUserUsername" class="w-full px-4 py-2 border border-slate-300 rounded-lg">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-slate-700 mb-1">Password</label>
|
||||
<input type="text" id="managementUserPassword" class="w-full px-4 py-2 border border-slate-300 rounded-lg" placeholder="Leave empty to keep current">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-slate-700 mb-1">Role</label>
|
||||
<select id="managementUserRole" class="w-full px-4 py-2 border border-slate-300 rounded-lg">
|
||||
<option value="viewer">viewer</option>
|
||||
<option value="moderator">moderator</option>
|
||||
<option value="admin">admin</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-slate-700 mb-1">Readable folders</label>
|
||||
<details class="border border-slate-300 rounded-lg p-3">
|
||||
<summary class="cursor-pointer text-sm text-slate-700">Choose folders</summary>
|
||||
<div id="managementUserViewFoldersList" class="mt-3 grid gap-2"></div>
|
||||
</details>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-slate-700 mb-1">Editable tables</label>
|
||||
<details class="border border-slate-300 rounded-lg p-3">
|
||||
<summary class="cursor-pointer text-sm text-slate-700">Choose tables</summary>
|
||||
<div id="managementUserEditTablesList" class="mt-3 grid gap-2 max-h-48 overflow-auto"></div>
|
||||
</details>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-slate-700 mb-1">Deletable folders</label>
|
||||
<details class="border border-slate-300 rounded-lg p-3">
|
||||
<summary class="cursor-pointer text-sm text-slate-700">Choose folders</summary>
|
||||
<div id="managementUserDeleteFoldersList" class="mt-3 grid gap-2"></div>
|
||||
</details>
|
||||
</div>
|
||||
<label class="flex items-center gap-2 text-sm text-slate-700">
|
||||
<input type="checkbox" id="managementUserDisabled" class="w-4 h-4">
|
||||
Disable login
|
||||
</label>
|
||||
<div class="flex justify-end gap-3 pt-2">
|
||||
<button onclick="app.resetUserForm()" class="px-4 py-2 text-slate-600 hover:bg-slate-100 rounded-lg">Reset</button>
|
||||
<button onclick="app.saveUser()" class="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg">Save user</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="managementSection-audit" class="hidden bg-white rounded-2xl border border-slate-200 h-full overflow-auto p-6">
|
||||
<div class="flex flex-wrap items-start justify-between gap-4 mb-4">
|
||||
<div>
|
||||
<h3 class="text-2xl font-bold text-slate-800">Audit log</h3>
|
||||
<p class="text-sm text-slate-500 mt-1">Human-readable actions with time, source and actor.</p>
|
||||
</div>
|
||||
<button onclick="app.loadAuditLog()" class="px-4 py-2 bg-slate-100 text-slate-700 rounded-lg">Refresh</button>
|
||||
</div>
|
||||
<div id="managementAuditList" class="space-y-3"></div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user