add infobox component

public_html/classes/render-adminlte.class.php

@@ -124,7 +124,10 @@ class renderadminlte {
      * @param  string  $sTag         name of html tag
      * @param  array   $aAttributes  array of its attributes
      */
-    protected function _tag($sTag, $aAttributes){
+    protected function _tag($sTag, $aAttributes, $sContent=false){
+        if ($sContent){
+            $aAttributes['label']=(isset($aAttributes['label']) ? $aAttributes['label'] : '') . $sContent;
+        }
         return $this->_oHtml->getTag($sTag, $aAttributes);
     }
     // ----------------------------------------------------------------------
@@ -562,6 +565,87 @@ class renderadminlte {
     }
 
 
+    /**
+     * return an info-box:
+     * A colored box with large icon, text and a value.
+     * https://adminlte.io/docs/3.2/components/boxes.html
+     * 
+     * @param type $aOptions  hash with keys for all options
+     *                          - type    - color of the box; one of [none]|danger|dark|info|primary|secondary|success|warning
+     *                          - bgcolor - background color of icon; use type OR bgcolor
+     *                          - icon    - icon class
+     *                          - text    - information text
+     *                          - number  - value (comes in bold text)
+     *                          - progressvalue - integer: progress bar; range: 0..100
+     *                          - progresstext  - text below progress bar
+     * @return string
+     */
+    public function getInfobox($aOptions){
+        $aOptions=$this->_ensureOptions($aOptions, ['type', 'bgcolor', 'icon', 'text', 'number', 'progressvalue', 'progresstext']);
+        // print_r($aOptions);
+        $sClass='info-box'
+                .($aOptions['class'] ? ' '.$aOptions['class'] : '')
+                .($aOptions['type']  ? ' bg-'.$aOptions['type'] : '')
+                ;
+        
+        // build parts
+        $sIcon=$aOptions['icon'] 
+            ? $this->addWrapper("span", [
+                    'class'=>'info-box-icon'.($aOptions['bgcolor'] ? ' bg-'.$aOptions['bgcolor'] : '')
+                ], $this->_tag('i',['class'=>$aOptions['icon']])) 
+            : ''
+            ;
+        $sContent=$this->addWrapper("div", ['class'=>'info-box-content'],
+            ''
+            . ($aOptions['text']   ? $this->_tag('span', ['class'=>'info-box-text',   'label'=>$aOptions['text']])   : '')
+            . ($aOptions['number'] ? $this->_tag('span', ['class'=>'info-box-number', 'label'=>$aOptions['number']]) : '')
+            . ($aOptions['progressvalue']!==false 
+                ? $this->addWrapper('div', ['class'=>'progress'],
+                        $this->_tag('div', ['class'=>'progress-bar', 'style'=>'width: '.(int)$aOptions['progressvalue'].'%' ]) 
+                    )
+                : ''    
+                )
+            . ($aOptions['progresstext'] ? $this->_tag('span', ['class'=>'progress-description', 'label'=>$aOptions['progresstext']]) : '' )
+        );
+
+        // merge all
+        return $this->_tag('div', ['class'=>$sClass], $sIcon.$sContent);
+    }
+
+
+/*
+
+<div class="info-box">
+  <span class="info-box-icon bg-info"><i class="far fa-bookmark"></i></span>
+  <div class="info-box-content">
+    <span class="info-box-text">Bookmarks</span>
+    <span class="info-box-number">41,410</span>
+    <div class="progress">
+      <div class="progress-bar bg-info" style="width: 70%"></div>
+    </div>
+    <span class="progress-description">
+      70% Increase in 30 Days
+    </span>
+  </div>
+</div>
+
+
+
+  <div class="info-box bg-success">
+    <span class="info-box-icon"><i class="far fa-thumbs-up"></i></span>
+    <div class="info-box-content">
+      <span class="info-box-text">Likes</span>
+      <span class="info-box-number">41,410</span>
+      <div class="progress">
+        <div class="progress-bar" style="width: 70%"></div>
+      </div>
+      <span class="progress-description">
+        70% Increase in 30 Days
+      </span>
+    </div>
+  </div>
+*/
+  
 
 
 

public_html/pages/components/infobox.php

+<?php 
+
+$aOptions=[
+    'type'=>'success',
+    'bgcolor'=>'',
+    'icon'=>'far fa-thumbs-up',
+    'text'=>'Likes',
+    'number'=>"41,410",
+    'progressvalue'=>70,
+    'progresstext'=>'70% Increase in 30 Days'
+];
+
+
+echo $renderAdminLTE->addRow(
+    '<h2>Infobox</h2>'
+)
+.$renderAdminLTE->addRow(
+    '<h3>Syntax</h3>
+    <pre>
+    echo $renderAdminLTE->getInfobox($aOptions)
+    </pre>
+    '
+)
+.showExample('$renderAdminLTE->getInfobox('.var_export($aOptions, 1).')')
+;
\ No newline at end of file