Fix popup toast messages (Remove Flasher) (#16090)

* Remove flasher
Just use a bit of custom code to interface with toastr js
This is able to retain our custom theme and work properly

* Fix style issues

* Missed reference rename

* Remove test code :)

* Fix a missed rename

* Fix one more missed reference

* Fix typo

resources/css/app.css

@@ -2,4 +2,4 @@
 @tailwind components;
 @tailwind utilities;
 
-@import 'flasher.css';
+@import 'toast.css';

resources/css/toast.css

@@ -22,37 +22,47 @@
  * @author     Tony Murray <murraytony@gmail.com>
  */
 
-#flasher-container-top-right {
+#toast-container-top-right {
     position: fixed;
     z-index: 999999;
     top: 55px;
     right: 12px;
 }
 
-#flasher-container-top-right a {
+#toast-container-top-right a {
     font-weight: bold;
 }
 
-#flasher-container-top-right > div {
+#toast-container-top-right > div {
     width: 304px;
     min-height: 50px;
     background-position: 10px center;
     background-repeat: no-repeat;
 }
 
-.flasher-error {
+.toast-error {
     background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzIgMzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMTYiIGN5PSIxNiIgcj0iMTUiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNMTYgMEExNiAxNiAwIDAgMCAwIDE2YTE2IDE2IDAgMCAwIDE2IDE2IDE2IDE2IDAgMCAwIDE2LTE2QTE2IDE2IDAgMCAwIDE2IDB6bS02IDlhMSAxIDAgMCAxIC43MDcuMjkzTDE2IDE0LjU4Nmw1LjI5My01LjI5M2ExIDEgMCAwIDEgMS40MTQgMCAxIDEgMCAwIDEgMCAxLjQxNEwxNy40MTQgMTZsNS4yOTMgNS4yOTNhMSAxIDAgMCAxIDAgMS40MTQgMSAxIDAgMCAxLTEuNDE0IDBMMTYgMTcuNDE0bC01LjI5MyA1LjI5M2ExIDEgMCAwIDEtMS40MTQgMCAxIDEgMCAwIDEgMC0xLjQxNEwxNC41ODYgMTZsLTUuMjkzLTUuMjkzYTEgMSAwIDAgMSAwLTEuNDE0QTEgMSAwIDAgMSAxMCA5eiIgZmlsbD0iI2RjMjYyNiIvPjwvc3ZnPg==");
     background-size: 32px;
 }
-.flasher-info {
+.toast-info {
     background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiI+PGNpcmNsZSBjeD0iMTYiIGN5PSIxNiIgcj0iMTUiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNMTYgMEExNiAxNiAwIDAgMCAwIDE2YTE2IDE2IDAgMCAwIDE2IDE2IDE2IDE2IDAgMCAwIDE2LTE2QTE2IDE2IDAgMCAwIDE2IDB6bTAgNmM1LjUxMSAwIDEwIDQuNDg5IDEwIDEwcy00LjQ4OSAxMC0xMCAxMFM2IDIxLjUxMSA2IDE2IDEwLjQ4OSA2IDE2IDZ6bTAgMmMtNC40MyAwLTggMy41Ny04IDhzMy41NyA4IDggOCA4LTMuNTcgOC04LTMuNTctOC04LTh6bTAgM2ExIDEgMCAwIDEgMSAxdjRhMSAxIDAgMCAxLTEgMSAxIDEgMCAwIDEtMS0xdi00YTEgMSAwIDAgMSAxLTF6bTAgOGguMDFhMSAxIDAgMCAxIDEgMSAxIDEgMCAwIDEtMSAxSDE2YTEgMSAwIDAgMS0xLTEgMSAxIDAgMCAxIDEtMXoiIGZpbGw9IiMyNTYzZWIiIC8+PC9zdmc+");
     background-size: 32px;
 }
-.flasher-success {
+.toast-success {
     background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiI+PGNpcmNsZSBjeD0iMTYiIGN5PSIxNiIgcj0iMTUiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNMTYgMEExNiAxNiAwIDAgMCAwIDE2YTE2IDE2IDAgMCAwIDE2IDE2IDE2IDE2IDAgMCAwIDE2LTE2QTE2IDE2IDAgMCAwIDE2IDB6bTcgMTBhMSAxIDAgMCAxIC43MDcuMjkzIDEgMSAwIDAgMSAwIDEuNDE0bC0xMCAxMGExIDEgMCAwIDEtMS40MTQgMGwtNC00YTEgMSAwIDAgMSAwLTEuNDE0IDEgMSAwIDAgMSAxLjQxNCAwTDEzIDE5LjU4Nmw5LjI5My05LjI5M0ExIDEgMCAwIDEgMjMgMTB6IiBmaWxsPSIjMDU5NjY5IiAvPjwvc3ZnPg==");
     background-size: 32px;
 }
-.flasher-warning {
+.toast-warning {
     background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiI+PGNpcmNsZSBjeD0iMTYiIGN5PSIxNiIgcj0iMTUiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNMTYgMEExNiAxNiAwIDAgMCAwIDE2YTE2IDE2IDAgMCAwIDE2IDE2IDE2IDE2IDAgMCAwIDE2LTE2QTE2IDE2IDAgMCAwIDE2IDB6bTAgNi4xNTZjMS4wMTYgMCAyLjAzMi40OSAyLjU5OCAxLjQ2OWw2LjkyNyAxMmMxLjEzMSAxLjk1OC0uMzM2IDQuNS0yLjU5NyA0LjVIOS4wNzJjLTIuMjYxIDAtMy43MjgtMi41NDItMi41OTctNC41bDYuOTI3LTEyYy41NjYtLjk3OSAxLjU4Mi0xLjQ2OSAyLjU5OC0xLjQ2OXptMCAxLjkzOGMtLjMzIDAtLjY2LjE3Ny0uODY1LjUzMWwtNi45MyAxMmMtLjQwOS43MDguMDQ5IDEuNS44NjcgMS41aDEzLjg1NmMuODE4IDAgMS4yNzYtLjc5Mi44NjctMS41bC02LjkzLTEyYy0uMjA0LS4zNTQtLjUzNC0uNTMxLS44NjUtLjUzMXptMCA0LjAzMWExIDEgMCAwIDEgMSAxdjJhMSAxIDAgMCAxLTEgMSAxIDEgMCAwIDEtMS0xdi0yYTEgMSAwIDAgMSAxLTF6bTAgNmguMDFhMSAxIDAgMCAxIDEgMSAxIDEgMCAwIDEtMSAxSDE2YTEgMSAwIDAgMS0xLTEgMSAxIDAgMCAxIDEtMXoiIGZpbGw9IiNkOTc3MDYiLz48L3N2Zz4=");
     background-size: 32px;
 }
+.toast-progress {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    height: 4px;
+    background-color: #000000;
+    opacity: 0.4;
+    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
+    filter: alpha(opacity=40);
+}

resources/views/components/toast.blade.php

@@ -0,0 +1,9 @@
+@if($toasts)
+    <script>
+        document.addEventListener("DOMContentLoaded", function() {
+            @foreach ($toasts as $toast)
+                toastr["{{ $toast['level'] }}"]({{ Js::from(\LibreNMS\Util\Clean::html($toast['message'], $purifier_config)) }}, "{{ $toast['title'] }}", {{ JS::from($toast['options']) }});
+            @endforeach
+        });
+    </script>
+@endif

resources/views/layouts/flasher-notification.blade.php

@@ -1,37 +0,0 @@
-<?php
-$title = $envelope->getTitle();
-switch ($envelope->getType()) {
-    case 'success':
-        $color = 'tw-text-emerald-600';
-        $class = 'flasher-success';
-        break;
-    case 'error':
-        $color = 'tw-text-red-600';
-        $class = 'flasher-error';
-        break;
-    case 'warning':
-        $color = 'tw-text-amber-600';
-        $class = 'flasher-warning';
-        break;
-    case 'info':
-    default:
-        $color = 'tw-text-blue-600';
-        $class = 'flasher-info';
-        break;
-}
-?>
-<div class="{{ $class }} {{ $color }} tw-border-current tw-flex tw-flex-col tw-justify-between tw-bg-white dark:tw-bg-dark-gray-300 tw-opacity-80 hover:tw-opacity-100 tw-rounded-md tw-shadow-lg hover:tw-shadow-xl tw-border-l-8 tw-border-t-0.5 tw-border-r-0.5 tw-border-b-0.5 tw-mt-2 tw-cursor-pointer">
-    <div class="tw-pl-20 tw-py-4 tw-pr-2 tw-overflow-hidden">
-        @if($title)
-            <div class="tw-text-xl tw-leading-7 tw-font-semibold tw-capitalize">
-                {{ $title }}
-            </div>
-        @endif
-        <div class="tw-mt-1 tw-text-base tw-leading-5 tw-text-gray-500 dark:tw-text-white">
-            {!! clean(stripslashes($envelope->getMessage()), 'notifications') !!}
-        </div>
-    </div>
-    <div class="tw-h-1 tw-flex tw-mr-0.5">
-        <span class="flasher-progress tw-bg-current"></span>
-    </div>
-</div>

resources/views/layouts/librenmsv1.blade.php

@@ -78,7 +78,6 @@
     </script>
     <script src="{{ asset('js/librenms.js?ver=22052024') }}"></script>
     <script type="text/javascript" src="{{ asset('js/overlib_mini.js') }}"></script>
-    <script type="text/javascript" src="{{ asset('js/flasher.min.js?ver=0.6.1') }}"></script>
     <script type="text/javascript" src="{{ asset('js/toastr.min.js?ver=05072021') }}"></script>
     <script type="text/javascript" src="{{ asset('js/boot.js?ver=10272021') }}"></script>
     <script>
@@ -119,7 +118,7 @@
 
 @yield('scripts')
 
-@flasher_render
+<x-toast />
 
 @stack('scripts')
 </body>