Add snackbar to send event buttons (#26)

Co-authored-by: Adam Wolfman <[email protected]>

Author: awolfden

python-flask-audit-logs-example/static/login.css

@@ -358,4 +358,49 @@ pre.prettyprint {
 
 .org-button-div {
     min-width: 233px;
-}
+}
+
+#snackbar {
+    visibility: hidden; /* Hidden by default. Visible on click */
+    min-width: 250px; /* Set a default minimum width */
+    margin-left: -125px; /* Divide value of min-width by 2 */
+    background-color: rgba(51, 51, 51, 0.786); /* Black background color */
+    color: #fff; /* White text color */
+    text-align: center; /* Centered text */
+    border-radius: 2px; /* Rounded borders */
+    padding: 16px; /* Padding */
+    position: fixed; /* Sit on top of the screen */
+    z-index: 1; /* Add a z-index if needed */
+    left: 50%; /* Center the snackbar */
+    bottom: 30px; /* 30px from the bottom */
+  }
+  
+  /* Show the snackbar when clicking on a button (class added with JavaScript) */
+  #snackbar.show {
+    visibility: visible; /* Show the snackbar */
+    /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
+    However, delay the fade out process for 2.5 seconds */
+    -webkit-animation: fadein 0.1s, fadeout 0.1s .5s;
+    animation: fadein 0.1s, fadeout 0.1s 0.5s;
+  }
+  
+  /* Animations to fade the snackbar in and out */
+  @-webkit-keyframes fadein {
+    from {bottom: 0; opacity: 0;}
+    to {bottom: 30px; opacity: 1;}
+  }
+  
+  @keyframes fadein {
+    from {bottom: 0; opacity: 0;}
+    to {bottom: 30px; opacity: 1;}
+  }
+  
+  @-webkit-keyframes fadeout {
+    from {bottom: 30px; opacity: 1;}
+    to {bottom: 0; opacity: 0;}
+  }
+  
+  @keyframes fadeout {
+    from {bottom: 30px; opacity: 1;}
+    to {bottom: 0; opacity: 0;}
+  }

python-flask-audit-logs-example/templates/send_events.html

@@ -65,24 +65,24 @@ <h2 class="home-hero-gradient">Enterprise Ready</h2>
                     <form action="{{ url_for('send_event') }}" method="POST">
                         <div class="flex margin-y-15">                                                                
                             <div>
-                                <button class="box" name="event" id="user_signed_in" value="0" type="submit">                            
+                                <button class="box" name="event" id="user_signed_in" value="0" type="submit" onclick="showSnackbar()">                            
                                     <div class="flex width-100p">
                                         <p>User Signed In</p> 
                                     </div>                           
                                 </button>                    
-                                <button class="box" name="event" id="user_logged_out" value="1" type="submit">                            
+                                <button class="box" name="event" id="user_logged_out" value="1" type="submit" onclick="showSnackbar()">                            
                                     <div class="flex width-100p">
                                         <p>User Logged Out</p> 
                                     </div>                           
                                 </button> 
                             </div>
                             <div>
-                                <button class="box" name="event" id="user_org_deleted" value="2" type="submit">                            
+                                <button class="box" name="event" id="user_org_deleted" value="2" type="submit" onclick="showSnackbar()">                            
                                     <div class="flex width-100p">
                                         <p>User Organization Deleted</p> 
                                     </div>                           
                                 </button>                    
-                                <button class="box" name="event" id="user_connection_deleted" value="3" type="submit">                            
+                                <button class="box" name="event" id="user_connection_deleted" value="3" type="submit" onclick="showSnackbar()">                            
                                     <div class="flex width-100p">
                                         <p>User Connection Deleted</p> 
                                     </div>                           
@@ -91,11 +91,18 @@ <h2 class="home-hero-gradient">Enterprise Ready</h2>
                         </div>
                     </form>
                 </div>
-                
+                <div id="snackbar">Log Event Sent</div>
             </div>
         </div>
     </div>
     <script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
+    <script>
+        function showSnackbar() {
+            var x = document.getElementById("snackbar");
+            x.className = "show";
+            setTimeout(function(){ x.className = x.className.replace("show", ""); }, 500);
+        }
+    </script>
 </body>
 
 </html>