[Frontend][全域功能] notice 訊息警告程序調整 | 串接後台 API
This commit is contained in:
parent
6ddf67e726
commit
0299a079fd
@ -396,7 +396,7 @@
|
|||||||
let curDay = (new Date()).getDay() == 0 ? 7 : (new Date()).getDay();
|
let curDay = (new Date()).getDay() == 0 ? 7 : (new Date()).getDay();
|
||||||
let curWeekData = data.data.filter(x => strToDate(displayDate(new Date(), "date"), null, 1 - 7) <= strToDate(x.timestamp.$cEncStr));
|
let curWeekData = data.data.filter(x => strToDate(displayDate(new Date(), "date"), null, 1 - 7) <= strToDate(x.timestamp.$cEncStr));
|
||||||
let prevWeekData = data.data.filter(x => strToDate(displayDate(new Date(), "date"), null, 1 - 14) <= strToDate(x.timestamp.$cEncStr) && strToDate(new Date(), null, 1 - 7) >= strToDate(x.timestamp.$cEncStr));
|
let prevWeekData = data.data.filter(x => strToDate(displayDate(new Date(), "date"), null, 1 - 14) <= strToDate(x.timestamp.$cEncStr) && strToDate(new Date(), null, 1 - 7) >= strToDate(x.timestamp.$cEncStr));
|
||||||
debugger
|
|
||||||
chartEveWeeksElec(curWeekData, prevWeekData)
|
chartEveWeeksElec(curWeekData, prevWeekData)
|
||||||
chkBajaLoaded();
|
chkBajaLoaded();
|
||||||
})
|
})
|
||||||
|
|||||||
@ -44,6 +44,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
|||||||
<link rel="stylesheet" media="screen, print" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css">
|
<link rel="stylesheet" media="screen, print" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css">
|
||||||
<link rel="stylesheet" href="css/site.css" />
|
<link rel="stylesheet" href="css/site.css" />
|
||||||
<link rel="stylesheet" href="css/yourteam/plugins/yt-tooltip/yt-tooltip.css" />
|
<link rel="stylesheet" href="css/yourteam/plugins/yt-tooltip/yt-tooltip.css" />
|
||||||
|
<link rel="stylesheet" href="css/yourteam/plugins/yt-notice/yt-notice.css" />
|
||||||
<link rel="stylesheet" href="css/yourteam/plugins/yt-alert/ytpop-alert.css" />
|
<link rel="stylesheet" href="css/yourteam/plugins/yt-alert/ytpop-alert.css" />
|
||||||
<link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css" type="text/css">
|
<link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css" type="text/css">
|
||||||
</head>
|
</head>
|
||||||
@ -667,7 +668,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="noticeBlock" style="position: fixed; top: 70px; right: 0px; padding: 20px; transition: 0.2s; z-index: 50000; ">
|
<div id="noticeBlock" style="position: fixed; top: 70px; right: 0px; padding: 20px; transition: 0.2s; z-index: 50000; height:100%; ">
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -802,6 +803,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
|||||||
"yourteam/plugins/yt-tooltip/yt-tooltip",
|
"yourteam/plugins/yt-tooltip/yt-tooltip",
|
||||||
"yourteam/plugins/yt-tab/yt-tab",
|
"yourteam/plugins/yt-tab/yt-tab",
|
||||||
"yourteam/plugins/yt-navbar/yt-navbar",
|
"yourteam/plugins/yt-navbar/yt-navbar",
|
||||||
|
"yourteam/plugins/yt-notice/yt-notice",
|
||||||
"style",
|
"style",
|
||||||
|
|
||||||
], function () {
|
], function () {
|
||||||
@ -990,7 +992,11 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
|||||||
onEvent("click", "#testsysbtn", function () {
|
onEvent("click", "#testsysbtn", function () {
|
||||||
|
|
||||||
})
|
})
|
||||||
let fronIdx = 1;
|
|
||||||
|
onEvent("click", "button[id^=noticeChkBtn]", function () {
|
||||||
|
$(this).parents(".toast").YTNotice("hide");
|
||||||
|
})
|
||||||
|
|
||||||
$(window).on("timeout:3s", function () {
|
$(window).on("timeout:3s", function () {
|
||||||
|
|
||||||
getSystemAlarmByBaja((data) => {
|
getSystemAlarmByBaja((data) => {
|
||||||
@ -1000,28 +1006,9 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
|||||||
alarmIconBlink();
|
alarmIconBlink();
|
||||||
|
|
||||||
})
|
})
|
||||||
let content = `<div class="col-12">
|
|
||||||
<div class="row m-0">
|
|
||||||
<span class="m-0">異常編號：<span>001</span></span>
|
|
||||||
</div>
|
|
||||||
<div class="row m-0">
|
|
||||||
<span class="m-0">異常等級：<span>2</span></span>
|
|
||||||
</div>
|
|
||||||
<div class="row m-0">
|
|
||||||
<span class="m-0">異常類別：<span>S01</span></span>
|
|
||||||
</div>
|
|
||||||
<div class="row m-0">
|
|
||||||
<span class="m-0">設備名稱：<span>電表01</span></span>
|
|
||||||
</div>
|
|
||||||
<div class="row m-0">
|
|
||||||
<span class="m-0">異常訊息：<span>壞掉</span></span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>`
|
getAlarmFromDB();
|
||||||
let titleHtml = `異常通知`
|
|
||||||
|
|
||||||
$("#noticeBlock").YTNotice("add", titleHtml + fronIdx, content,"warning");
|
|
||||||
fronIdx++;
|
|
||||||
})
|
})
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -1104,7 +1091,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;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1112,7 +1099,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;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1129,35 +1116,35 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
|||||||
let lightHtml = type == "light" ? `<button type="button" id="lightSch-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#lightSch"><i class="fas fa-calendar-alt"></i></button>` : "";
|
let lightHtml = type == "light" ? `<button type="button" id="lightSch-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#lightSch"><i class="fas fa-calendar-alt"></i></button>` : "";
|
||||||
let option = {
|
let option = {
|
||||||
html: `<div class="card m-1 border device-wrap">
|
html: `<div class="card m-1 border device-wrap">
|
||||||
<div class="card-header p-3">
|
<div class="card-header p-3">
|
||||||
|
|
||||||
<div class="position-absolute w-50" style="word-break: break-all;">
|
<div class="position-absolute w-50" style="word-break: break-all;">
|
||||||
<label class="m-0 mt-2">${devName}</label>
|
<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" class="btn btn-icon nav-link active" role="tab" data-tabname="cardTab" data-target="#state"><i class="fa fa-desktop icon"></i></button>
|
||||||
|
${lightHtml}
|
||||||
|
<button type="button" id="info-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#info"><i class="fa fa-cog icon"></i></button>
|
||||||
|
<button type="button" id="errRec-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#errRec"><i class="fas fa-exclamation-triangle"></i></button>
|
||||||
|
<button type="button" id="opeRec-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#opeRec"><i class="fa fa-bars icon"></i></button>
|
||||||
|
<button class="btn p-2"><i class="fas fa-times fs-1 text-white-50" data-close="yttooltip"></i></button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="card-tab" class="row justify-content-end nav nav-tabs" role="tablist">
|
<div class="card-body p-2 tab-content">
|
||||||
<button type="button" id="state-tab" class="btn btn-icon nav-link active" role="tab" data-tabname="cardTab" data-target="#state"><i class="fa fa-desktop icon"></i></button>
|
<div id="state" class="show active" data-tabname="cardTab" data-tabrole="child" style="height:100%;width:100%">
|
||||||
${lightHtml}
|
${drawStateTabBlo(devNum)}
|
||||||
<button type="button" id="info-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#info"><i class="fa fa-cog icon"></i></button>
|
</div>
|
||||||
<button type="button" id="errRec-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#errRec"><i class="fas fa-exclamation-triangle"></i></button>
|
<div id="info" data-tabname="cardTab" data-tabrole="child">
|
||||||
<button type="button" id="opeRec-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#opeRec"><i class="fa fa-bars icon"></i></button>
|
|
||||||
<button class="btn p-2"><i class="fas fa-times fs-1 text-white-50" data-close="yttooltip"></i></button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="card-body p-2 tab-content">
|
|
||||||
<div id="state" class="show active" data-tabname="cardTab" data-tabrole="child" style="height:100%;width:100%">
|
|
||||||
${drawStateTabBlo(devNum)}
|
|
||||||
</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 id="errRec" data-tabname="cardTab" data-tabrole="child">
|
</div>`,
|
||||||
${drawErrRecTabBlo()}
|
|
||||||
</div>
|
|
||||||
<div id="opeRec" data-tabname="cardTab" data-tabrole="child">
|
|
||||||
${drawOpeRecTabBlo()}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>`,
|
|
||||||
group: "device",
|
group: "device",
|
||||||
onShow: function (tooltipEle, oriEle) {
|
onShow: function (tooltipEle, oriEle) {
|
||||||
// 執行 pop 視窗上方 Tab 類別
|
// 執行 pop 視窗上方 Tab 類別
|
||||||
@ -1535,35 +1522,35 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
|||||||
|
|
||||||
} else {
|
} else {
|
||||||
let strHtml = `<div class="btn-group mx-4">
|
let strHtml = `<div class="btn-group mx-4">
|
||||||
<a href="javascript:;" name="topFunBtn" data-page="dashboard" data-tabname="topFunBtn" class="text-center">
|
<a href="javascript:;" name="topFunBtn" 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" type="button">Action</button>
|
<button class="dropdown-item" type="button">Action</button>
|
||||||
<button class="dropdown-item" type="button">Another action</button>
|
<button class="dropdown-item" type="button">Another action</button>
|
||||||
<button class="dropdown-item" type="button">Something else here</button>
|
<button class="dropdown-item" type="button">Something else here</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" data-toggle="navbar" data-target="#sysMonNavbar" data-tabname="topFunBtn" aria-haspopup="true" aria-expanded="false">
|
<a href="javascript:;" id="sysMonTopBtn" class="text-center" data-toggle="navbar" data-target="#sysMonNavbar" data-tabname="topFunBtn" aria-haspopup="true" aria-expanded="false">
|
||||||
<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>`;
|
</div>`;
|
||||||
|
|
||||||
hasMonitor = true;
|
hasMonitor = true;
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
let icon = v.authCode == 'PF2' ? 'fa-chart-pie' : v.authCode == 'PF3' ? 'fa-chart-area' : v.authCode == 'PF4' ? 'fa-chart-line' : v.authCode == 'PF5' ? 'fa-bell' : v.authCode == 'PF6' ? 'fa-server' : v.authCode == 'PF7' ? 'fa-image' : v.authCode == 'PF8' ? 'fa-user' : '';
|
let icon = v.authCode == 'PF2' ? 'fa-chart-pie' : v.authCode == 'PF3' ? 'fa-chart-area' : v.authCode == 'PF4' ? 'fa-chart-line' : v.authCode == 'PF5' ? 'fa-bell' : v.authCode == 'PF6' ? 'fa-server' : v.authCode == 'PF7' ? 'fa-image' : v.authCode == 'PF8' ? '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>`;
|
||||||
}
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
@ -1628,7 +1615,58 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
|||||||
}, null, "POST").send();
|
}, null, "POST").send();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
var noticeOptArr = [];
|
||||||
|
function getAlarmFromDB() {
|
||||||
|
let url = baseApiUrl + "/api/AlarmCard";
|
||||||
|
ytAjax = new YourTeam.Ajax(url, null, function (res) {
|
||||||
|
if (!res || res.code != "0000" || !res.data) {
|
||||||
|
|
||||||
|
} else {
|
||||||
|
let datas = res.data;
|
||||||
|
let titleHtml = `異常通知`;
|
||||||
|
let notices = [];
|
||||||
|
$.each(datas, (idx, data) => {
|
||||||
|
if (noticeOptArr.findIndex(x => x.id == data.id) == -1) {
|
||||||
|
let content = `<div class="col-12">
|
||||||
|
<div class="row m-0">
|
||||||
|
<span class="m-0">異常編號：<span>${data.id}</span></span>
|
||||||
|
</div>
|
||||||
|
<div class="row m-0">
|
||||||
|
<span class="m-0">異常等級：<span>${data.priority}</span></span>
|
||||||
|
</div>
|
||||||
|
<div class="row m-0">
|
||||||
|
<span class="m-0">異常類別：<span>${data.alarmClass_txt}</span></span>
|
||||||
|
</div>
|
||||||
|
<div class="row m-0">
|
||||||
|
<span class="m-0">設備名稱：<span>${data.device_name}</span></span>
|
||||||
|
</div>
|
||||||
|
<div class="row m-0">
|
||||||
|
<span class="m-0">異常訊息：<span>${data.errMsg}</span></span>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex m-0 gap-5 mt-2">
|
||||||
|
<button class="btn btn-sm btn-primary col-8 text-nowrap">已至現場確認問題</button>
|
||||||
|
<button id="noticeChkBtn${data.id}" class="btn btn-sm btn-secondary col-4">確認</button>
|
||||||
|
</div>
|
||||||
|
</div>`
|
||||||
|
let main = {
|
||||||
|
title: titleHtml,
|
||||||
|
content: content,
|
||||||
|
type: "warning",
|
||||||
|
id: data.id,
|
||||||
|
hasCloseBtn: false,
|
||||||
|
timeText: displayDate(data.timestamp),
|
||||||
|
}
|
||||||
|
noticeOptArr.push(main);
|
||||||
|
notices.push(main);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
if (notices.length != 0) {
|
||||||
|
$("#noticeBlock").YTNotice("add_many", notices.oSort("id").reverse());
|
||||||
|
}
|
||||||
|
console.log("res", res)
|
||||||
|
}
|
||||||
|
}, null, "POST",true).send();
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@ -457,144 +457,6 @@ function addBsToast(container, type = "warning",title="",content ="", id, datas
|
|||||||
</div>`
|
</div>`
|
||||||
}
|
}
|
||||||
|
|
||||||
class YTNotice {
|
|
||||||
constructor(option = {}) {
|
|
||||||
this.title = option.title ?? "";
|
|
||||||
this.content = option.content ?? "";
|
|
||||||
this.type = option.type ?? null;
|
|
||||||
this.keepTime = 0;
|
|
||||||
this.iconClass = option.iconClass ?? "";
|
|
||||||
this.container = "";
|
|
||||||
this.eIcon = "";
|
|
||||||
this.eTitle = "";
|
|
||||||
this.eTimeAgo = "";
|
|
||||||
this.eCloseBtn = "";
|
|
||||||
this.eContent = "";
|
|
||||||
this.init();
|
|
||||||
}
|
|
||||||
|
|
||||||
init = function () {
|
|
||||||
this.setIconClass();
|
|
||||||
this.setContainer();
|
|
||||||
|
|
||||||
if (this.title) {
|
|
||||||
this.setTitle(this.title);
|
|
||||||
}
|
|
||||||
if (this.content) {
|
|
||||||
this.setContent(this.content);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
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">just now</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);
|
|
||||||
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`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
setIcon = function (iconClass) {
|
|
||||||
this.eIcon = $(`<i class="mr-2"></i>`);
|
|
||||||
this.eIcon.addClass(iconClass);
|
|
||||||
}
|
|
||||||
|
|
||||||
setTitle = function (title = "") {
|
|
||||||
this.eTitle.html(title);
|
|
||||||
}
|
|
||||||
|
|
||||||
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 = [];
|
|
||||||
}
|
|
||||||
|
|
||||||
addNotice = function (option = {}) {
|
|
||||||
let notice = new YTNotice(option);
|
|
||||||
$(this.element).prepend(notice.container);
|
|
||||||
let lastNoticeOffset = $(this.element).find(".toast").last().offset();
|
|
||||||
if (lastNoticeOffset.top + this.offsetBottom > $(window).height()) {
|
|
||||||
$(this.noticeArr[0].obj.container).toast('dispose');
|
|
||||||
setTimeout(() => {
|
|
||||||
$(this.noticeArr[0].obj.container).remove();
|
|
||||||
this.noticeArr.shift();
|
|
||||||
}, 500)
|
|
||||||
|
|
||||||
}
|
|
||||||
$(notice.container).toast('show');
|
|
||||||
this.noticeArr.push({ obj: notice, time: (new Date()).getTime() });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
$.fn.YTNotice = function (method = "init", ...args) {
|
|
||||||
let _this = this;
|
|
||||||
|
|
||||||
if (method == "init") {
|
|
||||||
initNoticeBlock();
|
|
||||||
}
|
|
||||||
|
|
||||||
if (method == "add") {
|
|
||||||
let argArr = ["title", "content", "type", "iconClass"];
|
|
||||||
let opt = {};
|
|
||||||
let noticeBlock = _this[0]._noticeBlock;
|
|
||||||
if (!noticeBlock) {
|
|
||||||
initNoticeBlock();
|
|
||||||
noticeBlock = _this[0]._noticeBlock;
|
|
||||||
}
|
|
||||||
argArr.forEach((arg, idx) => {
|
|
||||||
opt[argArr[idx]] = args[idx];
|
|
||||||
})
|
|
||||||
|
|
||||||
noticeBlock.addNotice(opt);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function initNoticeBlock() {
|
|
||||||
let option = {};
|
|
||||||
option.element = _this;
|
|
||||||
let noticeBlock = new YTNoticeBlock(option);
|
|
||||||
_this[0]._noticeBlock = noticeBlock;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 取得資料庫電梯設備，根據 baja 訂閱移動 3D 電梯
|
* 取得資料庫電梯設備，根據 baja 訂閱移動 3D 電梯
|
||||||
* */
|
* */
|
||||||
|
|||||||
270
Frontend/js/yourteam/plugins/yt-notice/yt-notice.js
Normal file
270
Frontend/js/yourteam/plugins/yt-notice/yt-notice.js
Normal file
@ -0,0 +1,270 @@
|
|||||||
|
/**
|
||||||
|
* YourTeam Notice 訊息彈出小視窗 (on base bootstrap v4 toast)
|
||||||
|
*
|
||||||
|
* 使用方式：
|
||||||
|
* <div id="noticeBlock" style="position: fixed; top: 70px; right: 0px; padding: 20px; transition: 0.2s; z-index: 50000; height:100%; ">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
*
|
||||||
|
* <script>
|
||||||
|
* $("#noticeBlock").YTNotice("add", { option... });
|
||||||
|
* </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();
|
||||||
|
}
|
||||||
|
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
|
$(this.container)[0]._ytNotice = this;
|
||||||
|
}
|
||||||
|
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
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`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setIcon = function (iconClass) {
|
||||||
|
this.eIcon = $(`<i class="mr-2"></i>`);
|
||||||
|
this.eIcon.addClass(iconClass);
|
||||||
|
}
|
||||||
|
|
||||||
|
setTitle = function (title = "") {
|
||||||
|
this.eTitle.html(title);
|
||||||
|
}
|
||||||
|
|
||||||
|
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;
|
||||||
|
|
||||||
|
this.init();
|
||||||
|
}
|
||||||
|
|
||||||
|
init = function () {
|
||||||
|
this.drawInitScroll();
|
||||||
|
this.drawElement();
|
||||||
|
|
||||||
|
if (this.scrollY) {
|
||||||
|
this.noticeContainer = this.eScroll;
|
||||||
|
} else {
|
||||||
|
this.noticeContainer = this.element;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.updEleObj();
|
||||||
|
}
|
||||||
|
|
||||||
|
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 = $(obj)[0]._ytNotice.id
|
||||||
|
let tarNoticeIdx = this.noticeArr.findIndex(x => x.obj.id == tarNoticeId);
|
||||||
|
if (tarNoticeIdx != -1) {
|
||||||
|
this.noticeArr[tarNoticeIdx].canShow = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.showNotices();
|
||||||
|
}, 500)
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
this.updEleObj();
|
||||||
|
}
|
||||||
|
|
||||||
|
checkCanShow = function (notice = null) {
|
||||||
|
let lastNoticeOffset = $(this.noticeContainer).find(".toast").last().offset();
|
||||||
|
if ($(this.noticeContainer).find(".toast").last().length == 0) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
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.updEleObj();
|
||||||
|
}
|
||||||
|
|
||||||
|
updEleObj = function () {
|
||||||
|
$(this.element)[0]._noticeBlock = this;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$.fn.YTNotice = function (method = "init", ...args) {
|
||||||
|
let _this = this;
|
||||||
|
|
||||||
|
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") {
|
||||||
|
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user