Update static/process1.js

static/process1.js

@@ -1,293 +1,294 @@
-let allUsers = [];
-        let selectedUsers = [];
-        let userToDelete = null;
-        
-        // ページ読み込み時にユーザーリストを取得
-        document.addEventListener('DOMContentLoaded', fetchUserList);
-        
-        // ユーザーリスト取得
-        function fetchUserList() {
-            fetch('/list_base_audio')
-                .then(response => response.json())
-                .then(data => {
-                    if (data.status === 'success' && data.fileNames) {
-                        allUsers = data.fileNames;
-                        renderUserList(allUsers);
-                    } else {
-                        showError('メンバーリストの取得に失敗しました');
-                    }
-                })
-                .catch(error => {
-                    console.error('Error fetching user list:', error);
-                    showError('サーバーとの通信中にエラーが発生しました');
-                });
-        }
-        
-        // ユーザーリストの表示
-        function renderUserList(users) {
-            const userListElement = document.getElementById('userList');
-            
-            if (!users || users.length === 0) {
-                userListElement.innerHTML = `
-                    <div class="no-users">
-                        <p>登録されているメンバーがいません。</p>
-                        <p>「新規登録」から音声を登録してください。</p>
-                    </div>
-                `;
-                return;
-            }
-            
-            let html = '';
-            users.forEach(user => {
-                const firstLetter = user.substr(0, 1).toUpperCase();
-                html += `
-                    <div class="user-item">
-                        <input type="checkbox" id="user-${user}" value="${user}" onchange="toggleUserSelection('${user}')">
-                        <label for="user-${user}">${user}</label>
-                        <div class="user-avatar">${firstLetter}</div>
-                        <button class="delete-button" onclick="showDeleteModal('${user}')">
-                            <i class="fas fa-trash"></i>
-                        </button>
-                    </div>
-                `;
-            });
-            
-            userListElement.innerHTML = html;
-            
-            // 既に選択済みのユーザーがあればチェックを入れる
-            checkStoredSelections();
-        }
-        
-        // ユーザー選択の切り替え
-        function toggleUserSelection(username) {
-            const index = selectedUsers.indexOf(username);
-            if (index === -1) {
-                selectedUsers.push(username);
-            } else {
-                selectedUsers.splice(index, 1);
-            }
-            
-            updateSelectedCount();
-            updateProceedButton();
-            saveSelections();
-        }
-        
-        // すべてのユーザーを選択
-        function selectAllUsers() {
-            selectedUsers = [...allUsers];
-            
-            // チェックボックスを更新
-            allUsers.forEach(user => {
-                const checkbox = document.getElementById(`user-${user}`);
-                if (checkbox) checkbox.checked = true;
-            });
-            
-            updateSelectedCount();
-            updateProceedButton();
-            saveSelections();
-        }
-        
-        // すべての選択を解除
-        function deselectAllUsers() {
-            selectedUsers = [];
-            
-            // チェックボックスを更新
-            allUsers.forEach(user => {
-                const checkbox = document.getElementById(`user-${user}`);
-                if (checkbox) checkbox.checked = false;
-            });
-            
-            updateSelectedCount();
-            updateProceedButton();
-            saveSelections();
-        }
-        
-        // 選択数の表示を更新
-        function updateSelectedCount() {
-            document.getElementById('selectedCount').textContent = `選択中: ${selectedUsers.length}人`;
-        }
-        
-        // 進むボタンの有効/無効を更新
-        function updateProceedButton() {
-            document.getElementById('proceedButton').disabled = selectedUsers.length === 0;
-        }
-        
-        // 選択を保存
-        function saveSelections() {
-            localStorage.setItem('selectedUsers', JSON.stringify(selectedUsers));
-        }
-        
-        // 保存されている選択を読み込み
-        function checkStoredSelections() {
-            const storedSelections = localStorage.getItem('selectedUsers');
-            if (storedSelections) {
-                try {
-                    selectedUsers = JSON.parse(storedSelections);
-                    selectedUsers = selectedUsers.filter(user => allUsers.includes(user)); // 存在するユーザーのみ選択
-                    
-                    // チェックボックスに反映
-                    selectedUsers.forEach(user => {
-                        const checkbox = document.getElementById(`user-${user}`);
-                        if (checkbox) checkbox.checked = true;
-                    });
-                    
-                    updateSelectedCount();
-                    updateProceedButton();
-                } catch (e) {
-                    console.error('保存された選択の読み込みに失敗しました', e);
-                    selectedUsers = [];
-                }
-            }
-        }
-        
-        // エラー表示
-        function showError(message) {
-            const userListElement = document.getElementById('userList');
-            userListElement.innerHTML = `
-                <div class="no-users">
-                    <p>${message}</p>
-                    <button class="select-button" onclick="fetchUserList()">再読み込み</button>
-                </div>
-            `;
-        }
-        
-        // 選択されたユーザーでサーバーに送信して次のページに進む
-        function proceedWithSelectedUsers() {
-            if (selectedUsers.length === 0) {
-                alert('少なくとも1人のメンバーを選択してください');
-                return;
-            }
-            
-            // 選択したユーザーをサーバーに送信
-            fetch('/select_users', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({
-                    users: selectedUsers
-                })
-            })
-            .then(response => response.json())
-            .then(data => {
-                if (data.status === 'success') {
-                    // 成功したらインデックスページに進む
-                    window.location.href = '/index';
-                } else {
-                    alert('エラーが発生しました: ' + (data.error || 'Unknown error'));
-                }
-            })
-            .catch(error => {
-                console.error('Error selecting users:', error);
-                alert('サーバーとの通信中にエラーが発生しました');
-            });
-        }
-
-        // 削除確認モーダルを表示
-        function showDeleteModal(username) {
-            userToDelete = username;
-            document.getElementById('deleteModalText').textContent = `メンバー「${username}」を削除しますか？削除すると元に戻せません。`;
-            document.getElementById('deleteModal').style.display = 'flex';
-        }
-
-        // 削除確認モーダルを非表示
-        function hideDeleteModal() {
-            document.getElementById('deleteModal').style.display = 'none';
-            userToDelete = null;
-        }
-
-        // メンバーの削除を実行
-        function confirmDelete() {
-            if (!userToDelete) return;
-            
-            // 削除中の表示
-            document.getElementById('deleteModalText').innerHTML = `
-                <div class="loading">
-                    <div class="spinner"></div>
-                    <p>メンバー「${userToDelete}」を削除中...</p>
-                </div>
-            `;
-            
-            fetch('/reset_member', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({
-                    names: [userToDelete]
-                })
-            })
-            .then(response => response.json())
-            .then(data => {
-                if (data.status === 'success') {
-                    // 選択リストからも削除
-                    const index = selectedUsers.indexOf(userToDelete);
-                    if (index !== -1) {
-                        selectedUsers.splice(index, 1);
-                        saveSelections();
-                    }
-                    
-                    // リストから削除して再表示
-                    allUsers = allUsers.filter(user => user !== userToDelete);
-                    renderUserList(allUsers);
-                    
-                    // モーダルを閉じる
-                    hideDeleteModal();
-                    
-                    // 成功メッセージ表示（オプション）
-                    const successMessage = document.createElement('div');
-                    successMessage.className = 'success-message';
-                    successMessage.innerHTML = `<div style="background: rgba(39, 174, 96, 0.2); color: white; padding: 10px; border-radius: 6px; margin-bottom: 10px; text-align: center;">メンバーを削除しました</div>`;
-                    document.querySelector('.container').prepend(successMessage);
-                    
-                    // 数秒後にメッセージを消す
-                    setTimeout(() => {
-                        successMessage.remove();
-                    }, 3000);
-                } else {
-                    alert('削除に失敗しました: ' + (data.message || 'Unknown error'));
-                    hideDeleteModal();
-                }
-            })
-            .catch(error => {
-                console.error('Error deleting user:', error);
-                alert('サーバーとの通信中にエラーが発生しました');
-                hideDeleteModal();
-            });
-        }
-
-        // ハンバーガーメニュー表示/非表示の切り替え
-        function toggleMenu(event) {
-            event.stopPropagation();
-            const menu = document.getElementById('menu');
-            menu.classList.toggle('open');
-        }
-
-        // メニュー外クリックでメニューを閉じる
-        function closeMenu(event) {
-            const menu = document.getElementById('menu');
-            if (menu.classList.contains('open') && !menu.contains(event.target) && event.target.id !== 'menuButton') {
-                menu.classList.remove('open');
-            }
-        }
-
-        // 各画面へのナビゲーション関数
-        function showUserRegister() {
-            window.location.href = '/userregister';
-        }
-
-        function showIndex() {
-            window.location.href = '/index';
-        }
-
-        function showResults() {
-            window.location.href = '/feedback';
-        }
-
-        function showTalkDetail() {
-            window.location.href = '/talk_detail';
-        }
-
-        function resetAction() {
-            window.location.href = '/reset_html';
-        }
+let allUsers = [];
+let selectedUsers = [];
+let userToDelete = null;
+
+// ページ読み込み時にユーザーリストを取得
+document.addEventListener('DOMContentLoaded', fetchUserList);
+
+// ユーザーリスト取得 - Flask APIの変更に合わせて修正
+function fetchUserList() {
+    fetch('/list_base_audio')
+        .then(response => response.json())
+        .then(data => {
+            if (data.status === 'success' && Array.isArray(data.id)) {
+                // APIの変更: data.fileNames → data.id
+                allUsers = data.id;
+                renderUserList(allUsers);
+            } else {
+                showError('メンバーリストの取得に失敗しました');
+            }
+        })
+        .catch(error => {
+            console.error('Error fetching user list:', error);
+            showError('サーバーとの通信中にエラーが発生しました');
+        });
+}
+
+// ユーザーリストの表示
+function renderUserList(users) {
+    const userListElement = document.getElementById('userList');
+    
+    if (!users || users.length === 0) {
+        userListElement.innerHTML = `
+            <div class="no-users">
+                <p>登録されているメンバーがいません。</p>
+                <p>「新規登録」から音声を登録してください。</p>
+            </div>
+        `;
+        return;
+    }
+    
+    let html = '';
+    users.forEach(user => {
+        const firstLetter = user.substr(0, 1).toUpperCase();
+        html += `
+            <div class="user-item">
+                <input type="checkbox" id="user-${user}" value="${user}" onchange="toggleUserSelection('${user}')">
+                <label for="user-${user}">${user}</label>
+                <div class="user-avatar">${firstLetter}</div>
+                <button class="delete-button" onclick="showDeleteModal('${user}')">
+                    <i class="fas fa-trash"></i>
+                </button>
+            </div>
+        `;
+    });
+    
+    userListElement.innerHTML = html;
+    
+    // 既に選択済みのユーザーがあればチェックを入れる
+    checkStoredSelections();
+}
+
+// ユーザー選択の切り替え
+function toggleUserSelection(username) {
+    const index = selectedUsers.indexOf(username);
+    if (index === -1) {
+        selectedUsers.push(username);
+    } else {
+        selectedUsers.splice(index, 1);
+    }
+    
+    updateSelectedCount();
+    updateProceedButton();
+    saveSelections();
+}
+
+// すべてのユーザーを選択
+function selectAllUsers() {
+    selectedUsers = [...allUsers];
+    
+    // チェックボックスを更新
+    allUsers.forEach(user => {
+        const checkbox = document.getElementById(`user-${user}`);
+        if (checkbox) checkbox.checked = true;
+    });
+    
+    updateSelectedCount();
+    updateProceedButton();
+    saveSelections();
+}
+
+// すべての選択を解除
+function deselectAllUsers() {
+    selectedUsers = [];
+    
+    // チェックボックスを更新
+    allUsers.forEach(user => {
+        const checkbox = document.getElementById(`user-${user}`);
+        if (checkbox) checkbox.checked = false;
+    });
+    
+    updateSelectedCount();
+    updateProceedButton();
+    saveSelections();
+}
+
+// 選択数の表示を更新
+function updateSelectedCount() {
+    document.getElementById('selectedCount').textContent = `選択中: ${selectedUsers.length}人`;
+}
+
+// 進むボタンの有効/無効を更新
+function updateProceedButton() {
+    document.getElementById('proceedButton').disabled = selectedUsers.length === 0;
+}
+
+// 選択を保存
+function saveSelections() {
+    localStorage.setItem('selectedUsers', JSON.stringify(selectedUsers));
+}
+
+// 保存されている選択を読み込み
+function checkStoredSelections() {
+    const storedSelections = localStorage.getItem('selectedUsers');
+    if (storedSelections) {
+        try {
+            selectedUsers = JSON.parse(storedSelections);
+            selectedUsers = selectedUsers.filter(user => allUsers.includes(user)); // 存在するユーザーのみ選択
+            
+            // チェックボックスに反映
+            selectedUsers.forEach(user => {
+                const checkbox = document.getElementById(`user-${user}`);
+                if (checkbox) checkbox.checked = true;
+            });
+            
+            updateSelectedCount();
+            updateProceedButton();
+        } catch (e) {
+            console.error('保存された選択の読み込みに失敗しました', e);
+            selectedUsers = [];
+        }
+    }
+}
+
+// エラー表示
+function showError(message) {
+    const userListElement = document.getElementById('userList');
+    userListElement.innerHTML = `
+        <div class="no-users">
+            <p>${message}</p>
+            <button class="select-button" onclick="fetchUserList()">再読み込み</button>
+        </div>
+    `;
+}
+
+// 選択されたユーザーでサーバーに送信して次のページに進む
+function proceedWithSelectedUsers() {
+    if (selectedUsers.length === 0) {
+        alert('少なくとも1人のメンバーを選択してください');
+        return;
+    }
+    
+    // 選択したユーザーをサーバーに送信
+    fetch('/select_users', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+            users: selectedUsers
+        })
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.status === 'success') {
+            // 成功したらインデックスページに進む
+            window.location.href = '/index';
+        } else {
+            alert('エラーが発生しました: ' + (data.error || 'Unknown error'));
+        }
+    })
+    .catch(error => {
+        console.error('Error selecting users:', error);
+        alert('サーバーとの通信中にエラーが発生しました');
+    });
+}
+
+// 削除確認モーダルを表示
+function showDeleteModal(username) {
+    userToDelete = username;
+    document.getElementById('deleteModalText').textContent = `メンバー「${username}」を削除しますか？削除すると元に戻せません。`;
+    document.getElementById('deleteModal').style.display = 'flex';
+}
+
+// 削除確認モーダルを非表示
+function hideDeleteModal() {
+    document.getElementById('deleteModal').style.display = 'none';
+    userToDelete = null;
+}
+
+// メンバーの削除を実行
+function confirmDelete() {
+    if (!userToDelete) return;
+    
+    // 削除中の表示
+    document.getElementById('deleteModalText').innerHTML = `
+        <div class="loading">
+            <div class="spinner"></div>
+            <p>メンバー「${userToDelete}」を削除中...</p>
+        </div>
+    `;
+    
+    fetch('/reset_member', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+            names: [userToDelete]
+        })
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.status === 'success') {
+            // 選択リストからも削除
+            const index = selectedUsers.indexOf(userToDelete);
+            if (index !== -1) {
+                selectedUsers.splice(index, 1);
+                saveSelections();
+            }
+            
+            // リストから削除して再表示
+            allUsers = allUsers.filter(user => user !== userToDelete);
+            renderUserList(allUsers);
+            
+            // モーダルを閉じる
+            hideDeleteModal();
+            
+            // 成功メッセージ表示（オプション）
+            const successMessage = document.createElement('div');
+            successMessage.className = 'success-message';
+            successMessage.innerHTML = `<div style="background: rgba(39, 174, 96, 0.2); color: white; padding: 10px; border-radius: 6px; margin-bottom: 10px; text-align: center;">メンバーを削除しました</div>`;
+            document.querySelector('.container').prepend(successMessage);
+            
+            // 数秒後にメッセージを消す
+            setTimeout(() => {
+                successMessage.remove();
+            }, 3000);
+        } else {
+            alert('削除に失敗しました: ' + (data.message || 'Unknown error'));
+            hideDeleteModal();
+        }
+    })
+    .catch(error => {
+        console.error('Error deleting user:', error);
+        alert('サーバーとの通信中にエラーが発生しました');
+        hideDeleteModal();
+    });
+}
+
+// ハンバーガーメニュー表示/非表示の切り替え
+function toggleMenu(event) {
+    event.stopPropagation();
+    const menu = document.getElementById('menu');
+    menu.classList.toggle('open');
+}
+
+// メニュー外クリックでメニューを閉じる
+function closeMenu(event) {
+    const menu = document.getElementById('menu');
+    if (menu.classList.contains('open') && !menu.contains(event.target) && event.target.id !== 'menuButton') {
+        menu.classList.remove('open');
+    }
+}
+
+// 各画面へのナビゲーション関数
+function showUserRegister() {
+    window.location.href = '/userregister';
+}
+
+function showIndex() {
+    window.location.href = '/index';
+}
+
+function showResults() {
+    window.location.href = '/feedback';
+}
+
+function showTalkDetail() {
+    window.location.href = '/talk_detail';
+}
+
+function resetAction() {
+    window.location.href = '/reset_html';
+}