first jiwoos commit
This commit is contained in:
minjiu
422
webapp/templates/index.html
Normal file
422
webapp/templates/index.html
Normal file
@@ -0,0 +1,422 @@
|
||||
<!doctype html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>야구 자동화</title>
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<main class="page">
|
||||
<section class="panel hero">
|
||||
<div class="hero-copy">
|
||||
<h1>야구 자동화</h1>
|
||||
<p>경기 ID를 직접 넣거나 날짜와 팀을 고른 뒤, 라인업 또는 특정 이닝만 바로 입력합니다.</p>
|
||||
</div>
|
||||
<div class="preview-box">
|
||||
<span class="preview-label">현재 저장 대상 경기 ID</span>
|
||||
<strong id="game-id-preview">{{ defaults.game_id or '-' }}</strong>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{% if error %}
|
||||
<section class="panel notice error">{{ error }}</section>
|
||||
{% endif %}
|
||||
|
||||
<section class="panel">
|
||||
<form class="job-form" method="post" id="main-job-form" action="{{ url_for('start_job', job_type='lineup') }}">
|
||||
<div class="section-head compact">
|
||||
<h2>경기 선택</h2>
|
||||
<span class="helper">라인업은 자동으로 라인업 전용 리포트를 만들고, 경기기록은 선택한 이닝만 담아 실행합니다.</span>
|
||||
</div>
|
||||
|
||||
<div class="grid-two">
|
||||
<label>
|
||||
<span>경기 ID 입력 방식</span>
|
||||
<select name="game_id_mode" id="game_id_mode">
|
||||
<option value="direct" {% if defaults.game_id_mode == 'direct' %}selected{% endif %}>직접 입력</option>
|
||||
<option value="composed" {% if defaults.game_id_mode == 'composed' %}selected{% endif %}>날짜/팀 조합</option>
|
||||
<option value="parse" {% if defaults.game_id_mode == 'parse' %}selected{% endif %}>텍스트 붙여넣기</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
<span>관리자 게임번호</span>
|
||||
<select name="manager_mode" id="manager_mode">
|
||||
<option value="auto" {% if defaults.manager_mode == 'auto' %}selected{% endif %}>자동 찾기</option>
|
||||
<option value="manual" {% if defaults.manager_mode == 'manual' %}selected{% endif %}>직접 입력</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<label data-mode="direct">
|
||||
<span>경기 ID</span>
|
||||
<input name="game_id" placeholder="예: 20260404LGWO02026" value="{{ defaults.game_id }}">
|
||||
</label>
|
||||
|
||||
<div class="grid-two" data-mode="composed">
|
||||
<label>
|
||||
<span>경기 구분</span>
|
||||
<select name="game_type" id="game_type">
|
||||
{% for option in game_type_options %}
|
||||
<option value="{{ option.value }}" {% if defaults.game_type == option.value %}selected{% endif %}>{{ option.label }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
<span>경기 날짜</span>
|
||||
<input class="date-input" type="text" name="game_date" id="game_date" placeholder="날짜 선택" value="{{ defaults.game_date }}">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="grid-two" data-mode="composed">
|
||||
<label>
|
||||
<span>어웨이팀</span>
|
||||
<select name="away_team_code" id="away_team_code">
|
||||
<option value="">선택</option>
|
||||
{% for team in team_options %}
|
||||
<option value="{{ team.value }}" {% if defaults.away_team_code == team.value %}selected{% endif %}>{{ team.label }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
<span>홈팀</span>
|
||||
<select name="home_team_code" id="home_team_code">
|
||||
<option value="">선택</option>
|
||||
{% for team in team_options %}
|
||||
<option value="{{ team.value }}" {% if defaults.home_team_code == team.value %}selected{% endif %}>{{ team.label }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<label data-mode="composed">
|
||||
<span>더블헤더 순번</span>
|
||||
<select name="doubleheader_no" id="doubleheader_no">
|
||||
<option value="0" {% if defaults.doubleheader_no == '0' %}selected{% endif %}>0: 더블헤더 아님</option>
|
||||
<option value="1" {% if defaults.doubleheader_no == '1' %}selected{% endif %}>1: 더블헤더 1차전</option>
|
||||
<option value="2" {% if defaults.doubleheader_no == '2' %}selected{% endif %}>2: 더블헤더 2차전</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<div class="grid-parse" data-mode="parse">
|
||||
<label class="wide">
|
||||
<span>기록 사이트 텍스트</span>
|
||||
<input type="text" id="parse_text" placeholder="예: 11115 2026-04-11 정규경기 대전 한화 KIA" autocomplete="off">
|
||||
</label>
|
||||
<label>
|
||||
<span>더블헤더</span>
|
||||
<select name="doubleheader_no_parse" id="doubleheader_no_parse">
|
||||
<option value="0">일반</option>
|
||||
<option value="1">DH 1차전</option>
|
||||
<option value="2">DH 2차전</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<label data-manager-mode="manual">
|
||||
<span>관리자 게임번호</span>
|
||||
<input name="manager_game_no" placeholder="예: 11080" value="{{ defaults.manager_game_no }}">
|
||||
</label>
|
||||
|
||||
<div class="action-strip">
|
||||
<div class="inline-field inning-range-group">
|
||||
<div class="inning-select-item">
|
||||
<label>시작</label>
|
||||
<div class="inning-split">
|
||||
<select id="start_inning_num">
|
||||
{% for i in range(1, 13) %}
|
||||
<option value="{{ i }}" {% if defaults.start_inning_num == i|string %}selected{% endif %}>{{ i }}회</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<select id="start_inning_half">
|
||||
<option value="T" {% if defaults.start_inning_half == 'T' %}selected{% endif %}>초</option>
|
||||
<option value="B" {% if defaults.start_inning_half == 'B' %}selected{% endif %}>말</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="inning-select-item">
|
||||
<label>종료</label>
|
||||
<div class="inning-split">
|
||||
<select id="end_inning_num">
|
||||
{% for i in range(1, 13) %}
|
||||
<option value="{{ i }}" {% if defaults.end_inning_num == i|string %}selected{% endif %}>{{ i }}회</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<select id="end_inning_half">
|
||||
<option value="T" {% if defaults.end_inning_half == 'T' %}selected{% endif %}>초</option>
|
||||
<option value="B" {% if defaults.end_inning_half == 'B' %}selected{% endif %}>말</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="inning-select-item checkbox-item">
|
||||
<label>
|
||||
<input type="checkbox" id="all_innings_check"> 전체
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<input type="hidden" name="inning_no" id="inning_no" value="{{ defaults.inning_no }}">
|
||||
<div class="button-row">
|
||||
<button class="btn primary" type="submit" formaction="{{ url_for('start_job', job_type='lineup') }}" title="선택한 경기의 라인업 전용 리포트를 자동 생성한 뒤 라인업만 입력합니다.">라인업 입력</button>
|
||||
<button class="btn danger" type="submit" formaction="{{ url_for('start_job', job_type='record') }}" title="선택한 이닝만 담긴 리포트를 자동 생성한 뒤 그 이닝의 경기기록만 입력합니다.">경기기록 입력</button>
|
||||
<button class="btn warning" type="submit" formaction="{{ url_for('start_job', job_type='video_review') }}" title="경기의 모든 합의판정(비디오 판독) 내역을 모아서 한꺼번에 등록합니다.">합의판정 등록</button>
|
||||
<button class="btn" type="submit" formaction="{{ url_for('start_job', job_type='register_basic') }}" title="신규 경기 등록 화면에서 기본 경기 정보만 입력합니다.">경기 등록</button>
|
||||
<button class="btn" type="submit" formaction="{{ url_for('start_job', job_type='post_update') }}" title="전체 리포트를 자동 생성한 뒤 관중 수, 종료시간, 심판 정보를 입력합니다.">경기 후 정보</button>
|
||||
<button class="btn" type="submit" formaction="{{ url_for('start_job', job_type='finish') }}" title="전체 리포트를 자동 생성한 뒤 게임종료 팝업에서 승패/홀드/세이브/블론세이브를 입력합니다.">경기 마무리</button>
|
||||
<button class="btn" type="submit" formaction="{{ url_for('start_job', job_type='compare') }}" title="전체 리포트를 자동 생성한 뒤 history.txt와 비교해서 불일치 리포트를 만듭니다.">기록 비교</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="helper">
|
||||
경기 ID 형식은 `경기구분4 + 월일4 + 어웨이2 + 홈2 + 더블헤더1 + 연도4`입니다.
|
||||
정규경기는 앞 4자리에 연도를 쓰고, 와일드카드 `4444`, 준PO `3333`, PO `5555`, 한국시리즈 `7777`을 씁니다.
|
||||
</p>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section class="panel">
|
||||
<div class="section-head">
|
||||
<h2>최근 작업</h2>
|
||||
<a class="text-link" href="{{ url_for('jobs_api') }}" target="_blank" rel="noopener">JSON 보기</a>
|
||||
</div>
|
||||
<div id="job-list-container" class="job-list">
|
||||
{% if jobs %}
|
||||
{% for job in jobs %}
|
||||
<article class="job-card status-{{ job.status }}">
|
||||
<div class="job-top">
|
||||
<strong>{{ job.type }}</strong>
|
||||
<span class="status">{{ job.status }}</span>
|
||||
</div>
|
||||
<div class="job-body">
|
||||
<div>경기 ID: {{ job.game_id }}</div>
|
||||
<div>이닝: {{ job.inning_no or '-' }}</div>
|
||||
<div>게임번호: {{ job.manager_game_no or '-' }}</div>
|
||||
<div>생성: {{ job.created_at }}</div>
|
||||
</div>
|
||||
<div class="job-actions">
|
||||
<a class="text-link log-preview-link" href="{{ url_for('job_detail', job_id=job.job_id) }}">{{ job.log_preview }}</a>
|
||||
<a class="text-link" href="{{ url_for('job_log', job_id=job.job_id) }}" target="_blank" rel="noopener">로그</a>
|
||||
<a class="text-link" href="{{ url_for('view_db_logs', job_id=job.job_id) }}" target="_blank" rel="noopener">DB 상세로그</a>
|
||||
</div>
|
||||
</article>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<p class="empty">아직 작업이 없습니다.</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="panel">
|
||||
<div class="section-head">
|
||||
<h2>편의 기능</h2>
|
||||
</div>
|
||||
<div class="button-row">
|
||||
<form method="post" action="{{ url_for('clear_logs') }}">
|
||||
<button class="btn" type="submit">로그 초기화</button>
|
||||
</form>
|
||||
<form method="post" action="{{ url_for('clear_jobs') }}">
|
||||
<button class="btn" type="submit">작업 상태 초기화</button>
|
||||
</form>
|
||||
<form method="post" action="{{ url_for('clear_reports') }}">
|
||||
<button class="btn" type="submit">리포트 초기화</button>
|
||||
</form>
|
||||
<form method="post" action="{{ url_for('clear_runtime_profiles') }}">
|
||||
<button class="btn" type="submit">런타임 프로필 초기화</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ko.js"></script>
|
||||
<script>
|
||||
const modeSelect = document.getElementById('game_id_mode');
|
||||
const managerModeSelect = document.getElementById('manager_mode');
|
||||
const gameTypeSelect = document.getElementById('game_type');
|
||||
const dateInput = document.getElementById('game_date');
|
||||
const awayTeamCode = document.getElementById('away_team_code');
|
||||
const homeTeamCode = document.getElementById('home_team_code');
|
||||
const dhInput = document.getElementById('doubleheader_no');
|
||||
const dhInputParse = document.getElementById('doubleheader_no_parse');
|
||||
const directGameIdInput = document.querySelector('input[name="game_id"]');
|
||||
const parseInput = document.getElementById('parse_text');
|
||||
const managerGameNoInput = document.querySelector('input[name="manager_game_no"]');
|
||||
const preview = document.getElementById('game-id-preview');
|
||||
|
||||
flatpickr(dateInput, {
|
||||
locale: 'ko',
|
||||
dateFormat: 'Y-m-d',
|
||||
allowInput: true,
|
||||
disableMobile: true,
|
||||
defaultDate: dateInput?.value || null
|
||||
});
|
||||
|
||||
function syncModeVisibility() {
|
||||
const mode = modeSelect.value;
|
||||
document.querySelectorAll('[data-mode]').forEach((node) => {
|
||||
node.style.display = node.getAttribute('data-mode') === mode ? '' : 'none';
|
||||
});
|
||||
}
|
||||
|
||||
function syncManagerModeVisibility() {
|
||||
const mode = managerModeSelect.value;
|
||||
document.querySelectorAll('[data-manager-mode]').forEach((node) => {
|
||||
node.style.display = node.getAttribute('data-manager-mode') === mode ? '' : 'none';
|
||||
});
|
||||
}
|
||||
|
||||
function buildComposedId() {
|
||||
const rawDate = dateInput.value || '';
|
||||
const away = awayTeamCode.value || '';
|
||||
const home = homeTeamCode.value || '';
|
||||
const gameType = gameTypeSelect.value || 'regular';
|
||||
const mode = modeSelect.value;
|
||||
const dh = (mode === 'parse' ? dhInputParse.value : dhInput.value) || '0';
|
||||
if (!rawDate || !away || !home) return '-';
|
||||
const [year, month, day] = rawDate.split('-');
|
||||
const typeMap = {
|
||||
regular: year,
|
||||
wildcard: '4444',
|
||||
semi_playoff: '3333',
|
||||
playoff: '5555',
|
||||
korean_series: '7777',
|
||||
};
|
||||
return `${typeMap[gameType] || year}${month}${day}${away}${home}${dh}${year}`;
|
||||
}
|
||||
|
||||
function syncPreview() {
|
||||
const mode = modeSelect.value;
|
||||
preview.textContent = mode === 'direct'
|
||||
? (directGameIdInput.value.trim() || '-')
|
||||
: buildComposedId();
|
||||
}
|
||||
|
||||
function handleParse() {
|
||||
const text = parseInput.value.trim();
|
||||
if (!text) return;
|
||||
// 탭이나 공백으로 분리
|
||||
const parts = text.split(/\t|\s{2,}/).map((s) => s.trim()).filter(Boolean);
|
||||
if (parts.length < 5) return;
|
||||
|
||||
const teamMap = { 'KIA': 'HT', '한화': 'HH', '두산': 'OB', '롯데': 'LT', 'SSG': 'SK', '삼성': 'SS', '키움': 'WO', 'Hero': 'WO', 'LG': 'LG', 'NC': 'NC', 'KT': 'KT', '상무': 'SM' };
|
||||
const typeMap = { '정규경기': 'regular', '와일드카드': 'wildcard', '준플레이오프': 'semi_playoff', '플레이오프': 'playoff', '한국시리즈': 'korean_series', '시범경기': 'exhibition' };
|
||||
|
||||
// 1. 관리자 게임번호 (보통 첫 번째 숫자 뭉치)
|
||||
if (/^\d+$/.test(parts[0])) {
|
||||
managerGameNoInput.value = parts[0];
|
||||
managerModeSelect.value = 'manual';
|
||||
syncManagerModeVisibility();
|
||||
}
|
||||
|
||||
// 2. 날짜 찾기 (YYYY-MM-DD 형식)
|
||||
const datePart = parts.find(p => /^\d{4}-\d{2}-\d{2}$/.test(p));
|
||||
if (datePart) {
|
||||
dateInput.value = datePart;
|
||||
if (dateInput._flatpickr) dateInput._flatpickr.setDate(datePart);
|
||||
}
|
||||
|
||||
// 3. 경기 타입 찾기
|
||||
for (const [key, val] of Object.entries(typeMap)) {
|
||||
if (text.includes(key)) {
|
||||
game_type.value = val;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// 4. 팀 찾기 (원정 vs 홈 구분)
|
||||
// 네이버 일정 텍스트는 보통 [시간] [종류] [장소] [홈팀] [원정팀] 순서인 경우가 많음
|
||||
// 여기서는 텍스트에 포함된 팀 이름들을 순서대로 추출
|
||||
const foundTeams = [];
|
||||
const words = text.split(/[\s\t]+/);
|
||||
words.forEach(word => {
|
||||
for (const [name, code] of Object.entries(teamMap)) {
|
||||
if (word.includes(name) && !foundTeams.some(t => t.code === code)) {
|
||||
foundTeams.push({ name, code });
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
if (foundTeams.length >= 2) {
|
||||
// 보통 일정 텍스트 상 먼저 나오는 팀이 홈팀인 경우가 많으므로 (네이버 기준)
|
||||
homeTeamCode.value = foundTeams[0].code;
|
||||
awayTeamCode.value = foundTeams[1].code;
|
||||
}
|
||||
|
||||
syncPreview();
|
||||
}
|
||||
|
||||
async function refreshDashboard() {
|
||||
try {
|
||||
const response = await fetch('/api/dashboard');
|
||||
const data = await response.json();
|
||||
const container = document.getElementById('job-list-container');
|
||||
if (!container) return;
|
||||
container.innerHTML = data.jobs.length ? data.jobs.map((job) => `
|
||||
<article class="job-card status-${job.status}">
|
||||
<div class="job-top"><strong>${job.type}</strong><span class="status">${job.status}</span></div>
|
||||
<div class="job-body">
|
||||
<div>경기 ID: ${job.game_id}</div>
|
||||
<div>이닝: ${job.inning_no || '-'}</div>
|
||||
<div>게임번호: ${job.manager_game_no || '-'}</div>
|
||||
<div>생성: ${job.created_at}</div>
|
||||
</div>
|
||||
<div class="job-actions">
|
||||
<a class="text-link log-preview-link" href="/jobs/${job.job_id}">${job.log_preview}</a>
|
||||
<a class="text-link" href="/jobs/${job.job_id}/log" target="_blank" rel="noopener">로그</a>
|
||||
<a class="text-link" href="/db-logs/${job.job_id}" target="_blank" rel="noopener">DB 상세로그</a>
|
||||
</div>
|
||||
</article>
|
||||
`).join('') : '<p class="empty">아직 작업이 없습니다.</p>';
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
|
||||
const startInningNum = document.getElementById('start_inning_num');
|
||||
const startInningHalf = document.getElementById('start_inning_half');
|
||||
const endInningNum = document.getElementById('end_inning_num');
|
||||
const endInningHalf = document.getElementById('end_inning_half');
|
||||
const inningNoHidden = document.getElementById('inning_no');
|
||||
const allInningsCheck = document.getElementById('all_innings_check');
|
||||
|
||||
function syncInningNo() {
|
||||
if (allInningsCheck.checked) {
|
||||
inningNoHidden.value = 'all';
|
||||
[startInningNum, startInningHalf, endInningNum, endInningHalf].forEach(el => el.disabled = true);
|
||||
} else {
|
||||
[startInningNum, startInningHalf, endInningNum, endInningHalf].forEach(el => el.disabled = false);
|
||||
const start = startInningNum.value + startInningHalf.value;
|
||||
const end = endInningNum.value + endInningHalf.value;
|
||||
if (start === end) {
|
||||
inningNoHidden.value = start;
|
||||
} else {
|
||||
inningNoHidden.value = `${start}-${end}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[startInningNum, startInningHalf, endInningNum, endInningHalf].forEach(node => {
|
||||
node.addEventListener('change', syncInningNo);
|
||||
});
|
||||
allInningsCheck.addEventListener('change', syncInningNo);
|
||||
|
||||
// 초기 상태 반영
|
||||
if (inningNoHidden.value === 'all') {
|
||||
allInningsCheck.checked = true;
|
||||
}
|
||||
syncInningNo();
|
||||
|
||||
modeSelect.addEventListener('change', syncModeVisibility);
|
||||
managerModeSelect.addEventListener('change', syncManagerModeVisibility);
|
||||
[gameTypeSelect, dateInput, awayTeamCode, homeTeamCode, dhInput, dhInputParse, directGameIdInput, modeSelect].forEach((node) => {
|
||||
node?.addEventListener('input', syncPreview);
|
||||
node?.addEventListener('change', syncPreview);
|
||||
});
|
||||
parseInput?.addEventListener('input', handleParse);
|
||||
|
||||
syncModeVisibility();
|
||||
syncManagerModeVisibility();
|
||||
syncPreview();
|
||||
setInterval(refreshDashboard, 5000);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user