2.1 <jmoordbjsf:ccstimeline>

Para Desarrollador:

Cuando agrega un nuevo color a csstimeline.css en el proyecto jmoordbjsf
debe agregarlo a la clase CSSTimeLine.java en el proyecto jmoordbutils.

Se usa para los css de los componentes timeline

Ampliado

En este caso usamos un mismo Controller para gestionar varios timeline y para evitar la sobrecarga de operaciones en el init(), se crean metodos que seran invocados desde un menu mediante un commandLink que hace referencia al metodo respectivo.

Se definen de tipo RequestScope para evitar que se pierdan los valores al ejecutar el metodo y hacer el salto a la pagina.

left.xtml

<b:navCommandLink value="#{msg['menu.timelinevehiculo']}" rendered="#{p:ifGranted('SECRETARIO ADMINISTRATIVO')}" action="#{timeLineController.loadTimeLineVehiculo()}" iconAwesome= "fa-list" />    
<b:navCommandLink value="#{msg['menu.timelineconductor']}" rendered="#{p:ifGranted('SECRETARIO ADMINISTRATIVO')}" action="#{timeLineController.loadTimeLineConductor()}" iconAwesome= "fa-list" />    

Nota:

En el controller usara el estado para indicar el color de los componentes que estan definidos en el css.

String availability = (vi.getRealizado().equals("si") ? "Realizado" : (vi.getRealizado().equals("no") ? "NoRealizado" : "Cancelado"));
                            TimelineEvent event = new TimelineEvent(availability, vi.getFechahorainicioreserva(), vi.getFechahorafinreserva(), true, c.getNombre() + " " + c.getCedula(), availability.toLowerCase());
                            timelineConductorModel.add(event);

Los valores definidos dentro de jmoordbjsf:ccstimeline para indicar el color de los componentes en base al valor son:

Podemos usar los colores directamente para indicar como deseamos que sea el dibujo.

Podemos indicar por nombre de colores mediante la clase CSSTimeLine y el atributo de color respectivo por ejemplo:

String color =CSSTimeLine.verde;

Lista completa de los colores disponibles.

static String[] colorDisponibles = {
        "rojo", "verde", "azul", "celeste",
        "naranja", "amarillo", "chocolate",
        "morado", "unavailable","available",
        "verdeamarillo", "maybe", "norealizado",
        "realizado", "aprobado",
        "cancelado", "anulado", "solicitado", "rechazado"};
  

También puede identificarlos usando el autocompletado del IDE.

timelinevehiculo.xhtml

Agregamos

   <jmoordbjsf:csstimeline/>  

Código

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<ui:composition template="/layout/template.xhtml" 
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:b="http://bootsfaces.net/ui"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                xmlns:jmoordbjsf="http://jmoordbjsf.com/taglib"
                xmlns:e="http://xmlns.jcp.org/jsf/composite/extensions">
    <ui:define name="content">


        <style>
            .thumbnail { max-width: 100%; }
            img.thumbnail:hover, img.thumbnail:focus {
                border: 1px solid;
                border-color: #428BCA;
            } 

        </style>

      
         <jmoordbjsf:csstimeline/>  

        <b:form id="form"  prependId="false"  rendered="#{p:ifGranted('SECRETARIO ADMINISTRATIVO')}" onkeypress="if (event.keyCode == 13) {
                    return false;
                }">

            <b:growl  id="msgs"/>

            <b:panel collapsible="false" title="#{msg['titlelist.timelinevehiculo']}" id="content"   look="primary" > 
                <!--<b:panelGrid colSpans="2,10" size="xs">--> 
               
                <p:timeline id="timeline" value="#{timeLineController.timelineModel}" 
            editable="true" eventMargin="10" eventMarginAxis="0" 
            start="#{timeLineController.fechaDesde}" 
            end="#{timeLineController.fechaHasta}" 
            showNavigation="true" showButtonNew="true" 
            axisOnTop="true" stackEvents="false"/>
                


              
            </b:panel>



        </b:form>

        <jmoordbjsf:denegado renderedcondition="#{!p:ifGranted('SECRETARIO ADMINISTRATIVO')}"/>
    </ui:define>
