nouffer/rogaining_srv
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

initialize supervisor...still has bugs

Browse Source
This commit is contained in:
hayano
2024-10-28 02:20:28 +00:00
parent 051916f9f6
commit 2913a435c1
10 changed files with 842 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

274
supervisor-html.html Normal file
View File

@ -0,0 +1,274 @@
<!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>