Add basic error modal

OpenFAST · Jul 19, 2024 · dd699dc · dd699dc
1 parent 0b6164d
commit dd699dc
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 2 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -21,6 +21,7 @@
   },
   "devDependencies": {
     "@babel/types": "^7.18.10",
+    "@types/bootstrap": "^5.2.10",
     "@types/chroma-js": "^2.4.4",
     "@types/three": "^0.158.2",
     "@vitejs/plugin-vue": "^3.0.3",
@@ -29,4 +30,4 @@
     "vite": "^3.0.7",
     "vue-tsc": "^1.8.27"
   }
-}
+}
diff --git a/frontend/package.json.md5 b/frontend/package.json.md5
@@ -1 +1 @@
-2676432337f7cceab17a289a8cf656eb
+9033e10d7355cd19ee74ae19116cf9e3
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -1,13 +1,55 @@
 <script lang="ts" setup>
 
 import MainNav from './components/MainNav.vue'
+import { storeToRefs } from 'pinia'
+import { ref, reactive, onMounted, watch } from 'vue'
+import { useProjectStore } from './project';
+import { Modal } from 'bootstrap';
+
+const project = useProjectStore()
+
+const { errMsg } = storeToRefs(project)
+const modalInstance = ref<Modal | null>();
+
+onMounted(() => {
+  modalInstance.value = new Modal(document.getElementById("errorModal") as Element);
+})
+
+watch(errMsg, () => {
+  if (errMsg != null) modalInstance.value?.show()
+})
+
+function closeModal() {
+  project.errMsg = null;
+  modalInstance.value?.hide()
+}
+
 </script>
 
 <template>
   <MainNav />
   <div class="container-fluid">
     <router-view />
   </div>
+
+  <div class="modal fade" id="errorModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
+    aria-labelledby="staticBackdropLabel" aria-hidden="true">
+    <div class="modal-dialog modal-lg">
+      <div class="modal-content">
+        <div class="modal-header text-bg-danger">
+          <h1 class="modal-title fs-5" id="staticBackdropLabel">Error</h1>
+          <button type="button" class="btn-close" @click="closeModal()" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          {{ project.errMsg }}
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-primary" @click="closeModal()">Close</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
 </template>
 
 <style></style>
diff --git a/frontend/src/project.ts b/frontend/src/project.ts
@@ -31,6 +31,8 @@ class Loading {
 
 export const useProjectStore = defineStore('project', () => {
 
+    const errMsg = ref<any | null>(null)
+
     const status = reactive<Loading>(new Loading)
     const config = ref<main.Config | null>(null)
     const info = ref<main.Info | null>(null)
@@ -69,6 +71,7 @@ export const useProjectStore = defineStore('project', () => {
         config.value = result
     }).catch(err => {
         LogError(err)
+        errMsg.value = err
         console.log(err)
     })
 
@@ -83,6 +86,7 @@ export const useProjectStore = defineStore('project', () => {
             status.project = LOADED
         }).catch(err => {
             LogError(err)
+            errMsg.value = err
             console.log(err)
         })
     }
@@ -94,6 +98,7 @@ export const useProjectStore = defineStore('project', () => {
             status.project = LOADED
         }).catch(err => {
             LogError(err)
+            errMsg.value = err
             console.log(err)
         })
     }
@@ -109,6 +114,7 @@ export const useProjectStore = defineStore('project', () => {
             status.project = LOADED
         }).catch(err => {
             LogError(err)
+            errMsg.value = err
             console.log(err)
         })
     }
@@ -130,6 +136,7 @@ export const useProjectStore = defineStore('project', () => {
         // Save config
         SaveConfig(config.value).catch(err => {
             LogError(err)
+            errMsg.value = err
             console.log(err)
         })
     }
@@ -144,6 +151,7 @@ export const useProjectStore = defineStore('project', () => {
             model.value = result
         }).catch(err => {
             LogError(err)
+            errMsg.value = err
             console.log(err)
         })
     }
@@ -153,6 +161,7 @@ export const useProjectStore = defineStore('project', () => {
             model.value = result
         }).catch(err => {
             LogError(err)
+            errMsg.value = err
             console.log(err)
         })
     }
@@ -163,6 +172,7 @@ export const useProjectStore = defineStore('project', () => {
             model.value = result
         }).catch(err => {
             LogError(err)
+            errMsg.value = err
             console.log(err)
         })
     }
@@ -177,6 +187,7 @@ export const useProjectStore = defineStore('project', () => {
             analysis.value = result
         }).catch(err => {
             LogError(err)
+            errMsg.value = err
             console.log(err)
         })
     }
@@ -187,6 +198,7 @@ export const useProjectStore = defineStore('project', () => {
             analysis.value = result
         }).catch(err => {
             LogError(err)
+            errMsg.value = err
             console.log(err)
         })
     }
@@ -197,6 +209,7 @@ export const useProjectStore = defineStore('project', () => {
             currentCaseID.value = result.Cases.length
         }).catch(err => {
             LogError(err)
+            errMsg.value = err
             console.log(err)
         })
     }
@@ -207,6 +220,7 @@ export const useProjectStore = defineStore('project', () => {
             currentCaseID.value = result.Cases.length
         }).catch(err => {
             LogError(err)
+            errMsg.value = err
             console.log(err)
         })
     }
@@ -217,6 +231,7 @@ export const useProjectStore = defineStore('project', () => {
             if (currentCaseID.value > 1) currentCaseID.value = currentCaseID.value - 1
         }).catch(err => {
             LogError(err)
+            errMsg.value = err
             console.log(err)
         })
     }
@@ -226,6 +241,7 @@ export const useProjectStore = defineStore('project', () => {
             analysis.value = result
         }).catch(err => {
             LogError(err)
+            errMsg.value = err
             console.log(err)
         })
     }
@@ -240,6 +256,7 @@ export const useProjectStore = defineStore('project', () => {
             evaluate.value = result
         }).catch(err => {
             LogError(err)
+            errMsg.value = err
             console.log(err)
         })
     }
@@ -250,6 +267,7 @@ export const useProjectStore = defineStore('project', () => {
             evaluate.value = result
         }).catch(err => {
             LogError(err)
+            errMsg.value = err
             console.log(err)
         })
     }
@@ -259,6 +277,7 @@ export const useProjectStore = defineStore('project', () => {
             evaluate.value = result
         }).catch(err => {
             LogError(err)
+            errMsg.value = err
             console.log(err)
         })
     }
@@ -268,13 +287,15 @@ export const useProjectStore = defineStore('project', () => {
             Object.assign(evalStatus, result)
         }).catch(err => {
             LogError(err)
+            errMsg.value = err
             console.log(err)
         })
     }
 
     function cancelEvaluate() {
         CancelEvaluate().catch(err => {
             LogError(err)
+            errMsg.value = err
             console.log(err)
         })
     }
@@ -300,6 +321,7 @@ export const useProjectStore = defineStore('project', () => {
             if (res.Diagram != null) diagram.value = res.Diagram
         }).catch(err => {
             LogError(err)
+            errMsg.value = err
             console.log(err)
         })
     }
@@ -312,6 +334,7 @@ export const useProjectStore = defineStore('project', () => {
             if (res.Diagram != null) diagram.value = res.Diagram
         }).catch(err => {
             LogError(err)
+            errMsg.value = err
             console.log(err)
         })
     }
@@ -323,6 +346,7 @@ export const useProjectStore = defineStore('project', () => {
             console.log(result)
         }).catch(err => {
             LogError(err)
+            errMsg.value = err
             console.log(err)
         })
     }
@@ -340,6 +364,7 @@ export const useProjectStore = defineStore('project', () => {
             status.results = LOADED
         }).catch(err => {
             LogError(err)
+            errMsg.value = err
             console.log(err)
             status.results = NOT_LOADED
         })
@@ -357,6 +382,7 @@ export const useProjectStore = defineStore('project', () => {
             status.diagram = LOADED
         }).catch(err => {
             LogError(err)
+            errMsg.value = err
             console.log(err)
             status.diagram = NOT_LOADED
         })
@@ -366,6 +392,7 @@ export const useProjectStore = defineStore('project', () => {
         if (diagram.value == null) return
         UpdateDiagram(diagram.value).catch(err => {
             LogError(err)
+            errMsg.value = err
             console.log(err)
         })
     }
@@ -408,6 +435,7 @@ export const useProjectStore = defineStore('project', () => {
     //--------------------------------------------------------------------------
 
     return {
+        errMsg,
         $reset,
         status: status,
         // Project
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		2676432337f7cceab17a289a8cf656eb
		9033e10d7355cd19ee74ae19116cf9e3