Skip to content

Instantly share code, notes, and snippets.

@arpeggio068

arpeggio068/Refer_20210124

Last active February 6, 2021 13:47
Show Gist options

  • Select an option

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

Select an option

Learn more about clone URLs
Save arpeggio068/2b6e2e6a469d3871abd5ed3037c7a3a3 to your computer and use it in GitHub Desktop.
Download ZIP
แบบฟอร์มทะเบียนรีเฟอร์
Raw
Refer_20210124
//Code
var url = "xxx";
var ss = SpreadsheetApp.openByUrl(url);
function doGet(e) {
return loadForm()
.setTitle("ฟอร์มรีเฟอร์")
.addMetaTag('viewport', 'width=device-width, initial-scale=1')
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
function loadForm(){
var ws = ss.getSheetByName("option");
var list = ws.getRange(1,1,ws.getRange("A1").getDataRegion().getLastRow(),1).getValues();
var ws2 = ss.getSheetByName("driver");
var list2 = ws2.getRange(1,1,ws2.getRange("A1").getDataRegion().getLastRow(),1).getValues();
var htmlListArray = list.map(function(r){return '<option>' + r[0] + '</option>' ; }).join('');
var htmlListArray2 = list2.map(function(r){return '<option>' + r[0] + '</option>' ; }).join('');
var tmp = HtmlService.createTemplateFromFile("page");
//tmp.title = "My Title";
tmp.list = htmlListArray;
tmp.list2 = htmlListArray2;
return tmp.evaluate();
}
//+----------------------------------------------------+++
function userClicked(userInfo){
var ws = ss.getSheetByName("data");
ws.appendRow([new Date(),
userInfo.prefDate,
userInfo.ptName,
userInfo.hn,
userInfo.dx,
userInfo.refer1,
userInfo.refer2,
userInfo.driver,
userInfo.refertype,
userInfo.referpart,
userInfo.ot,
userInfo.chbill,
userInfo.comment
]);
}
function getWords(){
var ws = ss.getSheetByName("option");
var data = ws.getRange(1,3).getDataRegion().getValues();
var options = {};
data.forEach(function(v){
options[v[0]]=null;
});
return options;
}
function getWords2(){
var ws = ss.getSheetByName("option");
var data = ws.getRange(1,5).getDataRegion().getValues();
var options = {};
data.forEach(function(v){
options[v[0]]=null;
});
return options;
}
function sendLineNotify(userInfo) {
var messages = {
'message': userInfo,
};
var url = "https://notify-api.line.me/api/notify";
var token = "xxx";
var options = {
"method": "post",
"payload": messages,
"headers": {
"Authorization": "Bearer " + token
}
};
UrlFetchApp.fetch(url, options);
}
function include(filename){
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
//Code
PAGE
<!doctype html>
<html lang="en">
<head>
<base target="_self">
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href='https://fonts.googleapis.com/css?family=Assistant' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Prompt' rel='stylesheet'>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<?!= include("page-css"); ?>
</head>
<body>
<div class = "container">
<div class="z-depth-4" novalidate="novalidate" style="max-width: 480px;margin: 40px auto;"
id="divMenuUraianKerja">
<!-- <span class="black-text"></span> -->
<div class="card-panel teal lighten-2 text-white">
<h6 style="font-size:24px;">แบบฟอร์มทะเบียน Refer</br>โรงพยาบาลสมเด็จพระยุพราชเชียงของ</h6>
<div class="center"> <img src="https://drive.google.com/uc?view&id=1ZidKl3ji4AyCtYon4s-Wd38HYNpdkzkG" width="160px"
height="60px"></div>
</div>
<div class = "container questionBox mb-4">
<div class="input-field col s12">
<tr>
<input id= "prefDate" type="text" class="datepicker"required >
<label for="prefDate"style="color:blue;font-size:15px;" class="required">วันที่</label>
</div><br>
<div class="input-field col s12">
<input id="ptName" type="text" class="validate" required>
<label for="ptName"style="color:blue;font-size:15px;" class="required">ชื่อ-สกุล ผู้ป่วย</label>
</div><br>
<div class="input-field col s12">
<input id="hn" type="number" min="1" max="999999" class="validate"required>
<label for="hn"style="color:blue;font-size:15px;"class="required">HN</label>
</div><br>
<div class="row questionBox mb-4">
<label for="refertype" style="color:blue;font-size:15px;" class="required">เวร Refer</label>
<select id ="refertype" class="browser-default"required>
<option disabled selected style="color:blue;font-size:15px;"></option>
<?!= list; ?>
</select>
</div><br>
<div class="row questionBox mb-4">
<label for="referpart" style="color:blue;font-size:15px;" class="required">ตึก Refer</label>
<select id ="referpart" class="browser-default" required >
<option disabled selected ></option>
<option >ER</option>
<option >OPD</option>
<option >ตึกชาย</option>
<option >ตึกหญิง</option>
<option >ห้องคลอด</option>
</select>
</div><br>
<div class="input-field col s12">
<input type="text" id="refer1" class="autocomplete"required>
<label for="refer1"style="color:blue;font-size:15px;" class="required">เจ้าหน้าที่ Refer1</label>
</div><br>
<div class="input-field col s12">
<input type="text" id="refer2" class="autocomplete">
<label for="refer2"style="color:blue;font-size:15px;">เจ้าหน้าที่ Refer2</label>
</div><br>
<div class="row questionBox mb-4">
<label for="driver" style="color:blue;font-size:15px" class="required">พนักงานขับรถ</label>
<select id ="driver" class="browser-default"required>
<option disabled selected style="color:blue;font-size:15px;"></option>
<?!= list2; ?>
</select>
</div><br>
<div class="row questionBox mb-4">
<label for="otbill"style="color:blue;font-size:15px;" class="required">ใบ Refer</label>
<select id ="otbill"class="browser-default"required>
<option disabled selected></option>
<option>0</option>
<option>1</option>
</select>
</div><br>
<div class="row questionBox mb-4">
<label for = "changebill"style="color:blue;font-size:15px;" class="required">ใบแลกเวร</label>
<select id ="changebill"class="browser-default"required>
<option disabled selected></option>
<option>0</option>
<option>1</option>
</select>
</div><br>
<div class="input-field col s12">
<input id="dx" type="text" class="validate" required>
<label for="dx" style="color:blue;font-size:15px" class="required">รหัสวินิจฉัย</label>
</div><br>
<div class="input-field col s12">
<input id="comment" type="text" class="validate">
<label for="comment"style="color:blue;font-size:15px;">หมายเหตุ</label>
</div><br>
<div>
<center>
<button id= "btn" class="waves-effect waves-light btn-small"><i class="material-icons left">cloud_upload</i>บันทึก
</button>
</center>
</div>
</div> <!--Close Container Q-mb4-->
</div> <!--Close Container-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">
</script>
<?!= include("page-js"); ?>
</body>
</html>
PAGE
JS
<script>
document.addEventListener('DOMContentLoaded', function() {
document.getElementById("btn").addEventListener("click",buttonClickAction);
//ปฎิทิน---------------------------------------------------------
var datePicker = document.getElementById('prefDate');
M.Datepicker.init(datePicker, {format: "dd/m/yyyy"});
//------------------------------------------------------------
google.script.run.withSuccessHandler(populateWords).getWords();//เจ้าหน้าที่รีเฟอร์1, เจ้าหน้าที่รีเฟอร์2
google.script.run.withSuccessHandler(populateWords2).getWords2();//พขร
});
function populateWords(words){//autofill เจ้าหน้าที่รีเฟอร์
var autocomplete1 = document.getElementById('refer1');
var instances1 = M.Autocomplete.init(autocomplete1, {data: words});
var autocomplete2 = document.getElementById('refer2');
var instances2 = M.Autocomplete.init(autocomplete2, {data: words});
}
function populateWords2(words){//autofill พขร
var autocomplete = document.getElementById('driver');
var instances = M.Autocomplete.init(autocomplete, {data: words});
}
function checkTextValid(){
var userInfo = {};
userInfo.prefDate = document.getElementById("prefDate").value;
userInfo.ptName = document.getElementById("ptName").value;
userInfo.hn = document.getElementById("hn").value;
userInfo.dx = document.getElementById("dx").value;
userInfo.refer1 = document.getElementById("refer1").value;
userInfo.refer2 = document.getElementById("refer2").value;
userInfo.driver = document.getElementById("driver").value;
userInfo.refertype = document.getElementById("refertype").value;//เวรรีเฟอร์
userInfo.referpart = document.getElementById("referpart").value;//ตึกรีเฟอร์
userInfo.ot = document.getElementById("otbill").value;
userInfo.chbill = document.getElementById("changebill").value;
userInfo.comment = document.getElementById("comment").value;
if(userInfo.prefDate == "" ||
userInfo.ptName.trim().length == 0 ||
userInfo.hn == 0 || //เป็นตัวเลข
userInfo.dx.trim().length == 0 ||
userInfo.refer1.trim().length == 0 ||
userInfo.driver == "" ||
userInfo.refertype == "" ||
userInfo.referpart == "" ||
userInfo.ot == "" ||
userInfo.chbill == ""
){ return false; }
else{return true;}
}
function buttonClickAction(){
if(checkTextValid()==true){
addRecord();
sweetAlert({text: "เพิ่มข้อมูลสำเร็จ", icon:"success", timer:3000})
}else{
sweetAlert({text: "กรุณากรอกข้อมูลที่จำเป็นให้ครบ", icon:"warning", timer:3000})
}
}
/* function buttonClickAction(){
var toValidate = {
fn: "โปรดบันทึกรายชื่อผู้ป่วย",
//ln: "โปรดกรอกนามสกุลผู้ป่วย" ,
hn: "โปรดบันทึก HN",
app: "โปรดเลือกเวร Refer",
app2: "โปรดเลือกตึกที่ Refer",
prefDate: "โปรดเลือกวันที่ Refer",
refer1: "โปรดบันทึกชื่อเจ้าหน้าที่ Refer 1",
driver: "โปรดบันทึกชื่อพนักงานขับรถ",
otbill: "โปรดบันทึกใบ Refer",
changebill: "โปรดบันทึกใบแลกเวร",
dx: "โปรดบันทึกรหัสวินิจฉัย"
};
var idKeys = Object.keys(toValidate);
var allValid = true;
idKeys.forEach(function(id){
var isValid = checkIfValid(id,toValidate[id]);
if(!isValid) {
allValid = false;
}
});
if(allValid){
addRecord();
}
}*/
/* function checkIfValid(elID,message){
var isValid = document.getElementById(elID).checkValidity();
var name = fName.value;
var diag = dx.value;
var refer = refer1.value;
var drive = driver.value;
if(!isValid){
sweetAlert({text: "โปรดบันทึกข้อมูลที่จำเป็น", icon:"warning", timer:2000})
return false;
}else if(name.trim().length == 0 ){
sweetAlert({text: "โปรดบันทึกรายชื่อผู้ป่วย", icon:"warning", timer:2000})
return false;
}else if(diag.trim().length == 0){
sweetAlert({text: "โปรดบันทึกรหัสวินิจฉัย", icon:"warning", timer:2000})
return false;
}else if(refer.trim().length == 0 || drive.trim().length == 0){
sweetAlert({text: "โปรดบันทึกเจ้าหน้าที่ Refer1", icon:"warning", timer:2000})
return false;
}
return true;
}*/
function addRecord(){
var userInfo = {};
userInfo.prefDate = document.getElementById("prefDate").value;
userInfo.ptName = document.getElementById("ptName").value;
userInfo.hn = document.getElementById("hn").value;
userInfo.dx = document.getElementById("dx").value;
userInfo.refer1 = document.getElementById("refer1").value;
userInfo.refer2 = document.getElementById("refer2").value;
userInfo.driver = document.getElementById("driver").value;
userInfo.refertype = document.getElementById("refertype").value;//เวรรีเฟอร์
userInfo.referpart = document.getElementById("referpart").value;//ตึกรีเฟอร์
userInfo.ot = document.getElementById("otbill").value;
userInfo.chbill = document.getElementById("changebill").value;
userInfo.comment = document.getElementById("comment").value;
google.script.run.userClicked(userInfo);
google.script.run.sendLineNotify(
"แจ้งเตือนการส่งแบบฟอร์ม Refer :"+
"\nวันที่ Refer: "+userInfo.prefDate+
"\nเวร: "+userInfo.refertype+
"\nตึกที่ Refer: "+userInfo.referpart+
"\nรายชื่อผู้ Refer1: "+userInfo.refer1+
"\nรายชื่อผู้ Refer2: "+userInfo.refer2+
"\nพนักงานขับรถ: "+userInfo.driver
);
document.getElementById("prefDate").value="";
document.getElementById("ptName").value="";
document.getElementById("hn").value="";
document.getElementById("dx").value="";
document.getElementById("refer1").value="";
document.getElementById("refer2").value="";
document.getElementById("driver").value="";
document.getElementById("refertype").value="";//เวรรีเฟอร์
document.getElementById("referpart").value="";//ตึกรีเฟอร์
document.getElementById("otbill").value="";
document.getElementById("changebill").value="";
document.getElementById("comment").value="";
M.updateTextFields();
}
</script>
JS
CSS
<style>
.container {
margin-top: 3em !important;
}
h6 {text-align: center;}
#frame {
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;
}
#subBody1{
font-family: 'Prompt';
}
#subBody2{
font-family: 'Prompt';
}
#subBody3{
font-family: 'Prompt';
}
#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;
}
#divMenuUraianKerja{
border: 1px solid rgba(0,0,0,0.2);
padding: 20px;
margin-left:10px;
margin-right:10px;
margin-top: 15px;
font-family: 'Prompt';
}
.swal-modal .swal-text {
text-align: center;
}
#subButton2 {
animation: mymove 10s infinite;
}
#subButton2:focus {
outline: none;
box-shadow: 0px 0px 2px #0066ff;
}
@keyframes mymove {
50% {transform: rotate(360deg);}
}
.multi-lainnya{
width: 25%;
border-radius: 13px;
border: 1px solid grey;
padding-left: 8px;
}
.multi-lainnya:focus {
outline: none;
box-shadow: 0px 0px 2px #0066ff;
}
.questionBox {
border: 1px solid rgba(0,0,0,0.2);
padding: 1.5rem;
margin-left:10px;
margin-right:10px;
border-radius: 13px;
margin: auto;
width: 100%;
}
label.required::before {
content: '*';
margin-right: 4px;
color: red;
}
</style>
CSS
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment