show information message if the file is not valid

key4hep · Jul 28, 2024 · dbe4815 · dbe4815
1 parent 5053077
commit dbe4815
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 9 deletions.
diff --git a/css/empty-view.css → css/information-message.css b/css/empty-view.css → css/information-message.css
@@ -1,4 +1,4 @@
-#empty-view {
+#information-message-modal {
   display: none;
   align-items: center;
   background-color: #e1e1e1;
@@ -13,6 +13,6 @@
   border: 1px solid #000;
 }
 
-#empty-view p {
+#information-message-modal p {
   margin-left: 10px;
 }
diff --git a/index.html b/index.html
@@ -17,7 +17,7 @@
   <link rel="stylesheet" href="css/information.css">
   <link rel="stylesheet" href="css/contact.css">
   <link rel="stylesheet" href="css/views.css">
-  <link rel="stylesheet" href="css/empty-view.css">
+  <link rel="stylesheet" href="css/information-message.css">
   <link rel="stylesheet" href="css/switch-deploy.css">
   <link rel="stylesheet" href="css/current-file.css">
 </head>
@@ -181,9 +181,9 @@ <h2 id="view-title-info"></h2>
     <div id="view-selector" class="view-selector-menu"></div>
   </div>
 
-  <div id="empty-view">
+  <div id="information-message-modal">
     <img src="img/blue-info.svg" alt="Empty view" width="20" height="20" />
-    <p>This view has no elements</p>
+    <p id="information-text">This view has no elements</p>
   </div>
 
   <div id="switch-deploy">

diff --git a/js/current-file.js b/js/current-file.js
@@ -1,5 +1,6 @@
 import { eventCollection, renderEvent } from "./event-number.js";
 import { selectViewInformation } from "./information.js";
+import { showMessage } from "./lib/messages.js";
 import { jsonData } from "./main.js";
 import { scrollLocations } from "./views/views.js";
 
@@ -8,11 +9,13 @@ const fileInput = document.getElementById("change-file-input");
 fileInput.addEventListener("change", (event) => {
   for (const file of event.target.files) {
     if (!file.name.endsWith("edm4hep.json")) {
-      errorMsg("Provided file is not EDM4hep JSON!");
+      showMessage("ERROR: Provided file is not EDM4hep JSON!");
+      return;
     }
 
     if (!file.type.endsWith("/json")) {
-      errorMsg("ERROR: Provided file is not EDM4hep JSON!");
+      showMessage("ERROR: Provided file is not JSON!");
+      return;
     }
 
     setFileName(file.name);

diff --git a/js/lib/messages.js b/js/lib/messages.js
@@ -13,11 +13,26 @@ export function errorMsg(msg) {
 }
 
 export function emptyViewMessage() {
-  const msgDiv = document.getElementById("empty-view");
+  const msgDiv = document.getElementById("information-message-modal");
   msgDiv.style.display = "flex";
+
+  const msgText = document.getElementById("information-text");
+  msgText.innerText = "This view has no elements";
 }
 
 export function hideEmptyViewMessage() {
-  const msgDiv = document.getElementById("empty-view");
+  const msgDiv = document.getElementById("information-message-modal");
   msgDiv.style.display = "none";
 }
+
+export function showMessage(message) {
+  const msgDiv = document.getElementById("information-message-modal");
+  msgDiv.style.display = "flex";
+
+  const msgText = document.getElementById("information-text");
+  msgText.innerText = message;
+
+  setTimeout(() => {
+    msgDiv.style.display = "none";
+  }, 2000);
+}