From bb0c507c32ff7e63bc37a848831fad447f6b2e97 Mon Sep 17 00:00:00 2001
From: John Watkins <watkinsj18@cardiff.ac.uk>
Date: Thu, 9 Dec 2021 17:29:40 +0000
Subject: [PATCH] Finished search bar
---
src/main/resources/static/js/searchBar.js | 68 +++++++++++++++++++++--
src/main/resources/templates/index.html | 10 ++--
2 files changed, 69 insertions(+), 9 deletions(-)
diff --git a/src/main/resources/static/js/searchBar.js b/src/main/resources/static/js/searchBar.js
index 95a20c0..ebce210 100644
--- a/src/main/resources/static/js/searchBar.js
+++ b/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
diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html
index a914e5b..041a8e8 100644
--- a/src/main/resources/templates/index.html
+++ b/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>
--
GitLab