Clase de soporte para la generación de paneles en WEBvivo
showConfig($conf) - Genera y muestra un panel de configuración de claves basado en estilos bootstrap 3
Valores de configuración del menú ($conf['menu'][] =['icon'=>'account','scr'=>'user_type','title'=>'User Type','btn'=>'primary'] ):
$cnf['menu'][] = ['icon'=>'account','scr'=>'user_type','title'=>'User Type','btn'=>'primary']
$cnf['title'] (str): Panel title
$cnf['icon'] (str): Icon name
$cnf['icon_set'] (str): Set of icons fa, glyphicon, mdi (mdi by default)
$cnf['back']: Page to return to
$cnf['cnf_cat'] (str): Framework keys category
$cnf['cnf_key'] (str): Framework keys keyword
$cnf['item'][] (array): Every panel item values (name,title,type)
Valores de configuración de cada elemento ($conf['item'][] = [cat=>'',name=>'',title=>'',scale=>'',type=>'',readonly=>true]):
cat (str): Show a table row with category text (no input inserted)
name (str): Input field name
title (str): Input field Title
scale (str): Text, image, symbol after input line
type (str): Type of input (text, number, radio, checkbox, select, list, hidden)
readonly (bool): true to ser input as read only
Tipos de input:
checkbox: single checkbox item
radio|select: Radio or select list. Values should be passed by array, i.e:
[type=>'select','options'=>[0=>['title'=>'Spain','value'=>'ES'],1=>['title'=>'France','value'=>'FR']]]
list: List of items |count=Number of items in list, default=array with default list of elements |hidden=array with hidden IDs, ie:
[type=>'list','count'=>2',default'=>['Spain','France'],'hidden'=>[0]]
text|date|datetime-local|email|number|password|range|tel|time|url
opt: Alternative CSS input options, i.e. 'opt'=>['min'=>1,'step'=>'any']
Ejemplo de select:
$opt[0] = ['title'=>'None','value'=>'0'];
$opt[1] = ['title'=>'By price','value'=>'1'];
$opt[2] = ['title'=>'By shipping','value'=>'2'];
$cnf['item'][] = ['name'=>'item_name','title'=>'Shipping type','type'=>'select','options'=>$opt];
Ejemplo de radio:
$opt[0] = ['title'=>'None','value'=>'0'];
$opt[1] = ['title'=>'By price','value'=>'1'];
$opt[2] = ['title'=>'By shipping','value'=>'2'];
$cnf['item'][] = ['name'=>'item_name','title'=>'Shipping type','type'=>'radio','options'=>$opt];
Ejemplo de lista:
$cnf['item'][] = ['name'=>'colors','title'=>'Colors','type'=>'list','count'=>3,'default'=>['Red','Blue','Yellow']];
Ejemplo de cat:
$cnf['item'][] = ['type'=>'cat','title'=>'CATEGORY TEXT'];
Ejemplo de checkbox:
$cnf['item'][] = ['name'=>'freeship','title'=>'Free shipping','type'=>'checkbox'];
Ejemplo de número:
$cnf['item'][] = ['name'=>'price','title'=>'Price', 'scale'=>'&eur;','type'=>'number','opt'=>['min'=>0,'step'=>'any']];
Ejemplo de texto:
$cnf['item'][] = ['name'=>'country_list','title'=>'Countries to ship to','type'=>'text','scale'=>'ISO code comma separated'];
showMenu($conf) - Genera y muestra un menú de botones basado en estilos bootstrap 3
Valores del array $conf para el menú principal $conf['valor']:
title (str) = Título del panel.
icon (str) = Icono del panel.
icon_set (str) = [mdi] - Set de iconos susado (fa|glyphicon|mdi).
ths (int) = Tamaño del encabezado del título del panel
ihs (int) = Tamaño del encabezado del título de cada elemento (botón)
cols (int) = Número de columnas de botones del menú
Valores de configuración para cada elemento del menú $conf['item'][] = (icon, scr, title, href,btn,dis):
icon = Nombre del icono del set de iconos seleccionado en icon_set.
href = Enlace del botón
target = Destino del enlace en href
tip = Texto mostrado en tooltip al pasar sobre el botón
title = Título (texto) del botón
btn = Tipo de boton Bootstrap (default|success|danger|info|primary)
dis = true para desactivar el botón
scr (str) = Pantalla mostrada al hacer click (/_scr/valor)
Ejemplo de uso:
$cols = 3; //Botones por columna
$ths = 3; //Tamaño del encabezado del título del panel
$ihs = 4; //Tamaño del encabezado del título de cada elemento
//Configuración de los tips (ayudas)
$tips[1] = "Ayuda del elemento uno";
$tips[2] = "Ayuda del elemento dos";
$tips[3] = "";
$tips[4] = "";
$tips[5] = "Ayuda del elemento cinco";
//Datos de cada elemento
$btn = [ //pagina, título, icono, tip
[$wv->pageID2Alias(101),'Clientes','account-tie-outline',$tips[1]],
[$wv->pageID2Alias(102),'Imágenes','image',$tips[2]],
[$wv->pageID2Alias(103),'Códigos','barcode-scan',$tips[3]],
[$wv->pageID2Alias(104),'Mantenimiento','wrench',$tips[4]],
[$wv->pageID2Alias(105),'Configuración','cogs',$tips[5]]]
];
$menu[] = ['title'=>$wv->getText('ws_panel_title'),'icon'=>'view-dashboard','cols'=>$cols,'ths'=>$ths,'ihs'=>$ihs,'btn'=>$btn];
//Genera el panel
if (!empty($menu)) {
foreach ($menu as $m) {
foreach ($m['btn'] as $c) {
$m['item'][] = ['dis'=>$c[4]??0,'tip'=>$c[3]??'','icon'=>$c[2],'title'=>$c[1],'href'=>$c[0]];
}
$wv->panel->showMenu($m);
}
}
showBtnBar($conf) - Genera y muestra una barra de botones basada en estilos bootstrap 3
Valores del array $conf para la barra principal $conf['valor']:
color = [info] Estilo bg- de Bootstrap 3 para el fondo (default|primary|success|info|warning|danger|gray)
class = [box-bordered] - Nombre de la clase css de la barra
Valores de configuración para cada elemento de la barra ($conf['item'][] = 'tag'=>'btn','align'=>'left','order'=>1,'text'=>'']):
OBLIGATORIOS
align = [left] Alineamiento del elemento dentro de la barra (left|right)
order (int) = Posición del elemento respecto a otros
tag (mandatory) = Tag type of item (raw|btn|a|span)
OPCIONALES (si se dejan todos vacíos saldrá un botón vacío)
content = Sólo aplicable si tag es "raw". Contenido en HTML del elemento.
margin (int) = Genera una clase margin-n en el elemento (separa n pixels), valores válidos en WEBvivo: (0,2,5,10,20,30,40,50,100).
margin_left (int) = Genera una clase margin-left-n en el elemento (separa n pixels a izquierda), valores válidos en WEBvivo: (0,2,5,10,20,30,40,50,100).
margin_right (int) = Genera una clase margin-tight-n en el elemento (separa n pixels a derecha), valores válidos en WEBvivo: (0,2,5,10,20,30,40,50,100).
dis = true para mostrar el elemento desconectado.
href = Sólo aplicable si tag es "a". URL de enlace del elemento.
btn_size = [sm] Clase de tamaño de Bootstrat 3 para el botón (xs|sm|md|lg).
btn_color = [default] Clased de color de Bootstrap 3 para el botón (default|primary|success|info|warning|danger|gray).
btn_id = ID de cada elemento.
btn_title = Título de cada elemento.
btn_style = Estilo de cada elemento.
btn_tt = Posición válida para activar el "tooltip" del botón (top|bottom|right|left)
btn_type = [submit] Sólo aplicable si tag es "btn". Parámetro "type" del tag "button" (button|submit|reset).
btn_name = Sólo aplicable si tag es "btn". Parámetro "name" del tag "button".
btn_value = Sólo aplicable si tag es "btn". Parámetro "value" del tag "button".
only_txt (bool) = true para que el elemento sólo sea texto (elimina estilos de botón).
icon = Clase del botón. Por ejemplo: "mdi mdi-account".
icon_align = [left] Position del icono en relación al texto del botón (left|right).
text = Texto del elemento.
txt_color = [default] Clased de color de Bootstrap 3 para el texto (default|primary|success|info|warning|danger|gray)
txt_padding (int) = Genera una clase padding-n en el elemento (añade un margen de n pixels), valores válidos en WEBvivo: (0,2,5,10,20,30,40,50,100).
txt_padding_left (int) = Genera una clase padding-left-n en el elemento (añade un margen a la izquierda de n pixels), valores válidos en WEBvivo: (0,2,5,10,20,30,40,50,100).
txt_padding_right (int) = Genera una clase padding-right-n en el elemento (añade un margen a la derecha de n pixels), valores válidos en WEBvivo: (0,2,5,10,20,30,40,50,100).
txt_align = [left] Alineación del texto de Bootstrap 3 (left|center|right|justify|nowrap).
txt_case = Capitalización del texto de Bootstrap 3 (lowercase|uppercase|capitalize).
Ejemplo:
$btn['color'] = 'info';
$btn['item'][] = ['tag'=>'raw','align'=>'right','order'=>1,'content'=>$_html_btn]; //Botón alineado a derecha
$btn['item'][] = ['tag'=>'span','align'=>'left','only_txt'=>true,'margin_left'=>20,'order'=>1,'text'=>'Título']; //Texto (sin botón)
$btn['item'][] = ['tag'=>'a','align'=>'left','order'=>2,'btn_size'=>'sm','btn_color'=>'success','icon'=>'mdi mdi-plus','href'=>"/link/to/page",'id'=>'add','text'=>'Añadir registro']; //Botón alineado a la izquierda