ts-glitter 13.2.0 → 13.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lowcode/Entry.js +3 -1
- package/lowcode/Entry.ts +3 -3
- package/lowcode/backend-manager/bg-customer-message.js +3 -0
- package/lowcode/backend-manager/bg-customer-message.ts +3 -0
- package/lowcode/cms-plugin/customer-message-user.js +117 -105
- package/lowcode/cms-plugin/customer-message-user.ts +121 -106
- package/lowcode/dialog/image-preview.js +42 -11
- package/lowcode/dialog/image-preview.ts +57 -26
- package/lowcode/index.html +19 -19
- package/package.json +1 -1
package/lowcode/Entry.js
CHANGED
|
@@ -18,6 +18,8 @@ import { ShareDialog } from "./glitterBundle/dialog/ShareDialog.js";
|
|
|
18
18
|
export class Entry {
|
|
19
19
|
static onCreate(glitter) {
|
|
20
20
|
var _a;
|
|
21
|
+
glitter.share.top_inset = 0;
|
|
22
|
+
glitter.share.bottom_inset = 0;
|
|
21
23
|
glitter.share.reload_code_hash = function () {
|
|
22
24
|
const hashCode = window.preloadData.eval_code_hash || {};
|
|
23
25
|
Object.keys(hashCode).map((dd, index) => {
|
|
@@ -55,7 +57,7 @@ export class Entry {
|
|
|
55
57
|
}
|
|
56
58
|
window.renderClock = (_a = window.renderClock) !== null && _a !== void 0 ? _a : clockF();
|
|
57
59
|
console.log(`Entry-time:`, window.renderClock.stop());
|
|
58
|
-
glitter.share.editerVersion = "V_13.2.
|
|
60
|
+
glitter.share.editerVersion = "V_13.2.2";
|
|
59
61
|
glitter.share.start = (new Date());
|
|
60
62
|
const vm = {
|
|
61
63
|
appConfig: [],
|
package/lowcode/Entry.ts
CHANGED
|
@@ -10,7 +10,8 @@ import {ShareDialog} from "./glitterBundle/dialog/ShareDialog.js";
|
|
|
10
10
|
|
|
11
11
|
export class Entry {
|
|
12
12
|
public static onCreate(glitter: Glitter) {
|
|
13
|
-
|
|
13
|
+
glitter.share.top_inset=0
|
|
14
|
+
glitter.share.bottom_inset=0
|
|
14
15
|
glitter.share.reload_code_hash = function () {
|
|
15
16
|
const hashCode = (window as any).preloadData.eval_code_hash || {};
|
|
16
17
|
Object.keys(hashCode).map((dd, index) => {
|
|
@@ -55,8 +56,7 @@ export class Entry {
|
|
|
55
56
|
}
|
|
56
57
|
(window as any).renderClock = (window as any).renderClock ?? clockF();
|
|
57
58
|
console.log(`Entry-time:`, (window as any).renderClock.stop());
|
|
58
|
-
|
|
59
|
-
glitter.share.editerVersion = "V_13.2.0";
|
|
59
|
+
glitter.share.editerVersion = "V_13.2.2";
|
|
60
60
|
glitter.share.start = (new Date());
|
|
61
61
|
const vm: {
|
|
62
62
|
appConfig: any;
|
|
@@ -1100,6 +1100,9 @@ export class BgCustomerMessage {
|
|
|
1100
1100
|
document.querySelector(`#message-lines`).innerHTML += BgCustomerMessage.message_line(data, cf, vm.data.length - 1, vm, gvc);
|
|
1101
1101
|
if (st + ofs >= sh - 50) {
|
|
1102
1102
|
element.scrollTop = element.scrollHeight;
|
|
1103
|
+
setTimeout(() => {
|
|
1104
|
+
element.scrollTop = element.scrollHeight;
|
|
1105
|
+
}, 1000);
|
|
1103
1106
|
}
|
|
1104
1107
|
}
|
|
1105
1108
|
});
|
|
@@ -1184,6 +1184,9 @@ export class BgCustomerMessage {
|
|
|
1184
1184
|
document.querySelector(`#message-lines`).innerHTML += BgCustomerMessage.message_line(data, cf, vm.data.length - 1, vm, gvc);
|
|
1185
1185
|
if (st + ofs >= sh - 50) {
|
|
1186
1186
|
element.scrollTop = element.scrollHeight;
|
|
1187
|
+
setTimeout(()=>{
|
|
1188
|
+
element.scrollTop = element.scrollHeight;
|
|
1189
|
+
},1000)
|
|
1187
1190
|
}
|
|
1188
1191
|
}
|
|
1189
1192
|
});
|
|
@@ -413,19 +413,25 @@ export class CustomerMessageUser {
|
|
|
413
413
|
}
|
|
414
414
|
else {
|
|
415
415
|
vm.data.push(data);
|
|
416
|
+
const element = document.querySelector('.chatContainer');
|
|
417
|
+
const st = element.scrollTop;
|
|
418
|
+
const ofs = element.offsetHeight;
|
|
419
|
+
const sh = element.scrollHeight;
|
|
420
|
+
for (const dd of document.querySelectorAll('.time-mute')) {
|
|
421
|
+
dd.remove();
|
|
422
|
+
}
|
|
423
|
+
document.querySelector(`#message-lines`).innerHTML += CustomerMessageUser.message_line(data, vm.data.length - 1, gvc, vm, cf, chatRoomInf);
|
|
424
|
+
if (st + ofs >= sh - 50) {
|
|
425
|
+
element.scrollTop = element.scrollHeight;
|
|
426
|
+
let clock = gvc.glitter.ut.clock();
|
|
427
|
+
const interval = setInterval(() => {
|
|
428
|
+
if (clock.stop() > 1000) {
|
|
429
|
+
clearInterval(interval);
|
|
430
|
+
}
|
|
431
|
+
element.scrollTop = element.scrollHeight;
|
|
432
|
+
}, 50);
|
|
433
|
+
}
|
|
416
434
|
}
|
|
417
|
-
const element = document.querySelector('.chatContainer');
|
|
418
|
-
const st = element.scrollTop;
|
|
419
|
-
const ofs = element.offsetHeight;
|
|
420
|
-
const sh = element.scrollHeight;
|
|
421
|
-
if (st + ofs >= sh - 50) {
|
|
422
|
-
vm.lastScroll = -1;
|
|
423
|
-
}
|
|
424
|
-
else {
|
|
425
|
-
vm.lastScroll = st;
|
|
426
|
-
}
|
|
427
|
-
clearInterval(interVal);
|
|
428
|
-
gvc.notifyDataChange(messageID);
|
|
429
435
|
console.log('Message from server:', event.data);
|
|
430
436
|
});
|
|
431
437
|
socket.addEventListener('close', function (event) {
|
|
@@ -458,102 +464,13 @@ export class CustomerMessageUser {
|
|
|
458
464
|
try {
|
|
459
465
|
return `
|
|
460
466
|
<div class="my-auto flex-fill"></div>
|
|
461
|
-
|
|
467
|
+
<div class="w-100" id="message-lines">
|
|
468
|
+
${vm.data
|
|
462
469
|
.map((dd, index) => {
|
|
463
|
-
|
|
464
|
-
function drawChatContent() {
|
|
465
|
-
if (dd.message.image) {
|
|
466
|
-
return html `<img style="cursor: pointer;"
|
|
467
|
-
src="${dd.message.image}"
|
|
468
|
-
alt="image"
|
|
469
|
-
onclick="${gvc.event(() => {
|
|
470
|
-
gvc.glitter.openDiaLog(new URL('./dialog/image-preview.js', gvc.glitter.root_path).href, 'preview', dd.message.image);
|
|
471
|
-
})}">`;
|
|
472
|
-
}
|
|
473
|
-
else {
|
|
474
|
-
return dd.message.text.replace(/\n/g, '<br>');
|
|
475
|
-
}
|
|
476
|
-
}
|
|
477
|
-
dd.message.text = dd.message.text || "";
|
|
478
|
-
if (dd.user_id == 'manager') {
|
|
479
|
-
dd.user_data = CustomerMessageUser.config;
|
|
480
|
-
}
|
|
481
|
-
if (cf.user_id !== dd.user_id) {
|
|
482
|
-
if (chatRoomInf.who && (chatRoomInf.who.startsWith('line'))) {
|
|
483
|
-
dd.user_data.head = chatRoomInf.info.line.head;
|
|
484
|
-
dd.user_data.name = chatRoomInf.info.line.name;
|
|
485
|
-
}
|
|
486
|
-
if (chatRoomInf.who && (chatRoomInf.who.startsWith('fb'))) {
|
|
487
|
-
dd.user_data.head = chatRoomInf.info.fb.head;
|
|
488
|
-
dd.user_data.name = chatRoomInf.info.fb.name;
|
|
489
|
-
}
|
|
490
|
-
return html `
|
|
491
|
-
<div
|
|
492
|
-
class="mt-auto d-flex align-items-start ${vm.data[index + 1] && vm.data[index + 1].user_id === dd.user_id ? `mb-1` : `mb-3`}"
|
|
493
|
-
>
|
|
494
|
-
<img
|
|
495
|
-
src="${(dd.user_data && dd.user_data.head) || `https://d3jnmi1tfjgtti.cloudfront.net/file/252530754/1704269678588-43.png`}"
|
|
496
|
-
class="rounded-circle border"
|
|
497
|
-
width="40"
|
|
498
|
-
style="background: white;border-radius: 50%;width: 40px;height: 40px;"
|
|
499
|
-
alt="Albert Flores"
|
|
500
|
-
/>
|
|
501
|
-
<div class="ps-2 ms-1 pe-3"
|
|
502
|
-
style="max-width: 348px;">
|
|
503
|
-
<div
|
|
504
|
-
class="p-3 mb-1 ${((_a = dd === null || dd === void 0 ? void 0 : dd.message) === null || _a === void 0 ? void 0 : _a.image) ? '' : 'py-2'}"
|
|
505
|
-
style="background:#eeeef1;border-top-right-radius: .5rem; border-bottom-right-radius: .5rem; border-bottom-left-radius: .5rem;white-space: normal;"
|
|
506
|
-
>
|
|
507
|
-
${drawChatContent()}
|
|
508
|
-
</div>
|
|
509
|
-
<div class="fs-sm text-muted ${vm.data[index + 1] && vm.data[index + 1].user_id === dd.user_id ? `d-none` : ``}">
|
|
510
|
-
${gvc.glitter.ut.dateFormat(new Date(dd.created_time), 'MM-dd hh:mm')}
|
|
511
|
-
</div>
|
|
512
|
-
</div>
|
|
513
|
-
</div>`;
|
|
514
|
-
}
|
|
515
|
-
else {
|
|
516
|
-
return html `
|
|
517
|
-
<div
|
|
518
|
-
class="d-flex align-items-start justify-content-end ${vm.data[index + 1] && vm.data[index + 1].user_id === dd.user_id
|
|
519
|
-
? `mb-1`
|
|
520
|
-
: `mb-3`}"
|
|
521
|
-
>
|
|
522
|
-
<div class="pe-2 me-1 ps-3"
|
|
523
|
-
style="max-width: 348px;">
|
|
524
|
-
<div
|
|
525
|
-
class=" text-light p-3 mb-1 ${((_b = dd === null || dd === void 0 ? void 0 : dd.message) === null || _b === void 0 ? void 0 : _b.image) ? '' : 'py-2'}"
|
|
526
|
-
style="background:${CustomerMessageUser.config
|
|
527
|
-
.color};border-top-left-radius: .5rem; border-bottom-right-radius: .5rem; border-bottom-left-radius: .5rem;white-space: normal;"
|
|
528
|
-
>
|
|
529
|
-
${drawChatContent()}
|
|
530
|
-
</div>
|
|
531
|
-
<div
|
|
532
|
-
class="fw-500 d-flex justify-content-end align-items-center fs-sm text-muted ${vm.data[index + 1] &&
|
|
533
|
-
vm.data[index + 1].user_id === dd.user_id
|
|
534
|
-
? `d-none`
|
|
535
|
-
: ``}"
|
|
536
|
-
style="gap:5px;"
|
|
537
|
-
>
|
|
538
|
-
<span> ${gvc.glitter.ut.dateFormat(new Date(dd.created_time), 'MM/dd hh:mm')}</span>
|
|
539
|
-
${vm.last_read.find((d2) => {
|
|
540
|
-
return d2.user_id !== cf.user_id && new Date(d2.last_read).getTime() >= new Date(dd.created_time).getTime();
|
|
541
|
-
})
|
|
542
|
-
? `已讀`
|
|
543
|
-
: ``}
|
|
544
|
-
</div>
|
|
545
|
-
</div>
|
|
546
|
-
<img
|
|
547
|
-
src="${(dd.user_data && dd.user_data.head) || `https://d3jnmi1tfjgtti.cloudfront.net/file/252530754/1704269678588-43.png`}"
|
|
548
|
-
class="rounded-circle border"
|
|
549
|
-
style="background: white;border-radius: 50%;width: 40px;height: 40px;"
|
|
550
|
-
width="40"
|
|
551
|
-
alt="Albert Flores"
|
|
552
|
-
/>
|
|
553
|
-
</div>`;
|
|
554
|
-
}
|
|
470
|
+
return CustomerMessageUser.message_line(dd, index, gvc, vm, cf, chatRoomInf);
|
|
555
471
|
})
|
|
556
472
|
.join('')}
|
|
473
|
+
</div>
|
|
557
474
|
${vm.data.length === 0
|
|
558
475
|
? `
|
|
559
476
|
<div class="w-100 text-center"><div class="badge bg-secondary">尚未展開對話，於下方輸入訊息並傳送。</div></div>
|
|
@@ -903,6 +820,101 @@ export class CustomerMessageUser {
|
|
|
903
820
|
};
|
|
904
821
|
});
|
|
905
822
|
}
|
|
823
|
+
static message_line(dd, index, gvc, vm, cf, chatRoomInf) {
|
|
824
|
+
var _a, _b;
|
|
825
|
+
const html = String.raw;
|
|
826
|
+
function drawChatContent() {
|
|
827
|
+
if (dd.message.image) {
|
|
828
|
+
return html `<img style="cursor: pointer;"
|
|
829
|
+
src="${dd.message.image}"
|
|
830
|
+
alt="image"
|
|
831
|
+
onclick="${gvc.event(() => {
|
|
832
|
+
gvc.glitter.openDiaLog(new URL('./dialog/image-preview.js', gvc.glitter.root_path).href, 'preview', dd.message.image);
|
|
833
|
+
})}">`;
|
|
834
|
+
}
|
|
835
|
+
else {
|
|
836
|
+
return dd.message.text.replace(/\n/g, '<br>');
|
|
837
|
+
}
|
|
838
|
+
}
|
|
839
|
+
dd.message.text = dd.message.text || "";
|
|
840
|
+
if (dd.user_id == 'manager') {
|
|
841
|
+
dd.user_data = CustomerMessageUser.config;
|
|
842
|
+
}
|
|
843
|
+
if (cf.user_id !== dd.user_id) {
|
|
844
|
+
if (chatRoomInf.who && (chatRoomInf.who.startsWith('line'))) {
|
|
845
|
+
dd.user_data.head = chatRoomInf.info.line.head;
|
|
846
|
+
dd.user_data.name = chatRoomInf.info.line.name;
|
|
847
|
+
}
|
|
848
|
+
if (chatRoomInf.who && (chatRoomInf.who.startsWith('fb'))) {
|
|
849
|
+
dd.user_data.head = chatRoomInf.info.fb.head;
|
|
850
|
+
dd.user_data.name = chatRoomInf.info.fb.name;
|
|
851
|
+
}
|
|
852
|
+
return html `
|
|
853
|
+
<div
|
|
854
|
+
class="mt-auto d-flex align-items-start ${vm.data[index + 1] && vm.data[index + 1].user_id === dd.user_id ? `mb-1` : `mb-3`}"
|
|
855
|
+
>
|
|
856
|
+
<img
|
|
857
|
+
src="${(dd.user_data && dd.user_data.head) || `https://d3jnmi1tfjgtti.cloudfront.net/file/252530754/1704269678588-43.png`}"
|
|
858
|
+
class="rounded-circle border"
|
|
859
|
+
width="40"
|
|
860
|
+
style="background: white;border-radius: 50%;width: 40px;height: 40px;"
|
|
861
|
+
alt="Albert Flores"
|
|
862
|
+
/>
|
|
863
|
+
<div class="ps-2 ms-1 pe-3"
|
|
864
|
+
style="max-width: 348px;">
|
|
865
|
+
<div
|
|
866
|
+
class="p-3 mb-1 ${((_a = dd === null || dd === void 0 ? void 0 : dd.message) === null || _a === void 0 ? void 0 : _a.image) ? '' : 'py-2'}"
|
|
867
|
+
style="background:#eeeef1;border-top-right-radius: .5rem; border-bottom-right-radius: .5rem; border-bottom-left-radius: .5rem;white-space: normal;"
|
|
868
|
+
>
|
|
869
|
+
${drawChatContent()}
|
|
870
|
+
</div>
|
|
871
|
+
<div class="fs-sm text-muted ${vm.data[index + 1] && vm.data[index + 1].user_id === dd.user_id ? `d-none` : ``}">
|
|
872
|
+
${gvc.glitter.ut.dateFormat(new Date(dd.created_time), 'MM-dd hh:mm')}
|
|
873
|
+
</div>
|
|
874
|
+
</div>
|
|
875
|
+
</div>`;
|
|
876
|
+
}
|
|
877
|
+
else {
|
|
878
|
+
return html `
|
|
879
|
+
<div
|
|
880
|
+
class="d-flex align-items-start justify-content-end ${vm.data[index + 1] && vm.data[index + 1].user_id === dd.user_id
|
|
881
|
+
? `mb-1`
|
|
882
|
+
: `mb-3`}"
|
|
883
|
+
>
|
|
884
|
+
<div class="pe-2 me-1 ps-3"
|
|
885
|
+
style="max-width: 348px;">
|
|
886
|
+
<div
|
|
887
|
+
class=" text-light p-3 mb-1 ${((_b = dd === null || dd === void 0 ? void 0 : dd.message) === null || _b === void 0 ? void 0 : _b.image) ? '' : 'py-2'}"
|
|
888
|
+
style="background:${CustomerMessageUser.config
|
|
889
|
+
.color};border-top-left-radius: .5rem; border-bottom-right-radius: .5rem; border-bottom-left-radius: .5rem;white-space: normal;"
|
|
890
|
+
>
|
|
891
|
+
${drawChatContent()}
|
|
892
|
+
</div>
|
|
893
|
+
<div
|
|
894
|
+
class="fw-500 d-flex justify-content-end align-items-center fs-sm text-muted ${vm.data[index + 1] &&
|
|
895
|
+
vm.data[index + 1].user_id === dd.user_id
|
|
896
|
+
? `d-none`
|
|
897
|
+
: ``}"
|
|
898
|
+
style="gap:5px;"
|
|
899
|
+
>
|
|
900
|
+
<span> ${gvc.glitter.ut.dateFormat(new Date(dd.created_time), 'MM/dd hh:mm')}</span>
|
|
901
|
+
${vm.last_read.find((d2) => {
|
|
902
|
+
return d2.user_id !== cf.user_id && new Date(d2.last_read).getTime() >= new Date(dd.created_time).getTime();
|
|
903
|
+
})
|
|
904
|
+
? `已讀`
|
|
905
|
+
: ``}
|
|
906
|
+
</div>
|
|
907
|
+
</div>
|
|
908
|
+
<img
|
|
909
|
+
src="${(dd.user_data && dd.user_data.head) || `https://d3jnmi1tfjgtti.cloudfront.net/file/252530754/1704269678588-43.png`}"
|
|
910
|
+
class="rounded-circle border"
|
|
911
|
+
style="background: white;border-radius: 50%;width: 40px;height: 40px;"
|
|
912
|
+
width="40"
|
|
913
|
+
alt="Albert Flores"
|
|
914
|
+
/>
|
|
915
|
+
</div>`;
|
|
916
|
+
}
|
|
917
|
+
}
|
|
906
918
|
}
|
|
907
919
|
CustomerMessageUser.config = {};
|
|
908
920
|
CustomerMessageUser.vm = {
|
|
@@ -486,22 +486,28 @@ export class CustomerMessageUser {
|
|
|
486
486
|
const data = JSON.parse(event.data);
|
|
487
487
|
console.log(`message_in`, data.data);
|
|
488
488
|
if (data.type === 'update_read_count') {
|
|
489
|
-
vm.last_read= data.data;
|
|
489
|
+
vm.last_read = data.data;
|
|
490
490
|
} else {
|
|
491
491
|
vm.data.push(data);
|
|
492
|
+
const element: any = document.querySelector('.chatContainer')!;
|
|
493
|
+
const st = element.scrollTop;
|
|
494
|
+
const ofs = element.offsetHeight;
|
|
495
|
+
const sh = element.scrollHeight;
|
|
496
|
+
for (const dd of document.querySelectorAll('.time-mute')) {
|
|
497
|
+
dd.remove();
|
|
498
|
+
}
|
|
499
|
+
document.querySelector(`#message-lines`).innerHTML += CustomerMessageUser.message_line(data, vm.data.length-1, gvc, vm, cf, chatRoomInf);
|
|
500
|
+
if (st + ofs >= sh - 50) {
|
|
501
|
+
element.scrollTop = element.scrollHeight;
|
|
502
|
+
let clock=gvc.glitter.ut.clock()
|
|
503
|
+
const interval=setInterval(()=>{
|
|
504
|
+
if(clock.stop()>1000){
|
|
505
|
+
clearInterval(interval)
|
|
506
|
+
}
|
|
507
|
+
element.scrollTop = element.scrollHeight;
|
|
508
|
+
},50)
|
|
509
|
+
}
|
|
492
510
|
}
|
|
493
|
-
|
|
494
|
-
const element: any = document.querySelector('.chatContainer')!;
|
|
495
|
-
const st = element.scrollTop;
|
|
496
|
-
const ofs = element.offsetHeight;
|
|
497
|
-
const sh = element.scrollHeight;
|
|
498
|
-
if (st + ofs >= sh - 50) {
|
|
499
|
-
vm.lastScroll = -1;
|
|
500
|
-
} else {
|
|
501
|
-
vm.lastScroll = st;
|
|
502
|
-
}
|
|
503
|
-
clearInterval(interVal);
|
|
504
|
-
gvc.notifyDataChange(messageID);
|
|
505
511
|
console.log('Message from server:', event.data);
|
|
506
512
|
});
|
|
507
513
|
socket.addEventListener('close', function (event: any) {
|
|
@@ -535,101 +541,14 @@ export class CustomerMessageUser {
|
|
|
535
541
|
try {
|
|
536
542
|
return `
|
|
537
543
|
<div class="my-auto flex-fill"></div>
|
|
538
|
-
|
|
544
|
+
<div class="w-100" id="message-lines">
|
|
545
|
+
${vm.data
|
|
539
546
|
.map((dd: any, index: number) => {
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
return html`<img style="cursor: pointer;"
|
|
544
|
-
src="${dd.message.image}"
|
|
545
|
-
alt="image"
|
|
546
|
-
onclick="${gvc.event(() => {
|
|
547
|
-
gvc.glitter.openDiaLog(new URL('./dialog/image-preview.js', gvc.glitter.root_path).href, 'preview', dd.message.image)
|
|
548
|
-
})}">`
|
|
549
|
-
} else {
|
|
550
|
-
return dd.message.text.replace(/\n/g, '<br>')
|
|
551
|
-
}
|
|
552
|
-
}
|
|
553
|
-
|
|
554
|
-
dd.message.text = dd.message.text || "";
|
|
555
|
-
if (dd.user_id == 'manager') {
|
|
556
|
-
dd.user_data = CustomerMessageUser.config;
|
|
557
|
-
}
|
|
558
|
-
if (cf.user_id !== dd.user_id) {
|
|
559
|
-
if (chatRoomInf.who && (chatRoomInf.who.startsWith('line'))) {
|
|
560
|
-
dd.user_data.head = chatRoomInf.info.line.head;
|
|
561
|
-
dd.user_data.name = chatRoomInf.info.line.name;
|
|
562
|
-
}
|
|
563
|
-
if (chatRoomInf.who && (chatRoomInf.who.startsWith('fb'))) {
|
|
564
|
-
dd.user_data.head = chatRoomInf.info.fb.head;
|
|
565
|
-
dd.user_data.name = chatRoomInf.info.fb.name;
|
|
566
|
-
}
|
|
567
|
-
return html`
|
|
568
|
-
<div
|
|
569
|
-
class="mt-auto d-flex align-items-start ${vm.data[index + 1] && vm.data[index + 1].user_id === dd.user_id ? `mb-1` : `mb-3`}"
|
|
570
|
-
>
|
|
571
|
-
<img
|
|
572
|
-
src="${(dd.user_data && dd.user_data.head) || `https://d3jnmi1tfjgtti.cloudfront.net/file/252530754/1704269678588-43.png`}"
|
|
573
|
-
class="rounded-circle border"
|
|
574
|
-
width="40"
|
|
575
|
-
style="background: white;border-radius: 50%;width: 40px;height: 40px;"
|
|
576
|
-
alt="Albert Flores"
|
|
577
|
-
/>
|
|
578
|
-
<div class="ps-2 ms-1 pe-3"
|
|
579
|
-
style="max-width: 348px;">
|
|
580
|
-
<div
|
|
581
|
-
class="p-3 mb-1 ${dd?.message?.image ? '' : 'py-2'}"
|
|
582
|
-
style="background:#eeeef1;border-top-right-radius: .5rem; border-bottom-right-radius: .5rem; border-bottom-left-radius: .5rem;white-space: normal;"
|
|
583
|
-
>
|
|
584
|
-
${drawChatContent()}
|
|
585
|
-
</div>
|
|
586
|
-
<div class="fs-sm text-muted ${vm.data[index + 1] && vm.data[index + 1].user_id === dd.user_id ? `d-none` : ``}">
|
|
587
|
-
${gvc.glitter.ut.dateFormat(new Date(dd.created_time), 'MM-dd hh:mm')}
|
|
588
|
-
</div>
|
|
589
|
-
</div>
|
|
590
|
-
</div>`;
|
|
591
|
-
} else {
|
|
592
|
-
return html`
|
|
593
|
-
<div
|
|
594
|
-
class="d-flex align-items-start justify-content-end ${vm.data[index + 1] && vm.data[index + 1].user_id === dd.user_id
|
|
595
|
-
? `mb-1`
|
|
596
|
-
: `mb-3`}"
|
|
597
|
-
>
|
|
598
|
-
<div class="pe-2 me-1 ps-3"
|
|
599
|
-
style="max-width: 348px;">
|
|
600
|
-
<div
|
|
601
|
-
class=" text-light p-3 mb-1 ${dd?.message?.image ? '' : 'py-2'}"
|
|
602
|
-
style="background:${CustomerMessageUser.config
|
|
603
|
-
.color};border-top-left-radius: .5rem; border-bottom-right-radius: .5rem; border-bottom-left-radius: .5rem;white-space: normal;"
|
|
604
|
-
>
|
|
605
|
-
${drawChatContent()}
|
|
606
|
-
</div>
|
|
607
|
-
<div
|
|
608
|
-
class="fw-500 d-flex justify-content-end align-items-center fs-sm text-muted ${vm.data[index + 1] &&
|
|
609
|
-
vm.data[index + 1].user_id === dd.user_id
|
|
610
|
-
? `d-none`
|
|
611
|
-
: ``}"
|
|
612
|
-
style="gap:5px;"
|
|
613
|
-
>
|
|
614
|
-
<span> ${gvc.glitter.ut.dateFormat(new Date(dd.created_time), 'MM/dd hh:mm')}</span>
|
|
615
|
-
${vm.last_read.find((d2: any) => {
|
|
616
|
-
return d2.user_id !== cf.user_id && new Date(d2.last_read).getTime() >= new Date(dd.created_time).getTime();
|
|
617
|
-
})
|
|
618
|
-
? `已讀`
|
|
619
|
-
: ``}
|
|
620
|
-
</div>
|
|
621
|
-
</div>
|
|
622
|
-
<img
|
|
623
|
-
src="${(dd.user_data && dd.user_data.head) || `https://d3jnmi1tfjgtti.cloudfront.net/file/252530754/1704269678588-43.png`}"
|
|
624
|
-
class="rounded-circle border"
|
|
625
|
-
style="background: white;border-radius: 50%;width: 40px;height: 40px;"
|
|
626
|
-
width="40"
|
|
627
|
-
alt="Albert Flores"
|
|
628
|
-
/>
|
|
629
|
-
</div>`;
|
|
630
|
-
}
|
|
547
|
+
return CustomerMessageUser.message_line(dd, index, gvc, vm, cf, chatRoomInf)
|
|
548
|
+
|
|
631
549
|
})
|
|
632
550
|
.join('')}
|
|
551
|
+
</div>
|
|
633
552
|
${
|
|
634
553
|
vm.data.length === 0
|
|
635
554
|
? `
|
|
@@ -836,7 +755,7 @@ export class CustomerMessageUser {
|
|
|
836
755
|
onclick="${gvc.event(() => {
|
|
837
756
|
const dialog = new ShareDialog(gvc.glitter);
|
|
838
757
|
if (!imageArray.length && !vm.message) {
|
|
839
|
-
dialog.errorMessage({text:'請輸入訊息'})
|
|
758
|
+
dialog.errorMessage({text: '請輸入訊息'})
|
|
840
759
|
return
|
|
841
760
|
}
|
|
842
761
|
dialog.dataLoading({
|
|
@@ -998,6 +917,102 @@ export class CustomerMessageUser {
|
|
|
998
917
|
});
|
|
999
918
|
}
|
|
1000
919
|
|
|
920
|
+
public static message_line(dd: any, index: number, gvc: GVC, vm: any, cf: any, chatRoomInf: any) {
|
|
921
|
+
const html = String.raw
|
|
922
|
+
|
|
923
|
+
function drawChatContent() {
|
|
924
|
+
if (dd.message.image) {
|
|
925
|
+
|
|
926
|
+
return html`<img style="cursor: pointer;"
|
|
927
|
+
src="${dd.message.image}"
|
|
928
|
+
alt="image"
|
|
929
|
+
onclick="${gvc.event(() => {
|
|
930
|
+
gvc.glitter.openDiaLog(new URL('./dialog/image-preview.js', gvc.glitter.root_path).href, 'preview', dd.message.image)
|
|
931
|
+
})}">`
|
|
932
|
+
} else {
|
|
933
|
+
return dd.message.text.replace(/\n/g, '<br>')
|
|
934
|
+
}
|
|
935
|
+
}
|
|
936
|
+
|
|
937
|
+
dd.message.text = dd.message.text || "";
|
|
938
|
+
if (dd.user_id == 'manager') {
|
|
939
|
+
dd.user_data = CustomerMessageUser.config;
|
|
940
|
+
}
|
|
941
|
+
if (cf.user_id !== dd.user_id) {
|
|
942
|
+
if (chatRoomInf.who && (chatRoomInf.who.startsWith('line'))) {
|
|
943
|
+
dd.user_data.head = chatRoomInf.info.line.head;
|
|
944
|
+
dd.user_data.name = chatRoomInf.info.line.name;
|
|
945
|
+
}
|
|
946
|
+
if (chatRoomInf.who && (chatRoomInf.who.startsWith('fb'))) {
|
|
947
|
+
dd.user_data.head = chatRoomInf.info.fb.head;
|
|
948
|
+
dd.user_data.name = chatRoomInf.info.fb.name;
|
|
949
|
+
}
|
|
950
|
+
return html`
|
|
951
|
+
<div
|
|
952
|
+
class="mt-auto d-flex align-items-start ${vm.data[index + 1] && vm.data[index + 1].user_id === dd.user_id ? `mb-1` : `mb-3`}"
|
|
953
|
+
>
|
|
954
|
+
<img
|
|
955
|
+
src="${(dd.user_data && dd.user_data.head) || `https://d3jnmi1tfjgtti.cloudfront.net/file/252530754/1704269678588-43.png`}"
|
|
956
|
+
class="rounded-circle border"
|
|
957
|
+
width="40"
|
|
958
|
+
style="background: white;border-radius: 50%;width: 40px;height: 40px;"
|
|
959
|
+
alt="Albert Flores"
|
|
960
|
+
/>
|
|
961
|
+
<div class="ps-2 ms-1 pe-3"
|
|
962
|
+
style="max-width: 348px;">
|
|
963
|
+
<div
|
|
964
|
+
class="p-3 mb-1 ${dd?.message?.image ? '' : 'py-2'}"
|
|
965
|
+
style="background:#eeeef1;border-top-right-radius: .5rem; border-bottom-right-radius: .5rem; border-bottom-left-radius: .5rem;white-space: normal;"
|
|
966
|
+
>
|
|
967
|
+
${drawChatContent()}
|
|
968
|
+
</div>
|
|
969
|
+
<div class="fs-sm text-muted ${vm.data[index + 1] && vm.data[index + 1].user_id === dd.user_id ? `d-none` : ``}">
|
|
970
|
+
${gvc.glitter.ut.dateFormat(new Date(dd.created_time), 'MM-dd hh:mm')}
|
|
971
|
+
</div>
|
|
972
|
+
</div>
|
|
973
|
+
</div>`;
|
|
974
|
+
} else {
|
|
975
|
+
return html`
|
|
976
|
+
<div
|
|
977
|
+
class="d-flex align-items-start justify-content-end ${vm.data[index + 1] && vm.data[index + 1].user_id === dd.user_id
|
|
978
|
+
? `mb-1`
|
|
979
|
+
: `mb-3`}"
|
|
980
|
+
>
|
|
981
|
+
<div class="pe-2 me-1 ps-3"
|
|
982
|
+
style="max-width: 348px;">
|
|
983
|
+
<div
|
|
984
|
+
class=" text-light p-3 mb-1 ${dd?.message?.image ? '' : 'py-2'}"
|
|
985
|
+
style="background:${CustomerMessageUser.config
|
|
986
|
+
.color};border-top-left-radius: .5rem; border-bottom-right-radius: .5rem; border-bottom-left-radius: .5rem;white-space: normal;"
|
|
987
|
+
>
|
|
988
|
+
${drawChatContent()}
|
|
989
|
+
</div>
|
|
990
|
+
<div
|
|
991
|
+
class="fw-500 d-flex justify-content-end align-items-center fs-sm text-muted ${vm.data[index + 1] &&
|
|
992
|
+
vm.data[index + 1].user_id === dd.user_id
|
|
993
|
+
? `d-none`
|
|
994
|
+
: ``}"
|
|
995
|
+
style="gap:5px;"
|
|
996
|
+
>
|
|
997
|
+
<span> ${gvc.glitter.ut.dateFormat(new Date(dd.created_time), 'MM/dd hh:mm')}</span>
|
|
998
|
+
${vm.last_read.find((d2: any) => {
|
|
999
|
+
return d2.user_id !== cf.user_id && new Date(d2.last_read).getTime() >= new Date(dd.created_time).getTime();
|
|
1000
|
+
})
|
|
1001
|
+
? `已讀`
|
|
1002
|
+
: ``}
|
|
1003
|
+
</div>
|
|
1004
|
+
</div>
|
|
1005
|
+
<img
|
|
1006
|
+
src="${(dd.user_data && dd.user_data.head) || `https://d3jnmi1tfjgtti.cloudfront.net/file/252530754/1704269678588-43.png`}"
|
|
1007
|
+
class="rounded-circle border"
|
|
1008
|
+
style="background: white;border-radius: 50%;width: 40px;height: 40px;"
|
|
1009
|
+
width="40"
|
|
1010
|
+
alt="Albert Flores"
|
|
1011
|
+
/>
|
|
1012
|
+
</div>`;
|
|
1013
|
+
}
|
|
1014
|
+
}
|
|
1015
|
+
|
|
1001
1016
|
}
|
|
1002
1017
|
|
|
1003
1018
|
(window as any).glitter.setModule(import.meta.url, CustomerMessageUser);
|
|
@@ -1,27 +1,58 @@
|
|
|
1
1
|
import { init } from '../glitterBundle/GVController.js';
|
|
2
|
-
import { BgWidget } from '../backend-manager/bg-widget.js';
|
|
3
2
|
init(import.meta.url, (gvc, glitter, gBundle) => {
|
|
4
|
-
glitter.addMtScript([{ src: `https://kit.fontawesome.com/02e2dc09e3.js` }], () => {
|
|
3
|
+
glitter.addMtScript([{ src: `https://kit.fontawesome.com/02e2dc09e3.js` }], () => {
|
|
4
|
+
}, () => {
|
|
5
|
+
});
|
|
5
6
|
return {
|
|
6
7
|
onCreateView: () => {
|
|
8
|
+
gvc.addStyle(`.btn-gray {
|
|
9
|
+
display: flex;
|
|
10
|
+
padding: 6px 18px;
|
|
11
|
+
justify-content: center;
|
|
12
|
+
align-items: center;
|
|
13
|
+
gap: 8px;
|
|
14
|
+
border: 0;
|
|
15
|
+
border-radius: 10px;
|
|
16
|
+
background: #dddddd;
|
|
17
|
+
cursor: pointer;
|
|
18
|
+
max-height: 40px;
|
|
19
|
+
color:#585858 !important;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.btn-gray:hover {
|
|
23
|
+
background: #aeaeae;
|
|
24
|
+
color:#585858 !important;
|
|
25
|
+
}`);
|
|
7
26
|
const id = glitter.getUUID();
|
|
8
27
|
const hd = glitter.getUUID();
|
|
9
28
|
const html = String.raw;
|
|
10
|
-
return html
|
|
11
|
-
<div
|
|
12
|
-
|
|
29
|
+
return html `
|
|
30
|
+
<div class="vw-100 vh-100 d-flex align-items-center justify-content-center"
|
|
31
|
+
style="background-color: rgba(0,0,0,0.5);">
|
|
32
|
+
<div id="${hd}" style="height:50px;right:0;top:${gvc.glitter.share.top_inset || 0}px;"
|
|
33
|
+
class="m-2 position-absolute d-flex align-items-center justify-content-center gap-2">
|
|
34
|
+
${grayButton('列印', gvc.event(() => {
|
|
13
35
|
$('#' + hd).addClass('d-none');
|
|
14
36
|
window.print();
|
|
15
37
|
$('#' + hd).removeClass('d-none');
|
|
16
38
|
}))}
|
|
17
|
-
|
|
39
|
+
${grayButton('關閉', gvc.event(() => {
|
|
18
40
|
gvc.closeDialog();
|
|
19
41
|
}))}
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
42
|
+
</div>
|
|
43
|
+
<div id="${id}" style="max-width: 100%;max-height: 100%;">
|
|
44
|
+
<img style="max-width: 85vw;max-height: 85vh;" src="${gBundle}"/>
|
|
45
|
+
</div>
|
|
46
|
+
</div>`;
|
|
25
47
|
},
|
|
26
48
|
};
|
|
27
49
|
});
|
|
50
|
+
function grayButton(text, event, obj) {
|
|
51
|
+
var _a;
|
|
52
|
+
const html = String.raw;
|
|
53
|
+
return html `
|
|
54
|
+
<button class="btn btn-gray" style="" type="button" onclick="${event}">
|
|
55
|
+
<i class="${obj && obj.icon && obj.icon.length > 0 ? obj.icon : 'd-none'}" style="color: #393939"></i>
|
|
56
|
+
${text.length > 0 ? html `<span class="tx_700" style="${(_a = obj === null || obj === void 0 ? void 0 : obj.textStyle) !== null && _a !== void 0 ? _a : ''}">${text}</span>` : ''}
|
|
57
|
+
</button>`;
|
|
58
|
+
}
|
|
@@ -1,38 +1,69 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { BgWidget } from '../backend-manager/bg-widget.js';
|
|
1
|
+
import {init} from '../glitterBundle/GVController.js';
|
|
3
2
|
|
|
4
3
|
init(import.meta.url, (gvc, glitter, gBundle) => {
|
|
5
4
|
glitter.addMtScript(
|
|
6
|
-
[{
|
|
7
|
-
() => {
|
|
8
|
-
|
|
5
|
+
[{src: `https://kit.fontawesome.com/02e2dc09e3.js`}],
|
|
6
|
+
() => {
|
|
7
|
+
},
|
|
8
|
+
() => {
|
|
9
|
+
}
|
|
9
10
|
);
|
|
10
11
|
return {
|
|
11
12
|
onCreateView: () => {
|
|
13
|
+
gvc.addStyle(`.btn-gray {
|
|
14
|
+
display: flex;
|
|
15
|
+
padding: 6px 18px;
|
|
16
|
+
justify-content: center;
|
|
17
|
+
align-items: center;
|
|
18
|
+
gap: 8px;
|
|
19
|
+
border: 0;
|
|
20
|
+
border-radius: 10px;
|
|
21
|
+
background: #dddddd;
|
|
22
|
+
cursor: pointer;
|
|
23
|
+
max-height: 40px;
|
|
24
|
+
color:#585858 !important;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.btn-gray:hover {
|
|
28
|
+
background: #aeaeae;
|
|
29
|
+
color:#585858 !important;
|
|
30
|
+
}`)
|
|
12
31
|
const id = glitter.getUUID();
|
|
13
32
|
const hd = glitter.getUUID();
|
|
14
33
|
const html = String.raw;
|
|
15
|
-
return html
|
|
16
|
-
<div
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
34
|
+
return html`
|
|
35
|
+
<div class="vw-100 vh-100 d-flex align-items-center justify-content-center"
|
|
36
|
+
style="background-color: rgba(0,0,0,0.5);">
|
|
37
|
+
<div id="${hd}" style="height:50px;right:0;top:${gvc.glitter.share.top_inset || 0}px;"
|
|
38
|
+
class="m-2 position-absolute d-flex align-items-center justify-content-center gap-2">
|
|
39
|
+
${grayButton(
|
|
40
|
+
'列印',
|
|
41
|
+
gvc.event(() => {
|
|
42
|
+
$('#' + hd).addClass('d-none');
|
|
43
|
+
window.print();
|
|
44
|
+
$('#' + hd).removeClass('d-none');
|
|
45
|
+
})
|
|
46
|
+
)}
|
|
47
|
+
${grayButton(
|
|
48
|
+
'關閉',
|
|
49
|
+
gvc.event(() => {
|
|
50
|
+
gvc.closeDialog();
|
|
51
|
+
})
|
|
52
|
+
)}
|
|
53
|
+
</div>
|
|
54
|
+
<div id="${id}" style="max-width: 100%;max-height: 100%;">
|
|
55
|
+
<img style="max-width: 85vw;max-height: 85vh;" src="${gBundle}"/>
|
|
56
|
+
</div>
|
|
57
|
+
</div>`;
|
|
36
58
|
},
|
|
37
59
|
};
|
|
38
60
|
});
|
|
61
|
+
|
|
62
|
+
function grayButton(text: string, event: string, obj?: { icon?: string; textStyle?: string }) {
|
|
63
|
+
const html = String.raw
|
|
64
|
+
return html`
|
|
65
|
+
<button class="btn btn-gray" style="" type="button" onclick="${event}">
|
|
66
|
+
<i class="${obj && obj.icon && obj.icon.length > 0 ? obj.icon : 'd-none'}" style="color: #393939"></i>
|
|
67
|
+
${text.length > 0 ? html`<span class="tx_700" style="${obj?.textStyle ?? ''}">${text}</span>` : ''}
|
|
68
|
+
</button>`;
|
|
69
|
+
}
|
package/lowcode/index.html
CHANGED
|
@@ -449,25 +449,25 @@
|
|
|
449
449
|
if (window.redirct_tohome) {
|
|
450
450
|
location.href = window.redirct_tohome
|
|
451
451
|
}
|
|
452
|
-
// 設置計時器的初始時間（10分鐘 = 600,000毫秒）
|
|
453
|
-
let timeoutTime = 10 * 60 * 1000; // 10 分鐘
|
|
454
|
-
let timeout;
|
|
455
|
-
|
|
456
|
-
function resetTimer() {
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
}
|
|
463
|
-
|
|
464
|
-
// 以下事件可視為用戶有操作
|
|
465
|
-
window.onload = resetTimer;
|
|
466
|
-
document.onmousemove = resetTimer;
|
|
467
|
-
document.onkeydown = resetTimer;
|
|
468
|
-
document.onclick = resetTimer;
|
|
469
|
-
document.ontouchstart = resetTimer;
|
|
470
|
-
document.onkeypress = resetTimer;
|
|
452
|
+
// // 設置計時器的初始時間（10分鐘 = 600,000毫秒）
|
|
453
|
+
// let timeoutTime = 10 * 60 * 1000; // 10 分鐘
|
|
454
|
+
// let timeout;
|
|
455
|
+
//
|
|
456
|
+
// function resetTimer() {
|
|
457
|
+
// // 如果用戶操作，則清除舊的計時器並重新設置
|
|
458
|
+
// clearTimeout(timeout);
|
|
459
|
+
// timeout = setTimeout(() => {
|
|
460
|
+
// location.reload(); // 重新整理網頁
|
|
461
|
+
// }, timeoutTime);
|
|
462
|
+
// }
|
|
463
|
+
//
|
|
464
|
+
// // 以下事件可視為用戶有操作
|
|
465
|
+
// window.onload = resetTimer;
|
|
466
|
+
// document.onmousemove = resetTimer;
|
|
467
|
+
// document.onkeydown = resetTimer;
|
|
468
|
+
// document.onclick = resetTimer;
|
|
469
|
+
// document.ontouchstart = resetTimer;
|
|
470
|
+
// document.onkeypress = resetTimer;
|
|
471
471
|
</script>
|
|
472
472
|
<body>
|
|
473
473
|
<div id="glitterPage" class="flex-fill ">
|