From 671136103716c8d86af242d910290ae41d6aee3c Mon Sep 17 00:00:00 2001
From: Julian Prieber <julian.prieber@gmail.com>
Date: Fri, 13 Dec 2024 22:25:39 +0100
Subject: [PATCH] Make notifications async

---
 .../views/layouts/notifications.blade.php     |  99 +++++++----------
 resources/views/layouts/sidebar.blade.php     | 103 +++++++++++++-----
 routes/web.php                                |   1 +
 3 files changed, 115 insertions(+), 88 deletions(-)

diff --git a/resources/views/layouts/notifications.blade.php b/resources/views/layouts/notifications.blade.php
index 919b95c..528c2be 100644
--- a/resources/views/layouts/notifications.blade.php
+++ b/resources/views/layouts/notifications.blade.php
@@ -1,36 +1,10 @@
 @php
 use App\Models\UserData;
-$GLOBALS['activenotify'] = true;
 $compromised = false;
-function notification($dismiss = '', $ntid, $heading, $body) {
-    $closeMSG = __('messages.Close');
-    $dismissMSG = __('messages.Dismiss');
-    $dismissBtn = '';
-    if ($dismiss) {
-        $dismissBtn = '<a href="' . url()->current() . '?dismiss=' . $dismiss . '" class="btn btn-danger">'.$dismissMSG.'</a>';
-    }
-    echo <<<MODAL
-    <div class="modal fade" id="$ntid" data-bs-backdrop="true" data-bs-keyboard="false" tabindex="-1" aria-labelledby="${ntid}-label" aria-hidden="true">
-        <div class="modal-dialog">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h5 class="modal-title" id="${ntid}-label">$heading</h5>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-                </div>
-                <div class="modal-body">
-                    <div class="bd-example">
-                        $body
-                    </div>
-                </div>
-                <div class="modal-footer">
-                    $dismissBtn
-                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">$closeMSG</button>
-                </div>
-            </div>
-        </div>
-    </div>
-MODAL;
-}
+@endphp
+
+@php
+
 
 function notificationCard($ntid, $icon, $heading, $subheading) {
   echo "<a data-bs-target=\"#{$ntid}\" data-bs-toggle=\"modal\" style=\"cursor:pointer!important;\" class=\"iq-sub-card\">
@@ -108,32 +82,41 @@ $notifyID = Auth::user()->id;
         });
     @endphp
 
-    @if(count($shownNotifications) > 0)
-        @foreach($shownNotifications as $notification)
-        @push('notifications')
-            {{ notificationCard($notification['id'], $notification['icon'], $notification['title'], $notification['message'], $notification['dismiss']) }}
-        @endpush
-        @endforeach
-    @else
-        @php $GLOBALS['activenotify'] = false; @endphp
-        @push('notifications')
-        <center class='p-2'><i>{{__('messages.No notifications')}}</i></center>
-        @endpush
-    @endif
+<a href="#" class="nav-link" id="notification-drop" data-bs-toggle="dropdown">
+    <svg class="icon-24" width="24" viewBox="0 0 24 24" fill="none"
+        xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M19.7695 11.6453C19.039 10.7923 18.7071 10.0531 18.7071 8.79716V8.37013C18.7071 6.73354 18.3304 5.67907 17.5115 4.62459C16.2493 2.98699 14.1244 2 12.0442 2H11.9558C9.91935 2 7.86106 2.94167 6.577 4.5128C5.71333 5.58842 5.29293 6.68822 5.29293 8.37013V8.79716C5.29293 10.0531 4.98284 10.7923 4.23049 11.6453C3.67691 12.2738 3.5 13.0815 3.5 13.9557C3.5 14.8309 3.78723 15.6598 4.36367 16.3336C5.11602 17.1413 6.17846 17.6569 7.26375 17.7466C8.83505 17.9258 10.4063 17.9933 12.0005 17.9933C13.5937 17.9933 15.165 17.8805 16.7372 17.7466C17.8215 17.6569 18.884 17.1413 19.6363 16.3336C20.2118 15.6598 20.5 14.8309 20.5 13.9557C20.5 13.0815 20.3231 12.2738 19.7695 11.6453Z"
+            fill="currentColor"></path>
+        <path opacity="0.4"
+            d="M14.0088 19.2283C13.5088 19.1215 10.4627 19.1215 9.96275 19.2283C9.53539 19.327 9.07324 19.5566 9.07324 20.0602C9.09809 20.5406 9.37935 20.9646 9.76895 21.2335L9.76795 21.2345C10.2718 21.6273 10.8632 21.877 11.4824 21.9667C11.8123 22.012 12.1482 22.01 12.4901 21.9667C13.1083 21.877 13.6997 21.6273 14.2036 21.2345L14.2026 21.2335C14.5922 20.9646 14.8734 20.5406 14.8983 20.0602C14.8983 19.5566 14.4361 19.327 14.0088 19.2283Z"
+            fill="currentColor"></path>
+        @if (count($shownNotifications) > 0)
+            <circle cx="17" cy="17" r="5" fill="#32CD32"
+                stroke="white" stroke-width="2" />
+        @endif
+    </svg>
+    <span class="bg-danger dots"></span>
+</a>
+<div class="p-0 sub-drop dropdown-menu dropdown-menu-end"
+    aria-labelledby="notification-drop">
+    <div class="m-0 shadow-none card">
+        <div class="py-3 card-header d-flex justify-content-between bg-primary">
+            <div class="header-title">
+                <h5 class="mb-0 text-white">{{ __('messages.All Notifications') }}
+                </h5>
+            </div>
+        </div>
+        <div class="p-0 card-body">
 
