974 lines
18 KiB
HTML
974 lines
18 KiB
HTML
<!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> |