* Tema por defecto nova-light

* Interfaz de usuario con Grid-css para pantalla de registro.
This commit is contained in:
mgarcianun committed 2019-11-28 23:55:43 +01:00
1 parent c460c6125c
commit a6b0358e36
7 files changed
+128 -102

No files matched your search

+1 -1
View File
@@ -4,7 +4,7 @@
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<f:metadata>
<f:viewParam name="refresh" value="#{specs.refresh}" />
<f:viewParam name="refresh" value="#{home.refresh}" />
</f:metadata>
<ui:composition template="./header.xhtml">
@@ -5,83 +5,89 @@
xmlns:p="http://primefaces.org/ui">
<ui:composition template="../header.xhtml">
<h:outputScript>
function handleRequest(xhr, status, args) {
if(args.specs) {
PF('caps').hide();
$('#caps').fadeOut();
PF('especialidades').show()
$('#especialidades').fadeIn();
}
else if (args.caps) {
PF('especialidades').hide();
$('#especialidades').fadeOut();
PF('caps').show()
$('#caps').fadeIn();
}
}
</h:outputScript>
<ui:define name="content">
<h:outputScript>
function handleRequest(xhr, status, args) {
if(args.specs) {
PF('panCentros').hide();
$('#panCentros').fadeOut();
PF('panEspecialidad').show()
$('#panEspecialidad').fadeIn();
}
else if (args.caps) {
PF('panEspecialidad').hide();
$('#panEspecialidad').fadeOut();
PF('panCentros').show()
$('#panCentros').fadeIn();
}
}
</h:outputScript>
<h:form>
<p:messages id="mesgs" showDetail="true" closable="true" autoupdate="true" />
<p:panel id="tipoUsuario" header="Especifique el tipo de usuario que desea registrarse">
<h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5">
<p:selectOneRadio id="usertype" value="#{registerUser.userType}" unselectable="true" required="true" requiredMessage="Debe especificar un tipo de usuario">
<p:ajax listener="#{registerUser.onUserTypeChange}" update="medicalSpecialty" oncomplete="handleRequest(xhr, status, args)" />
<p:selectOneButton id="selUsertype" value="#{registerUser.userType}" required="true" requiredMessage="Debe especificar un tipo de usuario">
<f:selectItems value="#{registerUser.userTypes}" />
</p:selectOneRadio>
<p:ajax listener="#{registerUser.onUserTypeChange}" update="medicalSpecialty" oncomplete="handleRequest(xhr, status, args)" />
</p:selectOneButton>
</h:panelGrid>
</p:panel>
<p:panel id="RegisterUser" header="Registrarse en el sistema como paciente">
<h:panelGrid columns="3">
<p:outputLabel value="NIF:" for="nif" />
<p:inputText id="nif" value="#{registerUser.nif}" required="true" requiredMessage="Por favor, indque su NIF" />
<p:message for="nif" display="text" />
<p:panel id="RegisterUser" header="Datos personales para el usuario">
<div class="ui-fluid">
<h:panelGrid columns="3" layout="grid" columnClasses="p-col-12 p-md-3 p-xl-2, p-col-12 p-md-9 p-xl-4, p-col-12 p-md-3 p-xl-2, p-col-12 p-md-9 p-xl-4"
contentStyleClass="ui-fluid">
<p:outputLabel value="NIF:" for="nif" />
<p:inputText id="nif" value="#{registerUser.nif}" required="true" requiredMessage="Por favor, indque su NIF" />
<p:message for="nif" display="text" />
<p:outputLabel value="Especialidad médica:" for="medicalSpecialty" />
<p:selectOneMenu id="medicalSpecialty" value="#{registerUser.medicalSpecialty}" style="width:350px">
<f:selectItem itemLabel="Seleccione una especialidad médica..." itemValue="" noSelectionOption="true" />
<f:selectItems value="#{registerUser.medicalSpecialties}" var="c" itemDescription="#{c.description}" itemValue="#{c.name}" />
</p:selectOneMenu>
<p:message for="medicalSpecialty" />
<p:outputLabel value="Nombre:" for="name" />
<p:inputText id="name" value="#{registerUser.name}" required="true" requiredMessage="Por favor, indique su nombre" />
<p:message for="name" />
<p:outputLabel value="Centro:" for="primaryHealthCareCenter" />
<p:selectOneMenu id="primaryHealthCareCenter" value="#{registerUser.medicalSpecialty}" style="width:350px">
<f:selectItem itemLabel="Seleccione una centro..." itemValue="" noSelectionOption="true" />
<f:selectItems value="#{registerUser.medicalSpecialties}" var="c" itemDescription="#{c.description}" itemValue="#{c.name}" />
</p:selectOneMenu>
<p:message for="primaryHealthCareCenter" />
<p:outputLabel value="Apellidos:" for="surname" />
<p:inputText id="surname" value="#{registerUser.surname}" required="true" requiredMessage="Por favor, indique sus apellidos" />
<p:message for="surname" />
<p:outputLabel value="Especialidad médica:" for="medicalSpecialty" />
<p:selectOneMenu id="medicalSpecialty" value="#{registerUser.medicalSpecialty}" style="width:350px">
<f:selectItem itemLabel="Seleccione una especialidad médica..." itemValue="" noSelectionOption="true" />
<f:selectItems value="#{registerUser.medicalSpecialties}" var="c.TO" itemDescription="#{c.description}" itemValue="#{c.name}" />
</p:selectOneMenu>
<p:outputLabel value="Nombre:" for="name" />
<p:inputText id="name" value="#{registerUser.name}" required="true" requiredMessage="Por favor, indique su nombre" />
<p:message for="name" />
<p:message for="medicalSpecialty" />
<p:outputLabel value="Centro:" for="primaryHealthCareCenter" />
<p:selectOneMenu id="primaryHealthCareCenter" value="#{registerUser.medicalSpecialty}" style="width:350px">
<f:selectItem itemLabel="Seleccione un centro de antención primario..." itemValue="" noSelectionOption="true" />
<f:selectItems value="#{registerUser.medicalSpecialties}" var="c" itemDescription="#{c.description}" itemValue="#{c.name}" />
</p:selectOneMenu>
<p:message for="primaryHealthCareCenter" />
<p:outputLabel value="Apellidos:" for="surname" />
<p:inputText id="surname" value="#{registerUser.surname}" required="true" requiredMessage="Por favor, indique sus apellidos" />
<p:message for="surname" />
<p:outputLabel value="Correo electrónico:" for="email" />
<p:inputText id="email" value="#{registerUser.email}" required="true" requiredMessage="Por favor, especifique su correo electrónico" />
<p:message for="email" />
<p:outputLabel value="Contraseña" for="password" />
<p:password id="password" value="#{registerUser.password}" match="passwordRepeat" required="true" requiredMessage="Por favor, especifique una contraseña" maxlength="50"
feedback="true" promptLabel="Especifique una contraseña segura" weakLabel="La contraseña es débil" goodLabel="La contraseña es buena" strongLabel="La contraseña es segura"
validatorMessage="La contraseña y su verificación deben ser iguales" />
<p:message for="password" />
<p:outputLabel value="Verificación de contraseña:" for="passwordRepeat" />
<p:password id="passwordRepeat" value="#{registerUser.password}" required="true" requiredMessage="Por favor, escriba la verificación de su contraseña" maxlength="50" />
<p:message for="passwordRepeat" />
<p:outputLabel value="Correo electrónico:" for="email" />
<p:inputText id="email" value="#{registerUser.email}" required="true" requiredMessage="Por favor, especifique su correo electrónico" />
<p:message for="email" />
<p:outputLabel value="Contraseña" for="password" />
<p:password id="password" value="#{registerUser.password}" match="passwordRepeat" required="true" requiredMessage="Por favor, especifique una contraseña" maxlength="50"
feedback="true" promptLabel="Especifique una contraseña segura" weakLabel="La contraseña es débil" goodLabel="La contraseña es buena" strongLabel="La contraseña es segura"
validatorMessage="La contraseña y su verificación deben ser iguales" />
<p:message for="password" />
<p:outputLabel value="Verificación de contraseña:" for="passwordRepeat" />
<p:password id="passwordRepeat" value="#{registerUser.password}" required="true" requiredMessage="Por favor, escriba la verificación de su contraseña" maxlength="50" />
<p:message for="passwordRepeat" />
</h:panelGrid>
<h:panelGroup>
<h:panelGrid columns="3">
<p:commandButton validateClient="true" value="Registrarse" update="mesgs" action="#{registerUser.addNewUser}" icon="pi pi-check" />
<p:commandButton value="Volver" outcome="home" />
</h:panelGrid>
</h:panelGroup>
<h:panelGrid columns="3" layout="grid" columnClasses="p-col-12 p-md-3 p-xl-2, p-col-12 p-md-9 p-xl-4, p-col-12 p-md-3 p-xl-2, p-col-12 p-md-9 p-xl-4">
<p:commandButton type="button" validateClient="true" value="Registrarse" update="mesgs" action="#{registerUser.addNewUser}" icon="pi pi-check" />
<p:commandButton type="button" value="Volver" outcome="home" />
</h:panelGrid>
</div>
</p:panel>
</h:form>
</ui:define>
@@ -0,0 +1 @@
@charset "UTF-8";@import url("/showcase/javax.faces.resource/primeicons/primeicons.css.xhtml?ln=primefaces&v=8.0-SNAPSHOT");:root{--input-border-color:#a6a6a6;--input-hover-border-color:#212121;--input-focus-border-color:#007ad9}@font-face{font-family:'Open Sans';font-style:normal;font-weight:300;src:url("/showcase/javax.faces.resource/fonts/open-sans-v13-latin-300.eot.xhtml?ln=primefaces&v=8.0-SNAPSHOT");src:local("Open Sans Light"),local("OpenSans-Light"),url("/showcase/javax.faces.resource/fonts/open-sans-v13-latin-300.eot.xhtml?ln=primefaces&v=8.0-SNAPSHOT#iefix") format("embedded-opentype"),url("/showcase/javax.faces.resource/fonts/open-sans-v13-latin-300.woff2.xhtml?ln=primefaces&v=8.0-SNAPSHOT") format("woff2"),url("/showcase/javax.faces.resource/fonts/open-sans-v13-latin-300.woff.xhtml?ln=primefaces&v=8.0-SNAPSHOT") format("woff"),url("/showcase/javax.faces.resource/fonts/open-sans-v13-latin-300.ttf.xhtml?ln=primefaces&v=8.0-SNAPSHOT") format("truetype"),url("/showcase/javax.faces.resource/fonts/open-sans-v13-latin-300.svg.xhtml?ln=primefaces&v=8.0-SNAPSHOT#OpenSans") format("svg")}@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;src:url("/showcase/javax.faces.resource/fonts/open-sans-v13-latin-regular.eot.xhtml?ln=primefaces&v=8.0-SNAPSHOT");src:local("Open Sans"),local("OpenSans"),url("/showcase/javax.faces.resource/fonts/open-sans-v13-latin-regular.eot.xhtml?ln=primefaces&v=8.0-SNAPSHOT#iefix") format("embedded-opentype"),url("/showcase/javax.faces.resource/fonts/open-sans-v13-latin-regular.woff2.xhtml?ln=primefaces&v=8.0-SNAPSHOT") format("woff2"),url("/showcase/javax.faces.resource/fonts/open-sans-v13-latin-regular.woff.xhtml?ln=primefaces&v=8.0-SNAPSHOT") format("woff"),url("/showcase/javax.faces.resource/fonts/open-sans-v13-latin-regular.ttf.xhtml?ln=primefaces&v=8.0-SNAPSHOT") format("truetype"),url("/showcase/javax.faces.resource/fonts/open-sans-v13-latin-regular.svg.xhtml?ln=primefaces&v=8.0-SNAPSHOT#OpenSans") format("svg")}@font-face{font-family:'Open Sans';font-style:normal;font-weight:700;src:url("/showcase/javax.faces.resource/fonts/open-sans-v13-latin-700.eot.xhtml?ln=primefaces&v=8.0-SNAPSHOT");src:local("Open Sans Bold"),local("OpenSans-Bold"),url("/showcase/javax.faces.resource/fonts/open-sans-v13-latin-700.eot.xhtml?ln=primefaces&v=8.0-SNAPSHOT#iefix") format("embedded-opentype"),url("/showcase/javax.faces.resource/fonts/open-sans-v13-latin-700.woff2.xhtml?ln=primefaces&v=8.0-SNAPSHOT") format("woff2"),url("/showcase/javax.faces.resource/fonts/open-sans-v13-latin-700.woff.xhtml?ln=primefaces&v=8.0-SNAPSHOT") format("woff"),url("/showcase/javax.faces.resource/fonts/open-sans-v13-latin-700.ttf.xhtml?ln=primefaces&v=8.0-SNAPSHOT") format("truetype"),url("/showcase/javax.faces.resource/fonts/open-sans-v13-latin-700.svg.xhtml?ln=primefaces&v=8.0-SNAPSHOT#OpenSans") format("svg")}*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}body .ui-widget,body .ui-widget .ui-widget{text-decoration:none}body .ui-widget:not(.pi),body .ui-widget .ui-widget:not(.pi){font-family:"Open Sans","Helvetica Neue",sans-serif;font-size:14px}body .ui-icon{height:1em;width:1em;font-size:1.25em;display:inline-block;vertical-align:middle;margin:0;margin-top:0;position:static;text-indent:0;overflow:visible;background-repeat:no-repeat}body .pi{font-size:1.25em}body .ui-corner-all{-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}body .ui-corner-top{-moz-border-radius-topleft:3px;-webkit-border-top-left-radius:3px;border-top-left-radius:3px;-moz-border-radius-topright:3px;-webkit-border-top-right-radius:3px;border-top-right-radius:3px}body .ui-corner-bottom{-moz-border-radius-bottomleft:3px;-webkit-border-bottom-left-radius:3px;border-bottom-left-radius:3px;-moz-border-radius-bottomright:3px;-webkit-border-bottom-right-radius:3px;border-bottom-right-radius:3px}body .ui-corner-left{-moz-border-radius-topleft:3px;-webkit-border-top-left-radius:3px;border-top-left-radius:3px;-moz-border-radius-bottomleft:3px;-webkit-border-bottom-left-radius:3px;border-bottom-left-radius:3px}body .ui-corner-right{-moz-border-radius-topright:3px;-webkit-border-top-right-radius:3px;border-top-right-radius:3px;-moz-border-radius-bottomright:3px;-webkit-border-bottom-right-radius:3px;border-bottom-right-radius:3px}body .ui-widget-overlay{background-color:rgba(0,0,0,0.4)}body a{color:#007ad9;text-decoration:none}body a:hover{color:#116fbf}body a:active{color:#005b9f}body .ui-helper-reset{line-height:normal}body .ui-state-disabled{opacity:.5;filter:alpha(opacity=50)}body ::-webkit-input-placeholder{color:#666}body :-moz-placeholder{color:#666}body ::-moz-placeholder{color:#666}body :-ms-input-placeholder{color:#666}body .ui-inputfield{color:#333;font-size:14px;background:#fff;padding:.429em;border:1px solid #a6a6a6;outline:0 none;-moz-transition:border-color .3s;-o-transition:border-color .3s;-webkit-transition:border-color .3s;transition:border-color .3s;-moz-border-radiusLine truncated