[Frontend] 修改側邊卡片欄異常消失後正常消失
This commit is contained in:
parent
bb3f1c0c8f
commit
bdb439a0ec
@ -1999,7 +1999,7 @@
|
||||
res.data.work_type
|
||||
);
|
||||
$(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(
|
||||
res.data.fix_do
|
||||
|
||||
@ -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="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>
|
||||
</div>
|
||||
<!--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 class="dropdown">
|
||||
<a
|
||||
class="dropdown-toggle fs-1"
|
||||
href="javascript:;"
|
||||
role="button"
|
||||
id="buiActDrop"
|
||||
data-target="buiList"
|
||||
data-toggle="dropdown"
|
||||
aria-haspopup="true"
|
||||
>
|
||||
</a>
|
||||
<div
|
||||
id="buiList"
|
||||
class="dropdown-menu dropdown-select-menu js-auto-close"
|
||||
></div>
|
||||
</div> -->
|
||||
<a
|
||||
class="dropdown-toggle fs-1"
|
||||
href="javascript:;"
|
||||
role="button"
|
||||
id="buiActDrop"
|
||||
data-target="buiList"
|
||||
data-toggle="dropdown"
|
||||
aria-haspopup="true"
|
||||
>
|
||||
</a>
|
||||
<div
|
||||
id="buiList"
|
||||
class="dropdown-menu dropdown-select-menu js-auto-close"
|
||||
></div>
|
||||
</div> -->
|
||||
|
||||
<div class="ml-auto d-flex" id="froLisPage"></div>
|
||||
<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"
|
||||
class="d-flex align-items-center justify-content-center ml-2">
|
||||
<!--<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:-->
|
||||
<div class="row m-0 justify-content-center userblock">
|
||||
<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"
|
||||
class="d-flex align-items-center justify-content-center ml-2">
|
||||
<!--<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:-->
|
||||
<div class="row m-0 justify-content-center userblock">
|
||||
<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 class="ml-2 text-center">
|
||||
<!-- <label class="mb-0 fs-1-2">
|
||||
Diamond Controls<span class="fs-09 position-absolute"
|
||||
>®</span
|
||||
> </label
|
||||
><br /> -->
|
||||
Diamond Controls<span class="fs-09 position-absolute"
|
||||
>®</span
|
||||
> </label
|
||||
><br /> -->
|
||||
<!-- <label class="mb-0 fs-1-1">智慧大樓管理平台</label> -->
|
||||
</div>
|
||||
</header>
|
||||
@ -314,25 +314,25 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
||||
data-class="mobile-nav-on"></div>
|
||||
|
||||
<!-- <div id="sysMonNavbar" class="yt-navbar yt-left-navbar">
|
||||
<div class="yt-navbar-content">
|
||||
<ul id="sysMonBtnList"></ul>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="yt-navbar-content">
|
||||
<ul id="sysMonBtnList"></ul>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- END Page Content -->
|
||||
<!-- BEGIN Page Footer -->
|
||||
<!--<footer class="page-footer" role="contentinfo">
|
||||
<div class="d-flex align-items-center flex-1 text-muted">
|
||||
<span class="hidden-md-down fw-700">2022 © SmartAdmin by <a href='https://www.gotbootstrap.com' class='text-primary fw-500' title='gotbootstrap.com' target='_blank'>gotbootstrap.com</a></span>
|
||||
</div>
|
||||
<div>
|
||||
<ul class="list-table m-0">
|
||||
<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_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>
|
||||
</ul>
|
||||
</div>
|
||||
</footer>-->
|
||||
<div class="d-flex align-items-center flex-1 text-muted">
|
||||
<span class="hidden-md-down fw-700">2022 © SmartAdmin by <a href='https://www.gotbootstrap.com' class='text-primary fw-500' title='gotbootstrap.com' target='_blank'>gotbootstrap.com</a></span>
|
||||
</div>
|
||||
<div>
|
||||
<ul class="list-table m-0">
|
||||
<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_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>
|
||||
</ul>
|
||||
</div>
|
||||
</footer>-->
|
||||
<!-- END Page Footer -->
|
||||
<!-- BEGIN Shortcuts -->
|
||||
<!-- END Shortcuts -->
|
||||
@ -1422,7 +1422,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
||||
function drawErrRecTabBlo() {
|
||||
let strHtml = `<table id="errRecTable" class="table table-bordered table-striped text-center m-0 w-100">
|
||||
|
||||
</table>`;
|
||||
</table>`;
|
||||
return strHtml;
|
||||
}
|
||||
|
||||
@ -1430,7 +1430,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
||||
function drawOpeRecTabBlo() {
|
||||
let strHtml = `<table id="opeRecTable" class="table table-bordered table-striped text-center m-0 w-100">
|
||||
|
||||
</table>`;
|
||||
</table>`;
|
||||
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(
|
||||
devNum
|
||||
)}" 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;">
|
||||
<label class="m-0 mt-2">${devName}</label>
|
||||
</div>
|
||||
<div id="card-tab" class="row justify-content-end nav nav-tabs" role="tablist">
|
||||
<button type="button" id="state-tab"
|
||||
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>
|
||||
${lightHtml}
|
||||
<button type="button" id="info-tab"
|
||||
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>
|
||||
<button type="button"
|
||||
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>
|
||||
<button type="button"
|
||||
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>
|
||||
<div class="position-absolute mr-5" style="word-break: break-all;">
|
||||
<label class="m-0 mt-2">${devName}</label>
|
||||
</div>
|
||||
<div id="card-tab" class="row justify-content-end nav nav-tabs" role="tablist">
|
||||
<button type="button" id="state-tab"
|
||||
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>
|
||||
${lightHtml}
|
||||
<button type="button" id="info-tab"
|
||||
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>
|
||||
<button type="button"
|
||||
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>
|
||||
<button type="button"
|
||||
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>
|
||||
|
||||
<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 class="card-body p-2 tab-content w-100">
|
||||
<div id="state" class="show active w-100" data-tabname="cardTab" data-tabrole="child" >
|
||||
${drawStateTabBlo(
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body p-2 tab-content w-100">
|
||||
<div id="state" class="show active w-100" data-tabname="cardTab" data-tabrole="child" >
|
||||
${drawStateTabBlo(
|
||||
devNum
|
||||
)}
|
||||
</div>
|
||||
<div id="info" data-tabname="cardTab" data-tabrole="child">
|
||||
</div>
|
||||
<div id="info" data-tabname="cardTab" data-tabrole="child">
|
||||
|
||||
</div>
|
||||
<div id="errRec" data-tabname="cardTab" data-tabrole="child">
|
||||
${drawErrRecTabBlo()}
|
||||
</div>
|
||||
<div id="opeRec" data-tabname="cardTab" data-tabrole="child">
|
||||
${drawOpeRecTabBlo()}
|
||||
</div>
|
||||
</div>
|
||||
</div>`,
|
||||
</div>
|
||||
<div id="errRec" data-tabname="cardTab" data-tabrole="child">
|
||||
${drawErrRecTabBlo()}
|
||||
</div>
|
||||
<div id="opeRec" data-tabname="cardTab" data-tabrole="child">
|
||||
${drawOpeRecTabBlo()}
|
||||
</div>
|
||||
</div>
|
||||
</div>`,
|
||||
group: "device",
|
||||
// 在 _sysElevator.html 及 _sysMonAll.html 會用到
|
||||
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
|
||||
) {
|
||||
strHtml += ` <div class="row m-0 align-items-center">
|
||||
<span id="sysNorLight" class="circle-light mr-2 " data-light-type="normal"></span>
|
||||
<label class="mb-0">${sysSubObj.device_normal_text}</label>
|
||||
</div>`;
|
||||
<span id="sysNorLight" class="circle-light mr-2 " data-light-type="normal"></span>
|
||||
<label class="mb-0">${sysSubObj.device_normal_text}</label>
|
||||
</div>`;
|
||||
}
|
||||
if (
|
||||
sysSubObj.device_close_point_name != null &&
|
||||
sysSubObj.device_close_point_value != null
|
||||
) {
|
||||
strHtml += ` <div class="row m-0 align-items-center">
|
||||
<span id="sysCloLight" class="circle-light mr-2" data-light-type="close"></span>
|
||||
<label class="mb-0">${sysSubObj.device_close_text}</label>
|
||||
</div>`;
|
||||
<span id="sysCloLight" class="circle-light mr-2" data-light-type="close"></span>
|
||||
<label class="mb-0">${sysSubObj.device_close_text}</label>
|
||||
</div>`;
|
||||
}
|
||||
if (
|
||||
sysSubObj.device_error_point_name != null &&
|
||||
sysSubObj.device_error_point_value != null
|
||||
) {
|
||||
strHtml += ` <div class="row m-0 align-items-center">
|
||||
<span id="sysErrLight" class="circle-light mr-2" data-light-type="error"></span>
|
||||
<label class="mb-0">${sysSubObj.device_error_text}</label>
|
||||
</div>`;
|
||||
<span id="sysErrLight" class="circle-light mr-2" data-light-type="error"></span>
|
||||
<label class="mb-0">${sysSubObj.device_error_text}</label>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
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) {
|
||||
} else {
|
||||
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">
|
||||
<i class="fal fa-home fa-2x"></i><br>首頁
|
||||
</a>
|
||||
<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" 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>
|
||||
</div>
|
||||
</div>`;
|
||||
<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>首頁
|
||||
</a>
|
||||
<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" 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>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
$.each(res.data, function (i, v) {
|
||||
if (v.authCode == "PF1") {
|
||||
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">
|
||||
<i class="fal fa-tv fa-2x"></i><br>${v.subName}
|
||||
</a>
|
||||
<div style="transform: translateY(5%)">
|
||||
<div class="dropdown-menu dropdown-menu-right sys_building_dropdown_menu" >
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
<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}
|
||||
</a>
|
||||
<div style="transform: translateY(5%)">
|
||||
<div class="dropdown-menu dropdown-menu-right sys_building_dropdown_menu" >
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
hasMonitor = true;
|
||||
} else {
|
||||
@ -2101,11 +2101,11 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
||||
? "fa-user"
|
||||
: "";
|
||||
strHtml += `<div class="btn-group mx-4">
|
||||
<a href="javascript:;" name="topFunBtn" data-tabname="topFunBtn" class="dropdown-toggle no-arrow text-center"
|
||||
data-page="${v.showView}">
|
||||
<i class="fal ${icon} fa-2x"></i><br>${v.subName}
|
||||
</a>
|
||||
</div>`;
|
||||
<a href="javascript:;" name="topFunBtn" data-tabname="topFunBtn" class="dropdown-toggle no-arrow text-center"
|
||||
data-page="${v.showView}">
|
||||
<i class="fal ${icon} fa-2x"></i><br>${v.subName}
|
||||
</a>
|
||||
</div>`;
|
||||
}
|
||||
});
|
||||
|
||||
@ -2356,68 +2356,59 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
||||
let titleHtml = `異常通知`;
|
||||
let notices = [];
|
||||
// 遍歷每個告警資料
|
||||
if (datas.length === 0) {
|
||||
$("#noticeBlock").innerHTML = "";
|
||||
} else {
|
||||
$.each(datas ?? [], (idx, data) => {
|
||||
if (noticeOptArr.findIndex((x) => x.id == data.uuid) == -1) {
|
||||
// 針對該告警對象的設備，從 allDevices 找出設備名稱
|
||||
const building_name = pageAct.buildList.find(
|
||||
({ building_tag }) =>
|
||||
building_tag === data.devicePath.split("_")[1]
|
||||
)?.full_name;
|
||||
$.each(datas ?? [], (idx, data) => {
|
||||
if (noticeOptArr.findIndex((x) => x.id == data.uuid) == -1) {
|
||||
// 針對該告警對象的設備，從 allDevices 找出設備名稱
|
||||
const building_name = pageAct.buildList.find(
|
||||
({ building_tag }) =>
|
||||
building_tag === data.devicePath.split("_")[1]
|
||||
)?.full_name;
|
||||
|
||||
datas[idx].full_name =
|
||||
allDevices.filter(
|
||||
(x) => x.device_number == data.devicePath
|
||||
)[0]?.full_name ||
|
||||
(data.alarmClass === "Sys_Con_AlarmClass"
|
||||
? `${building_name}_電錶邊緣控制器_${data.split("_")[7]}`
|
||||
: "");
|
||||
datas[idx].full_name =
|
||||
allDevices.filter((x) => x.device_number == data.devicePath)[0]
|
||||
?.full_name ||
|
||||
(data.alarmClass === "Sys_Con_AlarmClass"
|
||||
? `${building_name}_電錶邊緣控制器_${data.split("_")[7]}`
|
||||
: "");
|
||||
|
||||
let div1 = creDiv(["col-12"]);
|
||||
let button = creBtn(
|
||||
"確認",
|
||||
"noticeChkBtn",
|
||||
null,
|
||||
["btn btn-sm btn-secondary ml-auto col-4"],
|
||||
{ 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 div1 = creDiv(["col-12"]);
|
||||
let button = creBtn(
|
||||
"確認",
|
||||
"noticeChkBtn",
|
||||
null,
|
||||
["btn btn-sm btn-secondary ml-auto col-4"],
|
||||
{ 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);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$("#noticeBlock").YTNotice("add_many", notices.oSort("id").reverse());
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@ -11,278 +11,287 @@
|
||||
* </script>
|
||||
* */
|
||||
|
||||
|
||||
class YTNotice {
|
||||
constructor(option = {}) {
|
||||
this.id = option.id ?? null;
|
||||
this.title = option.title ?? "";
|
||||
this.content = option.content ?? "";
|
||||
this.type = option.type ?? null;
|
||||
this.hasCloseBtn = option.hasCloseBtn ?? true;
|
||||
this.keepTime = 0;
|
||||
this.timeText = option.timeText ?? "剛剛";
|
||||
this.iconClass = option.iconClass ?? "";
|
||||
this.container = "";
|
||||
this.eIcon = "";
|
||||
this.eTitle = "";
|
||||
this.eTimeAgo = "";
|
||||
this.eCloseBtn = "";
|
||||
this.eContent = "";
|
||||
this.init();
|
||||
constructor(option = {}) {
|
||||
this.id = option.id ?? null;
|
||||
this.title = option.title ?? "";
|
||||
this.content = option.content ?? "";
|
||||
this.type = option.type ?? null;
|
||||
this.hasCloseBtn = option.hasCloseBtn ?? true;
|
||||
this.keepTime = 0;
|
||||
this.timeText = option.timeText ?? "剛剛";
|
||||
this.iconClass = option.iconClass ?? "";
|
||||
this.container = "";
|
||||
this.eIcon = "";
|
||||
this.eTitle = "";
|
||||
this.eTimeAgo = "";
|
||||
this.eCloseBtn = "";
|
||||
this.eContent = "";
|
||||
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.setNoticeId();
|
||||
this.setIconClass();
|
||||
this.setContainer();
|
||||
$(this.container)[0]._ytNotice = this;
|
||||
};
|
||||
|
||||
if (this.title) {
|
||||
this.setTitle(this.title);
|
||||
}
|
||||
if (this.content) {
|
||||
this.setContent(this.content);
|
||||
}
|
||||
if (this.timeText) {
|
||||
this.setTimeAgo(this.timeText);
|
||||
}
|
||||
|
||||
$(this.container)[0]._ytNotice = this;
|
||||
setNoticeId = function () {
|
||||
if (this.id == null) {
|
||||
this.id = YT.Math.Random(10000000, 99999999);
|
||||
}
|
||||
};
|
||||
|
||||
setNoticeId = function () {
|
||||
if (this.id == null) {
|
||||
this.id = YT.Math.Random(10000000, 99999999);
|
||||
}
|
||||
setContainer = function () {
|
||||
this.container =
|
||||
$(`<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">×</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);
|
||||
}
|
||||
|
||||
setContainer = function () {
|
||||
this.container = $(`<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">×</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-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);
|
||||
};
|
||||
|
||||
setIconClass = function () {
|
||||
if (this.type == "success") {
|
||||
this.iconClass = `fas fa-check`;
|
||||
} else if (this.type == "warning") {
|
||||
this.iconClass = `fas fa-exclamation-triangle`;
|
||||
} else if (this.type == "danger") {
|
||||
this.iconClass = `fas fa-times`;
|
||||
}
|
||||
setIconClass = function () {
|
||||
if (this.type == "success") {
|
||||
this.iconClass = `fas fa-check`;
|
||||
} else if (this.type == "warning") {
|
||||
this.iconClass = `fas fa-exclamation-triangle`;
|
||||
} else if (this.type == "danger") {
|
||||
this.iconClass = `fas fa-times`;
|
||||
}
|
||||
};
|
||||
|
||||
setIcon = function (iconClass) {
|
||||
this.eIcon = $(`<i class="mr-2"></i>`);
|
||||
this.eIcon.addClass(iconClass);
|
||||
}
|
||||
setIcon = function (iconClass) {
|
||||
this.eIcon = $(`<i class="mr-2"></i>`);
|
||||
this.eIcon.addClass(iconClass);
|
||||
};
|
||||
|
||||
setTitle = function (title = "") {
|
||||
this.eTitle.html(title);
|
||||
}
|
||||
setTitle = function (title = "") {
|
||||
this.eTitle.html(title);
|
||||
};
|
||||
|
||||
setTimeAgo = function (timeAgo = "") {
|
||||
this.eTimeAgo.text(timeAgo);
|
||||
}
|
||||
|
||||
setContent = function (content = "") {
|
||||
this.eContent.html(content);
|
||||
}
|
||||
setTimeAgo = function (timeAgo = "") {
|
||||
this.eTimeAgo.text(timeAgo);
|
||||
};
|
||||
|
||||
setContent = function (content = "") {
|
||||
this.eContent.html(content);
|
||||
};
|
||||
}
|
||||
|
||||
class YTNoticeBlock {
|
||||
constructor(option = {}) {
|
||||
this.element = option.element;
|
||||
this.offsetBottom = 200;
|
||||
this.noticeArr = [];
|
||||
this.eScroll = $(`<div class="yt-notice-block-scrollbody"></div>`);
|
||||
this.noticeContainer = "";
|
||||
this.scrollY = option.scrollY ?? true;
|
||||
constructor(option = {}) {
|
||||
this.element = option.element;
|
||||
this.offsetBottom = 200;
|
||||
this.noticeArr = [];
|
||||
this.eScroll = $(`<div class="yt-notice-block-scrollbody"></div>`);
|
||||
this.noticeContainer = "";
|
||||
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.drawInitScroll();
|
||||
this.drawElement();
|
||||
this.updEleObj();
|
||||
};
|
||||
|
||||
if (this.scrollY) {
|
||||
this.noticeContainer = this.eScroll;
|
||||
} else {
|
||||
this.noticeContainer = this.element;
|
||||
drawInitScroll = function () {
|
||||
if (this.scrollY) {
|
||||
$(this.eScroll).css("height", "100%");
|
||||
$(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 (this.scrollY) {
|
||||
$(this.eScroll).css("height", "100%");
|
||||
$(this.eScroll).css("overflow-y", "auto");
|
||||
$(this.element).append(this.eScroll);
|
||||
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 () {
|
||||
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 () {
|
||||
$(this.element).addClass("yt-notice-block");
|
||||
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();
|
||||
};
|
||||
|
||||
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");
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
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)
|
||||
})
|
||||
}
|
||||
|
||||
_this.showNotices();
|
||||
}, 100);
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
$.fn.YTNotice = function (method = "init", ...args) {
|
||||
let _this = this;
|
||||
let _this = this;
|
||||
|
||||
if (method == "init") {
|
||||
initNoticeBlock();
|
||||
if (method == "init") {
|
||||
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;
|
||||
if (!noticeBlock) {
|
||||
initNoticeBlock();
|
||||
noticeBlock = _this[0]._noticeBlock;
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
}
|
||||
function initNoticeBlock() {
|
||||
let option = {};
|
||||
option.element = _this;
|
||||
let noticeBlock = new YTNoticeBlock(option);
|
||||
}
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user