Add confirmation modal.

Update style in the modal.

views/dashboardPage/dashboard.css

@@ -673,7 +673,7 @@ Modal
         align-items: flex-end;
     }
 
-        .modalBox svg{
+        .modalBox > svg{
             color: rgb(255, 99, 107);
             cursor: pointer;
         }
@@ -731,6 +731,25 @@ Modal
             flex-direction: column;
         }
 
+    #modalConfirm{
+        display: flex;
+        flex-direction:column;
+        align-items: center;
+        background: white;
+        padding: 50px;
+    }
+
+        #modalConfirm svg{
+            font-size: 50px;
+            margin: 15px;
+            font-weight: bold;
+        }
+
+        #modalConfirm p{
+            font-size: 25px;
+            font-weight: bold;
+        }
+
 @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);
@@ -231,6 +231,13 @@ controller = {
             case "newMerchant":
                 modalScript.newMerchant();
                 break;
+            case "confirmDeleteMerchant":
+                let div = document.getElementById("modalConfirm");
+                div.style.display = "flex";
+                div.children[1].innerText = "Are you sure you want to delete this merchant?";
+                div.children[2].children[1].onclick = ()=>{account.deleteMerchant(data)};
+                div.children[2].children[0].onclick = ()=>{controller.closeModal()};
+                break;
         }
     },
 

views/dashboardPage/js/strands/account.js

@@ -21,6 +21,7 @@ let account = {
             div.children[0].innerText = merchant.owner.merchants[i].name;
             div.children[1].children[0].onclick = ()=>{this.switchMerchant(merchant.owner.merchants[i]._id)};
             div.children[1].children[1].onclick = ()=>{this.deleteMerchant(merchant.owner.merchants[i]._id)};
+            div.children[1].children[1].onclick = ()=>{controller.openModal("confirmDeleteMerchant", merchant.owner.merchants[i]._id)};
             container.appendChild(div);
         }
 

views/dashboardPage/js/strands/home.js

@@ -59,8 +59,6 @@ let home = {
             }
         }
 
-        console.log(dates);
-        console.log(revenue);
         const trace = {
             x: dates,
             y: revenue,

views/dashboardPage/modal.ejs

@@ -38,6 +38,22 @@
 
                 <input type="submit" class="button" value="NO POS">
             </form>
+
+            <div id="modalConfirm" style="display:none;">
+                <svg width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <circle cx="12" cy="12" r="10"></circle>
+                    <line x1="12" y1="8" x2="12" y2="12"></line>
+                    <line x1="12" y1="16" x2="12.01" y2="16"></line>
+                </svg>
+
+                <p></p>
+
+                <div class="buttonBox">
+                    <button id="modalConfirmNoButton" class="button">CANCEL</button>
+
+                    <button id="modalConfirmButton" class="button">YES</button>
+                </div>
+            </div>
         </div>
     </div>
 </div>