web-3/target/web-3-1.0-SNAPSHOT/main.xhtml
2024-11-26 02:32:07 +03:00

103 lines
4.9 KiB
HTML

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<ui:composition template="/templates/base.xhtml">
<ui:define name="content">
<h:form id="mainForm">
<p:remoteCommand name="plotPoint"
action="#{pointBean.addPoint}"
update="mainForm"
oncomplete="handleAjaxComplete()"/>
<div class="main-container">
<div class="input-section">
<div class="graph-and-inputs">
<div class="graph-container">
<canvas id="graph" width="400" height="400"></canvas>
</div>
<div class="controls-container">
<div class="input-group">
<label>X:</label>
<div class="x-buttons">
<ui:repeat value="#{[-3,-2,-1,0,1,2,3,4,5]}" var="xValue">
<p:commandButton value="#{xValue}"
action="#{pointBean.addPoint}"
update="mainForm"
oncomplete="handleAjaxComplete()"
styleClass="x-button">
<f:setPropertyActionListener value="#{xValue}"
target="#{pointBean.x}"/>
</p:commandButton>
</ui:repeat>
</div>
</div>
<div class="input-group">
<label>Y:</label>
<p:inputText id="yInput" value="#{pointBean.y}" required="true"
validatorMessage="Y must be between -5 and 3">
<f:validateDoubleRange minimum="-5" maximum="3"/>
</p:inputText>
<p:message for="yInput"/>
</div>
<div class="input-group">
<label>R:</label>
<p:inputText id="rInput" value="#{pointBean.r}" required="true"
validatorMessage="R must be between 1 and 4">
<f:validateDoubleRange minimum="1" maximum="4"/>
<p:ajax event="change" oncomplete="handleAjaxComplete()"/>
</p:inputText>
<p:message for="rInput"/>
</div>
<h:inputHidden id="xHidden" value="#{pointBean.x}"/>
<h:inputHidden id="yHidden" value="#{pointBean.y}"/>
</div>
</div>
<div class="results-container">
<p:dataTable id="resultsTable" value="#{pointBean.points}" var="point"
styleClass="results-table">
<p:column headerText="X">
<h:outputText value="#{point.x}"/>
</p:column>
<p:column headerText="Y">
<h:outputText value="#{point.y}"/>
</p:column>
<p:column headerText="R">
<h:outputText value="#{point.r}"/>
</p:column>
<p:column headerText="Hit">
<h:outputText value="#{point.hit ? 'Yes' : 'No'}"/>
</p:column>
<p:column headerText="Time">
<h:outputText value="#{point.formattedTimestamp}"/>
</p:column>
<p:column headerText="Execution Time (ms)">
<h:outputText value="#{point.executionTime}"/>
</p:column>
</p:dataTable>
</div>
</div>
</div>
</h:form>
<div class="navigation">
<h:form>
<h:commandButton value="Назад" action="index?faces-redirect=true" styleClass="nav-button"/>
</h:form>
</div>
</ui:define>
<ui:define name="scripts">
<h:outputScript name="js/canvas.js"/>
</ui:define>
</ui:composition>
</html>