Spaces:

Justtalk
/

JusTalk

Running

App Files Files Community

rein0421 commited on 11 days ago

Commit

3d39f0b

verified ·

1 Parent(s): d73bff4

Update templates/userRegister.html

Browse files

Files changed (1) hide show

templates/userRegister.html +317 -12

templates/userRegister.html CHANGED Viewed

@@ -20,7 +20,6 @@
       .animate-pulse-scale {
         animation: pulse-scale 1s infinite;
       }
       /* Record Button Styles */
       .record-button {
         width: 50px;
@@ -51,7 +50,6 @@
         height: 20px;
         border-radius: 50%;
       }
       /* Title */
       .main-title {
         font-size: 2.5rem;
@@ -60,7 +58,6 @@
         color: #fff;
         text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
       }
       /* Buttons */
       .action-button {
         margin-top: 1rem;
@@ -70,26 +67,80 @@
         transition: background-color 0.2s ease;
         width: 100%;
       }
       .action-button:hover {
         background-color: rgba(55, 65, 81, 0.7);
       }
       .back-button {
         background-color: #607d8b; /* 落ち着いたグレー */
         color: white;
       }
       .add-button {
         background-color: #4caf50; /* 落ち着いた緑色 */
         color: white;
       }
       /* Disabled State */
       .disabled {
         opacity: 0.5;
         pointer-events: none;
       }
     </style>
   </head>
   <body>
@@ -97,15 +148,12 @@
     <div class="main-content relative">
       <!-- Title -->
       <div class="main-title">JustTalk</div>
       <!-- User List -->
       <div id="people-list" class="space-y-4"></div>
       <!-- Add Button -->
       <button id="add-btn" class="action-button add-button">
         <i class="fas fa-user-plus"></i> メンバーを追加
       </button>
       <!-- 録音画面へ移動ボタン(Back Buttonから変更) -->
       <button
         id="backButton"
@@ -116,6 +164,263 @@
       </button>
     </div>
-    <script src="{{ url_for('static', filename='register_record.js') }}"></script>
   </body>
-</html>

       .animate-pulse-scale {
         animation: pulse-scale 1s infinite;
       }
       /* Record Button Styles */
       .record-button {
         width: 50px;
         height: 20px;
         border-radius: 50%;
       }
       /* Title */
       .main-title {
         font-size: 2.5rem;
         color: #fff;
         text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
       }
       /* Buttons */
       .action-button {
         margin-top: 1rem;
         transition: background-color 0.2s ease;
         width: 100%;
       }
       .action-button:hover {
         background-color: rgba(55, 65, 81, 0.7);
       }
       .back-button {
         background-color: #607d8b; /* 落ち着いたグレー */
         color: white;
       }
       .add-button {
         background-color: #4caf50; /* 落ち着いた緑色 */
         color: white;
       }
       /* Disabled State */
       .disabled {
         opacity: 0.5;
         pointer-events: none;
       }
+      /* Modal Styles */
+      .modal {
+        display: none;
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.7);
+        z-index: 1000;
+        justify-content: center;
+        align-items: center;
+      }
+      .modal-content {
+        background-color: #2d3748;
+        color: white;
+        padding: 2rem;
+        border-radius: 1rem;
+        width: 90%;
+        max-width: 500px;
+        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
+      }
+      .input-field {
+        width: 100%;
+        padding: 0.75rem;
+        border-radius: 0.5rem;
+        background-color: #1a202c;
+        border: 1px solid #4a5568;
+        color: white;
+        margin-bottom: 1rem;
+      }
+      .modal-buttons {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 1rem;
+      }
+      .modal-button {
+        padding: 0.75rem 1.5rem;
+        border-radius: 0.5rem;
+        cursor: pointer;
+        min-width: 100px;
+        text-align: center;
+      }
+      .record-modal-button {
+        background-color: #d32f2f;
+        color: white;
+      }
+      .cancel-button {
+        background-color: #64748b;
+        color: white;
+      }
     </style>
   </head>
   <body>
     <div class="main-content relative">
       <!-- Title -->
       <div class="main-title">JustTalk</div>
       <!-- User List -->
       <div id="people-list" class="space-y-4"></div>
       <!-- Add Button -->
       <button id="add-btn" class="action-button add-button">
         <i class="fas fa-user-plus"></i> メンバーを追加
       </button>
       <!-- 録音画面へ移動ボタン(Back Buttonから変更) -->
       <button
         id="backButton"
       </button>
     </div>
