ibms-MCUT/Backend/Views/NiagaraDataSynchronize/Index.cshtml

@{
    ViewData["MainNum"] = "2";
    ViewData["SubNum"] = "3";
    ViewData["Title"] = "Niagara資料同步";
}

<ol class="breadcrumb page-breadcrumb">
    <li class="breadcrumb-item"><a href="javascript:void(0);">首頁</a></li>
    <li class="breadcrumb-item">設備管理</li>
    <li class="breadcrumb-item active">Niagara資料同步</li>
    <li class="position-absolute pos-top pos-right d-none d-sm-block"><span class="js-get-date"></span></li>
</ol>

<div class="row">
    <div class="col-xl-12">
        <div id="panel-5" class="panel">
            <div class="panel-container show">
                <div class="panel-content">

                    <div class="form-row align-items-center">
                        <div class="col-12 mb-3">
                            <div class="custom-control custom-radio custom-control-inline">
                                <input type="radio" id="Building_B" name="Building" value="B" class="custom-control-input">
                                <label class="custom-control-label" for="Building_B"></label>
                            </div>
                            @*<div class="custom-control custom-radio custom-control-inline">
                                <input type="radio" id="Building_O" name="Building" value="O" class="custom-control-input">
                                <label class="custom-control-label" for="Building_O">辦公棟</label>
                            </div>*@
                        </div>
                    </div>

                    <div class="form-row align-items-center">
                        <button id="loadDataBtn" type="button" class="btn btn-primary" onclick="LoadData()">載入資料</button>
                        <button id="synchornizeDataBtn" type="button" class="btn btn-dark" onclick="SynchronizeData()">同步資料</button>
                    </div>

                    <br />
                    <br />

                    <div class="form-row align-items-center">
                        <p id="loadDataText"></p>
                    </div>

                    <div class="mb-5">
                        <div class="card p-3 w-100">
                            <div class="card-header d-flex align-items-center flex-wrap">
                                <div class="card-title">
                                    Niagara資料
                                </div>
                            </div>
                            <div class="card-body row">
                                <div class="col-12">
                                    <!-- datatable start -->
                                    <div class="btn-group flex-wrap building_select"></div>
                                    <hr />
                                    <div class="btn-group flex-wrap systemMainType_select"></div>
                                    <hr />
                                    <div class="btn-group flex-wrap systemSubType_select"></div>
                                    <hr />
                                    <button class="btn btn-primary" id="search">搜尋</button>
                                    <button class="btn btn-primary" id="no_filter">全選</button>
                                    <table id="niagara_data_table" class="table table-bordered table-hover m-0 text-center">
                                        <thead class="thead-themed">
                                            <tr>
                                                <th>value</th>
                                                <th>tag_name</th>
                                                <th>point_name</th>
                                            </tr>
                                        </thead>
                                        <tbody class="raw_data">
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    <script>
        var buildingId, building;
        var rawDataImportTable;
        var ds;
        var dataInTable;

        var today = new Date();
        var date = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate();

        $(function () {
            ds = null;
            document.getElementById("Building_B").checked = true;

            projectName();
            rawDataImportTable = $("#niagara_data_table").DataTable({
                //paging: false,
                searching: false,
                destroy: true,
                "columns": [
                    {
                        "data": "value"
                    },
                    {
                        "data": "tag_name"
                    },
                    {
                        "data": "point_name"
                    },
                ],
                "ajax": {
                    "url": "/NiagaraDataSynchronize/RawDataList",
                    "type": "POST",
                    "dataSrc": function (rel) {
                        if (rel.code == "9999") {
                            toast_error(rel.msg);
                            document.getElementById('loadDataText').innerText = "載入資料出錯了!";
                            return;
                        }

                        var data = rel.data;
                        ds = $.extend(true, [], data);
                        $.each(data, function (i, v)
                        {
                            if (v.value.includes("$3"))
                            {
                                v.value = v.value.replace("$3", "");
                                v.tag_name = v.tag_name.replace("$3", "");
                                if (v.point_name != null) 
                                {
                                    v.point_name = v.point_name.replace("$3", "");
                                }
                            }
                        })
                        //console.log(ds)
                        if (data == null || data.length == 0) {
                            this.data = [];
                            document.getElementById('loadDataText').innerText = "";
                        }
                        else if(data.length > 0) { 
                            var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
                            var dateTime = date + ' ' + time;
                            document.getElementById('loadDataText').innerText = "共 " + rel.data.length + " 筆資料 \n" + dateTime;
                        }
                        dataInTable = data;
                        console.log("---", dataInTable);
                        return data;
                    }
                }
            });
        });

        //#region 載入Niagara資料
        function LoadData() {
            document.getElementById('loadDataText').innerText = "Loading...";
            buildingId = document.querySelector('input[name="Building"]:checked').value;
            if (buildingId == "B") {
                //building = "B1";
                rawDataImportTable.ajax.reload();
            }
        }
        //#endregion

        function SynchronizeData() {
            document.getElementById('loadDataText').innerText = "同步中...";
            if (ds.length > 0) {
                //比對資料，有差異的話，再同步到device等資料表
                var url_synchronize_data = "/NiagaraDataSynchronize/CompareData/";

                $.each(ds, function (i, v) {
                    v.building = building;
                })

                $.ajax({
                    method: "POST",
                    url: url_synchronize_data,
                    data: JSON.stringify(ds),
                    cache: false,
                    async: false,
                    contentType: "application/json; charset=UTF-8",
                    dataType: 'json',
                    success: function (rel) {
                        if (rel.code != "0000") {
                            toast_error(rel.msg);
                            document.getElementById('loadDataText').innerText = "比對資料出錯了!";
                            return;
                        }
                        SyncDevItem();
                        //var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
                        //var dateTime = date + ' ' + time;
                        //document.getElementById('loadDataText').innerText = "比對完成 \n" + dateTime;
                    },
                });
            }
            else {
                document.getElementById('loadDataText').innerText = "查無資料 無法比對！";
            }
        }

        function SyncDevItem()
        {
            //比對資料，有差異的話，再同步到device等資料表
            var url_synchronize_data = "/NiagaraDataSynchronize/RawDataDevItemList/";
            var url_synchronize_data_device_item = "/NiagaraDataSynchronize/DevIteComData/";
            let object = {};
            object.building = building;
            $.ajax({
                method: "POST",
                url: url_synchronize_data,
                cache: false,
                async: false,
                contentType: "application/json; charset=UTF-8",
                data: JSON.stringify(object),
                dataType: 'json',
                success: function (rel) {
                    if (rel.code != "0000") {
                        toast_error(rel.msg);
                        document.getElementById('loadDataText').innerText = "比對資料出錯了!";
                        return;
                    }

                    $.ajax({
                        method: "POST",
                        url: url_synchronize_data_device_item,
                        data: JSON.stringify(rel.data),
                        cache: false,
                        async: false,
                        contentType: "application/json; charset=UTF-8",
                        dataType: 'json',
                        success: function (rel) {
                            if (rel.code != "0000") {
                                toast_error(rel.msg);
                                document.getElementById('loadDataText').innerText = "比對資料出錯了!";
                                return;
                            }

                            console.log(rel);
                            var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
                            var dateTime = date + ' ' + time;
                            document.getElementById('loadDataText').innerText = "比對完成 \n" + dateTime;
                        },
                    })
                    var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
                    var dateTime = date + ' ' + time;
                    document.getElementById('loadDataText').innerText = "比對完成 \n" + dateTime;
                },
            });
        }

        function projectName()
        {
            $.post("/Variable/ProjectName", null, function (rel) {
                building = "B1";
                if (rel.code != "0000") {
                    toast_error(rel.msg);
                    return;
                }

                if (rel.data != null) {
                    building = rel.data.system_value.split('/')[1];
                    $(`label[for='Building_B']`).html(rel.data.system_key + building);
                }
                else
                {
                    $(`label[for='Building_B']`).html('三菱B1');
                }
            }, 'json');
        }

        let buildingValue, systemMainId, systemMainValue, systemSubId, systemSubValue;

        document.querySelector(".building_select").addEventListener("click", (e) => {
            buildingValue = e.target.dataset.value;
            $(".building_select .btn-info.active").removeClass('btn-info active')
            $(e.target).addClass('btn-info active');
        })
        document.querySelector(".systemSubType_select").addEventListener("click", (e) => {
            systemSubId = e.target.dataset.value;
            systemSubValue = e.target.dataset.systemValue;
            $(".systemSubType_select .btn-info.active").removeClass('btn-info active')
            $(e.target).addClass('btn-info active');
        })

        $(function () {
            // 產生所有棟別下拉式選單
            fetch("/BuildInfo/BuildInfoList", {
                method: "POST"
            }).then(res => res.json()).then(({ data }) => {
                const buildingElement = document.querySelector(".building_select");

                console.log(data);
                let str = "";
                data.forEach(({ full_name, building_tag
                }) => {
                    if (building_tag.includes("$3")) {
                        building_tag = building_tag.replace("$3", "");
                    }
                    str += `<button data-value=${building_tag} class='btn'>${full_name}</button>`;
                })
                buildingElement.innerHTML = str;
            });

            // 產生所有大類系統下拉式選單
            const systemMainTypeElement = document.querySelector(".systemMainType_select");
            let init_id = '';
            fetch("/SystemCategory/SystemMainList", {
                method: "POST"
            }).then(res => res.json()).then(({ data }) => {
                //console.log(data);
                init_id = data[0].id;
                //console.log(init_id);
                let str = "";
                data.forEach(({ id, system_key, system_value
                }) => {
                    str += `<button data-value=${id} data-system-value=${system_value} class='btn'>${system_key}</button>`;
                })
                systemMainTypeElement.innerHTML = str;
                FetchSystenSubList(init_id);
            });

            // 產生所有小類系統下拉式選單
            systemMainTypeElement.addEventListener("click", (e) => {
                systemMainId = e.target.dataset.value;
                systemMainValue = e.target.dataset.systemValue;
                $(".systemMainType_select .btn-info.active").removeClass('btn-info active')
                $(e.target).addClass('btn-info active');
                //console.log(value);

                FetchSystenSubList(systemMainId);
            })
        });

        function FetchSystenSubList(id) {
            var formData = new FormData();
            formData.append("id", parseInt(id));

            fetch("/SystemCategory/SystemSubList", {
                method: "POST",
                body: formData
            }).then(res => res.json()).then(({ data }) => {
                const systemSubTypeElement = document.querySelector(".systemSubType_select");

                //console.log(data);
                let str = "";
                data.forEach(({ id, system_key, system_value
                }) => {
                    str += `<button data-value=${id} data-system-value=${system_value} class='btn'>${system_key}</button>`;
                });
                systemSubTypeElement.innerHTML = str;
            })
        }

        // 查詢功能，查棟別跟大類
        const searchButton = document.querySelector("#search");
        searchButton.addEventListener("click", (e) => {
            //const buildingValue = document.querySelector(".building_select").value;
            //const systemMainId = document.querySelector(".systemMainType_select").value;
            //const systemMainValue = document.querySelector(`option[value='${systemMainId}']`).getAttribute("data-system-value");
            //const systemSubId = document.querySelector(".systemSubType_select").value;
            //const systemSubValue = document.querySelector(`option[value='${systemSubId}']`).getAttribute("data-system-value");

            console.log("111", buildingValue, systemMainValue);

            const table_body = document.querySelector('.raw_data');
            let rawdata_table_body = '';
            let count = 1;
            //dataInTable.forEach(({ tag_name, value, point_name
            //}) => {
            //    console.log("111", buildingValue, systemMainValue, systemSubValue);
            //    console.log("222", tag_name.includes(`_${buildingValue}_`), tag_name.includes(`_${systemMainValue}_`), tag_name.includes(`_${systemSubValue}_`));
            //    console.log("333", tag_name, value);
            //    console.log("444", rawdata_table_body);

            //    if (tag_name.includes(`_${buildingValue}_`) && tag_name.includes(`_${systemMainValue}_`)) {
            //        console.log("333", tag_name, value);
            //        let odd_or_even = '';
            //        if (count % 2 == 0) {
            //            odd_or_even = 'odd';
            //        } else {
            //            odd_or_even = 'even';
            //        }

            //        rawdata_table_body += `<tr role="row" class="${odd_or_even}"><td class="sorting_1 dtr-control">${value}</td><td>${tag_name}</td><td>${point_name}</td></tr>`;
            //    }

            //});
            //table_body.innerHTML = rawdata_table_body;
            let search_str = `_${buildingValue}_${systemMainValue}_${systemSubValue}_`;
            console.log("$$$", search_str, dataInTable.filter(({ tag_name }) => tag_name.includes(search_str)))
             $("#niagara_data_table").DataTable({
                //paging: false,
                searching: false,
                destroy: true,
                "columns": [
                    {
                        "data": "value"
                    },
                    {
                        "data": "tag_name"
                    },
                    {
                        "data": "point_name"
                    },
                ],
                data: dataInTable.filter(({ tag_name }) => tag_name.includes(search_str))
            })
        })

        const noFilterButton = document.querySelector("#no_filter");
        noFilterButton.addEventListener("click", (e) => {
            $(".building_select .btn-info.active").removeClass('btn-info active');
            $(".systemMainType_select .btn-info.active").removeClass('btn-info active');
            $(".systemSubType_select .btn-info.active").removeClass('btn-info active');
            $("#niagara_data_table").DataTable({
                //paging: false,
                searching: false,
                destroy: true,
                "columns": [
                    {
                        "data": "value"
                    },
                    {
                        "data": "tag_name"
                    },
                    {
                        "data": "point_name"
                    },
                ],
                data: dataInTable
            })
        })

    </script>
}