Finished search bar

src/main/resources/static/js/searchBar.js

@@ -8,14 +8,14 @@ var tagGroup = document.getElementById("search-tag-group");
 function updateSearch(e){
     page = 1;
     query = searchBar.value;
-    doSearch()
+    doSearch(false)
 }
 
 function removeTag(i){
     tags.splice(i, 1);
     page=1;
     updateUI()
-    doSearch()
+    doSearch(false)
 }
 
 function addTag(e){
@@ -26,7 +26,7 @@ function addTag(e){
             tags.push(searchBar.value.toLowerCase());
             searchBar.value = "";
             updateUI();
-            doSearch();
+            doSearch(false);
         }
     }
 }
@@ -44,7 +44,7 @@ function updateUI(){
     }
 }
 
-function doSearch(){
+function doSearch(fromNextPageBtn){
     let url = "/shop/search"
     url += "?q=" + query
     url += "&p=" + page.toString()
@@ -53,5 +53,63 @@ function doSearch(){
     }
     fetch(url)
         .then(e=>e.json())
-        .then(data=>console.log(data))
+        .then(data=>{
+            if(!fromNextPageBtn){
+                document.getElementById("business_card_container").innerHTML = "";
+            }
+            for(let shop of data["shops"]){
+                addShop(shop);
+            }
+            if(data["hasNextPage"] == true){
+                document.getElementById("loadMoreBtn").style.display = "flex";
+            }else{
+                document.getElementById("loadMoreBtn").setAttribute('style', 'display:none!important');
+            }
+        });
+}
+
+function addShop(shopInfo){
+    let img_path = shopInfo["banner"]
+    let title = shopInfo["name"]
+    let reward_text = shopInfo["next_reward_name"] + " at " + shopInfo["next_reward_pos"] + " stamps"
+    let reward_amount = shopInfo["reward_count"]
+    let shopId = shopInfo["id"]
+
+    document.getElementById("business_card_container").innerHTML +=`
+<div class="business_container box" style="position:relative;">
+    <div class="image" style="background-image:url(${img_path});"></div>
+    <div class="favouriteStar starContainer" onclick="favouriteBusiness(this,${shopId});">
+        <span class="icon favouriteStar">
+            <i class="far fa-star"></i>
+        </span>
+        <span class="icon favouriteStar">
+            <i class="fas fa-star"></i>
+        </span>
+    </div>
+    <div class="content">
+        <h1 class="title is-4 mb-1">${title}</h1>
+        <p class="mb-1">${reward_text}</p>
+        <div class="is-full-width" style="display:flex;justify-content: space-between;align-items: center">
+            <div class="level-left">
+                <span class="icon is-small is-left ml-1 mr-1">
+                    <i class="fas fa-gift"></i>
+                </span>
+                <p>${reward_amount}</p>
+            </div>
+            <div class="level-right">
+                <button class="button is-rounded gradient" onclick="redirect(${shopId})">
+                    View Shop
+                    <span class="icon is-small is-left ml-1">
+                        <i class="fas fa-arrow-right"></i>
+                    </span>
+                </button>
+            </div>
+        </div>
+    </div>
+</div>`
+}
+
+function loadNextPage(){
+    page++;
+    doSearch(true);
 }
\ No newline at end of file

src/main/resources/templates/index.html

@@ -75,10 +75,11 @@
 			</div>
 		</div>
 
-		<div class="container is-full-width is-flex is-justify-content-center is-align-items-center is-flex-wrap-wrap">
-			<div th:each="shop,i: ${normalShops}" th:include="fragments/business_card.html :: business_card"
-				 th:with="title=${shop.shopName}, reward_text='Free coffee at 6 stamps', reward_amount=4,
-				img_path=${shop.shopImage}, shopId=${shop.shopId}"></div>
+		<div class="container is-full-width is-flex is-justify-content-center is-align-items-center is-flex-wrap-wrap"
+			 id="business_card_container">
+		</div>
+		<div class="is-full-width is-flex is-justify-content-center is-align-items-center" id="loadMoreBtn" style="display: none!important;;">
+			<a onclick="loadNextPage()">Load More</a>
 		</div>
 
 	</div>
@@ -99,5 +100,6 @@
 		</div>
 	</div>
 	<script src="/js/searchBar.js"></script>
+	<script>doSearch(false);</script>
 </body>
 </html>