</ui:composition>

TimeLineController.java

/*
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
package com.avbravo.transporte.controller;

// <editor-fold defaultstate="collapsed" desc="imports">
import com.avbravo.jmoordb.interfaces.IError;
import com.avbravo.jmoordb.mongodb.history.services.ErrorInfoServices;
import com.avbravo.jmoordbutils.DateUtil;
import com.avbravo.jmoordbutils.jmoordbjsf.CSSTimeLine;
import com.avbravo.transporteejb.entity.Conductor;
import com.avbravo.transporteejb.entity.Estatus;
import com.avbravo.transporteejb.entity.Solicitud;
import com.avbravo.transporteejb.entity.Usuario;
import com.avbravo.transporteejb.entity.Vehiculo;
import com.avbravo.transporteejb.entity.Viaje;
import com.avbravo.transporteejb.repository.ConductorRepository;
import com.avbravo.transporteejb.repository.EstatusRepository;
import com.avbravo.transporteejb.repository.SolicitudRepository;
import com.avbravo.transporteejb.repository.UsuarioRepository;
import com.avbravo.transporteejb.repository.VehiculoRepository;
import com.avbravo.transporteejb.repository.ViajeRepository;
import java.io.Serializable;
import java.util.Date;
import java.util.List;
import javax.annotation.PostConstruct;
import javax.enterprise.context.RequestScoped;
import javax.inject.Inject;
import javax.inject.Named;
import lombok.Getter;
import lombok.Setter;
import org.bson.Document;
import org.primefaces.model.timeline.TimelineEvent;
import org.primefaces.model.timeline.TimelineModel;
// </editor-fold>

/**
 *
 * @authoravbravo
 */
@Named
@RequestScoped
@Getter

@Setter

public class TimeLineController implements Serializable, IError {

    // <editor-fold defaultstate="collapsed" desc="fields">  
    private TimelineModel timelineModel;
    private TimelineModel timelineConductorModel;
    private TimelineModel timelineSolicitudModel;
    private TimelineModel timelineUsuarioModel;
    private Date fechaDesde;
    private Date fechaHasta;
    // </editor-fold>  

    // <editor-fold defaultstate="collapsed" desc="repository">
    @Inject
    ConductorRepository conductorRepository;
    @Inject
    EstatusRepository estatusRepository;
    @Inject
    SolicitudRepository solicitudRepository;
    @Inject 
    UsuarioRepository usuarioRepository;
    @Inject
    VehiculoRepository vehiculoRepository;
    @Inject
    ViajeRepository viajeRepository;
    // </editor-fold>  
    // <editor-fold defaultstate="collapsed" desc="services">  
    @Inject
    ErrorInfoServices errorServices;

    // </editor-fold>  
    // <editor-fold defaultstate="collapsed" desc="init">
    @PostConstruct
    public void init() {
        try {
            //   loadTimeLineVehiculo();
//    timelineModel.toString(); 
//          timelineConductorModel.toString();
        } catch (Exception e) {
            errorServices.errorMessage(nameOfClass(), nameOfMethod(), e.getLocalizedMessage());
        }
    }// </editor-fold>

