💄 : add toast notifications

pom.xml

@@ -143,6 +143,13 @@
 			<version>0.9.6</version>
 		</dependency>
 
+		<!-- better toasts https://github.com/HubSpot/messenger -->
+		<dependency>
+			<groupId>org.webjars.bower</groupId>
+			<artifactId>messenger</artifactId>
+			<version>1.5.0</version>
+		</dependency>
+
 	</dependencies>
 
 	<build>

src/main/resources/static/css/style.css

@@ -3568,4 +3568,8 @@ span.round-tab:hover {
         position: absolute;
         left: 35%;
     }
+}
+
+ul.messenger.messenger-fixed.messenger-on-top.custom-messenger-on-top {
+    top: 75px;
 }

src/main/resources/templates/helpers/messenger.html

@@ -0,0 +1,28 @@
+<script src="/webjars/messenger/1.5.0/build/js/messenger.min.js"></script>
+
+<script>
+    // load messenger css dynamically
+    const messengerCssId = "messengerCss";
+    if( $("#messengerCss").length === 0 ){
+        loadCss("/webjars/messenger/1.5.0/build/css/messenger.css");
+        loadCss("/webjars/messenger/1.5.0/build/css/messenger-spinner.css");
+        loadCss("/webjars/messenger/1.5.0/build/css/messenger-theme-air.css");
+    }
+
+    function loadCss(stylesheet){
+        const head  = $("head")[0];
+        const link  = document.createElement("link");
+        link.id   = messengerCssId;
+        link.rel  = 'stylesheet';
+        link.type = 'text/css';
+        link.href = stylesheet;
+        link.media = 'all';
+        head.appendChild(link);
+    }
+
+    Messenger.options = {
+        extraClasses: 'messenger-fixed messenger-on-top messenger-on-right custom-messenger-on-top',
+        theme: 'air',
+        parentLocations: ["#content", "body"]
+    };
+</script>

src/main/resources/templates/module.html

@@ -105,6 +105,8 @@ <h2>Variables <button type="button" class="btn btn-success" @click="addVar()">+<
 
 <script src="/webjars/vue/2.5.16/vue.js"></script>
 
+<div th:replace="helpers/messenger"></div>
+
 <script th:inline="javascript" type="application/ecmascript">
     const moduleId = [[${module.id}]];
 
@@ -119,12 +121,18 @@ <h2>Variables <button type="button" class="btn btn-success" @click="addVar()">+<
                 template: "#template",
                 methods: {
                     post: function(){
+                        const message = Messenger().post({
+                            type: "info",
+                            message: "Saving module."
+                        });
                         $.ajax({
                             url: `/api/terraformModules/${moduleId}`,
                             data: JSON.stringify(moduleData),
                             contentType: "application/json",
-                            method: "PUT"
-                        })
+                            method: "PUT",
+                            success: () => message.update({type: "success", message: "Module saved."}),
+                            error: () => message.update({type: "error", message: "Error saving module."})
+                        });
                     },
                     removeVar(varIdx){
                         data.variables.splice(varIdx,1);

src/main/resources/templates/settings.html

@@ -89,6 +89,8 @@ <h2>Environment Variables <button type="button" class="btn btn-success" @click="
 
 <script src="/webjars/vue/2.5.16/vue.js"></script>
 
+<div th:replace="helpers/messenger"></div>
+
 <script th:inline="javascript" type="application/ecmascript">
     const settings = [[${settings}]];
     const envVars = settings.envVars;
@@ -107,12 +109,18 @@ <h2>Environment Variables <button type="button" class="btn btn-success" @click="
     });
 
     function saveSettings(){
+        const message = Messenger().post({
+            type: "info",
+            message: "Saving settings."
+        });
         $.ajax({
             url: `/settings`,
             data: JSON.stringify(settings),
             contentType: "application/json",
-            method: "PUT"
-        })
+            method: "PUT",
+            success: () => message.update({type: "success", message: "Settings saved."}),
+            error: () => message.update({type: "error", message: "Error saving settings"})
+        });
     }
 </script>
 

src/main/resources/templates/stack.html

@@ -164,6 +164,7 @@ <h2><span><i class="fas fa-history"></i> Job history</span></h2>
     })
 </script>
 
+<div th:replace="helpers/messenger"></div>
 
 <script th:inline="javascript" type="application/ecmascript">
     let stack;
@@ -236,11 +237,14 @@ <h2><span><i class="fas fa-history"></i> Job history</span></h2>
                     const message = Messenger().post({
                         type: "info",
                         message: "Saving stack."
+                    });
                     $.ajax({
                         url: `/api/stacks/${stackId}`,
                         data: JSON.stringify(stack),
                         contentType: "application/json",
-                        method: "PUT"
+                        method: "PUT",
+                        success: () => message.update({type: "success", message: "Stack saved."}),
+                        error: () => message.update({type: "error", message: "Error saving stack."})
                     });
                 }
             }