Skip to content

Instantly share code, notes, and snippets.

@arpeggio068

arpeggio068/code ระบบบันทึกเลขหนังสือออนไลน์ 5_2_2021

Last active January 4, 2024 05:27
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save arpeggio068/6a6af64f549d96422529a74f40372ef5 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save arpeggio068/6a6af64f549d96422529a74f40372ef5 to your computer and use it in GitHub Desktop.
Download ZIP
code ระบบบันทึกเลขหนังสือออนไลน์ 5/2/2021
Raw
code ระบบบันทึกเลขหนังสือออนไลน์ 5_2_2021
//Code.gs
var url = "xxx";
var ss = SpreadsheetApp.openByUrl(url);
function doGet(e) {
var tmp = HtmlService.createTemplateFromFile("uform");
return tmp.evaluate()
.setTitle("เลขหนังสือ")
.addMetaTag('viewport', 'width=device-width, initial-scale=1')
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
function processForm(formObject){
var concat = formObject.password;
var result = "";
if(concat){
result = search(concat);
}
return result;
}
function search(searchtext){
const ws = ss.getSheetByName("user");
var range = ws.getRange(2,1,ws.getLastRow()-1,2);
var data = range.getValues();
var ar = [];
data.forEach(function(f) {
if (~[f[0]].indexOf(searchtext)) {
ar.push([ f[0],f[1] ]);
}
});
return ar;
};
function getrowData(){
var ws = ss.getSheetByName("data");
var lastrow = ws.getLastRow();
return lastrow-1;
}
function getrowOnlineData(lastrow){
var ws = ss.getSheetByName("online");
lastrow = ws.getLastRow();
return lastrow-1;
}
function deleteUserData(){
var ws = ss.getSheetByName("online");
var lastdata = ws.getRange(ws.getLastRow(),1,1,2);
var lastrow = ws.getLastRow();
if(lastrow>1){
lastdata.setValue("");
}
}
function getYearData(){
var ws = ss.getSheetByName("data");
var data = ws.getRange(1,2).getValue();
return data;
}
function addNewRow(rowData) {
const currentDate = new Date();
var ws = ss.getSheetByName("data");
//var lastnum = ws.getRange(ws.getLastRow,1).getValue();
ws.appendRow([currentDate,
"'"+rowData.bookno,
rowData.detail,
rowData.department,
rowData.user
]);
return true;
}
function addOnlineData(onUser) {
const currentDate = new Date();
var ws = ss.getSheetByName("online");
ws.appendRow([
onUser.password,
currentDate
]);
return true;
}
function clearUser(){
var currentsheet = ss.getSheetByName("online");
var currentLastRow = currentsheet.getLastRow();
var thirtyMinutesAgo = new Date( Date.now() - 10000 * 60 );//30000 = 30 min
for(var y = currentLastRow; y >=2; y--){
if(currentsheet.getRange(y, 2).getValue() < thirtyMinutesAgo){
//currentsheet.deleteRow(y);
currentsheet.getRange(y,1,1,2).setValue("");
}
}
for(var y = currentLastRow; y >=0; y--){
if(y>2){
//currentsheet.deleteRow(y);
currentsheet.getRange(y,1,1,2).setValue("");
}
}
}
//End Code.gs
<!-- HTML -->
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<style>
h2 {text-align: center;}
.form-group input {
box-shadow:none;
}
.loading {
background-color:lightgrey;
width: 100vw;
height: 100vh;
position: fixed;
top : 0;
left: 0;
z-index: 10000;
}
.pt-40{
padding-top:10rem;
}
#divKategoriBaru {
border: 1px solid rgba(0,0,0,0.2);
padding: 20px;
margin-left:10px;
margin-right:10px;
margin-top: 2px;
border: 1px solid;
padding: 10px;
box-shadow: 5px 10px #888888;
}
</style>
</head>
<body>
<div class = "container" >
<div class="z-depth-4" novalidate="novalidate" style="max-width: 480px;margin: 40px auto;"id="divMenuUraianKerja">
<form id="search-form" onsubmit="handleFormSubmit(this)">
<h2 style="color:red" id ="header">เลขหนังสือ</h2>
<div class="form-row">
<label for="password" id="pass-label" style = "font-size:18px;color:black">รหัสผ่าน</label>
<input type="password" class="form-control" id="password" name ="password" placeholder="Password">
<span id="resp-spinnerA" class="spinner-border spinner-grow-sm text-danger d-none" role="status" aria-hidden="true">
</span>
<div id = "forsubmit" >
<button type ="submit" id= "btn-login" class="btn btn-primary">เข้าสู่ระบบ</button>
</div>
</div>
</form>
<div id="userform" class = "invisible">
<input type="hidden" id="bookno" name="booknumber">
<div class="form-group">
<label for="detail">เรื่อง</label>
<textarea class="form-control" id="detail" rows="3" required></textarea>
<div class = "invalid-feedback">
จำเป็น
</div>
</div>
<div class="form-group">
<label for="department">หน่วยงานผู้รับ</label>
<select onchange='checkvalue(this.value)' class="form-control" id="department" required>
<option disabled selected></option>
<option>การเงิน</option>
<option>บริหาร</option>
<option>ธุรการ</option>
<option value="others">อืนๆ ระบุ</option>
</select>
<div class = "invalid-feedback">
จำเป็น
</div>
<input type="text" id="department2" style='display:none' class="form-control"/>
<div id ="othercheck" class = "invisible" style="color:red;font-size:15px">
จำเป็น
</div>
</div>
<div class="form-group">
<label for="user">ผู้บันทึก</label>
<input type="text"class="form-control" disabled id="user" required>
<div class = "invalid-feedback">
จำเป็น
</div>
</div>
<input type = "hidden" id="yearno"/>
<div id= "comfirm" >
<button class="btn btn-success" id="comfirmButton">รับเลขหนังสือ</button>
<span id="resp-spinner5" class="spinner-grow spinner-grow-sm text-danger d-none" role="status" aria-hidden="true">
</span>
<span id="resp-spinner6" class="spinner-grow spinner-grow-sm text-warning d-none" role="status" aria-hidden="true">
</span>
<span id="resp-spinner7" class="spinner-grow spinner-grow-sm text-info d-none" role="status" aria-hidden="true">
</span>
</div>
</div><!--Close id = userform -->
</div><!-- Close z-depth -->
</div><!-- Close Container -->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<!-- Include Date Range Picker -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://unpkg.com/[email protected]/js/gijgo.min.js" type="text/javascript"></script>
<link href="https://unpkg.com/[email protected]/css/gijgo.min.css" rel="stylesheet" type="text/css" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous">
</script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script>
var time = false;
window.addEventListener("load", preventFormSubmit, true);
function preventFormSubmit() {
var forms = document.querySelectorAll('form');
for (var i = 0; i < forms.length; i++) {
forms[i].addEventListener('submit', function(event) {
event.preventDefault();
});
}
}
function checkvalue(val){
if(val==="others")
document.getElementById('department2').style.display='block';
else
document.getElementById('department2').style.display='none';
}
function getBookno(){
google.script.run.withSuccessHandler(updateBookno).getrowData();
}
function updateBookno(numtext){
if(numtext < 10){
document.getElementById("bookno").value = "00"+numtext;
}
else if(numtext >= 10 && numtext <100){
document.getElementById("bookno").value = "0"+numtext;
}
else{
document.getElementById("bookno").value = numtext;
}
}
function getYearno(){
google.script.run.withSuccessHandler(updateYearno).getYearData();
}
function updateYearno(yearnum){
document.getElementById("header").innerHTML = "เลขหนังสือ "+yearnum;
document.getElementById("yearno").value = yearnum;
}
function showSpin3(){
document.getElementById('resp-spinner5').classList.remove("d-none");
document.getElementById('resp-spinner6').classList.remove("d-none");
document.getElementById('resp-spinner7').classList.remove("d-none");
}
function hideSpin3(){
document.getElementById('resp-spinner5').classList.add("d-none");
document.getElementById('resp-spinner6').classList.add("d-none");
document.getElementById('resp-spinner7').classList.add("d-none");
}
function addOnlineUser(){
var password = document.getElementById("password");
var onUser = {password:password.value
};
google.script.run.addOnlineData(onUser);
}
function checkOther(){
var other = document.getElementById("department").value;
var textother = document.getElementById("department2").value;
if(other =="others" && textother.trim().length == 0){
document.getElementById("othercheck").classList.remove("invisible");
return false;
}else{
document.getElementById("othercheck").classList.add("invisible");
return true;}
}
function validate(){
var fieldsToValidate = document.querySelectorAll("#userform input, #userform textarea, #userform select");
Array.prototype.forEach.call(fieldsToValidate,function(el){
if(el.checkValidity()){
el.classList.remove("is-invalid");
}
else{
el.classList.add("is-invalid");
}
});
return Array.prototype.every.call(fieldsToValidate,function(el){
return el.checkValidity();
});
}
function handleFormSubmit(formObject) {
if(document.getElementById('password').value == "" ){
//alert("กรุณากรอกข้อมูลให้ครบด้วย!!");
document.getElementById("pass-label").innerHTML = "ข้อมูลไม่ถูกต้อง";
document.getElementById("pass-label").style = "color:red";
setTimeout(function(){
document.getElementById("pass-label").innerHTML = "รหัสผ่าน";
document.getElementById("pass-label").style = "color:black";
},3000);
}
else{
document.getElementById('resp-spinnerA').classList.remove("d-none");
document.getElementById('btn-login').classList.add("invisible");
google.script.run.withSuccessHandler(showUserForm).processForm(formObject);
}
}
function showUserForm(dataArray) {
if(dataArray && dataArray !== undefined && dataArray.length != 0){
var user = document.getElementById('user');
document.getElementById("pass-label").innerHTML = "ข้อมูลถูกต้อง";
document.getElementById("pass-label").style = "color:green";
user.value = dataArray[0][1];
addOnlineUser();
document.getElementById("userform").classList.remove("invisible");
document.getElementById("comfirmButton").classList.remove("invisible"); //แสดงปุ่มรับเลขหนังสือ
time = true;
setTimeout(function(){
timeLimit();
},300000);//300000 = 5 นาที
}
else{
document.getElementById("pass-label").innerHTML = "ข้อมูลไม่ถูกต้อง";
document.getElementById("pass-label").style = "color:red";
setTimeout(function(){
document.getElementById("pass-label").innerHTML = "รหัสผ่าน";
document.getElementById("pass-label").style = "color:black";
},3000);
document.getElementById('btn-login').classList.remove("invisible");
}
document.getElementById('resp-spinnerA').classList.add("d-none");
}
function comfirmClick(){//ปุ่มรับเลขหนังสือ
if(validate() && checkOther()== true ){
document.getElementById("comfirmButton").classList.add("invisible");
showSpin3();
getBookno();
google.script.run.withSuccessHandler(checkDuplicate).getrowOnlineData();
}//if validate
else{sweetAlert({text: "Warning!!!"+"\n\n"+"ต้องกรอกข้อมูลที่จำเป็น", icon:"error", timer:3000})
$('#errorNotification').toast('show');
}
}//comfirmClick
function checkDuplicate(checkOnline){
var bookno = document.getElementById("bookno").value;
if(checkOnline >1){
sweetAlert({text: "จำกัดผู้ใช้งานไม่เกิน 1 คน!!!"+"\n\n"+"รอ 5 นาทีแล้วเข้าสู่ระบบอีกครั้ง", icon:"error",
timer:10000});
google.script.run.deleteUserData();
clearFields(["bookno"]);
document.getElementById("comfirmButton").classList.remove("invisible");
document.getElementById("btn-login").classList.remove("invisible");
document.getElementById("userform").classList.add("invisible");
hideSpin3();
time = false;
timeLimit();
}
else if(bookno ==""){
sweetAlert({text: "ไม่สามารถออกเลขหนังสือ!!!"+"\n\n"+"กรุณากดรับเลขหนังสืออีกครั้ง", icon:"error", timer:10000});
document.getElementById("comfirmButton").classList.remove("invisible");
hideSpin3();
}
else{addRecData();}
}//checkDuplicate
function addRecData(){
var bookno = document.getElementById("bookno");//เลขหนังสือ
var detail = document.getElementById("detail");//เรื่อง
var department = document.getElementById("department");//หน่วยงานผู้รับ
var department2 = document.getElementById("department2");//หน่วยงานผู้รับ2
var user = document.getElementById("user");//ผู้ใช้งาน
sweetAlert({text: "กำลังออกเลขหนังสือ !!!"+"\n\n"+"โปรดรอ... ", icon:"warning", timer:3000})
if(department.value == "others"){
department = department2;
}
var rowData = {bookno:bookno.value,
detail:detail.value,
department:department.value,
user:user.value
};
google.script.run.withSuccessHandler(afterSubmit).addNewRow(rowData);
}//function addRecData
function afterSubmit(e){
var yearno = document.getElementById("yearno");//เลขปีหนังสือ
var bookno = document.getElementById("bookno");//เลขหนังสือ
sweetAlert({text: "บันทึกข้อมูลสำเร็จ"+"\n\n"+"เลขหนังสือ = "+yearno.value+bookno.value, icon:"success", timer:300000})
clearFields(["bookno","detail","department","department2"]);
hideSpin3();
document.getElementById("pass-label").innerHTML = "รหัสผ่าน";
document.getElementById("pass-label").style = "color:black";
google.script.run.deleteUserData();
document.getElementById("btn-login").classList.remove("invisible"); // แสดงปุ่มเข้าระบบ
document.getElementById("userform").classList.add("invisible"); // ซ่อนฟอร์ม
time = false;
timeLimit();
}
function clearFields(fields){
fields.forEach(function(fields){
var el = document.getElementById(fields);
el.value = "";
});
}
function timeLimit(){
if(time == true){
sweetAlert({text: "ใช้เวลาเกิน 5 นาที!!!"+"\n\n"+"กรุณาเข้าสู่ระบบอีกครั้ง", icon:"error", timer:20000});
google.script.run.deleteUserData();
clearFields(["bookno"]);
document.getElementById("userform").classList.add("invisible");//ซ่อนฟอร์ม
document.getElementById("btn-login").classList.remove("invisible"); // แสดงปุ่มเข้าระบบ
time = false;
}
}
document.addEventListener("DOMContentLoaded",getYearno);
document.getElementById("comfirmButton").addEventListener("click",comfirmClick);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment