Skip to content

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

Merge branch '商品一覧画面ルーティング' into 'master' 

一覧画面モーダルの実装まで完了

See merge request !32
parents fa37214b 55ab7aee
Hide whitespace changes
Inline Side-by-side
Showing with 143 additions and 102 deletions
src/main/java/com/example/service/ShoesService.java
View file @ c423ab94
......@@ -16,11 +16,12 @@ public class ShoesService {
ShoesRepository shoesRepository;
public List<Shoes> findAll(){
List<Shoes> list = shoesRepository. findAll();
//並べ替え処理
Collections.sort(list, Collections.reverseOrder());
//並べ替えたものを返す。
return list;
// List<Shoes> list = shoesRepository. findAll();
// //並べ替え処理
// Collections.sort(list, Collections.reverseOrder());
// //並べ替えたものを返す。
// return list;
return shoesRepository.findAll();
}
public Shoes findOne(Integer id){
......
src/main/resources/static/css/style.css
View file @ c423ab94
......@@ -1931,4 +1931,16 @@ th, td {
.button-link:hover {
cursor: pointer ;
color: #f00 ;
}
.details {
width: 150px;
height: 50px;
margin: 50px 0;
font-weight: bold;
font-size: small;
background-color: #1abc9c;
border-radius: 3px;
border:none;
color: #000;
}
\ No newline at end of file
src/main/resources/static/js/list.js
View file @ c423ab94
$(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() ;
$(".details").each(function() {
$(".details").click(function(event){
$('#showName').empty();
$('#showPrice').empty();
$('#showId').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("p");
let priceField = document.createElement("p");
let idField = document.createElement("input");
idField.setAttribute("type", "hidden");
let name = $(event.target.parentNode.children[1].textContent);
let price =$(event.target.parentNode.children[2].textContent);
let id =$(event.target.parentNode.children[3].value);
nameField.textContent = name.selector;
$('#showName').append(nameField);
priceField.textContent = price.selector;
$('#showPrice').append(priceField);
idField.value = id.selector;
$('#showId').append(idField);
//[#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 ) ;
......@@ -69,3 +78,28 @@ $(function(){
} ) ;
//モーダル表示
//let details = document.getElementsByClassName("js-modal-open");
//$(".js-modal-open").each(function() {
// $(".js-modal-open").on("click", function(){
// $('.js-modal').fadeIn();
// return false;
// });
// $(".js-modal-close").on("click", function(){
// $('.js-modal').fadeIn();
// return false;
// });
//});
//モーダル内情報表示
//モーダルフォーム送信
//$('#ok-btn').on('click', function(){
//
//});
src/main/resources/templates/list.html
View file @ c423ab94
......@@ -16,46 +16,48 @@
<![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 id="modal-content">
<div id="modal-content-innar">
<!-- モーダルウィンドウのコンテンツ開始 -->
<img class="shoeImage" alt="productImage"/>
<div id="showName"></div>
<div id="showPrice"></div>
<div id="showId"></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="@{/limited/log/{id}(id=${user.id})}">My Purchase Log</a></li>
<!-- カートページへ遷移 -->
<li><a th:href="@{/cart}">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>
<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="@{/limited/log/{id}(id=${user.id})}">My Purchase Log</a></li>
<!-- カートページへ遷移 -->
<li><a th:href="@{/cart}">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">
......@@ -92,24 +94,15 @@
<div id="listBox">
<!--each分でくりかえす(宮嶋)-->
<div class="productBox" th:each="shoe : ${shoes}">
<img class="shoeImage" src="images/スニーカー3.jpg" alt="productImage"/>
<a th:text= "${shoe.name}" class="shoeName">AirMAX</a>
<a th:text = "${shoe.price}" class="shoePrice">￥10,000</a>
<button type="button" id="modal-open" class="button-link">詳細</button>
</div>
<!--デモ用のダミー-->
<div class="productBox" >
<img class="shoeImage" src="images/スニーカー3.jpg" alt="productImage"/>
<a class="shoeName">AirMAX</a>
<a class="shoePrice">￥10,000</a>
<button type="button" id="modal-open" class="button-link">詳細</button>
<div th:each="shoesPhoto : ${shoesPhoto}">
<img class="shoeImage" th:src="@{upload/スニーカー1.jpg}" alt="productImage"/>
<p th:text= "${shoe.name}" class="shoeName">AirMAX</p>
<p th:text = "'&yen;' +${shoe.price}" class="shoePrice">￥10,000</p>
<input type="hidden" th:value="${shoe.id}"/>
<button type="button" id="modal-open" class="details">Datails</button>
<!-- <button class="js-modal-open" id="sign-up">Details</button>-->
</div>
</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">
......
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