info-box.blade.php 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. <div {{ $attributes->merge(['class' => $makeBoxClass()]) }}>
  2. {{-- Box icon --}}
  3. @isset($icon)
  4. <span class="{{ $makeIconClass() }}">
  5. <i class="{{ $icon }}"></i>
  6. </span>
  7. @endisset
  8. {{-- Box content --}}
  9. <div class="info-box-content">
  10. {{-- Box title --}}
  11. @isset($title)
  12. <span class="info-box-text">
  13. @if(isset($url) && $urlTarget == 'title')
  14. <a class="info-box-url text-reset" href="{{ $url }}">
  15. <u>{{ $title }}</u>
  16. </a>
  17. @else
  18. {{ $title }}
  19. @endif
  20. </span>
  21. @endisset
  22. {{-- Box short text --}}
  23. @isset($text)
  24. <span class="info-box-number">
  25. @if(isset($url) && $urlTarget == 'text')
  26. <a class="info-box-url text-reset" href="{{ $url }}">
  27. <u>{{ $text }}</u>
  28. </a>
  29. @else
  30. {{ $text }}
  31. @endif
  32. </span>
  33. @endisset
  34. {{-- Box progress bar --}}
  35. @if(isset($progress) && isset($attributes['id']))
  36. <x-adminlte-progress value="{{ $progress }}" theme="{{ $progressTheme }}"
  37. id="progress-{{ $attributes['id'] }}"/>
  38. @elseif(isset($progress))
  39. <x-adminlte-progress value="{{ $progress }}" theme="{{ $progressTheme }}"/>
  40. @endif
  41. {{-- Box long description --}}
  42. @isset($description)
  43. <span class="progress-description">{{ $description }}</span>
  44. @endisset
  45. </div>
  46. </div>
  47. {{-- Register Javascript utility class for this component --}}
  48. @once
  49. @push('js')
  50. <script>
  51. class _AdminLTE_InfoBox {
  52. /**
  53. * Constructor.
  54. *
  55. * target: The id of the target info box.
  56. */
  57. constructor(target)
  58. {
  59. this.target = target;
  60. }
  61. /**
  62. * Update the info box.
  63. *
  64. * data: An object with the new data.
  65. */
  66. update(data)
  67. {
  68. // Check if target and data exists.
  69. let t = $(`#${this.target}`);
  70. if (t.length <= 0 || ! data) {
  71. return;
  72. }
  73. // Update available data.
  74. if (data.title) {
  75. t.find('.info-box-text').html(data.title);
  76. }
  77. if (data.text) {
  78. t.find('.info-box-number').html(data.text);
  79. }
  80. if (data.icon) {
  81. t.find('.info-box-icon i').attr('class', data.icon);
  82. }
  83. if (data.description) {
  84. t.find('.progress-description').html(data.description);
  85. }
  86. if (data.url) {
  87. t.find('.info-box-url').attr('href', data.url);
  88. }
  89. // Update progress bar.
  90. if (data.progress) {
  91. let pBar = new _AdminLTE_Progress(`progress-${this.target}`);
  92. pBar.setValue(data.progress);
  93. }
  94. }
  95. }
  96. </script>
  97. @endpush
  98. @endonce