637 lines
24 KiB
JavaScript
637 lines
24 KiB
JavaScript
|
||
var oTable;
|
||
var oPos;
|
||
|
||
$(document).ready(function () {
|
||
var actualDate = new Date(); // convert to actual date
|
||
var prevDate = new Date(actualDate.getFullYear(), actualDate.getMonth() - 6, actualDate.getDate());
|
||
var startDate = new Date("2025/4/1");
|
||
|
||
if (prevDate < startDate) {
|
||
prevDate = startDate;
|
||
}
|
||
|
||
|
||
var startTxt = prevDate.getFullYear().toString() + "/" + padding(prevDate.getMonth() + 1, 2) + "/01";
|
||
var endTxt = actualDate.getFullYear().toString() + "/" + padding(actualDate.getMonth() + 1, 2) + "/" + padding(actualDate.getDate(), 2);
|
||
|
||
$("#startDate").val(startTxt);
|
||
$("#endDate").val(endTxt);
|
||
$(".input-daterange").datepicker({
|
||
format: "yyyy/mm/dd",
|
||
minViewMode: 0,
|
||
maxViewMode: 2,
|
||
orientation: "bottom auto",
|
||
language: "zh-TW",
|
||
autoclose: true
|
||
});
|
||
|
||
var start = $("#startDate").val();
|
||
var end = $("#endDate").val();
|
||
var gender = $("#gender_select").val();
|
||
var min_age = $("#age_start").val();
|
||
var max_age = $("#age_end").val();
|
||
|
||
$('#search_btn').click(function () {
|
||
$('#myTable').DataTable().ajax.reload();
|
||
});
|
||
|
||
$('#export_btn').click(function () {
|
||
var start = $("#startDate").val();
|
||
var end = $("#endDate").val();
|
||
var gender = $("#gender_select").val();
|
||
var min_age = $("#age_start").val();
|
||
var max_age = $("#age_end").val();
|
||
|
||
var url = "api/exportExcel.ashx?start=" + start + "&end=" + end + "&gender=" + gender + "&min_age=" + min_age + "&max_age=" + max_age;
|
||
window.open(url);
|
||
});
|
||
|
||
$('#raw_btn').click(function () {
|
||
if (confirm("注意事項:Raw Data因為資料龐大，會依據選擇的時間範圍，下載等待時間可能會好幾分鐘以上!")) {
|
||
|
||
var start = $("#startDate").val();
|
||
var end = $("#endDate").val();
|
||
var gender = $("#gender_select").val();
|
||
var min_age = $("#age_start").val();
|
||
var max_age = $("#age_end").val();
|
||
|
||
var url = "api/exportRawExcel.ashx?start=" + start + "&end=" + end + "&gender=" + gender + "&min_age=" + min_age + "&max_age=" + max_age;
|
||
window.open(url);
|
||
|
||
}
|
||
});
|
||
|
||
|
||
$('#delBabyBtn').click(function () {
|
||
if (confirm('確定要刪除此筆寶寶的所有資料?')) {
|
||
if (confirm('再次確定要刪除此筆寶寶的所有資料? 刪除後將無法回復!')) {
|
||
var babyData_uid = $('#baby_select').val();
|
||
|
||
var formData = {
|
||
babyData_uid: babyData_uid
|
||
}
|
||
|
||
$.ajax({
|
||
url: "api/delBabyData.ashx",
|
||
type: "POST",
|
||
data: formData,
|
||
success: function (data, textStatus, jqXHR) {
|
||
if (data.ret == "yes") {
|
||
|
||
|
||
alert('刪除完成');
|
||
$('#baby_select option:selected').remove();
|
||
|
||
loadBabyRec();
|
||
} else {
|
||
alert(data.message);
|
||
$('#saveEditBabyBtn').attr('disabled', false);
|
||
}
|
||
},
|
||
error: function (jqXHR, textStatus, errorThrown) {
|
||
alert('網絡或伺服器发生错误，请稍后重试!');
|
||
$('#saveEditBabyBtn').attr('disabled', false);
|
||
}
|
||
});
|
||
|
||
}
|
||
}
|
||
});
|
||
|
||
$('#editBabyBtn').click(function () {
|
||
|
||
$('#edit_babyData_uid').val($('#baby_select').val());
|
||
$('#edit_babyData_name').val($('#baby_select option:selected').attr('baby_name'));
|
||
$('#edit_babyData_sexual').val($('#baby_select option:selected').attr('baby_sex'));
|
||
$('#edit_babyData_birthday').val($('#baby_select option:selected').attr('baby_birthday'));
|
||
|
||
$('#edit_baby_name').val($('#baby_select option:selected').attr('baby_name')).trigger('change');
|
||
$('#gender_baby_select').val($('#baby_select option:selected').attr('baby_sex'));
|
||
|
||
$('#editBabyModal').modal('toggle');
|
||
|
||
});
|
||
|
||
$('#saveEditBabyBtn').click(function () {
|
||
if (confirm('確定要儲存變更後資料?')) {
|
||
if (confirm('再次確定要儲存?時間依紀錄量而定，可能會長到數分鐘!')) {
|
||
$('#saveEditBabyBtn').attr('disabled', true);
|
||
|
||
var new_name = $('#edit_baby_name').val();
|
||
var new_gender = $('#gender_baby_select').val();
|
||
var birthday = $('#edit_babyData_birthday').val();
|
||
|
||
if (new_name == $('#edit_babyData_name').val() && new_gender == $('#edit_babyData_sexual').val()) {
|
||
alert('姓名與性別與原來的相符，不需要儲存!');
|
||
|
||
$('#saveEditBabyBtn').attr('disabled', false);
|
||
return;
|
||
}
|
||
|
||
var formData = {
|
||
babyData_uid: $('#edit_babyData_uid').val(),
|
||
babyData_name: new_name,
|
||
babyData_sexual: new_gender
|
||
}
|
||
|
||
$.ajax({
|
||
url: "api/chgBabyData.ashx",
|
||
type: "POST",
|
||
data: formData,
|
||
success: function (data, textStatus, jqXHR) {
|
||
if (data.ret == "yes") {
|
||
|
||
var gender_txt = "";
|
||
|
||
if (new_gender == "M") {
|
||
gender_txt = "男";
|
||
} else {
|
||
gender_txt = "女";
|
||
}
|
||
|
||
var babyTxt = new_name + " (" + gender_txt + "), 生日：" + birthday;
|
||
$('#baby_select option:selected').text(babyTxt).attr("baby_sex", new_gender).attr("baby_name", new_name).attr("baby_birthday", birthday);
|
||
|
||
//$("#baby_select").append($("<option></option>").attr("value", item.baby_uid).text(babyTxt).attr("baby_sex", item.baby_gender).attr("baby_name", item.baby_name).attr("baby_birthday", birthday));
|
||
|
||
$('#editBabyModal').modal('toggle');
|
||
alert('儲存成功!');
|
||
$('#saveEditBabyBtn').attr('disabled', false);
|
||
loadBabyRec();
|
||
} else {
|
||
alert(data.message);
|
||
$('#saveEditBabyBtn').attr('disabled', false);
|
||
}
|
||
},
|
||
error: function (jqXHR, textStatus, errorThrown) {
|
||
alert('網絡或伺服器发生错误，请稍后重试!');
|
||
$('#saveEditBabyBtn').attr('disabled', false);
|
||
}
|
||
});
|
||
|
||
}
|
||
}
|
||
});
|
||
//$.ajax({
|
||
// url: "api/userList.ashx",
|
||
// type: "POST",
|
||
// data: formData,
|
||
// success: function (data, textStatus, jqXHR) {
|
||
// if (data.ret == "yes") {
|
||
// location.href = "userList.aspx";
|
||
// } else {
|
||
// alert(data.message);
|
||
// }
|
||
// },
|
||
// error: function (jqXHR, textStatus, errorThrown) {
|
||
// alert('网絡或伺服器发生错误，请稍后重试!');
|
||
// }
|
||
//});
|
||
|
||
|
||
loadDataTable();
|
||
|
||
initSubTable();
|
||
|
||
|
||
$('#baby_select').on('change', function () {
|
||
loadBabyRec();
|
||
});
|
||
|
||
$('#downloadBtn').click(function () {
|
||
var line_uid = $('#line_uid_data').val();
|
||
var baby_uid = $('#baby_select').val();
|
||
|
||
|
||
var url = "api/exportBabyRec.ashx?line_uid=" + line_uid + "&baby_uid=" + baby_uid;
|
||
window.open(url);
|
||
|
||
});
|
||
|
||
});
|
||
|
||
function loadBabyRec() {
|
||
var baby_uid = $('#baby_select').val();
|
||
|
||
var formData = {
|
||
baby_uid: baby_uid
|
||
}
|
||
|
||
$.ajax({
|
||
url: "api/babyRecList.ashx",
|
||
type: "POST",
|
||
data: formData,
|
||
success: function (data, textStatus, jqXHR) {
|
||
if (data.ret == "yes") {
|
||
$('#dt-responsive-baby').dataTable().fnClearTable();
|
||
if (data.recs.length > 0) {
|
||
|
||
$('#dt-responsive-baby').dataTable().fnAddData(data.recs);
|
||
}
|
||
|
||
} else {
|
||
alert(data.message);
|
||
|
||
}
|
||
},
|
||
error: function (jqXHR, textStatus, errorThrown) {
|
||
alert('网絡或伺服器发生错误，请稍后重试!');
|
||
}
|
||
});
|
||
}
|
||
|
||
function buttonClick(obj) {
|
||
var uid = obj.getAttribute('data-uid');
|
||
|
||
var formData = {
|
||
line_uid: uid
|
||
}
|
||
|
||
$('#line_uid_data').val(uid);
|
||
|
||
$.ajax({
|
||
url: "api/lineData.ashx",
|
||
type: "POST",
|
||
data: formData,
|
||
success: function (data, textStatus, jqXHR) {
|
||
if (data.ret == "yes") {
|
||
$('#LineTitle').val("Line 名稱：" + data.user.line_displayName + ", Line Uid：" + data.user.line_uid + ", 電話：" + data.user.line_phone);
|
||
|
||
$("#baby_select option").remove();
|
||
|
||
$.each(data.user.babyDatas, function (i, item) {
|
||
|
||
var gender = "";
|
||
|
||
if (item.baby_gender == "M") {
|
||
gender = "男";
|
||
} else {
|
||
gender = "女";
|
||
}
|
||
|
||
var babyTxt = item.baby_name + " (" + gender + "), 生日：" + item.baby_birthday;
|
||
|
||
$("#baby_select").append($("<option></option>").attr("value", item.baby_uid).text(babyTxt).attr("baby_sex", item.baby_gender).attr("baby_name", item.baby_name).attr("baby_birthday", item.baby_birthday));
|
||
});
|
||
|
||
loadBabyRec();
|
||
|
||
$('#clientHistoryListModal').modal('toggle');
|
||
|
||
} else {
|
||
alert(data.message);
|
||
|
||
}
|
||
},
|
||
error: function (jqXHR, textStatus, errorThrown) {
|
||
alert('网絡或伺服器发生错误，请稍后重试!');
|
||
}
|
||
});
|
||
|
||
|
||
}
|
||
|
||
function loadDataTable() {
|
||
var dataTables = {
|
||
init: function init() {
|
||
|
||
this.bindUIActions();
|
||
},
|
||
bindUIActions: function bindUIActions() {
|
||
|
||
// event handlers
|
||
this.table = this.handleDataTables();
|
||
|
||
// add buttons
|
||
//this.table.buttons().container().appendTo('#dt-buttons').unwrap();
|
||
},
|
||
handleDataTables: function handleDataTables() {
|
||
//$('#myTable').append("<tfoot><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr></tfoot>");
|
||
return $('#myTable').DataTable({
|
||
dom: '<\'text-muted\'Bif>\n <\'table-responsive\'trl>\n <\'mt-4\'p>',
|
||
lengthChange: true,
|
||
lengthMenu: [[25, 50, 100, -1], [25, 50, 100, "All"]],
|
||
pageLength: 50,
|
||
buttons: [
|
||
//{
|
||
// text: 'Excel',
|
||
// action: function (e, dt, node, config) {
|
||
|
||
// var start = $("#startDate").val();
|
||
// var end = $("#endDate").val();
|
||
// var gender = $("#gender_select").val();
|
||
// var min_age = $("#age_start").val();
|
||
// var max_age = $("#age_end").val();
|
||
|
||
// var url = "api/exportExcel.ashx?start=" + start + "&end=" + end + "&gender=" + gender + "&min_age=" + min_age + "&max_age=" + max_age;
|
||
// window.open(url);
|
||
|
||
// }
|
||
//}
|
||
],
|
||
language: {
|
||
paginate: {
|
||
previous: '<i class="fa fa-lg fa-angle-left"></i>',
|
||
next: '<i class="fa fa-lg fa-angle-right"></i>'
|
||
},
|
||
buttons: {
|
||
copyTitle: 'Data copied',
|
||
copyKeys: 'Use your keyboard or menu to select the copy command'
|
||
}
|
||
},
|
||
autoWidth: false,
|
||
ajax: {
|
||
url: 'Api/userList.ashx',
|
||
type: 'POST',
|
||
data: function (d) {
|
||
Object.assign(d, {
|
||
start: $("#startDate").val(),
|
||
end: $("#endDate").val(),
|
||
gender: $("#gender_select").val(),
|
||
min_age: $("#age_start").val(),
|
||
max_age: $("#age_end").val()
|
||
});
|
||
|
||
return d;
|
||
},
|
||
dataSrc: 'datas'
|
||
},
|
||
rowId: 'line_uid',
|
||
deferRender: true,
|
||
initComplete: function () {
|
||
//mainItemTable = $('#dt-responsive').dataTable();
|
||
$('#myTable').on('click', 'a', function () {
|
||
buttonClick(this);
|
||
});
|
||
|
||
$('#myTable').on('click', 'button', function () {
|
||
buttonClick(this);
|
||
});
|
||
|
||
|
||
},
|
||
order: [[3, 'desc']],
|
||
info: true,
|
||
search: "搜尋:",
|
||
searching: true,
|
||
columns: [
|
||
{ data: 'line_displayName', className: 'align-middle text-left', orderable: true, searchable: true },
|
||
{ data: 'line_uid', className: 'align-middle text-left', orderable: false, searchable: true, visible: false },
|
||
{ data: 'line_phone', className: 'align-middle text-left', orderable: false, searchable: true },
|
||
{ data: 'testdate', className: 'align-top text-center', orderable: true, searchable: false, visible: false },
|
||
{ data: 'line_uid', className: 'align-middle text-center', orderable: false, searchable: false },
|
||
{ data: 'line_uid', className: 'align-middle text-center', orderable: false, searchable: false }
|
||
],
|
||
columnDefs: [
|
||
{
|
||
targets: 4,
|
||
className: 'align-middle text-left',
|
||
orderable: false,
|
||
searchable: true,
|
||
render: function render(data, type, row, meta) {
|
||
var gender = '';
|
||
var inpercent = '';
|
||
|
||
|
||
|
||
|
||
var htmlString = '';
|
||
|
||
$.each(row.babyDatas, function (i, item) {
|
||
if (item.baby_gender == 'M') {
|
||
gender = '男';
|
||
} else {
|
||
gender = '女';
|
||
}
|
||
|
||
if (item.baby_percent > 97) {
|
||
inpercent = '> 97%';
|
||
} else {
|
||
inpercent = item.baby_percent + '%';
|
||
}
|
||
|
||
switch (item.baby_percent) {
|
||
case 3:
|
||
{
|
||
inpercent = '低於3%';
|
||
break;
|
||
}
|
||
case 15:
|
||
{
|
||
inpercent = '3~14%';
|
||
break;
|
||
}
|
||
case 25:
|
||
{
|
||
inpercent = '15~49%';
|
||
break;
|
||
}
|
||
case 50:
|
||
{
|
||
inpercent = '15~49%';
|
||
break;
|
||
}
|
||
case 75:
|
||
{
|
||
inpercent = '50%以上';
|
||
break;
|
||
}
|
||
case 85:
|
||
{
|
||
inpercent = '50%以上';
|
||
break;
|
||
}
|
||
case 97:
|
||
{
|
||
inpercent = '50%以上';
|
||
break;
|
||
}
|
||
case 100:
|
||
{
|
||
inpercent = '50%以上';
|
||
break;
|
||
}
|
||
|
||
}
|
||
|
||
htmlString += "<tr>";
|
||
htmlString += " <td style='border: 0px;text-align:left;'>" + item.baby_name + "(" + gender + ")</td>";
|
||
htmlString += " <td style='border: 0px;text-align:left;'>生日：" + item.baby_birthday + "</td>";
|
||
htmlString += " <td style='border: 0px;text-align:left;'>測驗日期：" + item.baby_testdate + "</td>";
|
||
htmlString += " <td style='border: 0px;text-align:left;width:18%;'>年齡：" + item.baby_age + "</td>";
|
||
htmlString += " <td style='border: 0px;text-align:left;width:15%;'>身高：" + item.baby_height + " cm </td>";
|
||
htmlString += " <td style='border: 0px;text-align:left;'>成長百分比：" + inpercent + "</td>";
|
||
htmlString += "</tr>";
|
||
|
||
});
|
||
|
||
htmlString = "<table class='table table-nostriped'>" + htmlString + "</table>";
|
||
|
||
return htmlString;
|
||
|
||
//return '<a href="javascript: void(0);" data-uid="' + row.company_uid + '" data-method="preview" >' + row.company_name + '</a>';
|
||
|
||
}
|
||
},
|
||
{
|
||
targets: 5,
|
||
orderable: false,
|
||
searchable: false,
|
||
render: function render(data, type, row, meta) {
|
||
var ret = '';
|
||
|
||
ret += '<button type="button" data-uid="' + row.line_uid + '" data-method="edit" class="btn btn-sm btn-icon btn-secondary" ><i class="fas fa-th-list"></i> <span class="sr-only">View</span></button>';
|
||
return ret;
|
||
}
|
||
}
|
||
|
||
]
|
||
});
|
||
},
|
||
handleSearchRecords: function handleSearchRecords() {
|
||
var self = this;
|
||
|
||
$('#table-search, #filterBy').on('keyup change focus', function (e) {
|
||
var filterBy = $('#filterBy').val();
|
||
var hasFilter = filterBy !== '';
|
||
var value = $('#table-search').val();
|
||
|
||
self.table.search('').columns().search('').draw();
|
||
|
||
if (hasFilter) {
|
||
self.table.columns(filterBy).search(value).draw();
|
||
} else {
|
||
self.table.search(value).draw();
|
||
}
|
||
|
||
});
|
||
}
|
||
}
|
||
|
||
dataTables.init();
|
||
}
|
||
|
||
function initSubTable() {
|
||
$("#dt-responsive-baby").DataTable({
|
||
dom: '<\'text-muted\'Bi>\n <\'table-fixed\'trl>\n <\'mt-4\'p>',
|
||
lengthChange: true,
|
||
lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
|
||
pageLength: 25,
|
||
buttons: [],
|
||
language: {
|
||
paginate: {
|
||
previous: '<i class="fa fa-lg fa-angle-left"></i>',
|
||
next: '<i class="fa fa-lg fa-angle-right"></i>'
|
||
},
|
||
buttons: {
|
||
copyTitle: 'Data copied',
|
||
copyKeys: 'Use your keyboard or menu to select the copy command'
|
||
}
|
||
},
|
||
deferRender: true,
|
||
rowId: 'babyRec_uid',
|
||
deferRender: true,
|
||
order: [[0, 'desc']],
|
||
columns: [
|
||
{ data: 'babyRec_recdate', className: 'align-middle text-left', orderable: true, searchable: false },
|
||
{ data: 'babyRec_yearMonthStr', className: 'align-middle text-left', orderable: true, searchable: false },
|
||
{ data: 'babyRec_height', className: 'align-middle text-left', orderable: true, searchable: false },
|
||
{ data: 'babyRec_inpercent', className: 'align-middle text-left', orderable: true, searchable: false },
|
||
{ data: 'utm_source', className: 'align-middle text-center', orderable: false, searchable: true },
|
||
{ data: 'utm_medium', className: 'align-middle text-center', orderable: false, searchable: true },
|
||
{ data: 'utm_campaign', className: 'align-middle text-center', orderable: false, searchable: true },
|
||
{ data: 'utm_content', className: 'align-middle text-center', orderable: false, searchable: true },
|
||
{ data: 'utm_term', className: 'align-middle text-center', orderable: false, searchable: true }
|
||
],
|
||
columnDefs: [
|
||
{
|
||
targets: 0,
|
||
orderable: true,
|
||
searchable: false,
|
||
render: function render(data, type, row, meta) {
|
||
tMonth = row.babyRec_recMonth;
|
||
tDay = row.babyRec_recDay;
|
||
|
||
if (tDay < 10) {
|
||
tDay = '0' + tDay;
|
||
}
|
||
|
||
if (tMonth < 10) {
|
||
tMonth = '0' + tMonth;
|
||
}
|
||
|
||
return row.babyRec_recYear + "/" + tMonth + "/" + tDay;
|
||
|
||
|
||
|
||
}
|
||
},
|
||
{
|
||
targets: 3,
|
||
orderable: false,
|
||
searchable: false,
|
||
render: function render(data, type, row, meta) {
|
||
var inpercent = "";
|
||
|
||
|
||
switch (row.babyRec_inpercent) {
|
||
case 3:
|
||
{
|
||
inpercent = '低於3%';
|
||
break;
|
||
}
|
||
case 15:
|
||
{
|
||
inpercent = '3~14%';
|
||
break;
|
||
}
|
||
case 25:
|
||
{
|
||
inpercent = '15~49%';
|
||
break;
|
||
}
|
||
case 50:
|
||
{
|
||
inpercent = '15~49%';
|
||
break;
|
||
}
|
||
case 75:
|
||
{
|
||
inpercent = '50%以上';
|
||
break;
|
||
}
|
||
case 85:
|
||
{
|
||
inpercent = '50%以上';
|
||
break;
|
||
}
|
||
case 97:
|
||
{
|
||
inpercent = '50%以上';
|
||
break;
|
||
}
|
||
case 100:
|
||
{
|
||
inpercent = '50%以上';
|
||
break;
|
||
}
|
||
|
||
}
|
||
|
||
|
||
return inpercent;
|
||
|
||
|
||
}
|
||
}
|
||
|
||
],
|
||
initComplete: function () {
|
||
|
||
},
|
||
info: false,
|
||
ordering: true,
|
||
paging: true
|
||
});
|
||
} |