From dd699dce04a68186239f04ed60e09f0fea9b2934 Mon Sep 17 00:00:00 2001
From: Derek Slaughter <deslaughter@gmail.com>
Date: Fri, 19 Jul 2024 16:31:47 -0400
Subject: [PATCH] Add basic error modal

---
 frontend/package-lock.json | 10 +++++++++
 frontend/package.json      |  3 ++-
 frontend/package.json.md5  |  2 +-
 frontend/src/App.vue       | 42 ++++++++++++++++++++++++++++++++++++++
 frontend/src/project.ts    | 28 +++++++++++++++++++++++++
 5 files changed, 83 insertions(+), 2 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 8c62f0c..cbb375e 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -20,6 +20,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",
@@ -123,6 +124,15 @@
         "url": "https://opencollective.com/popperjs"
       }
     },
+    "node_modules/@types/bootstrap": {
+      "version": "5.2.10",
+      "resolved": "https://registry.npmjs.org/@types/bootstrap/-/bootstrap-5.2.10.tgz",
+      "integrity": "sha512-F2X+cd6551tep0MvVZ6nM8v7XgGN/twpdNDjqS1TUM7YFNEtQYWk+dKAnH+T1gr6QgCoGMPl487xw/9hXooa2g==",
+      "dev": true,
+      "dependencies": {
+        "@popperjs/core": "^2.9.2"
+      }
+    },
     "node_modules/@types/chroma-js": {
       "version": "2.4.4",
       "resolved": "https://registry.npmjs.org/@types/chroma-js/-/chroma-js-2.4.4.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 1fa2aa6..9ed9e8d 100644
--- 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"
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/package.json.md5 b/frontend/package.json.md5
index 323920d..550a1a8 100755
--- a/frontend/package.json.md5
+++ b/frontend/package.json.md5
@@ -1 +1 @@
-2676432337f7cceab17a289a8cf656eb
\ No newline at end of file
+9033e10d7355cd19ee74ae19116cf9e3
\ No newline at end of file
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index c5e46c8..d0fe2eb 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,6 +1,29 @@
 <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>
@@ -8,6 +31,25 @@ import MainNav from './components/MainNav.vue'
   <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
index c514153..09ab28d 100644
--- 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,6 +287,7 @@ export const useProjectStore = defineStore('project', () => {
             Object.assign(evalStatus, result)
         }).catch(err => {
             LogError(err)
+            errMsg.value = err
             console.log(err)
         })
     }
@@ -275,6 +295,7 @@ export const useProjectStore = defineStore('project', () => {
     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