ibms-dome/Backend/Views/BuildInfo/Index.cshtml

@{
    ViewData["MainNum"] = "1";
    ViewData["SubNum"] = "2";
    ViewData["Title"] = "區域設定";
}

<ol class="breadcrumb page-breadcrumb">
    <li class="breadcrumb-item"><a href="javascript:void(0);">區域資料管理</a></li>
    <li class="breadcrumb-item active">區域基本資料</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="subheader">
                            <h1 class="subheader-title">
                                <img src="img/asus.png" id="company-logo"><span id="company-name">華碩電腦</span>
                            </h1>
                        </div>*@
                    <ul class="nav nav-tabs" id="tabs" role="tablist">
                        <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#tab-build-info" role="tab"><span class="hidden-sm-down ml-1">區域基本資料</span></a></li>
                        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-build-floor" role="tab"><span class="hidden-sm-down ml-1">樓層設定</span></a></li>
                    </ul>
                    <div class="tab-content p-3">
                        <div class="tab-pane fade show active" id="tab-build-info" role="tabpanel" aria-labelledby="tab-build-info">
                            @Html.Partial("_BuildInfo")
                        </div>

                        <div class="tab-pane fade" id="tab-build-floor" role="tabpanel" aria-labelledby="tab-build-floor">
                            @Html.Partial("_BuildFloor")
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@section Scripts {
    <script>
        var buildInfoTable, buildFloorTable;
        var selected_build_guid;
        var selected_build_guid_top = "";
        var selected_build_guid_top_name;
        var selected_floor_guid = "";

        //#region 區域基本資料 document ready
        $(function () {
            //#region 區域基本資料 DataTable
            buildInfoTable = $("#buildInfo_table").DataTable({
                "rowReorder": {
                    "dataSrc": "priority"
                },
                "columns": [
                    {
                        "data": "building_tag",
                        "render": function (data, type, row, meta) {
                            return meta.row + 1;
                        }
                    },
                    {
                        "data": "priority",
                        "className": "reorder",
                        "visible": false
                    },
                    {
                        "data": "full_name"
                    },
                    {
                        "data": "ip_address"
                    },
                    {
                        "data": "ip_port"
                    },
                    {
                        "data": "floorNum"
                    },
                    {
                        "data": "created_at"
                    },
                    {
                        "data": null,
                        "defaultContent": '<button class="btn btn-primary edit-btn">修改</button> <button class="btn btn-danger del-btn">刪除</button>'
                    }
                ],
                //"order": [[2, "desc"]],
                'createdRow': function (row, data, dataIndex) {
                    $(row).attr('data-guid', data.building_tag);
                },
                "ajax": {
                    "url": "/BuildInfo/BuildInfoList",
                    "type": "POST",
                    "dataSrc": function (rel) {
                        if (rel.code == "9999") {
                            toast_error(rel.msg);
                            return;
                        }

                        data = rel.data;

                        if (data == null || data.length == 0) {
                            this.data = [];
                        }

                        //樓層設定上方選單
                        $("#BuildList").empty();
                        $.each(data, function (key, value) {
                            $("#BuildList").append(`<button type="button" class="btn btn-outline-success waves-effect waves-themed ml-2 mb-2 btn-station" id="${value.building_tag}" onclick="clickBuilding('${value.building_tag}')">${value.full_name}</button>`);
                            @*if (key == 0) {
                                selected_build_guid_top_name = value.full_name;
                                $("#BuildList").append(`<button type="button" class="btn btn-success waves-effect waves-themed ml-2 mb-2 btn-station" id="${value.building_tag}" onclick="clickBuilding('${value.building_tag}')">${value.full_name}</button>`);
                            }
                            else {
                                $("#BuildList").append(`<button type="button" class="btn btn-outline-success waves-effect waves-themed ml-2 mb-2 btn-station" id="${value.building_tag}" onclick="clickBuilding('${value.building_tag}')">${value.full_name}</button>`);
                            }*@
                        });

                        return data;
                    }
                }
            });
            //#endregion

            buildInfoTable.on("row-reorder", function (e, diff, edit) {
                var exchangeList = [];
                for (var i = 0, len = diff.length; i < len; i++) {
                    var rowData = buildInfoTable.row(diff[i].node).data();

                    var obj = {
                        building_tag: rowData.building_tag,
                        priority: diff[i].newData
                    }

                    exchangeList.push(obj);
                }

                var url = "/BuildInfo/ChangeBuildInfoPriority";
                var send_data = {
                    BuildInfoPriorities: exchangeList
                }

                $.post(url, send_data, function (rel) {
                    if (rel.code != "0000") {
                        if (rel.code == "9999") {
                            toast_error(rel.msg);
                        }
                        else {
                            toast_warning(rel.msg);
                        }
                        return;
                    }
                    else {
                        toast_ok(rel.msg);
                        buildInfoTable.ajax.reload(null, false);
                    }
                }, "json");
            });

            //#region 修改區域基本資料
            $('#buildInfo_table').on("click", "button.edit-btn", function () {
                selected_build_guid = $(this).parents('tr').attr('data-guid');
                $('#build-modal .modal-title').html("區域基本資料 - 修改");

                $('#build_name_modal').val($(this).parents('tr')[0].children[1].innerText);
                $('#ip_address_modal').val($(this).parents('tr')[0].children[2].innerText);
                $('#ip_port_modal').val($(this).parents('tr')[0].children[3].innerText);

                $('#build-modal').modal();
            });
            //#endregion

            //#region 刪除區域基本資料
            $('#buildInfo_table').on("click", "button.del-btn", function () {
                selected_build_guid = $(this).parents('tr').attr('data-guid');
                Swal.fire(
                    {
                        title: "刪除",
                        text: "你確定是否刪除此筆資料?",
                        type: "warning",
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonText: "是",
                        cancelButtonText: "否"
                    }).then(function (result) {
                        if (result.value) {
                            var url = "/BuildInfo/DeleteOneBuild/";
                            var send_data = {
                                guid: selected_build_guid
                            }
                            $.post(url, send_data, function (rel) {
                                if (rel.code == "9999") {
                                    toast_error(rel.msg);
                                }
                                else if (rel.code == "9997") {
                                    var htnl = rel.msg + "<br>"
                                    Swal.fire(
                                        {
                                            title: "刪除失敗",
                                            icon: 'warning',
                                            html: htnl,
                                        });
                                }
                                else {
                                    toast_ok(rel.msg);
                                    buildInfoTable.ajax.reload(null, false);
                                }
                            }, 'json');
                        }
                    });
            });
            //#endregion
        });
        //#endregion

        //#region 新增區域基本資料
        function AddBuild() {
            selected_build_guid = "0";
            BuildInfoValidate.resetForm();
            $("#build-modal .modal-title").html("區域基本資料 - 新增");
            $("#build-form").trigger("reset");

            $("#build-modal").modal();
        }
        //#endregion

        //#region 區域表單驗證
        var BuildInfoValidate = $("#build-form").validate({
            rules: {
                build_name_modal: {
                    required: true,
                    maxlength: 50,
                    filterspace: true
                },
                ip_address_modal: {
                    required: true,
                    maxlength: 50,
                    filterspace: true
                },
                ip_port_modal: {
                    required: true,
                    maxlength: 50,
                    filterspace: true
                }
            }
        });
        //#endregion

        //#region 儲存區域基本資料
        function SaveBuild() {
            if ($("#build-form").valid()) {
                $("#save-building-btn").html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>').attr("disabled", true);
                var url = "/BuildInfo/SaveBuildInfo";
                var send_data = {
                    building_tag: selected_build_guid,
                    Full_name: $('#build_name_modal').val(),
                    Ip_address: $('#ip_address_modal').val(),
                    Ip_port: $('#ip_port_modal').val()
                }

                $.post(url, send_data, function (rel) {
                    $("#save-building-btn").html('確定').attr("disabled", false);
                    if (rel.code != "0000") {
                        if (rel.code == "9999") {
                            toast_error(rel.msg);
                        }
                        else {
                            toast_warning(rel.msg);
                        }
                        return;
                    }
                    else {
                        toast_ok(rel.msg);
                        buildInfoTable.ajax.reload(null, false);
                        $('#build-modal').modal('hide');
                        return;
                    }
                }, 'json')
                .fail(function (xhr, status, error) {
                    $("#save-building-btn").html('確定').attr("disabled", false);
                });
            }
        }
        //#endregion

    </script>
    <script>
        //#region 樓層設定 document ready
        $(function () {

            $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                var target = $(e.target).attr("href") // activated tab
                if (target == "#tab-build-floor") {
                    $("#BuildList").find("button").first().click();
                }
            });

            //#region 樓層設定 DataTable
            buildFloorTable = $("#buildFloor_table").DataTable({
                "rowReorder": {
                    "dataSrc": "priority"
                },
                "pageLength": 50,
                "columns": [
                    {
                        "data": null,
                        "render": function (data, type, row, meta) {
                            return meta.row + 1;
                        }
                    },
                    {
                        "data": "priority",
                        "className": "reorder",
                        "visible": false
                    },
                    {
                        "data": null,
                        "render": function (data, type, row, meta) {
                            return selected_build_guid_top_name;
                        }
                    },
                    {
                        "data": "full_name"
                    },
                    {
                        "data": "initMapName"
                    },
                    {
                        "data": "created_at"
                    },
                    {
                        "data": null,
                        "defaultContent": '<button class="btn btn-primary edit-btn">修改</button> <button class="btn btn-danger del-btn">刪除</button>'
                    }
                ],
                @*"order": [[1, "desc"]],*@
                'createdRow': function (row, data, dataIndex) {
                    $(row).attr('data-guid', data.floor_guid);
                },
                "ajax": {
                    "url": "/BuildInfo/BuildFloorList",
                    "type": "POST",
                    "data": function (d) {
                        d.BuildGuid = selected_build_guid_top;
                    },
                    "dataSrc": function (rel) {
                        if (rel.code == "9999") {
                            toast_error(rel.msg);
                            return;
                        }

                        data = rel.data;

                        if (data == null || data.length == 0) {
                            this.data = [];
                        }

                        return data;
                    }
                }
            });
            //#endregion

            //#region 修改樓層排序
            buildFloorTable.on("row-reorder", function (e, diff, edit) {
                var exchangeList = [];
                for (var i = 0, len = diff.length; i < len; i++) {
                    var rowData = buildFloorTable.row(diff[i].node).data();

                    var obj = {
                        floor_guid: rowData.floor_guid,
                        priority: diff[i].newData
                    }

                    exchangeList.push(obj);
                }

                var url = "/BuildInfo/ChangeFloorPriority";
                var send_data = {
                    FloorPriorities: exchangeList
                }

                $.post(url, send_data, function (rel) {
                    if (rel.code != "0000") {
                        if (rel.code == "9999") {
                            toast_error(rel.msg);
                        }
                        else {
                            toast_warning(rel.msg);
                        }
                        return;
                    }
                    else {
                        toast_ok(rel.msg);
                        buildFloorTable.ajax.reload(null, false);
                    }
                }, "json");
            });
            //#endregion

            //#region 修改樓層設定
            $('#buildFloor_table').on("click", "button.edit-btn", function () {
                selected_floor_guid = $(this).parents('tr').attr('data-guid');
                $('#floor-modal .modal-title').html("樓層設定 - 修改");

                //取得單一樓層設定
                var url = "/BuildInfo/GetOneBuildFloor";

                var send_data = {
                    guid: selected_floor_guid
                }

                $.post(url, send_data, function (rel) {
                    if (rel.code != "0000") {
                        if (rel.code == "9999") {
                            toast_error(rel.msg);
                        }
                        else {
                            toast_warning(rel.msg);
                        }
                        return;
                    }
                    else {
                        $("#BuildName").html(selected_build_guid_top_name);
                        $("#floor_name_modal").val(rel.data.full_name);
                        @*$("#map_file_preview_modal").attr("data-original", rel.data.mapUrl);*@

                        $('#floor-modal').modal();
                    }
                }, 'json');
            });
            //#endregion

            //#region 刪除樓層設定
            $('#buildFloor_table').on("click", "button.del-btn", function () {
                selected_floor_guid = $(this).parents('tr').attr('data-guid');
                Swal.fire(
                    {
                        title: "刪除",
                        text: "你確定是否刪除此筆資料?",
                        type: "warning",
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonText: "是",
                        cancelButtonText: "否"
                    }).then(function (result) {
                        if (result.value) {
                            //取得單一系統管理員
                            var url = "/BuildInfo/DeleteOneFloor/";
                            var send_data = {
                                guid: selected_floor_guid
                            }
                            $.post(url, send_data, function (rel) {
                                if (rel.code != "0000") {
                                    if (rel.code == "9999") {
                                        toast_error(rel.msg);
                                    }
                                    else if (rel.code == "9997") {
                                        var htnl = rel.msg + "<br>" + rel.data
                                        Swal.fire(
                                            {
                                                title: "刪除失敗",
                                                icon: 'warning',
                                                html: htnl,
                                            });
                                    }
                                    else {
                                        toast_warning(rel.msg);
                                    }
                                    return;
                                }
                                else {
                                    toast_ok(rel.msg);
                                    floorTableReload();
                                    return;
                                }
                            }, 'json');
                        }
                    });
            });
        //#endregion
        });
        //#endregion

        //#region 樓層DataTable Reload
        function floorTableReload() {
            buildFloorTable.ajax.reload(null, false);
        }
        //#endregion

        //#region 樓層設定 - 選擇區域
        function clickBuilding(guid) {
            selected_build_guid_top = guid;
            selected_build_guid_top_name = $(`#${guid}`).text();

            if ($('#BuildList').find('.btn-station').hasClass("btn-success")) {
                $('#BuildList').find('.btn-station').removeClass("btn-success").addClass("btn-outline-success");
            }
            $(`#${guid}`).removeClass("btn-outline-success").addClass("btn-success");

            floorTableReload();
        }
        //#endregion

        //#region 新增樓層設定
        function AddFloor() {
            selected_floor_guid = "";
            FloorValidate.resetForm();
            $("#floor-modal .modal-title").html("樓層設定 - 新增");
            $("#floor-form").trigger("reset");

            $("#BuildName").html(selected_build_guid_top_name);

            $("#floor-modal").modal();
        }
        //#endregion

        //#region 樓層設定表單驗證
        var FloorValidate = $("#floor-form").validate({
            rules: {
                floor_name_modal: {
                    required: true,
                    maxlength: 50,
                    filterspace: true
                },
                map_file_modal: {
                    accept: "image/svg+xml"
                }
            }
        });

        //驗證是否有上傳
        jQuery.validator.addMethod("fileUpload", function (value, element) {
            var str = value;
            var result = false;
            if ($("#map_file_modal")[0].files.length > 0) {
                result = true;
            }
            else {
                result = false;
            }
            return result;
        }, "請選擇檔案");

        //#endregion

        //#region 儲存樓層設定
        function SaveFloor() {
            if ($("#floor-form").valid()) {

                $("#save-floor-btn").html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>').attr("disabled", true);

                var url = "/BuildInfo/SaveBuildFloor";
                var formData = new FormData();

                maps = $('#map_file_modal')[0].files

                formData.append("Floor_guid", selected_floor_guid);
                formData.append("building_tag", selected_build_guid_top);
                formData.append("Full_name", $('#floor_name_modal').val());
                if (maps.length > 0) {

                    var file_names = maps[0].name.split(".")

                    formData.append("MapFile", maps[0])
                    formData.append("InitMapName", maps[0].name.replace("." + file_names[file_names.length - 1], ""));
                }

                $.ajax({
                    type: "POST",
                    url: url,
                    data: formData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function (rel) {
                        $("#save-floor-btn").html('確定').attr("disabled", false);
                        if (rel.code != "0000") {
                            if (rel.code == "9999") {
                                toast_error(rel.msg);
                            }
                            else {
                                toast_warning(rel.msg);
                            }
                            return;
                        }
                        else {
                            toast_ok(rel.msg);
                            floorTableReload();
                            $('#floor-modal').modal('hide');
                            return;
                        }
                    },
                    fail: function (jqXHR, textStatus, errorThrown) {
                        $("#save-floor-btn").html('確定').attr("disabled", false);
                    }
                });
            }
        }
        //#endregion

        //#region 變更樓層平面圖
        function changeImage(input) {
            $(`#map_file_preview_modal`).attr("data-src", window.URL.createObjectURL(input.files[0]));
        }
        //#endregion
    </script>
}