rein0421 commited on
Commit
1b7bec8
·
verified ·
1 Parent(s): 3d39f0b

Update static/process1.js

Browse files
Files changed (1) hide show
  1. static/process1.js +294 -293
static/process1.js CHANGED
@@ -1,293 +1,294 @@
1
- let allUsers = [];
2
- let selectedUsers = [];
3
- let userToDelete = null;
4
-
5
- // ページ読み込み時にユーザーリストを取得
6
- document.addEventListener('DOMContentLoaded', fetchUserList);
7
-
8
- // ユーザーリスト取得
9
- function fetchUserList() {
10
- fetch('/list_base_audio')
11
- .then(response => response.json())
12
- .then(data => {
13
- if (data.status === 'success' && data.fileNames) {
14
- allUsers = data.fileNames;
15
- renderUserList(allUsers);
16
- } else {
17
- showError('メンバーリストの取得に失敗しました');
18
- }
19
- })
20
- .catch(error => {
21
- console.error('Error fetching user list:', error);
22
- showError('サーバーとの通信中にエラーが発生しました');
23
- });
24
- }
25
-
26
- // ユーザーリストの表示
27
- function renderUserList(users) {
28
- const userListElement = document.getElementById('userList');
29
-
30
- if (!users || users.length === 0) {
31
- userListElement.innerHTML = `
32
- <div class="no-users">
33
- <p>登録されているメンバーがいません。</p>
34
- <p>「新規登録」から音声を登録してください。</p>
35
- </div>
36
- `;
37
- return;
38
- }
39
-
40
- let html = '';
41
- users.forEach(user => {
42
- const firstLetter = user.substr(0, 1).toUpperCase();
43
- html += `
44
- <div class="user-item">
45
- <input type="checkbox" id="user-${user}" value="${user}" onchange="toggleUserSelection('${user}')">
46
- <label for="user-${user}">${user}</label>
47
- <div class="user-avatar">${firstLetter}</div>
48
- <button class="delete-button" onclick="showDeleteModal('${user}')">
49
- <i class="fas fa-trash"></i>
50
- </button>
51
- </div>
52
- `;
53
- });
54
-
55
- userListElement.innerHTML = html;
56
-
57
- // 既に選択済みのユーザーがあればチェックを入れる
58
- checkStoredSelections();
59
- }
60
-
61
- // ユーザー選択の切り替え
62
- function toggleUserSelection(username) {
63
- const index = selectedUsers.indexOf(username);
64
- if (index === -1) {
65
- selectedUsers.push(username);
66
- } else {
67
- selectedUsers.splice(index, 1);
68
- }
69
-
70
- updateSelectedCount();
71
- updateProceedButton();
72
- saveSelections();
73
- }
74
-
75
- // すべてのユーザーを選択
76
- function selectAllUsers() {
77
- selectedUsers = [...allUsers];
78
-
79
- // チェックボックスを更新
80
- allUsers.forEach(user => {
81
- const checkbox = document.getElementById(`user-${user}`);
82
- if (checkbox) checkbox.checked = true;
83
- });
84
-
85
- updateSelectedCount();
86
- updateProceedButton();
87
- saveSelections();
88
- }
89
-
90
- // すべての選択を解除
91
- function deselectAllUsers() {
92
- selectedUsers = [];
93
-
94
- // チェックボックスを更新
95
- allUsers.forEach(user => {
96
- const checkbox = document.getElementById(`user-${user}`);
97
- if (checkbox) checkbox.checked = false;
98
- });
99
-
100
- updateSelectedCount();
101
- updateProceedButton();
102
- saveSelections();
103
- }
104
-
105
- // 選択数の表示を更新
106
- function updateSelectedCount() {
107
- document.getElementById('selectedCount').textContent = `選択中: ${selectedUsers.length}人`;
108
- }
109
-
110
- // 進むボタンの有効/無効を更新
111
- function updateProceedButton() {
112
- document.getElementById('proceedButton').disabled = selectedUsers.length === 0;
113
- }
114
-
115
- // 選択を保存
116
- function saveSelections() {
117
- localStorage.setItem('selectedUsers', JSON.stringify(selectedUsers));
118
- }
119
-
120
- // 保存されている選択を読み込み
121
- function checkStoredSelections() {
122
- const storedSelections = localStorage.getItem('selectedUsers');
123
- if (storedSelections) {
124
- try {
125
- selectedUsers = JSON.parse(storedSelections);
126
- selectedUsers = selectedUsers.filter(user => allUsers.includes(user)); // 存在するユーザーのみ選択
127
-
128
- // チェックボックスに反映
129
- selectedUsers.forEach(user => {
130
- const checkbox = document.getElementById(`user-${user}`);
131
- if (checkbox) checkbox.checked = true;
132
- });
133
-
134
- updateSelectedCount();
135
- updateProceedButton();
136
- } catch (e) {
137
- console.error('保存された選択の読み込みに失敗しました', e);
138
- selectedUsers = [];
139
- }
140
- }
141
- }
142
-
143
- // エラー表示
144
- function showError(message) {
145
- const userListElement = document.getElementById('userList');
146
- userListElement.innerHTML = `
147
- <div class="no-users">
148
- <p>${message}</p>
149
- <button class="select-button" onclick="fetchUserList()">再読み込み</button>
150
- </div>
151
- `;
152
- }
153
-
154
- // 選択されたユーザーでサーバーに送信して次のページに進む
155
- function proceedWithSelectedUsers() {
156
- if (selectedUsers.length === 0) {
157
- alert('少なくとも1人のメンバーを選択してください');
158
- return;
159
- }
160
-
161
- // 選択したユーザーをサーバーに送信
162
- fetch('/select_users', {
163
- method: 'POST',
164
- headers: {
165
- 'Content-Type': 'application/json',
166
- },
167
- body: JSON.stringify({
168
- users: selectedUsers
169
- })
170
- })
171
- .then(response => response.json())
172
- .then(data => {
173
- if (data.status === 'success') {
174
- // 成功したらインデックスページに進む
175
- window.location.href = '/index';
176
- } else {
177
- alert('エラーが発生しました: ' + (data.error || 'Unknown error'));
178
- }
179
- })
180
- .catch(error => {
181
- console.error('Error selecting users:', error);
182
- alert('サーバーとの通信中にエラーが発生しました');
183
- });
184
- }
185
-
186
- // 削除確認モーダルを表示
187
- function showDeleteModal(username) {
188
- userToDelete = username;
189
- document.getElementById('deleteModalText').textContent = `メンバー「${username}」を削除しますか?削除すると元に戻せません。`;
190
- document.getElementById('deleteModal').style.display = 'flex';
191
- }
192
-
193
- // 削除確認モーダルを非表示
194
- function hideDeleteModal() {
195
- document.getElementById('deleteModal').style.display = 'none';
196
- userToDelete = null;
197
- }
198
-
199
- // メンバーの削除を実行
200
- function confirmDelete() {
201
- if (!userToDelete) return;
202
-
203
- // 削除中の表示
204
- document.getElementById('deleteModalText').innerHTML = `
205
- <div class="loading">
206
- <div class="spinner"></div>
207
- <p>メンバー「${userToDelete}」を削除中...</p>
208
- </div>
209
- `;
210
-
211
- fetch('/reset_member', {
212
- method: 'POST',
213
- headers: {
214
- 'Content-Type': 'application/json',
215
- },
216
- body: JSON.stringify({
217
- names: [userToDelete]
218
- })
219
- })
220
- .then(response => response.json())
221
- .then(data => {
222
- if (data.status === 'success') {
223
- // 選択リストからも削除
224
- const index = selectedUsers.indexOf(userToDelete);
225
- if (index !== -1) {
226
- selectedUsers.splice(index, 1);
227
- saveSelections();
228
- }
229
-
230
- // リストから削除して再表示
231
- allUsers = allUsers.filter(user => user !== userToDelete);
232
- renderUserList(allUsers);
233
-
234
- // モーダルを閉じる
235
- hideDeleteModal();
236
-
237
- // 成功メッセージ表示(オプション)
238
- const successMessage = document.createElement('div');
239
- successMessage.className = 'success-message';
240
- 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>`;
241
- document.querySelector('.container').prepend(successMessage);
242
-
243
- // 数秒後にメッセージを消す
244
- setTimeout(() => {
245
- successMessage.remove();
246
- }, 3000);
247
- } else {
248
- alert('削除に失敗しました: ' + (data.message || 'Unknown error'));
249
- hideDeleteModal();
250
- }
251
- })
252
- .catch(error => {
253
- console.error('Error deleting user:', error);
254
- alert('サーバーとの通信中にエラーが発生しました');
255
- hideDeleteModal();
256
- });
257
- }
258
-
259
- // ハンバーガーメニュー表示/非表示の切り替え
260
- function toggleMenu(event) {
261
- event.stopPropagation();
262
- const menu = document.getElementById('menu');
263
- menu.classList.toggle('open');
264
- }
265
-
266
- // メニュー外クリックでメニューを閉じる
267
- function closeMenu(event) {
268
- const menu = document.getElementById('menu');
269
- if (menu.classList.contains('open') && !menu.contains(event.target) && event.target.id !== 'menuButton') {
270
- menu.classList.remove('open');
271
- }
272
- }
273
-
274
- // 各画面へのナビゲーション関数
275
- function showUserRegister() {
276
- window.location.href = '/userregister';
277
- }
278
-
279
- function showIndex() {
280
- window.location.href = '/index';
281
- }
282
-
283
- function showResults() {
284
- window.location.href = '/feedback';
285
- }
286
-
287
- function showTalkDetail() {
288
- window.location.href = '/talk_detail';
289
- }
290
-
291
- function resetAction() {
292
- window.location.href = '/reset_html';
293
- }
 
 
1
+ let allUsers = [];
2
+ let selectedUsers = [];
3
+ let userToDelete = null;
4
+
5
+ // ページ読み込み時にユーザーリストを取得
6
+ document.addEventListener('DOMContentLoaded', fetchUserList);
7
+
8
+ // ユーザーリスト取得 - Flask APIの変更に合わせて修正
9
+ function fetchUserList() {
10
+ fetch('/list_base_audio')
11
+ .then(response => response.json())
12
+ .then(data => {
13
+ if (data.status === 'success' && Array.isArray(data.id)) {
14
+ // APIの変更: data.fileNames → data.id
15
+ allUsers = data.id;
16
+ renderUserList(allUsers);
17
+ } else {
18
+ showError('メンバーリストの取得に失敗しました');
19
+ }
20
+ })
21
+ .catch(error => {
22
+ console.error('Error fetching user list:', error);
23
+ showError('サーバーとの通信中にエラーが発生しました');
24
+ });
25
+ }
26
+
27
+ // ユーザーリストの表示
28
+ function renderUserList(users) {
29
+ const userListElement = document.getElementById('userList');
30
+
31
+ if (!users || users.length === 0) {
32
+ userListElement.innerHTML = `
33
+ <div class="no-users">
34
+ <p>登録されているメンバーがいません。</p>
35
+ <p>「新規登録」から音声を登録してください。</p>
36
+ </div>
37
+ `;
38
+ return;
39
+ }
40
+
41
+ let html = '';
42
+ users.forEach(user => {
43
+ const firstLetter = user.substr(0, 1).toUpperCase();
44
+ html += `
45
+ <div class="user-item">
46
+ <input type="checkbox" id="user-${user}" value="${user}" onchange="toggleUserSelection('${user}')">
47
+ <label for="user-${user}">${user}</label>
48
+ <div class="user-avatar">${firstLetter}</div>
49
+ <button class="delete-button" onclick="showDeleteModal('${user}')">
50
+ <i class="fas fa-trash"></i>
51
+ </button>
52
+ </div>
53
+ `;
54
+ });
55
+
56
+ userListElement.innerHTML = html;
57
+
58
+ // 既に選択済みのユーザーがあればチェックを入れる
59
+ checkStoredSelections();
60
+ }
61
+
62
+ // ユーザー選択の切り替え
63
+ function toggleUserSelection(username) {
64
+ const index = selectedUsers.indexOf(username);
65
+ if (index === -1) {
66
+ selectedUsers.push(username);
67
+ } else {
68
+ selectedUsers.splice(index, 1);
69
+ }
70
+
71
+ updateSelectedCount();
72
+ updateProceedButton();
73
+ saveSelections();
74
+ }
75
+
76
+ // すべてのユーザーを選択
77
+ function selectAllUsers() {
78
+ selectedUsers = [...allUsers];
79
+
80
+ // チェックボックスを更新
81
+ allUsers.forEach(user => {
82
+ const checkbox = document.getElementById(`user-${user}`);
83
+ if (checkbox) checkbox.checked = true;
84
+ });
85
+
86
+ updateSelectedCount();
87
+ updateProceedButton();
88
+ saveSelections();
89
+ }
90
+
91
+ // すべての選択を解除
92
+ function deselectAllUsers() {
93
+ selectedUsers = [];
94
+
95
+ // チェックボックスを更新
96
+ allUsers.forEach(user => {
97
+ const checkbox = document.getElementById(`user-${user}`);
98
+ if (checkbox) checkbox.checked = false;
99
+ });
100
+
101
+ updateSelectedCount();
102
+ updateProceedButton();
103
+ saveSelections();
104
+ }
105
+
106
+ // 選択数の表示を更新
107
+ function updateSelectedCount() {
108
+ document.getElementById('selectedCount').textContent = `選択中: ${selectedUsers.length}人`;
109
+ }
110
+
111
+ // 進むボタンの有効/無効を更新
112
+ function updateProceedButton() {
113
+ document.getElementById('proceedButton').disabled = selectedUsers.length === 0;
114
+ }
115
+
116
+ // 選択を保存
117
+ function saveSelections() {
118
+ localStorage.setItem('selectedUsers', JSON.stringify(selectedUsers));
119
+ }
120
+
121
+ // 保存されている選択を読み込み
122
+ function checkStoredSelections() {
123
+ const storedSelections = localStorage.getItem('selectedUsers');
124
+ if (storedSelections) {
125
+ try {
126
+ selectedUsers = JSON.parse(storedSelections);
127
+ selectedUsers = selectedUsers.filter(user => allUsers.includes(user)); // 存在するユーザーのみ選択
128
+
129
+ // チェックボックスに反映
130
+ selectedUsers.forEach(user => {
131
+ const checkbox = document.getElementById(`user-${user}`);
132
+ if (checkbox) checkbox.checked = true;
133
+ });
134
+
135
+ updateSelectedCount();
136
+ updateProceedButton();
137
+ } catch (e) {
138
+ console.error('保存された選択の読み込みに失敗しました', e);
139
+ selectedUsers = [];
140
+ }
141
+ }
142
+ }
143
+
144
+ // エラー表示
145
+ function showError(message) {
146
+ const userListElement = document.getElementById('userList');
147
+ userListElement.innerHTML = `
148
+ <div class="no-users">
149
+ <p>${message}</p>
150
+ <button class="select-button" onclick="fetchUserList()">再読み込み</button>
151
+ </div>
152
+ `;
153
+ }
154
+
155
+ // 選択されたユーザーでサーバーに送信して次のページに進む
156
+ function proceedWithSelectedUsers() {
157
+ if (selectedUsers.length === 0) {
158
+ alert('少なくとも1人のメンバーを選択してください');
159
+ return;
160
+ }
161
+
162
+ // 選択したユーザーをサーバーに送信
163
+ fetch('/select_users', {
164
+ method: 'POST',
165
+ headers: {
166
+ 'Content-Type': 'application/json',
167
+ },
168
+ body: JSON.stringify({
169
+ users: selectedUsers
170
+ })
171
+ })
172
+ .then(response => response.json())
173
+ .then(data => {
174
+ if (data.status === 'success') {
175
+ // 成功したらインデックスページに進む
176
+ window.location.href = '/index';
177
+ } else {
178
+ alert('エラーが発生しました: ' + (data.error || 'Unknown error'));
179
+ }
180
+ })
181
+ .catch(error => {
182
+ console.error('Error selecting users:', error);
183
+ alert('サーバーとの通信中にエラーが発生しました');
184
+ });
185
+ }
186
+
187
+ // 削除確認モーダルを表示
188
+ function showDeleteModal(username) {
189
+ userToDelete = username;
190
+ document.getElementById('deleteModalText').textContent = `メンバー「${username}」を削除しますか?削除すると元に戻せません。`;
191
+ document.getElementById('deleteModal').style.display = 'flex';
192
+ }
193
+
194
+ // 削除確認モーダルを非表示
195
+ function hideDeleteModal() {
196
+ document.getElementById('deleteModal').style.display = 'none';
197
+ userToDelete = null;
198
+ }
199
+
200
+ // メンバーの削除を実行
201
+ function confirmDelete() {
202
+ if (!userToDelete) return;
203
+
204
+ // 削除中の表示
205
+ document.getElementById('deleteModalText').innerHTML = `
206
+ <div class="loading">
207
+ <div class="spinner"></div>
208
+ <p>メンバー「${userToDelete}」を削除中...</p>
209
+ </div>
210
+ `;
211
+
212
+ fetch('/reset_member', {
213
+ method: 'POST',
214
+ headers: {
215
+ 'Content-Type': 'application/json',
216
+ },
217
+ body: JSON.stringify({
218
+ names: [userToDelete]
219
+ })
220
+ })
221
+ .then(response => response.json())
222
+ .then(data => {
223
+ if (data.status === 'success') {
224
+ // 選択リストからも削除
225
+ const index = selectedUsers.indexOf(userToDelete);
226
+ if (index !== -1) {
227
+ selectedUsers.splice(index, 1);
228
+ saveSelections();
229
+ }
230
+
231
+ // リストから削除して再表示
232
+ allUsers = allUsers.filter(user => user !== userToDelete);
233
+ renderUserList(allUsers);
234
+
235
+ // モーダルを閉じる
236
+ hideDeleteModal();
237
+
238
+ // 成功メッセージ表示(オプション)
239
+ const successMessage = document.createElement('div');
240
+ successMessage.className = 'success-message';
241
+ 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>`;
242
+ document.querySelector('.container').prepend(successMessage);
243
+
244
+ // 数秒後にメッセージを消す
245
+ setTimeout(() => {
246
+ successMessage.remove();
247
+ }, 3000);
248
+ } else {
249
+ alert('削除に失敗しました: ' + (data.message || 'Unknown error'));
250
+ hideDeleteModal();
251
+ }
252
+ })
253
+ .catch(error => {
254
+ console.error('Error deleting user:', error);
255
+ alert('サーバーとの通信中にエラーが発生しました');
256
+ hideDeleteModal();
257
+ });
258
+ }
259
+
260
+ // ハンバーガーメニュー表示/非表示の切り替え
261
+ function toggleMenu(event) {
262
+ event.stopPropagation();
263
+ const menu = document.getElementById('menu');
264
+ menu.classList.toggle('open');
265
+ }
266
+
267
+ // メニュー外クリックでメニューを閉じる
268
+ function closeMenu(event) {
269
+ const menu = document.getElementById('menu');
270
+ if (menu.classList.contains('open') && !menu.contains(event.target) && event.target.id !== 'menuButton') {
271
+ menu.classList.remove('open');
272
+ }
273
+ }
274
+
275
+ // 各画面へのナビゲーション関数
276
+ function showUserRegister() {
277
+ window.location.href = '/userregister';
278
+ }
279
+
280
+ function showIndex() {
281
+ window.location.href = '/index';
282
+ }
283
+
284
+ function showResults() {
285
+ window.location.href = '/feedback';
286
+ }
287
+
288
+ function showTalkDetail() {
289
+ window.location.href = '/talk_detail';
290
+ }
291
+
292
+ function resetAction() {
293
+ window.location.href = '/reset_html';
294
+ }