toastTypeを定義

resources/setting_ui_template.html

@@ -167,6 +167,7 @@ <h5 class="modal-title" id="importUserDictModalLabel">
       <div class="position-fixed bottom-0 end-0 p-3" style="z-index: 5">
         <div
           class="toast align-items-center autohide text-white"
+          :class="'bg-' + toastType"
           role="alert"
           aria-live="assertive"
           aria-atomic="true"
@@ -187,7 +188,7 @@ <h5 class="modal-title" id="importUserDictModalLabel">
           setup() {
             // 設定値周り
             const corsPolicyMode = ref(
-              "<JINJA_PRE>cors_policy_mode<JINJA_POST>"
+              "<JINJA_PRE>cors_policy_mode<JINJA_POST>",
             );
             const allowOrigin = ref("<JINJA_PRE>allow_origin<JINJA_POST>");
 
@@ -246,25 +247,20 @@ <h5 class="modal-title" id="importUserDictModalLabel">
             const toastElem = ref(undefined);
             const bootstrapToast = ref(undefined);
             const toastMessage = ref("");
+            const toastType = ref("success");
             onMounted(() => {
               if (toastElem.value == undefined) {
                 throw new Error("toastElemが見つかりません。");
               }
               bootstrapToast.value = new bootstrap.Toast(toastElem.value);
             });
 
-            // メッセージを表示する。typeはsuccess・info・warning・danger。
+            // メッセージを表示する。typeはsuccess・info・warning・dangerなど。
             const showToastWithMessage = (message, type) => {
               console.log(`showToastWithMessage: ${message}, ${type}`);
               bootstrapToast.value.show();
               toastMessage.value = message;
-              toastElem.value.classList.remove(
-                "bg-success",
-                "bg-info",
-                "bg-warning",
-                "bg-danger"
-              );
-              toastElem.value.classList.add(`bg-${type}`);
+              toastType.value = type;
             };
 
             // 表示用の情報
@@ -283,6 +279,7 @@ <h5 class="modal-title" id="importUserDictModalLabel">
               importUserDict,
               toastElem,
               toastMessage,
+              toastType,
               showToastWithMessage,
               brandName,
             };
@@ -321,7 +318,7 @@ <h5 class="modal-title" id="importUserDictModalLabel">
             elem.onload = resolve;
             elem.onerror = () => {
               console.warn(
-                `CDNの読み込みに失敗しました。 ${candidateUrlList[current]}`
+                `CDNの読み込みに失敗しました。 ${candidateUrlList[current]}`,
               );
               document.head.removeChild(elem);
               current++;
@@ -346,7 +343,7 @@ <h5 class="modal-title" id="importUserDictModalLabel">
             "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css",
             "https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css",
           ],
-          "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
+          "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC",
         );
         libraryLoadingPromises.push(bootstrapCssPromise);
 
@@ -357,7 +354,7 @@ <h5 class="modal-title" id="importUserDictModalLabel">
             "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js",
             "https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/js/bootstrap.bundle.min.js",
           ],
-          "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
+          "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM",
         );
         libraryLoadingPromises.push(bootstrapScriptPromise);
 
@@ -369,7 +366,7 @@ <h5 class="modal-title" id="importUserDictModalLabel">
             "https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.global.js",
             "https://cdnjs.cloudflare.com/ajax/libs/vue/3.3.10/vue.global.js",
           ],
-          "sha384-ttfhgYK68lNlS8ak6Z//mvUbpRbRCh43MYGuqEtK8mj/yzlKqY8GA8o3BPMi23cE"
+          "sha384-ttfhgYK68lNlS8ak6Z//mvUbpRbRCh43MYGuqEtK8mj/yzlKqY8GA8o3BPMi23cE",
         );
         libraryLoadingPromises.push(vuePromise);