Added fragment, populated and added image upload support (2)

src/main/java/com/example/clientproject/data/shops/Shops.java

@@ -34,6 +34,7 @@ public class Shops {
     private String shopWebsite;
     private int shopEarnings;
     private String shopImage;
+    private String shopBanner;
     private String shopCountries;
 
     @Convert(converter = TinyIntToBoolean.class)
@@ -49,13 +50,14 @@ public class Shops {
      * @param active - shop active status
      */
     public Shops(String name, String website, String description, int earnings,
-                 String image, String countries, boolean active, StampBoards stampBoard,
+                 String image, String banner, String countries, boolean active, StampBoards stampBoard,
                  Categories categories) {
         this.shopName = name;
         this.shopDescription = description;
         this.shopWebsite = website;
         this.shopEarnings = earnings;
         this.shopImage = image;
+        this.shopBanner = banner;
         this.shopCountries = countries;
         this.shopActive = active;
         this.stampBoard = stampBoard;

src/main/java/com/example/clientproject/services/BusinessRegisterSaver.java

@@ -71,6 +71,7 @@ public class BusinessRegisterSaver {
                 business.getBusiness_register_desc(),
                 business.getEarnings(),
                 "shopPic.png",
+                "shopBanner.png",
                 "UK United Kingdom",
                 false,
                 stampBoard,

src/main/resources/static/js/businessInformation.js

+async function submitFile(inputName) {
+    return new Promise(function (resolve, reject) {
+        let icon = document.getElementById(inputName).files;
+        if (icon.length != 0) {
+            var xhttp = new XMLHttpRequest();
+            xhttp.open("POST", '/upload', true);
+            var formData = new FormData();
+            formData.append("file", icon[0]);
+            xhttp.onload = function () {
+                if (xhttp.readyState === 4 && xhttp.status === 200) {
+                    resolve(xhttp.responseText)
+                } else {
+                    console.error(xhttp.statusText);
+                    reject("")
+                }
+            };
+            xhttp.send(formData);
+        }
+    })
+}
+
+async function submitInfo(shopId) {
+    let bannerName = await submitFile("bannerInput");
+    let logoName = await submitFile("logoInput")
+    var xhttp = new XMLHttpRequest();
+
+    let params = "shopId=" + shopId
+    params += "&shopName=" + encodeURIComponent(document.getElementById("nameInput").value)
+    params += "&shopDescription=" + encodeURIComponent(document.getElementById("descriptionInput").value)
+    params += "&bannerName=" + bannerName + "&logoName=" + logoName
+
+    xhttp.open("POST", '/updateSocials', true);
+    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+    xhttp.onload = function () {
+        if (xhttp.readyState === 4 && xhttp.status === 200) {
+            var response = xhttp.responseText
+            if (response == "success") {
+            } else {
+            }
+        } else {
+            console.error(xhttp.statusText);
+        }
+    };
+    xhttp.send(params);
+}
+
+function loadImagePreview(event, previewId, fileId) {
+    var preview = document.getElementById(previewId);
+    document.getElementById(fileId).innerText = event.target.files[0].name;
+    let tmpURL = URL.createObjectURL(event.target.files[0]);
+    preview.src = tmpURL
+
+    preview.onload = function () {
+        URL.revokeObjectURL(preview.src) // free memory
+    }
+}
\ No newline at end of file

src/main/resources/templates/admin.html

@@ -10,6 +10,7 @@
 	<link th:replace="fragments/deleteShop.html :: delShopCSS">
 	<link th:replace="fragments/deleteShop.html :: delShopJS">
 	<link th:replace="fragments/toggleShop.html :: toggleShopJS">
+	<link th:replace="fragments/businessInformation.html :: infoJs">
 	<link rel="stylesheet" type="text/css" href="css/manageStaff.css"/>
 	<script src="js/manageStaff.js"></script>
 
@@ -51,6 +52,7 @@
 
 			<section id="shop-setup-section" class="admin-section">
 				<h1 class="title">Shop Setup</h1>
+				<div th:replace="fragments/businessInformation :: keyInformation"></div>
 				<div th:replace="fragments/userSocials.html :: userSocial"/>
 				<br>
 				<th:block th:if="${highestShopLevel>=2}">

src/main/resources/templates/fragments/businessInformation.html

 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8">
-  <title>$Title$</title>
+    <script th:fragment="infoJs" src="js/businessInformation.js"></script>
 </head>
-<body>
-$END$
+<body th:fragment="keyInformation">
+<div style="border-bottom: #000000 1px solid; width:50%">
+    <h6 class="title is-6" style="margin-top: 5px; margin-bottom: 25px">Key Information</h6>
+
+    <p class="subtitle is-6" style="margin-bottom:3px;margin-top: 10px">Shop Name</p>
+    <input type="text" th:value="${shop.shopName}" id="nameInput" class="input">
+
+    <p class="subtitle is-6" style="margin-bottom:3px;margin-top: 10px">Description</p>
+    <textarea class="textarea" id="descriptionInput" th:text="${shop.shopDescription}" cols="30" rows="10"></textarea>
+
+    <img class="mb-3" id="bannerPreview" th:src="${shop.shopBanner}" style="margin-top: 5px; max-height: 100px">
+    <div class="file has-name mb-5">
+        <label class="file-label">
+            <input class="file-input" type="file" name="icon" accept="image/*" id="bannerInput" onchange="loadImagePreview(event, 'bannerPreview', 'bannerName')">
+            <span class="file-cta">
+        <span class="file-icon">
+            <i class="fas fa-upload"></i>
+        </span>
+        <span class="file-label">
+            Choose a banner…
+        </span>
+    </span>
+            <span class="file-name" id="bannerName">No File Selected</span>
+        </label>
+    </div>
+
+    <img class="mb-3" id="logoPreview" th:src="${shop.shopImage}" style="margin-top: 5px; max-height: 100px">
+    <div class="file has-name mb-5">
+        <label class="file-label">
+            <input class="file-input" type="file" name="icon" accept="image/*" id="logoInput" onchange="loadImagePreview(event, 'logoPreview', 'logoName')">
+            <span class="file-cta">
+        <span class="file-icon">
+            <i class="fas fa-upload"></i>
+        </span>
+        <span class="file-label">
+            Choose a logo…
+        </span>
+    </span>
+            <span class="file-name" id="logoName">No File Selected</span>
+        </label>
+    </div>
+
+    <button th:onclick="'submitInfo('+ ${shop.shopId} +');'" class="button is-link" style="margin-top:15px; margin-bottom:10px;">Save changes</button>
+</div>
 </body>
 </html>
\ No newline at end of file

src/main/resources/templates/fragments/userSocials.html

@@ -7,7 +7,7 @@
 <body th:fragment="userSocial">
 <div class="wholeSocialContainer" style="width:100%">
 
-        <h6 class="title is-6" style="margin-bottom:5px">Socials</h6>
+        <h6 class="title is-6" style="margin-bottom:5px; margin-top: 15px">Socials</h6>
         <div class="socialContainer">
                                 <span class="icon is-large is-left">
                                     <i class="fab fa-instagram"></i>

src/main/resources/templates/index.html

@@ -40,7 +40,6 @@
 					 total_reward_amount=${shopMap.get('Shop').getStampBoard.getRewards.size},
 					 img_path=${shopMap.get('Shop').shopImage},
 					 shopId=${shopMap.get('Shop').shopId}"></div>
-
 				<!--Reward Card Here-->
 				<div th:each="shop: ${favouriteShops}" th:include="fragments/reward_card.html :: reward_card"
 					 th:with="margin=false,

src/test/java/com/example/clientproject/data/ShopsTests.java

@@ -37,7 +37,7 @@ public class ShopsTests {
 
     @Test
     public void shouldGet12ShopsAfterInsert() throws Exception {
-        Shops newShop = new Shops("", "", "", 0, "", "", true, stampRepo.getById(1L), categoriesRepo.getById(1L));
+        Shops newShop = new Shops("", "", "", 0, "","", "", true, stampRepo.getById(1L), categoriesRepo.getById(1L));
         Shops shop = shopsRepo.save(newShop);
 
         List<Shops> shopsList = shopsRepo.findAll();

src/test/java/com/example/clientproject/data/UserPermissionsTests.java

@@ -53,7 +53,7 @@ public class UserPermissionsTests {
 
     @Test
     public void shouldGet19PermissionsAfterInsert() throws Exception {
-        Shops newShop = new Shops("", "", "", 0, "", "", true, stampRepo.getById(1L), categoriesRepo.getById(1L));
+        Shops newShop = new Shops("", "", "", 0, "", "", "", true, stampRepo.getById(1L), categoriesRepo.getById(1L));
         shopsRepo.save(newShop);
         TwoFactorMethods twoFactorMethods = twoFactorMethodsRepo.findByTwoFactorMethodId(1).get();
         DateTimeFormatter formatter = DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss");