From bca3c65eadddc7d62b7b362b82a35ce327e8ee0d Mon Sep 17 00:00:00 2001
From: Yarne Coppens <git.w8x3v@simplelogin.com>
Date: Fri, 4 Oct 2024 09:29:12 +0200
Subject: [PATCH] Placed umami tracking in JS

---
 static/scripts/main.js  |  4 ++++
 templates/index.jinja   | 14 +++++++-------
 templates/paycard.jinja |  6 +++---
 templates/paycash.jinja |  6 +++---
 4 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/static/scripts/main.js b/static/scripts/main.js
index d077d27..4eb8ea5 100644
--- a/static/scripts/main.js
+++ b/static/scripts/main.js
@@ -103,6 +103,7 @@ async function loadProducts() {
   }
 
 function removeProduct(element_to_remove){
+    umami.track('Remove Product');
     const product_row = document.getElementById('product_row')
     const products = product_row.children
 
@@ -143,15 +144,18 @@ function removeProduct(element_to_remove){
 }
 
 function payCash() {
+    umami.track('Pay Cash button');
     const total_cost = document.getElementById('totalprice').innerHTML.replace('€ ','')
     window.location.href = "/pay_cash/" + total_cost
 }
 
 function payCard() {
+    umami.track('Pay Card button');
     const total_cost = document.getElementById('totalprice').innerHTML.replace('€ ','')
     window.location.href = "/pay_card/" + total_cost
 }
 
 function toMain() {
+    umami.track('To Main button');
     window.location.href = "/";
 }
\ No newline at end of file
diff --git a/templates/index.jinja b/templates/index.jinja
index a487e14..31067d2 100644
--- a/templates/index.jinja
+++ b/templates/index.jinja
@@ -25,7 +25,7 @@
         <div class="row" style="margin-bottom: 5rem;" id="product_row">
           <div class="col product_col">
             <div class="card h-100">
-                <input type="image" onclick="removeProduct(this)" data-umami-event="remove_product_1" class="card-img-top product_image" alt="">
+                <input type="image" onclick="removeProduct(this)" class="card-img-top product_image" alt="">
                 <div class="card-body">
                   <h5 class="card-title product_price"></h5>
                 </div>
@@ -33,7 +33,7 @@
           </div>
           <div class="col product_col">
             <div class="card h-100">
-                <input type="image" onclick="removeProduct(this)" data-umami-event="remove_product_2" class="card-img-top product_image" alt="">
+                <input type="image" onclick="removeProduct(this)" class="card-img-top product_image" alt="">
                 <div class="card-body">
                   <h5 class="card-title product_price"></h5>
                 </div>
@@ -41,7 +41,7 @@
           </div>
           <div class="col product_col">
             <div class="card h-100">
-                <input type="image" onclick="removeProduct(this)" data-umami-event="remove_product_3" class="card-img-top product_image" alt="">
+                <input type="image" onclick="removeProduct(this)" class="card-img-top product_image" alt="">
                 <div class="card-body">
                   <h5 class="card-title product_price"></h5>
                 </div>
@@ -49,7 +49,7 @@
           </div>
           <div class="col product_col">
             <div class="card h-100">
-                <input type="image" onclick="removeProduct(this)" data-umami-event="remove_product_4" class="card-img-top product_image" alt="">
+                <input type="image" onclick="removeProduct(this)" class="card-img-top product_image" alt="">
                 <div class="card-body">
                   <h5 class="card-title product_price"></h5>
                 </div>
@@ -57,7 +57,7 @@
           </div>
           <div class="col product_col">
             <div class="card h-100">
-                <input type="image" onclick="removeProduct(this)" data-umami-event="remove_product_5" class="card-img-top product_image" alt="">
+                <input type="image" onclick="removeProduct(this)" class="card-img-top product_image" alt="">
                 <div class="card-body">
                   <h5 class="card-title product_price"></h5>
                 </div>
@@ -81,12 +81,12 @@
             </div>
             <div class="col-2">
                 <div class="card">
-                    <input type="image" data-umami-event="pay_cash_button" onclick="payCash()" src="{{api_url}}/icons/cash" height="100rem" width="100rem" class="card-img-top" alt="" />
+                    <input type="image" onclick="payCash()" src="{{api_url}}/icons/cash" height="100rem" width="100rem" class="card-img-top" alt="" />
                 </div>
             </div>
             <div class="col-2">
                 <div class="card">
-                    <input type="image" data-umami-event="pay_card_button" onclick="payCard()" src="{{api_url}}/icons/creditcard" height="100rem" width="100rem" class="card-img-top" alt="" />
+                    <input type="image" onclick="payCard()" src="{{api_url}}/icons/creditcard" height="100rem" width="100rem" class="card-img-top" alt="" />
                 </div>
             </div>
         </div>
diff --git a/templates/paycard.jinja b/templates/paycard.jinja
index d9c12ef..d891801 100644
--- a/templates/paycard.jinja
+++ b/templates/paycard.jinja
@@ -17,7 +17,7 @@
 <div class="row m-5">
             <div class="col-2">
                 <div class="card">
-                    <input type="image" onclick="payCash()" data-umami-event="pay_cash_button" src="{{api_url}}/icons/cash" height="100rem" width="100rem" class="card-img-top" alt="">
+                    <input type="image" onclick="payCash()" src="{{api_url}}/icons/cash" height="100rem" width="100rem" class="card-img-top" alt="">
                 </div>
             </div>
             <div class="col-8">
@@ -36,7 +36,7 @@
             </div>
             <div class="col-2">
                 <div class="card">
-                    <input type="image" onclick="payCard()" data-umami-event="pay_card_button" src="{{api_url}}/icons/creditcard" height="100rem" width="100rem" class="card-img-top" alt="">
+                    <input type="image" onclick="payCard()" src="{{api_url}}/icons/creditcard" height="100rem" width="100rem" class="card-img-top" alt="">
                 </div>
             </div>
 </div>
@@ -51,7 +51,7 @@
 <div class="row justify-content-end m-5">   
     <div class="col-2">
         <div class="card">
-            <input type="image" onclick="toMain()" data-umami-event="back_to_main_button" src="{{api_url}}/icons/shop" height="100rem" width="100rem" class="card-img-top" alt="" />
+            <input type="image" onclick="toMain()" src="{{api_url}}/icons/shop" height="100rem" width="100rem" class="card-img-top" alt="" />
         </div>
     </div>
 </div>
diff --git a/templates/paycash.jinja b/templates/paycash.jinja
index fda8431..1bed790 100644
--- a/templates/paycash.jinja
+++ b/templates/paycash.jinja
@@ -17,7 +17,7 @@
 <div class="row m-5">
             <div class="col-2">
                 <div class="card">
-                    <input type="image" onclick="payCash()" data-umami-event="pay_cash_button" src="{{api_url}}/icons/cash" height="100rem" width="100rem" class="card-img-top" alt="">
+                    <input type="image" onclick="payCash()" src="{{api_url}}/icons/cash" height="100rem" width="100rem" class="card-img-top" alt="">
                 </div>
             </div>
             <div class="col-8">
@@ -36,7 +36,7 @@
             </div>
             <div class="col-2">
                 <div class="card">
-                    <input type="image" onclick="payCard()" data-umami-event="pay_card_button" src="{{api_url}}/icons/creditcard" height="100rem" width="100rem" class="card-img-top" alt="">
+                    <input type="image" onclick="payCard()" src="{{api_url}}/icons/creditcard" height="100rem" width="100rem" class="card-img-top" alt="">
                 </div>
             </div>
 </div>
@@ -47,7 +47,7 @@
 <div class="row justify-content-end m-5">   
     <div class="col-2">
         <div class="card">
-            <input type="image" onclick="toMain()" data-umami-event="back_to_main_button" src="{{api_url}}/icons/shop" height="100rem" width="100rem" class="card-img-top" alt="" />
+            <input type="image" onclick="toMain()" src="{{api_url}}/icons/shop" height="100rem" width="100rem" class="card-img-top" alt="" />
         </div>
     </div>
 </div>