135 lines
7.4 KiB
HTML
135 lines
7.4 KiB
HTML
<!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:ui="http://xmlns.jcp.org/jsf/facelets">
|
|
<f:view>
|
|
<h:head>
|
|
<title>Edit Projects - My Portfolio</title>
|
|
<h:outputStylesheet library="css" name="styles.css"/>
|
|
</h:head>
|
|
<h:body>
|
|
<ui:include src="header.xhtml"/>
|
|
<main>
|
|
<!-- <h:form id="form" styleClass="project-form">-->
|
|
<h:form id="form">
|
|
<section id="project-list">
|
|
<h1>Select Project to Edit</h1>
|
|
<ui:repeat value="#{projectBean.projects}" var="project">
|
|
<h:commandButton value="#{project.title}" action="#{projectBean.setProject(project)}"
|
|
styleClass="project-button">
|
|
<f:setPropertyActionListener target="#{projectBean.project}" value="#{project}"/>
|
|
<f:ajax render="project-form form"/>
|
|
</h:commandButton>
|
|
</ui:repeat>
|
|
</section>
|
|
</h:form>
|
|
<h:form id="project-form" styleClass="project-form">
|
|
<section id="edit-project">
|
|
<h2>Edit Project</h2>
|
|
<div class="form-group">
|
|
<h:outputLabel for="title" value="Title:"/>
|
|
<h:inputText id="title" value="#{projectBean.project.title}" required="true"
|
|
requiredMessage="Title is required">
|
|
<f:validateRequired/>
|
|
</h:inputText>
|
|
<h:message for="title" style="color:red"/>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<h:outputLabel for="summary" value="Summary:"/>
|
|
<h:inputText id="summary" value="#{projectBean.project.summary}" required="true"
|
|
requiredMessage="Summary is required">
|
|
<f:validateRequired/>
|
|
</h:inputText>
|
|
<h:message for="summary" style="color:red"/>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<h:outputLabel for="description" value="Description:"/>
|
|
<h:inputTextarea id="description" value="#{projectBean.project.description}" required="true"
|
|
requiredMessage="Description is required">
|
|
<f:validateRequired/>
|
|
</h:inputTextarea>
|
|
<h:message for="description" style="color:red"/>
|
|
</div>
|
|
|
|
<div class="form-group-container">
|
|
<h:form id="keywords-form">
|
|
<div class="form-group form-group-keywords">
|
|
<h:outputLabel for="keywords"
|
|
value="Keywords: (Hold Ctrl and click for multi-select.)"/>
|
|
<h:selectManyListbox id="keywords" value="#{projectBean.selectedKeywords}"
|
|
styleClass="keywords-listbox">
|
|
<f:selectItems value="#{projectBean.allProjectsKeywords}" var="keyword"
|
|
itemLabel="#{keyword}" itemValue="#{keyword}"/>
|
|
</h:selectManyListbox>
|
|
<h:message for="keywords" style="color:red"/>
|
|
|
|
<!-- 新增的关键词输入框和按钮 -->
|
|
<h:panelGrid columns="2">
|
|
<h:outputLabel for="newKeyword" value="add a keyword"/>
|
|
<h:inputText id="newKeyword" value="#{projectBean.newKeyword}"/>
|
|
<h:commandButton value="Add" action="#{projectBean.addKeyword}">
|
|
<f:ajax execute="newKeyword" render="keywords @keywords-form"/>
|
|
</h:commandButton>
|
|
</h:panelGrid>
|
|
</div>
|
|
</h:form>
|
|
|
|
<div class="form-group form-group-right">
|
|
<div class="form-group">
|
|
<h:outputLabel for="type" value="Type:"/>
|
|
<h:inputText id="type" value="#{projectBean.project.type}" required="true"
|
|
requiredMessage="Type is required">
|
|
<f:validateRequired/>
|
|
</h:inputText>
|
|
<h:message for="type" style="color:red"/>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<h:outputLabel for="collaborators" value="Collaborators:"/>
|
|
<h:inputText id="collaborators" value="#{projectBean.projectCollaborators}"
|
|
required="true"
|
|
requiredMessage="Collaborators are required">
|
|
<f:validateRegex pattern="^([^,]+(, )?)*$"/>
|
|
</h:inputText>
|
|
<h:message for="collaborators" style="color:red"/>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<h:outputLabel for="link" value="Link:"/>
|
|
<h:inputText id="link" value="#{projectBean.project.link}" required="true"
|
|
requiredMessage="Link is required"
|
|
validatorMessage="Link must start with http:// or https://">
|
|
<f:validateRegex pattern="https?://.+"/>
|
|
</h:inputText>
|
|
<h:message for="link" style="color:red"/>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<h:outputLabel for="time" value="Time:"/>
|
|
<h:inputText id="time" value="#{projectBean.project.time}" required="true"
|
|
requiredMessage="Time is required"
|
|
validatorMessage="Time must include a date in yyyy-mm or mm-yyyy format">
|
|
<f:validateRegex pattern=".*(\d{4}-\d{2}|\d{2}-\d{4}).*"/>
|
|
</h:inputText>
|
|
<h:message for="time" style="color:red"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<h:message for="saveButton" id="saveMessage"/>
|
|
<h:commandButton id="saveButton" value="Save" action="#{projectBean.saveProject}">
|
|
<f:ajax execute="@form" render="@form"/>
|
|
</h:commandButton>
|
|
</div>
|
|
</section>
|
|
</h:form>
|
|
<ui:include src="footer.xhtml"/>
|
|
</main>
|
|
</h:body>
|
|
</f:view>
|
|
</html>
|