-
-
-{{-- Notification Modals --}}
-@push('sidebar-scripts') @php
-notification('', 'modal-1', __('messages.Your security is at risk!'), '<b>'.__('messages.security.msg1').'</b> '.__('messages.security.msg2').'<br><br>'.__('messages.security.msg3').'<br><a href="'.url('admin/config#5').'">'.__('messages.security.msg3').'</a>.');
-notification('hide-star-notification', 'modal-star', __('messages.Support Linkstack'), ''.__('messages.support.msg1').' <a target="_blank" href="https://github.com/linkstackorg/linkstack">'.__('messages.support.msg2').'</a>. '.__('messages.support.msg3').'<br><br>'.__('messages.support.msg4').' <a target="_blank" href="https://linkstack.org/donate">'.__('messages.support.msg5').'<br><br>'.__('messages.support.msg6').'');
-@endphp @endpush
-
-@php 
-if(isset($_GET['dismiss'])) {
-    $dismiss = $_GET['dismiss'];
-    $param = str_replace('dismiss=', '', $dismiss);
-    UserData::saveData($notifyID, $param, true);
-    exit(header("Location: " . url()->current()));
-}
-@endphp
\ No newline at end of file
+            @if(count($shownNotifications) > 0)
+            @foreach($shownNotifications as $notification)
+                {{ notificationCard($notification['id'], $notification['icon'], $notification['title'], $notification['message'], $notification['dismiss']) }}
+            @endforeach
+        @else
+            <center class='p-2'><i>{{__('messages.No notifications')}}</i></center>
+        @endif
+            
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/resources/views/layouts/sidebar.blade.php b/resources/views/layouts/sidebar.blade.php
index 46b4e47..8e4d3d1 100755
--- a/resources/views/layouts/sidebar.blade.php
+++ b/resources/views/layouts/sidebar.blade.php
@@ -1,6 +1,7 @@
 @php
     use SimpleSoftwareIO\QrCode\Facades\QrCode;
     use App\Models\User;
+    use App\Models\UserData;
     $usrhandl = Auth::user()->littlelink_name;
 @endphp
 <!doctype html>
@@ -18,7 +19,6 @@
 
     @include('layouts.analytics')
     @stack('sidebar-stylesheets')
-    @include('layouts.notifications')
 
     @php
         // Update the 'updated_at' timestamp for the currently authenticated user
@@ -389,37 +389,12 @@
                                 </div>
                             </li>
 
