Skip to content

Instantly share code, notes, and snippets.

@SrdjanCoric
Created May 18, 2018 09:48
Show Gist options
  • Save SrdjanCoric/1cd31788350dba501ad90f94945fd80f to your computer and use it in GitHub Desktop.
Save SrdjanCoric/1cd31788350dba501ad90f94945fd80f to your computer and use it in GitHub Desktop.
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html 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">
<h:head>
<title>Ticket Service</title>
<link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,700" rel="stylesheet" />
<h:outputStylesheet library="css" name="style.css" />
<f:metadata>
<f:viewAction action="#{cityController.takeAllCities()}"></f:viewAction>
<!-- <f:viewAction action="#{userController.searchUser()}"></f:viewAction>-->
</f:metadata>
</h:head>
<h:body class="body">
<div class="header-wrapper">
<b:container class="header-container">
<b:row>
<p:growl id="messages" globalOnly="true" showDetail="false" autoUpdate="true" life="2000" />
<b:column tiny-screen="12" small-screen="8">
<h1>Ticketing Service</h1>
</b:column>
<b:column tiny-screen="12" small-screen="4" class="logged-in">
<span class="avatar"><h:graphicImage class="img" library="img" name="avatar.png" /></span>
<span id="operator-username">#{login.username}</span>
<span class="separator">|</span>
<h:form class="logout-form"><h:commandButton action="#{login.logout()}" id="logout" value="Log out"></h:commandButton></h:form>
</b:column>
</b:row>
<b:row>
<b:column class="nav" tiny-screen="12" small-screen="12">
<b:dropButton look="primary" class="nav-btn" value="Users">
<!-- OVO JE NAV LINK -->
<b:navCommandLink style="font-weight: 700;" class="nav-link" value="Create User" onclick ="PF('createDialog').show();" />
<b:navCommandLink style="font-weight: 700;" class="nav-link" value="Find User" onclick ="PF('searchDialog').show();" href="#" ></b:navCommandLink>
</b:dropButton>
<b:dropButton look="primary" class="nav-btn" value="Tickets">
<b:navLink style="font-weight: 700;" class="nav-link" value="My Tickets" href="#"></b:navLink>
<b:navLink style="font-weight: 700;" class="nav-link" value="Create Ticket" href="#"></b:navLink>
<b:navLink style="font-weight: 700;" class="nav-link" value="Find Ticket" href="#"></b:navLink>
</b:dropButton>
<b:dropButton look="primary" class="nav-btn" value="Groups">
<b:navLink style="font-weight: 700;" class="nav-link" value="Create Group" href="#"></b:navLink>
<b:navLink style="font-weight: 700;" class="nav-link" value="Find Group" href="#"></b:navLink>
<b:navLink style="font-weight: 700;" class="nav-link" value="Add Ticket to group" href="#"></b:navLink>
<b:navLink style="font-weight: 700;" class="nav-link" value="Delete Ticket" href="#"></b:navLink>
</b:dropButton>
<b:dropButton look="primary" class="nav-btn" value="Reports">
<b:navLink style="font-weight: 700;" class="nav-link" value="My reports" href="#"></b:navLink>
</b:dropButton>
</b:column>
<p:dialog style="dialog" dynamic="true" closable="false" header="Create user" id="createDialog" widgetVar="createDialog" position="center center top left">
<h:form id="create-form">
<h:panelGrid columns="2">
<p:outputLabel style="margin: .5rem;" value="First name"></p:outputLabel>
<p:inputText style="margin: .5rem;" value="#{userController.firstName}" id="firstName" validatorMessage="First Name needs to be at least three characters long" required="true" requiredMessage="First Name is required">
<f:validateLength minimum="3" />
</p:inputText>
<p:outputLabel style="margin: .5rem;" value="Last name"></p:outputLabel>
<p:inputText style="margin: .5rem;" value="#{userController.lastName}" id="lastName" validatorMessage="Last Name needs to be at least three characters long" required="true" requiredMessage="Last Name is required">
<f:validateLength minimum="3" />
</p:inputText>
<p:outputLabel style="margin: .5rem;" value="Phone number"></p:outputLabel>
<p:inputText style="margin: .5rem;" value="#{userController.phoneNumber}" id="phoneNumber" validatorMessage="Please enter valid phone number" required="true" requiredMessage="Phone Number is required">
<f:validateRegex pattern="^[+]?[0-9]+$" />
<f:validateLength minimum="6" />
</p:inputText>
<p:outputLabel style="margin: .5rem;" value="Email"></p:outputLabel>
<p:inputText style="margin: .5rem;" value="#{userController.email}" id="email" required="true" validatorMessage="Please enter valid email" requiredMessage="Email is required">
<f:validateRegex pattern="^[_A-Za-z0-9-\+]+(\.[_A-Za-z0-9-]+)*@[\p{L}\p{M}\p{N}.-]*(\.[\p{L}\p{M}]{2,})$" />
</p:inputText>
<p:outputLabel style="margin: .5rem;" value="Address"></p:outputLabel>
<p:inputText style="margin: .5rem;" value="#{userController.address}" id="address" validatorMessage="Please enter valid address" required="true" requiredMessage="Address is required">
<f:validateLength minimum="5" />
</p:inputText>
<p:outputLabel style="margin: .5rem;" value="City"></p:outputLabel>
<p:selectOneMenu style="margin: .5rem;" value="#{userController.idCity}" >
<f:selectItems value="#{cityController.allCities}" var="city" itemValue="#{city.idCity}" itemLabel="#{city.name}" />
</p:selectOneMenu>
<p:commandButton style="margin: .5rem;" value="Create" update=":create-form" action="#{userController.insertUser}" />
<p:commandButton style="margin: .5rem;" value="Cancel" immediate="true" onclick="createDialog.hide()">
<p:resetInput target=":createDialog" />
</p:commandButton>
</h:panelGrid>
<p:message for="firstName" />
<p:message for="lastName" />
<p:message for="phoneNumber" />
<p:message for="email" />
<p:message for="address" />
</h:form>
</p:dialog>
<p:dialog style="dialog" dynamic="true" closable="false" header="Find user" id="searchDialog" widgetVar="searchDialog" position="center center top left">
<h:form id="searchForm">
<h:panelGrid id="searchUserPanelGrid" columns="2">
<p:outputLabel style="margin: .5rem;" value="User ID:" /><p:inputText style="margin: .5rem;" value="#{userController.id}" />
<p:outputLabel style="margin: .5rem;" value="First name:" /><p:inputText style="margin: .5rem;" value="#{userController.firstName}" />
<p:outputLabel style="margin: .5rem;" value="Last name:" /><p:inputText style="margin: .5rem;" value="#{userController.lastName}" />
<p:outputLabel style="margin: .5rem;" value="E-mail:" /><p:inputText style="margin: .5rem;" value="#{userController.email}" />
<p:outputLabel style="margin: .5rem;" value="City:" />
<p:selectOneMenu style="margin: .5rem;" value="#{userController.idCity}">
<f:selectItems value="#{cityController.allCities}" var="city" itemValue="#{city.idCity}" itemLabel="#{city.name}" />
</p:selectOneMenu>
</h:panelGrid>
<p:commandButton style="margin: .5rem;" value="Search" ajax="false" update=":searchForm" action="#{userController.searchUser}" />
<p:commandButton style="margin: .5rem;" type="reset" value="Reset" />
<p:commandButton style="margin: .5rem;" value="Cancel" immediate="true" onclick="createDialog.hide()">
<p:resetInput target=":searchDialog" />
</p:commandButton>
</h:form>
</p:dialog>
</b:row>
</b:container>
</div>
<div id="output">
</div>
<b:container>
<b:row>
<h:form id="form-table" style="margin-top: 5rem;">
<b:dataTable id="searchTable" value="#{userController.allUsers}" style="width: 100%;" responsive="true" var="user" excel="true" searching="false" csv="true" pdf="true" columnVisibility="true" copy="true" print="true">
<f:facet name="header">
<tr>
<th>User ID</th>
<th>First name</th>
<th>Last name</th>
<th>Phone number</th>
<th>E-mail</th>
<th>Address</th>
<th>City</th>
<th>Tickets</th>
<th>Actions</th>
</tr>
</f:facet>
<b:dataTableColumn value="#{user.id}"></b:dataTableColumn>
<b:dataTableColumn value="#{user.firstName}"></b:dataTableColumn>
<b:dataTableColumn value="#{user.lastName}"></b:dataTableColumn>
<b:dataTableColumn value="#{user.phoneNumber}"></b:dataTableColumn>
<b:dataTableColumn value="#{user.email}"></b:dataTableColumn>
<b:dataTableColumn value="#{user.address}"></b:dataTableColumn>
<b:dataTableColumn value="#{userController.takeCityNameById(user.idCity)}"></b:dataTableColumn>
<b:dataTableColumn>
<p:commandLink style="margin: 0 15px;">
<h:graphicImage style="width: 20px; height: 20px;" library="img" name="addTicket.png" />
</p:commandLink>
<h:commandLink>
<h:graphicImage style="width: 20px; height: 20px;" library="img" name="viewTicket.png" />
</h:commandLink>
</b:dataTableColumn>
<b:dataTableColumn>
<p:commandLink style="margin: 0 15px;">
<h:graphicImage style="width:20px; height: 20px;" library="img" name="update.png"/>
<p:ajax update=":form-table:updateDialog" listener="#{userController.saveUser(user)}" oncomplete="PF('updateDialog').show();"></p:ajax>
</p:commandLink>
<h:commandLink class="delete" onclick="if (!confirm('Delete user?'))
return false" action="#{userController.deleteUser(user.id)}" >
<f:ajax render="form-table" />
<h:graphicImage style="width: 20px; height: 20px;" library="img" name="delete.png" />
</h:commandLink>
</b:dataTableColumn>
</b:dataTable>
<p:dialog style="dialog" dynamic="true" closable="false" header="Update user" id="updateDialog" widgetVar="updateDialog" position="center center top left">
<h:panelGrid columns="2">
<h:outputText style="margin:5px" value="First name"></h:outputText>
<p:inputText style="margin:5px" value="#{userController.firstName}"></p:inputText>
<h:outputText style="margin:5px" value="Last name"></h:outputText>
<p:inputText style="margin:5px" value="#{userController.lastName}"></p:inputText>
<h:outputText style="margin:5px" value="Phone number"></h:outputText>
<p:inputText style="margin:5px" value="#{userController.phoneNumber}"></p:inputText>
<h:outputText style="margin:5px" value="Email"></h:outputText>
<p:inputText style="margin:5px" value="#{userController.email}"></p:inputText>
<h:outputText style="margin:5px" value="Address"></h:outputText>
<p:inputText style="margin:5px" value="#{userController.address}"></p:inputText>
<h:outputText style="margin:5px" value="City"></h:outputText>
<p:selectOneMenu style="margin:5px" value="#{userController.idCity}">
<f:selectItems value="#{cityController.allCities}" var="city" itemValue="#{city.idCity}" itemLabel="#{city.name}" />
</p:selectOneMenu>
<p:commandButton class="btn btn-warning" value="Update" actionListener="#{userController.updateUser()}" update=":form-table">
</p:commandButton>
<p:commandButton class="btn btn-warning" value="Cancel" oncomplete="PF('updateDialog').hide();" actionListener="#{userController.clear()}" update=":form-table">
</p:commandButton>
</h:panelGrid>
</p:dialog>
</h:form>
</b:row>
</b:container>
</h:body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment