ibms-dome/Frontend/_historyData.html

<main id="js-page-content" role="main" class="page-content">
    <div class="row">
        <div class="col-sm-12 col-xl-2">
            <div class="rounded border border-white">
                <div class="d-flex position-relative py-3 px-4">
                    <i class="fal fa-search color-success-700 position-absolute pos-left fs-lg px-3 py-2 mt-1 ml-4"></i>
                    <input type="text" id="js_nested_list_filter" class="form-control shadow-inset-1 pl-6 border-success" placeholder="輸入兩字以上">
                </div>
                <!-- nav-menu-reset will reset the font colors -->
                <ul id="js_nested_list" class="nav-menu nav-menu-reset nav-menu-compact mb-sm-4 mb-md-0 rounded border border-white" data-nav-accordion="true">
                </ul>
                <div class="filter-message js-filter-message m-0 text-left pl-4 py-3 fw-500"></div>
            </div>

        </div>
        <div class="col-sm-12 col-xl-10">
            <h1 class="p-2 mb-0">歷史資料瀏覽</h1>
            <div class="row bg-dark p-2 mb-5">
                <div class="col-auto">
                    <div class="btn-group">
                        <button type="button" onclick="setDateType('day', this)" class="btn btn-secondary waves-effect waves-themed">日期</button>
                        <button type="button" onclick="setDateType('range', this)" class="btn btn-secondary waves-effect waves-themed">日區間</button>
                        <button type="button" onclick="setDateType('month', this)" class="btn btn-secondary waves-effect waves-themed">月</button>
                    </div>
                </div>
                <div class="col-auto">
                    <div class="btn-group">
                        <button type="button" onclick="setDateType('today', this)" class="btn btn-secondary waves-effect waves-themed">今天</button>
                        <button type="button" onclick="setDateType('ytd', this)" class="btn btn-secondary waves-effect waves-themed">昨天</button>
                    </div>
                </div>
                <div class="col-auto">
                    <div class="form-group">
                        <input class="form-control" id="startdate" type="date" name="date" value="">
                        <input class="form-control" id="getmonth" type="month" style="display: none"/>
                    </div>
                </div>
                <div class="col-auto" id="enddate" style="display: none">
                    <div class="form-group">
                        <input class="form-control" type="date" name="date" value="">
                    </div>
                </div>
                <div class="col-auto">
                    <a href="#" onclick="searchDate()" class="btn btn-info">查詢</a>
                    <a href="#" onclick="exportExcel()" class="btn btn-info waves-effect waves-themed">
                        <span class="fal fa-file-excel mr-1"></span>
                        匯出
                    </a>
                </div>
            </div>

            <div class="row-cols-1  mb-2">
                <div id="devPointsList" class="btn-group">
                    
                </div>
            </div>

            <div>
                <div class="frame-wrap">
                    <table id="historyTable" class="table table-bordered table-striped text-center m-0 w-100">
                    </table>
                </div>
            </div>

        </div>

    </div>
</main>

