From 22056199830d21d0956b2ac1cd9cd38cc11d774c Mon Sep 17 00:00:00 2001 From: Aaron Lee Date: Tue, 19 Oct 2021 22:30:49 +0800 Subject: [PATCH] Signature Modal; Separate JS with HTML --- static/allpages.css | 18 ++-- static/gtag.js | 5 + static/pagejs/admin.js | 26 +++++ static/pagejs/chgPassword.js | 38 +++++++ static/pagejs/forgotPassword.js | 5 + static/pagejs/group_teach.js | 72 +++++++++++++ static/pagejs/homeroom.js | 95 +++++++++++++++++ static/pagejs/login.js | 20 ++++ static/pagejs/selSubUser.js | 7 ++ static/pagejs/uploadcsv.js | 10 ++ static/pagejs/verifiedChgPassword.js | 20 ++++ templates/admin.html | 35 +------ templates/chgPassword.html | 52 +--------- templates/forgotPassword.html | 16 +-- templates/group_teach.html | 125 ++++++---------------- templates/homeroom.html | 148 ++++++--------------------- templates/login.html | 34 +----- templates/selSubUser.html | 19 +--- templates/uploadcsv.html | 21 +--- templates/verifiedChgPassword.html | 31 +----- 20 files changed, 391 insertions(+), 406 deletions(-) create mode 100644 static/gtag.js create mode 100644 static/pagejs/admin.js create mode 100644 static/pagejs/chgPassword.js create mode 100644 static/pagejs/forgotPassword.js create mode 100644 static/pagejs/group_teach.js create mode 100644 static/pagejs/homeroom.js create mode 100644 static/pagejs/login.js create mode 100644 static/pagejs/selSubUser.js create mode 100644 static/pagejs/uploadcsv.js create mode 100644 static/pagejs/verifiedChgPassword.js diff --git a/static/allpages.css b/static/allpages.css index ce49f50..b563898 100644 --- a/static/allpages.css +++ b/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; +} \ No newline at end of file diff --git a/static/gtag.js b/static/gtag.js new file mode 100644 index 0000000..065a0e9 --- /dev/null +++ b/static/gtag.js @@ -0,0 +1,5 @@ +window.dataLayer = window.dataLayer || []; +function gtag() { dataLayer.push(arguments); } +gtag('js', new Date()); + +gtag('config', 'G-H6D61RSBHR'); diff --git a/static/pagejs/admin.js b/static/pagejs/admin.js new file mode 100644 index 0000000..4ca9ea8 --- /dev/null +++ b/static/pagejs/admin.js @@ -0,0 +1,26 @@ +function getHR() { + var grade = $('#sel-grade').val(); + $('#sel-room').html(''); + if (grade === "") { + $('#sel-room').attr('disabled', 'disabled') + return + } + homerooms[grade].forEach(element => { + $('#sel-room').append(``) + }); + $('#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(); +} diff --git a/static/pagejs/chgPassword.js b/static/pagejs/chgPassword.js new file mode 100644 index 0000000..730b2ad --- /dev/null +++ b/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"; + } +} diff --git a/static/pagejs/forgotPassword.js b/static/pagejs/forgotPassword.js new file mode 100644 index 0000000..061854b --- /dev/null +++ b/static/pagejs/forgotPassword.js @@ -0,0 +1,5 @@ +function loadingAnimation() { + $('#forgotPassword_sel').submit(); + $('.container').hide(); + $('#loading').show(); +} diff --git a/static/pagejs/group_teach.js b/static/pagejs/group_teach.js new file mode 100644 index 0000000..1dd8633 --- /dev/null +++ b/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(''); + } + }); + 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(); +} diff --git a/static/pagejs/homeroom.js b/static/pagejs/homeroom.js new file mode 100644 index 0000000..3394142 --- /dev/null +++ b/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(''); + } + }); + 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; +} diff --git a/static/pagejs/login.js b/static/pagejs/login.js new file mode 100644 index 0000000..70d3db0 --- /dev/null +++ b/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"; + } +} diff --git a/static/pagejs/selSubUser.js b/static/pagejs/selSubUser.js new file mode 100644 index 0000000..339f4f6 --- /dev/null +++ b/static/pagejs/selSubUser.js @@ -0,0 +1,7 @@ +function loadingAnimation() { + if ($('#subuser_form_sel').val == '') + return; + $('#subuser_form_sel').submit(); + $('.container').hide(); + $('#loading').show(); +} diff --git a/static/pagejs/uploadcsv.js b/static/pagejs/uploadcsv.js new file mode 100644 index 0000000..1a8863a --- /dev/null +++ b/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(); +} diff --git a/static/pagejs/verifiedChgPassword.js b/static/pagejs/verifiedChgPassword.js new file mode 100644 index 0000000..33ab046 --- /dev/null +++ b/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"; + } +} \ No newline at end of file diff --git a/templates/admin.html b/templates/admin.html index fe7646e..b2b4db8 100644 --- a/templates/admin.html +++ b/templates/admin.html @@ -13,13 +13,7 @@ - + @@ -224,33 +218,8 @@ homerooms['{{i}}'].push({{ j }}); {% endfor %} {% endfor %} - function getHR() { - var grade = $('#sel-grade').val(); - $('#sel-room').html(''); - if (grade === "") { - $('#sel-room').attr('disabled', 'disabled') - return - } - homerooms[grade].forEach(element => { - $('#sel-room').append(``) - }); - $('#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(); - } + diff --git a/templates/chgPassword.html b/templates/chgPassword.html index 9433d16..8a4d9eb 100644 --- a/templates/chgPassword.html +++ b/templates/chgPassword.html @@ -12,13 +12,7 @@ - +