Show queue and database side by side

This commit is contained in:
“Naeel” 2026-02-23 19:02:31 +04:00
parent 61c6297d41
commit c578c12223

View File

@ -12,7 +12,7 @@
.header-content { display: flex; align-items: center; justify-content: space-between; } .header-content { display: flex; align-items: center; justify-content: space-between; }
.logo { height: 40px; } .logo { height: 40px; }
.main-content { padding: 32px 0; } .main-content { padding: 32px 0; }
.card { background: #fff; padding: 28px; border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.04); margin-bottom: 20px; } .card { background: #fff; padding: 24px; border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.04); margin-bottom: 20px; }
.btn { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 12px 24px; border: none; border-radius: 8px; font-weight: 600; font-size: 14px; } .btn { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 12px 24px; border: none; border-radius: 8px; font-weight: 600; font-size: 14px; }
.btn-primary { background: var(--nubes-blue); color: #fff; } .btn-primary { background: var(--nubes-blue); color: #fff; }
.btn-action { padding: 12px; background: #fff; border: 1px solid var(--nubes-border); border-radius: 8px; font-size: 22px; line-height: 1; cursor: pointer; min-width: 46px; } .btn-action { padding: 12px; background: #fff; border: 1px solid var(--nubes-border); border-radius: 8px; font-size: 22px; line-height: 1; cursor: pointer; min-width: 46px; }
@ -20,8 +20,8 @@
.input-group { display: flex; gap: 12px; margin-bottom: 12px; } .input-group { display: flex; gap: 12px; margin-bottom: 12px; }
input[type="text"] { flex-grow: 1; padding: 12px 16px; border: 1px solid var(--nubes-border); border-radius: 8px; font-size: 14px; } input[type="text"] { flex-grow: 1; padding: 12px 16px; border: 1px solid var(--nubes-border); border-radius: 8px; font-size: 14px; }
table { width: 100%; border-collapse: collapse; } table { width: 100%; border-collapse: collapse; }
th { text-align: left; padding: 12px; font-size: 12px; text-transform: uppercase; color: #6B7280; border-bottom: 1px solid var(--nubes-border); } th { text-align: left; padding: 8px 10px; font-size: 11px; text-transform: uppercase; color: #6B7280; border-bottom: 1px solid var(--nubes-border); }
td { padding: 12px; border-bottom: 1px solid var(--nubes-border); vertical-align: top; } td { padding: 8px 10px; font-size: 12px; border-bottom: 1px solid var(--nubes-border); vertical-align: top; }
tbody tr:nth-child(even) { background-color: #FAFBFC; } tbody tr:nth-child(even) { background-color: #FAFBFC; }
tbody tr:hover { background-color: #F3F4F6; } tbody tr:hover { background-color: #F3F4F6; }
.id-cell { font-family: monospace; color: #9CA3AF; width: 60px; } .id-cell { font-family: monospace; color: #9CA3AF; width: 60px; }
@ -37,6 +37,14 @@
.top-info { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .top-info { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.link-row { display: flex; gap: 10px; align-items: center; } .link-row { display: flex; gap: 10px; align-items: center; }
.link-row a { color: var(--nubes-blue); text-decoration: none; font-weight: 600; } .link-row a { color: var(--nubes-blue); text-decoration: none; font-weight: 600; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.tight { font-size: 12px; }
.col-queued { width: 120px; }
.col-processed { width: 120px; }
.col-status { width: 90px; }
@media (max-width: 980px) {
.split { grid-template-columns: 1fr; }
}
</style> </style>
</head> </head>
<body> <body>
@ -112,17 +120,18 @@
<div class="small">💾 — сохранить (update), 🗑 — удалить</div> <div class="small">💾 — сохранить (update), 🗑 — удалить</div>
</div> </div>
<div class="split">
<div class="card"> <div class="card">
<h3>Очередь (лог отправки)</h3> <h3>Очередь (лог отправки)</h3>
<table> <table class="tight">
<thead> <thead>
<tr> <tr>
<th>ID</th> <th>ID</th>
<th>Действие</th> <th>Действие</th>
<th>Текст</th> <th>Текст</th>
<th>Queued</th> <th class="col-queued">Queued</th>
<th>Processed</th> <th class="col-processed">Processed</th>
<th>Статус</th> <th class="col-status">Статус</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -145,7 +154,7 @@
<div class="card"> <div class="card">
<h3>База (фактические записи)</h3> <h3>База (фактические записи)</h3>
<cfquery name="qGet" datasource="#request.DS#">SELECT * FROM #request.tableName# ORDER BY id DESC LIMIT 20</cfquery> <cfquery name="qGet" datasource="#request.DS#">SELECT * FROM #request.tableName# ORDER BY id DESC LIMIT 20</cfquery>
<table> <table class="tight">
<thead><tr><th>ID</th><th>Содержимое</th><th>Действия</th></tr></thead> <thead><tr><th>ID</th><th>Содержимое</th><th>Действия</th></tr></thead>
<tbody> <tbody>
<cfoutput query="qGet"> <cfoutput query="qGet">
@ -170,6 +179,7 @@
</tbody> </tbody>
</table> </table>
</div> </div>
</div>
</div> </div>
</body> </body>
</html> </html>