-                            <li class="nav-item dropdown">
+                            <li id="notifications" class="nav-item dropdown">
                                 <a href="#" class="nav-link" id="notification-drop" data-bs-toggle="dropdown">
-                                    <svg class="icon-24" width="24" viewBox="0 0 24 24" fill="none"
-                                        xmlns="http://www.w3.org/2000/svg">
-                                        <path
-                                            d="M19.7695 11.6453C19.039 10.7923 18.7071 10.0531 18.7071 8.79716V8.37013C18.7071 6.73354 18.3304 5.67907 17.5115 4.62459C16.2493 2.98699 14.1244 2 12.0442 2H11.9558C9.91935 2 7.86106 2.94167 6.577 4.5128C5.71333 5.58842 5.29293 6.68822 5.29293 8.37013V8.79716C5.29293 10.0531 4.98284 10.7923 4.23049 11.6453C3.67691 12.2738 3.5 13.0815 3.5 13.9557C3.5 14.8309 3.78723 15.6598 4.36367 16.3336C5.11602 17.1413 6.17846 17.6569 7.26375 17.7466C8.83505 17.9258 10.4063 17.9933 12.0005 17.9933C13.5937 17.9933 15.165 17.8805 16.7372 17.7466C17.8215 17.6569 18.884 17.1413 19.6363 16.3336C20.2118 15.6598 20.5 14.8309 20.5 13.9557C20.5 13.0815 20.3231 12.2738 19.7695 11.6453Z"
-                                            fill="currentColor"></path>
-                                        <path opacity="0.4"
-                                            d="M14.0088 19.2283C13.5088 19.1215 10.4627 19.1215 9.96275 19.2283C9.53539 19.327 9.07324 19.5566 9.07324 20.0602C9.09809 20.5406 9.37935 20.9646 9.76895 21.2335L9.76795 21.2345C10.2718 21.6273 10.8632 21.877 11.4824 21.9667C11.8123 22.012 12.1482 22.01 12.4901 21.9667C13.1083 21.877 13.6997 21.6273 14.2036 21.2345L14.2026 21.2335C14.5922 20.9646 14.8734 20.5406 14.8983 20.0602C14.8983 19.5566 14.4361 19.327 14.0088 19.2283Z"
-                                            fill="currentColor"></path>
-                                        @if ($GLOBALS['activenotify'])
-                                            <circle cx="17" cy="17" r="5" fill="#32CD32"
-                                                stroke="white" stroke-width="2" />
-                                        @endif
-                                    </svg>
-                                    <span class="bg-danger dots"></span>
-                                </a>
-                                <div class="p-0 sub-drop dropdown-menu dropdown-menu-end"
-                                    aria-labelledby="notification-drop">
-                                    <div class="m-0 shadow-none card">
-                                        <div class="py-3 card-header d-flex justify-content-between bg-primary">
-                                            <div class="header-title">
-                                                <h5 class="mb-0 text-white">{{ __('messages.All Notifications') }}
-                                                </h5>
-                                            </div>
-                                        </div>
-                                        <div class="p-0 card-body">
-                                            @stack('notifications')
-                                        </div>
+                                    <div class="icon-24 spinner-border text-primary" role="status">
+                                        <span class="visually-hidden">Loading...</span>
                                     </div>
