Spaces:
Runtime error
Runtime error
| 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'; | |
| } |