From 412c532578594d23ee029cacba5ddc637742ca1a Mon Sep 17 00:00:00 2001
From: "Hahn Axel (hahn)" <axel.hahn@iml.unibe.ch>
Date: Thu, 8 Dec 2022 15:09:03 +0100
Subject: [PATCH] add method getCard
---
public_html/classes/render-adminlte.class.php | 71 +++++++++++-----
public_html/pages/components/cards.php | 83 +++++++++++++++++++
2 files changed, 133 insertions(+), 21 deletions(-)
create mode 100644 public_html/pages/components/cards.php
diff --git a/public_html/classes/render-adminlte.class.php b/public_html/classes/render-adminlte.class.php
index fe71d6f..414026a 100755
--- a/public_html/classes/render-adminlte.class.php
+++ b/public_html/classes/render-adminlte.class.php
@@ -27,6 +27,7 @@ class renderadminlte {
'info', 'cyan',
'warning', 'yellow',
'danger', 'red',
+ 'dark',
'black',
'gray-dark',
@@ -59,9 +60,11 @@ class renderadminlte {
],
'type'=>[
'danger', // red
+ 'dark', // dark gray
'gray', // gray
'info', // aqua
'primary', // blue
+ 'secondary', // gray
'success', // green
'warning', // yellow
],
@@ -330,6 +333,7 @@ class renderadminlte {
/**
* show help of standard key in a component key
+ * @param string $skey name of a options key
*/
public function showKeyHelp($sKey){
$aDescription=[
@@ -343,7 +347,7 @@ class renderadminlte {
];
return [
'key'=>$sKey,
- 'description'=>isset($aDescription[$sKey]) ? $aDescription[$sKey] : '?',
+ 'description'=>isset($aDescription[$sKey]) ? $aDescription[$sKey] : '-',
'valid_values'=>isset($this->_aValidItems[$sKey]) ? implode("|", $this->_aValidItems[$sKey]) : '',
];
}
@@ -351,7 +355,6 @@ class renderadminlte {
// ----------------------------------------------------------------------
/**
- * UNTESTED
* get html code for a badge
*
* Examples
@@ -360,13 +363,13 @@ class renderadminlte {
* <span class="right badge badge-danger">New</span>
* <span class="badge badge-danger float-right">$350</span>
*
- * @param type $aOptions hash with keys for all options
+ * @param array $aOptions hash with keys for all options
* - bgcolor - background color (without prefix "bg")
* - class - css class
* - id - optional: id attribute
* - text - visible text
* - title - optional: title attribute
- * - type - one of [none]|danger|info|primary|success|warning
+ * - type - one of [none]|danger|dark|info|primary|secondary|success|warning
*/
public function getBadge($aOptions){
$_aParams=['bgcolor', 'class', 'id', 'text', 'title', 'type'];
@@ -395,7 +398,7 @@ class renderadminlte {
* get a button
* <button type="button" class="btn btn-block btn-default">Default</button>
* @param type $aOptions hash with keys for all options
- * - type - one of [none]|danger|info|primary|success|warning
+ * - type - one of [none]|danger|dark|info|primary|secondary|success|warning
* - size - one of [none]|lg|sm|xs|flat
* - class - any css class for customizing, eg. "disabled"
* - icon
@@ -409,7 +412,7 @@ class renderadminlte {
}
$this->_checkValue($sKey, $aOptions[$sKey]);
}
- $aBtn=[
+ $aElement=[
'class'=>'btn '
.(isset($aOptions['class']) ? ' '.$aOptions['class'] : '')
.(isset($aOptions['type']) ? ' btn-'.$aOptions['type'] : '')
@@ -417,7 +420,7 @@ class renderadminlte {
,
'label'=>isset($aOptions['text']) ? $aOptions['text'] : ''
];
- return $this->_oHtml->getTag('button', $aBtn);
+ return $this->_oHtml->getTag('button', $aElement);
}
/**
@@ -446,29 +449,55 @@ class renderadminlte {
* <!-- /.card -->
*
* @param type $aOptions hash with keys for all options
- * - type - one of [none]|danger|info|primary|success|warning
- * - size - one of [none]|lg|sm|xs|flat
- * - class - any css class for customizing, eg. "disabled"
- * - icon
- * - text
+ * >> styling
+ * - variant: "default" - titlebar is colored
+ * "outline" - small stripe on top border is colored
+ * "fill" - whole card is colored
+ * "gradient" - whole card is colored with a gradient
+ * - type - one of [none]|danger|dark|info|primary|secondary|success|warning
+ * - class - any css class for customizing, eg. "disabled"
+ *
+ * >> texts/ html content
+ * - title - text: title of the card
+ * - tools - text: titlebar top right elements
+ * - text - text: content of the card
+ * - footer - text: footer of the card
* @return string
*/
public function getCard($aOptions){
- foreach (array('type', 'size', 'class', 'text', 'icon') as $sKey){
+ foreach (array('variant', 'type', 'class', 'text', 'icon') as $sKey){
if(!isset($aOptions[$sKey])){
$aOptions[$sKey]=false;
}
$this->_checkValue($sKey, $aOptions[$sKey]);
}
- $aBtn=[
- 'class'=>'btn '
- .(isset($aOptions['class']) ? ' '.$aOptions['class'] : '')
- .(isset($aOptions['type']) ? ' btn-'.$aOptions['type'] : '')
- .(isset($aOptions['size']) ? ' btn-'.$aOptions['size'] : '')
- ,
- 'label'=>isset($aOptions['text']) ? $aOptions['text'] : ''
+
+ // css class prefixes
+ $aVariants=[
+ 'default' => 'card-',
+ 'outline' => 'card-outline card-',
+ 'filled' => 'bg-',
+ 'gradient' => 'bg-gradient-',
];
- return $this->_oHtml->getTag('button', $aBtn);
+
+ // print_r($aOptions);
+ $sVariantPrefix=$aVariants[$aOptions['variant']] ? $aVariants[$aOptions['variant']] : $aVariants['default'];
+ $sClass='card'
+ .($aOptions['class'] ? ' '.$aOptions['class'] : '')
+ .($aOptions['type'] ? ' '.$sVariantPrefix.$aOptions['type'] : '')
+ ;
+
+ // build parts of the card
+ $sCardHeader=$this->addWrapper('div', ['class'=>'card-header'],
+ $this->_oHtml->getTag('h3', ['class'=>'card-title', 'label'=>$aOptions['title']])
+ . ($aOptions['tools'] ? $this->_oHtml->getTag('div', ['class'=>'card-tools', 'label'=>$aOptions['tools']]) : '')
+ );
+
+ $sCardBody=$this->_oHtml->getTag('div', ['class'=>'card-body', 'label'=>$aOptions['text']]);
+ $sCardFooter=$aOptions['footer'] ? $this->_oHtml->getTag('div', ['class'=>'card-footer', 'label'=>$aOptions['footer']]) : '';
+
+ // merge all
+ return $this->addWrapper('div', ['class'=>$sClass], $sCardHeader.$sCardBody.$sCardFooter);
}
diff --git a/public_html/pages/components/cards.php b/public_html/pages/components/cards.php
new file mode 100644
index 0000000..34c64a3
--- /dev/null
+++ b/public_html/pages/components/cards.php
@@ -0,0 +1,83 @@
+<?php
+
+$aCard=[
+ 'type'=>'primary',
+ 'variant'=>'fill',
+ 'title'=>'I am a card',
+ 'tools'=>'123',
+ 'text'=>'Hello everybody out there!',
+ 'footer'=>'© Axel',
+];
+
+
+echo $renderAdminLTE->addRow(
+ '<h2>Cards</h2>'
+)
+.print_r($renderAdminLTE->showKeyHelp("color"), 1)
+.$renderAdminLTE->addRow(
+ '<h3>Syntax</h3>
+ <pre>
+ echo $renderAdminLTE->getCard($aOptions)
+ </pre>
+ '
+)
+/*
+.$renderAdminLTE->addRow(
+ '<h3>Keys</h3>
+ <table class="table">
+ <tr>
+ <th>Key</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td>bgcolor</td>
+ <td>background color (without prefix "bg")</td>
+ </tr>
+ <tr>
+ <td>class</td>
+ <td>any css class for customizing, eg. "disabled"</td>
+ </tr>
+ <tr>
+ <td>id</td>
+ <td>optional: id attribute</td>
+ </tr>
+ <tr>
+ <td>text</td>
+ <td>button label text</td>
+ </tr>
+ <tr>
+ <td>title</td>
+ <td>optional: title attribute</td>
+ </tr>
+ <tr>
+ <td>type</td>
+ <td>one of [none]|danger|info|primary|success|warning</td>
+ </tr>
+ </table>
+ '
+)
+.$renderAdminLTE->addRow(
+ '<h3>Example</h3><pre>
+ $renderAdminLTE->getBadge([
+ \'type\'=>\'danger\',
+ \'title\'=>\'Errors: 5\',
+ \'text\'=>\'5\',
+ ])
+ </pre>
+ '
+)
+*/
+.$renderAdminLTE->addRow(
+ '<h3>Test</h3>
+
+ '
+ . $renderAdminLTE->getCard($aCard)
+ .'
+ <pre>'
+ . htmlentities($renderAdminLTE->getCard($aCard))
+ .'
+ </pre>
+ </p>
+ '
+)
+;
\ No newline at end of file
--
GitLab