<script>
    var historyTable = null;
    $(function () {
        initList();

        // default list filter
        initApp.listFilter($('#js_default_list'), $('#js_default_list_filter'));
        // custom response message
        initApp.listFilter($('#js-list-msg'), $('#js-list-msg-filter'));
        //accordion filter
        initApp.listFilter($('#js_list_accordion'), $('#js_list_accordion_filter'));
        // nested list filter
        initApp.listFilter($('#js_nested_list'), $('#js_nested_list_filter'));
        //init navigation
        initApp.buildNavigation($('#js_nested_list'));

        loadTable(null);
        $(`[onclick="setDateType('day', this)"]`).click();
        $(`[onclick="setDateType('today', this)"]`).click();

        onEvent('change', '#startdate', function () {
            let today = displayDate(new Date(Date.now()), 'date').replaceAll('/', '-');
			let ytd = displayDate(new Date(new Date().setDate(new Date(Date.now()).getDate() - 1)), 'date').replaceAll('/', '-');
            console.log(today);
			console.log(ytd);
            if ($(this).val() == today) {
                $(`[onclick="setDateType('today', this)"]`).removeClass('btn-secondary');
                $(`[onclick="setDateType('today', this)"]`).addClass('btn-dark');
				$(`[onclick="setDateType('ytd', this)"]`).addClass('btn-secondary');
				$(`[onclick="setDateType('ytd', this)"]`).removeClass('btn-dark');
            }
            else if ($(this).val() == ytd) {
				$(`[onclick="setDateType('today', this)"]`).addClass('btn-secondary');
				$(`[onclick="setDateType('today', this)"]`).removeClass('btn-dark');
                $(`[onclick="setDateType('ytd', this)"]`).removeClass('btn-secondary');
                $(`[onclick="setDateType('ytd', this)"]`).addClass('btn-dark');
            }
            else {
				$(`[onclick="setDateType('today', this)"]`).addClass('btn-secondary');
                $(`[onclick="setDateType('today', this)"]`).removeClass('btn-dark');
				$(`[onclick="setDateType('ytd', this)"]`).addClass('btn-secondary');
				$(`[onclick="setDateType('ytd', this)"]`).removClass('btn-dark');
			}
        });
    });

    function initList() {
        pageAct.mainStatus = false;
        let sendData = {
            building_tag: pageAct.buiTag
        }
        objSendData.Data = sendData;
        let url = baseApiUrl + "/api/History/GetMainSub";
        function success(res) {
            let strHtml = ``;
            let i1 = null, i2 = null, first = true;

            $.each(res.data.history_Main_Systems, function (index, val) {
                if (pageAct.mainStatus) {
                    strHtml += `<li>
                                    <a href="#" data-filter-tags="${val.full_name.toLowerCase() }" data-maintag="${val.main_system_tag}">
                                        <span class="nav-link-text">${val.full_name}</span>
                                    </a>
                                    <ul style="${index == 0 ? `display:block;` : ``}">`;

                    i1 = (val.history_Sub_systems != null && i1 == null) ? index : null;
				}

                $.each(val.history_Sub_systems, function (index2, val2) {
                    i2 = (val2.device != null && i2 == null) ? index2 : null;
                    
                    strHtml += `<li>
                                    <a href="#" data-filter-tags="${val2.full_name.toLowerCase() } ${val2.sub_system_tag.toLowerCase() }"  data-subtag="${val2.sub_system_tag}">
                                        <span class="nav-link-text">
                                            ${val2.full_name} ${val2.sub_system_tag}
                                        </span>
                                    </a>
                                    <ul style="${(i1 != null ? index == i1 : first) && index2 == i2 ? `display:block;` : ``}">`;

                    $.each(val2.device, function (index3, val3) {
                        strHtml += `<li>
                                        <a href="#" onClick="setValue('${val3.device_number}', '${val3.full_name}', null)" data-filter-tags="${val3.full_name.toLowerCase() } ${val3.device_serial_tag.toLowerCase()}" data-devnum="${val3.device_number}">
                                            <span class="nav-link-text">
                                                ${val3.full_name} ${val3.device_serial_tag}
                                            </span>
                                        </a>
                                    </li>`;

                        if (pageAct.mainStatus) {
                            if (index == i1 && index2 == i2 && first) {
                                first = false;
                                pageAct.deviceNumber = val3.device_number;
                                pageAct.deviceName = val3.full_name;
                                devPointsList();
                            }
                        }
                        else {
							if (index2 == i2 && first) {
								first = false;
								pageAct.deviceNumber = val3.device_number;
								pageAct.deviceName = val3.full_name;
								devPointsList();
							}
						}
                    });
                    strHtml += `</ul> </li>`;
                });

                if (pageAct.mainStatus) {
				    strHtml += `</ul> </li>`;
				}
            });

            $('#js_nested_list').html(strHtml);
        }
        ytAjax = new YourTeam.Ajax(url, objSendData, success, null, "POST").send();
    }

    function devPointsList() {
        let sendData = {
			device_number: pageAct.deviceNumber
		}
		objSendData.Data = sendData;
		let url = baseApiUrl + "/api/History/GetDevPoi";
        function success(res) {
            let strHtml = ``;
            
            $.each(res.data, function (index, val) {
                if (index == 0) {
					strHtml += `<button onClick="setValue(null, null, '${val.points}', this)" type="button" class="btn btn-dark waves-effect waves-themed">${val.full_name} ${val.points}</button>`;
                    pageAct.deviceItem = val.points;
                    getData();
                } else {
					strHtml += `<button onClick="setValue(null, null, '${val.points}', this)" type="button" class="btn btn-secondary waves-effect waves-themed">${val.full_name} ${val.points}</button>`;
				}
            });

            $('#devPointsList').html(strHtml);
		}
		ytAjax = new YourTeam.Ajax(url, objSendData, success, null, "POST").send();
	}

    function getData(start = null, end = null) {
        var sdt = new Date();
		var edt = new Date(new Date().setDate(sdt.getDate() + 1));
        start = start ?? sdt.toLocaleDateString();
        end = end ?? edt.toLocaleDateString();
        getHistoryDataByBaja(pageAct.deviceNumber + "_" + pageAct.deviceItem,
			new Date(start).getTime(),
			new Date(end).getTime(),
			pageAct.deviceName,
            "Mitsubishi_Sup",
		    callBackFromHistory);
    }

    function callBackFromHistory(res) {
        res = JSON.parse(res);
        loadTable(res.data);
        if (historyTable != null) {
            let t = $('#historyTable').dataTable();
            
			t.fnClearTable();
            if (res.data.length > 0)
                t.fnAddData(res.data);
		}
    }

    function setValue(deviceNumber, deviceName, deviceItem, elem) {
        btnSelCss(elem);

        if ((deviceNumber != null && deviceNumber != undefined) && (deviceName != null && deviceName != undefined)) {
            pageAct.deviceNumber = deviceNumber;
            pageAct.deviceName = deviceName;
            devPointsList();
        }
		else if (deviceItem != null && deviceItem != undefined) {
            pageAct.deviceItem = deviceItem;
            getData();
		}
    }

    function setDateType(type, elem) {
        btnSelCss(elem);

        pageAct.dateType = type;
        let now = formatDate(new Date(Date.now()), "date");
        let ytd = formatDate(new Date(new Date().setDate(new Date().getDate() - 1)), "date");
        let tmr = formatDate(new Date(new Date().setDate(new Date().getDate() + 1)), "date");

        if (type == "day" || type == "today" || type == "ytd") {
            let date = type == "ytd" ? ytd : now;
            $('#startdate').css('display', 'block');
            $('#enddate').css('display', 'none');
            $('#getmonth').css('display', 'none');
            $('#startdate').val(date);
            
            if (type == "today")
                getData(formatDate(now, "date", true), formatDate(tmr, "date", true));
            else if (type == "ytd")
                getData(formatDate(ytd, "date", true), formatDate(now, "date", true));
            else {
				$(`[onclick="setDateType('today', this)"]`).removeClass('btn-secondary');
				$(`[onclick="setDateType('today', this)"]`).addClass('btn-dark');
			}
        }
        else if (type == "range") {
			$(`[onclick="setDateType('today', this)"], [onclick="setDateType('ytd', this)"]`).removeClass('btn-dark');
			$(`[onclick="setDateType('today', this)"], [onclick="setDateType('ytd', this)"]`).addClass('btn-secondary');

            $('#startdate').css('display', 'block');
            $('#enddate').css('display', 'block');
            $('#getmonth').css('display', 'none');
            $('#startdate').val(now);
            $('#enddate input').val(tmr);
        }
        else if (type == "month") {
			$(`[onclick="setDateType('today', this)"], [onclick="setDateType('ytd', this)"]`).removeClass('btn-dark');
			$(`[onclick="setDateType('today', this)"], [onclick="setDateType('ytd', this)"]`).addClass('btn-secondary');

            $('#startdate').css('display', 'none');
            $('#enddate').css('display', 'none');
            $('#getmonth').css('display', 'block');
            $('#getmonth').val(now.substr(0, 7));
        }
        else if (type == "ytd") {
			$('#startdate').css('display', 'block');
			$('#enddate').css('display', 'none');
            $('#getmonth').css('display', 'none');
            $('#startdate').val(ytd);
        }
    }

    function searchDate() {
        let start = new Date($('#startdate').val());
		let end = new Date(new Date().setDate(new Date($('#enddate input').val()).getDate() + 1));
		
        if (pageAct.dateType == "day")
            end = new Date(new Date().setDate(start.getDate() + 1));
		else if (pageAct.dateType == "month") {
            start = new Date($('#getmonth').val());
            end = new Date(new Date().setDate(start.getDate() + 30));
        }
        else if (pageAct.dateType != "range")
            return;

        getData(formatDate(start, "date", true), formatDate(end, "date", true));
    }

    function formatDate(date, type, send = false) {
        if (!send)
            return displayDate(date, type).replaceAll("/", "-");
        else {
            date = displayDate(date, type);
            let month = date.split('/')[1];
            let year = date.split('/')[0];
			let day= date.split('/')[2];
            return month + "/" + day + "/" + year;
		}
    }

    function loadTable(data) {
        if (data) {
            $.each(data, function (i, v) {
                v.type = deviceName;
            });
        }

		let tag = "#historyTable";
        
		let column_defs = [
			{ "targets": [0], "width": "20%", "sortable": true },
			{ "targets": [1], "width": "20%", "sortable": true },
            { "targets": [2], "width": "20%", "sortable": true }
		];

        let columns = [
            {
                "title": "類別",
                "data": "type"
            },
			{
				"title": "設備名稱",
				"data": "deviceName",
			},
			{
				"title": "數值",
				"data": "value",
			},
			{
				"title": "紀錄時間",
                "data": "timestamp",
                "render": function (data) {
					return displayDate(data, "datetime");
				}
            }
        ];

		historyTable = new YourTeam.JqDataTables.getTableByStatic(tag, data, columns, column_defs, null, null, null, null, "tpi");
    }

    function exportExcel() {
        let url = baseApiUrl + "/History/OpeExportExcel";
        objSendData.Data = $('#historyTable').dataTable().fnGetData();
        
        $.each(objSendData.Data, function (i, v) {
			v.starttime = (pageAct.dateType == "month" ? new Date($('#getmonth').val()) : new Date($('#startdate').val()));
            v.endtime = $('#enddate input').val() === "" ? null : new Date($('#enddate input').val());
            v.dateType = pageAct.dateType;
        });

        ytAjax = new YourTeam.Ajax(url, objSendData, function (rel) {
            if (rel.code == "0000")
				location.href = baseApiUrl + "/api/df?path=" + rel.data.split('/')[0] + "&fileName=" + rel.data.split('/')[1] + "&token=" + localStorage.getItem("JWT-Authorization");
        }, null, "POST").send();
    }
</script>