# index.xhtml

Desde cualquier pagina debemos invocar el websocket, también podemos hacerla desde un método

```markup
<h:commandButton value="WebSocket" action="#{pushSocket.clockAction()}">
  <f:ajax />
</h:commandButton>
```

index.xhtml

```markup
<?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:jmoordbjsf="http://jmoordbjsf.com/taglib"
                xmlns:p="http://primefaces.org/ui">
    <ui:define name="content">
        <h:outputStylesheet library="bsf" name="css/thumbnails.css"/>

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


        <b:form id="form" rendered="#{loginController.loggedIn}"  >
            <h1>#{msg['application.title']}</h1>

            <hr/>
<!--            <p>#{msg['label.sistematransporte']}</p>
            <p>#{msg['label.solicitudes']}</p>-->


            <h:commandButton value="WebSocket" action="#{pushSocket.clockAction()}">
                <f:ajax />
            </h:commandButton>


               

            <hr/>
            <div id="websocketid"></div>
           


            <b:panel collapsible="false" >
                <f:facet name="heading">
                    <i class="fa fa-battery-three-quarters" style="padding-right:20px" />
                    <h:outputText value="#{msg['title.solicitudes']}" />
                    <b:badge rendered="#{dashboardIndexController.totalSolicitado == 0} " style="margin-left:10px; background-color:#5cb85c" value="#{msg['label.sinsolicitudes']}"  />
                    <b:badge rendered="#{dashboardIndexController.totalSolicitado > 0}" style="margin-left:10px; background-color:#7f0055" value="#{msg['label.pendientes']}"  />
                </f:facet>
                <b:row>

                    <b:column span="2">
                        <h5><p:outputLabel value="#{msg['label.totalsolicitado']}"/></h5>
                        <div class="knob-container  ui-corner-all">
                            <p:knob value="#{dashboardIndexController.totalSolicitado}" max="#{dashboardIndexController.totalSolicitado}"
                                    disabled="true" 
                                    height="70" width="70"
                                    foregroundColor="black" backgroundColor="#00000"
                                    />
                        </div>
                    </b:column>
                    <b:column span="2">
                        <h5><p:outputLabel value="#{msg['label.totalaprobado']}"/></h5>
                        <div class="knob-container  ui-corner-all">
                            <p:knob value="#{dashboardIndexController.totalAprobado}" max="#{dashboardIndexController.totalAprobado}"
                                    disabled="true"
                                    height="70" width="70"
                                    foregroundColor="green" backgroundColor="#00000"
                                    />
                        </div>
                    </b:column>

                    <b:column span="2">
                        <h5><p:outputLabel value="#{msg['label.totalrechazado']}"/></h5>
                        <div class="knob-container  ui-corner-all">
                            <p:knob value="#{dashboardIndexController.totalRechazado}" max="#{dashboardIndexController.totalRechazado}"
                                    disabled="true"
                                    height="70" width="70"
                                    foregroundColor="red" backgroundColor="#00000"
                                    />
                        </div>
                    </b:column>
                    <b:column span="2">
                        <h5><p:outputLabel value="#{msg['label.totalcancelado']}"/></h5>
                        <div class="knob-container  ui-corner-all">
                            <p:knob value="#{dashboardIndexController.totalCancelado}" max="#{dashboardIndexController.totalCancelado}"
                                    disabled="true"
                                    height="70" width="70"
                                    foregroundColor="blue" backgroundColor="#00000"
                                    />
                        </div>
                    </b:column>


                    <b:column span="2">
                        <h5><p:outputLabel value="#{msg['label.totales']}"/></h5>
                        <div class="knob-container  ui-corner-all">
                            <p:knob value="#{dashboardIndexController.totales}" max="#{dashboardIndexController.totales}"
                                    disabled="true"
                                    height="70" width="70"
                                    foregroundColor="brown" backgroundColor="#00000"
                                    />
                        </div>
                    </b:column>
                </b:row>
                <b:row>
                    <b:column span="6">
                        <p:chart id="totalportienda" widgetVar="chartTotal"
                                 type="pie" model="#{dashboardIndexController.pieModelSolicitud}"  />
                    </b:column>
                </b:row>
            </b:panel>

            <b:panel collapsible="false" rendered="#{p:ifAnyGranted('ADMINISTRADOR, SECRETARIA')}">
                <f:facet name="heading">
                    <i class="fa fa-car" style="padding-right:20px" />
                    <h:outputText value="#{msg['title.vehiculos']}" />
                    <b:badge rendered="#{dashboardIndexController.totalVehiculosEnReparacion > 0}" style="margin-left:10px; background-color:#5cb85c" value="#{msg['label.enreparacion']}"  />

                </f:facet>



                <b:row>

                    <b:column span="2">
                        <h5><p:outputLabel value="#{msg['label.vehiculostotales']}"/></h5>
                        <div class="knob-container  ui-corner-all">
                            <p:knob value="#{dashboardIndexController.totalVehiculos}" max="#{dashboardIndexController.totalVehiculos}"
                                    disabled="true"
                                    height="70" width="70"
                                    foregroundColor="black" backgroundColor="#00000"
                                    />
                        </div>
                    </b:column>
                    <b:column span="2">
                        <h5><p:outputLabel value="#{msg['label.vehiculosactivostotales']}"/></h5>
                        <div class="knob-container  ui-corner-all">
                            <p:knob value="#{dashboardIndexController.totalVehiculosActivos}" max="#{dashboardIndexController.totalVehiculosActivos}"
                                    disabled="true"
                                    height="70" width="70"
                                    foregroundColor="blue" backgroundColor="#00000"
                                    />
                        </div>
                    </b:column>
                    <b:column span="2">
                        <h5><p:outputLabel value="#{msg['label.vehiculosinactivostotales']}"/></h5>
                        <div class="knob-container  ui-corner-all">
                            <p:knob value="#{dashboardIndexController.totalVehiculosInActivos}" max="#{dashboardIndexController.totalVehiculosInActivos}"
                                    disabled="true"
                                    height="70" width="70"
                                    foregroundColor="brown" backgroundColor="#00000"
                                    />
                        </div>
                    </b:column>
                    <b:column span="2">
                        <h5><p:outputLabel value="#{msg['label.vehiculosenreparaciontotales']}"/></h5>
                        <div class="knob-container  ui-corner-all">
                            <p:knob value="#{dashboardIndexController.totalVehiculosEnReparacion}" max="#{dashboardIndexController.totalVehiculosEnReparacion}"
                                    disabled="true"
                                    height="70" width="70"
                                    foregroundColor="red" backgroundColor="#00000"
                                    />
                        </div>
                    </b:column>
                    <b:column span="4">


                    </b:column>
                </b:row>
            </b:panel>
        </b:form>

        <jmoordbjsf:denegado renderedcondition="#{!loginController.loggedIn}" />
        <br/><br/><br/>
    </ui:define>
</ui:composition>

```
