This commit is contained in:
dev02 2023-10-17 09:47:18 +08:00
commit 7c86b10f66
3 changed files with 404 additions and 404 deletions

View File

@ -1999,7 +1999,7 @@
res.data.work_type res.data.work_type
); );
$(pageAct.work_type == "1" ? "#inpErrCode" : "#inpErrCode_2").val( $(pageAct.work_type == "1" ? "#inpErrCode" : "#inpErrCode_2").val(
res.data.error_code res.data.error_code?.split("-")[0] || ""
); );
$(pageAct.work_type == "1" ? "#inpFixDo" : "#inpFixDo_2").val( $(pageAct.work_type == "1" ? "#inpFixDo" : "#inpFixDo_2").val(
res.data.fix_do res.data.fix_do

View File

@ -190,7 +190,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
<!--<span class="page-logo-text mr-1">SmartAdmin WebApp</span>--> <!--<span class="page-logo-text mr-1">SmartAdmin WebApp</span>-->
<!--<span class="position-absolute text-white opacity-50 small pos-top pos-right mr-2 mt-n2"></span> <!--<span class="position-absolute text-white opacity-50 small pos-top pos-right mr-2 mt-n2"></span>
<i class="fal fa-angle-down d-inline-block ml-1 fs-lg color-primary-300"></i>--> <i class="fal fa-angle-down d-inline-block ml-1 fs-lg color-primary-300"></i>-->
</a> </a>
</div> </div>
<!--DOC: nav menu layout change shortcut--> <!--DOC: nav menu layout change shortcut-->
@ -234,21 +234,21 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
</div> </div>
<!-- <div class="dropdown"> <!-- <div class="dropdown">
<a <a
class="dropdown-toggle fs-1" class="dropdown-toggle fs-1"
href="javascript:;" href="javascript:;"
role="button" role="button"
id="buiActDrop" id="buiActDrop"
data-target="buiList" data-target="buiList"
data-toggle="dropdown" data-toggle="dropdown"
aria-haspopup="true" aria-haspopup="true"
> >
</a> </a>
<div <div
id="buiList" id="buiList"
class="dropdown-menu dropdown-select-menu js-auto-close" class="dropdown-menu dropdown-select-menu js-auto-close"
></div> ></div>
</div> --> </div> -->
<div class="ml-auto d-flex" id="froLisPage"></div> <div class="ml-auto d-flex" id="froLisPage"></div>
<div class="ml-auto d-flex mr-3"> <div class="ml-auto d-flex mr-3">
@ -257,7 +257,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
id="toggleNoticeBtn" id="toggleNoticeBtn"
class="d-flex align-items-center justify-content-center ml-2"> class="d-flex align-items-center justify-content-center ml-2">
<!--<img src="img/demo/avatars/avatar-admin.png" class="profile-image rounded-circle" <!--<img src="img/demo/avatars/avatar-admin.png" class="profile-image rounded-circle"
alt="Dr. Codex Lantern">--> alt="Dr. Codex Lantern">-->
<!--you can also add username next to the avatar with the codes below:--> <!--you can also add username next to the avatar with the codes below:-->
<div class="row m-0 justify-content-center userblock"> <div class="row m-0 justify-content-center userblock">
<i id="noticeConIcon" class="fs-1-5 w-100 text-center"></i> <i id="noticeConIcon" class="fs-1-5 w-100 text-center"></i>
@ -275,7 +275,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
data-target="logoutList" data-target="logoutList"
class="d-flex align-items-center justify-content-center ml-2"> class="d-flex align-items-center justify-content-center ml-2">
<!--<img src="img/demo/avatars/avatar-admin.png" class="profile-image rounded-circle" <!--<img src="img/demo/avatars/avatar-admin.png" class="profile-image rounded-circle"
alt="Dr. Codex Lantern">--> alt="Dr. Codex Lantern">-->
<!--you can also add username next to the avatar with the codes below:--> <!--you can also add username next to the avatar with the codes below:-->
<div class="row m-0 justify-content-center userblock"> <div class="row m-0 justify-content-center userblock">
<i class="fas fa-user-circle fs-1-5 w-100 text-center"></i> <i class="fas fa-user-circle fs-1-5 w-100 text-center"></i>
@ -295,10 +295,10 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
</div> </div>
<div class="ml-2 text-center"> <div class="ml-2 text-center">
<!-- <label class="mb-0 fs-1-2"> <!-- <label class="mb-0 fs-1-2">
Diamond Controls<span class="fs-09 position-absolute" Diamond Controls<span class="fs-09 position-absolute"
</span </span
> </label > </label
><br /> --> ><br /> -->
<!-- <label class="mb-0 fs-1-1">智慧大樓管理平台</label> --> <!-- <label class="mb-0 fs-1-1">智慧大樓管理平台</label> -->
</div> </div>
</header> </header>
@ -314,25 +314,25 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
data-class="mobile-nav-on"></div> data-class="mobile-nav-on"></div>
<!-- <div id="sysMonNavbar" class="yt-navbar yt-left-navbar"> <!-- <div id="sysMonNavbar" class="yt-navbar yt-left-navbar">
<div class="yt-navbar-content"> <div class="yt-navbar-content">
<ul id="sysMonBtnList"></ul> <ul id="sysMonBtnList"></ul>
</div> </div>
</div> --> </div> -->
<!-- END Page Content --> <!-- END Page Content -->
<!-- BEGIN Page Footer --> <!-- BEGIN Page Footer -->
<!--<footer class="page-footer" role="contentinfo"> <!--<footer class="page-footer" role="contentinfo">
<div class="d-flex align-items-center flex-1 text-muted"> <div class="d-flex align-items-center flex-1 text-muted">
<span class="hidden-md-down fw-700">2022 © SmartAdmin by&nbsp;<a href='https://www.gotbootstrap.com' class='text-primary fw-500' title='gotbootstrap.com' target='_blank'>gotbootstrap.com</a></span> <span class="hidden-md-down fw-700">2022 © SmartAdmin by&nbsp;<a href='https://www.gotbootstrap.com' class='text-primary fw-500' title='gotbootstrap.com' target='_blank'>gotbootstrap.com</a></span>
</div> </div>
<div> <div>
<ul class="list-table m-0"> <ul class="list-table m-0">
<li><a href="intel_introduction.html" class="text-secondary fw-700">About</a></li> <li><a href="intel_introduction.html" class="text-secondary fw-700">About</a></li>
<li class="pl-3"><a href="info_app_licensing.html" class="text-secondary fw-700">License</a></li> <li class="pl-3"><a href="info_app_licensing.html" class="text-secondary fw-700">License</a></li>
<li class="pl-3"><a href="info_app_docs.html" class="text-secondary fw-700">Documentation</a></li> <li class="pl-3"><a href="info_app_docs.html" class="text-secondary fw-700">Documentation</a></li>
<li class="pl-3 fs-xl"><a href="https://wrapbootstrap.com/user/MyOrange" class="text-secondary" target="_blank"><i class="fal fa-question-circle" aria-hidden="true"></i></a></li> <li class="pl-3 fs-xl"><a href="https://wrapbootstrap.com/user/MyOrange" class="text-secondary" target="_blank"><i class="fal fa-question-circle" aria-hidden="true"></i></a></li>
</ul> </ul>
</div> </div>
</footer>--> </footer>-->
<!-- END Page Footer --> <!-- END Page Footer -->
<!-- BEGIN Shortcuts --> <!-- BEGIN Shortcuts -->
<!-- END Shortcuts --> <!-- END Shortcuts -->
@ -1422,7 +1422,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
function drawErrRecTabBlo() { function drawErrRecTabBlo() {
let strHtml = `<table id="errRecTable" class="table table-bordered table-striped text-center m-0 w-100"> let strHtml = `<table id="errRecTable" class="table table-bordered table-striped text-center m-0 w-100">
</table>`; </table>`;
return strHtml; return strHtml;
} }
@ -1430,7 +1430,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
function drawOpeRecTabBlo() { function drawOpeRecTabBlo() {
let strHtml = `<table id="opeRecTable" class="table table-bordered table-striped text-center m-0 w-100"> let strHtml = `<table id="opeRecTable" class="table table-bordered table-striped text-center m-0 w-100">
</table>`; </table>`;
return strHtml; return strHtml;
} }
@ -1457,47 +1457,47 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
html: `<div class="card m-1 border device-wrap" data-number="${deviceNumber( html: `<div class="card m-1 border device-wrap" data-number="${deviceNumber(
devNum devNum
)}" data-position="left"> )}" data-position="left">
<div class="card-header p-3"> <div class="card-header p-3">
<div class="position-absolute mr-5" style="word-break: break-all;"> <div class="position-absolute mr-5" style="word-break: break-all;">
<label class="m-0 mt-2">${devName}</label> <label class="m-0 mt-2">${devName}</label>
</div> </div>
<div id="card-tab" class="row justify-content-end nav nav-tabs" role="tablist"> <div id="card-tab" class="row justify-content-end nav nav-tabs" role="tablist">
<button type="button" id="state-tab" <button type="button" id="state-tab"
data-toggle="tooltip" data-placement="bottom" title="即時監控" data-toggle="tooltip" data-placement="bottom" title="即時監控"
class="px-2 btn btn-icon border-0 nav-link active mx-1" role="tab" data-tabname="cardTab" data-target="#state"><i class="fa fa-desktop icon fa-2x"></i></button> class="px-2 btn btn-icon border-0 nav-link active mx-1" role="tab" data-tabname="cardTab" data-target="#state"><i class="fa fa-desktop icon fa-2x"></i></button>
${lightHtml} ${lightHtml}
<button type="button" id="info-tab" <button type="button" id="info-tab"
data-toggle="tooltip" data-placement="bottom" title="基本資料" data-toggle="tooltip" data-placement="bottom" title="基本資料"
class="px-2 btn btn-icon border-0 nav-link mx-1" role="tab" data-tabname="cardTab" data-target="#info"><i class="fa fa-cog icon fa-2x"></i></button> class="px-2 btn btn-icon border-0 nav-link mx-1" role="tab" data-tabname="cardTab" data-target="#info"><i class="fa fa-cog icon fa-2x"></i></button>
<button type="button" <button type="button"
d data-toggle="tooltip" data-placement="bottom" title="告警資料" d data-toggle="tooltip" data-placement="bottom" title="告警資料"
id="errRec-tab" class=" px-2 btn btn-icon border-0 nav-link mx-1 position-relative " role="tab" data-tabname="cardTab" data-target="#errRec"><i class="fas fa-exclamation-triangle fa-2x"></i></button> id="errRec-tab" class=" px-2 btn btn-icon border-0 nav-link mx-1 position-relative " role="tab" data-tabname="cardTab" data-target="#errRec"><i class="fas fa-exclamation-triangle fa-2x"></i></button>
<button type="button" <button type="button"
data-toggle="tooltip" data-placement="bottom" title="運維紀錄" data-toggle="tooltip" data-placement="bottom" title="運維紀錄"
id="opeRec-tab" class=" px-2 btn btn-icon border-0 nav-link mx-1" role="tab" data-tabname="cardTab" data-target="#opeRec"><i class="fa fa-bars icon fa-2x"></i></button> id="opeRec-tab" class=" px-2 btn btn-icon border-0 nav-link mx-1" role="tab" data-tabname="cardTab" data-target="#opeRec"><i class="fa fa-bars icon fa-2x"></i></button>
<button type="button" class="px-2 btn btn-icon border-0 nav-link mx-1"><i class="fas fa-times text-white-50 fa-2x" data-close="yttooltip"></i></button> <button type="button" class="px-2 btn btn-icon border-0 nav-link mx-1"><i class="fas fa-times text-white-50 fa-2x" data-close="yttooltip"></i></button>
</div> </div>
</div> </div>
<div class="card-body p-2 tab-content w-100"> <div class="card-body p-2 tab-content w-100">
<div id="state" class="show active w-100" data-tabname="cardTab" data-tabrole="child" > <div id="state" class="show active w-100" data-tabname="cardTab" data-tabrole="child" >
${drawStateTabBlo( ${drawStateTabBlo(
devNum devNum
)} )}
</div> </div>
<div id="info" data-tabname="cardTab" data-tabrole="child"> <div id="info" data-tabname="cardTab" data-tabrole="child">
</div> </div>
<div id="errRec" data-tabname="cardTab" data-tabrole="child"> <div id="errRec" data-tabname="cardTab" data-tabrole="child">
${drawErrRecTabBlo()} ${drawErrRecTabBlo()}
</div> </div>
<div id="opeRec" data-tabname="cardTab" data-tabrole="child"> <div id="opeRec" data-tabname="cardTab" data-tabrole="child">
${drawOpeRecTabBlo()} ${drawOpeRecTabBlo()}
</div> </div>
</div> </div>
</div>`, </div>`,
group: "device", group: "device",
// 在 _sysElevator.html 及 _sysMonAll.html 會用到 // 在 _sysElevator.html 及 _sysMonAll.html 會用到
onShow: function (tooltipEle, oriEle) { onShow: function (tooltipEle, oriEle) {
@ -1874,27 +1874,27 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
sysSubObj.device_normal_point_value != null sysSubObj.device_normal_point_value != null
) { ) {
strHtml += ` <div class="row m-0 align-items-center"> strHtml += ` <div class="row m-0 align-items-center">
<span id="sysNorLight" class="circle-light mr-2 " data-light-type="normal"></span> <span id="sysNorLight" class="circle-light mr-2 " data-light-type="normal"></span>
<label class="mb-0">${sysSubObj.device_normal_text}</label> <label class="mb-0">${sysSubObj.device_normal_text}</label>
</div>`; </div>`;
} }
if ( if (
sysSubObj.device_close_point_name != null && sysSubObj.device_close_point_name != null &&
sysSubObj.device_close_point_value != null sysSubObj.device_close_point_value != null
) { ) {
strHtml += ` <div class="row m-0 align-items-center"> strHtml += ` <div class="row m-0 align-items-center">
<span id="sysCloLight" class="circle-light mr-2" data-light-type="close"></span> <span id="sysCloLight" class="circle-light mr-2" data-light-type="close"></span>
<label class="mb-0">${sysSubObj.device_close_text}</label> <label class="mb-0">${sysSubObj.device_close_text}</label>
</div>`; </div>`;
} }
if ( if (
sysSubObj.device_error_point_name != null && sysSubObj.device_error_point_name != null &&
sysSubObj.device_error_point_value != null sysSubObj.device_error_point_value != null
) { ) {
strHtml += ` <div class="row m-0 align-items-center"> strHtml += ` <div class="row m-0 align-items-center">
<span id="sysErrLight" class="circle-light mr-2" data-light-type="error"></span> <span id="sysErrLight" class="circle-light mr-2" data-light-type="error"></span>
<label class="mb-0">${sysSubObj.device_error_text}</label> <label class="mb-0">${sysSubObj.device_error_text}</label>
</div>`; </div>`;
} }
return strHtml; return strHtml;
@ -2059,28 +2059,28 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
if (!res || res.code != "0000" || !res.data) { if (!res || res.code != "0000" || !res.data) {
} else { } else {
let strHtml = `<div class="btn-group mx-4"> let strHtml = `<div class="btn-group mx-4">
<a href="javascript:;" id="homeBtn" data-toggle="dropdown" data-page="dashboard" data-tabname="topFunBtn" class="text-center"> <a href="javascript:;" id="homeBtn" data-toggle="dropdown" data-page="dashboard" data-tabname="topFunBtn" class="text-center">
<i class="fal fa-home fa-2x"></i><br>首頁 <i class="fal fa-home fa-2x"></i><br>首頁
</a> </a>
<div class="dropdown-menu"> <div class="dropdown-menu">
<button class="dropdown-item d-none" name="topFunBtn" data-tabname="topFunBtn" data-page="dashboard" type="button" >儀錶板</button> <button class="dropdown-item d-none" name="topFunBtn" data-tabname="topFunBtn" data-page="dashboard" type="button" >儀錶板</button>
<button class="dropdown-item" name="topFunBtn" data-tabname="topFunBtn" data-page="schoolView" type="button">校園總覽</button> <button class="dropdown-item" name="topFunBtn" data-tabname="topFunBtn" data-page="schoolView" type="button">校園總覽</button>
<button class="dropdown-item" name="topFunBtn" data-tabname="topFunBtn" data-page="elecSingleLine" type="button">電表單線圖</button> <button class="dropdown-item" name="topFunBtn" data-tabname="topFunBtn" data-page="elecSingleLine" type="button">電表單線圖</button>
</div> </div>
</div>`; </div>`;
$.each(res.data, function (i, v) { $.each(res.data, function (i, v) {
if (v.authCode == "PF1") { if (v.authCode == "PF1") {
strHtml += `<div class="btn-group mx-4" > strHtml += `<div class="btn-group mx-4" >
<a href="javascript:;" id="sysMonTopBtn" class="text-center dropdown-toggle" data-toggle="dropdown" data-tabname="topFunBtn" class="text-center"> <a href="javascript:;" id="sysMonTopBtn" class="text-center dropdown-toggle" data-toggle="dropdown" data-tabname="topFunBtn" class="text-center">
<i class="fal fa-tv fa-2x"></i><br>${v.subName} <i class="fal fa-tv fa-2x"></i><br>${v.subName}
</a> </a>
<div style="transform: translateY(5%)"> <div style="transform: translateY(5%)">
<div class="dropdown-menu dropdown-menu-right sys_building_dropdown_menu" > <div class="dropdown-menu dropdown-menu-right sys_building_dropdown_menu" >
</div> </div>
</div> </div>
</div> </div>
`; `;
hasMonitor = true; hasMonitor = true;
} else { } else {
@ -2101,11 +2101,11 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
? "fa-user" ? "fa-user"
: ""; : "";
strHtml += `<div class="btn-group mx-4"> strHtml += `<div class="btn-group mx-4">
<a href="javascript:;" name="topFunBtn" data-tabname="topFunBtn" class="dropdown-toggle no-arrow text-center" <a href="javascript:;" name="topFunBtn" data-tabname="topFunBtn" class="dropdown-toggle no-arrow text-center"
data-page="${v.showView}"> data-page="${v.showView}">
<i class="fal ${icon} fa-2x"></i><br>${v.subName} <i class="fal ${icon} fa-2x"></i><br>${v.subName}
</a> </a>
</div>`; </div>`;
} }
}); });
@ -2356,68 +2356,59 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
let titleHtml = `異常通知`; let titleHtml = `異常通知`;
let notices = []; let notices = [];
// 遍歷每個告警資料 // 遍歷每個告警資料
if (datas.length === 0) { $.each(datas ?? [], (idx, data) => {
$("#noticeBlock").innerHTML = ""; if (noticeOptArr.findIndex((x) => x.id == data.uuid) == -1) {
} else { // 針對該告警對象的設備,從 allDevices 找出設備名稱
$.each(datas ?? [], (idx, data) => { const building_name = pageAct.buildList.find(
if (noticeOptArr.findIndex((x) => x.id == data.uuid) == -1) { ({ building_tag }) =>
// 針對該告警對象的設備,從 allDevices 找出設備名稱 building_tag === data.devicePath.split("_")[1]
const building_name = pageAct.buildList.find( )?.full_name;
({ building_tag }) =>
building_tag === data.devicePath.split("_")[1]
)?.full_name;
datas[idx].full_name = datas[idx].full_name =
allDevices.filter( allDevices.filter((x) => x.device_number == data.devicePath)[0]
(x) => x.device_number == data.devicePath ?.full_name ||
)[0]?.full_name || (data.alarmClass === "Sys_Con_AlarmClass"
(data.alarmClass === "Sys_Con_AlarmClass" ? `${building_name}_電錶邊緣控制器_${data.split("_")[7]}`
? `${building_name}_電錶邊緣控制器_${data.split("_")[7]}` : "");
: "");
let div1 = creDiv(["col-12"]); let div1 = creDiv(["col-12"]);
let button = creBtn( let button = creBtn(
"確認", "確認",
"noticeChkBtn", "noticeChkBtn",
null, null,
["btn btn-sm btn-secondary ml-auto col-4"], ["btn btn-sm btn-secondary ml-auto col-4"],
{ uuid: data.uuid } { uuid: data.uuid }
);
let btnDiv = creDiv(["d-flex m-0 gap-5 mt-2"]);
btnDiv.append(button);
// 繪製 每行告警資訊
noticeObj.forEach((notice) => {
let div2 = creDiv(["row", "m-0"]);
let span1 = creSpan(notice.title + "", ["m-0"]);
if (notice.data === "uuid") {
data[notice.data] = data[notice.data].split("-")[0];
}
span1.append(creSpan(data[notice.data]));
div2.append(span1);
div1.append(div2);
});
div1.append(btnDiv);
// 拚湊 YTNotice 通知套件所需參數
let main = {
title: titleHtml,
content: div1.outerHtml(),
type: "warning",
id: data.uuid,
hasCloseBtn: true,
timeText: displayDate(data.timestamp),
};
noticeOptArr.push(main);
notices.push(main);
}
});
if (notices.length != 0) {
$("#noticeBlock").YTNotice(
"add_many",
notices.oSort("id").reverse()
); );
let btnDiv = creDiv(["d-flex m-0 gap-5 mt-2"]);
btnDiv.append(button);
// 繪製 每行告警資訊
noticeObj.forEach((notice) => {
let div2 = creDiv(["row", "m-0"]);
let span1 = creSpan(notice.title + "", ["m-0"]);
if (notice.data === "uuid") {
data[notice.data] = data[notice.data].split("-")[0];
}
span1.append(creSpan(data[notice.data]));
div2.append(span1);
div1.append(div2);
});
div1.append(btnDiv);
// 拚湊 YTNotice 通知套件所需參數
let main = {
title: titleHtml,
content: div1.outerHtml(),
type: "warning",
id: data.uuid,
hasCloseBtn: true,
timeText: displayDate(data.timestamp),
};
noticeOptArr.push(main);
notices.push(main);
} }
} });
$("#noticeBlock").YTNotice("add_many", notices.oSort("id").reverse());
}); });
} }

