small-box.blade.php 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. <div {{ $attributes->merge(['class' => $makeBoxClass()]) }}>
  2. {{-- Box title and description --}}
  3. <div class="inner">
  4. @isset($title)
  5. <h3>{{ $title }}</h3>
  6. @endisset
  7. @isset($text)
  8. <h5>{{ $text }}</h5>
  9. @endisset
  10. </div>
  11. {{-- Box icon --}}
  12. @isset($icon)
  13. <div class="icon">
  14. <i class="{{ $icon }}"></i>
  15. </div>
  16. @endisset
  17. {{-- Box link --}}
  18. @isset($url)
  19. <a href="{{ $url }}" class="small-box-footer">
  20. @if(! empty($urlText))
  21. {{ $urlText }}
  22. @endif
  23. <i class="fas fa-lg fa-arrow-circle-right"></i>
  24. </a>
  25. @endisset
  26. {{-- Box overlay --}}
  27. <div class="{{ $makeOverlayClass() }}">
  28. <i class="fas fa-2x fa-spin fa-sync-alt text-gray"></i>
  29. </div>
  30. </div>
  31. {{-- Register Javascript utility class for this component --}}
  32. @once
  33. @push('js')
  34. <script>
  35. class _AdminLTE_SmallBox {
  36. /**
  37. * Constructor.
  38. *
  39. * target: The id of the target small box.
  40. */
  41. constructor(target)
  42. {
  43. this.target = target;
  44. }
  45. /**
  46. * Update the small box.
  47. *
  48. * data: An object with the new data.
  49. */
  50. update(data)
  51. {
  52. // Check if target and data exists.
  53. let t = $(`#${this.target}`);
  54. if (t.length <= 0 || ! data) {
  55. return;
  56. }
  57. // Update available data.
  58. if (data.title) {
  59. t.find('.inner h3').html(data.title);
  60. }
  61. if (data.text) {
  62. t.find('.inner h5').html(data.text);
  63. }
  64. if (data.icon) {
  65. t.find('.icon i').attr('class', data.icon);
  66. }
  67. if (data.url) {
  68. t.find('.small-box-footer').attr('href', data.url);
  69. }
  70. }
  71. /**
  72. * Toggle the loading animation of the small box.
  73. */
  74. toggleLoading()
  75. {
  76. // Check if target exists.
  77. let t = $(`#${this.target}`);
  78. if (t.length <= 0) {
  79. return;
  80. }
  81. // Toggle the loading overlay.
  82. t.find('.overlay').toggleClass('d-none');
  83. }
  84. }
  85. </script>
  86. @endpush
  87. @endonce