Make notifications async

This commit is contained in:
Julian Prieber 2024-12-13 22:25:39 +01:00
parent 08e0a7b6ab
commit 6711361037
3 changed files with 115 additions and 88 deletions

View File

@ -1,36 +1,10 @@
@php @php
use App\Models\UserData; use App\Models\UserData;
$GLOBALS['activenotify'] = true;
$compromised = false; $compromised = false;
function notification($dismiss = '', $ntid, $heading, $body) { @endphp
$closeMSG = __('messages.Close');
$dismissMSG = __('messages.Dismiss'); @php
$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;
}
function notificationCard($ntid, $icon, $heading, $subheading) { function notificationCard($ntid, $icon, $heading, $subheading) {
echo "<a data-bs-target=\"#{$ntid}\" data-bs-toggle=\"modal\" style=\"cursor:pointer!important;\" class=\"iq-sub-card\"> 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 @endphp
@if(count($shownNotifications) > 0) <a href="#" class="nav-link" id="notification-drop" data-bs-toggle="dropdown">
@foreach($shownNotifications as $notification) <svg class="icon-24" width="24" viewBox="0 0 24 24" fill="none"
@push('notifications') xmlns="http://www.w3.org/2000/svg">
{{ notificationCard($notification['id'], $notification['icon'], $notification['title'], $notification['message'], $notification['dismiss']) }} <path
@endpush 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"
@endforeach fill="currentColor"></path>
@else <path opacity="0.4"
@php $GLOBALS['activenotify'] = false; @endphp 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"
@push('notifications') fill="currentColor"></path>
<center class='p-2'><i>{{__('messages.No notifications')}}</i></center> @if (count($shownNotifications) > 0)
@endpush <circle cx="17" cy="17" r="5" fill="#32CD32"
@endif 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">
@if(count($shownNotifications) > 0)
@foreach($shownNotifications as $notification)
{{-- Notification Modals --}} {{ notificationCard($notification['id'], $notification['icon'], $notification['title'], $notification['message'], $notification['dismiss']) }}
@push('sidebar-scripts') @php @endforeach
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>.'); @else
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').''); <center class='p-2'><i>{{__('messages.No notifications')}}</i></center>
@endphp @endpush @endif
@php </div>
if(isset($_GET['dismiss'])) { </div>
$dismiss = $_GET['dismiss']; </div>
$param = str_replace('dismiss=', '', $dismiss);
UserData::saveData($notifyID, $param, true);
exit(header("Location: " . url()->current()));
}
@endphp

View File

@ -1,6 +1,7 @@
@php @php
use SimpleSoftwareIO\QrCode\Facades\QrCode; use SimpleSoftwareIO\QrCode\Facades\QrCode;
use App\Models\User; use App\Models\User;
use App\Models\UserData;
$usrhandl = Auth::user()->littlelink_name; $usrhandl = Auth::user()->littlelink_name;
@endphp @endphp
<!doctype html> <!doctype html>
@ -18,7 +19,6 @@
@include('layouts.analytics') @include('layouts.analytics')
@stack('sidebar-stylesheets') @stack('sidebar-stylesheets')
@include('layouts.notifications')
@php @php
// Update the 'updated_at' timestamp for the currently authenticated user // Update the 'updated_at' timestamp for the currently authenticated user
@ -389,37 +389,12 @@
</div> </div>
</li> </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"> <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" <div class="icon-24 spinner-border text-primary" role="status">
xmlns="http://www.w3.org/2000/svg"> <span class="visually-hidden">Loading...</span>
<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> </div>
</div> </a>
</li> </li>
{{-- <! #### begin update detection #### > --}} {{-- <! #### begin update detection #### > --}}
@ -433,6 +408,74 @@
$Vlocal = file_get_contents(base_path('version.json')); $Vlocal = file_get_contents(base_path('version.json'));
@endphp @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') @push('sidebar-scripts')
<script> <script>
const isVisible = true; const isVisible = true;

View File

@ -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 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', [AdminController::class, 'index'])->name('panelIndex');
Route::get('/dashboard/site-stats', [AdminController::class, 'stats']); 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/index', function(){return redirect(url('dashboard'));});
Route::get('/studio/add-link', [UserController::class, 'AddUpdateLink'])->name('showButtons'); Route::get('/studio/add-link', [UserController::class, 'AddUpdateLink'])->name('showButtons');
Route::post('/studio/edit-link', [UserController::class, 'saveLink'])->name('addLink'); Route::post('/studio/edit-link', [UserController::class, 'saveLink'])->name('addLink');