    // <editor-fold defaultstate="collapsed" desc="String loadTimeLineVehiculo()">
    public String loadTimeLineVehiculo() {
        try {
            timelineModel = new TimelineModel();
            fechaDesde = DateUtil.dateFirtsOfMonth(DateUtil.anioActual(), DateUtil.mesActual());

            fechaHasta = DateUtil.dateLastOfMonth(DateUtil.anioActual(), DateUtil.mesActual());
// 
            // groups  
            List<Vehiculo> list = vehiculoRepository.findBy(new Document("activo", "si"));

            if (list == null || list.isEmpty()) {

            } else {
                for (Vehiculo v : list) {

                    Document doc = new Document("activo", "si").append("vehiculo.idvehiculo", v.getIdvehiculo());
                    List<Viaje> viajeList = viajeRepository.findBy(doc, new Document("idviaje", -1));
                    if (viajeList == null || viajeList.isEmpty()) {

                    } else {
                         String color =CSSTimeLine.verde;
                         String availability="No Realizado";
                        for (Viaje vi : viajeList) {
                          //  String availability = (vi.getRealizado().equals("si") ? "Realizado" : (vi.getRealizado().equals("no") ? "NoRealizado" : "Cancelado"));
                            switch(vi.getRealizado()){
                                case "si":
                                   availability="Realizado";
                                   color =CSSTimeLine.verde;
                                   break;
                                case "no":
                                     availability="No Realizado";
                                   color =CSSTimeLine.celeste;
                                   break;
                                case "ca":
                                     availability="Cancelado";
                                  color =CSSTimeLine.rojo;
                                   break;
                            }

                            TimelineEvent event = new TimelineEvent(availability, vi.getFechahorainicioreserva(), vi.getFechahorafinreserva(), true, v.getMarca() + " " + v.getPlaca(), color.toLowerCase());
                            timelineModel.add(event);
                        }
                    }
                }
            }

        } catch (Exception e) {
            errorServices.errorMessage(nameOfClass(), nameOfMethod(), e.getLocalizedMessage());
        }
        return "/pages/timeline/timelinevehiculo.xhtml";
    }

    // </editor-fold>  
    // <editor-fold defaultstate="collapsed" desc="loadTimeLineConductor()">
    public String loadTimeLineConductor() {
        try {
            timelineConductorModel = new TimelineModel();
            fechaDesde = DateUtil.dateFirtsOfMonth(DateUtil.anioActual(), DateUtil.mesActual());

            fechaHasta = DateUtil.dateLastOfMonth(DateUtil.anioActual(), DateUtil.mesActual());
            // groups  
            List<Conductor> list = conductorRepository.findBy(new Document("activo", "si"));

            if (list == null || list.isEmpty()) {

            } else {
                for (Conductor c : list) {

                    Document doc = new Document("activo", "si").append("conductor.idconductor", c.getIdconductor());
                    List<Viaje> viajeList = viajeRepository.findBy(doc, new Document("idviaje", -1));
                    if (viajeList == null || viajeList.isEmpty()) {

                    } else {
                          String color =CSSTimeLine.verde;
                         String availability="No Realizado";
                        for (Viaje vi : viajeList) {
                           switch(vi.getRealizado()){
                                case "si":
                                   availability="Realizado";
                                   color =CSSTimeLine.verde;
                                   break;
                                case "no":
                                     availability="No Realizado";
                                   color =CSSTimeLine.celeste;
                                   break;
                                case "ca":
                                     availability="Cancelado";
                                  color =CSSTimeLine.rojo;
                                   break;
                            }
                            TimelineEvent event = new TimelineEvent(availability, vi.getFechahorainicioreserva(), vi.getFechahorafinreserva(), true, c.getNombre() + " " + c.getCedula(), color.toLowerCase());
                            timelineConductorModel.add(event);
                        }
                    }
                }
            }

        } catch (Exception e) {
            errorServices.errorMessage(nameOfClass(), nameOfMethod(), e.getLocalizedMessage());
        }
        return "/pages/timeline/timelineconductor.xhtml";
    }