-                                </div>
+                                </a>
                             </li>
 
                             {{-- <! –– #### begin update detection #### ––> --}}
@@ -433,6 +408,74 @@
                                         $Vlocal = file_get_contents(base_path('version.json'));
                                     @endphp
 
+                                    <script>
+                                        $(document).ready(function() {
+                                            async function fetchAndReplaceContent() {
+                                                try {
+                                                    const response = await $.ajax({
+                                                        url: "{{ url('/dashboard/notifications') }}",
+                                                        method: 'GET',
+                                                        dataType: 'html'
+                                                    });
+                                                    $('#notifications').fadeOut(0, function() {
+                                                        $('#notifications').html(response).fadeIn(400);
+                                                    });
+                                                } catch (error) {
+                                                    console.error('Error fetching content:', error);
+                                                }
+                                            }
+
+                                            fetchAndReplaceContent();
+                                        });
+                                    </script>
+
+                                    @php 
+                                    if(isset($_GET['dismiss'])) {
+                                        $dismiss = $_GET['dismiss'];
+                                        $param = str_replace('dismiss=', '', $dismiss);
+                                        UserData::saveData($user->id, $param, true);
+                                        exit(header("Location: " . url()->current()));
+                                    }
+                                    @endphp
+
+                                    {{-- Notification Modals --}}
+                                    @push('sidebar-scripts')
+                                        @php
+                                            function notification($dismiss = '', $ntid, $heading, $body)
+                                            {
+                                                $closeMSG = __('messages.Close');
+                                                $dismissMSG = __('messages.Dismiss');
+                                                $dismissBtn = '';
+                                                if ($dismiss) {
+                                                    $dismissBtn = '<a href="' . url()->current() . '?dismiss=' . $dismiss . '" class="btn btn-danger">' . $dismissMSG . '</a>';
+                                                }
+                                                echo <<<MODAL
+                                                    <div class="modal fade" id="$ntid" data-bs-backdrop="true" data-bs-keyboard="false" tabindex="-1" aria-labelledby="${ntid}-label" aria-hidden="true">
+                                                        <div class="modal-dialog">
+                                                            <div class="modal-content">
+                                                                <div class="modal-header">
+                                                                    <h5 class="modal-title" id="${ntid}-label">$heading</h5>
+                                                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                                                                </div>
+                                                                <div class="modal-body">
+                                                                    <div class="bd-example">
+                                                                        $body
+                                                                    </div>
+                                                                </div>
+                                                                <div class="modal-footer">
+                                                                    $dismissBtn
+                                                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">$closeMSG</button>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                MODAL;
+                                            }
+                                            notification('', 'modal-1', __('messages.Your security is at risk!'), '<b>' . __('messages.security.msg1') . '</b> ' . __('messages.security.msg2') . '<br><br>' . __('messages.security.msg3') . '<br><a href="' . url('admin/config#5') . '">' . __('messages.security.msg3') . '</a>.');
+                                            notification('hide-star-notification', 'modal-star', __('messages.Support Linkstack'), '' . __('messages.support.msg1') . ' <a target="_blank" href="https://github.com/linkstackorg/linkstack">' . __('messages.support.msg2') . '</a>. ' . __('messages.support.msg3') . '<br><br>' . __('messages.support.msg4') . ' <a target="_blank" href="https://linkstack.org/donate">' . __('messages.support.msg5') . '<br><br>' . __('messages.support.msg6') . '');
+                                        @endphp
+                                    @endpush
+
                                     @push('sidebar-scripts')
                                         <script>
                                             const isVisible = true;
diff --git a/routes/web.php b/routes/web.php
index c47ade4..c484fe2 100755
--- a/routes/web.php
+++ b/routes/web.php
@@ -100,6 +100,7 @@ if(env('FORCE_ROUTE_HTTPS') == 'true'){URL::forceScheme('https');}
 if(isset($_COOKIE['LinkCount'])){if($_COOKIE['LinkCount'] == '20'){$LinkPage = 'showLinks20';}elseif($_COOKIE['LinkCount'] == '30'){$LinkPage = 'showLinks30';}elseif($_COOKIE['LinkCount'] == 'all'){$LinkPage = 'showLinksAll';} else {$LinkPage = 'showLinks';}} else {$LinkPage = 'showLinks';} //Shows correct link number
 Route::get('/dashboard', [AdminController::class, 'index'])->name('panelIndex');
 Route::get('/dashboard/site-stats', [AdminController::class, 'stats']);
+Route::get('/dashboard/notifications', function () {return view('layouts.notifications', []);});
 Route::get('/studio/index', function(){return redirect(url('dashboard'));});
 Route::get('/studio/add-link', [UserController::class, 'AddUpdateLink'])->name('showButtons');
 Route::post('/studio/edit-link', [UserController::class, 'saveLink'])->name('addLink');