athenahr/resources/views/vendor/adminlte/components/layout/navbar-notification.blade.php
miguel456 2b1caeb80c
branch commit
Signed-off-by: miguel456 <me@nogueira.codes>
2023-06-29 18:21:58 +01:00

155 lines
4.0 KiB
PHP
Executable File

{{-- Navbar notification --}}
<li class="{{ $makeListItemClass() }}" id="{{ $id }}">
{{-- Link --}}
<a @if($enableDropdownMode) href="" @endif {{ $attributes->merge($makeAnchorDefaultAttrs()) }}>
{{-- Icon --}}
<i class="{{ $makeIconClass() }}"></i>
{{-- Badge --}}
<span class="{{ $makeBadgeClass() }}">{{ $badgeLabel }}</span>
</a>
{{-- Dropdown Menu --}}
@if($enableDropdownMode)
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
{{-- Custom dropdown content provided by external source --}}
<div class="adminlte-dropdown-content"></div>
{{-- Dropdown divider --}}
<div class="dropdown-divider"></div>
{{-- Dropdown footer with link --}}
<a href="{{ $attributes->get('href') }}" class="dropdown-item dropdown-footer">
@isset($dropdownFooterLabel)
{{ $dropdownFooterLabel }}
@else
<i class="fas fa-lg fa-search-plus"></i>
@endisset
</a>
</div>
@endif
</li>
{{-- If required, update the notification periodically --}}
@if (! is_null($makeUpdateUrl()) && $makeUpdatePeriod() > 0)
@push('js')
<script>
$(() => {
// Method to get new notification data from the configured url.
let updateNotification = (nLink) =>
{
// Make an ajax call to the configured url. The response should be
// an object with the new data. The supported properties are:
// 'label', 'label_color', 'icon_color' and 'dropdown'.
$.ajax({
url: "{{ $makeUpdateUrl() }}"
})
.done((data) => {
nLink.update(data);
})
.fail(function(jqXHR, textStatus, errorThrown) {
console.log(jqXHR, textStatus, errorThrown);
});
};
// First load of the notification data.
let nLink = new _AdminLTE_NavbarNotification("{{ $id }}");
updateNotification(nLink);
// Periodically update the notification.
setInterval(updateNotification, {{ $makeUpdatePeriod() }}, nLink);
})
</script>
@endpush
@endif
{{-- Register Javascript utility class for this component --}}
@once
@push('js')
<script>
class _AdminLTE_NavbarNotification {
/**
* Constructor.
*
* target: The id of the target notification link.
*/
constructor(target)
{
this.target = target;
}
/**
* Update the notification link.
*
* data: An object with the new data.
*/
update(data)
{
// Check if target and data exists.
let t = $(`li#${this.target}`);
if (t.length <= 0 || ! data) {
return;
}
let badge = t.find(".navbar-badge");
let icon = t.find(".nav-link > i");
let dropdown = t.find(".adminlte-dropdown-content");
// Update the badge label.
if (data.label && data.label > 0) {
badge.html(data.label);
} else {
badge.empty();
}
// Update the badge color.
if (data.label_color) {
badge.removeClass((idx, classes) => {
return (classes.match(/(^|\s)badge-\S+/g) || []).join(' ');
}).addClass(`badge-${data.label_color} badge-pill`);
}
// Update the icon color.
if (data.icon_color) {
icon.removeClass((idx, classes) => {
return (classes.match(/(^|\s)text-\S+/g) || []).join(' ');
}).addClass(`text-${data.icon_color}`);
}
// Update the dropdown content.
if (data.dropdown && dropdown.length > 0) {
dropdown.html(data.dropdown);
}
}
}
</script>
@endpush
@endonce