+    <!-- Modal for Adding New User -->
+    <div id="add-modal" class="modal">
+      <div class="modal-content">
+        <h2 class="text-xl font-bold mb-4">新しいメンバーを追加</h2>
+        <input id="user-name" type="text" placeholder="名前を入力" class="input-field">
+        <div class="flex justify-center my-4">
+          <div id="record-button" class="record-button">
+            <div class="record-icon"></div>
+          </div>
+        </div>
+        <div id="recording-status" class="text-center mb-4">録音をクリックして開始</div>
+        <div class="modal-buttons">
+          <button id="cancel-button" class="modal-button cancel-button">キャンセル</button>
+          <button id="save-button" class="modal-button record-modal-button" disabled>保存</button>
+        </div>
+      </div>
+    </div>
+    <script>
+      // グローバル変数
+      let mediaRecorder;
+      let audioChunks = [];
+      let registeredUsers = [];
+      let isRecording = false;
+      // ページ読み込み時に実行
+      document.addEventListener('DOMContentLoaded', () => {
+        loadUsers();
+        setupEventListeners();
+      });
+      // イベントリスナーの設定
+      function setupEventListeners() {
+        // 追加ボタン
+        document.getElementById('add-btn').addEventListener('click', () => {
+          openModal();
+        });
+        // 録音ボタン
+        document.getElementById('record-button').addEventListener('click', toggleRecording);
+        // キャンセルボタン
+        document.getElementById('cancel-button').addEventListener('click', closeModal);
+        // 保存ボタン
+        document.getElementById('save-button').addEventListener('click', saveRecording);
+      }
+      // ユーザーリストを読み込む
+      async function loadUsers() {
+        try {
+          const response = await fetch('/list_base_audio');
+          const data = await response.json();
+          if (data.status === "success" && Array.isArray(data.id)) {
+            registeredUsers = data.id;
+            displayUsers(registeredUsers);
+          } else {
+            console.error('Unexpected response format:', data);
+          }
+        } catch (error) {
+          console.error('Error loading users:', error);
+        }
+      }
+      // ユーザーリストを表示
+      function displayUsers(users) {
+        const peopleList = document.getElementById('people-list');
+        peopleList.innerHTML = '';
+        if (users.length === 0) {
+          peopleList.innerHTML = '<p class="text-gray-400 text-center">登録されたメンバーはいません</p>';
+          return;
+        }
+        users.forEach(user => {
+          const userDiv = document.createElement('div');
+          userDiv.className = 'bg-gray-700 rounded-lg p-4 flex justify-between items-center';
+          userDiv.innerHTML = `
+            <div class="flex items-center">
+              <i class="fas fa-user-circle text-2xl mr-3"></i>
+              <span>${user}</span>
+            </div>
+            <button class="delete-btn text-red-500 hover:text-red-300" data-name="${user}">
+              <i class="fas fa-trash"></i>
+            </button>
+          `;
+          peopleList.appendChild(userDiv);
+        });
+        // 削除ボタンのイベントリスナーを追加
+        document.querySelectorAll('.delete-btn').forEach(button => {
+          button.addEventListener('click', function() {
+            const name = this.getAttribute('data-name');
+            deleteUser(name);
+          });
+        });
+      }
+      // ユーザーを削除
+      async function deleteUser(name) {
+        if (!confirm(`${name}を削除してもよろしいですか？`)) return;
+        try {
+          const response = await fetch('/reset_member', {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+              names: [name]
+            })
+          });
+          const data = await response.json();
+          if (data.status === "success") {
+            // 削除成功時、ユーザーリストを更新
+            loadUsers();
+          } else {
+            console.error('Error deleting user:', data.message);
+            alert('ユーザーの削除に失敗しました');
+          }
+        } catch (error) {
+          console.error('Error:', error);
+          alert('エラーが発生しました');
+        }
+      }
+      // モーダルを開く
+      function openModal() {
+        document.getElementById('add-modal').style.display = 'flex';
+        document.getElementById('user-name').value = '';
+        document.getElementById('save-button').disabled = true;
+        document.getElementById('recording-status').textContent = '録音をクリックして開始';
+        // 録音状態をリセット
+        isRecording = false;
+        audioChunks = [];
+        const recordButton = document.getElementById('record-button');
+        recordButton.classList.remove('recording');
+      }
+      // モーダルを閉じる
+      function closeModal() {
+        document.getElementById('add-modal').style.display = 'none';
+        // 録音中なら停止
+        if (mediaRecorder && isRecording) {
+          mediaRecorder.stop();
+          isRecording = false;
+        }
+      }
+      // 録音の開始/停止を切り替え
+      async function toggleRecording() {
+        const recordButton = document.getElementById('record-button');
+        const statusText = document.getElementById('recording-status');
+        if (!isRecording) {
+          // 録音開始
+          try {
+            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+            mediaRecorder = new MediaRecorder(stream);
+            audioChunks = [];
+            mediaRecorder.ondataavailable = event => {
+              audioChunks.push(event.data);
+            };
+            mediaRecorder.onstop = () => {
+              document.getElementById('save-button').disabled = false;
+              statusText.textContent = '録音完了！';
+              recordButton.classList.remove('recording');
+            };
+            mediaRecorder.start();
+            isRecording = true;
+            statusText.textContent = '録音中...';
+            recordButton.classList.add('recording');
+          } catch (error) {
+            console.error('録音の開始に失敗しました:', error);
+            statusText.textContent = '録音の開始に失敗しました';
+          }
+        } else {
+          // 録音停止
+          mediaRecorder.stop();
+          isRecording = false;
+        }
+      }
+      // 録音を保存
+      async function saveRecording() {
+        const userName = document.getElementById('user-name').value.trim();
+        if (!userName) {
+          alert('名前を入力してください');
+          return;
+        }
+        if (registeredUsers.includes(userName)) {
+          if (!confirm(`${userName}は既に登録されています。上書きしますか？`)) {
+            return;
+          }
+        }
+        if (audioChunks.length === 0) {
+          alert('録音データがありません');
+          return;
+        }
+        try {
+          // 録音データをBlobに変換
+          const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
+          // Base64に変換
+          const reader = new FileReader();
+          reader.readAsDataURL(audioBlob);
+          reader.onloadend = async () => {
+            // Base64文字列から先頭の "data:audio/wav;base64," を削除
+            const base64Audio = reader.result.split(',')[1];
+            // サーバーに送信
+            const response = await fetch('/upload_base_audio', {
+              method: 'POST',
+              headers: {
+                'Content-Type': 'application/json'
+              },
+              body: JSON.stringify({
+                name: userName,
+                audio_data: base64Audio
+              })
+            });
+            const data = await response.json();
+            if (data.state === "Registration Success!") {
+              closeModal();
+              loadUsers(); // ユーザーリストを更新
+              alert(`${userName}を登録しました！`);
+            } else {
+              console.error('Error saving recording:', data);
+              alert('録音の保存に失敗しました');
+            }
+          };
+        } catch (error) {
+          console.error('Error:', error);
+          alert('エラーが発生しました');
+        }
+      }
+      // ユーザー選択画面に戻る
+      function showUserSelect() {
+        window.location.href = "/userselect";
+      }
+    </script>
   </body>
+</html>