View File

@ -11,278 +11,287 @@
* </script> * </script>
* */ * */
class YTNotice { class YTNotice {
constructor(option = {}) { constructor(option = {}) {
this.id = option.id ?? null; this.id = option.id ?? null;
this.title = option.title ?? ""; this.title = option.title ?? "";
this.content = option.content ?? ""; this.content = option.content ?? "";
this.type = option.type ?? null; this.type = option.type ?? null;
this.hasCloseBtn = option.hasCloseBtn ?? true; this.hasCloseBtn = option.hasCloseBtn ?? true;
this.keepTime = 0; this.keepTime = 0;
this.timeText = option.timeText ?? "剛剛"; this.timeText = option.timeText ?? "剛剛";
this.iconClass = option.iconClass ?? ""; this.iconClass = option.iconClass ?? "";
this.container = ""; this.container = "";
this.eIcon = ""; this.eIcon = "";
this.eTitle = ""; this.eTitle = "";
this.eTimeAgo = ""; this.eTimeAgo = "";
this.eCloseBtn = ""; this.eCloseBtn = "";
this.eContent = ""; this.eContent = "";
this.init(); this.init();
}
init = function () {
this.setNoticeId();
this.setIconClass();
this.setContainer();
if (this.title) {
this.setTitle(this.title);
}
if (this.content) {
this.setContent(this.content);
}
if (this.timeText) {
this.setTimeAgo(this.timeText);
} }
init = function () { $(this.container)[0]._ytNotice = this;
this.setNoticeId(); };
this.setIconClass();
this.setContainer();
if (this.title) { setNoticeId = function () {
this.setTitle(this.title); if (this.id == null) {
} this.id = YT.Math.Random(10000000, 99999999);
if (this.content) {
this.setContent(this.content);
}
if (this.timeText) {
this.setTimeAgo(this.timeText);
}
$(this.container)[0]._ytNotice = this;
} }
};
setNoticeId = function () { setContainer = function () {
if (this.id == null) { this.container =
this.id = YT.Math.Random(10000000, 99999999); $(`<div class="toast fade" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false">
} <div class="toast-header">
</div>
<div class="toast-body">
</div>
</div>`);
this.setIcon(this.iconClass);
this.eTitle = $(`<strong class="mr-auto notice-title"></strong>`);
this.eTimeAgo = $(`<small class="text-muted notice-ago ml-4"></small>`);
this.eCloseBtn = $(
`<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"><span aria-hidden="true">&times;</span></button>`
);
this.eContent = $(`<div class="notice-content"></div>`);
if (this.type != null) {
this.container.find(".toast-header").append(this.eIcon);
this.eIcon.addClass("text-" + this.type);
} }
this.container.find(".toast-header").append(this.eTitle);
setContainer = function () { this.container.find(".toast-header").append(this.eTimeAgo);
this.container = $(`<div class="toast fade" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false"> if (this.hasCloseBtn) {
<div class="toast-header"> this.container.find(".toast-header").append(this.eCloseBtn);
</div>
<div class="toast-body">
</div>
</div>`);
this.setIcon(this.iconClass);
this.eTitle = $(`<strong class="mr-auto notice-title"></strong>`);
this.eTimeAgo = $(`<small class="text-muted notice-ago ml-4"></small>`);
this.eCloseBtn = $(`<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"><span aria-hidden="true">&times;</span></button>`);
this.eContent = $(`<div class="notice-content"></div>`);
if (this.type != null) {
this.container.find(".toast-header").append(this.eIcon);
this.eIcon.addClass("text-" + this.type);
}
this.container.find(".toast-header").append(this.eTitle);
this.container.find(".toast-header").append(this.eTimeAgo);
if (this.hasCloseBtn) {
this.container.find(".toast-header").append(this.eCloseBtn);
}
this.container.find(".toast-body").append(this.eContent);
} }
this.container.find(".toast-body").append(this.eContent);
};
setIconClass = function () { setIconClass = function () {
if (this.type == "success") { if (this.type == "success") {
this.iconClass = `fas fa-check`; this.iconClass = `fas fa-check`;
} else if (this.type == "warning") { } else if (this.type == "warning") {
this.iconClass = `fas fa-exclamation-triangle`; this.iconClass = `fas fa-exclamation-triangle`;
} else if (this.type == "danger") { } else if (this.type == "danger") {
this.iconClass = `fas fa-times`; this.iconClass = `fas fa-times`;
}
} }
};
setIcon = function (iconClass) { setIcon = function (iconClass) {
this.eIcon = $(`<i class="mr-2"></i>`); this.eIcon = $(`<i class="mr-2"></i>`);
this.eIcon.addClass(iconClass); this.eIcon.addClass(iconClass);
} };
setTitle = function (title = "") { setTitle = function (title = "") {
this.eTitle.html(title); this.eTitle.html(title);
} };
setTimeAgo = function (timeAgo = "") { setTimeAgo = function (timeAgo = "") {
this.eTimeAgo.text(timeAgo); this.eTimeAgo.text(timeAgo);
} };
setContent = function (content = "") {
this.eContent.html(content);
}
setContent = function (content = "") {
this.eContent.html(content);
};
} }
class YTNoticeBlock { class YTNoticeBlock {
constructor(option = {}) { constructor(option = {}) {
this.element = option.element; this.element = option.element;
this.offsetBottom = 200; this.offsetBottom = 200;
this.noticeArr = []; this.noticeArr = [];
this.eScroll = $(`<div class="yt-notice-block-scrollbody"></div>`); this.eScroll = $(`<div class="yt-notice-block-scrollbody"></div>`);
this.noticeContainer = ""; this.noticeContainer = "";
this.scrollY = option.scrollY ?? true; this.scrollY = option.scrollY ?? true;
this.init(); this.init();
}
init = function () {
this.drawInitScroll();
this.drawElement();
if (this.scrollY) {
this.noticeContainer = this.eScroll;
} else {
this.noticeContainer = this.element;
} }
init = function () { this.updEleObj();
this.drawInitScroll(); };
this.drawElement();
if (this.scrollY) { drawInitScroll = function () {
this.noticeContainer = this.eScroll; if (this.scrollY) {
} else { $(this.eScroll).css("height", "100%");
this.noticeContainer = this.element; $(this.eScroll).css("overflow-y", "auto");
$(this.element).append(this.eScroll);
}
};
drawElement = function () {
$(this.element).addClass("yt-notice-block");
};
showOneNotice = function (obj = null, append = "prepend") {
if (obj) {
if (append == "prepend") {
$(this.noticeContainer).prepend(obj.container);
} else if (append == "append") {
$(this.noticeContainer).append(obj.container);
}
$(obj.container).toast("show");
}
};
hideOneNotice = function (obj = null) {
if (obj) {
let toast = "";
if (obj.is("div.toast")) {
toast = obj;
} else {
toast = obj.container;
}
$(toast).toast("dispose");
setTimeout(() => {
$(toast).remove();
let tarNoticeId = $(toast)[0]._ytNotice.id;
let tarNoticeIdx = this.noticeArr.findIndex(
(x) => x.obj.id == tarNoticeId
);
if (tarNoticeIdx != -1) {
this.noticeArr[tarNoticeIdx].canShow = false;
} }
this.updEleObj(); this.showNotices();
}, 100);
}
this.updEleObj();
};
checkCanShow = function (notice = null) {
let lastNoticeOffset = $(this.noticeContainer)
.find(".toast")
.last()
.offset();
if ($(this.noticeContainer).find(".toast").last().length == 0) {
return notice.canShow;
} }
drawInitScroll = function () { if ($(notice.obj.container).is(":visible")) {
if (this.scrollY) { return false;
$(this.eScroll).css("height", "100%"); }
$(this.eScroll).css("overflow-y", "auto");
$(this.element).append(this.eScroll); if (!notice.canShow) {
return false;
}
if (lastNoticeOffset.top + this.offsetBottom > $(window).height()) {
return false;
} else {
return true;
}
};
showNotices = function () {
if (this.noticeArr.length === 0) {
$(this.noticeContainer).empty();
} else {
$.each(this.noticeArr, (idx, notice) => {
if (this.checkCanShow(notice)) {
this.showOneNotice(notice.obj, "append");
} }
});
} }
};
drawElement = function () { pushNotice = function (option = {}) {
$(this.element).addClass("yt-notice-block"); if (this.noticeArr.findIndex((x) => x.obj.id == option.id) == -1) {
let notice = new YTNotice(option);
this.noticeArr.push({
obj: notice,
time: new Date().getTime(),
canShow: true,
});
this.setEvent(notice);
} }
this.updEleObj();
};
showOneNotice = function (obj = null,append = "prepend") { updEleObj = function () {
if (obj) { $(this.element)[0]._noticeBlock = this;
if (append == "prepend") { };
$(this.noticeContainer).prepend(obj.container);
} else if (append == "append") { setEvent = function (notice) {
$(this.noticeContainer).append(obj.container); let _this = this;
} $(notice.container).on("hidden.bs.toast", function () {
$(obj.container).toast("show"); setTimeout(() => {
$(notice.container).remove();
let tarNoticeId = $(notice.container)[0]._ytNotice.id;
let tarNoticeIdx = _this.noticeArr.findIndex(
(x) => x.obj.id == tarNoticeId
);
if (tarNoticeIdx != -1) {
_this.noticeArr[tarNoticeIdx].canShow = false;
} }
} _this.showNotices();
}, 100);
hideOneNotice = function (obj = null) { });
if (obj) { };
let toast = "";
if (obj.is("div.toast")) {
toast = obj;
} else {
toast = obj.container;
}
$(toast).toast('dispose');
setTimeout(() => {
$(toast).remove();
let tarNoticeId = $(toast)[0]._ytNotice.id
let tarNoticeIdx = this.noticeArr.findIndex(x => x.obj.id == tarNoticeId);
if (tarNoticeIdx != -1) {
this.noticeArr[tarNoticeIdx].canShow = false;
}
this.showNotices();
}, 100)
}
this.updEleObj();
}
checkCanShow = function (notice = null) {
let lastNoticeOffset = $(this.noticeContainer).find(".toast").last().offset();
if ($(this.noticeContainer).find(".toast").last().length == 0) {
return notice.canShow;
}
if ($(notice.obj.container).is(":visible")) {
return false;
}
if (!notice.canShow) {
return false;
}
if (lastNoticeOffset.top + this.offsetBottom > $(window).height()) {
return false;
} else {
return true;
}
}
showNotices = function () {
$.each(this.noticeArr, (idx, notice) => {
if (this.checkCanShow(notice)) {
this.showOneNotice(notice.obj,"append");
}
})
}
pushNotice = function (option = {}) {
if (this.noticeArr.findIndex(x => x.obj.id == option.id) == -1) {
let notice = new YTNotice(option);
this.noticeArr.push({ obj: notice, time: (new Date()).getTime(), canShow: true });
this.setEvent(notice);
}
this.updEleObj();
}
updEleObj = function () {
$(this.element)[0]._noticeBlock = this;
}
setEvent = function (notice) {
let _this = this;
$(notice.container).on("hidden.bs.toast", function () {
setTimeout(() => {
$(notice.container).remove();
let tarNoticeId = $(notice.container)[0]._ytNotice.id
let tarNoticeIdx = _this.noticeArr.findIndex(x => x.obj.id == tarNoticeId);
if (tarNoticeIdx != -1) {
_this.noticeArr[tarNoticeIdx].canShow = false;
}
_this.showNotices();
}, 100)
})
}
} }
$.fn.YTNotice = function (method = "init", ...args) { $.fn.YTNotice = function (method = "init", ...args) {
let _this = this; let _this = this;
if (method == "init") { if (method == "init") {
initNoticeBlock(); initNoticeBlock();
}
let noticeBlock = _this[0]._noticeBlock;
if (!noticeBlock) {
initNoticeBlock();
noticeBlock = _this[0]._noticeBlock;
}
if (method == "add") {
noticeBlock.pushNotice(args[0] ?? {});
noticeBlock.showNotices();
} else if (method == "add_many") {
noticeBlock.noticeArr = [];
args[0].forEach((arg, idx) => {
noticeBlock.pushNotice(arg);
});
noticeBlock.showNotices();
} else if (method == "hide") {
if (args.length == 0) {
noticeBlock = $(_this).parents(".yt-notice-block")[0]._noticeBlock;
noticeBlock.hideOneNotice(this);
} }
}
let noticeBlock = _this[0]._noticeBlock; function initNoticeBlock() {
if (!noticeBlock) { let option = {};
initNoticeBlock(); option.element = _this;
noticeBlock = _this[0]._noticeBlock; let noticeBlock = new YTNoticeBlock(option);
} }
};
if (method == "add") {
noticeBlock.pushNotice(args[0] ?? {});
noticeBlock.showNotices();
} else if (method == "add_many") {
args[0].forEach((arg, idx) => {
noticeBlock.pushNotice(arg);
})
noticeBlock.showNotices();
} else if (method == "hide") {
if (args.length == 0) {
noticeBlock = $(_this).parents(".yt-notice-block")[0]._noticeBlock;
noticeBlock.hideOneNotice(this);
}
}
function initNoticeBlock() {
let option = {};
option.element = _this;
let noticeBlock = new YTNoticeBlock(option);
}
}