103 lines
4.9 KiB
HTML
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>
|