275 lines
12 KiB
HTML
275 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ja">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>スーパーバイザーパネル</title>
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.0/Sortable.min.js"></script>
|
|
</head>
|
|
<body class="bg-gray-50">
|
|
<div class="container mx-auto p-4">
|
|
<div class="bg-white rounded-lg shadow-lg p-6 mb-6">
|
|
<h1 class="text-2xl font-bold mb-6">スーパーバイザーパネル</h1>
|
|
|
|
<!-- 選択フォーム -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">イベントコード</label>
|
|
<select id="eventCode" class="w-full border border-gray-300 rounded-md px-3 py-2">
|
|
<option value="">イベントを選択してください</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">ゼッケン番号</label>
|
|
<select id="zekkenNumber" class="w-full border border-gray-300 rounded-md px-3 py-2">
|
|
<option value="">ゼッケン番号を選択してください</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- チーム情報サマリー -->
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
|
|
<div class="bg-gray-50 p-4 rounded-lg">
|
|
<div class="text-sm text-gray-500">チーム名</div>
|
|
<div id="teamName" class="font-semibold"></div>
|
|
</div>
|
|
<div class="bg-gray-50 p-4 rounded-lg">
|
|
<div class="text-sm text-gray-500">メンバー</div>
|
|
<div id="members" class="font-semibold"></div>
|
|
</div>
|
|
<div class="bg-gray-50 p-4 rounded-lg">
|
|
<div class="text-sm text-gray-500">スタート時刻</div>
|
|
<div id="startTime" class="font-semibold"></div>
|
|
</div>
|
|
<div class="bg-gray-50 p-4 rounded-lg">
|
|
<div class="text-sm text-gray-500">ゴール時刻</div>
|
|
<div id="goalTime" class="font-semibold"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
|
|
<div class="bg-gray-50 p-4 rounded-lg">
|
|
<div class="text-sm text-gray-500">チェックインポイント合計</div>
|
|
<div id="totalPoints" class="font-semibold"></div>
|
|
</div>
|
|
<div class="bg-gray-50 p-4 rounded-lg">
|
|
<div class="text-sm text-gray-500">買い物ポイント合計</div>
|
|
<div id="buyPoints" class="font-semibold"></div>
|
|
</div>
|
|
<div class="bg-gray-50 p-4 rounded-lg">
|
|
<div class="text-sm text-gray-500">遅刻減点</div>
|
|
<div id="latePoints" class="font-semibold text-red-600"></div>
|
|
</div>
|
|
<div class="bg-gray-50 p-4 rounded-lg">
|
|
<div class="text-sm text-gray-500">総合計ポイント</div>
|
|
<div id="finalPoints" class="font-semibold text-blue-600"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- チェックインデータテーブル -->
|
|
<div class="overflow-x-auto">
|
|
<table class="min-w-full divide-y divide-gray-200">
|
|
<thead class="bg-gray-50">
|
|
<tr>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">順序</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">CP番号</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">チェックイン時刻</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">検証</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">ポイント</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="checkinList" class="bg-white divide-y divide-gray-200">
|
|
<!-- JavaScript で動的に生成 -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- アクションボタン -->
|
|
<div class="mt-6 flex justify-end space-x-4">
|
|
<button id="saveButton" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
|
|
保存
|
|
</button>
|
|
<button id="exportButton" class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700">
|
|
通過証明書出力
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Sortable初期化
|
|
const checkinList = document.getElementById('checkinList');
|
|
new Sortable(checkinList, {
|
|
animation: 150,
|
|
onEnd: function(evt) {
|
|
updatePathOrders();
|
|
}
|
|
});
|
|
|
|
// イベントコード変更時の処理
|
|
document.getElementById('eventCode').addEventListener('change', function(e) {
|
|
loadZekkenNumbers(e.target.value);
|
|
});
|
|
|
|
// ゼッケン番号変更時の処理
|
|
document.getElementById('zekkenNumber').addEventListener('change', function(e) {
|
|
loadTeamData(e.target.value);
|
|
});
|
|
|
|
// チェックボックス変更時の処理
|
|
checkinList.addEventListener('change', function(e) {
|
|
if (e.target.type === 'checkbox') {
|
|
updateValidation(e.target);
|
|
}
|
|
});
|
|
|
|
// 保存ボタンの処理
|
|
document.getElementById('saveButton').addEventListener('click', saveChanges);
|
|
|
|
// Excel出力ボタンの処理
|
|
document.getElementById('exportButton').addEventListener('click', exportExcel);
|
|
|
|
// 初期データ読み込み
|
|
loadEventCodes();
|
|
});
|
|
|
|
function loadEventCodes() {
|
|
// APIからイベントコードを取得して選択肢を設定
|
|
fetch('/api/events')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
const select = document.getElementById('eventCode');
|
|
data.forEach(event => {
|
|
const option = document.createElement('option');
|
|
option.value = event.code;
|
|
option.textContent = event.name;
|
|
select.appendChild(option);
|
|
});
|
|
});
|
|
}
|
|
|
|
function loadZekkenNumbers(eventCode) {
|
|
// APIからゼッケン番号を取得して選択肢を設定
|
|
fetch(`/api/zekken-numbers/${eventCode}`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
const select = document.getElementById('zekkenNumber');
|
|
select.innerHTML = '<option value="">ゼッケン番号を選択してください</option>';
|
|
data.forEach(number => {
|
|
const option = document.createElement('option');
|
|
option.value = number;
|
|
option.textContent = number;
|
|
select.appendChild(option);
|
|
});
|
|
});
|
|
}
|
|
|
|
function loadTeamData(zekkenNumber) {
|
|
// チーム情報とチェックインデータを取得
|
|
Promise.all([
|
|
fetch(`/api/team-info/${zekkenNumber}`),
|
|
fetch(`/api/checkins/${zekkenNumber}`)
|
|
]).then(responses => Promise.all(responses.map(r => r.json())))
|
|
.then(([teamInfo, checkins]) => {
|
|
updateTeamInfo(teamInfo);
|
|
updateCheckinList(checkins);
|
|
calculatePoints();
|
|
});
|
|
}
|
|
|
|
function updateTeamInfo(teamInfo) {
|
|
document.getElementById('teamName').textContent = teamInfo.team_name;
|
|
document.getElementById('members').textContent = teamInfo.members;
|
|
document.getElementById('startTime').textContent = teamInfo.start_time;
|
|
document.getElementById('goalTime').textContent = teamInfo.goal_time;
|
|
document.getElementById('latePoints').textContent = teamInfo.late_points;
|
|
}
|
|
|
|
function updateCheckinList(checkins) {
|
|
const tbody = document.getElementById('checkinList');
|
|
tbody.innerHTML = '';
|
|
|
|
checkins.forEach((checkin, index) => {
|
|
const tr = document.createElement('tr');
|
|
tr.dataset.id = checkin.id;
|
|
tr.innerHTML = `
|
|
<td class="px-6 py-4">${index + 1}</td>
|
|
<td class="px-6 py-4">${checkin.cp_number}</td>
|
|
<td class="px-6 py-4">${formatDateTime(checkin.create_at)}</td>
|
|
<td class="px-6 py-4">
|
|
<input type="checkbox" ${checkin.validate_location ? 'checked' : ''}
|
|
class="h-4 w-4 text-blue-600 rounded validate-checkbox">
|
|
</td>
|
|
<td class="px-6 py-4">${checkin.points}</td>
|
|
`;
|
|
tbody.appendChild(tr);
|
|
});
|
|
}
|
|
|
|
function updatePathOrders() {
|
|
const rows = Array.from(document.getElementById('checkinList').children);
|
|
rows.forEach((row, index) => {
|
|
row.children[0].textContent = index + 1;
|
|
});
|
|
}
|
|
|
|
function calculatePoints() {
|
|
const rows = Array.from(document.getElementById('checkinList').children);
|
|
let totalPoints = 0;
|
|
let buyPoints = 0;
|
|
|
|
rows.forEach(row => {
|
|
const points = parseInt(row.children[4].textContent);
|
|
if (!isNaN(points)) {
|
|
totalPoints += points;
|
|
if (row.dataset.buyFlag === 'true') {
|
|
buyPoints += points;
|
|
}
|
|
}
|
|
});
|
|
|
|
const latePoints = parseInt(document.getElementById('latePoints').textContent) || 0;
|
|
const finalPoints = totalPoints + buyPoints - latePoints;
|
|
|
|
document.getElementById('totalPoints').textContent = totalPoints;
|
|
document.getElementById('buyPoints').textContent = buyPoints;
|
|
document.getElementById('finalPoints').textContent = finalPoints;
|
|
}
|
|
|
|
function formatDateTime(dateString) {
|
|
return new Date(dateString).toLocaleString('ja-JP');
|
|
}
|
|
|
|
function saveChanges() {
|
|
const rows = Array.from(document.getElementById('checkinList').children);
|
|
const updates = rows.map((row, index) => ({
|
|
id: row.dataset.id,
|
|
path_order: index + 1,
|
|
validate_location: row.querySelector('.validate-checkbox').checked
|
|
}));
|
|
|
|
fetch('/api/update-checkins', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify(updates)
|
|
}).then(response => {
|
|
if (response.ok) {
|
|
alert('保存しました');
|
|
} else {
|
|
alert('保存に失敗しました');
|
|
}
|
|
});
|
|
}
|
|
|
|
function exportExcel() {
|
|
const zekkenNumber = document.getElementById('zekkenNumber').value;
|
|
window.location.href = `/api/export-excel/${zekkenNumber}`;
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|