From 961bfff1dfe320652ae604f9c4ae3dfa02c03ed1 Mon Sep 17 00:00:00 2001
From: "Hahn Axel (hahn)" <axel.hahn@iml.unibe.ch>
Date: Fri, 9 Dec 2022 17:11:26 +0100
Subject: [PATCH] add infobox component
---
public_html/classes/render-adminlte.class.php | 88 ++++++++++++++++++-
public_html/pages/components/infobox.php | 25 ++++++
2 files changed, 111 insertions(+), 2 deletions(-)
create mode 100644 public_html/pages/components/infobox.php
diff --git a/public_html/classes/render-adminlte.class.php b/public_html/classes/render-adminlte.class.php
index 7de7e35..a67afe5 100755
--- a/public_html/classes/render-adminlte.class.php
+++ b/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,7 +565,88 @@ 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>
+*/
+
+
diff --git a/public_html/pages/components/infobox.php b/public_html/pages/components/infobox.php
new file mode 100644
index 0000000..f900978
--- /dev/null
+++ b/public_html/pages/components/infobox.php
@@ -0,0 +1,25 @@
+<?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
--
GitLab