[Frontend][全域功能] notice 訊息警告程序調整 | 串接後台 API

Frontend/_dashboard.html

@@ -396,7 +396,7 @@
             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 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)
             chkBajaLoaded();
         })

Frontend/index.html

@@ -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" href="css/site.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="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css" type="text/css">
 </head>
@@ -667,7 +668,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
         </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>
 
@@ -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-tab/yt-tab",
                         "yourteam/plugins/yt-navbar/yt-navbar",
+                        "yourteam/plugins/yt-notice/yt-notice",
                         "style",
 
                     ], function () {
@@ -990,7 +992,11 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                 onEvent("click", "#testsysbtn", function () {
 
                 })
-                let fronIdx = 1;
+
+                onEvent("click", "button[id^=noticeChkBtn]", function () {
+                    $(this).parents(".toast").YTNotice("hide");
+                })
+
                 $(window).on("timeout:3s", function () {
 
                     getSystemAlarmByBaja((data) => {
@@ -1000,28 +1006,9 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                         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++;
                 })
 
             }
@@ -1628,7 +1615,58 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
             }, 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>
 
 </body>

Frontend/js/site.js

@@ -457,144 +457,6 @@ function addBsToast(container, type = "warning",title="",content ="", id, datas
                     </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">&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);
-        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 電梯
  * */

Frontend/js/yourteam/plugins/yt-notice/yt-notice.js

@@ -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">&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);
+    }
+
+    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);
+    }
+
+}