ユニーク機能完成

src/main/java/com/example/repository/ShoesRepository.java

 package com.example.repository;
 
+import java.util.List;
+
 import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.data.jpa.repository.Query;
 
 import com.example.domain.Shoes;
 
 //靴データ取得用
+//statusによって出し分け
 public interface ShoesRepository extends JpaRepository<Shoes, Integer>{
+	@Query(value = "SELECT * FROM shoes WHERE product_status = ?1", nativeQuery = true)
+	public List <Shoes> findAllByStatus(Integer status);
 }

src/main/java/com/example/service/ShoesService.java

@@ -38,4 +38,15 @@ public class ShoesService {
 	public void delete(Integer id){
 		shoesRepository.delete(id);
 	}
+	
+	//ユニーク機能、一般商品と限定商品の出し分け
+	//一般商品
+	public List<Shoes> findAllGeneralShoes() {
+	    return shoesRepository.findAllByStatus(0);
+	}
+	
+	//限定商品
+	public List<Shoes> findAllLimitedShoes() {
+	    return shoesRepository.findAllByStatus(1);
+	}
 }

src/main/java/com/example/web/EcsiteController.java

@@ -89,17 +89,20 @@ HttpSession session;
 	@GetMapping("list")
 	public String list(Model model,  @AuthenticationPrincipal LoginUser userDetails) {
 		//靴の情報をすべて取得
-		List<Shoes> shoes = shoesService.findAll();
-		System.out.println(shoes);
+//		List<Shoes> shoes = shoesService.findAll();
+//		System.out.println(shoes);
 		//靴の情報を一括で取得するmodel(Idでの降順表示設定済み)
-		model.addAttribute("shoes", shoes);
-		//靴を表示するための処理を全画像にかける
-//		List <String> shoesPhoto = new ArrayList<String> ();
-//		for(int i = 0; i < shoes.size(); i++) {
-//			shoesPhoto.add((shoes.get(i)).getPhoto());
-//		}
-		//靴の処理した画像を一括で取得する
-//		model.addAttribute("shoesPhoto", shoesPhoto);
+//		model.addAttribute("shoes", shoes);
+		
+		//一般商品取得
+		List<Shoes> generalShoes = shoesService.findAllGeneralShoes();
+		model.addAttribute("generalShoes", generalShoes);
+		System.out.println(generalShoes);
+		
+		//限定商品取得
+		List<Shoes> limitedShoes = shoesService.findAllLimitedShoes();
+		model.addAttribute("limitedShoes", limitedShoes);
+		System.out.println(limitedShoes);
 		
 		//user情報取得、格納
 		User user = userDetails.getUser();

src/main/resources/static/css/style.css

@@ -1879,7 +1879,7 @@ th, td {
 }
 
 /* list画面 */
-#listBox {
+.listBox {
     background-color: #FDF5E6;
     display: flex;
     flex-direction: row;
@@ -1895,6 +1895,16 @@ th, td {
     padding: 5px;
 }
 
+#limitedListBox {
+	background : linear-gradient(to right,
+                               red,
+                               orange,
+                               yellow,
+                               green,
+                               aqua,
+                               blue,
+                               purple);
+}
 
 
 /* listモーダル */
@@ -1950,6 +1960,10 @@ th, td {
 	text-align: center;
 }
 
+.shoeLimited {
+	color: #fff;
+}
+
 .productBox {
 	/*margin: 0 auto;*/
 }

src/main/resources/static/js/list.js

@@ -105,4 +105,17 @@ $('.cartBtn').on('click', function(event){
 			$('#modal-overlay').remove() ;
 	
 	} ) ;
-});
+});
\ No newline at end of file
+
+
+//ユニーク機能
+$("#limitedListBox").css("display", "none");
+let count = 0;
+$("#secret").on("click", function() {
+	count ++;
+	if (count % 2 == 1) {		
+		$("#limitedListBox").css("display", "flex");
+	} else {
+		$("#limitedListBox").css("display", "none");
+	}
+});

src/main/resources/templates/list.html

@@ -117,13 +117,25 @@
             </div><!-- end of /.container -->
         </section><!-- end of /.news letter section -->
         <!--一覧-->
-        <div id="listBox">
-            <!--each分でくりかえす(宮嶋)-->
-            <div class="productBox" th:each="shoe : ${shoes}">
-                <div class="shoeImageDiv"><img class="shoeImage" th:src="@{/upload/{photo}(photo=${shoe.photo})}" alt="productImage" width="300" height="200"/></div>
-                <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}"/>
+        <p id="cart-p-text"><span id="cart-text">Product List</span></p>
+        <div class="listBox" id="limitedListBox">
+        	<!--限定商品一覧-->
+            <div class="productBox" th:each="limitedShoes : ${limitedShoes}">
+                <div class="shoeImageDiv"><img class="shoeImage" th:src="@{/upload/{photo}(photo=${limitedShoes.photo})}" alt="productImage" width="300" height="200"/></div>
+                <p th:text= "${limitedShoes.name}" class="shoeName shoeLimited">AirMAX</p>
+                <p th:text = "'&yen;' +${limitedShoes.price}" class="shoePrice shoeLimited">￥10,000</p>
+                <input type="hidden" th:value="${limitedShoes.id}"/>
+                <div class="detailsBtn"><button type="button" id="modal-open" class="details">Datails</button></div>
+                <!-- <button class="js-modal-open" id="sign-up">Details</button>-->
+            </div>
+        </div>
+        <div class="listBox">
+            <!--一般商品一覧-->
+            <div class="productBox" th:each="generalShoes : ${generalShoes}">
+                <div class="shoeImageDiv"><img class="shoeImage" th:src="@{/upload/{photo}(photo=${generalShoes.photo})}" alt="productImage" width="300" height="200"/></div>
+                <p th:text= "${generalShoes.name}" class="shoeName">AirMAX</p>
+                <p th:text = "'&yen;' +${generalShoes.price}" class="shoePrice">￥10,000</p>
+                <input type="hidden" th:value="${generalShoes.id}"/>
                 <div class="detailsBtn"><button type="button" id="modal-open" class="details">Datails</button></div>
                 <!-- <button class="js-modal-open" id="sign-up">Details</button>-->
             </div>
@@ -132,7 +144,7 @@
             <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>
+                        <p class="center">Made with <a href="#" id="secret"><img th:src="@{/images/btn.png}" width="20" height="10"/></a> by <a href="#" target="_blank">Limited</a>. All Rights Reserved</p>
                         
                     </div>
                 </div>