feat: スクリプトも共通化。横展開を容易にするためにクラス化した。生物由来照会画面に展開。

ecs/jskult-webapp/src/static/function/businessLogicScript.js

@@ -1,3 +1,49 @@
+// ローディング
+
+/**
+ * ローディングクラス
+ * @param {string} loading_elem_id ローディングのHTML要素
+ */
+class Loading {
+    constructor(loadingElemId = '_loading') {
+        this.loadingElemId = loadingElemId;
+        // ロード中かどうか
+        this.isLoading = false;
+    }
+
+    /**
+     * ローディングを開始する。<br>
+     * 開始済みの場合と、ローディングの要素が見つからない場合は何もしない。
+     */
+    start() {
+        if (this.isLoading)
+            return;
+
+        const loadingElem = document.getElementById(this.loadingElemId);
+
+        if (loadingElem) {
+            this.isLoading = true;
+            loadingElem.style.display = 'block';
+        }
+    }
+
+    /**
+     * ローディングを停止する。<br>
+     * 開始されていない場合と、ローディングの要素が見つからない場合は何もしない。
+     */
+    stop() {
+        if (!this.isLoading)
+            return;
+
+        const loadingElem = document.getElementById(this.loadingElemId);
+
+        if (loadingElem) {
+            this.isLoading = false;
+            loadingElem.style.display = 'none';
+        }
+    }
+}
+
 // 検索フォーム
 
 // 戻るボタンの関数

ecs/jskult-webapp/src/templates/bioSearchList.html

@@ -195,10 +195,12 @@
         <input type="checkbox" name="ikoFlg" value="true" {{bio.is_checked_iko_flg()}} style="display: none;">
     </form>
 
-    <!-- CSV/Excelダウンロードボタン。ここはajaxでやってる -->
+    <!-- CSV/Excelダウンロード処理-->
     <script type="text/javascript">
         function download(filename, ext) {
-            $(`#_loading`).toggle()
+            // ローディング開始
+            const loading = new Loading();
+            loading.start();
 
             // 検索パラメータを取得
             const formData = $('#bio_download').serializeArray()
@@ -234,7 +236,8 @@
                         }
                         // S3の期限付き署名URLがレスポンスされる
                         window.location.href = data.download_url;
-                        $(`#_loading`).toggle();
+                        // ローディング停止
+                        loading.stop();
                         $(`#modal_${ext}`).modal('toggle');
                     } catch (e) {
                         alert("エラーが発生しました。:" + e.message);
@@ -243,20 +246,20 @@
                 error: function(jqXHR, textStatus, errorThrown) {
                     const responseJson = jqXHR.responseJSON
                     if (responseJson?.detail?.error === 'db_error') {
-                        $(`#_loading`).toggle();
+                        loading.stop()
                         $(`#modal_${ext}`).modal('toggle');
                         $(`#ErrorModal_DB`).modal('toggle');
                         return
                     }
                     if (responseJson?.detail?.error === 'aws_error') {
-                        $(`#_loading`).toggle();
+                        loading.stop();
                         $(`#modal_${ext}`).modal('toggle');
                         $(`#ErrorModal_AWS`).modal('toggle');
                         return
                     }
 
                     // 予期せぬエラーが発生した場合
-                    $(`#_loading`).toggle();
+                    loading.stop();
                     $(`#modal_${ext}`).modal('toggle');
                     $(`#ErrorModal_Unexpected`).modal('toggle');
                     return