https://ec-sync.one/assets/inventory_updates/index-4bd13b91c4c02b0…21cc591f2d7d0a04985d92af55d1b224bc50f565.js

1// DOMContentLoadedとturbo:loadの両方でイベントを監視
2document.addEventListener('DOMContentLoaded', initializeAutoReload);
3document.addEventListener('turbo:load', initializeAutoReload);
4
5// グローバルスコープで変数を管理
6let autoReloadInitialized = false;
7let currentReloadType = null; // 'inventory', 'check', null
8let reloadIntervalId = null;
9
10function initializeAutoReload() {
11  console.log('🚀 initializeAutoReload called');
12  
13  // 既存のリロードを停止
14  stopAllAutoReload();
15  
16  // URLベースでページタイプを判定
17  const urlParams = new URLSearchParams(window.location.search);
18  const currentTab = urlParams.get('tab');
19  
20  console.log('🔍 Current tab:', currentTab);
21  console.log('🔍 Current URL:', window.location.href);
22  
23  // ページタイプに応じて適切なリロード機能を開始
24  if (window.location.href.includes('/inventory_updates')) {
25    if (currentTab === 'check') {
26      setupCheckPageAutoReload();
27    } else if (!currentTab || currentTab === 'update' || currentTab === 'log') {
28      setupInventoryPageAutoReload();
29    }
30  }
31  
32  autoReloadInitialized = true;
33}
34
35function stopAllAutoReload() {
36  if (reloadIntervalId) {
37    console.log('⏹️ Stopping existing auto-reload');
38    clearInterval(reloadIntervalId);
39    reloadIntervalId = null;
40  }
41  currentReloadType = null;
42}
43
44//--------------------------------------
45// チェックページ（quick_check/bulk_check）用の自動リロード
46//--------------------------------------
47function setupCheckPageAutoReload() {
48  console.log('⚡ Setting up check page auto-reload');
49  currentReloadType = 'check';
50  
51  function startCheckAutoReload() {
52    stopAllAutoReload();
53    currentReloadType = 'check';
54    reloadIntervalId = setInterval(reloadCheckContent, 3000);
55    console.log('🔄 Check auto-reload started');
56  }
57
58  function reloadCheckContent() {
59    console.log('🔄 Reloading check content...');
60    fetch(window.location.href)
61      .then(response => response.text())
62      .then(html => {
63        const parser = new DOMParser();
64        const doc = parser.parseFromString(html, 'text/html');
65        
66        // quick_check と bulk_check の両方の状態をチェック
67        const quickCheckStatus = getQuickCheckStatus(doc);
68        const bulkCheckStatus = getBulkCheckStatus(doc);
69        
70        console.log('📊 Status check:', { quickCheckStatus, bulkCheckStatus });
71        
72        // どちらかが処理中の場合は継続、両方完了/失敗なら停止
73        const shouldContinue = quickCheckStatus === 'processing' || bulkCheckStatus === 'processing';
74        
75        if (!shouldContinue) {
76          console.log('✅ All checks completed, stopping auto-reload');
77          stopAllAutoReload();
78        }
79
80        // 結果エリアを更新
81        updateCheckResults(doc);
82        
83      })
84      .catch(error => {
85        console.error('❌ Check reload error:', error);
86        stopAllAutoReload();
87      });
88  }
89
90  function getQuickCheckStatus(doc) {
91    const statusElement = doc.querySelector('.quick-check-status');
92    const status = statusElement?.dataset.status || null;
93    console.log('🔍 Quick check status:', status);
94    return status;
95  }
96
97  function getBulkCheckStatus(doc) {
98    const statusElement = doc.querySelector('.bulk-check-status');
99    const status = statusElement?.dataset.status || null;
100    console.log('🔍 Bulk check status:', status);
101    return status;
102  }
103
104  function updateCheckResults(doc) {
105    // quick-check結果を更新
106    updateElement('#quick-check-result-container', doc);
107    
108    // bulk-check結果を更新
109    updateElement('#bulk-check-result', doc);
110    
111    // ステータス要素も更新
112    updateElement('.quick-check-status', doc);
113    updateElement('.bulk-check-status', doc);
114    
115    // ボタンの状態を更新
116    updateButtonStates(doc);
117  }
118
119  function updateButtonStates(doc) {
120    // クイックチェックボタンの更新
121    const quickCheckButton = document.querySelector('#quick-check-form input[type="submit"]');
122    const newQuickCheckButton = doc.querySelector('#quick-check-form input[type="submit"]');
123    if (quickCheckButton && newQuickCheckButton) {
124      quickCheckButton.disabled = newQuickCheckButton.disabled;
125      quickCheckButton.value = newQuickCheckButton.value;
126      quickCheckButton.className = newQuickCheckButton.className;
127      console.log(`✅ Quick check button updated: disabled=${quickCheckButton.disabled}, value=${quickCheckButton.value}`);
128    }
129
130    // 一括チェックボタンの更新
131    const bulkCheckButton = document.querySelector('form[action*="bulk_check"] input[type="submit"]');
132    const newBulkCheckButton = doc.querySelector('form[action*="bulk_check"] input[type="submit"]');
133    if (bulkCheckButton && newBulkCheckButton) {
134      bulkCheckButton.disabled = newBulkCheckButton.disabled;
135      bulkCheckButton.value = newBulkCheckButton.value;
136      bulkCheckButton.className = newBulkCheckButton.className;
137      console.log(`✅ Bulk check button updated: disabled=${bulkCheckButton.disabled}, value=${bulkCheckButton.value}`);
138    }
139  }
140
141  function updateElement(selector, doc) {
142    const newElement = doc.querySelector(selector);
143    const currentElement = document.querySelector(selector);
144    if (newElement && currentElement) {
145      currentElement.innerHTML = newElement.innerHTML;
146      // データ属性も更新
147      if (newElement.dataset && currentElement.dataset) {
148        Object.keys(newElement.dataset).forEach(key => {
149          currentElement.dataset[key] = newElement.dataset[key];
150        });
151      }
152      console.log(`✅ Updated: ${selector}`);
153    }
154  }
155
156  function checkInitialCheckState() {
157    const quickCheckElement = document.querySelector('.quick-check-status');
158    const bulkCheckElement = document.querySelector('.bulk-check-status');
159    
160    const quickStatus = quickCheckElement?.dataset.status || null;
161    const bulkStatus = bulkCheckElement?.dataset.status || null;
162    
163    console.log('🔍 Initial check states:', { quickStatus, bulkStatus });
164    
165    if (quickStatus === 'processing' || bulkStatus === 'processing') {
166      console.log('🚀 Processing detected, starting auto-reload');
167      startCheckAutoReload();
168    } else {
169      console.log('⏸️ No processing detected');
170    }
171  }
172
173  // 初期状態をチェック
174  checkInitialCheckState();
175}
176
177//--------------------------------------
178// 在庫更新ページ用の自動リロード（既存機能）
179//--------------------------------------
180function setupInventoryPageAutoReload() {
181  console.log('📊 Setting up inventory page auto-reload');
182  currentReloadType = 'inventory';
183  
184  // 在庫更新ページの処理状況要素が存在するかチェック
185  const processingStatusElement = document.querySelector('.processing-status');
186  if (!processingStatusElement) {
187    console.log('❌ No processing status element found');
188    return;
189  }
190
191  function startInventoryAutoReload() {
192    stopAllAutoReload();
193    currentReloadType = 'inventory';
194    reloadIntervalId = setInterval(reloadInventoryContent, 5000);
195    console.log('🔄 Inventory auto-reload started');
196  }
197
198  function reloadInventoryContent() {
199    fetch(window.location.href)
200      .then(response => response.text())
201      .then(html => {
202        const parser = new DOMParser();
203        const doc = parser.parseFromString(html, 'text/html');
204        
205        const statusText = doc.querySelector('.processing-status')?.textContent || '';
206  
207        if (statusText.includes('完了') || statusText.includes('失敗')) {
208          console.log('✅ Inventory processing completed');
209          stopAllAutoReload();
210        }
211
212        // 在庫更新関連の要素を更新
213        updateElement('.processing-status', doc);
214        updateElement('#log-content', doc);
215        updateElement('#history-content', doc);
216        updateInventoryButton(statusText);
217
218        function updateElement(selector, doc) {
219          const newElement = doc.querySelector(selector);
220          const currentElement = document.querySelector(selector);
221          if (newElement && currentElement) {
222            currentElement.innerHTML = newElement.innerHTML;
223          }
224        }
225
226        function updateInventoryButton(status) {
227          const submitButton = document.querySelector('#single-update-form input[type="submit"]');
228          if (submitButton) {
229            if (status.includes('完了') || status.includes('失敗')) {
230              submitButton.disabled = false;

231              submitButton.classList.remove('opacity-50');
232            } else {
233              submitButton.disabled = true;
234              submitButton.classList.add('opacity-50');
235            }
236          }
237        }
238      })
239      .catch(error => {
240        console.error('❌ Inventory reload error:', error);
241        stopAllAutoReload();
242      });
243  }
244
245  function checkInitialInventoryState() {
246    const statusText = document.querySelector('.processing-status')?.textContent || '';
247    
248    if (statusText.includes('処理中') || statusText.includes('処理待ち')) {
249      console.log('🚀 Inventory processing detected, starting auto-reload');
250      startInventoryAutoReload();
251    } else {
252      console.log('⏸️ Inventory not in processing state');
253    }
254  }
255
256  // 初期状態をチェック
257  checkInitialInventoryState();
258}
259
260// ページ離脱時のクリーンアップ
261document.addEventListener('turbo:before-visit', () => {
262  console.log('🚪 Page leaving, cleaning up all auto-reload');
263  stopAllAutoReload();
264  autoReloadInitialized = false;
265});