Finish supervisor , 残りはExcelとセキュリティ.

supervisor/html/index.html

@@ -94,6 +94,7 @@
                             <th class="px-1 py-3 text-left text-xs font-medium text-gray-500 uppercase">買物申請</th>
                             <th class="px-1 py-3 text-left text-xs font-medium text-gray-500 uppercase">通過審査</th>
                             <th class="px-2 py-3 text-left text-xs font-medium text-gray-500 uppercase">獲得点数</th>
+			    <th class="w-8"></th> <!-- 削除ボタン用 -->
                         </tr>
                     </thead>
                     <tbody id="checkinList" class="bg-white divide-y divide-gray-200">
@@ -104,7 +105,7 @@
 
             <!-- アクションボタン -->
             <div class="mt-6 flex justify-end space-x-4">
-		<button onclick="showAddCPModal()" class="px-4 py-2 bg-blue-500 text-white rounded">
+		<button onclick="showAddCPDialog()" class="px-4 py-2 bg-blue-500 text-white rounded">
                     新規CP追加
 	        </button>
                 <button id="saveButton" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
@@ -119,7 +120,9 @@
 
     <script>
 	// APIのベースURLを環境に応じて設定
-        const API_BASE_URL = '/api';
+        const API_BASE_URL = 'http://rogaining.sumasen.net/api';
+        let original_goal_time = '';
+	let selected_event_code = '';
 
 	// イベントリスナーの設定
         document.addEventListener('DOMContentLoaded', function() {
@@ -143,12 +146,14 @@
                     alert('イベントコードを選択してください');
                     return;
                 }
+		selected_event_code = eventCode;
                 loadTeamData(e.target.value, eventCode);
             });
 
             // イベントコード変更時の処理
