[ADD]:トップメニューから各画面へ遷移する処理を実装
This commit is contained in:
@@ -0,0 +1,14 @@
|
|||||||
|
package com.example.demo.controller;
|
||||||
|
|
||||||
|
import org.springframework.stereotype.Controller;
|
||||||
|
import org.springframework.web.bind.annotation.GetMapping;
|
||||||
|
|
||||||
|
@Controller
|
||||||
|
public class ApprovalReceiveController {
|
||||||
|
|
||||||
|
// 申請受信ボックスに遷移
|
||||||
|
@GetMapping("/approvalReceive")
|
||||||
|
public String approvalReceive() {
|
||||||
|
return "approvalReceive";
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
package com.example.demo.controller;
|
||||||
|
|
||||||
|
import org.springframework.stereotype.Controller;
|
||||||
|
import org.springframework.web.bind.annotation.GetMapping;
|
||||||
|
|
||||||
|
@Controller
|
||||||
|
public class BookApprovalController {
|
||||||
|
|
||||||
|
// 寄贈申請フォームに遷移
|
||||||
|
@GetMapping("/bookApproval")
|
||||||
|
public String bookApproval() {
|
||||||
|
return "bookApproval";
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
package com.example.demo.controller;
|
||||||
|
|
||||||
|
import org.springframework.stereotype.Controller;
|
||||||
|
import org.springframework.web.bind.annotation.GetMapping;
|
||||||
|
|
||||||
|
@Controller
|
||||||
|
public class BookController {
|
||||||
|
|
||||||
|
// 図書一覧に遷移
|
||||||
|
@GetMapping("/book")
|
||||||
|
public String book() {
|
||||||
|
return "book";
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
package com.example.demo.controller;
|
||||||
|
|
||||||
|
import org.springframework.stereotype.Controller;
|
||||||
|
import org.springframework.web.bind.annotation.GetMapping;
|
||||||
|
|
||||||
|
@Controller
|
||||||
|
public class BookInsertController {
|
||||||
|
|
||||||
|
// 寄贈申請フォームに遷移
|
||||||
|
@GetMapping("/bookInsert")
|
||||||
|
public String bookInsert() {
|
||||||
|
return "bookInsert";
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
package com.example.demo.controller;
|
||||||
|
|
||||||
|
import org.springframework.stereotype.Controller;
|
||||||
|
import org.springframework.web.bind.annotation.GetMapping;
|
||||||
|
|
||||||
|
@Controller
|
||||||
|
public class LendListController {
|
||||||
|
|
||||||
|
// 貸出中一覧に遷移
|
||||||
|
@GetMapping("/lendlist")
|
||||||
|
public String lendlist() {
|
||||||
|
return "lendlist";
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@@ -1,4 +1,4 @@
|
|||||||
package com.example.demo;
|
package com.example.demo.controller;
|
||||||
|
|
||||||
import org.springframework.stereotype.Controller;
|
import org.springframework.stereotype.Controller;
|
||||||
import org.springframework.web.bind.annotation.GetMapping;
|
import org.springframework.web.bind.annotation.GetMapping;
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
package com.example.demo.controller;
|
||||||
|
|
||||||
|
import org.springframework.stereotype.Controller;
|
||||||
|
import org.springframework.web.bind.annotation.GetMapping;
|
||||||
|
|
||||||
|
@Controller
|
||||||
|
public class LogoutController {
|
||||||
|
|
||||||
|
// ログアウト処理を実行
|
||||||
|
@GetMapping("/logout")
|
||||||
|
public String logout() {
|
||||||
|
return "login";
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@@ -0,0 +1,16 @@
|
|||||||
|
package com.example.demo.controller;
|
||||||
|
|
||||||
|
import org.springframework.stereotype.Controller;
|
||||||
|
import org.springframework.web.bind.annotation.GetMapping;
|
||||||
|
|
||||||
|
@Controller
|
||||||
|
public class PasswordChangeController {
|
||||||
|
|
||||||
|
// パスワード変更画面に遷移
|
||||||
|
@GetMapping("/passwordChange")
|
||||||
|
public String passwordChange() {
|
||||||
|
return "passwordChange";
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
677
src/main/resources/templates/approvalReceive.html
Normal file
677
src/main/resources/templates/approvalReceive.html
Normal file
@@ -0,0 +1,677 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html xmlns:th="http://www.thymeleaf.org">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>寄贈申請 受信BOX</title>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: "Yu Gothic", "Meiryo", sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: #f5f7fb;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --------------------
|
||||||
|
Header
|
||||||
|
--------------------- */
|
||||||
|
.header {
|
||||||
|
height: 60px;
|
||||||
|
background: #fff;
|
||||||
|
border-bottom: 1px solid #dfe4ea;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #173a70;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logout-btn {
|
||||||
|
padding: 8px 14px;
|
||||||
|
border: 1px solid #d0d7de;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --------------------
|
||||||
|
Layout
|
||||||
|
--------------------- */
|
||||||
|
.wrapper {
|
||||||
|
display: flex;
|
||||||
|
min-height: calc(100vh - 60px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --------------------
|
||||||
|
Sidebar
|
||||||
|
--------------------- */
|
||||||
|
.sidebar {
|
||||||
|
width: 230px;
|
||||||
|
background: #002a63;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-title {
|
||||||
|
padding: 16px;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu li {
|
||||||
|
margin: 6px 10px;
|
||||||
|
padding: 14px;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu li:hover {
|
||||||
|
background: #0b57d0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu li.active {
|
||||||
|
background: #0b57d0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 空白を詰める */
|
||||||
|
.menu-spacer {
|
||||||
|
height: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --------------------
|
||||||
|
Main
|
||||||
|
--------------------- */
|
||||||
|
.main {
|
||||||
|
flex: 1;
|
||||||
|
padding: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumb {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #6b7280;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-title {
|
||||||
|
font-size: 40px;
|
||||||
|
color: #173a70;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --------------------
|
||||||
|
Search
|
||||||
|
--------------------- */
|
||||||
|
.search-box {
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid #e5e7eb;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 20px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-row {
|
||||||
|
display: flex;
|
||||||
|
gap: 20px;
|
||||||
|
align-items: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
< !-- .form-group {
|
||||||
|
-->< !-- flex: 1;
|
||||||
|
-->< !--
|
||||||
|
}
|
||||||
|
|
||||||
|
-->.form-group label {
|
||||||
|
display: block;
|
||||||
|
font-size: 12px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=text],
|
||||||
|
select {
|
||||||
|
width: 100%;
|
||||||
|
height: 38px;
|
||||||
|
border: 1px solid #d7dde5;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
height: 38px;
|
||||||
|
padding: 0 18px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-search {
|
||||||
|
background: #0b57d0;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-clear {
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid #d0d7de;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --------------------
|
||||||
|
Table
|
||||||
|
--------------------- */
|
||||||
|
.result-count {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-box {
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid #e5e7eb;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
thead {
|
||||||
|
background: #f3f5f7;
|
||||||
|
}
|
||||||
|
|
||||||
|
th,
|
||||||
|
td {
|
||||||
|
border: 1px solid #edf0f2;
|
||||||
|
padding: 10px;
|
||||||
|
font-size: 12px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
color: #173a70;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status {
|
||||||
|
padding: 4px 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.good {
|
||||||
|
background: #dff5df;
|
||||||
|
color: #2b7a2b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.used {
|
||||||
|
background: #dbeafe;
|
||||||
|
color: #1e40af;
|
||||||
|
}
|
||||||
|
|
||||||
|
.damage {
|
||||||
|
background: #fff3cd;
|
||||||
|
color: #8a6d3b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pending {
|
||||||
|
color: #f0a000;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.approved {
|
||||||
|
color: #0b57d0;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rejected {
|
||||||
|
color: #d9534f;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --------------------
|
||||||
|
Pagination
|
||||||
|
--------------------- */
|
||||||
|
.pagination {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-buttons {
|
||||||
|
display: flex;
|
||||||
|
gap: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-btn {
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
border: 1px solid #d0d7de;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-btn.active {
|
||||||
|
background: #0b57d0;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --------------------
|
||||||
|
Bottom Info
|
||||||
|
--------------------- */
|
||||||
|
.info-area {
|
||||||
|
display: flex;
|
||||||
|
gap: 20px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-box {
|
||||||
|
flex: 1;
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid #e5e7eb;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-title {
|
||||||
|
font-weight: bold;
|
||||||
|
color: #173a70;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-box ul {
|
||||||
|
margin-left: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-box li {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
margin-top: 25px;
|
||||||
|
text-align: center;
|
||||||
|
color: #666;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --------------------
|
||||||
|
Action Buttons
|
||||||
|
--------------------- */
|
||||||
|
.action-area {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-btn {
|
||||||
|
padding: 7px 14px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: bold;
|
||||||
|
/* 押した感を出すためのアニメーション */
|
||||||
|
transition: background-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ホバー時 */
|
||||||
|
.action-btn:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 押下中 */
|
||||||
|
.action-btn:active {
|
||||||
|
transform: translateY(1px);
|
||||||
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 承認 */
|
||||||
|
.approve-btn {
|
||||||
|
background: #0b57d0;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.approve-btn:hover {
|
||||||
|
background: #0846a8;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 却下 */
|
||||||
|
.reject-btn {
|
||||||
|
background: #d9534f;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reject-btn:hover {
|
||||||
|
background: #b52b27;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="header">
|
||||||
|
|
||||||
|
<div class="logo">📖 ShareBooks</div>
|
||||||
|
|
||||||
|
<div class="header-right">
|
||||||
|
<span>山田 太郎 さん(管理者)</span>
|
||||||
|
<button class="logout-btn">ログアウト</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="wrapper">
|
||||||
|
|
||||||
|
<aside class="sidebar">
|
||||||
|
|
||||||
|
<div class="sidebar-title">管理者メニュー</div>
|
||||||
|
|
||||||
|
<ul class="menu">
|
||||||
|
<li>🏠 トップメニュー</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div class="menu-spacer"></div>
|
||||||
|
|
||||||
|
<ul class="menu">
|
||||||
|
<li class="active">📚 寄贈申請受信BOX</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<main class="main">
|
||||||
|
|
||||||
|
<div class="breadcrumb">トップメニュー > 図書管理 > 寄贈申請受信BOX</div>
|
||||||
|
|
||||||
|
<h1 class="page-title">寄贈申請受信BOX</h1>
|
||||||
|
|
||||||
|
<div class="description">
|
||||||
|
ユーザーから提出された図書寄贈申請の一覧です。申請内容を確認し、承認または却下を行ってください。</div>
|
||||||
|
|
||||||
|
<div class="search-box">
|
||||||
|
|
||||||
|
<div class="search-row">
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label>本の状態</label> <select>
|
||||||
|
<option>すべて</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button class="btn btn-search">検索</button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="result-count">受信件数:${donationList.size()}件</div>
|
||||||
|
|
||||||
|
<div class="table-box">
|
||||||
|
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>社員ID</th>
|
||||||
|
<th>社員名</th>
|
||||||
|
<th>タイトル</th>
|
||||||
|
<th>著者名</th>
|
||||||
|
<th>本の状態</th>
|
||||||
|
<th>出版社</th>
|
||||||
|
<th>カテゴリ</th>
|
||||||
|
<th>備考</th>
|
||||||
|
<th>詳細URL</th>
|
||||||
|
<th>承認 / 却下</th>
|
||||||
|
<th>登録画面移動 / <br> 差し戻し
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
|
||||||
|
<tbody>
|
||||||
|
|
||||||
|
<!--モック用ダミーデータ。実装時に削除-->
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td>100002</td>
|
||||||
|
<td>佐藤 花子</td>
|
||||||
|
<td>AIモデル開発入門</td>
|
||||||
|
<td>田中 美咲</td>
|
||||||
|
|
||||||
|
<td><span class="status good">良好</span></td>
|
||||||
|
|
||||||
|
<td>技術評論社</td>
|
||||||
|
<td>IT・プログラミング</td>
|
||||||
|
<td>付属品なし</td>
|
||||||
|
|
||||||
|
<td><a href="https://amazon..." target="_blank"> 詳細URL </a>
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td>
|
||||||
|
<div class="action-area">
|
||||||
|
|
||||||
|
|
||||||
|
<form action="donationApprove" method="post" style="display: inline;">
|
||||||
|
|
||||||
|
<input type="hidden" name="donationId" value="1">
|
||||||
|
|
||||||
|
<button type="submit" class="action-btn approve-btn">
|
||||||
|
承認
|
||||||
|
</button>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<form action="donationReject" method="post" style="display: inline;"
|
||||||
|
onsubmit="return confirm('この寄贈申請を却下しますか?');">
|
||||||
|
|
||||||
|
<input type="hidden" name="donationId" value="1">
|
||||||
|
|
||||||
|
<button type="submit" class="action-btn reject-btn">
|
||||||
|
却下
|
||||||
|
</button>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<!-- 承認待ちを想定したダミーなので、登録と戻しは非表示-->
|
||||||
|
|
||||||
|
<!-- <td>-->
|
||||||
|
<!-- <div class="action-area">-->
|
||||||
|
|
||||||
|
<!-- <form action="donationApprove" method="post"-->
|
||||||
|
<!-- style="display: inline;">-->
|
||||||
|
<!-- <input type="hidden" name="donationId" value="2">-->
|
||||||
|
|
||||||
|
<!-- <button type="submit" class="action-btn approve-btn">-->
|
||||||
|
<!-- 登録-->
|
||||||
|
<!-- </button>-->
|
||||||
|
|
||||||
|
<!-- </form>-->
|
||||||
|
|
||||||
|
<!-- <form action="donationReject" method="post"-->
|
||||||
|
<!-- style="display: inline;"-->
|
||||||
|
<!-- onsubmit="return confirm('この寄贈申請を却下しますか?');">-->
|
||||||
|
|
||||||
|
<!-- <input type="hidden" name="donationId" value="2">-->
|
||||||
|
|
||||||
|
<!-- <button type="submit" class="action-btn reject-btn">-->
|
||||||
|
<!-- 戻し-->
|
||||||
|
<!-- </button>-->
|
||||||
|
|
||||||
|
<!-- </form>-->
|
||||||
|
|
||||||
|
<!-- </div>-->
|
||||||
|
|
||||||
|
<!-- </td>-->
|
||||||
|
|
||||||
|
<td>
|
||||||
|
<div class="action-area">
|
||||||
|
|
||||||
|
<form action="donationApprove" method="post" style="display: inline;">
|
||||||
|
|
||||||
|
<input type="hidden" name="donationId" value="2">
|
||||||
|
|
||||||
|
<button type="submit" class="action-btn approve-btn">
|
||||||
|
登録</button>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<form action="donationReject" method="post" style="display: inline;"
|
||||||
|
onsubmit="return confirm('この寄贈申請を却下しますか?');">
|
||||||
|
|
||||||
|
<input type="hidden" name="donationId" value="2">
|
||||||
|
|
||||||
|
<button type="submit" class="action-btn reject-btn">
|
||||||
|
戻し</button>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</td>
|
||||||
|
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td>100003</td>
|
||||||
|
<td>鈴木 一郎</td>
|
||||||
|
<td>Pythonではじめるデータ分析</td>
|
||||||
|
<td>佐藤 拓也</td>
|
||||||
|
|
||||||
|
<td><span class="status used">使用感あり</span></td>
|
||||||
|
|
||||||
|
<td>オライリー</td>
|
||||||
|
<td>IT・プログラミング</td>
|
||||||
|
<td>CD-ROMあり</td>
|
||||||
|
|
||||||
|
<td><a href="https://amazon..." target="_blank"> 詳細URL </a>
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<!-- 承認済みを想定したダミーなので、承認と却下は非表示-->
|
||||||
|
|
||||||
|
<!-- <td>-->
|
||||||
|
<!-- <div class="action-area">-->
|
||||||
|
|
||||||
|
<!-- <form action="donationApprove" method="post"-->
|
||||||
|
<!-- style="display: inline;">-->
|
||||||
|
|
||||||
|
<!-- <input type="hidden" name="donationId" value="2">-->
|
||||||
|
|
||||||
|
<!-- <button type="submit" class="action-btn approve-btn">-->
|
||||||
|
<!-- 承認-->
|
||||||
|
<!-- </button>-->
|
||||||
|
|
||||||
|
<!-- </form>-->
|
||||||
|
|
||||||
|
<!-- <form action="donationReject" method="post"-->
|
||||||
|
<!-- style="display: inline;"-->
|
||||||
|
<!-- onsubmit="return confirm('この寄贈申請を却下しますか?');">-->
|
||||||
|
|
||||||
|
<!-- <input type="hidden" name="donationId" value="2">-->
|
||||||
|
|
||||||
|
<!-- <button type="submit" class="action-btn reject-btn">-->
|
||||||
|
<!-- 却下-->
|
||||||
|
<!-- </button>-->
|
||||||
|
|
||||||
|
<!-- </form>-->
|
||||||
|
|
||||||
|
<!-- </div>-->
|
||||||
|
|
||||||
|
<!-- </td>-->
|
||||||
|
|
||||||
|
<td>
|
||||||
|
<div class="action-area">
|
||||||
|
|
||||||
|
<form action="donationApprove" method="post" style="display: inline;">
|
||||||
|
<input type="hidden" name="donationId" value="2">
|
||||||
|
|
||||||
|
<button type="submit" class="action-btn approve-btn">
|
||||||
|
登録</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<form action="donationReject" method="post" style="display: inline;"
|
||||||
|
onsubmit="return confirm('この寄贈申請を却下しますか?');">
|
||||||
|
|
||||||
|
<input type="hidden" name="donationId" value="2">
|
||||||
|
|
||||||
|
<button type="submit" class="action-btn reject-btn">
|
||||||
|
戻し</button>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</td>
|
||||||
|
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<!--モック用ダミーデータ終わり-->
|
||||||
|
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="info-area">
|
||||||
|
|
||||||
|
<div class="info-box">
|
||||||
|
<div class="info-title">本の状態の判断基準</div>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li><b>新品同様</b>:ほぼ未使用</li>
|
||||||
|
<li><b>良好</b>:目立つ劣化なし</li>
|
||||||
|
<li><b>使用感あり</b>:多少の折れ・擦れあり</li>
|
||||||
|
<li><b>傷みあり</b>:目立つ傷・汚れ・書き込みあり</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="info-box">
|
||||||
|
<div class="info-title">操作について</div>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li>「詳細表示」ボタンで申請内容の詳細を確認できます。</li>
|
||||||
|
<li>詳細画面から承認または却下を実施します。</li>
|
||||||
|
<li>承認された寄贈申請は図書管理へ登録できます。</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer">© 2026 ShareBooks</div>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
1353
src/main/resources/templates/book.html
Normal file
1353
src/main/resources/templates/book.html
Normal file
File diff suppressed because it is too large
Load Diff
1499
src/main/resources/templates/book.jsp
Normal file
1499
src/main/resources/templates/book.jsp
Normal file
File diff suppressed because it is too large
Load Diff
677
src/main/resources/templates/bookApproval.html
Normal file
677
src/main/resources/templates/bookApproval.html
Normal file
@@ -0,0 +1,677 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>寄贈申請 受信BOX</title>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: "Yu Gothic", "Meiryo", sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: #f5f7fb;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --------------------
|
||||||
|
Header
|
||||||
|
--------------------- */
|
||||||
|
.header {
|
||||||
|
height: 60px;
|
||||||
|
background: #fff;
|
||||||
|
border-bottom: 1px solid #dfe4ea;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #173a70;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logout-btn {
|
||||||
|
padding: 8px 14px;
|
||||||
|
border: 1px solid #d0d7de;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --------------------
|
||||||
|
Layout
|
||||||
|
--------------------- */
|
||||||
|
.wrapper {
|
||||||
|
display: flex;
|
||||||
|
min-height: calc(100vh - 60px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --------------------
|
||||||
|
Sidebar
|
||||||
|
--------------------- */
|
||||||
|
.sidebar {
|
||||||
|
width: 230px;
|
||||||
|
background: #002a63;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-title {
|
||||||
|
padding: 16px;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu li {
|
||||||
|
margin: 6px 10px;
|
||||||
|
padding: 14px;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu li:hover {
|
||||||
|
background: #0b57d0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu li.active {
|
||||||
|
background: #0b57d0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 空白を詰める */
|
||||||
|
.menu-spacer {
|
||||||
|
height: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --------------------
|
||||||
|
Main
|
||||||
|
--------------------- */
|
||||||
|
.main {
|
||||||
|
flex: 1;
|
||||||
|
padding: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumb {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #6b7280;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-title {
|
||||||
|
font-size: 40px;
|
||||||
|
color: #173a70;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --------------------
|
||||||
|
Search
|
||||||
|
--------------------- */
|
||||||
|
.search-box {
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid #e5e7eb;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 20px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-row {
|
||||||
|
display: flex;
|
||||||
|
gap: 20px;
|
||||||
|
align-items: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
< !-- .form-group {
|
||||||
|
-->< !-- flex: 1;
|
||||||
|
-->< !--
|
||||||
|
}
|
||||||
|
|
||||||
|
-->.form-group label {
|
||||||
|
display: block;
|
||||||
|
font-size: 12px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=text],
|
||||||
|
select {
|
||||||
|
width: 100%;
|
||||||
|
height: 38px;
|
||||||
|
border: 1px solid #d7dde5;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
height: 38px;
|
||||||
|
padding: 0 18px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-search {
|
||||||
|
background: #0b57d0;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-clear {
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid #d0d7de;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --------------------
|
||||||
|
Table
|
||||||
|
--------------------- */
|
||||||
|
.result-count {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-box {
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid #e5e7eb;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
thead {
|
||||||
|
background: #f3f5f7;
|
||||||
|
}
|
||||||
|
|
||||||
|
th,
|
||||||
|
td {
|
||||||
|
border: 1px solid #edf0f2;
|
||||||
|
padding: 10px;
|
||||||
|
font-size: 12px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
color: #173a70;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status {
|
||||||
|
padding: 4px 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.good {
|
||||||
|
background: #dff5df;
|
||||||
|
color: #2b7a2b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.used {
|
||||||
|
background: #dbeafe;
|
||||||
|
color: #1e40af;
|
||||||
|
}
|
||||||
|
|
||||||
|
.damage {
|
||||||
|
background: #fff3cd;
|
||||||
|
color: #8a6d3b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pending {
|
||||||
|
color: #f0a000;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.approved {
|
||||||
|
color: #0b57d0;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rejected {
|
||||||
|
color: #d9534f;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --------------------
|
||||||
|
Pagination
|
||||||
|
--------------------- */
|
||||||
|
.pagination {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-buttons {
|
||||||
|
display: flex;
|
||||||
|
gap: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-btn {
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
border: 1px solid #d0d7de;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-btn.active {
|
||||||
|
background: #0b57d0;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --------------------
|
||||||
|
Bottom Info
|
||||||
|
--------------------- */
|
||||||
|
.info-area {
|
||||||
|
display: flex;
|
||||||
|
gap: 20px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-box {
|
||||||
|
flex: 1;
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid #e5e7eb;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-title {
|
||||||
|
font-weight: bold;
|
||||||
|
color: #173a70;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-box ul {
|
||||||
|
margin-left: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-box li {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
margin-top: 25px;
|
||||||
|
text-align: center;
|
||||||
|
color: #666;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --------------------
|
||||||
|
Action Buttons
|
||||||
|
--------------------- */
|
||||||
|
.action-area {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-btn {
|
||||||
|
padding: 7px 14px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: bold;
|
||||||
|
/* 押した感を出すためのアニメーション */
|
||||||
|
transition: background-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ホバー時 */
|
||||||
|
.action-btn:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 押下中 */
|
||||||
|
.action-btn:active {
|
||||||
|
transform: translateY(1px);
|
||||||
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 承認 */
|
||||||
|
.approve-btn {
|
||||||
|
background: #0b57d0;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.approve-btn:hover {
|
||||||
|
background: #0846a8;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 却下 */
|
||||||
|
.reject-btn {
|
||||||
|
background: #d9534f;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reject-btn:hover {
|
||||||
|
background: #b52b27;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="header">
|
||||||
|
|
||||||
|
<div class="logo">📖 ShareBooks</div>
|
||||||
|
|
||||||
|
<div class="header-right">
|
||||||
|
<span>山田 太郎 さん(管理者)</span>
|
||||||
|
<button class="logout-btn">ログアウト</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="wrapper">
|
||||||
|
|
||||||
|
<aside class="sidebar">
|
||||||
|
|
||||||
|
<div class="sidebar-title">管理者メニュー</div>
|
||||||
|
|
||||||
|
<ul class="menu">
|
||||||
|
<li>🏠 トップメニュー</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div class="menu-spacer"></div>
|
||||||
|
|
||||||
|
<ul class="menu">
|
||||||
|
<li class="active">📚 寄贈申請受信BOX</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<main class="main">
|
||||||
|
|
||||||
|
<div class="breadcrumb">トップメニュー > 図書管理 > 寄贈申請受信BOX</div>
|
||||||
|
|
||||||
|
<h1 class="page-title">寄贈申請受信BOX</h1>
|
||||||
|
|
||||||
|
<div class="description">
|
||||||
|
ユーザーから提出された図書寄贈申請の一覧です。申請内容を確認し、承認または却下を行ってください。</div>
|
||||||
|
|
||||||
|
<div class="search-box">
|
||||||
|
|
||||||
|
<div class="search-row">
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label>本の状態</label> <select>
|
||||||
|
<option>すべて</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button class="btn btn-search">検索</button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="result-count">受信件数:${donationList.size()}件</div>
|
||||||
|
|
||||||
|
<div class="table-box">
|
||||||
|
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>社員ID</th>
|
||||||
|
<th>社員名</th>
|
||||||
|
<th>タイトル</th>
|
||||||
|
<th>著者名</th>
|
||||||
|
<th>本の状態</th>
|
||||||
|
<th>出版社</th>
|
||||||
|
<th>カテゴリ</th>
|
||||||
|
<th>備考</th>
|
||||||
|
<th>詳細URL</th>
|
||||||
|
<th>承認 / 却下</th>
|
||||||
|
<th>登録画面移動 / <br> 差し戻し
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
|
||||||
|
<tbody>
|
||||||
|
|
||||||
|
<!--モック用ダミーデータ。実装時に削除-->
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td>100002</td>
|
||||||
|
<td>佐藤 花子</td>
|
||||||
|
<td>AIモデル開発入門</td>
|
||||||
|
<td>田中 美咲</td>
|
||||||
|
|
||||||
|
<td><span class="status good">良好</span></td>
|
||||||
|
|
||||||
|
<td>技術評論社</td>
|
||||||
|
<td>IT・プログラミング</td>
|
||||||
|
<td>付属品なし</td>
|
||||||
|
|
||||||
|
<td><a href="https://amazon..." target="_blank"> 詳細URL </a>
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td>
|
||||||
|
<div class="action-area">
|
||||||
|
|
||||||
|
|
||||||
|
<form action="donationApprove" method="post" style="display: inline;">
|
||||||
|
|
||||||
|
<input type="hidden" name="donationId" value="1">
|
||||||
|
|
||||||
|
<button type="submit" class="action-btn approve-btn">
|
||||||
|
承認
|
||||||
|
</button>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<form action="donationReject" method="post" style="display: inline;"
|
||||||
|
onsubmit="return confirm('この寄贈申請を却下しますか?');">
|
||||||
|
|
||||||
|
<input type="hidden" name="donationId" value="1">
|
||||||
|
|
||||||
|
<button type="submit" class="action-btn reject-btn">
|
||||||
|
却下
|
||||||
|
</button>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<!-- 承認待ちを想定したダミーなので、登録と戻しは非表示-->
|
||||||
|
|
||||||
|
<!-- <td>-->
|
||||||
|
<!-- <div class="action-area">-->
|
||||||
|
|
||||||
|
<!-- <form action="donationApprove" method="post"-->
|
||||||
|
<!-- style="display: inline;">-->
|
||||||
|
<!-- <input type="hidden" name="donationId" value="2">-->
|
||||||
|
|
||||||
|
<!-- <button type="submit" class="action-btn approve-btn">-->
|
||||||
|
<!-- 登録-->
|
||||||
|
<!-- </button>-->
|
||||||
|
|
||||||
|
<!-- </form>-->
|
||||||
|
|
||||||
|
<!-- <form action="donationReject" method="post"-->
|
||||||
|
<!-- style="display: inline;"-->
|
||||||
|
<!-- onsubmit="return confirm('この寄贈申請を却下しますか?');">-->
|
||||||
|
|
||||||
|
<!-- <input type="hidden" name="donationId" value="2">-->
|
||||||
|
|
||||||
|
<!-- <button type="submit" class="action-btn reject-btn">-->
|
||||||
|
<!-- 戻し-->
|
||||||
|
<!-- </button>-->
|
||||||
|
|
||||||
|
<!-- </form>-->
|
||||||
|
|
||||||
|
<!-- </div>-->
|
||||||
|
|
||||||
|
<!-- </td>-->
|
||||||
|
|
||||||
|
<td>
|
||||||
|
<div class="action-area">
|
||||||
|
|
||||||
|
<form action="donationApprove" method="post" style="display: inline;">
|
||||||
|
|
||||||
|
<input type="hidden" name="donationId" value="2">
|
||||||
|
|
||||||
|
<button type="submit" class="action-btn approve-btn">
|
||||||
|
登録</button>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<form action="donationReject" method="post" style="display: inline;"
|
||||||
|
onsubmit="return confirm('この寄贈申請を却下しますか?');">
|
||||||
|
|
||||||
|
<input type="hidden" name="donationId" value="2">
|
||||||
|
|
||||||
|
<button type="submit" class="action-btn reject-btn">
|
||||||
|
戻し</button>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</td>
|
||||||
|
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td>100003</td>
|
||||||
|
<td>鈴木 一郎</td>
|
||||||
|
<td>Pythonではじめるデータ分析</td>
|
||||||
|
<td>佐藤 拓也</td>
|
||||||
|
|
||||||
|
<td><span class="status used">使用感あり</span></td>
|
||||||
|
|
||||||
|
<td>オライリー</td>
|
||||||
|
<td>IT・プログラミング</td>
|
||||||
|
<td>CD-ROMあり</td>
|
||||||
|
|
||||||
|
<td><a href="https://amazon..." target="_blank"> 詳細URL </a>
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<!-- 承認済みを想定したダミーなので、承認と却下は非表示-->
|
||||||
|
|
||||||
|
<!-- <td>-->
|
||||||
|
<!-- <div class="action-area">-->
|
||||||
|
|
||||||
|
<!-- <form action="donationApprove" method="post"-->
|
||||||
|
<!-- style="display: inline;">-->
|
||||||
|
|
||||||
|
<!-- <input type="hidden" name="donationId" value="2">-->
|
||||||
|
|
||||||
|
<!-- <button type="submit" class="action-btn approve-btn">-->
|
||||||
|
<!-- 承認-->
|
||||||
|
<!-- </button>-->
|
||||||
|
|
||||||
|
<!-- </form>-->
|
||||||
|
|
||||||
|
<!-- <form action="donationReject" method="post"-->
|
||||||
|
<!-- style="display: inline;"-->
|
||||||
|
<!-- onsubmit="return confirm('この寄贈申請を却下しますか?');">-->
|
||||||
|
|
||||||
|
<!-- <input type="hidden" name="donationId" value="2">-->
|
||||||
|
|
||||||
|
<!-- <button type="submit" class="action-btn reject-btn">-->
|
||||||
|
<!-- 却下-->
|
||||||
|
<!-- </button>-->
|
||||||
|
|
||||||
|
<!-- </form>-->
|
||||||
|
|
||||||
|
<!-- </div>-->
|
||||||
|
|
||||||
|
<!-- </td>-->
|
||||||
|
|
||||||
|
<td>
|
||||||
|
<div class="action-area">
|
||||||
|
|
||||||
|
<form action="donationApprove" method="post" style="display: inline;">
|
||||||
|
<input type="hidden" name="donationId" value="2">
|
||||||
|
|
||||||
|
<button type="submit" class="action-btn approve-btn">
|
||||||
|
登録</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<form action="donationReject" method="post" style="display: inline;"
|
||||||
|
onsubmit="return confirm('この寄贈申請を却下しますか?');">
|
||||||
|
|
||||||
|
<input type="hidden" name="donationId" value="2">
|
||||||
|
|
||||||
|
<button type="submit" class="action-btn reject-btn">
|
||||||
|
戻し</button>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</td>
|
||||||
|
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<!--モック用ダミーデータ終わり-->
|
||||||
|
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="info-area">
|
||||||
|
|
||||||
|
<div class="info-box">
|
||||||
|
<div class="info-title">本の状態の判断基準</div>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li><b>新品同様</b>:ほぼ未使用</li>
|
||||||
|
<li><b>良好</b>:目立つ劣化なし</li>
|
||||||
|
<li><b>使用感あり</b>:多少の折れ・擦れあり</li>
|
||||||
|
<li><b>傷みあり</b>:目立つ傷・汚れ・書き込みあり</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="info-box">
|
||||||
|
<div class="info-title">操作について</div>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li>「詳細表示」ボタンで申請内容の詳細を確認できます。</li>
|
||||||
|
<li>詳細画面から承認または却下を実施します。</li>
|
||||||
|
<li>承認された寄贈申請は図書管理へ登録できます。</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer">© 2026 社内備品・図書管理システム</div>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
974
src/main/resources/templates/bookInsert.html
Normal file
974
src/main/resources/templates/bookInsert.html
Normal file
@@ -0,0 +1,974 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ja">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>【図書】登録内容入力</title>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: "Yu Gothic", "Meiryo", sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: #f5f6fa;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* =========================
|
||||||
|
Header
|
||||||
|
========================= */
|
||||||
|
.header {
|
||||||
|
height: 60px;
|
||||||
|
background: #fff;
|
||||||
|
border-bottom: 1px solid #d9dee5;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #1d4075;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 通知 */
|
||||||
|
.notification {
|
||||||
|
position: relative;
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 18px;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: background-color 0.2s ease, transform 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification:hover {
|
||||||
|
background-color: #f1f5fa;
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification-badge {
|
||||||
|
position: absolute;
|
||||||
|
width: 7px;
|
||||||
|
height: 7px;
|
||||||
|
top: 2px;
|
||||||
|
right: 2px;
|
||||||
|
background: #d71920;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 1px solid #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* サインイン中アカウント */
|
||||||
|
.account {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #555;
|
||||||
|
padding: 7px 9px;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: default;
|
||||||
|
transition: background-color 0.2s ease, color 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account:hover {
|
||||||
|
background-color: #f1f5fa;
|
||||||
|
color: #1d4075;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ログアウト */
|
||||||
|
.logout-btn {
|
||||||
|
padding: 8px 16px;
|
||||||
|
border: 1px solid #d0d7de;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logout-btn:hover {
|
||||||
|
background-color: #f1f5fa;
|
||||||
|
border-color: #1d4075;
|
||||||
|
color: #1d4075;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logout-btn:active {
|
||||||
|
background-color: #e5edf7;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* =========================
|
||||||
|
Layout
|
||||||
|
========================= */
|
||||||
|
.wrapper {
|
||||||
|
display: flex;
|
||||||
|
min-height: calc(100vh - 60px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* =========================
|
||||||
|
Sidebar
|
||||||
|
========================= */
|
||||||
|
.sidebar {
|
||||||
|
width: 220px;
|
||||||
|
background: #002b66;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-title {
|
||||||
|
padding: 18px;
|
||||||
|
font-size: 14px;
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, .1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu li {
|
||||||
|
padding: 16px 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu li:hover {
|
||||||
|
background: #0c438f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu li.active {
|
||||||
|
background: #1659d4;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* =========================
|
||||||
|
Main
|
||||||
|
========================= */
|
||||||
|
.main {
|
||||||
|
flex: 1;
|
||||||
|
padding: 25px;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* =========================
|
||||||
|
Breadcrumb
|
||||||
|
========================= */
|
||||||
|
.breadcrumb {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #6d7b91;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* =========================
|
||||||
|
Page title
|
||||||
|
========================= */
|
||||||
|
.page-title {
|
||||||
|
font-size: 42px;
|
||||||
|
color: #173a70;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
font-size: 14px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.required-text {
|
||||||
|
color: #d9534f;
|
||||||
|
font-size: 12px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* =========================
|
||||||
|
Card
|
||||||
|
========================= */
|
||||||
|
.card {
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid #e2e8f0;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
padding: 15px;
|
||||||
|
border-bottom: 1px solid #e2e8f0;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-body {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* =========================
|
||||||
|
Form
|
||||||
|
縦積み
|
||||||
|
========================= */
|
||||||
|
.form-fields {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* =========================
|
||||||
|
Form group
|
||||||
|
========================= */
|
||||||
|
.form-group {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group label {
|
||||||
|
width: 150px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: bold;
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.required {
|
||||||
|
color: #d9534f;
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.optional {
|
||||||
|
color: #555;
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-area {
|
||||||
|
flex: 1;
|
||||||
|
max-width: 700px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* =========================
|
||||||
|
Input
|
||||||
|
========================= */
|
||||||
|
input[type="text"],
|
||||||
|
input[type="date"],
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
width: 100%;
|
||||||
|
border: 1px solid #d9dee5;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 10px;
|
||||||
|
font-size: 13px;
|
||||||
|
background: #fff;
|
||||||
|
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="text"]:focus,
|
||||||
|
input[type="date"]:focus,
|
||||||
|
select:focus,
|
||||||
|
textarea:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: #1659d4;
|
||||||
|
box-shadow: 0 0 0 2px rgba(22, 89, 212, .1);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[readonly] {
|
||||||
|
background: #f3f5f8;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* =========================
|
||||||
|
Help
|
||||||
|
========================= */
|
||||||
|
.help {
|
||||||
|
font-size: 11px;
|
||||||
|
color: #777;
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* =========================
|
||||||
|
Category
|
||||||
|
========================= */
|
||||||
|
.inline {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inline select {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-btn {
|
||||||
|
white-space: nowrap;
|
||||||
|
padding: 10px 16px;
|
||||||
|
border: 1px solid #d0d7de;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-btn:hover {
|
||||||
|
background-color: #f1f5fa;
|
||||||
|
border-color: #1659d4;
|
||||||
|
color: #1659d4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-btn:active {
|
||||||
|
background-color: #e5edf7;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* =========================
|
||||||
|
Optional section
|
||||||
|
========================= */
|
||||||
|
.optional-section {
|
||||||
|
margin-top: 25px;
|
||||||
|
padding-top: 25px;
|
||||||
|
border-top: 1px solid #e2e8f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.optional-title {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* =========================
|
||||||
|
Textarea
|
||||||
|
========================= */
|
||||||
|
textarea {
|
||||||
|
resize: none;
|
||||||
|
height: 90px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.counter {
|
||||||
|
text-align: right;
|
||||||
|
font-size: 11px;
|
||||||
|
color: #888;
|
||||||
|
margin-top: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* =========================
|
||||||
|
Notice
|
||||||
|
========================= */
|
||||||
|
.notice {
|
||||||
|
margin-top: 20px;
|
||||||
|
padding: 18px;
|
||||||
|
background: #fffaf0;
|
||||||
|
border-top: 1px solid #efe2b5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notice-title {
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notice ul {
|
||||||
|
margin-left: 20px;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notice li {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* =========================
|
||||||
|
Buttons
|
||||||
|
========================= */
|
||||||
|
.button-area {
|
||||||
|
margin-top: 20px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
min-width: 140px;
|
||||||
|
padding: 11px 20px;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid #d0d7de;
|
||||||
|
background: #fff;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: bold;
|
||||||
|
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
|
||||||
|
display: inline-block;
|
||||||
|
text-decoration: none;
|
||||||
|
color: #333;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn:hover {
|
||||||
|
background-color: #f1f5fa;
|
||||||
|
border-color: #1d4075;
|
||||||
|
color: #1d4075;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn:active {
|
||||||
|
transform: translateY(1px);
|
||||||
|
background-color: #e5edf7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background: #1659d4;
|
||||||
|
color: #fff;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover {
|
||||||
|
background: #0f47ae;
|
||||||
|
border-color: #0f47ae;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:active {
|
||||||
|
background: #0c3d96;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* =========================
|
||||||
|
Responsive
|
||||||
|
========================= */
|
||||||
|
@media (max-width : 700px) {
|
||||||
|
.header {
|
||||||
|
padding: 0 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar {
|
||||||
|
width: 180px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main {
|
||||||
|
padding: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-title {
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group label {
|
||||||
|
width: 100%;
|
||||||
|
padding-top: 0;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-area {
|
||||||
|
width: 100%;
|
||||||
|
max-width: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inline {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-area {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-buttons {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-buttons .btn {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- =========================
|
||||||
|
Header
|
||||||
|
========================= -->
|
||||||
|
|
||||||
|
<header class="header">
|
||||||
|
|
||||||
|
<div class="logo">
|
||||||
|
📖 ShareBooks
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<c:if test="${not empty errorMessage}">
|
||||||
|
<div style="color: red; margin-bottom: 15px;">${errorMessage}</div>
|
||||||
|
</c:if>
|
||||||
|
|
||||||
|
<div class="header-right">
|
||||||
|
|
||||||
|
<!-- サインイン中アカウント -->
|
||||||
|
<span class="account"> 山田 太郎 さん(管理者) </span>
|
||||||
|
|
||||||
|
<!-- ログアウト -->
|
||||||
|
<form method="post" action="${pageContext.request.contextPath}/logout" style="display: inline;">
|
||||||
|
|
||||||
|
<button type="submit" class="logout-btn" onclick="return confirmLogout()">ログアウト</button>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="wrapper">
|
||||||
|
|
||||||
|
|
||||||
|
<!-- =========================
|
||||||
|
Sidebar
|
||||||
|
========================= -->
|
||||||
|
|
||||||
|
<aside class="sidebar">
|
||||||
|
|
||||||
|
<div class="sidebar-title">管理者画面</div>
|
||||||
|
|
||||||
|
<ul class="menu">
|
||||||
|
<li onclick="goTopMenu()">🏠 トップメニュー</li>
|
||||||
|
|
||||||
|
<li class="active">➕ 新規図書登録</li>
|
||||||
|
|
||||||
|
<li onclick="goToBook()">📚 社内図書一覧</li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- =========================
|
||||||
|
Main
|
||||||
|
========================= -->
|
||||||
|
|
||||||
|
<main class="main">
|
||||||
|
|
||||||
|
<div class="breadcrumb">トップメニュー > 新規図書登録 > 新規図書登録内容入力</div>
|
||||||
|
|
||||||
|
|
||||||
|
<h1 class="page-title">新規図書登録内容入力</h1>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="description">新しく図書を登録します。
|
||||||
|
必要事項を入力し、「確認へ」ボタンを押してください。</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="required-text">(※)は必須項目です。</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- =========================
|
||||||
|
Form
|
||||||
|
========================= -->
|
||||||
|
|
||||||
|
<form method="post" action="${pageContext.request.contextPath}/insertBook">
|
||||||
|
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
|
||||||
|
|
||||||
|
<div class="card-header">図書情報</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="card-body">
|
||||||
|
|
||||||
|
|
||||||
|
<!-- =========================
|
||||||
|
必須項目
|
||||||
|
========================= -->
|
||||||
|
|
||||||
|
<div class="form-fields">
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 図書管理ID -->
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
|
||||||
|
<label> 図書管理ID <span class="required"> (※) </span>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<div class="input-area">
|
||||||
|
|
||||||
|
<input type="text" name="bookManageId" value="${bookManageId }" readonly>
|
||||||
|
|
||||||
|
<div class="help">※自動採番されます(例:BK0001、BK0002 ...)</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 登録日 -->
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
|
||||||
|
<label> 登録日 </label>
|
||||||
|
|
||||||
|
<div class="input-area">
|
||||||
|
|
||||||
|
<input type="text" name="registeredAt" value="${registeredAt }" readonly>
|
||||||
|
|
||||||
|
<div class="help">※自動取得されます</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- タイトル -->
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
|
||||||
|
<label> タイトル <span class="required"> (※) </span>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<div class="input-area">
|
||||||
|
|
||||||
|
<input type="text" name="title" value="${title}" placeholder="タイトルを入力してください">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 著者名 -->
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
|
||||||
|
<label> 著者名 <span class="required"> (※) </span>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<div class="input-area">
|
||||||
|
|
||||||
|
<input type="text" name="author" value="${author}" placeholder="著者名を入力してください">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- カテゴリ -->
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
|
||||||
|
<label> カテゴリ <span class="required"> (※) </span>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<div class="input-area">
|
||||||
|
|
||||||
|
<div class="inline">
|
||||||
|
|
||||||
|
<select name="categoryId">
|
||||||
|
<option value="">選択してください</option>
|
||||||
|
|
||||||
|
<c:forEach var="category" items="${categories}">
|
||||||
|
<option value="${category.bookCategoryId}" <c:if
|
||||||
|
test="${category.bookCategoryId == categoryId}">
|
||||||
|
selected
|
||||||
|
</c:if>>
|
||||||
|
${category.bookCategoryName}</option>
|
||||||
|
</c:forEach>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- <button-->
|
||||||
|
<!-- type="button"-->
|
||||||
|
<!-- class="add-btn">-->
|
||||||
|
|
||||||
|
<!-- + 新規カテゴリ追加-->
|
||||||
|
|
||||||
|
<!-- </button>-->
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- サブカテゴリ -->
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
|
||||||
|
<label> サブカテゴリ <span class="required"> (※) </span>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<div class="input-area">
|
||||||
|
|
||||||
|
<select name="bookSubcategoryId" id="bookSubcategoryId">
|
||||||
|
|
||||||
|
<option value="">選択してください</option>
|
||||||
|
|
||||||
|
<c:forEach var="subcategory" items="${subcategories}">
|
||||||
|
|
||||||
|
<option value="${subcategory.bookSubcategoryId}"
|
||||||
|
data-category-id="${subcategory.bookCategoryId}" <c:if
|
||||||
|
test="${subcategory.bookSubcategoryId == bookSubcategoryId}">
|
||||||
|
selected
|
||||||
|
</c:if>>
|
||||||
|
${subcategory.bookSubcategoryName}</option>
|
||||||
|
|
||||||
|
</c:forEach>
|
||||||
|
|
||||||
|
</select>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- ISBN -->
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
|
||||||
|
<label> ISBN <span class="required"> (※) </span>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<div class="input-area">
|
||||||
|
|
||||||
|
<input type="text" name="isbn" value="${isbn}" placeholder="例:978-4-1234-5678-9">
|
||||||
|
|
||||||
|
<div class="help">※ハイフン(-)を含む形式で入力してください</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 保管場所 -->
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
|
||||||
|
<label> 保管場所 <span class="required"> (※) </span>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<div class="input-area">
|
||||||
|
|
||||||
|
<select name="locationId">
|
||||||
|
|
||||||
|
<option value="">選択してください</option>
|
||||||
|
|
||||||
|
<c:forEach var="location" items="${locations}">
|
||||||
|
|
||||||
|
<option value="${location.locationId}" <c:if
|
||||||
|
test="${location.locationId == locationId}">
|
||||||
|
selected
|
||||||
|
</c:if>>
|
||||||
|
${location.locationName}</option>
|
||||||
|
|
||||||
|
</c:forEach>
|
||||||
|
|
||||||
|
</select>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 本の状態 -->
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
|
||||||
|
<label> 本の状態 <span class="required"> (※) </span>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<div class="input-area">
|
||||||
|
|
||||||
|
<select name="condition">
|
||||||
|
|
||||||
|
<option value="">選択してください</option>
|
||||||
|
|
||||||
|
<option value="1">新品同様:ほぼ未使用</option>
|
||||||
|
|
||||||
|
<option value="2">良好:目立つ傷や汚れ無し</option>
|
||||||
|
|
||||||
|
<option value="3">使用感あり:多少の折れ、擦れあり</option>
|
||||||
|
|
||||||
|
<option value="4">傷みあり:目立つ傷、汚れ、書き込みあり</option>
|
||||||
|
|
||||||
|
</select>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- =========================
|
||||||
|
任意項目
|
||||||
|
========================= -->
|
||||||
|
|
||||||
|
<div class="optional-section">
|
||||||
|
|
||||||
|
|
||||||
|
<div class="optional-title">任意項目</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="form-fields">
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 出版社 -->
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
|
||||||
|
<label> 出版社 <span class="optional"> (任意) </span>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<div class="input-area">
|
||||||
|
|
||||||
|
<input type="text" name="publisher" value="${publisher}"
|
||||||
|
placeholder="出版社を入力してください">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 出版日 -->
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
|
||||||
|
<label> 出版日 <span class="optional"> (任意) </span>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<div class="input-area">
|
||||||
|
|
||||||
|
<input type="date" name="publishDate" value="${publishDate}">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 寄贈者 -->
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
|
||||||
|
<label> 寄贈者 <span class="optional"> (任意) </span>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<div class="input-area">
|
||||||
|
|
||||||
|
<input type="text" name="donorId" value="${donorId}"
|
||||||
|
placeholder="社員ID(半角)を入力してください">
|
||||||
|
|
||||||
|
<div class="help">※寄贈図書の場合に入力してください</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 備考 -->
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
|
||||||
|
<label> 備考 <span class="optional"> (任意) </span>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<div class="input-area">
|
||||||
|
|
||||||
|
<textarea name="description" maxlength="200"
|
||||||
|
placeholder="備考を入力してください(例:付属品の有無、特記事項など)">${description}</textarea>
|
||||||
|
|
||||||
|
<div class="counter">0 / 200</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- =========================
|
||||||
|
注意事項
|
||||||
|
========================= -->
|
||||||
|
|
||||||
|
<div class="notice">
|
||||||
|
|
||||||
|
<div class="notice-title">入力に関する注意</div>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
|
||||||
|
<li>図書一覧に表示する内容を入力してください。</li>
|
||||||
|
|
||||||
|
<li>ISBNはハイフン(-)を含む形式で入力してください。</li>
|
||||||
|
|
||||||
|
<li>登録日および図書管理IDは、 登録時に自動で設定されます。</li>
|
||||||
|
|
||||||
|
<li>出版日は任意項目のため、 不明な場合は空欄でも登録できます。</li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- =========================
|
||||||
|
Buttons
|
||||||
|
========================= -->
|
||||||
|
|
||||||
|
<div class="button-area">
|
||||||
|
|
||||||
|
<a href="${pageContext.request.contextPath}/BookServlet" class="btn"
|
||||||
|
style="display: inline-flex; align-items: center; justify-content: center; text-decoration: none;">
|
||||||
|
図書一覧へ戻る </a>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="right-buttons">
|
||||||
|
|
||||||
|
|
||||||
|
<button type="reset" class="btn">クリア</button>
|
||||||
|
|
||||||
|
|
||||||
|
<button type="submit" class="btn btn-primary">確認へ</button>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</form>
|
||||||
|
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
function confirmLogout() {
|
||||||
|
|
||||||
|
const result = window.confirm("本当にログアウトしてよろしいですか?");
|
||||||
|
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
function goTopMenu() {
|
||||||
|
location.href = "${pageContext.request.contextPath}/topmenu.jsp";
|
||||||
|
}
|
||||||
|
|
||||||
|
function goToBook() {
|
||||||
|
location.href = "${pageContext.request.contextPath}/book.jsp";
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
759
src/main/resources/templates/lendlist.html
Normal file
759
src/main/resources/templates/lendlist.html
Normal file
@@ -0,0 +1,759 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html xmlns:th="http://www.thymeleaf.org">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>貸出中図書一覧</title>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: "Yu Gothic", "Meiryo", sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: #f5f7fb;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== ヘッダー ===== */
|
||||||
|
.header {
|
||||||
|
height: 58px;
|
||||||
|
border-bottom: 1px solid #d8e0e8;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0 18px 0 20px;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-title {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 700;
|
||||||
|
display: flex;
|
||||||
|
gap: 9px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #213d75;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user {
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bell {
|
||||||
|
font-size: 22px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge {
|
||||||
|
position: absolute;
|
||||||
|
top: -3px;
|
||||||
|
right: -5px;
|
||||||
|
background: #e33;
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 9px;
|
||||||
|
font-size: 8px;
|
||||||
|
min-width: 13px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logout {
|
||||||
|
height: 34px;
|
||||||
|
padding: 0 14px;
|
||||||
|
border: 1px solid #a8b3c0;
|
||||||
|
border-radius: 5px;
|
||||||
|
background: #fff;
|
||||||
|
font-weight: bold;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== レイアウト ===== */
|
||||||
|
.wrapper {
|
||||||
|
display: flex;
|
||||||
|
min-height: calc(100vh - 60px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== サイドバー ===== */
|
||||||
|
.sidebar {
|
||||||
|
width: 180px;
|
||||||
|
flex: 0 0 180px;
|
||||||
|
background: #082957;
|
||||||
|
/* topmenu.jspと同一のベース色 */
|
||||||
|
color: #fff;
|
||||||
|
padding: 10px 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-title {
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin: 4px 9px 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu li {
|
||||||
|
min-height: 42px;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu a {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 0 10px;
|
||||||
|
height: 100%;
|
||||||
|
min-height: 42px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #fff;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* アクティブ項目およびホバー時の背景色を topmenu.jsp (.side-menu.active) の #1267d9 に変更 */
|
||||||
|
.menu li.active a,
|
||||||
|
.menu a:hover {
|
||||||
|
background: #1267d9;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 下部の余白エリアもサイドバー本体の背景色と統一 */
|
||||||
|
.blank-menu {
|
||||||
|
margin: 18px 10px;
|
||||||
|
height: 240px;
|
||||||
|
background: #082957;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== メイン ===== */
|
||||||
|
.main {
|
||||||
|
flex: 1;
|
||||||
|
padding: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumb {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #6b7280;
|
||||||
|
margin-bottom: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-title {
|
||||||
|
font-size: 42px;
|
||||||
|
color: #173a70;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
color: #555;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-bottom: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== 検索エリア ===== */
|
||||||
|
.search-area {
|
||||||
|
display: flex;
|
||||||
|
gap: 15px;
|
||||||
|
margin-bottom: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-card {
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid #e5e7eb;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-main {
|
||||||
|
flex: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-sub {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-title {
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
color: #173a70;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-row {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
align-items: end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field label {
|
||||||
|
display: block;
|
||||||
|
font-size: 12px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=text],
|
||||||
|
select {
|
||||||
|
width: 100%;
|
||||||
|
height: 36px;
|
||||||
|
border: 1px solid #d7dde5;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-btn {
|
||||||
|
height: 36px;
|
||||||
|
padding: 0 24px;
|
||||||
|
background: #0e57d9;
|
||||||
|
color: #fff;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clear-btn {
|
||||||
|
margin-top: 8px;
|
||||||
|
width: 100%;
|
||||||
|
height: 36px;
|
||||||
|
border: 1px solid #d0d7de;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== テーブル ===== */
|
||||||
|
.result-count {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-card {
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid #e5e7eb;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
thead {
|
||||||
|
background: #f3f6fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
th,
|
||||||
|
td {
|
||||||
|
border-bottom: 1px solid #edf0f2;
|
||||||
|
padding: 10px;
|
||||||
|
font-size: 13px;
|
||||||
|
text-align: left;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
color: #173a70;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status {
|
||||||
|
display: inline-block;
|
||||||
|
min-width: 48px;
|
||||||
|
text-align: center;
|
||||||
|
padding: 4px 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-normal {
|
||||||
|
background: #dff5df;
|
||||||
|
color: #2f7a2f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-delay {
|
||||||
|
background: #e9f1ff;
|
||||||
|
color: #1f5fd7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overdue {
|
||||||
|
color: #d9534f;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.return-btn {
|
||||||
|
padding: 5px 12px;
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid #0e57d9;
|
||||||
|
color: #0e57d9;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== ページャ ===== */
|
||||||
|
.pagination {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 15px 0;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-buttons {
|
||||||
|
display: flex;
|
||||||
|
gap: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-btn {
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
border: 1px solid #d9dee5;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-btn.active {
|
||||||
|
background: #0e57d9;
|
||||||
|
color: #fff;
|
||||||
|
border-color: #0e57d9;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== 案内 ===== */
|
||||||
|
.notice {
|
||||||
|
margin-top: 15px;
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid #e5e7eb;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notice-title {
|
||||||
|
font-weight: bold;
|
||||||
|
color: #173a70;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notice p {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #555;
|
||||||
|
line-height: 1.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== 返却ポップアップ(モーダル) ===== */
|
||||||
|
.modal-overlay {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(0, 0, 0, 0.4);
|
||||||
|
z-index: 1000;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-content {
|
||||||
|
background: #fff;
|
||||||
|
padding: 24px;
|
||||||
|
border-radius: 8px;
|
||||||
|
width: 420px;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-title {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #173a70;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
border-bottom: 2px solid #e5e7eb;
|
||||||
|
padding-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-info-table {
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-info-table th {
|
||||||
|
width: 40%;
|
||||||
|
background: #f8fafc;
|
||||||
|
padding: 8px;
|
||||||
|
font-size: 12px;
|
||||||
|
border: 1px solid #e2e8f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-info-table td {
|
||||||
|
padding: 8px;
|
||||||
|
font-size: 12px;
|
||||||
|
border: 1px solid #e2e8f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-msg {
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-buttons {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-yes {
|
||||||
|
padding: 8px 24px;
|
||||||
|
background: #0e57d9;
|
||||||
|
color: #fff;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-no {
|
||||||
|
padding: 8px 24px;
|
||||||
|
background: #e5e7eb;
|
||||||
|
color: #333;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<header class="header">
|
||||||
|
|
||||||
|
<div class="header-title">
|
||||||
|
<span class="book-icon">📖</span> ShareBooks
|
||||||
|
</div>
|
||||||
|
<div class="header-right">
|
||||||
|
|
||||||
|
<span class="user">
|
||||||
|
<%=session.getAttribute("employeeName")%>(<%=roleName%>)
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<form action="${pageContext.request.contextPath}/logout" method="post"
|
||||||
|
onsubmit="return confirm('ログアウトしますか?');">
|
||||||
|
|
||||||
|
<button type="submit" class="logout">ログアウト</button>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="wrapper">
|
||||||
|
|
||||||
|
<!-- サイドメニュー -->
|
||||||
|
<aside class="sidebar">
|
||||||
|
|
||||||
|
<div class="sidebar-title">管理者メニュー</div>
|
||||||
|
|
||||||
|
<ul class="menu">
|
||||||
|
<li><a href="${pageContext.request.contextPath}/topmenu.jsp">⌂
|
||||||
|
トップメニュー</a></li>
|
||||||
|
<li class="active"><a href="${pageContext.request.contextPath}/lendList">📅
|
||||||
|
貸出中備品・図書一覧</a></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div class="blank-menu"></div>
|
||||||
|
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<!-- メインコンテンツ -->
|
||||||
|
<main class="main">
|
||||||
|
|
||||||
|
<div class="breadcrumb">トップメニュー > 貸出中備品・図書一覧</div>
|
||||||
|
|
||||||
|
<h1 class="page-title">貸出中備品・図書一覧</h1>
|
||||||
|
|
||||||
|
<div class="description">現在貸出中の備品および図書の一覧です。</div>
|
||||||
|
|
||||||
|
<!-- 検索条件 -->
|
||||||
|
<form action="${pageContext.request.contextPath}/lendList" method="get">
|
||||||
|
<div class="search-area">
|
||||||
|
|
||||||
|
<div class="search-card search-main">
|
||||||
|
|
||||||
|
<div class="search-title">検索(完全一致)</div>
|
||||||
|
|
||||||
|
<div class="search-row">
|
||||||
|
|
||||||
|
<div class="field">
|
||||||
|
<label>社員ID</label> <input type="text" name="employeeId" placeholder="例)100001"
|
||||||
|
value="<c:out value='${employeeId}'/>">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="field">
|
||||||
|
<label>図書管理ID</label> <input type="text" name="bookManageId" placeholder="例)B000123"
|
||||||
|
value="<c:out value='${bookManageId}'/>">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="field">
|
||||||
|
<label>備品ID</label> <input type="text" name="equipmentId" placeholder="例)E000456"
|
||||||
|
value="<c:out value='${equipmentId}'/>">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="submit" class="search-btn">🔍 検索</button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="search-card search-sub">
|
||||||
|
|
||||||
|
<div class="search-title">フィルタ</div>
|
||||||
|
|
||||||
|
<div class="search-row">
|
||||||
|
|
||||||
|
<div class="field">
|
||||||
|
<label>種別</label> <select name="type" onchange="this.form.submit()">
|
||||||
|
<option value="">すべて</option>
|
||||||
|
<option value="equipment" ${type=='equipment' ? 'selected' : '' }>備品</option>
|
||||||
|
<option value="book" ${type=='book' ? 'selected' : '' }>図書</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="field">
|
||||||
|
<label>返却期限</label> <select name="dueStatus" onchange="this.form.submit()">
|
||||||
|
<option value="">すべて</option>
|
||||||
|
<option value="overdue" ${dueStatus=='overdue' ? 'selected' : '' }>超過</option>
|
||||||
|
<option value="normal" ${dueStatus=='normal' ? 'selected' : '' }>未超過</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="button" class="clear-btn"
|
||||||
|
onclick="location.href='${pageContext.request.contextPath}/lendList'">↻
|
||||||
|
クリア</button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="search-card" style="width: 220px;">
|
||||||
|
|
||||||
|
<div class="search-title">並び順</div>
|
||||||
|
|
||||||
|
<select name="sortOrder" onchange="this.form.submit()">
|
||||||
|
<option value="emp_asc" ${sortOrder=='emp_asc' ? 'selected' : '' }>社員ID(昇順)</option>
|
||||||
|
<option value="emp_desc" ${sortOrder=='emp_desc' ? 'selected' : '' }>社員ID(降順)</option>
|
||||||
|
<option value="name_asc" ${sortOrder=='name_asc' ? 'selected' : '' }>名前(50音順)</option>
|
||||||
|
<option value="due_asc" ${empty sortOrder || sortOrder=='due_asc' ? 'selected' : '' }>
|
||||||
|
返却予定日(期限が近い順)</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<!-- 検索結果 -->
|
||||||
|
<div class="result-count">
|
||||||
|
検索結果:
|
||||||
|
<c:out value="${empty lendList ? 0 : lendList.size()}" />
|
||||||
|
件
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="table-card">
|
||||||
|
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>種別</th>
|
||||||
|
<th>社員ID</th>
|
||||||
|
<th>氏名</th>
|
||||||
|
<th>メールアドレス</th>
|
||||||
|
<th>品名 / タイトル</th>
|
||||||
|
<th>管理ID</th>
|
||||||
|
<th>返却予定日</th>
|
||||||
|
<th>超過日数</th>
|
||||||
|
<th>操作</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
|
||||||
|
<tbody>
|
||||||
|
<c:forEach var="item" items="${lendList}">
|
||||||
|
<tr>
|
||||||
|
<td><span class="status status-delay">
|
||||||
|
<c:out value="${item.type}" />
|
||||||
|
</span></td>
|
||||||
|
<td>
|
||||||
|
<c:out value="${item.employeeId}" />
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<c:out value="${item.employeeName}" />
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<c:out value="${empty item.email ? '-' : item.email}" />
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<c:out value="${item.title}" />
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<c:out value="${item.managementId}" />
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<c:out value="${item.dueDate}" />
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<c:choose>
|
||||||
|
<c:when test="${item.overdueDays > 0}">
|
||||||
|
<span class="overdue">
|
||||||
|
<c:out value="${item.overdueDays}" />日
|
||||||
|
</span>
|
||||||
|
</c:when>
|
||||||
|
<c:otherwise>-</c:otherwise>
|
||||||
|
</c:choose>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<button type="button" class="return-btn" onclick="openReturnModal(
|
||||||
|
'${item.lendId}',
|
||||||
|
'${item.type}',
|
||||||
|
'<c:out value=" ${item.title}" />',
|
||||||
|
'
|
||||||
|
<c:out value="${item.managementId}" />',
|
||||||
|
'${item.employeeId}',
|
||||||
|
'
|
||||||
|
<c:out value="${item.employeeName}" />'
|
||||||
|
)">返却</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</c:forEach>
|
||||||
|
|
||||||
|
<c:if test="${empty lendList}">
|
||||||
|
<tr>
|
||||||
|
<td colspan="9" style="text-align: center;">現在、貸出中の対象はありません。</td>
|
||||||
|
</tr>
|
||||||
|
</c:if>
|
||||||
|
</tbody>
|
||||||
|
|
||||||
|
</table>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ページャ -->
|
||||||
|
<div class="pagination">
|
||||||
|
|
||||||
|
<div>
|
||||||
|
1 -
|
||||||
|
<c:out value="${empty lendList ? 0 : lendList.size()}" />
|
||||||
|
件 /
|
||||||
|
<c:out value="${empty lendList ? 0 : lendList.size()}" />
|
||||||
|
件
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="page-buttons">
|
||||||
|
<button class="page-btn"><</button>
|
||||||
|
<button class="page-btn">></button>
|
||||||
|
<button class="page-btn active">1</button>
|
||||||
|
<button class="page-btn">></button>
|
||||||
|
<button class="page-btn">>></button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 注意事項 -->
|
||||||
|
<div class="notice">
|
||||||
|
<div class="notice-title">ⓘ 返却について</div>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
「返却」ボタンを押下すると、貸出の返却処理を行います。<br> 返却処理により、在庫数および貸出ステータスが更新されます。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 返却確認モーダル -->
|
||||||
|
<div id="returnModal" class="modal-overlay">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-title">返却確認</div>
|
||||||
|
|
||||||
|
<table class="modal-info-table">
|
||||||
|
<tr>
|
||||||
|
<th id="modalItemLabel">タイトル</th>
|
||||||
|
<td id="modalItemTitle"></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th id="modalIdLabel">図書管理ID</th>
|
||||||
|
<td id="modalManagementId"></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>社員ID</th>
|
||||||
|
<td id="modalEmployeeId"></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>社員名</th>
|
||||||
|
<td id="modalEmployeeName"></td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<p class="modal-msg">上記内容の返却処理を実行します。よろしいですか?</p>
|
||||||
|
|
||||||
|
<form id="returnForm" action="${pageContext.request.contextPath}/returnBook" method="post">
|
||||||
|
<input type="hidden" name="lendId" id="modalLendId"> <input type="hidden" name="type" id="modalType">
|
||||||
|
<div class="modal-buttons">
|
||||||
|
<button type="submit" class="btn-yes">YES</button>
|
||||||
|
<button type="button" class="btn-no" onclick="closeReturnModal()">NO</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function openReturnModal(lendId, type, title, managementId, employeeId,
|
||||||
|
employeeName) {
|
||||||
|
document.getElementById('modalLendId').value = lendId;
|
||||||
|
document.getElementById('modalType').value = type;
|
||||||
|
|
||||||
|
// 備品 / 図書 に応じてラベルを変更
|
||||||
|
if (type === '備品') {
|
||||||
|
document.getElementById('modalItemLabel').innerText = '型番名';
|
||||||
|
document.getElementById('modalIdLabel').innerText = '備品ID';
|
||||||
|
} else {
|
||||||
|
document.getElementById('modalItemLabel').innerText = 'タイトル';
|
||||||
|
document.getElementById('modalIdLabel').innerText = '図書管理ID';
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById('modalItemTitle').innerText = title;
|
||||||
|
document.getElementById('modalManagementId').innerText = managementId;
|
||||||
|
document.getElementById('modalEmployeeId').innerText = employeeId;
|
||||||
|
document.getElementById('modalEmployeeName').innerText = employeeName;
|
||||||
|
|
||||||
|
document.getElementById('returnModal').style.display = 'flex';
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeReturnModal() {
|
||||||
|
document.getElementById('returnModal').style.display = 'none';
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
940
src/main/resources/templates/passwordChange.html
Normal file
940
src/main/resources/templates/passwordChange.html
Normal file
@@ -0,0 +1,940 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ja">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>パスワード再設定 | 社内備品・図書管理システム</title>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo",
|
||||||
|
sans-serif;
|
||||||
|
background-color: #f4f6f9;
|
||||||
|
color: #33404f;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== ヘッダー ===== */
|
||||||
|
.header-bar {
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 14px 24px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-left {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-left svg {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 18px;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bell-wrap {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bell-wrap svg {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bell-badge {
|
||||||
|
position: absolute;
|
||||||
|
top: -6px;
|
||||||
|
right: -6px;
|
||||||
|
background-color: #e5484d;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 10px;
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logout {
|
||||||
|
height: 34px;
|
||||||
|
padding: 0 14px;
|
||||||
|
border: 1px solid #a8b3c0;
|
||||||
|
border-radius: 5px;
|
||||||
|
background: #fff;
|
||||||
|
font-weight: bold;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== 全体レイアウト ===== */
|
||||||
|
.layout {
|
||||||
|
display: flex;
|
||||||
|
min-height: calc(100vh - 52px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== サイドバー ===== */
|
||||||
|
.sidebar {
|
||||||
|
width: 210px;
|
||||||
|
background-color: #16325c;
|
||||||
|
color: #cdd9ea;
|
||||||
|
padding: 18px 0;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar .section-label {
|
||||||
|
font-size: 11px;
|
||||||
|
color: #8ea2c0;
|
||||||
|
padding: 6px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar a {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
color: #cdd9ea;
|
||||||
|
text-decoration: none;
|
||||||
|
padding: 11px 20px;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar a svg {
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar a.active {
|
||||||
|
background-color: #1a56c4;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar a:hover:not(.active) {
|
||||||
|
background-color: #1e3a66;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== メインエリア ===== */
|
||||||
|
.main-area {
|
||||||
|
flex: 1;
|
||||||
|
padding: 24px 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumb {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #8892a0;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumb a {
|
||||||
|
color: #8892a0;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-title {
|
||||||
|
font-size: 22px;
|
||||||
|
margin: 0 0 6px;
|
||||||
|
color: #1c2733;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-desc {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #6b7686;
|
||||||
|
margin: 0 0 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.required-note {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #c0392b;
|
||||||
|
margin: 0 0 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert {
|
||||||
|
font-size: 13px;
|
||||||
|
padding: 12px 16px;
|
||||||
|
border-radius: 6px;
|
||||||
|
margin-bottom: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-error {
|
||||||
|
background-color: #fdecea;
|
||||||
|
color: #c0392b;
|
||||||
|
border: 1px solid #f5c6c6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-success {
|
||||||
|
background-color: #eafaf0;
|
||||||
|
color: #1e7e42;
|
||||||
|
border: 1px solid #b7ecc9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-columns {
|
||||||
|
display: flex;
|
||||||
|
gap: 20px;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-column {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-column {
|
||||||
|
width: 260px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== 入力カード ===== */
|
||||||
|
.form-card {
|
||||||
|
background: #ffffff;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 24px 26px;
|
||||||
|
box-shadow: 0 2px 10px rgba(20, 40, 70, 0.06);
|
||||||
|
margin-bottom: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-card h2 {
|
||||||
|
font-size: 14px;
|
||||||
|
margin: 0 0 18px;
|
||||||
|
color: #1c2733;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group {
|
||||||
|
margin-bottom: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group label {
|
||||||
|
display: block;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #33404f;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group label .req {
|
||||||
|
color: #c0392b;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-with-icon {
|
||||||
|
position: relative;
|
||||||
|
max-width: 420px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-with-icon input {
|
||||||
|
width: 100%;
|
||||||
|
padding: 10px 36px 10px 12px;
|
||||||
|
font-size: 14px;
|
||||||
|
border: 1px solid #d7dde5;
|
||||||
|
border-radius: 6px;
|
||||||
|
background-color: #fafbfc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-with-icon input:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: #1a56c4;
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-password {
|
||||||
|
position: absolute;
|
||||||
|
right: 12px;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
color: #9aa4b2;
|
||||||
|
cursor: pointer;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field-hint {
|
||||||
|
font-size: 11px;
|
||||||
|
color: #8892a0;
|
||||||
|
margin: 6px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== 注意事項 ===== */
|
||||||
|
.notice-box {
|
||||||
|
background-color: #fdf6e3;
|
||||||
|
border: 1px solid #f0e0ad;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 16px 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notice-box .notice-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #8a6d1f;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notice-box .notice-title svg {
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notice-box ul {
|
||||||
|
margin: 0;
|
||||||
|
padding-left: 18px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #6b5c2e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notice-box li {
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== 右側:パスワード制約 ===== */
|
||||||
|
.constraint-panel {
|
||||||
|
background: #ffffff;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 20px;
|
||||||
|
box-shadow: 0 2px 10px rgba(20, 40, 70, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
.constraint-panel .panel-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #1c2733;
|
||||||
|
margin-bottom: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.constraint-panel .panel-title svg {
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
color: #1a56c4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group-label {
|
||||||
|
font-size: 11px;
|
||||||
|
color: #8892a0;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chars-value {
|
||||||
|
font-size: 13px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.constraint-panel hr {
|
||||||
|
border: none;
|
||||||
|
border-top: 1px dashed #e2e6ec;
|
||||||
|
margin: 12px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.constraint-list {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.constraint-list li {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 7px;
|
||||||
|
margin-bottom: 9px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.constraint-list svg {
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
color: #2e9e5b;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.example-box {
|
||||||
|
background-color: #eef4fc;
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 10px 12px;
|
||||||
|
margin-top: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.example-label {
|
||||||
|
font-size: 11px;
|
||||||
|
color: #6b7686;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.example-value {
|
||||||
|
font-family: "Consolas", monospace;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #1c2733;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.example-note {
|
||||||
|
font-size: 10px;
|
||||||
|
color: #8892a0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== ボタン ===== */
|
||||||
|
.button-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
font-size: 13px;
|
||||||
|
padding: 10px 20px;
|
||||||
|
border-radius: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
border: 1px solid #d7dde5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
background-color: #ffffff;
|
||||||
|
color: #33404f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background-color: #1a56c4;
|
||||||
|
color: #ffffff;
|
||||||
|
border: none;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover {
|
||||||
|
background-color: #15479f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-group-right {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== フッター ===== */
|
||||||
|
.footer {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 11px;
|
||||||
|
color: #9aa4b2;
|
||||||
|
padding: 16px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== ポップアップ ===== */
|
||||||
|
.modal-overlay {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 1000;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: rgba(0, 0, 0, 0.45);
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-overlay.show {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal {
|
||||||
|
width: 400px;
|
||||||
|
max-width: 90%;
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 28px;
|
||||||
|
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-title {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #1c2733;
|
||||||
|
margin-bottom: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-message {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #5f6b7a;
|
||||||
|
line-height: 1.7;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
white-space: pre-line;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-buttons {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-buttons button {
|
||||||
|
min-width: 90px;
|
||||||
|
padding: 9px 18px;
|
||||||
|
border-radius: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-cancel {
|
||||||
|
background-color: #ffffff;
|
||||||
|
color: #33404f;
|
||||||
|
border: 1px solid #d7dde5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-confirm {
|
||||||
|
background-color: #1a56c4;
|
||||||
|
color: #ffffff;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-error .modal-title {
|
||||||
|
color: #c0392b;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- ヘッダー -->
|
||||||
|
<div class="header-bar">
|
||||||
|
|
||||||
|
<div class="header-left">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||||
|
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" />
|
||||||
|
<path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" />
|
||||||
|
</svg>
|
||||||
|
社内備品・図書管理システム
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="header-right">
|
||||||
|
|
||||||
|
<span class="user">
|
||||||
|
<%=session.getAttribute("employeeName")%>(<%=roleName%>)
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<form action="${pageContext.request.contextPath}/logout"
|
||||||
|
method="post" onsubmit="return confirm('ログアウトしますか?');">
|
||||||
|
|
||||||
|
<button type="submit" class="logout">
|
||||||
|
ログアウト
|
||||||
|
</button>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- パスワード変更完了後、セッションを破棄してログイン画面へ戻すための隠しフォーム -->
|
||||||
|
<form id="logoutAfterPasswordChangeForm" method="post"
|
||||||
|
action="${pageContext.request.contextPath}/logout"
|
||||||
|
style="display: none;"></form>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="layout">
|
||||||
|
|
||||||
|
<!-- サイドバー -->
|
||||||
|
<div class="sidebar">
|
||||||
|
|
||||||
|
<div class="section-label">共通画面</div>
|
||||||
|
|
||||||
|
<a class="side-menu"
|
||||||
|
href="${pageContext.request.contextPath}/topmenu.jsp"> トップメニュー </a>
|
||||||
|
|
||||||
|
<a href="#" class="active"> パスワード再設定 </a>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- メイン -->
|
||||||
|
<div class="main-area">
|
||||||
|
|
||||||
|
<div class="breadcrumb">
|
||||||
|
<a href="#">トップメニュー</a> > パスワード再設定
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 class="page-title">パスワード再設定</h1>
|
||||||
|
|
||||||
|
<p class="page-desc">現在のパスワードと新しいパスワードを入力し、「確定」ボタンを押してください。</p>
|
||||||
|
|
||||||
|
<p class="required-note">(※)は必須項目です。</p>
|
||||||
|
|
||||||
|
<%
|
||||||
|
if (errorMessage != null) {
|
||||||
|
%>
|
||||||
|
<div class="alert alert-error"><%=errorMessage%></div>
|
||||||
|
<%
|
||||||
|
}
|
||||||
|
%>
|
||||||
|
|
||||||
|
<%
|
||||||
|
if (successMessage != null) {
|
||||||
|
%>
|
||||||
|
<div class="alert alert-success"><%=successMessage%></div>
|
||||||
|
<%
|
||||||
|
}
|
||||||
|
%>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="content-columns">
|
||||||
|
|
||||||
|
<!-- 左カラム -->
|
||||||
|
<div class="left-column">
|
||||||
|
|
||||||
|
<div class="form-card">
|
||||||
|
|
||||||
|
<h2>パスワード再設定入力</h2>
|
||||||
|
|
||||||
|
<form id="pwForm" method="post"
|
||||||
|
action="${pageContext.request.contextPath}/PasswordChangeServlet">
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 現在のパスワード -->
|
||||||
|
<div class="form-group">
|
||||||
|
|
||||||
|
<label for="currentPassword"> 現在のパスワード <span class="req">(※)</span>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<div class="input-with-icon">
|
||||||
|
|
||||||
|
<input type="password" id="currentPassword"
|
||||||
|
name="currentPassword" autocomplete="current-password"
|
||||||
|
placeholder="現在のパスワードを入力してください">
|
||||||
|
|
||||||
|
<button type="button" class="toggle-password"
|
||||||
|
onclick="togglePassword('currentPassword')">
|
||||||
|
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||||
|
stroke-width="2" stroke-linecap="round"
|
||||||
|
stroke-linejoin="round">
|
||||||
|
|
||||||
|
<path
|
||||||
|
d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
|
||||||
|
<circle cx="12" cy="12" r="3" />
|
||||||
|
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
</button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 新しいパスワード -->
|
||||||
|
<div class="form-group">
|
||||||
|
|
||||||
|
<label for="newPassword"> 新しいパスワード <span class="req">(※)</span>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<div class="input-with-icon">
|
||||||
|
|
||||||
|
<input type="password" id="newPassword" name="newPassword"
|
||||||
|
autocomplete="new-password" placeholder="新しいパスワードを入力してください">
|
||||||
|
|
||||||
|
<button type="button" class="toggle-password"
|
||||||
|
onclick="togglePassword('newPassword')">
|
||||||
|
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||||
|
stroke-width="2" stroke-linecap="round"
|
||||||
|
stroke-linejoin="round">
|
||||||
|
|
||||||
|
<path
|
||||||
|
d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
|
||||||
|
<circle cx="12" cy="12" r="3" />
|
||||||
|
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
</button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="field-hint">※ 半角英数字・記号を含む8文字以上16文字以下で入力してください。</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 確認用パスワード -->
|
||||||
|
<div class="form-group">
|
||||||
|
</from>
|
||||||
|
|
||||||
|
<label for="confirmPassword"> 新しいパスワードの確認 <span
|
||||||
|
class="req">(※)</span>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<div class="input-with-icon">
|
||||||
|
|
||||||
|
<input type="password" id="confirmPassword"
|
||||||
|
name="confirmPassword" autocomplete="new-password"
|
||||||
|
placeholder="新しいパスワードをもう一度入力してください">
|
||||||
|
|
||||||
|
<button type="button" class="toggle-password"
|
||||||
|
onclick="togglePassword('confirmPassword')">
|
||||||
|
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||||
|
stroke-width="2" stroke-linecap="round"
|
||||||
|
stroke-linejoin="round">
|
||||||
|
|
||||||
|
<path
|
||||||
|
d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
|
||||||
|
<circle cx="12" cy="12" r="3" />
|
||||||
|
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
</button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="field-hint">※ 確認のため、もう一度新しいパスワードを入力してください。</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 注意事項 -->
|
||||||
|
<div class="notice-box">
|
||||||
|
|
||||||
|
<div class="notice-title">注意事項</div>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li>「確定」ボタンを押した時点で、入力内容のチェックが行われます。</li>
|
||||||
|
<li>エラーがある場合は、該当するメッセージをポップアップで表示します。</li>
|
||||||
|
<li>エラーがない場合は、確認のポップアップが表示されます。</li>
|
||||||
|
<li>パスワードを変更した後は、再度ログインしてください。</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- ボタン -->
|
||||||
|
<div class="button-row">
|
||||||
|
|
||||||
|
<button type="button" class="btn btn-secondary"
|
||||||
|
onclick="goTopMenu()">トップメニューへ戻る</button>
|
||||||
|
|
||||||
|
<div class="btn-group-right">
|
||||||
|
|
||||||
|
<button type="button" class="btn btn-secondary"
|
||||||
|
onclick="clearForm()">クリア</button>
|
||||||
|
|
||||||
|
<button type="button" class="btn btn-primary"
|
||||||
|
onclick="showConfirmPopup()">確定</button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 右カラム -->
|
||||||
|
<div class="right-column">
|
||||||
|
|
||||||
|
<div class="constraint-panel">
|
||||||
|
|
||||||
|
<div class="panel-title">パスワードの制約</div>
|
||||||
|
|
||||||
|
<div class="group-label">使用可能文字</div>
|
||||||
|
|
||||||
|
<div class="chars-value">半角英数字・記号</div>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<div class="group-label">制約</div>
|
||||||
|
|
||||||
|
<ul class="constraint-list">
|
||||||
|
|
||||||
|
<li>✓ 8文字以上16文字以下</li>
|
||||||
|
<li>✓ 1つ以上の小文字を使用</li>
|
||||||
|
<li>✓ 1つ以上の大文字を使用</li>
|
||||||
|
<li>✓ 1つ以上の数字を使用</li>
|
||||||
|
<li>✓ 1つ以上の記号を使用</li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div class="example-box">
|
||||||
|
|
||||||
|
<div class="example-label">設定例</div>
|
||||||
|
|
||||||
|
<div class="example-value">Abcdef12!</div>
|
||||||
|
|
||||||
|
<div class="example-note">(9文字、英字大小・数字・記号を含む)</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="footer">© 2024 社内備品・図書管理システム</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- ===== ポップアップ ===== -->
|
||||||
|
|
||||||
|
<div id="modalOverlay" class="modal-overlay">
|
||||||
|
|
||||||
|
<div class="modal">
|
||||||
|
|
||||||
|
<div id="modalTitle" class="modal-title">パスワードを更新してよろしいですか?</div>
|
||||||
|
|
||||||
|
<div id="modalMessage" class="modal-message">入力したパスワードを更新します。</div>
|
||||||
|
|
||||||
|
<div class="modal-buttons">
|
||||||
|
|
||||||
|
<button type="button" id="modalCancel" class="modal-cancel"
|
||||||
|
onclick="closePopup()">いいえ</button>
|
||||||
|
|
||||||
|
<button type="button" id="modalConfirm" class="modal-confirm"
|
||||||
|
onclick="confirmUpdate()">はい</button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
/* パスワード表示・非表示 */
|
||||||
|
function togglePassword(id) {
|
||||||
|
const input = document.getElementById(id);
|
||||||
|
input.type = (input.type === "password") ? "text" : "password";
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 入力欄をクリア */
|
||||||
|
function clearForm() {
|
||||||
|
document.getElementById("currentPassword").value = "";
|
||||||
|
document.getElementById("newPassword").value = "";
|
||||||
|
document.getElementById("confirmPassword").value = "";
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ポップアップを表示 */
|
||||||
|
function openPopup(title, message, mode, onConfirm) {
|
||||||
|
|
||||||
|
document.getElementById("modalTitle").textContent = title;
|
||||||
|
document.getElementById("modalMessage").textContent = message;
|
||||||
|
|
||||||
|
const cancelButton = document.getElementById("modalCancel");
|
||||||
|
const confirmButton = document.getElementById("modalConfirm");
|
||||||
|
|
||||||
|
if (mode === "error") {
|
||||||
|
cancelButton.style.display = "none";
|
||||||
|
confirmButton.textContent = "閉じる";
|
||||||
|
confirmButton.onclick = closePopup;
|
||||||
|
} else {
|
||||||
|
cancelButton.style.display = "inline-block";
|
||||||
|
confirmButton.textContent = "はい";
|
||||||
|
confirmButton.onclick = onConfirm || closePopup;
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById("modalOverlay").classList.add("show");
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ポップアップを閉じる */
|
||||||
|
function closePopup() {
|
||||||
|
document.getElementById("modalOverlay").classList.remove("show");
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 確定ボタン:ここではDBに聞かなくても分かる項目だけをチェックする */
|
||||||
|
function showConfirmPopup() {
|
||||||
|
|
||||||
|
const currentPassword = document.getElementById("currentPassword").value;
|
||||||
|
const newPassword = document.getElementById("newPassword").value;
|
||||||
|
const confirmPassword = document.getElementById("confirmPassword").value;
|
||||||
|
|
||||||
|
if (currentPassword === "") {
|
||||||
|
openPopup("入力エラー", "現在のパスワードを入力してください。", "error");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (newPassword === "") {
|
||||||
|
openPopup("入力エラー", "新しいパスワードを入力してください。", "error");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (confirmPassword === "") {
|
||||||
|
openPopup("入力エラー", "新しいパスワードの確認を入力してください。", "error");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const passwordPattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^A-Za-z0-9]).{8,16}$/;
|
||||||
|
if (!passwordPattern.test(newPassword)) {
|
||||||
|
openPopup("入力エラー", "パスワードの制約を満たしていません。", "error");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (currentPassword === newPassword) {
|
||||||
|
openPopup("入力エラー", "現在のパスワードと異なるパスワードを設定してください。", "error");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (newPassword !== confirmPassword) {
|
||||||
|
openPopup("入力エラー", "新しいパスワードと確認用パスワードが一致しません。", "error");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ここまでの判定はOK。現在のパスワードが正しいかはサーバーでしか分からないので、
|
||||||
|
// 確認後に通常のフォーム送信でサーバーに任せる。
|
||||||
|
openPopup(
|
||||||
|
"パスワードを更新してよろしいですか?",
|
||||||
|
"入力したパスワードに更新します。",
|
||||||
|
"confirm",
|
||||||
|
function () {
|
||||||
|
document.getElementById("pwForm").submit();
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* トップメニューへ戻る */
|
||||||
|
function goTopMenu() {
|
||||||
|
location.href = "${pageContext.request.contextPath}/topmenu.jsp";
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ページを開いた直後、サーバー側の結果に応じて自動的にポップアップ表示する */
|
||||||
|
window.addEventListener("DOMContentLoaded", function () {
|
||||||
|
<%if (errorMessage != null) {%>
|
||||||
|
openPopup("入力エラー", "<%=errorMessage%>
|
||||||
|
", "error");
|
||||||
|
<%} else if (successMessage != null) {%>
|
||||||
|
openPopup(
|
||||||
|
"更新完了",
|
||||||
|
"パスワードを更新しました。\nログイン画面に戻ります。",
|
||||||
|
"confirm",
|
||||||
|
function() {
|
||||||
|
// 既存のログアウト処理(セッション破棄+login.jspへ遷移)をそのまま利用する
|
||||||
|
document
|
||||||
|
.getElementById(
|
||||||
|
"logoutAfterPasswordChangeForm")
|
||||||
|
.submit();
|
||||||
|
});
|
||||||
|
document.getElementById("modalCancel").style.display = "none";
|
||||||
|
document.getElementById("modalConfirm").textContent = "閉じる";
|
||||||
|
<%}%>
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -464,8 +464,10 @@
|
|||||||
<%=session.getAttribute("employeeName")%>(<%=roleName%>)
|
<%=session.getAttribute("employeeName")%>(<%=roleName%>)
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<form action="${pageContext.request.contextPath}/logout" method="post"
|
<!-- <form action="${pageContext.request.contextPath}/logout" method="post"-->
|
||||||
onsubmit="return confirm('ログアウトしますか?');">
|
<!-- onsubmit="return confirm('ログアウトしますか?');">-->
|
||||||
|
|
||||||
|
<a th:href="@{/logout}" class="btn" method="post" onsubmit="return confirm('ログアウトしますか?');">
|
||||||
|
|
||||||
<button type="submit" class="logout">ログアウト</button>
|
<button type="submit" class="logout">ログアウト</button>
|
||||||
|
|
||||||
@@ -523,7 +525,9 @@
|
|||||||
<div class="menu-grid <%=isAdmin ? " admin-grid" : "user-grid" %>">
|
<div class="menu-grid <%=isAdmin ? " admin-grid" : "user-grid" %>">
|
||||||
|
|
||||||
<!-- ===== 共通:社内図書一覧 ===== -->
|
<!-- ===== 共通:社内図書一覧 ===== -->
|
||||||
<a class="card" href="${pageContext.request.contextPath}/BookServlet">
|
|
||||||
|
<!-- <a class="card" href="${pageContext.request.contextPath}/BookServlet">-->
|
||||||
|
<a th:href="@{/book}" class="btn">
|
||||||
|
|
||||||
<div class="icon green">📖</div>
|
<div class="icon green">📖</div>
|
||||||
|
|
||||||
@@ -537,7 +541,9 @@
|
|||||||
<!-- ===== 管理者のみ ===== -->
|
<!-- ===== 管理者のみ ===== -->
|
||||||
<% if (isAdmin) { %>
|
<% if (isAdmin) { %>
|
||||||
|
|
||||||
<a class="card" href="${pageContext.request.contextPath}/lendList">
|
<!-- <a class="card" href="${pageContext.request.contextPath}/lendList">-->
|
||||||
|
|
||||||
|
<a th:href="@{/lendlist}" class="btn">
|
||||||
<div class="icon orange">📅</div>
|
<div class="icon orange">📅</div>
|
||||||
|
|
||||||
<h3>
|
<h3>
|
||||||
@@ -551,7 +557,9 @@
|
|||||||
<span class="arrow"></span>
|
<span class="arrow"></span>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a class="card" href="${pageContext.request.contextPath}/approvalReceive">
|
<!-- <a class="card" href="${pageContext.request.contextPath}/approvalReceive">-->
|
||||||
|
|
||||||
|
<a th:href="@{/approvalReceive}" class="btn">
|
||||||
<div class="icon red">▱</div>
|
<div class="icon red">▱</div>
|
||||||
|
|
||||||
<h3>
|
<h3>
|
||||||
@@ -575,7 +583,9 @@
|
|||||||
<div class="menu-grid <%=isAdmin ? " admin-grid" : "user-grid" %>">
|
<div class="menu-grid <%=isAdmin ? " admin-grid" : "user-grid" %>">
|
||||||
|
|
||||||
<!-- ===== 共通:寄贈申請 ===== -->
|
<!-- ===== 共通:寄贈申請 ===== -->
|
||||||
<a class="card" href="${pageContext.request.contextPath}/bookApproval">
|
<!-- <a class="card" href="${pageContext.request.contextPath}/bookApproval">-->
|
||||||
|
|
||||||
|
<a th:href="@{/bookApproval}" class="btn">
|
||||||
|
|
||||||
<div class="icon yellow">📗</div>
|
<div class="icon yellow">📗</div>
|
||||||
|
|
||||||
@@ -590,7 +600,9 @@
|
|||||||
|
|
||||||
<% if (isAdmin) { %>
|
<% if (isAdmin) { %>
|
||||||
|
|
||||||
<a class="card" href="${pageContext.request.contextPath}/insertBook">
|
<!-- <a class="card" href="${pageContext.request.contextPath}/insertBook">-->
|
||||||
|
|
||||||
|
<a th:href="@{/bookInsert}" class="btn">
|
||||||
|
|
||||||
<div class="icon yellow">📗</div>
|
<div class="icon yellow">📗</div>
|
||||||
|
|
||||||
@@ -615,7 +627,9 @@
|
|||||||
|
|
||||||
<h2 class="section-title">システム管理メニュー</h2>
|
<h2 class="section-title">システム管理メニュー</h2>
|
||||||
|
|
||||||
<a class="system-card" href="passwordChange.jsp">
|
<!-- <a class="system-card" href="passwordChange.jsp">-->
|
||||||
|
|
||||||
|
<a th:href="@{/passwordChange}" class="btn">
|
||||||
|
|
||||||
<div class="system-icon">🔑</div>
|
<div class="system-icon">🔑</div>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user