Add backend for retrieving locations.

Add modal to display restaurant locations.
Add style to the new modal.

controllers/squareData.js

@@ -351,5 +351,34 @@ module.exports = {
                 }
                 return res.json("ERROR: UNABLE TO RETRIEVE RECIPE DATA FROM SQUARE");
             });
+    },
+
+    /*
+    GET: add another merchant to an owner with another square location
+    response = [{
+
+    }]
+    */
+    addMerchant: function(req, res){
+        axios.get(`${process.env.SQUARE_ADDRESS}/v2/locations`, {
+            headers: {
+                "Authorization": `Bearer ${res.locals.owner.square.accessToken}`,
+                "Content-Type": "application/json"
+            }
+        })
+            .then((response)=>{
+                let locations = [];
+                for(let i = 0; i < response.data.locations.length; i++){
+                    locations.push({
+                        name: response.data.locations[i].name,
+                        id: response.data.locations[i].id
+                    });
+                }
+
+                return res.json(locations);
+            })
+            .catch((err)=>{
+                return res.json("ERROR: UNABLE TO RETRIEVE LOCATION DATA FROM SQUARE");
+            })
     }
 }

routes.js

@@ -88,4 +88,5 @@ module.exports = function(app){
     app.post("/squarelogin", squareData.redirect);
     app.get("/squareauth", squareData.createMerchant);
     app.get("/recipes/update/square", session, squareData.updateRecipes);
+    app.get("/merchant/add/square", session, squareData.addMerchant);
 }

views/dashboardPage/dashboard.css

@@ -755,6 +755,22 @@ Modal
             color: white;
         }
 
+    #modalSquareLocations{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        background: white;
+        padding: 50px;
+        min-width: 350px;
+    }
+
+        #squareLocationsButtons{
+            display: flex;
+            flex-direction: column;
+            margin-bottom: 25px;
+            width: 100%;
+        }
+
 @media screen and (orientation: portrait){
     @media screen and (max-width: 1400px){
         body{

views/dashboardPage/js/dashboard.js

@@ -189,7 +189,7 @@ controller = {
         }
     },
 
-    openModal: function(str){
+    openModal: function(str, data){
         let modal = document.getElementById("modal");
         modal.style.display = "flex";
         document.getElementById("modalClose").addEventListener("click", this.closeModal);
@@ -238,6 +238,9 @@ controller = {
                 div.children[2].children[1].onclick = ()=>{account.deleteMerchant()};
                 div.children[2].children[0].onclick = ()=>{controller.closeModal()};
                 break;
+            case "squareLocations":
+                modalScript.squareLocations(data);
+                break;
         }
     },
 

views/dashboardPage/js/modal.js

@@ -1,4 +1,3 @@
-const merchant = require("../../../models/merchant.js");
 const Merchant = require("./classes/Merchant.js");
 
 let modal = {
@@ -98,35 +97,47 @@ let modal = {
     },
 
     submitNewMerchantSquare: function(){
-        let data = {
-            name: document.getElementById("addMerchantName").value
-        }
-
         let loader = document.getElementById("loaderContainer");
         loader.style.display = "flex";
 
-        fetch("/merchant/add/square", {
-            method: "post",
-            headers: {
-                "Content-Type": "application/json;charset=utf-8"
-            },
-            body: JSON.stringify(data)
-        })
+        fetch("/merchant/add/square")
             .then(response => response.json())
             .then((response)=>{
                 if(typeof(response) === "string"){
                     controller.createBanner(response, "error");
                 }else{
-                    console.log(response);
+                    controller.closeModal();
+                    controller.openModal("squareLocations", response);
                 }
             })
             .catch((err)=>{
-                console.log(err);
                 controller.createBanner("SOMETHING WENT WRONG. PLEASE REFRESH THE PAGE", "error");
             })
             .finally(()=>{
                 loader.style.display = "none";
             });
+    },
+
+    squareLocations: function(locations){
+        document.getElementById("modalSquareLocations").style.display = "flex";
+        document.getElementById("squareLocationsCancel").onclick = ()=>{controller.closeModal()};
+        let container = document.getElementById("squareLocationsButtons");
+
+        while(container.children.length > 0){
+            container.removeChild(container.firstChild);
+        }
+
+        for(let i = 0; i < locations.length; i++){
+            let button = document.createElement("button");
+            button.innerText = locations[i].name;
+            button.classList.add("button");
+            button.onclick = ()=>{this.createSquareLocation(locations[i].id)};
+            container.appendChild(button);
+        }
+    },
+
+    createSquareLocation: function(id){
+        console.log(id);
     }
 };
 

views/dashboardPage/modal.ejs

@@ -69,6 +69,14 @@
                     <button id="modalConfirmButton" class="button">YES</button>
                 </div>
             </div>
+
+            <div id="modalSquareLocations" style="display:none">
+                <h2>CHOOSE A LOCATION</h2>
+
+                <div id="squareLocationsButtons"></div>
+
+                <button id="squareLocationsCancel" class="button">CANCEL</button>
+            </div>
         </div>
     </div>
 </div>