-            document.getElementById('eventCode').addEventListener('change', function(e) {
+            eventCodeSelect.addEventListener('change', function(e) {
                 loadZekkenNumbers(e.target.value);
+                handleEventSelect(e.target.value);
             });
 
             // チェックボックス変更時の処理
@@ -158,6 +163,7 @@
             //    }
             //});
 
+
             // 保存ボタンの処理
             document.getElementById('saveButton').addEventListener('click', saveChanges);
 
@@ -335,7 +341,7 @@
                    validateElement.classList.add('text-red-600');
                    validateElement.classList.remove('text-green-600');
                } else {
-                   validateElement.textContent = '合格';
+                   validateElement.textContent = '完走';
                    validateElement.classList.add('text-green-600');
                    validateElement.classList.remove('text-red-600');
                }
@@ -426,6 +432,7 @@
         
                 // ゴール時刻の表示を更新
                 updateGoalTimeDisplay(teamData.end_datetime);
+		original_goal_time = teamData.end_datetime;
 
                 // イベントコードに対応するイベントを検索
                 //const event = eventData.find(e => e.code === document.getElementById('eventCode').value);
@@ -444,11 +451,35 @@
                     '未ゴール';
                 goalTimeDisplay.textContent = goalTime;
 
+		console.info('teamData.goal_photo = ',teamData.goal_photo );
+
                 if (goalTime === '-') {
                     goalTimeDisplay.classList.add('cursor-pointer');
                     goalTimeDisplay.onclick = () => editGoalTime(goalTimeDisplay);
                 }
 
+		console.info("step 0");
+        // ゴール時計の表示を更新
+        const goalTimeElement = document.getElementById('goalTime');
+        if (teamData.goal_photo) {
+            // 画像要素を作成
+		console.info("step 1");
+            const img = document.createElement('img');
+            img.src = teamData.goal_photo;
+            img.classList.add('h-32', 'w-auto', 'object-contain', 'cursor-pointer');
+            img.onclick = () => showLargeImage(teamData.goal_photo);
+            
+		console.info("step 2");
+            // 既存の内容をクリアして画像を追加
+            goalTimeElement.innerHTML = '';
+            goalTimeElement.appendChild(img);
+            
+            console.info("Goal photo displayed: ",teamData.goal_photo);
+        } else {
+            goalTimeElement.textContent = '画像なし';
+            console.info("No goal photo available");
+        }
+
 
                 // チェックインリストの更新
                 const tbody = document.getElementById('checkinList');
@@ -460,23 +491,24 @@
                 checkinsData.forEach((checkin, index) => {
                     const tr = document.createElement('tr');
                     tr.dataset.id = checkin.id;
+		    tr.dataset.local_id = index+1;
                     tr.dataset.cpNumber = checkin.cp_number;
                     tr.dataset.buyPoint = checkin.buy_point;
 		    tr.dataset.checkinPoint = checkin.checkin_point;
+		    tr.dataset.path_order = index+1;
                     const bgColor = checkin.buy_point > 0 ? 'bg-blue-100' : '';
                     
                     tr.innerHTML = `
                         <td class="px-1 py-3 cursor-move">
                             <i class="fas fa-bars text-gray-400"></i>
                         </td>
-                        <td class="px-2 py-3">${checkin.path_order}</td>
+                        <td class="px-2 py-3">${tr.dataset.path_order}</td>
                         <td class="px-2 py-3">
                             ${checkin.photos ? 
                                 `<img src="/media/compressed/${checkin.photos}" class="h-20 w-20 object-cover rounded" onclick="showLargeImage(this.src)">` : ''}
                         </td>
                         <td class="px-2 py-3">
-                            ${checkin.image_address ? 
-                                `<img src="${checkin.image_address}" class="h-20 w-20 object-cover rounded" onclick="showLargeImage(this.src)">` : ''}
+	   		    ${checkin.cp_number===-1 || checkin.image_address===null ? "" : `<img src="${checkin.image_address}" class="h-20 w-20 object-cover rounded" onclick="showLargeImage(this.src)">`}
                         </td>
                         <td class="px-2 py-3 ${bgColor}">
                             <div class="font-bold">${checkin.sub_loc_id}</div>
@@ -498,6 +530,8 @@
                                 onchange="updatePoints(this)">
                         </td>
                         <td class="px-2 py-3 point-value">${calculatePointsForCheckin(checkin)}</td>
+                        <td class="px-2 py-4">
+                        </td>	
                     `;
                     tbody.appendChild(tr);
 
@@ -603,54 +637,44 @@
             document.getElementById('latePoints').textContent = teamInfo.late_points;
         }
 
-        // 通過リストの表示...呼ばれていない
-        function nouse_updateCheckinList(checkins) {
-            const tbody = document.getElementById('checkinList');
-            tbody.innerHTML = '';
-
-            checkins.forEach((checkin, index) => {
-                const tr = document.createElement('tr');
-                tr.dataset.id = checkin.id;
-                tr.dataset.cpNumber = checkin.cp_number;
-                
-                const bgColor = checkin.buy_point > 0 ? 'bg-blue-100' : 'bg-red-100';
-                
-                tr.innerHTML = `
-                    <td class="px-6 py-4">${checkin.path_order}</td>
-                    <td class="px-6 py-4 ${bgColor}">
-                        <div class="font-bold">${checkin.sub_loc_id}</div>
-                        <div class="text-sm">${checkin.location_name}</div>
-                    </td>
-                    <td class="px-6 py-4">
-                        ${checkin.image_address ? 
-                            `<img src="${checkin.image_address}" class="h-20 w-20 object-cover rounded">` : ''}
-                        ${checkin.receipt_address && checkin.buy_flag ? 
-                            `<img src="${checkin.receipt_address}" class="h-20 w-20 object-cover rounded ml-2">` : ''}
-                    </td>
-                    <td class="px-6 py-4">${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"
-                            onchange="updatePoints(this)">
-                    </td>
-                    <td class="px-6 py-4">
-                        ${checkin.buy_point > 0 ? `
-                            <input type="checkbox" 
-                                ${checkin.buy_flag ? 'checked' : ''}
-                                class="h-4 w-4 text-green-600 rounded buy-checkbox"
-                                onchange="updateBuyPoints(this)">
-                        ` : ''}
-                    </td>
-                    <td class="px-6 py-4 point-value">${checkin.points}</td>
-                `;
-                tbody.appendChild(tr);
-            });
-	    calculateTotalPoints();
+function deleteRow(rowIndex) {
+    try {
+        if (!confirm(`このチェックインを削除してもよろしいですか？`)) {
+            return;
         }
 
+        const tbody = document.getElementById('checkinList');
+        const rows = tbody.getElementsByTagName('tr');
+
+	let target = null;
+	for (const row of rows) {
+	    if( Number(row.dataset.local_id) === Number(rowIndex) ) {
+		target = row;
+		break;
+	    }
+	}
+
+        // 対象の行が見つからなかった場合
+        if (!target) {
+            throw new Error('Target row not found');
+        }
+
+	target.remove();
+	
+        updatePathOrders();	
+
+        // ポイントを再計算
+        calculatePoints();
+        
+    } catch (error) {
+        console.error('Error deleting row:', error);
+        alert('行の削除に失敗しました');
+    }
+}
+
+
        // 削除機能
-        async function deleteCheckin(id) {
+        async function old_deleteCheckin(id) {
             if (!confirm('このチェックインを削除してもよろしいですか？')) {
                 return;
             }
@@ -793,6 +817,52 @@
             modal.onclick = () => modal.remove();
             document.body.appendChild(modal);
         }
+        
+        // 新規CP追加のための関数
+        function showAddCPDialog() {
+            const cpInput = prompt('追加するCPをカンマ区切りで入力してください（例：CP1,CP2,CP3）');
+            if (!cpInput) return;
+        
+            const cpList = cpInput.split(',').map(cp => cp.trim()).filter(cp => cp);
+            if (cpList.length === 0) {
+                alert('有効なCPを入力してください');
+                return;
+            }
+        
+            // 既存のチェックインデータを取得
+            const existingCheckins = getCurrentCheckins(); // 現在の表示データを取得する関数
+            const newCheckins = [];
+
+	    console.info('existingCheckins.length =',existingCheckins.length);
+
+            cpList.forEach((cp,index) => {
+		cploc = findLocationByCP(cp);
+		console.info('location=',cploc);
+		console.info('index = ',index);
+                newCheckins.push({
+		    id: cploc.id,
+                    order: existingCheckins.length + index + 1,
+                    photos: cploc.photos,
+                    actual_photo: '-',
+                    subLocId: cploc.subLocId,
+                    cp: cploc.cp,
+                    location_name: cploc.name,
+		    checkinPoint: Number(cploc.checkinPoint),
+		    buyPoint: Number(cploc.buyPoint),
+                    points: Number(cploc.checkinPoint),
+		    buy_flag: false,
+		    validate_location: true
+                });
+            });
+
+	    console.info('newCheckins=',newCheckins);
+
+            // 新しいCPを表に追加
+            addCheckinsToTable(newCheckins);
+	    updatePathOrders();
+	    calculatePoints();  // 総合ポイントの計算
+        }
+
 
         // 新規CP追加用のモーダル
         function showAddCPModal() {
@@ -860,7 +930,9 @@
         function updatePathOrders() {
             const rows = Array.from(document.getElementById('checkinList').children);
             rows.forEach((row, index) => {
+		console.info('row=',row);
                 row.children[1].textContent = index + 1;
+		row.dataset.path_order = index + 1;
             });
         }
 
@@ -904,33 +976,352 @@
             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
-            }));
+        // 保存機能の実装
+        async function saveChanges() {
+            const zekkenNumber = document.querySelector('#zekkenNumber').value;
+            const eventCode = document.querySelector('#eventCode').value;
+      
+	    const display = document.getElementById('goalTimeDisplay');
 
-            fetch('${API_BASE_URL}/update_checkins', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify(updates)
-            }).then(response => {
-                if (response.ok) {
-                    alert('保存しました');
-                } else {
-                    alert('保存に失敗しました');
+            if (!display) {
+                console.error('Goal time elements not found');
+                return;
+            }
+
+	    let goalTime = display.textContent;
+ 	    console.info('Goal time = ',goalTime);
+
+	    try { 
+                const checkins = getCurrentCheckins(); // 現在の表示データを取得
+                
+                const response = await fetch(`${API_BASE_URL}/update_checkins/`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({
+                        zekken_number: zekkenNumber,
+                        event_code: eventCode,
+                        checkins: checkins
+                    })
+                });
+        
+                if (!response.ok) {
+                    throw new Error(`HTTP error! status: ${response.status}`);
                 }
-            });
+        
+                const success = await saveGoalTime(goalTime, zekkenNumber, eventCode);
+                if (success) {
+                    alert('ゴール時間を保存しました');
+                }
+
+                alert('保存が完了しました');
+            } catch (error) {
+                console.error('保存中にエラーが発生しました:', error);
+                alert('保存中にエラーが発生しました');
+            }
         }
 
-        function exportExcel() {
+
+// ゴール時間の更新と新規作成を処理する関数
+async function saveGoalTime(goalTimeStr, zekkenNumber, eventCode) {
+    try {
+        const [teamResponse, checkinsResponse] = await Promise.all([
+            fetch(`${API_BASE_URL}/team_info/${zekkenNumber}/`),
+        ]);
+       
+        // 各レスポンスのステータスを個別にチェック
+        if (!teamResponse.ok) 
+            throw new Error(`Team info fetch failed with status ${teamResponse.status}`);
+
+        
+        const teamData = await teamResponse.json();
+	const teamName = teamData.team_name; 
+
+        // 日付と時刻を結合して完全な日時文字列を作成
+        //const currentDate = new Date().toISOString().split('T')[0];
+        //const fullGoalTime = `${currentDate}T${goalTimeStr}:00`;
+
+        const formattedDateTime = goalTimeStr
+            .replace(/\//g, '-')  // スラッシュをハイフンに変換
+            .replace(' ', 'T');   // スペースをTに変換
+
+        console.log(formattedDateTime);  // "2024-10-26T12:59:13"
+
+
+	console.info('goaltime=',formattedDateTime);
+
+        // 新規レコードを作成または既存レコードを更新
+        const createResponse = await fetch('/api/update-goal-time/', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                //'Authorization': `Token ${localStorage.getItem('token')}`,
+            },
+            body: JSON.stringify({
+                goaltime: formattedDateTime, //fullGoalTime,
+                team_name: teamName,
+                event_code: eventCode,
+                zekken_number: zekkenNumber
+            })
+        });
+
+        if (!createResponse.ok) {
+            throw new Error('Failed to create new goal record');
+        }
+
+        return true;
+
+    } catch (error) {
+        console.error('Error processing goal time:', error);
+        alert(`ゴール時間の処理に失敗しました: ${error.message}`);
+        return false;
+    }
+}
+
+
+        // 通過証明書出力機能の実装
+        async function exportExcel() {
+            const zekkenNumber = document.querySelector('#zekkenNumber').value;
+            const eventCode = document.querySelector('#eventCode').value;
+            
+            try {
+                const response = await fetch(`${API_BASE_URL}/export_excel/${zekkenNumber}/${eventCode}`);
+                
+                if (!response.ok) {
+                    throw new Error(`HTTP error! status: ${response.status}`);
+                }
+        
+                // Blobとしてレスポンスを取得
+                const blob = await response.blob();
+                
+                // ダウンロードリンクを作成
+                const url = window.URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = url;
+                a.download = `通過証明書_${zekkenNumber}_${eventCode}.xlsx`;
+                
+                // リンクをクリックしてダウンロードを開始
+                document.body.appendChild(a);
+                a.click();
+                
+                // クリーンアップ
+                window.URL.revokeObjectURL(url);
+                document.body.removeChild(a);
+            } catch (error) {
+                console.error('エクスポート中にエラーが発生しました:', error);
+                alert('エクスポート中にエラーが発生しました');
+            }
+        }
+
+        function old_exportExcel() {
             const zekkenNumber = document.getElementById('zekkenNumber').value;
             window.location.href = `/api/export-excel/${zekkenNumber}`;
         }
+
+        // 現在の表示データを取得する補助関数
+        function getCurrentCheckins() {
+            const tbody = document.querySelector('table tbody');
+            const checkins = [];
+           
+            // テーブルの行をループして現在のデータを収集
+    	    tbody.querySelectorAll('tr').forEach((row, index) => {
+                const cells = row.cells;
+                // チェックボックスの要素を正しく取得
+                const buyFlagCheckbox = cells[6].querySelector('input[type="checkbox"]');
+                const validationCheckbox = cells[7].querySelector('input[type="checkbox"]');
+
+                checkins.push({
+		    id: row.dataset.id,
+                    order: index + 1,
+		    cp_number: row.dataset.cpNumber,
+                    buy_flag: buyFlagCheckbox ? buyFlagCheckbox.checked : false,
+                    validation: validationCheckbox ? validationCheckbox.checked : false,
+                    points: parseInt(cells[8].textContent) || 0
+                });
+            });
+            
+            return checkins;
+        }
+        
+        // テーブルにチェックインを追加する補助関数
+        function addCheckinsToTable(checkins) {
+            const table = document.querySelector('table tbody');
+            
+            checkins.forEach(checkin => {
+                const row = document.createElement('tr');
+
+		console.info('checkin=',checkin);
+
+                row.dataset.id = 0;
+		row.dataset.local_id = checkin.order;	// Unique
+                row.dataset.cpNumber = checkin.cp;
+                row.dataset.checkinPoint = checkin.checkinPoint;
+                row.dataset.buyPoint = checkin.buyPoint;
+                row.dataset.path_order = checkin.order; // reorderable
+                
+                const bgColor = checkin.buyPoint > 0 ? 'bg-blue-100' : '';
+
+                row.innerHTML = `
+                        <td class="px-1 py-3 cursor-move">
+                            <i class="fas fa-bars text-gray-400"></i>
+                        </td>
+                        <td class="px-2 py-3">${checkin.order}</td>
+                        <td class="px-2 py-3">
+                            ${checkin.photos ? 
+                                `<img src="/media/compressed/${checkin.photos}" class="h-20 w-20 object-cover rounded" onclick="showLargeImage(this.src)">` : ''}
+                        </td>
+                        <td class="px-2 py-3">
+                            ${checkin.image_address ? 
+                                `<img src="${checkin.image_address}" class="h-20 w-20 object-cover rounded" onclick="showLargeImage(this.src)">` : '無し'}
+			</td>
+                        <td class="px-2 py-3 ${bgColor}">
+                            <div class="font-bold">${checkin.subLocId}</div>
+                            <div class="text-sm">${checkin.location_name}</div>
+                        </td>
+                        <td class="px-2 py-3">不明</td>
+                        <td class="px-1 py-3">
+                            ${checkin.buyPoint > 0 ? `
+                                <input type="checkbox" 
+                                    ${checkin.buy_flag ? 'checked' : ''}
+                                    class="h-4 w-4 text-green-600 rounded buy-checkbox" 
+                                    onchange="updatePoints(this)">
+                            ` : ''}
+                        </td>
+                        <td class="px-1 py-3">
+                            <input type="checkbox" 
+                                ${checkin.validate_location ? 'checked' : ''}
+                                class="h-4 w-4 text-blue-600 rounded validate-checkbox"
+                                onchange="updatePoints(this)">
+                        </td>
+			<td class="px-2 py-3 point-value">${checkin.checkinPoint}</td>
+                        <td class="px-2 py-4">
+                            <button onclick="deleteRow(${row.dataset.local_id})"
+                                class="text-red-600 hover:text-red-800">
+                                <i class="fas fa-trash"></i>
+                            </button>
+                        </td>   
+                    `;
+                    table.appendChild(row);
+            });
+        }
+
+        // グローバルな状態管理
+        let loadedLocations = [];
+        let currentEventCode = null;
+        
+       
+        // チェックポイントデータをロードする関数
+        async function loadLocations(eventCode) {
+            try {
+                console.info('loadLocations-1:',eventCode);
+                if (!eventCode) {
+                    console.error('Event code is required');
+                    return;
+                }
+        
+                // 既に同じイベントのデータがロードされている場合はスキップ
+                if (currentEventCode === eventCode && loadedLocations.length > 0) {
+                    console.log('Locations already loaded for this event');
+                    return loadedLocations;
+                }
+        
+                console.info('loadLocations-2:',eventCode);
+
+        // group__containsフィルターを使用してクエリパラメータを構築
+        const params = new URLSearchParams({
+            group__contains: eventCode
+        });
+
+        // Location APIを使用してデータを取得
+        const response = await fetch(`/api/location/?${params}`, {
+            method: 'GET',
+            headers: {
+                'Content-Type': 'application/json',
+            }
+        });
+
+
+                // レスポンスをJSONとして解決
+                const data = await response.json();
+                console.info('loadLocations-3:', data);
+ 
+                if (!response.ok) {
+                    console.info('loadLocations-3: Bad Response :',response);
+
+                    throw new Error(`HTTP error! status: ${response.status}`);
+                }
+        
+                console.info('loadLocations-4:',eventCode);
+                // 取得したデータを処理して保存
+                loadedLocations = data.features.map(feature => ({
+                    cp: feature.properties.cp,
+                    name: feature.properties.location_name,
+                    subLocId: feature.properties.sub_loc_id,
+                    checkinPoint: feature.properties.checkin_point,
+                    buyPoint: feature.properties.buy_point,
+                    photos: feature.properties.photos,
+                    group: feature.properties.group,
+                    coordinates: feature.geometry.coordinates[0],
+                    latitude: feature.geometry.coordinates[0][1],
+                    longitude: feature.geometry.coordinates[0][0]
+                })).filter(location => location.group && location.group.includes(eventCode));
+        
+                currentEventCode = eventCode;
+                console.info(`Loaded ${loadedLocations.length} locations for event ${eventCode}`);
+       
+		console.info('loadedLocation[0]=',loadedLocations[0]);		
+
+                return loadedLocations;
+
+            } catch (error) {
+                console.error('Error loading locations:', error);
+                throw error;
+            }
+        }
+
+        // イベント選択時のハンドラー
+        async function handleEventSelect(eventCode) {
+	    console.info('handleEventSelect : ',eventCode);
+            try {
+                //document.getElementById('loading').style.display = 'block';
+                await loadLocations(eventCode);
+                //document.getElementById('loading').style.display = 'none';
+                
+            } catch (error) {
+                console.error('Error handling event selection:', error);
+                //document.getElementById('loading').style.display = 'none';
+                alert('チェックポイントの読み込みに失敗しました。');
+            }
+        }
+        
+        // ロードされたロケーションデータを取得する関数
+        function getLoadedLocations() {
+            return loadedLocations;
+        }
+        
+// 指定されたCP番号のロケーションを取得する関数
+function findLocationByCP(cpNumber) {
+    if (!loadedLocations.length) {
+        console.warn('Locations not loaded yet');
+        return null;
+    }
+
+    // cpプロパティを数値として比較
+    const found = loadedLocations.find(loc => Number(loc.cp) === Number(cpNumber));
+    
+    if (!found) {
+        console.warn(`Location with CP number ${cpNumber} not found`);
+        return null;
+    }
+
+    console.info(`Found location with CP ${cpNumber}:`, found);
+    return found;
+}
+
+
+
+        
     </script>
 </body>
 </html>