修正快速報名
This commit is contained in:
@@ -55,6 +55,7 @@
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<button class="btn btn-primary" onclick="designer.save(event)">儲存牌位</button>
|
||||
<button class="btn btn-primary" onclick="designer.saveTemplate(event)">存成範本</button>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div style="display: flex; align-items: center; padding: 8px; background-color: #f5f5f5; border-radius: 4px; margin-bottom: 12px; font-family: sans-serif;">
|
||||
@@ -159,6 +160,33 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="modal fade hide" id="templateModal" tabindex="-1" aria-labelledby="templateModalLabel" aria-hidden="true" style="z-index:10000 !important;">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="exampleModalLabel">範本名稱</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="form-floating mb-3">
|
||||
<input class="form-control" type="text" id="templateName" placeholder="名稱" />
|
||||
<label for="family_txt">名稱</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">關閉</button>
|
||||
<button type="button" class="btn btn-primary" onclick="designer.saveTemplateReal()">存檔</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
const designer = {
|
||||
zoomScale: 0.5,
|
||||
@@ -192,6 +220,7 @@
|
||||
follower_id: "",
|
||||
toast: null,
|
||||
modal: null,
|
||||
templateModal:null,
|
||||
bg: [
|
||||
{ name: "超薦1", path: "../../../admin/print/html/tablet-1_new.svg" },
|
||||
{ name: "超薦2", path: "../../../admin/print/html/tablet-1B_new.svg" },
|
||||
@@ -203,6 +232,7 @@
|
||||
async init() {
|
||||
this.toast = new bootstrap.Toast($('#liveToast'));
|
||||
this.modal = new bootstrap.Modal($('#familyModal'));
|
||||
this.templateModal = new bootstrap.Modal($('#templateModal'));
|
||||
$("#scaleSize").html((this.zoomScale * 100) + "%");
|
||||
$("#scaleSlider").val(this.zoomScale).on("input change", function () {
|
||||
designer.zoomScale = parseFloat($(this).val());
|
||||
@@ -445,34 +475,34 @@
|
||||
});
|
||||
|
||||
let pageStyle = `<style id="pageStyle">
|
||||
* { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; color-adjust: exact !important; }
|
||||
.vertical-text { writing-mode: vertical-rl !important; -webkit-writing-mode: vertical-rl !important; text-orientation: mixed !important; }
|
||||
body { overflow: visible !important; }
|
||||
@media print {
|
||||
:host { width:auto !important; height:auto !important; }
|
||||
@page { size:${printSize.width}mm ${printSize.height}mm !important; margin:0; }
|
||||
html, body, form, .full-home, .printArea, .canvas-area { height: auto !important; width: auto !important; overflow: visible !important; margin: 0 !important; padding: 0 !important; display: block !important; }
|
||||
.no-print, #customMenu { display: none !important; }
|
||||
.canvas-area { display:flex !important; flex-direction: row !important; justify-content:center !important; align-items:center !important; }
|
||||
.tablet-paper { position: relative !important; display: block !important; break-inline:avoid; page-break-inline:avoid; break-after: page !important; page-break-after: always !important; margin: 0 !important; border: none !important; background-repeat: no-repeat; background-size: 100% 100%; }
|
||||
.tablet-element { position: absolute !important; white-space: normal; color: black !important; }
|
||||
}
|
||||
.roster-container { width: 100%; height: 100%; writing-mode: vertical-rl; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 20px; }
|
||||
.roster-row { display: flex; flex-direction: row-reverse; justify-content: center; gap: 8px; margin-left: 10px; }
|
||||
.name-group { display: flex; flex-direction: column; justify-content: center; align-items: center; }
|
||||
.roster-name { text-orientation: upright; white-space: normal; line-height: 1.2; font-family: DFKai-sb; width: fit-content; }
|
||||
.ancestor-wrapper { writing-mode: horizontal-tb; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: fit-content; }
|
||||
.main-name { line-height: 1.2; }
|
||||
.sub-text { font-size: ${ancestorFontSize}px; line-height: 1.2; margin-top: 4px; white-space: normal; writing-mode:vertical-rl; }
|
||||
.canvas-area { width: ${pageSize.width}mm; height: ${pageSize.height}mm; break-after: page; page-break-after: always; display:flex !important; justify-content:center; }
|
||||
.tablet-paper { background-color: white; display: inline-block; width: ${size.width}mm !important; height: ${size.height}mm !important; position: relative; margin-bottom: 0; background-image: url(${img.path}); background-size: 100% 100%; break-inline:avoid; page-break-inline:avoid; }
|
||||
.tablet-element { cursor: move; padding: 4px; color: black !important; border: 1px solid transparent; transition: writing-mode 0.3s, transform 0.2s; }
|
||||
.tablet-element:hover { border-color: rgba(13, 110, 253, 0.3); }
|
||||
.tablet-paper:last-child { page-break-after: auto; }
|
||||
.tablet-element span { z-index: 999; }
|
||||
.selectedItem .canselectItem { font-size: 18px; }
|
||||
.selectedItem, .rounded-pill .canselectItem, .rounded-pill { font-size: 12px; }
|
||||
</style>`;
|
||||
* { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; color-adjust: exact !important; }
|
||||
.vertical-text { writing-mode: vertical-rl !important; -webkit-writing-mode: vertical-rl !important; text-orientation: mixed !important; }
|
||||
body { overflow: visible !important; }
|
||||
@media print {
|
||||
:host { width:auto !important; height:auto !important; }
|
||||
@page { size:${printSize.width}mm ${printSize.height}mm !important; margin:0; }
|
||||
html, body, form, .full-home, .printArea, .canvas-area { height: auto !important; width: auto !important; overflow: visible !important; margin: 0 !important; padding: 0 !important; display: block !important; }
|
||||
.no-print, #customMenu { display: none !important; }
|
||||
.canvas-area { display:flex !important; flex-direction: row !important; justify-content:center !important; align-items:center !important; }
|
||||
.tablet-paper { position: relative !important; display: block !important; break-inline:avoid; page-break-inline:avoid; break-after: page !important; page-break-after: always !important; margin: 0 !important; border: none !important; background-repeat: no-repeat; background-size: 100% 100%; }
|
||||
.tablet-element { position: absolute !important; white-space: normal; color: black !important; }
|
||||
}
|
||||
.roster-container { width: 100%; height: 100%; writing-mode: vertical-rl; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 20px; }
|
||||
.roster-row { display: flex; flex-direction: row-reverse; justify-content: center; gap: 8px; margin-left: 10px; }
|
||||
.name-group { display: flex; flex-direction: column; justify-content: center; align-items: center; }
|
||||
.roster-name { text-orientation: upright; white-space: normal; line-height: 1.2; font-family: DFKai-sb; width: fit-content; }
|
||||
.ancestor-wrapper { writing-mode: horizontal-tb; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: fit-content; }
|
||||
.main-name { line-height: 1.2; }
|
||||
.sub-text { font-size: ${ancestorFontSize}px; line-height: 1.2; margin-top: 4px; white-space: normal; writing-mode:vertical-rl; }
|
||||
.canvas-area { width: ${pageSize.width}mm; height: ${pageSize.height}mm; break-after: page; page-break-after: always; display:flex !important; justify-content:center; }
|
||||
.tablet-paper { background-color: white; display: inline-block; width: ${size.width}mm !important; height: ${size.height}mm !important; position: relative; margin-bottom: 0; background-image: url(${img.path}); background-size: 100% 100%; break-inline:avoid; page-break-inline:avoid; }
|
||||
.tablet-element { cursor: move; padding: 4px; color: black !important; border: 1px solid transparent; transition: writing-mode 0.3s, transform 0.2s; }
|
||||
.tablet-element:hover { border-color: rgba(13, 110, 253, 0.3); }
|
||||
.tablet-paper:last-child { page-break-after: auto; }
|
||||
.tablet-element span { z-index: 999; }
|
||||
.selectedItem .canselectItem { font-size: 18px; }
|
||||
.selectedItem, .rounded-pill .canselectItem, .rounded-pill { font-size: 12px; }
|
||||
</style>`;
|
||||
|
||||
$("#pageStyle").remove();
|
||||
$("head").append(pageStyle);
|
||||
@@ -494,11 +524,11 @@
|
||||
this.alive.forEach(x => {
|
||||
let f = this.familyMembers.find(z => z.fam_name == x);
|
||||
$(".selectedItem").append(`<li><span style="opacity:0.5">卍</span>
|
||||
<span class="selected">${x}</span>
|
||||
<span><i class="rounded-pill rounded-3 ${(f && f.fam_title) ? 'p-1' : ''}" style="background-color:lightgray">${(f && f.fam_title) ? f.fam_title : ""}</i></span>
|
||||
<span class="itemRemove" style="float:right;margin-left:2rem;cursor:pointer;">−</span>
|
||||
<span class="itemUp" style="float:right;margin-left:2rem;cursor:pointer;">↑</span>
|
||||
<span class="itemDown" style="float:right;margin-left:2rem;cursor:pointer;">↓</span></li>`);
|
||||
<span class="selected">${x}</span>
|
||||
<span><i class="rounded-pill rounded-3 ${(f && f.fam_title) ? 'p-1' : ''}" style="background-color:lightgray">${(f && f.fam_title) ? f.fam_title : ""}</i></span>
|
||||
<span class="itemRemove" style="float:right;margin-left:2rem;cursor:pointer;">−</span>
|
||||
<span class="itemUp" style="float:right;margin-left:2rem;cursor:pointer;">↑</span>
|
||||
<span class="itemDown" style="float:right;margin-left:2rem;cursor:pointer;">↓</span></li>`);
|
||||
});
|
||||
|
||||
let items = this.familyMembers.filter(x => x.deceased == false).map(x => x.fam_name);
|
||||
@@ -507,19 +537,19 @@
|
||||
finalItem.forEach(yy => {
|
||||
let f = this.familyMembers.find(z => z.fam_name == yy);
|
||||
$(".canselectItem").append(`<li><span style="opacity:0.5">卍</span> <span class="unselect">${yy}</span>
|
||||
<span><i class="rounded-pill rounded-3 ${(f && f.fam_title) ? 'p-1' : ''}" style="background-color:lightgray">${(f && f.fam_title) ? f.fam_title : ""}</i></span>
|
||||
<span class='itemAppend' style="float:right;cursor:pointer;">+</span></li>`);
|
||||
<span><i class="rounded-pill rounded-3 ${(f && f.fam_title) ? 'p-1' : ''}" style="background-color:lightgray">${(f && f.fam_title) ? f.fam_title : ""}</i></span>
|
||||
<span class='itemAppend' style="float:right;cursor:pointer;">+</span></li>`);
|
||||
});
|
||||
} else if (element.hasClass("address")) {
|
||||
$(".selectedItem").append(`<li><span style="opacity:0.5">卍</span>
|
||||
<span class="selected">${this.address == undefined ? "" : this.address}</span>
|
||||
<span class="itemRemove" style="float:right;margin-left:2rem;cursor:pointer;">−</span>`);
|
||||
<span class="selected">${this.address == undefined ? "" : this.address}</span>
|
||||
<span class="itemRemove" style="float:right;margin-left:2rem;cursor:pointer;">−</span>`);
|
||||
} else if (element.hasClass("lefttitle")) {
|
||||
this.leftProperTitle.forEach(x => {
|
||||
let f = this.familyMembers.find(z => z.fam_name == x);
|
||||
$(".selectedItem").append(`<li><span style="opacity:0.5">卍</span><span class="selected">${x}</span>
|
||||
<span><i class="rounded-pill rounded-3 ${(f && f.fam_title) ? 'p-1' : ''}" style="background-color:lightgray">${(f && f.fam_title) ? f.fam_title : ""}</i></span>
|
||||
<span class="itemRemove" style="float:right;margin-left:2rem;cursor:pointer;">−</span>`);
|
||||
<span><i class="rounded-pill rounded-3 ${(f && f.fam_title) ? 'p-1' : ''}" style="background-color:lightgray">${(f && f.fam_title) ? f.fam_title : ""}</i></span>
|
||||
<span class="itemRemove" style="float:right;margin-left:2rem;cursor:pointer;">−</span>`);
|
||||
});
|
||||
|
||||
let items = this.familyMembers.filter(x => (this.tabletType == "A" && x.deceased == false) || (this.tabletType == "B" && x.deceased == true)).map(x => x.fam_name);
|
||||
@@ -528,15 +558,15 @@
|
||||
finalItem.forEach(yy => {
|
||||
let f = this.familyMembers.find(z => z.fam_name == yy);
|
||||
$(".canselectItem").append(`<li><span style="opacity:0.5">卍</span> <span class="unselect">${yy}</span>
|
||||
<span><i class="rounded-pill rounded-3 ${(f && f.fam_title) ? 'p-1' : ''}" style="background-color:lightgray">${(f && f.fam_title) ? f.fam_title : ""}</i></span>
|
||||
<span class='itemAppend' style="float:right;cursor:pointer;">+</span></li>`);
|
||||
<span><i class="rounded-pill rounded-3 ${(f && f.fam_title) ? 'p-1' : ''}" style="background-color:lightgray">${(f && f.fam_title) ? f.fam_title : ""}</i></span>
|
||||
<span class='itemAppend' style="float:right;cursor:pointer;">+</span></li>`);
|
||||
});
|
||||
} else if (element.hasClass("righttitle")) {
|
||||
this.rightProperTitle.forEach(x => {
|
||||
let f = this.familyMembers.find(z => z.fam_name == x);
|
||||
$(".selectedItem").append(`<li><span style="opacity:0.5">卍</span><span class="selected">${x}</span>
|
||||
<span><i class="rounded-pill rounded-3 ${(f && f.fam_title) ? 'p-1' : ''}" style="background-color:lightgray">${(f && f.fam_title) ? f.fam_title : ""}</i></span>
|
||||
<span class="itemRemove" style="float:right;margin-left:2rem;cursor:pointer;">−</span>`);
|
||||
<span><i class="rounded-pill rounded-3 ${(f && f.fam_title) ? 'p-1' : ''}" style="background-color:lightgray">${(f && f.fam_title) ? f.fam_title : ""}</i></span>
|
||||
<span class="itemRemove" style="float:right;margin-left:2rem;cursor:pointer;">−</span>`);
|
||||
});
|
||||
|
||||
let items = this.familyMembers.filter(x => (this.tabletType == "A" && x.deceased == false) || (this.tabletType == "B" && x.deceased == true)).map(x => x.fam_name);
|
||||
@@ -545,8 +575,8 @@
|
||||
finalItem.forEach(yy => {
|
||||
let f = this.familyMembers.find(z => z.fam_name == yy);
|
||||
$(".canselectItem").append(`<li><span style="opacity:0.5">卍</span> <span class="unselect">${yy}</span>
|
||||
<span><i class="rounded-pill rounded-3 ${(f && f.fam_title) ? 'p-1' : ''}" style="background-color:lightgray">${(f && f.fam_title) ? f.fam_title : ""}</i></span>
|
||||
<span class='itemAppend' style="float:right;cursor:pointer;">+</span></li>`);
|
||||
<span><i class="rounded-pill rounded-3 ${(f && f.fam_title) ? 'p-1' : ''}" style="background-color:lightgray">${(f && f.fam_title) ? f.fam_title : ""}</i></span>
|
||||
<span class='itemAppend' style="float:right;cursor:pointer;">+</span></li>`);
|
||||
});
|
||||
} else {
|
||||
let hasControls = !element.hasClass("ancestor-wrapper");
|
||||
@@ -554,8 +584,8 @@
|
||||
let f = this.familyMembers.find(z => z.fam_name == y);
|
||||
let controlHtml = hasControls ? `<span class="itemUp" style="float:right;margin-left:2rem;cursor:pointer;">↑</span><span class="itemDown" style="float:right;margin-left:2rem;cursor:pointer;">↓</span>` : '';
|
||||
$(".selectedItem").append(`<li><span style="opacity:0.5">卍</span><span class="selected">${y}</span>
|
||||
<span><i class="rounded-pill rounded-3 ${(f && f.fam_title) ? 'p-1' : ''}" style="background-color:lightgray">${(f && f.fam_title) ? f.fam_title : ""}</i></span>
|
||||
<span class="itemRemove" style="float:right;margin-left:2rem;cursor:pointer;">−</span>${controlHtml}</li>`);
|
||||
<span><i class="rounded-pill rounded-3 ${(f && f.fam_title) ? 'p-1' : ''}" style="background-color:lightgray">${(f && f.fam_title) ? f.fam_title : ""}</i></span>
|
||||
<span class="itemRemove" style="float:right;margin-left:2rem;cursor:pointer;">−</span>${controlHtml}</li>`);
|
||||
});
|
||||
|
||||
if (hasControls) {
|
||||
@@ -564,8 +594,8 @@
|
||||
finalItem.forEach(yy => {
|
||||
let f = this.familyMembers.find(z => z.fam_name == yy);
|
||||
$(".canselectItem").append(`<li><span style="opacity:0.5">卍</span> <span class="unselect">${yy}</span>
|
||||
<span><i class="rounded-pill rounded-3 ${(f && f.fam_title) ? 'p-1' : ''}" style="background-color:lightgray">${(f && f.fam_title) ? f.fam_title : ""}</i></span>
|
||||
<span class='itemAppend' style="float:right;cursor:pointer;">+</span></li>`);
|
||||
<span><i class="rounded-pill rounded-3 ${(f && f.fam_title) ? 'p-1' : ''}" style="background-color:lightgray">${(f && f.fam_title) ? f.fam_title : ""}</i></span>
|
||||
<span class='itemAppend' style="float:right;cursor:pointer;">+</span></li>`);
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -1339,9 +1369,9 @@
|
||||
renderCombined(mid, d) {
|
||||
const parts = mid.join("\n").split('\n');
|
||||
return `<div class="ancestor-wrapper" style="width:${d.width}px !important;height:${d.height}px !important;" >
|
||||
<span class="main-name" >${parts[0] || ''}</span>
|
||||
<span class="sub-text">${parts[1] || ''}</span>
|
||||
</div>`;
|
||||
<span class="main-name" >${parts[0] || ''}</span>
|
||||
<span class="sub-text">${parts[1] || ''}</span>
|
||||
</div>`;
|
||||
},
|
||||
|
||||
renderNameGroups(items, el) {
|
||||
@@ -1398,7 +1428,21 @@
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
async saveTemplate(event) {
|
||||
//event.preventDefault();
|
||||
this.templateModal.show();
|
||||
},
|
||||
async saveTemplateReal(event) {
|
||||
//event.preventDefault();
|
||||
let tablet = { mid_items: this.family_deceased_N_selected, left_items: this.family_deceased_Y_selected, style: this.selectStyle.style, mid_left: this.family_left_title, mid_right: this.family_right_title, addr_items: this.family_address };
|
||||
let data = { num: "0", name: $("#templateName").val(), follower_num: this.follower_id, style_id: this.selectStyle.style, tablet: JSON.stringify(tablet), shuwen:"" }
|
||||
await axios.post('/api/follower/SaveTabletTemplate', data).then(res => {
|
||||
if (res.status == 200) {
|
||||
this.templateModal.hide();
|
||||
$("#toast_body").html("存檔成功");
|
||||
}
|
||||
});
|
||||
},
|
||||
async save(event) {
|
||||
event.preventDefault();
|
||||
let tablet = { mid_items: this.family_deceased_N_selected, left_items: this.family_deceased_Y_selected, style: this.selectStyle.style, mid_left: this.family_left_title, mid_right: this.family_right_title, addr_items: this.family_address };
|
||||
|
||||
Reference in New Issue
Block a user