    // </editor-fold>  
    // <editor-fold defaultstate="collapsed" desc="String loadTimeLineSolicitud()">
    public String loadTimeLineSolicitud() {
         try {
            timelineSolicitudModel = new TimelineModel();
            fechaDesde = DateUtil.dateFirtsOfMonth(DateUtil.anioActual(), DateUtil.mesActual());

            fechaHasta = DateUtil.dateLastOfMonth(DateUtil.anioActual(), DateUtil.mesActual());
// 
            // groups  
            List<Estatus> list = estatusRepository.findBy(new Document("activo", "si"));

            if (list == null || list.isEmpty()) {

            } else {
                   
                for (Estatus e : list) {

                    Document doc = new Document("activo", "si").append("estatus.idestatus", e.getIdestatus());
                    List<Solicitud> solicitudList = solicitudRepository.findBy(doc, new Document("idsolicitud", -1));
                    if (solicitudList == null || solicitudList.isEmpty()) {

                    } else {
                        String color =CSSTimeLine.verde;
                         String availability="SOLICITADO";
                        for (Solicitud s : solicitudList) {
                          
                            switch(s.getEstatus().getIdestatus()){
                                case "SOLICITADO":
                                   availability="Solicitado";
                                   color =CSSTimeLine.azul;
                                    System.out.println("id= "+s.getIdsolicitud());
                                   break;
                                case "APROBADO":
                                     availability="Aprobado";
                                   color =CSSTimeLine.verde;
                                   break;
                                case "RECHAZADO":
                                     availability="Rechazado";
                                  color =CSSTimeLine.rojo;
                                   break;
                                case "CANCELADO":
                                     availability="Cancelado";
                                  color =CSSTimeLine.naranja;
                                   break;
                            }
                            TimelineEvent event = new TimelineEvent(availability, s.getFechahorapartida(), s.getFechahoraregreso(), true, s.getEstatus().getIdestatus(),  color.toLowerCase());
                            timelineSolicitudModel.add(event);
                            
                        }
                    }
                }
            }
            

        } catch (Exception e) {
            errorServices.errorMessage(nameOfClass(), nameOfMethod(), e.getLocalizedMessage());
        }
        return "/pages/timeline/timelinesolicitud.xhtml";
    }
    // </editor-fold>  
    // <editor-fold defaultstate="collapsed" desc="String loadTimeLineUsuarioSolicitud()">
    /**
     * Muestra el timelien por usuario
     * @return 
     */
    public String loadTimeLineUsuarioSolicitud() {
         try {
            timelineUsuarioModel = new TimelineModel();
            fechaDesde = DateUtil.dateFirtsOfMonth(DateUtil.anioActual(), DateUtil.mesActual());

            fechaHasta = DateUtil.dateLastOfMonth(DateUtil.anioActual(), DateUtil.mesActual());
// 
            // groups  
            List<Usuario> list = usuarioRepository.findBy(new Document("activo", "si"));

            if (list == null || list.isEmpty()) {

            } else {
                   
                for (Usuario u : list) {

                    Document doc = new Document("activo", "si").append("usuario.username", u.getUsername());
                    List<Solicitud> solicitudList = solicitudRepository.findBy(doc, new Document("idsolicitud", -1));
                    if (solicitudList == null || solicitudList.isEmpty()) {

                    } else {
                        String color =CSSTimeLine.verde;
                         String availability="SOLICITADO";
                        for (Solicitud s : solicitudList) {
                          
                            switch(s.getEstatus().getIdestatus()){
                                case "SOLICITADO":
                                   availability="Solicitado";
                                   color =CSSTimeLine.azul;
                                    System.out.println("id= "+s.getIdsolicitud());
                                   break;
                                case "APROBADO":
                                     availability="Aprobado";
                                   color =CSSTimeLine.verde;
                                   break;
                                case "RECHAZADO":
                                     availability="Rechazado";
                                  color =CSSTimeLine.rojo;
                                   break;
                                case "CANCELADO":
                                     availability="Cancelado";
                                  color =CSSTimeLine.naranja;
                                   break;
                            }
//                            TimelineEvent event = new TimelineEvent(availability, s.getFechahorapartida(), s.getFechahoraregreso(), true, s.getEstatus().getIdestatus(),  color.toLowerCase());
                            TimelineEvent event = new TimelineEvent(availability, s.getFechahorapartida(), s.getFechahoraregreso(), true, u.getNombre(),  color.toLowerCase());
                            timelineUsuarioModel.add(event);
                            
                        }
                    }
                }
            }
            

        } catch (Exception e) {
            errorServices.errorMessage(nameOfClass(), nameOfMethod(), e.getLocalizedMessage());
        }
        return "/pages/timeline/timelineusuario.xhtml";
    }
    // </editor-fold>  
}

Last updated