Añadidas más opciones a las cajas de información.

NeoRazorX · Nov 2, 2023 · 336b8b8 · 336b8b8
1 parent 979b531
commit 336b8b8
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 3 deletions.
diff --git a/Core/Controller/DashboardUI.php b/Core/Controller/DashboardUI.php
@@ -150,10 +150,15 @@ protected function addSectionTop(): void
 
         // añadimos 2 cajas de información a la sección top
         $this->section('top')->addInfoBox(new InfoBox('info1'))
+            ->setColor('success')
+            ->setIcon('fas fa-chart-line')
             ->setTitle('Información 1')
-            ->setDescription('Descripción de la información 1');
+            ->setDescription('Descripción de la información 1')
+            ->setCounter(5);
 
         $this->section('top')->addInfoBox(new InfoBox('info2'))
+            ->setColor('danger')
+            ->setIcon('fas fa-chart-pie')
             ->setTitle('Información 2')
             ->setDescription('Descripción de la información 2');
 

diff --git a/Core/UI/InfoBox.php b/Core/UI/InfoBox.php
@@ -23,6 +23,15 @@
 
 class InfoBox extends Component
 {
+    /** @var string */
+    protected $color = '';
+
+    /** @var int */
+    protected $counter = 0;
+
+    /** @var string */
+    protected $icon = '';
+
     /** @var string */
     protected $description = '';
 
@@ -36,14 +45,53 @@ public function description(): string
 
     public function render(string $context = ''): string
     {
-        return '<div class="card shadow-sm mb-3">'
+        switch ($this->color) {
+            default:
+                $color = '';
+                break;
+
+            case 'danger':
+            case 'info':
+            case 'primary':
+            case 'secondary':
+            case 'success':
+            case 'warning':
+                $color = ' bg-' . $this->color . ' text-white';
+                break;
+        }
+
+        $icon = empty($this->icon) ? '' : '<i class="fas fa-' . $this->icon . ' mr-1"></i> ';
+        $count = empty($this->counter) ? '' : '<span class="badge badge-pill badge-light ml-2">' . $this->counter . '</span> ';
+
+        return '<div class="card' . $color . ' shadow-sm mb-3">'
             . '<div class="card-body">'
-            . '<h5 class="card-title">' . $this->title . '</h5>'
+            . '<h5 class="card-title mb-0">' . $icon . $this->title . $count . '</h5>'
             . '<p class="card-text">' . $this->description . '</p>'
             . '</div>'
             . '</div>';
     }
 
+    public function setColor(string $color): self
+    {
+        $this->color = $color;
+
+        return $this;
+    }
+
+    public function setCounter(int $counter): self
+    {
+        $this->counter = $counter;
+
+        return $this;
+    }
+
+    public function setIcon(string $icon): self
+    {
+        $this->icon = $icon;
+
+        return $this;
+    }
+
     public function setDescription(string $description): self
     {
         $this->description = $description;