index.xhtml
Desde cualquier pagina debemos invocar el websocket, también podemos hacerla desde un método
<h:commandButton value="WebSocket" action="#{pushSocket.clockAction()}">
<f:ajax />
</h:commandButton>index.xhtml
<?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>
Last updated