From f566884b44c201685c0a207f12a3a38ee2668ac9 Mon Sep 17 00:00:00 2001
From: Aaron Lee <longyklee@gmail.com>
Date: Thu, 23 Sep 2021 18:04:18 +0800
Subject: [PATCH] Update signature pad so it wont clear when height is
 adjusted; just width

---
 Procfile                   | 1 -
 requirements.txt           | 2 +-
 templates/group_teach.html | 9 ++++++++-
 templates/homeroom.html    | 9 ++++++++-
 4 files changed, 17 insertions(+), 4 deletions(-)
 delete mode 100644 Procfile

diff --git a/Procfile b/Procfile
deleted file mode 100644
index 8001d1a..0000000
--- a/Procfile
+++ /dev/null
@@ -1 +0,0 @@
-web: gunicorn app:app
\ No newline at end of file
diff --git a/requirements.txt b/requirements.txt
index b0db49f..0685704 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -5,7 +5,7 @@ Flask == 2.0.1
 
 # Attendance/app.py: 3
 # Attendance/test.py: 1
-Pyrebase == 3.0.27
+Pyrebase4 == 4.5.0
 
 # Attendance/app.py: 8
 pandas == 1.1.3
diff --git a/templates/group_teach.html b/templates/group_teach.html
index c442b1c..1c8750a 100644
--- a/templates/group_teach.html
+++ b/templates/group_teach.html
@@ -133,6 +133,7 @@
     <script type="text/javascript" src="/static/jquery.min.js"></script>
     <script>
         var signaturePad, selPeriod;
+        var width = $(window).width();
         function submitForm() {
             if (!signaturePad.isEmpty()) {
                 loadingAnimation();
@@ -164,6 +165,7 @@
 
             var canvas = document.getElementById("signature_pad^" + period);
             signaturePad = new SignaturePad(canvas);
+            width = $(window).width();
             function resizeCanvas() {
                 var ratio = Math.max(window.devicePixelRatio || 1, 1);
                 canvas.width = canvas.offsetWidth * ratio;
@@ -171,7 +173,12 @@
                 canvas.getContext("2d").scale(ratio, ratio);
                 signaturePad.clear(); // otherwise isEmpty() might return incorrect value
             }
-            window.addEventListener("resize", resizeCanvas);
+            window.addEventListener("resize", () => {
+                if (width != $(window).width()) {
+                    resizeCanvas();
+                    width = $(window).width();
+                }
+            });
             resizeCanvas();
         }
         function unCheckAbs(string) {
diff --git a/templates/homeroom.html b/templates/homeroom.html
index 1c5e860..3ad1768 100644
--- a/templates/homeroom.html
+++ b/templates/homeroom.html
@@ -228,6 +228,7 @@
     </footer>
     <script>
         var signaturePad, hrCfrm = false;
+        var width = $(window).width();
         var periodData = {}
         {% for i in periods %}
         periodData['{{i}}'] = '{{ absData[currDate][i]['name'] }}'
@@ -264,6 +265,7 @@
             $('#finalCheck').removeAttr('hidden');
             var canvas = document.getElementById("signature_pad");
             signaturePad = new SignaturePad(canvas);
+            width = $(window).width();
             function resizeCanvas() {
                 var ratio = Math.max(window.devicePixelRatio || 1, 1);
                 canvas.width = canvas.offsetWidth * ratio;
@@ -271,7 +273,12 @@
                 canvas.getContext("2d").scale(ratio, ratio);
                 signaturePad.clear(); // otherwise isEmpty() might return incorrect value
             }
-            window.addEventListener("resize", resizeCanvas);
+            window.addEventListener("resize", () => {
+                if (width != $(window).width()) {
+                    resizeCanvas();
+                    width = $(window).width();
+                }
+            });
             resizeCanvas();
         }
         function afterSelAbs(period) {