Skip to content

E
Ecsite
Commit eb81abc9 authored by shoei.kanno's avatar shoei.kanno
Browse files
Options

宮島さん作成デザイン追加

parent 9425bde9
Hide whitespace changes
Inline Side-by-side
Showing with 395 additions and 42 deletions
src/main/java/com/example/SecurityConfig.java
View file @ eb81abc9
......@@ -14,7 +14,7 @@ public class SecurityConfig extends WebSecurityConfigurerAdapter{
@Override
public void configure(WebSecurity web) throws Exception{
web.debug(false).ignoring().antMatchers("/images/**", "/js/**", "/css/**");
web.debug(false).ignoring().antMatchers("/images/**", "/js/**", "/css/**", "/fonts/**");
}
@Override
......
src/main/java/com/example/domain/Shoes.java
View file @ eb81abc9
......@@ -17,15 +17,15 @@ import lombok.Setter;
public class Shoes {
@Id
@GeneratedValue
private Integer Id;
private Integer id;
@Column(nullable=false)
private String Name;
private String name;
@Column(nullable=false)
private Integer Price;
private Integer price;
@Column(nullable=false)
private Integer Stock;
private Integer stock;
@Column(nullable=false)
private Integer Size;
private Integer size;
@Column(nullable=false)
private Integer productStatus;
@Column(nullable=false)
......
src/main/java/com/example/web/EcsiteController.java
View file @ eb81abc9
......@@ -88,7 +88,7 @@ public class EcsiteController {
//靴の処理した画像を一括で取得する
model.addAttribute("shoesPhoto", shoesPhoto);
//遷移先 未設定
return "Hello world";
return "list";
}
//購入履歴画面
......
src/main/resources/static/css/style.css
View file @ eb81abc9
......@@ -1807,22 +1807,27 @@ label {
width: 100%;
display: flex;
}
#sidebar {
height: 100%;
width: 20%;
border-right: 1px gray solid;
}
.sidebar_title {
margin:10px;
}
.sidebar_title_name {
display: block;
margin: 0 auto;
}
#mainbody {
height: 100%;
width: 80%;
}
.ma_header {
border-bottom: 1px gray solid;
height: 10%;
......@@ -1830,34 +1835,97 @@ label {
font-size: large;
font-weight: bold;
}
#user_list {
#user_list, #shoe_list {
padding: 20px;
}
th, td {
padding: 10px;
}
#roleBtn {
margin: 10px;
}
#newShoesForm {
border-bottom: 1px gray solid;
height: 15%;
padding: 10px;
}
#newShoesFormTitle, #shoesListTitle {
padding: 5px;
font-size: large;
font-weight: bold;
}
#newShoesFormBtn, #ShoesEditBtn {
display: block;
margin: 0 0 0 auto;
padding: 5px;
margin-bottom: 5px;
margin-right: 5px;
margin-right: 5px;;
}
#ShoesEditForm {
border-bottom: 1px gray dashed;
height: 15%;
padding: 10px;
}
/* list画面 */
#listBox {
background-color: #FDF5E6;
height: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.productBox {
height: 30%;
width: 30%;
border: 1px solid black;
margin: 5px;
}
/* listモーダル */
#modal-content {
width: 50% ;
margin: 0 ;
padding: 10px 20px ;
border: 2px solid #aaa ;
background: #fff ;
position: fixed ;
display: none ;
z-index: 2 ;
}
#modal-content-innar{
margin:0 auto;
width:80%;
}
#modal-overlay {
z-index: 1 ;
display: none ;
position: fixed ;
top: 0 ;
left: 0 ;
width: 100% ;
height: 120% ;
background-color: rgba( 0,0,0, 0.75 ) ;
}
.button-link {
color: #00f ;
text-decoration: underline ;
}
.button-link:hover {
cursor: pointer ;
color: #f00 ;
}
\ No newline at end of file
src/main/resources/static/js/list.js 0 → 100644
View file @ eb81abc9
$(function(){
$("#modal-open").click(function(event){
$('#showName').empty();
$('#showPrice').empty();
//以下デモ参照
//キーボード操作などにより、オーバーレイが多重起動するのを防止する
// $( this ).blur() ; //ボタンからフォーカスを外す
// if( $( "#modal-overlay" )[0] ) return false ; //新しくモーダルウィンドウを起動しない (防止策1)
// //if($("#modal-overlay")[0]) $("#modal-overlay").remove() ; //現在のモーダルウィンドウを削除して新しく起動する (防止策2)
//オーバーレイを出現させる
$( "body" ).append( '<div id="modal-overlay"></div>' ) ;
$( "#modal-overlay" ).fadeIn( "slow" ) ;
//コンテンツをセンタリングする
centeringModalSyncer() ;
//コンテンツをフェードインする
$( "#modal-content" ).fadeIn( "slow" ) ;
//一覧画面から情報取得
let nameField = document.createElement("a");
let priceField = document.createElement("a");
let name = $(event.target.parentNode.children[1].textContent);
let price =$(event.target.parentNode.children[2].textContent);
nameField.textContent = name.selector;
$('#showName').append(nameField);
priceField.textContent = price.selector;
$('#showPrice').append(priceField);
//[#modal-overlay]、または[#modal-close]をクリックしたら…
$( "#modal-overlay,#modal-close" ).unbind().click( function(){
//[#modal-content]と[#modal-overlay]をフェードアウトした後に…
$( "#modal-content,#modal-overlay" ).fadeOut( "slow" , function(){
//[#modal-overlay]を削除する
$('#modal-overlay').remove() ;
} ) ;
} ) ;
} ) ;
//リサイズされたら、センタリングをする関数[centeringModalSyncer()]を実行する
$( window ).resize( centeringModalSyncer ) ;
//センタリングを実行する関数
function centeringModalSyncer() {
//画面(ウィンドウ)の幅、高さを取得
var w = $( window ).width() ;
var h = $( window ).height() ;
// コンテンツ(#modal-content)の幅、高さを取得
// jQueryのバージョンによっては、引数[{margin:true}]を指定した時、不具合を起こします。
var cw = $( "#modal-content" ).outerWidth( {margin:true} );
var ch = $( "#modal-content" ).outerHeight( {margin:true} );
var cw = $( "#modal-content" ).outerWidth();
var ch = $( "#modal-content" ).outerHeight();
//センタリングを実行する
$( "#modal-content" ).css( {"left": ((w - cw)/2) + "px","top": ((h - ch)/2) + "px"} ) ;
}
} ) ;
src/main/resources/static/js/management.js
View file @ eb81abc9
......@@ -20,4 +20,13 @@ $('#roleBtn').on('click', function(){
$('#shoe_button').on('click', function(){
$('#user_management').hide();
$('#shoe_management').show();
})
//商品削除確認アラート
$('#shoeDeleteBtn').on('click', function(){
if(!confirm('本当に商品情報を削除しますか?')) {
return false;
}else{
//削除機能への遷移
}
})
\ No newline at end of file
src/main/resources/templates/list.html 0 → 100644
View file @ eb81abc9
<!DOCTYPE html>
<html class="no-js" lang="ja">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<title>Limited</title>
<meta name="description" content=""/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="icon" href="images/favicon.png"/>
<link rel="stylesheet" href="css/style.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"
integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
​
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script>window.html5 || document.write('<script src="js/vendor/html5shiv.js"><\/script>')</script>
<![endif]-->
</head>
<body>
<!-- モーダル中身 -->
<div id="modal-content">
<div id="modal-content-innar">
<!-- モーダルウィンドウのコンテンツ開始 -->
<img class="shoeImage" alt="productImage">
<div id="showName"></div>
<div id="showPrice"></div>
<p><a id="modal-close" class="button-link">閉じる</a></p>
<button type="button" class="cartBtn">cartへ入れる</button>
</div>
<!-- モーダルウィンドウのコンテンツ終了 -->
</div>
<section class="header-top-section">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="header-top-content">
<ul class="nav nav-pills navbar-left">
<li><a href="#"><i class="pe-7s-call"></i><span>123-123456789</span></a></li>
<li><a href="#"><i class="pe-7s-mail"></i><span> info@mart.com</span></a></li>
</ul>
</div>
</div>
<div class="col-md-6">
<div class="header-top-menu">
<ul class="nav nav-pills navbar-right">
<!-- 履歴ページへ遷移 -->
<li><a th:href="@{/log/{id}(id=${user.id})}">My Purchase Log</a></li>
<!-- カートページへ遷移 -->
<li><a th:href="@{/cart/{id}(id=${user.id})}">Cart</a></li>
<!-- ログアウト -->
<li><form th:action="@{/logout}" method="post"><input type="submit" value="logout" style="border:none;background-color:transparent;text-decoration:none;" class="logoutBtn"/></form></li>
</ul>
</div>
</div>
</div>
</div>
</section>
<header class="header-section">
<nav class="navbar navbar-default">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><b>L</b>imited</a>
</div>
</div>
</nav>
</header>
<section class="search-section">
<div class="container">
<div class="row subscribe-from">
<div class="col-md-12">
<form class="form-inline col-md-12 wow fadeInDown animated">
<div class="form-group">
<input type="email" class="form-control subscribe" id="email" placeholder="Search...">
<button class="suscribe-btn" ><i class="pe-7s-search"></i></button>
</div>
</form><!-- end /. form -->
</div>
</div><!-- end of/. row -->
</div><!-- end of /.container -->
</section><!-- end of /.news letter section -->
<!--一覧-->
<div id="listBox">
<!--each分でくりかえす(宮嶋)-->
<div class="productBox" th:each="shoe : ${shoes}">
<img class="shoeImage" src="images/スニーカー3.jpg" alt="productImage">
<a text = ${shoe.name} class="shoeName">AirMAX</a>
<a text = ${shoe.price} class="shoePrice">￥10,000</a>
<button type="button" id="modal-open" class="button-link">詳細</button>
</div>
<!--デモ用のダミー-->
<div class="productBox">box</div>
<div class="productBox">box</div>
<div class="productBox">box</div>
<div class="productBox">box</div>
<div class="productBox">box</div>
<div class="productBox">box</div>
</div>
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-md-12">
<p class="center">Made with <i class="fa fa-heart"></i> by <a href="#" target="_blank">Revolthemes</a>. All Rights Reserved</p>
</div>
</div>
</div>
</footer>
​
<!-- JQUERY -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/list.js" th:src="@{/js/list.js}"></script>
</body>
</html>
src/main/resources/templates/management.html
View file @ eb81abc9
<!doctype html>
<html class="no-js" lang="en">
<html class="no-js" lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
......@@ -90,38 +90,38 @@
<!-- 在庫一覧 eachで繰り返し -->
<div id="shoesListTitle">在庫一覧</div>
<form id="ShoesEditForm">
<span>ID:<div name="id" th:text=""></div></span>
<span>商品名：<input type="text" name="name" placeholder="name"/></span>
<span>価格：<input type="text" name="price" placeholder="price"/></span>
<!-- <span>在庫数：<select name="stock">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select></span> -->
<span>在庫数：<input type="number" name="stock"/></span>
<span>サイズ：<select name="size_id">
<option value="1">24</option>
<option value="2">24.5</option>
<option value="3">25</option>
<option value="4">25.5</option>
<option value="5">26</option>
<option value="6">26.5</option>
<option value="7">27</option>
<option value="8">27.5</option>
<option value="9">28</option>
<option value="10">28.5</option>
</select></span>
<div>商品画像<input type="file" name="photo"></div>
<button type="button" id="ShoesEditBtn">変更確定</button>
</form>
<div id="shoe_list">
<table id="show_list_table" border="1">
<tr>
<th>ID</th>
<th>商品名</th>
<th>価格</th>
<th>在庫数</th>
<th>商品画像</th>
<th>編集</th>
<th>削除</th>
</tr>
<tr th:each="">
<td th:text="">1</td>
<td th:text="">AirMax</td>
<td th:text="">¥10,000</td>
<td th:text="">10</td>
<td></td>
<td>
<form th:action="@{/shoes/edit}" method="get">
<input type="submit" name="form" value="編集"/>
<input type="hidden" name="id" th:value=""/>
</form>
</td>
<td>
<form th:action="@{/shoes/delete}" method="post">
<input type="button" name="form" value="削除" id="shoeDeleteBtn"/>
<input type="hidden" name="id" th:value=""/>
</form>
</td>
</tr>
</table>
</div>
</div>
</div>
......
src/main/resources/templates/shoeEdit.html 0 → 100644
View file @ eb81abc9
<!doctype html>
<html class="no-js" lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Limited</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="images/favicon.png">
<link rel="stylesheet" href="css/style.css">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script>window.html5 || document.write('<script src="js/vendor/html5shiv.js"><\/script>')</script>
<![endif]-->
</head>
<body>
<div id="management_wrapper">
<div id="sidebar">
<div class="sidebar_title"><button th:href="http://localhost:8080/limited">TOPへ戻る</button></div>
<div class="sidebar_title"><button id="shoe_button" type="button" th:href="http://localhost:8080/limited/admin/management">管理画面へ戻る</button></div>
</div>
<div id="mainbody">
<!-- 商品管理 -->
<div id="shoe_management">
<!-- ヘッダー -->
<div class="ma_header">
<p>商品管理</p>
</div>
<!-- 在庫一覧 eachで繰り返し -->
<div id="shoesListTitle">商品情報編集</div>
<form id="ShoesEditForm" th:action="" th:object="" method="post">
<span>ID:<div name="id" th:text=""></div></span>
<span>商品名：<input type="text" name="name" th:field=""/></span>
<span>価格：<input type="text" name="price" th:field=""/></span>
<!-- <span>在庫数：<select name="stock">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select></span> -->
<span>在庫数：<input type="number" name="stock" th:field=""/></span>
<span>サイズ：<select name="size_id" th:field="">
<option value="1">24</option>
<option value="2">24.5</option>
<option value="3">25</option>
<option value="4">25.5</option>
<option value="5">26</option>
<option value="6">26.5</option>
<option value="7">27</option>
<option value="8">27.5</option>
<option value="9">28</option>
<option value="10">28.5</option>
</select></span>
<div>商品画像<input type="file" name="photo" th:field=""></div>
<button type="button" id="ShoesEditBtn">変更確定</button>
</form>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- <script src="js/vendor/bootstrap.min.js"></script>
<script src="js/isotope.pkgd.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/wow.min.js"></script>
<script src="js/custom.js"></script> -->
<script type="text/javascript" src="js/showEdit.js"></script>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment