135 lines
5.9 KiB
HTML
135 lines
5.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>통합 실행 로그: {{ job_id }}</title>
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='filename=' + 'style.css') if false else url_for('static', filename='style.css') }}">
|
|
<style>
|
|
body { padding: 20px; font-family: 'Inter', sans-serif; background-color: #f8faf9; }
|
|
.container { max-width: 1200px; margin: 0 auto; }
|
|
h2 { margin-top: 20px; margin-bottom: 20px; font-weight: 700; color: #1a1c1a; }
|
|
|
|
.toolbar { background: white; padding: 15px 20px; border-radius: 12px; margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
|
|
.filter-group { display: flex; align-items: center; gap: 10px; }
|
|
|
|
table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
|
|
th, td { padding: 14px 18px; border-bottom: 1px solid #edf2ef; font-size: 14px; text-align: left; }
|
|
th { background: #f2f5f3; color: #5f6661; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; font-size: 12px; }
|
|
|
|
tr.fail-row { background-color: #fff5f5; }
|
|
tr.fail-row:hover { background-color: #ffebeb; }
|
|
tr:hover { background-color: #fcfdfc; }
|
|
|
|
.badge { display: inline-block; padding: 4px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; }
|
|
.badge-pitch { background: #e3f2fd; color: #1976d2; }
|
|
.badge-event { background: #f3e5f5; color: #7b1fa2; }
|
|
|
|
.status-tag { display: flex; align-items: center; gap: 6px; font-weight: 600; }
|
|
.status-success { color: #2e7d32; }
|
|
.status-fail { color: #d32f2f; }
|
|
|
|
.error-msg { color: #d32f2f; font-size: 13px; font-weight: 500; font-family: monospace; background: rgba(211, 47, 47, 0.05); padding: 4px 8px; border-radius: 4px; }
|
|
.nav { margin-bottom: 20px; }
|
|
.back-btn { display: inline-block; padding: 10px 16px; background: #fff; border: 1px solid #d0d7d3; border-radius: 8px; text-decoration: none; color: #1a1c1a; font-weight: 600; transition: all 0.2s; }
|
|
.back-btn:hover { background: #f9f9f9; transform: translateX(-4px); }
|
|
|
|
/* Toggle Switch */
|
|
.switch { position: relative; display: inline-block; width: 44px; height: 24px; }
|
|
.switch input { opacity: 0; width: 0; height: 0; }
|
|
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #cbd5e0; transition: .4s; border-radius: 24px; }
|
|
.slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
|
|
input:checked + .slider { background-color: #f56565; }
|
|
input:checked + .slider:before { transform: translateX(20px); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="nav">
|
|
<a href="{{ url_for('index') }}" class="back-btn">← 대시보드로 돌아가기</a>
|
|
</div>
|
|
|
|
<div class="hero" style="margin-bottom: 30px;">
|
|
<h1 style="font-size: 28px; color: #1a1c1a; margin-bottom: 8px;">경기 통합 액션 로그</h1>
|
|
<p style="color: #5f6661;">Job ID: <code style="background: #e9ecef; padding: 2px 6px; border-radius: 4px;">{{ job_id }}</code></p>
|
|
</div>
|
|
|
|
<div class="toolbar">
|
|
<div class="filter-group">
|
|
<label class="switch">
|
|
<input type="checkbox" id="failFilter">
|
|
<span class="slider"></span>
|
|
</label>
|
|
<span style="font-weight: 600; color: #4a5568;">실패한 로그만 보기</span>
|
|
</div>
|
|
<div style="color: #718096; font-size: 14px;">
|
|
총 <strong>{{ logs|length }}</strong>개의 액션이 기록됨
|
|
</div>
|
|
</div>
|
|
|
|
<table id="logTable">
|
|
<thead>
|
|
<tr>
|
|
<th width="80">유형</th>
|
|
<th width="60">이닝</th>
|
|
<th width="150">대상(타자/교체)</th>
|
|
<th>동작 상세</th>
|
|
<th>실제 입력/결과</th>
|
|
<th width="100">상태</th>
|
|
<th>에러/비고</th>
|
|
<th width="100">시간</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% if logs %}
|
|
{% for log in logs %}
|
|
<tr class="log-row {% if not log.is_success %}fail-row{% endif %}" data-success="{{ log.is_success }}">
|
|
<td>
|
|
<span class="badge badge-{{ log.type }}">{{ '투구' if log.type == 'pitch' else '교체' }}</span>
|
|
</td>
|
|
<td>{{ log.inning }}</td>
|
|
<td style="font-weight: 600;">{{ log.target_name }}</td>
|
|
<td>{{ log.action_desc }}</td>
|
|
<td>{{ log.actual_desc or '-' }}</td>
|
|
<td>
|
|
<div class="status-tag status-{{ 'success' if log.is_success else 'fail' }}">
|
|
{{ '✔ 성공' if log.is_success else '✖ 실패' }}
|
|
</div>
|
|
</td>
|
|
<td>
|
|
{% if log.error_msg %}
|
|
<div class="error-msg">{{ log.error_msg }}</div>
|
|
{% else %}
|
|
-
|
|
{% endif %}
|
|
</td>
|
|
<td style="color: #718096; font-size: 12px;">{{ log.log_time.split(' ')[1] }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
{% else %}
|
|
<tr>
|
|
<td colspan="8" style="text-align: center; padding: 40px; color: #a0aec0;">기록된 로그가 없습니다.</td>
|
|
</tr>
|
|
{% endif %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<script>
|
|
const failFilter = document.getElementById('failFilter');
|
|
const logRows = document.querySelectorAll('.log-row');
|
|
|
|
failFilter.addEventListener('change', function() {
|
|
const showOnlyFail = this.checked;
|
|
logRows.forEach(row => {
|
|
const isSuccess = row.getAttribute('data-success') === 'True' || row.getAttribute('data-success') === '1';
|
|
if (showOnlyFail) {
|
|
row.style.display = isSuccess ? 'none' : '';
|
|
} else {
|
|
row.style.display = '';
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|