RyanGoodwill/web_assignment
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feature:首页个人信息修改

Browse Source
This commit is contained in:
高子兴 2024-07-14 16:58:16 +08:00
parent 78b6b31392
commit 5c2ae6902e
2 changed files with 142 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
src/main/webapp/index.xhtml
View File

@ -8,13 +8,30 @@
<h:head>
<title>User Information - My Portfolio</title>
<h:outputStylesheet library="css" name="styles.css"/>
<script type="text/javascript">
let editMode = false;
function toggleEditMode() {
editMode = !editMode;
document.getElementById('userInfoForm:displayState').style.display = editMode ? 'none' : 'block';
document.getElementById('userInfoForm:editState').style.display = editMode ? 'block' : 'none';
}
function cancelEdit() {
editMode = false;
document.getElementById('userInfoForm:displayState').style.display = 'block';
document.getElementById('userInfoForm:editState').style.display = 'none';
}
</script>
</h:head>
<h:body>
<ui:include src="header.xhtml"/>
<main>
<h:form id="userInfoForm">
<h:form id="userInfoForm" rendered="#{projectBean.isLoggedIn}">
<h:panelGroup id="displayState" style="display: block;">
<section id="user-info">
<!-- <h1>User Information</h1>-->
<!-- <h1>User Information</h1>-->
<h2>
<h:outputText value="#{projectBean.userInfo.name}"/>
</h2>
@ -48,7 +65,54 @@
<h:outputText value="#{projectBean.userInfo.careerGoals}"/>
</p>
</div>
<h:commandButton value="Edit" onclick="toggleEditMode();" styleClass="edit-button"
type="button"/>
</section>
</h:panelGroup>
<h:panelGroup id="editState" style="display: none;">
<section id="user-info-edit">
<h2>
Name:
<h:inputText value="#{projectBean.userInfo.name}"/>
</h2>
<div class="form-group">
<p>
<strong>Introduction:</strong>
<h:inputTextarea value="#{projectBean.userInfo.introduction}"/>
</p>
</div>
<div class="form-group">
<p>
<strong>Interests:</strong>
<h:inputTextarea value="#{projectBean.userInfo.interests}"/>
</p>
</div>
<div class="form-group">
<p>
<strong>Experiences:</strong>
<h:inputTextarea value="#{projectBean.userInfo.experiences}"/>
</p>
</div>
<div class="form-group">
<p>
<strong>Skills:</strong>
<h:inputTextarea value="#{projectBean.userInfo.skills}"/>
</p>
</div>
<div class="form-group">
<p>
<strong>Career Goals:</strong>
<h:inputTextarea value="#{projectBean.userInfo.careerGoals}"/>
</p>
</div>
<h:commandButton value="Save" action="#{projectBean.updateUserInfo}" onclick="toggleEditMode();"
styleClass="saveButton"/>
<h:commandButton value="Cancel" onclick="cancelEdit();" immediate="true"
styleClass="cancel-button" type="button"/>
</section>
</h:panelGroup>
</h:form>
<p>Click <h:link value="here" outcome="project"/> to go to the project page</p>
</main>

44
src/main/webapp/resources/css/styles.css
View File

@ -201,7 +201,7 @@ footer {
}
/* 通用样式 */
.project-form {
.project-form, #user-info-edit {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
padding: 20px;
@ -211,7 +211,7 @@ footer {
margin: 20px auto;
}
.project-form h2 {
.project-form h2, #user-info-edit h2 {
text-align: center;
color: #333;
margin-bottom: 20px;
@ -284,7 +284,7 @@ footer {
}
/* 保存按钮样式 */
#saveButton {
#saveButton,.saveButton {
background-color: #007bff;
color: white;
border: none;
@ -322,3 +322,41 @@ footer {
text-align: justify; /* 文本对齐 */
color: #555; /* 文字颜色 */
}
.edit-button {
background-color: #4CAF50; /* 绿色背景 */
color: white; /* 白色文字 */
border: none; /* 无边框 */
padding: 10px 20px; /* 内边距 */
text-align: center; /* 文字居中 */
text-decoration: none; /* 无下划线 */
display: inline-block; /* 行内块 */
font-size: 16px; /* 字体大小 */
margin: 4px 2px; /* 外边距 */
cursor: pointer; /* 鼠标指针 */
border-radius: 4px; /* 圆角 */
transition: background-color 0.3s; /* 背景色过渡效果 */
}
.edit-button:hover {
background-color: #45a049; /* 悬停时背景颜色 */
}
.cancel-button {
background-color: #ffffff; /* 红色背景 */
color: #000000; /* 黑色文字 */
border: none; /* 无边框 */
padding: 10px 20px; /* 内边距 */
text-align: center; /* 文字居中 */
text-decoration: none; /* 无下划线 */
display: inline-block; /* 行内块 */
font-size: 16px; /* 字体大小 */
margin: 4px 2px; /* 外边距 */
cursor: pointer; /* 鼠标指针 */
border-radius: 4px; /* 圆角 */
transition: background-color 0.3s; /* 背景色过渡效果 */
}
.cancel-button:hover {
background-color: #d2d2d2; /* 悬停时背景颜色 */
}