Signature Modal; Separate JS with HTML

static/allpages.css

@@ -40,8 +40,9 @@ div.forSign {
     border: 1px solid black;
     margin-left: auto;
     margin-right: auto;
-    width: 70vw;
-    height: 30vw;
+    width: 56vw;
+    max-width: 100%;
+    height: 24vw;
     position: relative;
     -webkit-box-flex: 1;
         -ms-flex: 1;
@@ -60,10 +61,6 @@ div.forSign canvas {
     margin-bottom: 50px;
 }
 
-div.signDiv {
-    margin-bottom: 50px;
-}
-
 p.highlightAbs {
     margin-bottom: 0;
 }
@@ -174,3 +171,12 @@ label {
 #chgPasswordForm .form-group {
     margin-bottom: 0 !important;
 }
+
+.signDiv button {
+    width: auto;
+}
+
+.submitButton {
+    width: 20vw;
+    min-width: auto;
+}

static/gtag.js

@@ -0,0 +1,5 @@
+window.dataLayer = window.dataLayer || [];
+function gtag() { dataLayer.push(arguments); }
+gtag('js', new Date());
+
+gtag('config', 'G-H6D61RSBHR');

static/pagejs/admin.js

@@ -0,0 +1,26 @@
+function getHR() {
+    var grade = $('#sel-grade').val();
+    $('#sel-room').html('<option value="">請先選擇年級</option>');
+    if (grade === "") {
+        $('#sel-room').attr('disabled', 'disabled')
+        return
+    }
+    homerooms[grade].forEach(element => {
+        $('#sel-room').append(`<option value="${element}">${element}</option>`)
+    });
+    $('#sel-room').removeAttr('disabled')
+}
+function redirAdmin() {
+    if ($("#sel-room").val() == "") {
+        alert("請選擇年級 / 班級！");
+        return;
+    }
+    var url = "/manage/admin/" + $('#sel-grade').val() + "/" + $('#sel-room').val() + "/" + $('#date').val();
+    var new_form = document.createElement('form');
+    new_form.method = 'GET';
+    new_form.action = url;
+    document.body.appendChild(new_form);
+    new_form.submit();
+    $('.container').hide();
+    $('#loading').show();
+}

static/pagejs/chgPassword.js

@@ -0,0 +1,38 @@
+function validateEmail(email) {
+    const emailRegEx = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+    function loadingAnimation() {
+        $('#loginForm').submit();
+        if ($("#username").val() == "" || $("#password").val() == "" || $("#new_username").val() == "" || $("#new_password").val() == "" ||
+            !emailRegEx.test($("#username").val().toLowerCase()) || !emailRegEx.test($("#new_username").val().toLowerCase())) {
+            return;
+        }
+        $('.container').hide();
+        $('#loading').show();
+    }
+}
+
+function password_show_hide(num) {
+    var x = '';
+    var show_eye = '';
+    var hide_eye = '';
+    if (num == 1) {
+        x = document.getElementById("password");
+        show_eye = document.getElementById("old_show_eye");
+        hide_eye = document.getElementById("old_hide_eye");
+    }
+    else {
+        x = document.getElementById("new_password");
+        show_eye = document.getElementById("new_show_eye");
+        hide_eye = document.getElementById("new_hide_eye");
+    }
+    hide_eye.classList.remove("d-none");
+    if (x.type === "password") {
+        x.type = "text";
+        show_eye.style.display = "none";
+        hide_eye.style.display = "block";
+    } else {
+        x.type = "password";
+        show_eye.style.display = "block";
+        hide_eye.style.display = "none";
+    }
+}

static/pagejs/forgotPassword.js

@@ -0,0 +1,5 @@
+function loadingAnimation() {
+    $('#forgotPassword_sel').submit();
+    $('.container').hide();
+    $('#loading').show();
+}

static/pagejs/group_teach.js

@@ -0,0 +1,72 @@
+var signaturePad, selPeriod, canvas, width = $(window).width(), modal;
+function submitForm() {
+    if (!signaturePad.isEmpty()) {
+        $('#' + modal).modal('hide');
+        loadingAnimation();
+        signaturePad.off();
+        var data = signaturePad.toDataURL('image/png');
+        document.getElementById("attendanceData^" + selPeriod).getElementsByClassName("signatureData")[0].value = data;
+        document.getElementById("attendanceData^" + selPeriod).submit();
+    }
+    else {
+        alert("Please sign first");
+    }
+}
+function resizeCanvas() {
+    var ratio = Math.max(window.devicePixelRatio || 1, 1);
+    canvas.width = canvas.offsetWidth * ratio;
+    canvas.height = canvas.offsetHeight * ratio;
+    canvas.getContext("2d").scale(ratio, ratio);
+    signaturePad.clear(); // otherwise isEmpty() might return incorrect value
+}
+function viewSignature(period) {
+    selPeriod = period
+    $('.viewSignatureBtn').attr({ 'disabled': 'disabled' });
+    $('.viewSignatureBtn').removeClass('margin-bottom');
+    modal = 'sign-' + period;
+    $('#' + modal).modal('show');
+    var cnt = 0;
+    $('.tobeform').each(function (i, obj) {
+        if ($(this).is(":checked")) {
+            cnt++;
+            $('#postHomeroomAbs').append('<input type="checkbox" name="' + $(this).attr('class').split(' ')[1].split('^')[1]
+                + '" checked="checked">');
+        }
+    });
+    if (cnt == 0) {
+        $('#allPresentWarning-' + period).removeAttr('hidden');
+    }
+    canvas = document.getElementById("signature_pad^" + period);
+    signaturePad = new SignaturePad(canvas);
+    width = $(window).width();
+    window.addEventListener("resize", () => {
+        if (width != $(window).width()) {
+            resizeCanvas();
+            width = $(window).width();
+        }
+    });
+    document.getElementById(modal).addEventListener("shown.bs.modal", function (e) {
+        resizeCanvas();
+    });
+    resizeCanvas();
+}
+function unCheckAbs(string) {
+    document.getElementById('absent^' + string).checked = false;
+}
+function unCheckLate(string) {
+    document.getElementById('late^' + string).checked = false;
+}
+
+function loadingAnimation() {
+    $("div.container").hide();
+    $('#loading').show();
+}
+function chgDate(sel) {
+    loadingAnimation();
+    var url = '/manage/date/' + $('#date').val()
+    var new_form = document.createElement('form');
+    new_form.method = 'GET';
+    new_form.action = url;
+    document.body.appendChild(new_form);
+    new_form.submit();
+}

static/pagejs/homeroom.js

@@ -0,0 +1,95 @@
+var signaturePad, hrCfrm = false, canvas = document.getElementById("signature_pad");
+var width = $(window).width();
+function loadingAnimation() {
+    $('.container').hide();
+    $('#loading').show();
+}
+function chgDate() {
+    loadingAnimation();
+    var url = '/manage/date/' + $('#date').val()
+    var new_form = document.createElement('form');
+    new_form.method = 'GET';
+    new_form.action = url;
+    document.body.appendChild(new_form);
+    new_form.submit();
+}
+function submitForm() {
+    if (!signaturePad.isEmpty()) {
+        $('#finalCheck').modal('hide');
+        loadingAnimation();
+        signaturePad.off();
+        var data = signaturePad.toDataURL('image/png');
+        if (hrCfrm) {
+            $('#hrCfrm-sign').val(data);
+            $('#hrCfrm-notes').val($('#subjectNotes').val());
+            document.getElementById('homeroom_confirm').submit()
+        } else {
+            var notes = $('#subjectNotes').val();
+            document.getElementById('HR-signatureData').value = data;
+            document.getElementById('HR-notes').value = notes;
+            document.getElementById('postHomeroomAbs').submit();
+        }
+    }
+    else {
+        alert("Please sign first");
+    }
+}
+function resizeCanvas() {
+    var ratio = Math.max(window.devicePixelRatio || 1, 1);
+    canvas.width = canvas.offsetWidth * ratio;
+    canvas.height = canvas.offsetHeight * ratio;
+    canvas.getContext("2d").scale(ratio, ratio);
+    signaturePad.clear(); // otherwise isEmpty() might return incorrect value
+}
+function showSignaturePad() {
+    $('#finalCheck').modal('show');
+    signaturePad = new SignaturePad(canvas);
+    width = $(window).width();
+    window.addEventListener("resize", () => {
+        if (width != $(window).width()) {
+            resizeCanvas();
+            width = $(window).width();
+        }
+    });
+    document.getElementById("finalCheck").addEventListener('shown.bs.modal', function (e) {
+        resizeCanvas();
+    });
+    resizeCanvas();
+}
+function afterSelAbs(period) {
+    var tobeformArr = [];
+    $('#postHomeroomAbs #HR-period').attr('value', period);
+    $('.tobeform').attr('disabled', 'disabled');
+    $('.afterSelButton').attr('disabled', 'disabled');
+    $('#showSignPeriod').text(period);
+    $('#showSignSubjectName').text(periodData[period]);
+    var cnt = 0;
+    $('.tobeform').each(function (i, obj) {
+        if ($(this).attr('class').split(' ')[1].split('^')[1] == period &&
+            $(this).is(":checked")) {
+            cnt++;
+            $('#postHomeroomAbs').append('<input type="checkbox" name="' + $(this).attr('class').split(' ')[1].split('^')[0] + '^'
+                + $(this).attr('class').split(' ')[1].split('^')[2]
+                + '" checked="checked">');
+        }
+    });
+    if (cnt == 0) {
+        $('#allPresentWarning').removeAttr('hidden');
+    }
+    // show signature pad
+    showSignaturePad()
+}
+function homeroomCfrm() {
+    hrCfrm = true;
+    $('#showSignPeriod').text("HOMEROOM CONFIRM");
+    $('#showSignSubjectName').text("班導確認");
+    $('.tobeform').attr('disabled', 'disabled');
+    $('.afterSelButton').attr('disabled', 'disabled');
+    showSignaturePad();
+}
+function unCheckLate(string) {
+    document.getElementById('late^' + string).checked = false;
+}
+function unCheckAbs(string) {
+    document.getElementById('absent^' + string).checked = false;
+}

static/pagejs/login.js

@@ -0,0 +1,20 @@
+function loadingAnimation() {
+    $('#loginForm').submit();
+    $('.container').hide();
+    $('#loading').show();
+}
+function password_show_hide() {
+    var x = document.getElementById("password");
+    var show_eye = document.getElementById("show_eye");
+    var hide_eye = document.getElementById("hide_eye");
+    hide_eye.classList.remove("d-none");
+    if (x.type === "password") {
+        x.type = "text";
+        show_eye.style.display = "none";
+        hide_eye.style.display = "block";
+    } else {
+        x.type = "password";
+        show_eye.style.display = "block";
+        hide_eye.style.display = "none";
+    }
+}

static/pagejs/selSubUser.js

@@ -0,0 +1,7 @@
+function loadingAnimation() {
+    if ($('#subuser_form_sel').val == '')
+        return;
+    $('#subuser_form_sel').submit();
+    $('.container').hide();
+    $('#loading').show();
+}

static/pagejs/uploadcsv.js

@@ -0,0 +1,10 @@
+function loadingAnimation() {
+    // if csv is empty
+    if ($("#csv").val() == "") {
+        alert("Please select a file!");
+        return;
+    }
+    $('#uploadCsvForm').submit();
+    $('.container').hide();
+    $('#loading').show();
+}

static/pagejs/verifiedChgPassword.js

@@ -0,0 +1,20 @@
+function loadingAnimation() {
+    $('#password_form').submit();
+    $('.container').hide();
+    $('#loading').show();
+}
+function password_show_hide() {
+    var x = document.getElementById("password");
+    var show_eye = document.getElementById("show_eye");
+    var hide_eye = document.getElementById("hide_eye");
+    hide_eye.classList.remove("d-none");
+    if (x.type === "password") {
+        x.type = "text";
+        show_eye.style.display = "none";
+        hide_eye.style.display = "block";
+    } else {
+        x.type = "password";
+        show_eye.style.display = "block";
+        hide_eye.style.display = "none";
+    }
+}

templates/admin.html

@@ -13,13 +13,7 @@
     <link rel="shortcut icon" type="image/x-icon" href="/static/favicon.ico" />
     <!-- Global site tag (gtag.js) - Google Analytics -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-H6D61RSBHR"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag() { dataLayer.push(arguments); }
-        gtag('js', new Date());
-
-        gtag('config', 'G-H6D61RSBHR');
-    </script>
+    <script src="/static/gtag.js"></script>
 </head>
 
 <body>
@@ -224,33 +218,8 @@
         homerooms['{{i}}'].push({{ j }});
         {% endfor %}
         {% endfor %}
-        function getHR() {
-            var grade = $('#sel-grade').val();
-            $('#sel-room').html('<option value="">請先選擇年級</option>');
-            if (grade === "") {
-                $('#sel-room').attr('disabled', 'disabled')
-                return
-            }
-            homerooms[grade].forEach(element => {
-                $('#sel-room').append(`<option value="${element}">${element}</option>`)
-            });
-            $('#sel-room').removeAttr('disabled')
-        }
-        function redirAdmin() {
-            if ($("#sel-room").val() == "") {
-                alert("請選擇年級 / 班級！");
-                return;
-            }
-            var url = "/manage/admin/" + $('#sel-grade').val() + "/" + $('#sel-room').val() + "/" + $('#date').val();
-            var new_form = document.createElement('form');
-            new_form.method = 'GET';
-            new_form.action = url;
-            document.body.appendChild(new_form);
-            new_form.submit();
-            $('.container').hide();
-            $('#loading').show();
-        }
     </script>
+    <script src="/static/pagejs/admin.js"></script>
     <script src="/static/time.js"></script>
 </body>
 

templates/chgPassword.html

@@ -12,13 +12,7 @@
     <link rel="shortcut icon" type="image/x-icon" href="/static/favicon.ico" />
     <!-- Global site tag (gtag.js) - Google Analytics -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-H6D61RSBHR"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag() { dataLayer.push(arguments); }
-        gtag('js', new Date());
-
-        gtag('config', 'G-H6D61RSBHR');
-    </script>
+    <script src="/static/gtag.js"></script>
     <style>
         .form-group {
             margin-bottom: 30px !important;
@@ -96,48 +90,8 @@
             style="height:100%;" />
     </div>
     {% include 'footer.html' %}
-    <script type=" text/javascript" src="/static/jquery.min.js"></script>
-    <script>
-        function validateEmail(email) {
-            const emailRegEx = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-            function loadingAnimation() {
-                $('#loginForm').submit();
-                if ($("#username").val() == "" || $("#password").val() == "" || $("#new_username").val() == "" || $("#new_password").val() == "" ||
-                    !emailRegEx.test($("#username").val().toLowerCase()) || !emailRegEx.test($("#new_username").val().toLowerCase())) {
-                    return;
-                }
-                $('.container').hide();
-                $('#loading').show();
-            }
-        }
-
-        function password_show_hide(num) {
-            var x = '';
-            var show_eye = '';
-            var hide_eye = '';
-            if (num == 1) {
-                x = document.getElementById("password");
-                show_eye = document.getElementById("old_show_eye");
-                hide_eye = document.getElementById("old_hide_eye");
-            }
-            else {
-                x = document.getElementById("new_password");
-                show_eye = document.getElementById("new_show_eye");
-                hide_eye = document.getElementById("new_hide_eye");
-            }
-            hide_eye.classList.remove("d-none");
-            if (x.type === "password") {
-                x.type = "text";
-                show_eye.style.display = "none";
-                hide_eye.style.display = "block";
-            } else {
-                x.type = "password";
-                show_eye.style.display = "block";
-                hide_eye.style.display = "none";
-            }
-        }
-
-    </script>
+    <script type="text/javascript" src="/static/jquery.min.js"></script>
+    <script src="/static/pagejs/chgPassword.js"></script>
     <script src="/static/time.js"></script>
 </body>
 

templates/forgotPassword.html

@@ -13,13 +13,7 @@
     <link rel="shortcut icon" type="image/x-icon" href="/static/favicon.ico" />
     <!-- Global site tag (gtag.js) - Google Analytics -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-H6D61RSBHR"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag() { dataLayer.push(arguments); }
-        gtag('js', new Date());
-
-        gtag('config', 'G-H6D61RSBHR');
-    </script>
+    <script src="/static/gtag.js"></script>
     <script src="https://kit.fontawesome.com/52a3d6c810.js" crossorigin="anonymous"></script>
     <!-- <script src="https://www.google.com/recaptcha/api.js"></script> -->
 </head>
@@ -62,13 +56,7 @@
     </div>
     {% include 'footer.html' %}
     <script type=" text/javascript" src="/static/jquery.min.js"></script>
-    <script>
-        function loadingAnimation() {
-            $('#forgotPassword_sel').submit();
-            $('.container').hide();
-            $('#loading').show();
-        }
-    </script>
+    <script src="/static/pagejs/forgotPassword.js"></script>
     <script src="/static/time.js"></script>
 </body>
 

templates/group_teach.html

@@ -8,18 +8,12 @@
     <title>Group 分組 - Attendance 點名</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"
         integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
-    <link rel="stylesheet" href="/static/allpages.css">
     <link rel="stylesheet" href="/static/login.css">
+    <link rel="stylesheet" href="/static/allpages.css">
     <link rel="shortcut icon" type="image/x-icon" href="/static/favicon.ico" />
     <!-- Global site tag (gtag.js) - Google Analytics -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-H6D61RSBHR"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag() { dataLayer.push(arguments); }
-        gtag('js', new Date());
-
-        gtag('config', 'G-H6D61RSBHR');
-    </script>
+    <script src="/static/gtag.js"></script>
 </head>
 
 <body>
@@ -114,19 +108,33 @@
                     onclick="viewSignature('{{i}}')">
                     ↑ Confirm 確認 (Period {{i}}) ↑</button>
                 {% endif %}
-                <div class="signDiv" id="sign^{{i}}" hidden="hidden">
-                    <div class="alert alert-warning margin-top" id="allPresentWarning-{{i}}" role="alert"
-                        hidden="hidden">
-                        <h4 class="alert-heading">請確認是否全班全到！Please check if everyone is present!</h4>
+                <div id="sign-{{i}}" class="signDiv modal fade" id="staticBackdrop" data-bs-backdrop="static"
+                    data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
+                    <div class="modal-dialog modal-dialog-centered modal-xl">
+                        <div class="modal-content">
+                            <div class="modal-header">
+                                <h5 class="modal-title" id="staticBackdropLabel">Please Sign Below 請在下方簽名</h5>
+                            </div>
+                            <div class="modal-body">
+                                <div class="alert alert-warning margin-top" id="allPresentWarning-{{i}}" role="alert"
+                                    hidden="hidden">
+                                    <h4 class="alert-heading">請確認是否全班全到！Please check if everyone is present!</h4>
+                                </div>
+                                <div class="forSign"><canvas id="signature_pad^{{i}}"></canvas></div>
+                                <h3 class="margin-top">Notes 備註欄</h3>
+                                <input type="textarea" class="form-control" name="notes" id="subjectNotes^{{i}}"
+                                    placeholder="Enter Notes 請輸入備註" style="width: 80%; margin-left: 10%;" row="3">
+                            </div>
+                            <div class="modal-footer">
+                                <button class="btn btn-secondary" type="button" onclick="signaturePad.clear()">Clear
+                                    Signature 清除簽名</button>
+                                <button type="button" class="btn btn-danger" onclick="location.reload();">Cancel
+                                    取消</button>
+                                <button type="button" class="btn btn-primary submitButton" onclick="submitForm()">Submit
+                                    提交</button>
+                            </div>
+                        </div>
                     </div>
-                    <h3 class="margin-top">Please Sign Below 請在下方簽名</h3>
-                    <div class="forSign"><canvas id="signature_pad^{{i}}"></canvas></div>
-                    <h3 class="margin-top">Notes 備註欄</h3>
-                    <input class="form-control" name="notes" id="subjectNotes^{{i}}" placeholder="Enter Notes 請輸入備註"
-                        style="width: 80%; margin-left: 10%;">
-                    <button class="btn btn-secondary margin-top" type="button" onclick="signaturePad.clear()">Clear
-                        Signature 清除簽名</button><button class="btn btn-primary margin-top" type="button"
-                        onclick="submitForm()">Submit 提交</button>
                 </div>
             </div>
         </form>
@@ -134,83 +142,14 @@
     </div>
     <script src=" https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/dist/signature_pad.min.js"></script>
     <script type="text/javascript" src="/static/jquery.min.js"></script>
-    <script>
-        var signaturePad, selPeriod;
-        var width = $(window).width();
-        function submitForm() {
-            if (!signaturePad.isEmpty()) {
-                loadingAnimation();
-                signaturePad.off();
-                var data = signaturePad.toDataURL('image/png');
-                document.getElementById("attendanceData^" + selPeriod).getElementsByClassName("signatureData")[0].value = data;
-                document.getElementById("attendanceData^" + selPeriod).submit();
-            }
-            else {
-                alert("Please sign first");
-            }
-        }
-        function viewSignature(period) {
-            selPeriod = period
-            $('.viewSignatureBtn').attr({ 'disabled': 'disabled' });
-            $('.viewSignatureBtn').removeClass('margin-bottom');
-            document.getElementById('sign^' + period).removeAttribute('hidden');
-            var cnt = 0;
-            $('.tobeform').each(function (i, obj) {
-                if ($(this).is(":checked")) {
-                    cnt++;
-                    $('#postHomeroomAbs').append('<input type="checkbox" name="' + $(this).attr('class').split(' ')[1].split('^')[1]
-                        + '" checked="checked">');
-                }
-            });
-            if (cnt == 0) {
-                $('#allPresentWarning-' + period).removeAttr('hidden');
-            }
-
-            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;
-                canvas.height = canvas.offsetHeight * ratio;
-                canvas.getContext("2d").scale(ratio, ratio);
-                signaturePad.clear(); // otherwise isEmpty() might return incorrect value
-            }
-            window.addEventListener("resize", () => {
-                if (width != $(window).width()) {
-                    resizeCanvas();
-                    width = $(window).width();
-                }
-            });
-            resizeCanvas();
-            $('html,body').unbind().animate({ scrollTop: document.getElementById("sign^" + period).offsetTop - $(".sticky-top").outerHeight() - 10 }, 'slow');
-        }
-        function unCheckAbs(string) {
-            document.getElementById('absent^' + string).checked = false;
-        }
-        function unCheckLate(string) {
-            document.getElementById('late^' + string).checked = false;
-        }
-    </script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
+        crossorigin="anonymous"></script>
     <div id="loading" style="text-align:center; width:100%; display:none;"><img src="/static/loading.gif" alt=""
             style="height:100%;" />
     </div>
     {% include 'footer.html' %}
-    <script>
-        function loadingAnimation() {
-            $("div.container").hide();
-            $('#loading').show();
-        }
-        function chgDate(sel) {
-            loadingAnimation();
-            var url = '/manage/date/' + $('#date').val()
-            var new_form = document.createElement('form');
-            new_form.method = 'GET';
-            new_form.action = url;
-            document.body.appendChild(new_form);
-            new_form.submit();
-        }
-    </script>
+    <script src="/static/pagejs/group_teach.js"></script>
     <script src="/static/time.js"></script>
 </body>
 

templates/homeroom.html

@@ -13,14 +13,7 @@
     <link rel="shortcut icon" type="image/x-icon" href="/static/favicon.ico" />
     <!-- Global site tag (gtag.js) - Google Analytics -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-H6D61RSBHR"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag() { dataLayer.push(arguments); }
-        gtag('js', new Date());
-
-        gtag('config', 'G-H6D61RSBHR');
-    </script>
-
+    <script src="/static/gtag.js"></script>
 </head>
 
 <body>
@@ -157,22 +150,35 @@
             <button class="btn btn-primary margin-top afterSelButton" onclick="homeroomCfrm()">Homeroom
                 Teacher Confirm | 班導確認</button>
             {% endif %}
-            <div id="finalCheck" hidden="hidden">
-                <!-- show warning -->
-                <div class="alert alert-warning margin-top" id="allPresentWarning" role="alert" hidden="hidden">
-                    <h4 class="alert-heading">請確認是否全班全到！Please check if everyone is present!</h4>
+            <div id="finalCheck" class="modal fade" id="staticBackdrop" data-bs-backdrop="static"
+                data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
+                <div class="modal-dialog modal-dialog-centered modal-xl">
+                    <div class="modal-content">
+                        <div class="modal-header">
+                            <h5 class="modal-title" id="staticBackdropLabel">Please Sign Below 請在下方簽名</h5>
+                        </div>
+                        <div class="modal-body">
+                            <h3>Period: <span id="showSignPeriod"></span></h3>
+                            <h3>Subject: <span id="showSignSubjectName"></h3>
+                            <div class="alert alert-warning margin-top" id="allPresentWarning" role="alert"
+                                hidden="hidden">
+                                <h4 class="alert-heading">請確認是否全班全到！Please check if everyone is present!</h4>
+                            </div>
+                            <div class="forSign"><canvas id="signature_pad"></canvas></div>
+                            <h3 class="margin-top">Notes 備註欄</h3>
+                            <input type="textarea" class="form-control" name="notes" id="subjectNotes"
+                                placeholder="Enter Notes 請輸入備註" style="width: 80%; margin-left: 10%;" row="3">
+                        </div>
+                        <div class="modal-footer">
+                            <button class="btn btn-secondary" type="button" onclick="signaturePad.clear()">Clear
+                                Signature 清除簽名</button>
+                            <button type="button" class="btn btn-danger" onclick="location.reload();">Cancel
+                                取消</button>
+                            <button type="button" class="btn btn-primary submitButton" onclick="submitForm()">Submit
+                                提交</button>
+                        </div>
+                    </div>
                 </div>
-                <h3 class="margin-top">Please Sign Below 請在下方簽名<br>
-                    Period: <span id="showSignPeriod"></span> <br>
-                    Subject: <span id="showSignSubjectName"></span>
-                </h3>
-                <div class="forSign"><canvas id="signature_pad"></canvas></div>
-                <h3 class="margin-top">Notes 備註欄</h3>
-                <input type="textarea" class="form-control" name="notes" id="subjectNotes"
-                    placeholder="Enter Notes 請輸入備註" style="width: 80%; margin-left: 10%;" row="3">
-                <button class="btn btn-secondary margin-top" type="button" onclick="signaturePad.clear()">Clear
-                    Signature 清除簽名</button>
-                <button class="btn btn-primary margin-top" type="button" onclick="submitForm()">Submit 提交</button>
             </div>
             {% for c in range(periods|length + 1) %}
             {% if c % 4 == 0 %}
@@ -222,108 +228,20 @@
     </div>
     <script src="https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/dist/signature_pad.min.js"></script>
     <script type="text/javascript" src="/static/jquery.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
+        crossorigin="anonymous"></script>
     <div id="loading" style="text-align:center; width:100%; display:none;"><img src="/static/loading.gif" alt=""
             style="height:100%;" />
     </div>
     {% include 'footer.html' %}
     <script>
-        var signaturePad, hrCfrm = false;
-        var width = $(window).width();
         var periodData = {}
         {% for i in periods %}
         periodData['{{i}}'] = '{{ absData[currDate][i]['name'] }}'
         {% endfor %}
-
-        function loadingAnimation() {
-            $('.container').hide();
-            $('#loading').show();
-        }
-        function chgDate() {
-            loadingAnimation();
-            var url = '/manage/date/' + $('#date').val()
-            var new_form = document.createElement('form');
-            new_form.method = 'GET';
-            new_form.action = url;
-            document.body.appendChild(new_form);
-            new_form.submit();
-        }
-        function submitForm() {
-            if (!signaturePad.isEmpty()) {
-                loadingAnimation()
-                signaturePad.off();
-                var data = signaturePad.toDataURL('image/png');
-                if (hrCfrm) {
-                    $('#hrCfrm-sign').val(data);
-                    $('#hrCfrm-notes').val($('#subjectNotes').val());
-                    document.getElementById('homeroom_confirm').submit()
-                } else {
-                    var notes = $('#subjectNotes').val();
-                    document.getElementById('HR-signatureData').value = data;
-                    document.getElementById('HR-notes').value = notes;
-                    document.getElementById('postHomeroomAbs').submit();
-                }
-            }
-            else {
-                alert("Please sign first");
-            }
-        }
-        function showSignaturePad() {
-            $('#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;
-                canvas.height = canvas.offsetHeight * ratio;
-                canvas.getContext("2d").scale(ratio, ratio);
-                signaturePad.clear(); // otherwise isEmpty() might return incorrect value
-            }
-            window.addEventListener("resize", () => {
-                if (width != $(window).width()) {
-                    resizeCanvas();
-                    width = $(window).width();
-                }
-            });
-            resizeCanvas();
-            $('html,body').unbind().animate({ scrollTop: $("#finalCheck").offset().top - $(".sticky-top").outerHeight() - 10 }, 'slow');
-        }
-        function afterSelAbs(period) {
-            var tobeformArr = [];
-            $('#postHomeroomAbs #HR-period').attr('value', period);
-            $('.tobeform').attr('disabled', 'disabled');
-            $('.afterSelButton').attr('disabled', 'disabled');
-            $('#showSignPeriod').text(period);
-            $('#showSignSubjectName').text(periodData[period]);
-            var cnt = 0;
-            $('.tobeform').each(function (i, obj) {
-                if ($(this).attr('class').split(' ')[1].split('^')[1] == period &&
-                    $(this).is(":checked")) {
-                    cnt++;
-                    $('#postHomeroomAbs').append('<input type="checkbox" name="' + $(this).attr('class').split(' ')[1].split('^')[0] + '^'
-                        + $(this).attr('class').split(' ')[1].split('^')[2]
-                        + '" checked="checked">');
-                }
-            });
-            if (cnt == 0) {
-                $('#allPresentWarning').removeAttr('hidden');
-            }
-            // show signature pad
-            showSignaturePad()
-        }
-        function homeroomCfrm() {
-            hrCfrm = true;
-            $('.tobeform').attr('disabled', 'disabled');
-            $('.afterSelButton').attr('disabled', 'disabled');
-            showSignaturePad();
-        }
-        function unCheckLate(string) {
-            document.getElementById('late^' + string).checked = false;
-        }
-        function unCheckAbs(string) {
-            document.getElementById('absent^' + string).checked = false;
-        }
     </script>
+    <script src="/static/pagejs/homeroom.js"></script>
     <script src="/static/time.js"></script>
 </body>
 

templates/login.html

@@ -13,15 +13,8 @@
     <link rel="shortcut icon" type="image/x-icon" href="/static/favicon.ico" />
     <!-- Global site tag (gtag.js) - Google Analytics -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-H6D61RSBHR"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag() { dataLayer.push(arguments); }
-        gtag('js', new Date());
-
-        gtag('config', 'G-H6D61RSBHR');
-    </script>
+    <script src="/static/gtag.js"></script>
     <script src="https://kit.fontawesome.com/52a3d6c810.js" crossorigin="anonymous"></script>
-    <!-- <script src="https://www.google.com/recaptcha/api.js"></script> -->
 </head>
 
 <body>
@@ -77,29 +70,8 @@
             style="height:100%;" />
     </div>
     {% include 'footer.html' %}
-    <script type=" text/javascript" src="/static/jquery.min.js"></script>
-    <script>
-        function loadingAnimation() {
-            $('#loginForm').submit();
-            $('.container').hide();
-            $('#loading').show();
-        }
-        function password_show_hide() {
-            var x = document.getElementById("password");
-            var show_eye = document.getElementById("show_eye");
-            var hide_eye = document.getElementById("hide_eye");
-            hide_eye.classList.remove("d-none");
-            if (x.type === "password") {
-                x.type = "text";
-                show_eye.style.display = "none";
-                hide_eye.style.display = "block";
-            } else {
-                x.type = "password";
-                show_eye.style.display = "block";
-                hide_eye.style.display = "none";
-            }
-        }
-    </script>
+    <script type="text/javascript" src="/static/jquery.min.js"></script>
+    <script src="/static/pagejs/login.js"></script>
     <script src="/static/time.js"></script>
 </body>
 

templates/selSubUser.html

@@ -13,14 +13,7 @@
     <link rel="shortcut icon" type="image/x-icon" href="/static/favicon.ico" />
     <!-- Global site tag (gtag.js) - Google Analytics -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-H6D61RSBHR"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag() { dataLayer.push(arguments); }
-        gtag('js', new Date());
-
-        gtag('config', 'G-H6D61RSBHR');
-    </script>
-
+    <script src="/static/gtag.js"></script>
 </head>
 
 <body>
@@ -54,15 +47,7 @@
     </div>
     {% include 'footer.html' %}
     <script type=" text/javascript" src="/static/jquery.min.js"></script>
-    <script>
-        function loadingAnimation() {
-            if ($('#subuser_form_sel').val == '')
-                return;
-            $('#subuser_form_sel').submit();
-            $('.container').hide();
-            $('#loading').show();
-        }
-    </script>
+    <script src="/static/pagejs/selSubUser.js"></script>
     <script src="/static/time.js"></script>
 </body>
 

templates/uploadcsv.html

@@ -12,13 +12,7 @@
     <link rel="shortcut icon" type="image/x-icon" href="/static/favicon.ico" />
     <!-- Global site tag (gtag.js) - Google Analytics -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-H6D61RSBHR"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag() { dataLayer.push(arguments); }
-        gtag('js', new Date());
-
-        gtag('config', 'G-H6D61RSBHR');
-    </script>
+    <script src="/static/gtag.js"></script>
 </head>
 
 <body>
@@ -64,18 +58,7 @@
     </div>
     {% include 'footer.html' %}
     <script type="text/javascript" src="/static/jquery.min.js"></script>
-    <script>
-        function loadingAnimation() {
-            // if csv is empty
-            if ($("#csv").val() == "") {
-                alert("Please select a file!");
-                return;
-            }
-            $('#uploadCsvForm').submit();
-            $('.container').hide();
-            $('#loading').show();
-        }
-    </script>
+    <script src="/static/pagejs/uploadcsv.js"></script>
     <script src="/static/time.js"></script>
 </body>
 

templates/verifiedChgPassword.html

@@ -12,13 +12,7 @@
     <link rel="shortcut icon" type="image/x-icon" href="/static/favicon.ico" />
     <!-- Global site tag (gtag.js) - Google Analytics -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-H6D61RSBHR"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag() { dataLayer.push(arguments); }
-        gtag('js', new Date());
-
-        gtag('config', 'G-H6D61RSBHR');
-    </script>
+    <script src="/static/gtag.js"></script>
     <script src="https://kit.fontawesome.com/52a3d6c810.js" crossorigin="anonymous"></script>
     <!-- <script src="https://www.google.com/recaptcha/api.js"></script> -->
 </head>
@@ -67,28 +61,7 @@
     </div>
     {% include 'footer.html' %}
     <script type=" text/javascript" src="/static/jquery.min.js"></script>
-    <script>
-        function loadingAnimation() {
-            $('#password_form').submit();
-            $('.container').hide();
-            $('#loading').show();
-        }
-        function password_show_hide() {
-            var x = document.getElementById("password");
-            var show_eye = document.getElementById("show_eye");
-            var hide_eye = document.getElementById("hide_eye");
-            hide_eye.classList.remove("d-none");
-            if (x.type === "password") {
-                x.type = "text";
-                show_eye.style.display = "none";
-                hide_eye.style.display = "block";
-            } else {
-                x.type = "password";
-                show_eye.style.display = "block";
-                hide_eye.style.display = "none";
-            }
-        }
-    </script>
+    <script src="/static/pagejs/verifiedChgPassword.js"></script>
     <script src="/static/time.js"></script>
 </body>