Added confirm button on purchase

package.json

@@ -7,7 +7,7 @@
     "commit"
   ],
   "scripts": {
-    "start": "./node_modules/.bin/electron-rebuild && ENV=dev electron .",
+    "start": "./node_modules/.bin/electron-rebuild && SLOTH_ENV=dev electron .",
     "build-semantic": "cd ./src/semantic && npx gulp build",
     "build": "electron-packager . magnificent-sloth --platform=linux --arch=x64 --out dist && electron-installer-debian --src dist/magnificent-sloth-linux-x64/ --dest dist/installers/ --arch amd64"
   },

src/static/js/cart.js

@@ -4,6 +4,9 @@ const querystring = require('querystring');
 let cartList = new Array();
 let cost = 0;
 
+// Init the div as a modal
+$('#confirmPurchase').modal();
+
 // Puts the given product in the cart or increments it if
 // it's already present.
 module.exports.AddToCart = (product) => {
@@ -52,7 +55,9 @@ module.exports.RenderCart = () => {
   } else {
     document.getElementById('newBalance').innerHTML = null;
   }
-  document.getElementById('purchase').addEventListener('click', purchase)
+
+  document.getElementById('purchase').addEventListener('click', confirmPurchase);
+  document.getElementById('purchaseConfirmed').addEventListener('click', purchase);
 }
 
 module.exports.ClearCart = () => {
@@ -61,6 +66,10 @@ module.exports.ClearCart = () => {
   module.exports.RenderCart();
 }
 
+function confirmPurchase() {
+  $('#confirmPurchase').modal('show')
+}
+
 // Event for when the user click purchase. Send a request to Koala
 // to handle the payment for us.
 function purchase() {

src/views/base/base.html

@@ -38,6 +38,8 @@
     <article id="content"></article>
   </main>
   <script>
+    window.$ = window.jQuery = require('jquery');
+    require('../../../src/semantic/dist/semantic.min.js');
     require('../../static/js/menu');
   </script>
 </body>

src/views/products/products.css

@@ -55,3 +55,15 @@
   right: 20px; 
   top: 209px;
 }
+
+#confirmContent {
+  font-size: 20px;
+}
+
+.confirmButton {
+  font-size: 20px !important;
+}
+
+.ui.modal>.actions {
+  text-align: center;
+}

src/views/products/products.html

@@ -72,4 +72,16 @@ <h1 class="header" id="cartTitle">Cart</h1>
       </div>
     </article>
   </aside>
-</article>
+  <div id="confirmPurchase" class="ui modal">
+    <div id="popup" class="ui icon header">
+      <h1>Purchase confirmation</h1>
+    </div>
+    <div id="confirmContent" class="content">
+      <p>Are you sure you want to purchase these items?</p>
+    </div>
+    <div class="actions">
+      <span id="purchaseConfirmed" class="ui positive button confirmButton">Purchase</span>
+      <span class="ui negative button confirmButton">Cancel</span>
+    </div>
+  </div>
+</article>