Skip to content

Instantly share code, notes, and snippets.

@neno-tech

neno-tech/code.gs

Created May 20, 2021 02:46
Show Gist options
  • Save neno-tech/07f10589e795e3fc9b7159fe383d2254 to your computer and use it in GitHub Desktop.
Save neno-tech/07f10589e795e3fc9b7159fe383d2254 to your computer and use it in GitHub Desktop.
Download ZIP
CRUD Web App Full 2021
Raw
code.gs
var sheetID = 'xxx'//แก้จุดที่1
function doGet(e) {
if (!e.parameter.page || e.parameter['page']=='index') {
var htmlOutput = HtmlService.createTemplateFromFile('index')
htmlOutput.message = '';
return htmlOutput.evaluate()
.setTitle("web app")
.addMetaTag('viewport', 'width=device-width , initial-scale=1')
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
} else if (e.parameter['page'] == 'form') {
var htmlOutput = HtmlService.createTemplateFromFile('form');
e.parameter['message'];
htmlOutput.firstname = e.parameter['firstname'];
return htmlOutput.evaluate()
.setTitle("web app")
.addMetaTag('viewport', 'width=device-width , initial-scale=1')
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
} else if (e.parameter['page'] == 'edit') {
var htmlOutput = HtmlService.createTemplateFromFile('edit');
e.parameter['message'];
htmlOutput.firstname = e.parameter['firstname'];
return htmlOutput.evaluate()
.setTitle("web app")
.addMetaTag('viewport', 'width=device-width , initial-scale=1')
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
}
}
function getUrl() {
var url = ScriptApp.getService().getUrl()
return url
}
function processForm(formObject) {
var concat = formObject.searchtext + formObject.searchtext2;
var result = "";
if (concat) {
result = search(concat);
}
return result;
}
function search(searchtext) {
var spreadsheetId = sheetID
var dataRange = 'แผ่น1!xxx:xxx';//แก้จุดที่2
var data = Sheets.Spreadsheets.Values.get(spreadsheetId, dataRange).values;
var ar = [];
data.forEach(function(f) {
if (~[f[9]].indexOf(searchtext)) {//แก้จุดที่3
ar.push(f);
}
});
return ar;
}
var SCRIPT_PROP = PropertiesService.getScriptProperties();
function setup() {
var doc = SpreadsheetApp.getActiveSpreadsheet();
SCRIPT_PROP.setProperty(sheetID, doc.getId());
}
function uploadFile(data, file, id, stdCode, firstname, lastname, address, tel, email) {
try {
let date = Utilities.formatDate(new Date(), 'GMT+7', 'dd/MM/yyyy HH:mm:ss')
var folder = DriveApp.getFolderById('xxx');//แก้จุดที่4
var contentType = data.substring(5, data.indexOf(';')),
bytes = Utilities.base64Decode(data.substr(data.indexOf('base64,') + 7)),
blob = Utilities.newBlob(bytes, contentType, file),
file = folder.createFolder([firstname + lastname + date]).createFile(blob),
filelid = file.getId();
image = 'https://drive.google.com/uc?id=' + filelid
var lock = LockService.getPublicLock();
lock.waitLock(30000);
var doc = SpreadsheetApp.openById(sheetID);
var sheet = doc.getSheetByName("แผ่น1");//แก้จุดที่5
var row = [date, id, stdCode, firstname, lastname, address, "'" + tel, email, image];
sheet.appendRow(row)
return "OK";
} catch (f) {
return f.toString();
} finally {
lock.releaseLock();
}
}
function editData(formdata) {
var doc = SpreadsheetApp.openById(sheetID);
var sheet = doc.getSheetByName("แผ่น1");//แก้จุดที่6
var data = sheet.getDataRange().getDisplayValues()
let form = {}
JSON.parse(formdata).forEach(r => {
form[r.name] = r.value
})
let rowIndex = data.findIndex(r => r[0] == form.originalData[0])
if (rowIndex > -1) {
let url
if (form.img) {
let blob = Utilities.newBlob(JSON.parse(form.img), form.imgMimeType, form.imgName)
let folder = DriveApp.getFileById(data[rowIndex][8].split('=')[1]).getParents().next()
let file = folder.createFile(blob).setSharing(DriveApp.Access.ANYONE_WITH_LINK, DriveApp.Permission.VIEW)
url = 'https://drive.google.com/uc?id=' + file.getId()
}
let newData = [...data[rowIndex]]
newData[1] = form.id
newData[2] = form.stdCode
newData[3] = form.firstname
newData[4] = form.lastname
newData[5] = form.address
newData[6] = form.tel
newData[7] = form.email
if (url) newData[8] = url
newData.pop()
sheet.getRange(rowIndex + 1, 1, 1, newData.length).setValues([newData])
return newData
} else return false
}
function deleteData(d) {
var doc = SpreadsheetApp.openById(sheetID);
var sheet = doc.getSheetByName("แผ่น1");//แก้จุดที่7
let data = sheet.getDataRange().getDisplayValues()
let index = data.findIndex(r => r[0] == d)
sheet.deleteRow(index + 1)
return true
}
Raw
edit.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Mitr">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
<!-- Font Awesome CSS -->
<script src="https://kit.fontawesome.com/6a972cf3a7.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<style>
body {
font-family: "Mitr"
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-auto mx-auto">
<nav class="navbar navbar-expand-sm navbar-dark bg-danger flex-sm-nowrap flex-wrap">
<div class="container-fluid">
<button class="navbar-toggler flex-grow-sm-1 flex-grow-0 me-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbar5">
<span class="navbar-toggler-icon"></span>
</button>
<span class="navbar-brand flex-grow-1"><i class="far fa-address-card"></i> ฟอร์มแก้ไขข้อมูล</span>
<div class="navbar-collapse collapse flex-grow-1 justify-content-center" id="navbar5">
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<?var url = getUrl();?><a class="nav-link" href='<?=url?>?page=index'><i class="fas fa-home mr-2"></i>กลับหน้าหลัก</a>
</li>
</ul>
</div>
<div class="flex-grow-1">
<!--spacer-->
</div>
</div>
</nav>
<div class="card">
<div class="card-header bg-info text-light">
โรงเรียนอภิวัฒน์สอนสร้างสื่อ
</div>
<div class="card-body">
<form class="main" id="form" novalidate="novalidate"
style="max-width: 600px;margin: 20px auto;">
<div id="forminner">
<div class="form-row">
<div class="form-group col-md-auto">
<label for="id">เลขประจำตัวประชาชน</label>
<input type="text area" class="form-control" id="id" name="id" maxlength="13" placeholder="เลขประจำตัวประชาชน">
</div>
<div class="form-group col-md-auto">
<label for="stdCode">เลขประจำตัวนักเรียน</label>
<input type="text area" class="form-control" id="stdCode" name="stdCode" maxlength="6" placeholder="เลขประจำตัวนักเรียน">
</div>
<div class="form-group col-md-auto">
<label for="firstname">ชื่อ</label>
<input type="text area" class="form-control" id="firstname" name="firstname" maxlength="80" placeholder="ชื่อ">
</div>
<div class="form-group col-md-auto">
<label for="lastname">นามสกุล</label>
<input type="text area" class="form-control" id="lastname" name="lastname" maxlength="80" placeholder="นามสกุล">
</div>
<div class="form-group col-md-auto">
<label for="address">ที่อยู่</label>
<input type="text area" class="form-control" id="address" name="address" maxlength="200" placeholder="ที่อยู่ปัจจุบัน">
</div>
<div class="form-group col-md-auto">
<label for="tel">เบอร์โทรศัพท์</label>
<input type="text" class="form-control" id="tel" name="tel" maxlength="10" placeholder="xxx-xxxxxxx">
</div>
<div class="form-group col-md-auto">
<label for="email">อีเมล์</label>
<input type="text" class="form-control" id="email" name="email" maxlength="50" placeholder="อีเมล์">
</div>
<!--อัปโหลดรูภาพ-->
<div class="row">
<div class="form-group col-md-auto">
<span>เลือกรูปภาพ</span>
<div class="btn">
<input id="files" type="file">
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="input-field col s6 text-center">
<button type="submit" class="btn btn-danger mb-2" id="button" onclick="submitForm(); return false;">
อัพเดตข้อมูล
</button>
</div>
</div>
</div>
</div>
</form>
<div >
<div id="success" style="display:none">
<h4 class="left-align teal-text">
<center>
อัพเดตข้อมูลเรียบร้อย!
</center>
</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
var elems = document.querySelectorAll('select');
var instances = M.FormSelect.init(elems);
});
var file, reader = new FileReader();
reader.onloadend = function (e) {
if (e.target.error != null) {
showError("File " + file.name + " could not be read.");
return;
} else {
google.script.run
.withSuccessHandler(showSuccess)
.uploadFile(e.target.result, file.name,
$('input#id').val(),
$('input#stdCode').val(),
$('input#firstname').val(),
$('input#lastname').val(),
$('input#address').val(),
$('input#tel').val(),
$('input#email').val()
);
}
};
function showSuccess(e) {
if (e === "OK") {
$('#forminner').hide();
$('#success').show();
$('#image').hide();
} else {
showError(e);
}
}
function restartForm() {
$('#form').trigger("reset");
$('#forminner').show();
$('#success').hide();
$('#button').show();
}
function submitForm() {
var id= $('input#id').val();
if (id.length === 0) {
showError("กรุณากรอกเลขประจำตัวประชาชน");
return;
}
var stdCode = $('input#stdCode').val();
if (stdCode.length === 0) {
showError("กรุณากรอกเลขประจำตัวนักเรียน");
return;
}
var firstname = $('input#firstname').val();
if (firstname.length === 0) {
showError("กรุณากรอกชื่อ");
return;
}
var lastname = $('input#lastname').val();
if (lastname.length === 0) {
showError("กรุณากรอกนามสกุล");
return;
}
var add = $('input#address').val();
if (add.length === 0) {
showError("กรุณากรอกที่อยู่ปัจจุบัน");
return;
}
var tel = $('input#tel').val();
if (tel.length === 0) {
showError("กรุณากรอกหมายเลขโทรศัพท์");
return;
}
var files = $('#files')[0].files;
if (files.length === 0) {
showError("กรุณาเลือกไฟล์ภาพ");
return;
}
document.getElementById("button").style.display = "none"
file = files[0];
if (file.size > 1024 * 1024 * 20) {
showError("The file size should be < 20 MB. ");
return;
}
showMessage("...ระบบกำลังบันทึกข้อมูล...");
reader.readAsDataURL(file);
}
function showError(e) {
Swal.fire({
title: 'คุณกรอกข้อมูลยังไม่ครบ!',
text: e,
icon: 'error',
confirmButtonText: 'ตกลง'
})
}
function showMessage(e) {
Swal.fire({
title: '...กรุณารอสักครู...',
text: '...ระบบกำลังบันทึกข้อมูล...',
showConfirmButton: false,
timer: 3000
})
}
$(document).ready(function () {
$('select').material_select();
});
document.getElementById("files").onchange = function () {
var reader = new FileReader();
reader.onload = function (e) {
document.getElementById("image").src = e.target.result;
$('#image').show();
};
reader.readAsDataURL(this.files[0]);
};
</script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@10"></script>
</body>
</html>
Raw
form.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Mitr">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
<!-- Font Awesome CSS -->
<script src="https://kit.fontawesome.com/6a972cf3a7.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<style>
body {
font-family: "Mitr"
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-auto mx-auto">
<nav class="navbar navbar-expand-sm navbar-dark bg-danger flex-sm-nowrap flex-wrap">
<div class="container-fluid">
<button class="navbar-toggler flex-grow-sm-1 flex-grow-0 me-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbar5">
<span class="navbar-toggler-icon"></span>
</button>
<span class="navbar-brand flex-grow-1"><i class="far fa-address-card"></i> ฟอร์มบันทึกข้อมูล</span>
<div class="navbar-collapse collapse flex-grow-1 justify-content-center" id="navbar5">
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<?var url = getUrl();?><a class="nav-link" href='<?=url?>?page=index'><i class="fas fa-home mr-2"></i>กลับหน้าหลัก</a>
</li>
</ul>
</div>
<div class="flex-grow-1">
<!--spacer-->
</div>
</div>
</nav>
<div class="card">
<div class="card-header bg-info text-light">
โรงเรียนอภิวัฒน์สอนสร้างสื่อ
</div>
<div class="card-body">
<form class="main" id="form" novalidate="novalidate"
style="max-width: 600px;margin: 20px auto;">
<div id="forminner">
<div class="form-row">
<div class="form-group col-md-auto">
<label for="id">เลขประจำตัวประชาชน</label>
<input type="text area" class="form-control" id="id" name="id" maxlength="13" placeholder="เลขประจำตัวประชาชน">
</div>
<div class="form-group col-md-auto">
<label for="stdCode">เลขประจำตัวนักเรียน</label>
<input type="text area" class="form-control" id="stdCode" name="stdCode" maxlength="6" placeholder="เลขประจำตัวนักเรียน">
</div>
<div class="form-group col-md-auto">
<label for="firstname">ชื่อ</label>
<input type="text area" class="form-control" id="firstname" name="firstname" maxlength="80" placeholder="ชื่อ">
</div>
<div class="form-group col-md-auto">
<label for="lastname">นามสกุล</label>
<input type="text area" class="form-control" id="lastname" name="lastname" maxlength="80" placeholder="นามสกุล">
</div>
<div class="form-group col-md-auto">
<label for="address">ที่อยู่</label>
<input type="text area" class="form-control" id="address" name="address" maxlength="200" placeholder="ที่อยู่ปัจจุบัน">
</div>
<div class="form-group col-md-auto">
<label for="tel">เบอร์โทรศัพท์</label>
<input type="text" class="form-control" id="tel" name="tel" maxlength="10" placeholder="xxx-xxxxxxx">
</div>
<div class="form-group col-md-auto">
<label for="email">อีเมล์</label>
<input type="text" class="form-control" id="email" name="email" maxlength="50" placeholder="อีเมล์">
</div>
<!--อัปโหลดรูภาพ-->
<div class="row">
<div class="form-group col-md-auto">
<span>เลือกรูปภาพ</span>
<div class="btn">
<input id="files" type="file">
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="input-field col s6 text-center">
<button type="submit" class="btn btn-danger mb-2" id="button" onclick="submitForm(); return false;">
บันทึกข้อมูล
</button>
</div>
</div>
</div>
</div>
</form>
<div >
<div id="success" style="display:none">
<h4 class="left-align teal-text">
<center>
บันทึกข้อมูลเรียบร้อย!
</center>
</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
var elems = document.querySelectorAll('select');
var instances = M.FormSelect.init(elems);
});
var file, reader = new FileReader();
reader.onloadend = function (e) {
if (e.target.error != null) {
showError("File " + file.name + " could not be read.");
return;
} else {
google.script.run
.withSuccessHandler(showSuccess)
.uploadFile(e.target.result, file.name,
$('input#id').val(),
$('input#stdCode').val(),
$('input#firstname').val(),
$('input#lastname').val(),
$('input#address').val(),
$('input#tel').val(),
$('input#email').val()
);
}
};
function showSuccess(e) {
if (e === "OK") {
$('#forminner').hide();
$('#success').show();
$('#image').hide();
} else {
showError(e);
}
}
function restartForm() {
$('#form').trigger("reset");
$('#forminner').show();
$('#success').hide();
$('#button').show();
}
function submitForm() {
var id= $('input#id').val();
if (id.length === 0) {
showError("กรุณากรอกเลขประจำตัวประชาชน");
return;
}
var stdCode = $('input#stdCode').val();
if (stdCode.length === 0) {
showError("กรุณากรอกเลขประจำตัวนักเรียน");
return;
}
var firstname = $('input#firstname').val();
if (firstname.length === 0) {
showError("กรุณากรอกชื่อ");
return;
}
var lastname = $('input#lastname').val();
if (lastname.length === 0) {
showError("กรุณากรอกนามสกุล");
return;
}
var add = $('input#address').val();
if (add.length === 0) {
showError("กรุณากรอกที่อยู่ปัจจุบัน");
return;
}
var tel = $('input#tel').val();
if (tel.length === 0) {
showError("กรุณากรอกหมายเลขโทรศัพท์");
return;
}
var files = $('#files')[0].files;
if (files.length === 0) {
showError("กรุณาเลือกไฟล์ภาพ");
return;
}
document.getElementById("button").style.display = "none"
file = files[0];
if (file.size > 1024 * 1024 * 20) {
showError("The file size should be < 20 MB. ");
return;
}
showMessage("...ระบบกำลังบันทึกข้อมูล...");
reader.readAsDataURL(file);
}
function showError(e) {
Swal.fire({
title: 'คุณกรอกข้อมูลยังไม่ครบ!',
text: e,
icon: 'error',
confirmButtonText: 'ตกลง'
})
}
function showMessage(e) {
Swal.fire({
title: '...กรุณารอสักครู...',
text: '...ระบบกำลังบันทึกข้อมูล...',
showConfirmButton: false,
timer: 3000
})
}
$(document).ready(function () {
$('select').material_select();
});
document.getElementById("files").onchange = function () {
var reader = new FileReader();
reader.onload = function (e) {
document.getElementById("image").src = e.target.result;
$('#image').show();
};
reader.readAsDataURL(this.files[0]);
};
</script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@10"></script>
</body>
</html>
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Mitr">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<!-- Font Awesome CSS -->
<script src="https://kit.fontawesome.com/6a972cf3a7.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<style>
body {
font-family: "Mitr"
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row m-3">
<div class="col">
<div class="row">
<div class="col-md-4 mx-auto rounded shadow">
<nav class="navbar navbar-expand-sm navbar-dark bg-primary flex-sm-nowrap flex-wrap mt-2">
<div class="container-fluid">
<button class="navbar-toggler flex-grow-sm-1 flex-grow-0 me-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbar5">
<span class="navbar-toggler-icon"></span>
</button>
<span class="navbar-brand flex-grow-1"><i class="fas fa-search"></i> ระบบค้นหาข้อมูล</span>
<div class="navbar-collapse collapse flex-grow-1 justify-content-center" id="navbar5">
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<?var url = getUrl();?><a class="nav-link" href='<?=url?>?page=form'><i class="fas fa-book-medical"></i> คลิก..ลงทะเบียน..ที่นี่</a>
</li>
</ul>
</div>
<div class="flex-grow-1">
<!--spacer-->
</div>
</div>
</nav>
<div class="card text-center mb-2">
<div class="card-header bg-danger text-light">
<i class="far fa-address-card"></i> โรงเรียนอภิวัฒน์สอนสร้างสื่อ
</div>
<div class="card-body">
<!-- ## ฟอร์มค้นหา------------------------------------------------ -->
<form id="search-form" class="form-inline" onsubmit="handleFormSubmit(this)">
<div class="form-group mb-2">
<label class="form-label" for="searchtext"><i class="fas fa-search"></i> กรุณากรอกข้อมูลที่ต้องการค้นหา</label>
</div>
<div class="form-group mx-sm-3 mb-2">
<input type="text" class="form-control" id="searchtext" name="searchtext" placeholder="กรอกเลขประชาชน 13 หลัก">
<input type="password" class="form-control" id="searchtext2" name="searchtext2" placeholder="กรอกรหัสนักเรียน">
</div>
<button type="submit" class="btn btn-danger mb-2">ค้นหา</button>
</form>
<!-- ## ปิดฟอร์ม ------------------------------------------- -->
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-3">
<div class="col">
<!-- ## สร้างตาราง ------------------------------------------------ -->
<div id="search-results" class="table-responsive">
<!-- แสดงข้อมูลที่นี่ -->
</div>
<!-- ## จบตาราง ------------------------------------------------ -->
</div>
</div>
<div class="modal fade" id="editModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header bg-danger text-white">
<h5 class="modal-title" id="staticBackdropLabel">แก้ไขข้อมูล</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div id="edit" class="container-fluid">
<form class="main" id="form">
<div class="row justify-content-center">
<div class="col">
<label class="form-label" for="id">เลขประจำตัวประชาชน</label>
<input type="text" class="form-control" id="id" name="id" maxlength="13" placeholder="เลขประจำตัวประชาชน">
</div>
</div>
<div class="row justify-content-center">
<div class="col">
<label class="form-label" for="stdCode">เลขประจำตัวนักเรียน</label>
<input type="text" class="form-control" id="stdCode" name="stdCode" maxlength="6" placeholder="เลขประจำตัวนักเรียน">
</div>
</div>
<div class="row justify-content-center">
<div class="col">
<label class="form-label" for="firstname">ชื่อ</label>
<input type="text" class="form-control" id="firstname" name="firstname" maxlength="80" placeholder="ชื่อ">
</div>
</div>
<div class="row justify-content-center">
<div class="col">
<label class="form-label" for="lastname">นามสกุล</label>
<input type="text" class="form-control" id="lastname" name="lastname" maxlength="80" placeholder="นามสกุล">
</div>
</div>
<div class="row justify-content-center">
<div class="col">
<label class="form-label" for="address">ที่อยู่</label>
<input type="text" class="form-control" id="address" name="address" maxlength="200" placeholder="ที่อยู่ปัจจุบัน">
</div>
</div>
<div class="row justify-content-center">
<div class="col">
<label class="form-label" for="tel">เบอร์โทรศัพท์</label>
<input type="text" class="form-control" id="tel" name="tel" maxlength="10" placeholder="xxx-xxxxxxx">
</div>
</div>
<div class="row justify-content-center">
<div class="col">
<label class="form-label" for="email">อีเมล์</label>
<input type="text" class="form-control" id="email" name="email" maxlength="50" placeholder="อีเมล์">
</div>
</div>
<div class="row justify-content-center mt-2">
<div class="col">
<label class="form-label" for="file">เลือกรูปภาพ</label>
<input id="file" name="file" type="file" class="form-control" accept="image/*">
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-danger mb-2" id="save_button">
อัพเดตข้อมูล
</button>
</div>
</div>
</div>
</div>
<!--##JAVASCRIPT ---------------------------------------------------- -->
<script>
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 handleFormSubmit(formObject) {
google.script.run.withSuccessHandler(createTable).processForm(formObject);
document.getElementById("search-form").reset();
}
//สร้างตารางและข้อมูลในตาราง
var RowData //เอาไว้เก็บค่า original ของแถวที่ค้นหาเจอ
function createTable(dataArray) {
if (!RowData) RowData = [...dataArray]
console.log("🚀 ~ RowData", RowData)
if (dataArray && dataArray !== undefined && dataArray.length != 0) {
var data = dataArray[3]
$('#search-results').html('')
$('#search-results').append(`<table class='table table-sm table-bordered align-middle' id='dtable'></table>`)
var header = "<thead style='white-space: nowrap'>" +
"<tr>" +
"<th scope='col' class='text-center'>วันที่" +
"<th scope='col' class='text-center'>เลขประจำตัวประชาชน</th>" +
"<th scope='col' class='text-center'>เลขประจำตัวนักเรียน</th>" +
"<th scope='col' class='text-center'>ชื่อ</th>" +
"<th scope='col' class='text-center'>สกุล</th>" +
"<th scope='col' class='text-center'>ที่อยู่</th>" +
"<th scope='col' class='text-center'>เบอร์โทร</th>" +
"<th scope='col' class='text-center'>อีเมล</th>" +
"<th scope='col' class='text-center'>รูปภาพ</th>" +
"<th scope='col' class='text-center'>แก้ไข</th>" +
"<th scope='col' class='text-center'>ลบ</th>" +
"</tr>" +
"</thead>";
$('#dtable').append(header)
$('#dtable').append('<tbody></tbody>')
dataArray.forEach((row, r) => {
var colData = ''
row.forEach((col, c) => {
if (c == 9) return
if (c == 8) {
return colData += `<td class="table-info text-nowrap"><img src="${col}" style = "width:100px; height:100px;"></td><td class="table-info text-nowrap"><button class='btn btn-link' id='btn_edit' onclick="rowEdit(${r})">แก้ไข</button></td><td class="table-info text-nowrap"><button class='btn btn-link text-danger' id='del_edit' onclick="rowDelete(${r})">ลบ</button></td>`
}
return colData += `<td class="table-info text-nowrap">${col}</td>`
})
$('#dtable tbody').append(`<tr>${colData}</tr>`)
})
} else {
var div = document.getElementById('search-results');
//div.empty()
div.innerHTML = "ไม่พบข้อมูล...ข้อมูลถูกลบเรียบร้อยแล้ว!";
}
}
let img
$('#file').on('change', (() => {
img = null
let file = $('#file').prop('files')[0]
let fr = new FileReader()
fr.readAsArrayBuffer(file)
fr.onload = f => {
img = JSON.stringify([...new Int8Array(f.target.result)])
}
}))
let rowIndex
function rowEdit(index) {
rowIndex = index
console.log("🚀 ~ rowIndex", rowIndex)
let data = RowData[rowIndex]
$('#id').val(data[1])
$('#stdCode').val(data[2])
$('#firstname').val(data[3])
$('#lastname').val(data[4])
$('#address').val(data[5])
$('#tel').val(data[6])
$('#email').val(data[7])
$('#editModal').modal('show')
$('#save_button').on('click', () => {
$('#save_button').html(`<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> ...กำลังบันทึก`)
let formdata = $('#form').serializeArray()
if (img) {
formdata.push({
name: 'img',
value: img
})
formdata.push({
name: 'imgName',
value: $('#file').prop('files')[0].name
})
formdata.push({
name: 'imgMimeType',
value: $('#file').prop('files')[0].type
})
}
formdata.push({
name: 'originalData',
value: data
})
console.log("🚀 ~ formdata", formdata)
google.script.run.withSuccessHandler(editResult).withFailureHandler((e) => console.log(e)).editData(JSON.stringify(formdata))
})
}
function rowDelete(index) {
rowIndex = index
console.log("🚀 ~ rowIndex", rowIndex)
let data = RowData[rowIndex]
Swal.fire({
title: 'ลบข้อมูล!',
text: 'ต้องการลบข้อมูลหรือไม่?',
icon: 'warning',
confirmButtonText: 'OK'
}).then((result) => {
if (result.isConfirmed) {
google.script.run.withSuccessHandler(deleteResult).withFailureHandler((e) => console.log(e)).deleteData(data[0])
}
})
}
function editResult(result) {
$('#save_button').html('อัพเดตข้อมูล')
Swal.fire({
title: 'Success!',
text: 'บันทึกข้อมูลเรียบร้อย',
icon: 'success',
confirmButtonText: 'OK'
}).then(() => {
$('#editModal').modal('hide')
RowData[rowIndex] = result
createTable(RowData)
})
}
function deleteResult(result) {
Swal.fire({
title: 'Success!',
text: 'ลบข้อมูลเรียบร้อย',
icon: 'success',
confirmButtonText: 'OK'
}).then(()=>{
RowData.splice(rowEdit,1)
createTable(RowData)
})
}
</script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment