| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126 |
- <div {{ $attributes->merge(['class' => $makeBoxClass()]) }}>
- {{-- Box icon --}}
- @isset($icon)
- <span class="{{ $makeIconClass() }}">
- <i class="{{ $icon }}"></i>
- </span>
- @endisset
- {{-- Box content --}}
- <div class="info-box-content">
- {{-- Box title --}}
- @isset($title)
- <span class="info-box-text">
- @if(isset($url) && $urlTarget == 'title')
- <a class="info-box-url text-reset" href="{{ $url }}">
- <u>{{ $title }}</u>
- </a>
- @else
- {{ $title }}
- @endif
- </span>
- @endisset
- {{-- Box short text --}}
- @isset($text)
- <span class="info-box-number">
- @if(isset($url) && $urlTarget == 'text')
- <a class="info-box-url text-reset" href="{{ $url }}">
- <u>{{ $text }}</u>
- </a>
- @else
- {{ $text }}
- @endif
- </span>
- @endisset
- {{-- Box progress bar --}}
- @if(isset($progress) && isset($attributes['id']))
- <x-adminlte-progress value="{{ $progress }}" theme="{{ $progressTheme }}"
- id="progress-{{ $attributes['id'] }}"/>
- @elseif(isset($progress))
- <x-adminlte-progress value="{{ $progress }}" theme="{{ $progressTheme }}"/>
- @endif
- {{-- Box long description --}}
- @isset($description)
- <span class="progress-description">{{ $description }}</span>
- @endisset
- </div>
- </div>
- {{-- Register Javascript utility class for this component --}}
- @once
- @push('js')
- <script>
- class _AdminLTE_InfoBox {
- /**
- * Constructor.
- *
- * target: The id of the target info box.
- */
- constructor(target)
- {
- this.target = target;
- }
- /**
- * Update the info box.
- *
- * data: An object with the new data.
- */
- update(data)
- {
- // Check if target and data exists.
- let t = $(`#${this.target}`);
- if (t.length <= 0 || ! data) {
- return;
- }
- // Update available data.
- if (data.title) {
- t.find('.info-box-text').html(data.title);
- }
- if (data.text) {
- t.find('.info-box-number').html(data.text);
- }
- if (data.icon) {
- t.find('.info-box-icon i').attr('class', data.icon);
- }
- if (data.description) {
- t.find('.progress-description').html(data.description);
- }
- if (data.url) {
- t.find('.info-box-url').attr('href', data.url);
- }
- // Update progress bar.
- if (data.progress) {
- let pBar = new _AdminLTE_Progress(`progress-${this.target}`);
- pBar.setValue(data.progress);
- }
- }
- }
- </script>
- @endpush
- @endonce
|