[Frontend] yt-tab debug | yt-tooltip option 增加group ,group中只有一個tooltip顯示 | ajax succesFunction 前先判斷是否有授權token | datatable.js 註解不需要程序 | dropdown select item 簡易封裝(具有下拉選單功能) | 全域 onEvent 優化 | toastr 套件更新及引用

This commit is contained in:
dev01 2022-11-16 14:53:22 +08:00
parent 1f9a199ebf
commit 281a6292d6
15 changed files with 271 additions and 591 deletions

View File

@ -5,8 +5,8 @@
</style>
<div class="row">
<div class="col-sm-12 col-xl-5">
<div class="d-flex justify-content-start mb-6">
<div class="col-sm-12 col-xl-5" id="floDevList">
<!--<div class="d-flex justify-content-start mb-6">
<button type="button" class="btn btn-primary waves-effect waves-themed mr-5">19 F</button>
<div id="floor19" class="mr-5 cur-poi">
<span class="status status-success d-inline-block">
@ -32,7 +32,7 @@
<img src="img/demo/avatars/avatar-c.png" class="profile-image rounded-circle" alt="...">
</span> 21F 電錶02
</div>
</div>
</div>-->
</div>
<div class="col-sm-12 col-xl-7">
@ -51,9 +51,41 @@
<script>
$(function () {
initPopover();
getFloDevList();
})
function getFloDevList() {
let url = baseApiUrl + "/api/Device/GetDeviceList";
let sendData = {
main_system_tag: pageAct.sysMainTag,
building_tag: pageAct.buiTag,
floor_tag: pageAct.floTag,
};
objSendData.Data = sendData;
ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
if (!res || res.code != "0000" || !res.data) {
} else {
let strHtml = ``;
$.each(res.data, (index, floObj) => {
strHtml += "<div class='d-flex justify-content-start mb-6'>"
strHtml += `<button id="floItemBtn${floObj.full_name}" type="button" class="btn btn-primary waves-effect waves-themed mr-5">${floObj.full_name}</button>`
$.each(floObj.device_list, (index2, devObj) => {
strHtml += `<div name="devItem" data-id="${devObj.device_guid}" class="mr-5 cur-poi">
<span class="status status-success d-inline-block">
<img src="${baseImgUrl + varPathImg + devObj.device_master_icon}" class="profile-image rounded-circle" onerror="defDev(this)" alt="...">
</span> ${devObj.full_name}
</div>`;
})
strHtml += "</div>"
})
$("#floDevList").append(strHtml);
initPopover();
}
}, null, "POST").send();
}
function drawStateTabBlo() {
let strHtml = `<table class="table table-bordered table-striped text-center m-0">
<tbody>
@ -174,7 +206,7 @@
}
function initPopover() {
$("#floor19").YTTooltip({
$("[name=devItem]").YTTooltip({
html: `<div class="card m-1 border device-wrap">
<div class="card-header p-2 px-3">
<div id="card-tab" class="row justify-content-end nav nav-tabs" role="tablist">
@ -202,6 +234,7 @@
</div>
</div>`,
group:"device",
onShow: function () {
var tab = new YT.Tab({ tabName: "cardTab" })
loadOpeRecTable();

View File

@ -6,10 +6,8 @@
<div class="container-fluid">
<div class="row bg-dark">
<h1 class="p-2 mx-5 mb-0">電錶系統</h1>
<div class="btn-group my-2">
<button name="floBtn" data-id="all" type="button" class="btn btn-secondary waves-effect waves-themed" data-tabname="floor" data-target="all">總覽</button>
<button name="floBtn" data-id="19" class="btn btn-secondary waves-effect waves-themed" data-tabname="floor" data-target="19">19 F</button>
<button name="floBtn" data-id="21" class="btn btn-secondary waves-effect waves-themed" data-tabname="floor" data-target="21">21 F</button>
<div class="btn-group my-2" id="floList">
</div>
</div>
@ -19,20 +17,45 @@
</main>
<script>
$("#js-page-content").load("_sysMonAll.html",loadCallback);
var floList = [];
$(function () {
getFloList();
})
onEvent("click", "[name=floBtn]", function () {
if ($(this).data("id") == "all") {
$("#js-page-content").load("_sysMonAll.html", loadCallback);
} else {
$("#js-page-content").load("_sysMonFloor.html", loadCallback);
}
})
onEvent("yt:tab:change", "[name=floBtn]", function () {
pageAct.floTag = $(this).data("id");
if ($(this).data("id") == "all") {
pageAct.floTag = null;
$("#js-page-content").load("_sysMonAll.html", loadCallback);
} else {
$("#js-page-content").load("_sysMonFloor.html", loadCallback);
}
})
onEvent("change", "#buiList", function (e, actEle) {
getFloList();
})
function getFloList() {
let url = baseApiUrl + "/api/Device/GetFloor";
let sendData = { building_tag: pageAct.buiTag };
objSendData.Data = sendData;
ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
if (!res || res.code != "0000" || !res.data) {
} else {
let strHtml = `<button name="floBtn" data-id="all" type="button" class="btn btn-secondary waves-effect waves-themed" data-tabname="floor" data-target="all">總覽</button>`;
$.each(res.data, (index, floObj) => {
strHtml += `<button name="floBtn" data-id="${floObj.floor_tag}" class="btn btn-secondary waves-effect waves-themed" data-tabname="floor" data-target="${floObj.floor_tag}">${floObj.floor_tag}</button>`;
})
$("#floList").html(strHtml);
floList = res.data;
var ytTab = new YT.Tab({ tabName: "floor" })
}
}, null, "POST").send();
}
</script>

BIN
Frontend/img/defdev.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB

View File

@ -25,6 +25,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
<link id="appbundle" rel="stylesheet" media="screen, print" href="lib/app.bundle.css">
<link id="mytheme" rel="stylesheet" media="screen, print" href="#">
<link id="myskin" rel="stylesheet" media="screen, print" href="lib/skins/skin-master.css">
<link rel="stylesheet" href="lib/notifications/toastr/toastr.min.css" />
<!-- Place favicon.ico in the root directory -->
<link rel="apple-touch-icon" sizes="180x180" href="img/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon/favicon-32x32.png">
@ -1114,19 +1115,17 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
</div>
<div class="dropdown">
<a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
總公司
<a class="dropdown-toggle" href="javascript:;" role="button" id="buiActDrop" data-target="buiList" data-toggle="dropdown" aria-haspopup="true">
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">分公司一</a>
<a class="dropdown-item" href="#">分公司二</a>
<a class="dropdown-item" href="#">分公司三</a>
<div id="buiList" class="dropdown-menu dropdown-select-menu js-auto-close">
</div>
</div>
<div class="ml-auto d-flex">
<div class="btn-group mx-4">
<a href="javascript:;" name="dasBoaBtn" class="text-center">
<a href="javascript:;" name="topFunBtn" data-page="dashboard" class="text-center">
<i class="fal fa-home fa-2x"></i><br>首頁
</a>
<!--<div class="dropdown-menu">
@ -1139,12 +1138,12 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
<a href="javascript:;" class="dropdown-toggle no-arrow text-center" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fal fa-tv fa-2x"></i><br>系統監控
</a>
<div class="dropdown-menu" id="sysMonBtnList">
<button class="dropdown-item" type="button" name="sysMonBtn">電錶</button>
<div class="dropdown-menu dropdown-select-menu js-auto-close" id="sysMonBtnList">
<!--<button class="dropdown-item" type="button" name="sysMonBtn">電錶</button>
<button class="dropdown-item" type="button" name="sysMonBtn">照明系統</button>
<button class="dropdown-item" type="button" name="sysMonBtn">電梯系統</button>
<button class="dropdown-item" type="button" name="sysMonBtn">環境感測</button>
<button class="dropdown-item" type="button" name="sysMonBtn">空調系統</button>
<button class="dropdown-item" type="button" name="sysMonBtn">空調系統</button>-->
</div>
</div>
<div class="btn-group mx-4">
@ -2055,18 +2054,21 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
<script src="lib/statistics/flot/flot.bundle.js"></script>
<script src="lib/statistics/easypiechart/easypiechart.bundle.js"></script>
<script src="lib/datagrid/datatables/datatables.bundle.js"></script>
<script src="lib/notifications/toastr/toastr.min.js"></script>
<script src="js/yourteam/yourteam.ajax.class.js"></script>
<script src="js/yourteam/yourteam.jquery.datatables.js"></script>
<script src="js/yourteam/yourteam.utility.class.js"></script>
<script src="js/yourteam/plugins/yt-tooltip/yt-tooltip.js"></script>
<script src="js/yourteam/plugins/yt-tab/yt-tab.js"></script>
<script src="js/toast.js"></script>
<script src="js/style.js"></script>
<script src="js/main.js"></script>
<script src="js/site.js"></script>
<script src="js/init.js"></script>
<script>
let user = localStorage.getItem("JWT-Authorization");
var jwt = localStorage.getItem("JWT-Authorization");
var pageAct = {}; //記錄全頁面已選擇項目
if (user) {
if (jwt) {
$("#app").load("_dashboard.html", loadCallback);
} else {
location.href = "login.html";
@ -2074,15 +2076,35 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
$(function () {
getSysMonBtnList();
getBuiList();
/*setBuiAct();*/
})
onEvent("click", "button[name^=sysMonBtn]", function () {
$("#app").load("_systemMonitor.html", loadCallback);
})
onEvent("click", "button[name=dasBoaBtn]", function () {
$("#app").load("_dashboard.html", loadCallback);
onEvent("click", "[name=topFunBtn]", function () {
let page = $(this).data("page");
if (page != "systemMonitor") {
$("#sysMonBtnList .dropdown-item").removeClass("active");
pageAct.sysMainTag = null;
}
$("#app").load(`_${page}.html`, loadCallback);
})
onEvent("active:change", "#sysMonBtnList", function (e, actEle) {
if (actEle) {
pageAct.sysMainTag = $(actEle).prop("id").split("mainSysBtn")[1];
}
$(this).trigger("change");
})
onEvent("active:change", "#buiList", function (e, actEle) {
if (actEle) {
pageAct.buiTag = $(actEle).prop("id").split("buiBtn")[1];
}
$(this).trigger("change");
})
function loadCallback() {
initTabsByEle();
resetYTTooltip();
@ -2090,12 +2112,34 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
function getSysMonBtnList() {
let url = baseApiUrl + "/api/Device/GetMainSub";
ytAjax = new YourTeam.Ajax(url, null, function (data) {
console.log(data)
/*sysMonBtnList*/
},null,"POST").send();
ytAjax = new YourTeam.Ajax(url, null, function (res) {
if (!res || res.code != "0000" || !res.data) {
} else {
let strHtml = ``;
$.each(res.data.history_Main_Systems, (index, mainSysObj) => {
strHtml += `<button id="mainSysBtn${mainSysObj.main_system_tag}" class="dropdown-item" type="button" data-page="systemMonitor" name="topFunBtn">${mainSysObj.full_name}</button>`;
})
$("#sysMonBtnList").append(strHtml);
}
}, null, "POST").send();
}
function getBuiList() {
let url = baseApiUrl + "/api/Device/GetBuild";
ytAjax = new YourTeam.Ajax(url, null, function (res) {
if (!res || res.code != "0000" || !res.data) {
} else {
let strHtml = ``;
$.each(res.data, (index, buiObj) => {
strHtml += `<a id="buiBtn${buiObj.building_tag}" class="dropdown-item" href="javascript:;">${buiObj.full_name}</a>`;
})
$("#buiList").append(strHtml).droSetItem(); //droSetItem 預設第一筆 active
}
}, null, "POST").send();
}
</script>
</body>
<!-- END Body -->

View File

@ -1 +1,35 @@

$(function () {
$(".dropdown-menu.dropdown-select-menu").each((index, value) => {
setDropdownItem(value)
})
})
$.fn.droSetItem = function () {
setDropdownItem(this);
return this;
}
function setDropdownItem(menuEle) {
if ($(menuEle).find(".dropdown-item.active").length == 0) {
$(menuEle).find(".dropdown-item").first().addClass("active");
}
let actText = $(menuEle).find(".dropdown-item.active").first().text();
let actEleId = $(menuEle).prop("id");
$(`.dropdown-toggle[data-target=${actEleId}]`).text(actText);
$(menuEle).trigger("active:change", $(menuEle).find(".dropdown-item.active"));
}
onEvent("click", ".dropdown-menu.dropdown-select-menu .dropdown-item", function () {
$(this).parent(".dropdown-menu.dropdown-select-menu").find(".dropdown-item").removeClass("active");
$(this).addClass("active");
setDropdownItem($(this).parent(".dropdown-menu.dropdown-select-menu"));
})
function defDev(obj) {
let defSrc = 'img/defdev.png';
obj.src = defSrc;
}

View File

@ -1338,8 +1338,9 @@ async function download(url, filename) {
}
function onEvent(type,selector,callback) {
$("body").on(type, selector, callback)
function onEvent(type, selector, callback) {
$("body").off(type, selector);
$("body").on(type, selector, callback);
}
/**

View File

@ -31,10 +31,15 @@ class YourTeamTab {
this.init()
}
init = function() {
init = function () {
if (_ytTabInited.indexOf(this.tabName) != -1) {
_ytTabInited.splice($.inArray(this.tabName, _ytTabInited), 1);
$(`[data-tabname=${this.tabName}][data-target]`).off("click").unbind("click");
}
this.event();
$(`[data-tabname=${this.tabName}][data-tabrole=child]`).css("display", "none");
$(`[data-tabname=${this.tabName}][data-target]`).first().click();
$(`[data-tabname=${this.tabName}][data-target]`).first().trigger("click","fromInit");
_ytTabInited.push(this.tabName);
}
event = function () {
@ -43,11 +48,13 @@ class YourTeamTab {
// example :
// <button id="test" data-target="#okDiv" data-tabname="tab1"></button>
// <div id="okDiv" data-tabrole="child" data-tabname="tab1"></div>
$("body").on("click", `[data-tabname=${this.tabName}][data-target]`, function () {
$(`[data-tabname=${this.tabName}][data-target]`).off("click").on("click", function (e, arg) {
console.log(e)
let target = $(this).data("target");
let obj = this;
$(`[data-tabname=${clsObj.tabName}][data-target]:not([data-tabrole=child])`).removeClass("active")
$(obj).addClass("active")
$(obj).trigger("yt:tab:change")
let tabName = $(target).data("tabname");
if (tabName) {
if ($(target).data("tabrole") == "child") {

View File

@ -30,6 +30,7 @@ $.fn.YTTooltip = function (option) {
toggle: option.toggle || "click",
hideTooltipEvent: hideTooltipEvent,
onShow: option.onShow || null,
group: option.group || null,
};
if (obj.toggle == "hover") {
@ -42,7 +43,6 @@ $.fn.YTTooltip = function (option) {
//顯示 tooltip 程序 及 存入已顯示紀錄arr
if (!tooId || obj.isShowArr.indexOf(tooId) == -1) {
let ranId = Math.floor((Math.random() * (9999999 - 1000000)) + 1000000);
obj.isShowArr.push(ranId);
let clone = $(obj.html);
//body 元素 高寬
let bodyWidth = $("body")[0].offsetWidth;
@ -54,8 +54,20 @@ $.fn.YTTooltip = function (option) {
let height = $(this)[0].offsetHeight;
$(this).data("yttooltipid", ranId);
$(clone).attr("id", "yt_tooltip_" + ranId)
$(clone).attr("id", "yt_tooltip_" + ranId);
if (obj.group) {
$(clone).data("group", obj.group).attr("data-group", obj.group);
}
//同一 group tooltip 先隱藏 (只顯示一個)
if (obj.group) {
$(`body [id^=yt_tooltip_][data-group=${obj.group}]`).each((index, groTooEle) => {
let eleId = $(groTooEle).prop("id").split("yt_tooltip_")[1];
obj.hideTooltipEvent(eleId);
})
}
$("body").append(clone);
//push 已顯示紀錄
obj.isShowArr.push(ranId);
obj.tooltipDiv = clone;
//顯示 tooltip
$(clone).css({ "display": display, "position": "absolute" });
@ -108,13 +120,14 @@ $.fn.YTTooltip = function (option) {
function hideTooltipEvent(tooId) {
$("#yt_tooltip_" + tooId).hide();
setTimeout(function () {
if ($("#yt_tooltip_" + tooId).css("display") == "none") {
obj.isShowArr.splice($.inArray(tooId, obj.isShowArr), 1);
$("#yt_tooltip_" + tooId).remove();
}
}, 100)
$("#yt_tooltip_" + tooId).remove();
obj.isShowArr.splice($.inArray(tooId, obj.isShowArr), 1);
//setTimeout(function () {
// if ($("#yt_tooltip_" + tooId).css("display") == "none") {
// obj.isShowArr.splice($.inArray(tooId, obj.isShowArr), 1);
// $("#yt_tooltip_" + tooId).remove();
// }
//}, 100)
}

View File

@ -27,6 +27,7 @@ class Ajax {
this.type = type;
this.dataType = dataType;
this.sendData = sendData;
this.extSuccessFunction = successFunction;
/*if (successFunction) this.successFunction = successFunction;*/
if (errorFunction) this.errorFunction = errorFunction;
return this;
@ -128,9 +129,9 @@ class Ajax {
if (sendData) {
this.sendData = sendData;
}
//if (successFunction) {
// this.successFunction = successFunction;
//}
if (successFunction) {
this.successFunction = successFunction;
}
if (errorFunction) {
this.errorFunction = errorFunction;
}
@ -148,11 +149,11 @@ class Ajax {
//processData: false,
beforeSend: this.beforeSendFunction,
success:(data) => this.successFunction(data,successFunction),
success: (data) => this.successFunction(data, this.extSuccessFunction),
error: this.errorFunction,
complete: this.completeFunction,
statusCode: {
201: (data) => this.successFunction(data,successFunction),
201: (data) => this.successFunction(data, this.extSuccessFunction),
}
});
}

View File

@ -93,17 +93,17 @@ function fnInitJqDataTablesNoData(tag, dataSet = null, columns = null, columnDef
let time = 0;
table = $(tag).DataTable(oTable);
table.on('processing', function (e, settings, processing) {
//過100ms的讀取才秀出loading
setTimeout(function () {
time == 1 ? loadingSetting("show", "dtProcessing") : "";
}, 100);
////過100ms的讀取才秀出loading
//setTimeout(function () {
// time == 1 ? loadingSetting("show", "dtProcessing") : "";
//}, 100);
if (processing && time == 0) { //第一次讀取processing = true
time = 1;
} else if (!processing && time == 1 ) { //結束讀取後processing = false
loadingSetting("hide", "dtProcessing");
time = 0;
}
//if (processing && time == 0) { //第一次讀取processing = true
// time = 1;
//} else if (!processing && time == 1 ) { //結束讀取後processing = false
// loadingSetting("hide", "dtProcessing");
// time = 0;
//}
})
table.on('responsive-display', function (e, datatable, row, showHide, update ) {
table.columns.adjust();
@ -222,16 +222,16 @@ function fnInitJqDataTablesAjax(apiUrl, tag, sendData = null, columns, columns_d
table = $(tag).DataTable(oTable);
table.on('processing', function (e, settings, processing) {
//過100ms的讀取才秀出loading
setTimeout(function () {
time == 1 ? loadingSetting("show", "dtProcessing") : "";
}, 100);
//setTimeout(function () {
// time == 1 ? loadingSetting("show", "dtProcessing") : "";
//}, 100);
if (processing && time != 1) { //第一次讀取processing = true
time = 1;
} else if (!processing && time == 1) { //結束讀取後processing = false
loadingSetting("hide", "dtProcessing");
time = 0;
}
//if (processing && time != 1) { //第一次讀取processing = true
// time = 1;
//} else if (!processing && time == 1) { //結束讀取後processing = false
// loadingSetting("hide", "dtProcessing");
// time = 0;
//}
})
}
catch (e) {
@ -369,16 +369,16 @@ function fnInitJqDataTablesServerSideAjax(apiUrl, tag, sendData, columns, column
console.log($.fn.DataTable.ext.pager)
table.on('processing', function (e, settings, processing) {
//過100ms的讀取才秀出loading
setTimeout(function () {
time == 1 ? loadingSetting("show", "pageload") : "";
}, 100);
//setTimeout(function () {
// time == 1 ? loadingSetting("show", "pageload") : "";
//}, 100);
if (processing && time == 0) { //第一次讀取processing = true
time = 1;
} else if (!processing && time == 1 && tableStatus != 2){ //結束讀取後processing = false
loadingSetting("hide", "pageload");
time = 0;
}
//if (processing && time == 0) { //第一次讀取processing = true
// time = 1;
//} else if (!processing && time == 1 && tableStatus != 2){ //結束讀取後processing = false
// loadingSetting("hide", "pageload");
// time = 0;
//}
})
table.on('xhr', function (e, settings, json, xhr) {
@ -608,15 +608,15 @@ function serverSideExecLimit() {
//tableStatus = 2 | 已觸發執行,不可接受執行(超出執行條件)
if (tableStatus == 2) {
showAlert("danger", "執行次數過多!")
loadingSetting("show","dtServerSide"); //出現loading
setTimeout(function () {
loadingSetting("hide", "dtServerSide");
pageEventNum = searchEventNum = orderEventNum = 0 //執行次數復歸
timeNum = 0 //秒數歸零
tableStatus = 0 //狀態復歸
clearInterval(calEventTime) //計數關閉
}, 5000)
//showAlert("danger", "執行次數過多!")
//loadingSetting("show","dtServerSide"); //出現loading
//setTimeout(function () {
// loadingSetting("hide", "dtServerSide");
// pageEventNum = searchEventNum = orderEventNum = 0 //執行次數復歸
// timeNum = 0 //秒數歸零
// tableStatus = 0 //狀態復歸
// clearInterval(calEventTime) //計數關閉
//}, 5000)
}
}
}

View File

@ -1,476 +0,0 @@
/*
* Toastr
* Copyright 2012-2015
* Authors: John Papa, Hans Fjällemark, and Tim Ferrell.
* All Rights Reserved.
* Use, reproduction, distribution, and modification of this code is subject to the terms and
* conditions of the MIT license, available at http://www.opensource.org/licenses/mit-license.php
*
* ARIA Support: Greta Krafsig
*
* Project: https://github.com/CodeSeven/toastr
*/
/* global define */
(function (define) {
define(['jquery'], function ($) {
return (function () {
var $container;
var listener;
var toastId = 0;
var toastType = {
error: 'error',
info: 'info',
success: 'success',
warning: 'warning'
};
var toastr = {
clear: clear,
remove: remove,
error: error,
getContainer: getContainer,
info: info,
options: {},
subscribe: subscribe,
success: success,
version: '2.1.4',
warning: warning
};
var previousToast;
return toastr;
////////////////
function error(message, title, optionsOverride) {
return notify({
type: toastType.error,
iconClass: getOptions().iconClasses.error,
message: message,
optionsOverride: optionsOverride,
title: title
});
}
function getContainer(options, create) {
if (!options) { options = getOptions(); }
$container = $('#' + options.containerId);
if ($container.length) {
return $container;
}
if (create) {
$container = createContainer(options);
}
return $container;
}
function info(message, title, optionsOverride) {
return notify({
type: toastType.info,
iconClass: getOptions().iconClasses.info,
message: message,
optionsOverride: optionsOverride,
title: title
});
}
function subscribe(callback) {
listener = callback;
}
function success(message, title, optionsOverride) {
return notify({
type: toastType.success,
iconClass: getOptions().iconClasses.success,
message: message,
optionsOverride: optionsOverride,
title: title
});
}
function warning(message, title, optionsOverride) {
return notify({
type: toastType.warning,
iconClass: getOptions().iconClasses.warning,
message: message,
optionsOverride: optionsOverride,
title: title
});
}
function clear($toastElement, clearOptions) {
var options = getOptions();
if (!$container) { getContainer(options); }
if (!clearToast($toastElement, options, clearOptions)) {
clearContainer(options);
}
}
function remove($toastElement) {
var options = getOptions();
if (!$container) { getContainer(options); }
if ($toastElement && $(':focus', $toastElement).length === 0) {
removeToast($toastElement);
return;
}
if ($container.children().length) {
$container.remove();
}
}
// internal functions
function clearContainer (options) {
var toastsToClear = $container.children();
for (var i = toastsToClear.length - 1; i >= 0; i--) {
clearToast($(toastsToClear[i]), options);
}
}
function clearToast ($toastElement, options, clearOptions) {
var force = clearOptions && clearOptions.force ? clearOptions.force : false;
if ($toastElement && (force || $(':focus', $toastElement).length === 0)) {
$toastElement[options.hideMethod]({
duration: options.hideDuration,
easing: options.hideEasing,
complete: function () { removeToast($toastElement); }
});
return true;
}
return false;
}
function createContainer(options) {
$container = $('<div/>')
.attr('id', options.containerId)
.addClass(options.positionClass);
$container.appendTo($(options.target));
return $container;
}
function getDefaults() {
return {
tapToDismiss: true,
toastClass: 'toast',
containerId: 'toast-container',
debug: false,
showMethod: 'fadeIn', //fadeIn, slideDown, and show are built into jQuery
showDuration: 300,
showEasing: 'swing', //swing and linear are built into jQuery
onShown: undefined,
hideMethod: 'fadeOut',
hideDuration: 1000,
hideEasing: 'swing',
onHidden: undefined,
closeMethod: false,
closeDuration: false,
closeEasing: false,
closeOnHover: true,
extendedTimeOut: 1000,
iconClasses: {
error: 'toast-error',
info: 'toast-info',
success: 'toast-success',
warning: 'toast-warning'
},
iconClass: 'toast-info',
positionClass: 'toast-top-right',
timeOut: 5000, // Set timeOut and extendedTimeOut to 0 to make it sticky
titleClass: 'toast-title',
messageClass: 'toast-message',
escapeHtml: false,
target: 'body',
closeHtml: '<button type="button">&times;</button>',
closeClass: 'toast-close-button',
newestOnTop: true,
preventDuplicates: false,
progressBar: false,
progressClass: 'toast-progress',
rtl: false
};
}
function publish(args) {
if (!listener) { return; }
listener(args);
}
function notify(map) {
var options = getOptions();
var iconClass = map.iconClass || options.iconClass;
if (typeof (map.optionsOverride) !== 'undefined') {
options = $.extend(options, map.optionsOverride);
iconClass = map.optionsOverride.iconClass || iconClass;
}
if (shouldExit(options, map)) { return; }
toastId++;
$container = getContainer(options, true);
var intervalId = null;
var $toastElement = $('<div/>');
var $titleElement = $('<div/>');
var $messageElement = $('<div/>');
var $progressElement = $('<div/>');
var $closeElement = $(options.closeHtml);
var progressBar = {
intervalId: null,
hideEta: null,
maxHideTime: null
};
var response = {
toastId: toastId,
state: 'visible',
startTime: new Date(),
options: options,
map: map
};
personalizeToast();
displayToast();
handleEvents();
publish(response);
if (options.debug && console) {
console.log(response);
}
return $toastElement;
function escapeHtml(source) {
if (source == null) {
source = '';
}
return source
.replace(/&/g, '&amp;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;');
}
function personalizeToast() {
setIcon();
setTitle();
setMessage();
setCloseButton();
setProgressBar();
setRTL();
setSequence();
setAria();
}
function setAria() {
var ariaValue = '';
switch (map.iconClass) {
case 'toast-success':
case 'toast-info':
ariaValue = 'polite';
break;
default:
ariaValue = 'assertive';
}
$toastElement.attr('aria-live', ariaValue);
}
function handleEvents() {
if (options.closeOnHover) {
$toastElement.hover(stickAround, delayedHideToast);
}
if (!options.onclick && options.tapToDismiss) {
$toastElement.click(hideToast);
}
if (options.closeButton && $closeElement) {
$closeElement.click(function (event) {
if (event.stopPropagation) {
event.stopPropagation();
} else if (event.cancelBubble !== undefined && event.cancelBubble !== true) {
event.cancelBubble = true;
}
if (options.onCloseClick) {
options.onCloseClick(event);
}
hideToast(true);
});
}
if (options.onclick) {
$toastElement.click(function (event) {
options.onclick(event);
hideToast();
});
}
}
function displayToast() {
$toastElement.hide();
$toastElement[options.showMethod](
{duration: options.showDuration, easing: options.showEasing, complete: options.onShown}
);
if (options.timeOut > 0) {
intervalId = setTimeout(hideToast, options.timeOut);
progressBar.maxHideTime = parseFloat(options.timeOut);
progressBar.hideEta = new Date().getTime() + progressBar.maxHideTime;
if (options.progressBar) {
progressBar.intervalId = setInterval(updateProgress, 10);
}
}
}
function setIcon() {
if (map.iconClass) {
$toastElement.addClass(options.toastClass).addClass(iconClass);
}
}
function setSequence() {
if (options.newestOnTop) {
$container.prepend($toastElement);
} else {
$container.append($toastElement);
}
}
function setTitle() {
if (map.title) {
var suffix = map.title;
if (options.escapeHtml) {
suffix = escapeHtml(map.title);
}
$titleElement.append(suffix).addClass(options.titleClass);
$toastElement.append($titleElement);
}
}
function setMessage() {
if (map.message) {
var suffix = map.message;
if (options.escapeHtml) {
suffix = escapeHtml(map.message);
}
$messageElement.append(suffix).addClass(options.messageClass);
$toastElement.append($messageElement);
}
}
function setCloseButton() {
if (options.closeButton) {
$closeElement.addClass(options.closeClass).attr('role', 'button');
$toastElement.prepend($closeElement);
}
}
function setProgressBar() {
if (options.progressBar) {
$progressElement.addClass(options.progressClass);
$toastElement.prepend($progressElement);
}
}
function setRTL() {
if (options.rtl) {
$toastElement.addClass('rtl');
}
}
function shouldExit(options, map) {
if (options.preventDuplicates) {
if (map.message === previousToast) {
return true;
} else {
previousToast = map.message;
}
}
return false;
}
function hideToast(override) {
var method = override && options.closeMethod !== false ? options.closeMethod : options.hideMethod;
var duration = override && options.closeDuration !== false ?
options.closeDuration : options.hideDuration;
var easing = override && options.closeEasing !== false ? options.closeEasing : options.hideEasing;
if ($(':focus', $toastElement).length && !override) {
return;
}
clearTimeout(progressBar.intervalId);
return $toastElement[method]({
duration: duration,
easing: easing,
complete: function () {
removeToast($toastElement);
clearTimeout(intervalId);
if (options.onHidden && response.state !== 'hidden') {
options.onHidden();
}
response.state = 'hidden';
response.endTime = new Date();
publish(response);
}
});
}
function delayedHideToast() {
if (options.timeOut > 0 || options.extendedTimeOut > 0) {
intervalId = setTimeout(hideToast, options.extendedTimeOut);
progressBar.maxHideTime = parseFloat(options.extendedTimeOut);
progressBar.hideEta = new Date().getTime() + progressBar.maxHideTime;
}
}
function stickAround() {
clearTimeout(intervalId);
progressBar.hideEta = 0;
$toastElement.stop(true, true)[options.showMethod](
{duration: options.showDuration, easing: options.showEasing}
);
}
function updateProgress() {
var percentage = ((progressBar.hideEta - (new Date().getTime())) / progressBar.maxHideTime) * 100;
$progressElement.width(percentage + '%');
}
}
function getOptions() {
return $.extend({}, getDefaults(), toastr.options);
}
function removeToast($toastElement) {
if (!$container) { $container = getContainer(); }
if ($toastElement.is(':visible')) {
return;
}
$toastElement.remove();
$toastElement = null;
if ($container.children().length === 0) {
$container.remove();
previousToast = undefined;
}
}
})();
});
}(typeof define === 'function' && define.amd ? define : function (deps, factory) {
if (typeof module !== 'undefined' && module.exports) { //Node
module.exports = factory(require('jquery'));
} else {
window.toastr = factory(window.jQuery);
}
}));

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -15,6 +15,7 @@
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon/favicon-32x32.png">
<link rel="mask-icon" href="img/favicon/safari-pinned-tab.svg" color="#5bbad5">
<link rel="stylesheet" media="screen, print" href="lib/page-login-alt.css">
<link rel="stylesheet" href="lib/notifications/toastr/toastr.min.css" />
<!-- Font Awesome -->
<link href="lib/fontawesome-free/css/all.min.css" rel="stylesheet" />
@ -76,7 +77,7 @@
<script src="lib/jquery-validation/dist/additional-methods.min.js"></script>
<script src="lib/jquery-validation/dist/localization/messages_zh_TW.js"></script>
<script src="lib/notifications/sweetalert2/sweetalert2.bundle.js"></script>
<script src="lib/notifications/toastr/toastr.js"></script>
<script src="lib/notifications/toastr/toastr.min.js"></script>
<script src="js/toast.js"></script>
<script src="js/init.js"></script>
</body>
@ -180,15 +181,11 @@
//rel = JSON.stringify(rel);
if (rel.code != "0000") {
if (rel.code == "9999") {
toast_error(rel.msg);
}
else {
toast_ok(rel.msg);
}
toast_error(rel.msg || "系統內部發生錯誤,請聯絡系統管理員");
return;
}
else {
toast_ok(rel.msg);
localStorage.setItem('JWT-Authorization', rel.data.token);
location.href = "index.html";
return;

View File

@ -132,7 +132,7 @@ namespace FrontendWebApi.ApiControllers
try
{
var sqlString = $@"select floor_tag, full_name from floor where deleted = 0 and building_tag = @building_tag";
var sqlString = $@"select full_name as floor_tag from floor where deleted = 0 and building_tag = @building_tag";
var param = new { @building_tag = fd.building_tag };
var fl = await backendRepository.GetAllAsync<FloorList>(sqlString, param);
@ -175,17 +175,17 @@ namespace FrontendWebApi.ApiControllers
try
{
var sqlString = $@"select floor_tag, full_name, InitMapName as map_name, floor_map_name + '.svg' as floor_map_name from floor where deleted = 0 and building_tag = @building_tag and full_name = ifnull(@floor_tag, full_name)";
var sqlString = $@"select full_name, InitMapName as map_name, floor_map_name + '.svg' as floor_map_name from floor where deleted = 0 and building_tag = @building_tag and full_name = ifnull(@floor_tag, full_name)";
var param = new { @building_tag = fd.building_tag, @floor_tag = fd.floor_tag };
var fl = await backendRepository.GetAllAsync<FloorList>(sqlString, param);
foreach (var f in fl)
{
List<DeviceLists> dl = new List<DeviceLists>();
sqlString = $@"select d.device_guid, d.device_last_name, d.status, d.device_coordinate, dm.device_master_icon
sqlString = $@"select d.device_guid, d.full_name, d.status, d.device_coordinate, dm.device_master_icon
from device d
left join device_master dm on d.device_building_tag = dm.device_building_tag and d.device_name_tag = dm.device_name_tag and dm.deleted = 0
where deleted = 0 and device_system_tag = @main_system_tag and device_building_tag = @building_tag and device_floor_tag = ifnull(@floor_tag, device_floor_tag)";
left join device_master dm on d.device_building_tag = dm.device_building_tag and d.device_name_tag = dm.device_name_tag
where d.deleted = 0 and d.device_system_tag = @main_system_tag and d.device_building_tag = @building_tag and d.device_floor_tag = ifnull(@floor_tag, d.device_floor_tag)";
var dlParam = new { @main_system_tag = fd.main_system_tag, @building_tag = fd.building_tag, @floor_tag = fd.floor_tag };
dl = await backendRepository.GetAllAsync<DeviceLists>(sqlString, dlParam);
f.device_list = dl;