<%@ Page Title="" Language="C#" MasterPageFile="~/JobSite/JobSiteMasterPage.master" AutoEventWireup="true" CodeFile="JobsiteAutoCreateConfig.aspx.cs" Inherits="JobsiteAutoCreateConfig" %>


<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <style type="text/css">
        ::-ms-clear, ::-ms-reveal {
            display: none;
        }

        .edit-content table {
            border-collapse: collapse;
            width: 100%;
        }

            .edit-content table td.label {
                /*width: 200px;*/
                text-align: right;
                padding-right: 10px;
                line-height: 24px;
                height: 24px;
                vertical-align: top;
            }

            .edit-content table td input,
            .edit-content table td textarea {
                border: 1px solid #a9a9a9;
                width: 320px;
                height: 18px;
                padding: 1px;
            }

                .edit-content table td input[type="checkbox"] {
                    border: none;
                }

                .edit-content table td input[type="radio"] {
                    border: none;
                    width: unset;
                    height: unset;
                }

            .edit-content table td textarea {
                height: 100px;
                resize: none;
                /*max-width: 200px;*/
            }

        .dialog, .data-column-header-filter-bg, .data-column-header-filter-panel {
            z-index: 2;
        }
    </style>

    <script src="<%=GetFileUrlWithVersion("../js/assetselector.js")%>" type="text/javascript"></script>
    <script type="text/javascript">

        _network.jobsitequery = function (method, param, callback, error, nolog) {
            _network.request("JobSite/JobSiteManage.aspx?tp=ashx", -1, method, param, callback, error, nolog);
        }
        var dialogAUAssets;
        $(function () {
            InitGridSelectedMachines();
            InitGridAvailableAssetTypes();
            InitGridSelectedAssetTypes();
            dialogAUAssets = new $assetselector('dialog_machines');
            dialogAUAssets.onDialogClosed = function () {
                showmaskbg(false);
            };
            dialogAUAssets.onOK = function (source) {
                var items = [];
                var itemids = [];
                for (var i = 0; i < source.length; i++) {
                    var it = source[i].Values;
                    if (it.Selected) {
                        items.push({
                            Values: {
                                AssetId: it.Id,
                                VIN: it.VIN,
                                Name: it.Name,
                                MakeName: it.MakeName,
                                ModelName: it.ModelName,
                                TypeName: it.TypeName
                            }
                        });
                        itemids.push(it.Id);
                    }
                }
                grid_dtassets.setData(grid_dtassets.innerSource.concat(items));
                doSave(0, itemids);
                showmaskbg(false);
            };

            $('#dialog_assettype').prop('iframe', true).dialog(function () {
                showmaskbg(false);
            });
            $("#txt_assettype_key").keypress(onJobsiteKeyPress);

            //function resizeContent() {
            //    $('#divcontent').css('height', $(window).height() - $('#divcontent').offset().top - 4);

            //    //$("#selectedmachinelist").css("height", $(window).height() - $("#selectedmachinelist").offset().top - 4);
            //    //grid_dtag && grid_dtag.resize();
            //    //$("#selectedassettypelist").css("height", $(window).height() - $("#selectedassettypelist").offset().top - 4);
            //    //grid_dtsg && grid_dtsg.resize();
            //}

            //window.onresize = resizeContent;
            //resizeContent();

            getConfigData();
        });

        var _selectedMachines = [];
        var allAssetTypes = null;
        var _selectedAssetTypes = [];
        function getConfigData() {
            _selectedMachines = [];
            _selectedAssetTypes = [];

            grid_dtassets.setData([]);
            grid_dtat.setData([]);

            GetJobsiteAutoCreateItems();
        }

        function init() {
            getConfigData();
        }


        //**************************************Asset(s)****************************************************//
        var grid_dtassets;
        function InitGridSelectedMachines() {
            grid_dtassets = new GridView('#selectedmachinelist');
            grid_dtassets.lang = {
                all: GetTextByKey("P_GRID_ALL", "(All)"),
                ok: GetTextByKey("P_GRID_OK", "OK"),
                reset: GetTextByKey("P_GRID_RESET", "Reset")
            };
            var list_columns = [
                { name: 'VIN', caption: GetTextByKey("P_UM_SN", "SN"), valueIndex: 'VIN', css: { 'width': 160, 'text-align': 'left' } },
                { name: 'Name', caption: GetTextByKey("P_UM_NAME", "Name"), valueIndex: 'Name', css: { 'width': 160, 'text-align': 'left' } },
                { name: 'MakeName', caption: GetTextByKey("P_UM_MAKE", "Make"), valueIndex: 'MakeName', css: { 'width': 90, 'text-align': 'left' } },
                { name: 'ModelName', caption: GetTextByKey("P_UM_MODEL", "Model"), valueIndex: 'ModelName', css: { 'width': 90, 'text-align': 'left' } },
                { name: 'TypeName', caption: GetTextByKey("P_UM_ASSETSTYPE", "Type"), valueIndex: 'TypeName', css: { 'width': 170, 'text-align': 'left' } }
            ];
            var columns = [
                {
                    // checkbox
                    name: 'check',
                    key: 'selected',
                    width: 45,
                    align: 'center',
                    sortable: false,
                    allcheck: true,
                    type: 3
                }
            ];
            // head
            for (var hd in list_columns) {
                var col = {};
                col.name = list_columns[hd].name;
                col.caption = list_columns[hd].caption;
                col.visible = true;
                col.sortable = true;
                col.width = list_columns[hd].css.width;
                col.align = list_columns[hd].css["text-align"]
                col.key = list_columns[hd].valueIndex;
                col.allowFilter = col.name === 'TypeName';
                col.styleFilter = function (item) {
                    if (item.Highlight)
                        return { 'background-color': 'yellow' };
                }
                columns.push(col);
            }

            grid_dtassets.canMultiSelect = true;
            grid_dtassets.columns = columns;
            grid_dtassets.init();
        }

        function showSelectedMachine(data) {
            var rows = [];
            for (var i = 0; i < data.length; i++) {
                var r = data[i];
                var fr = { Values: r };
                rows.push(fr);
            }

            grid_dtassets.setData(rows);
        }

        // 获取已选中的Assets和Asset Types
        function GetJobsiteAutoCreateItems() {
            $("#dialogmask").show();
            showloading(true);
            _network.jobsitequery('GetJobsiteAutoCreateItems', '', function (data) {
                showloading(false);
                if (typeof data === "string") {
                    showAlert(data, GetTextByKey("P_JS_CONFIGURATION", "Configuration"));
                    return;
                }
                _selectedMachines = [];
                _selectedAssetTypes = [];

                for (var i in data) {
                    var item = data[i];
                    if (item.Criteria == 0)
                        _selectedMachines.push(item);
                    else
                        _selectedAssetTypes.push(item);
                }
                showSelectedMachine(_selectedMachines);
                showSelectedAssetType(_selectedAssetTypes);

                $("#dialogmask").hide();
            }, function (e) {
                showmaskbg(true);
                $("#dialogmask").hide();
            });
        }

        function OnAssetAdd() {
            showmaskbg(true);
            dialogAUAssets.exceptSource = grid_dtassets.innerSource.map(function (s) {
                return s.Values.AssetId;
            });
            dialogAUAssets.showSelector();
        }

        function OnMachineDelete() {
            showConfirm(GetTextByKey("P_JS_AREYOUSUREYOUWANTTODELETETHESESELECTEDASSETS", 'Are you sure you want to delete these selected asset(s)?'), GetTextByKey("P_JS_CONFIGURATION", "Configuration"), function () {
                deleteitems = [];
                for (var i = grid_dtassets.innerSource.length - 1; i >= 0; i--) {
                    var s = grid_dtassets.innerSource[i].Values;
                    if (s.selected) {
                        grid_dtassets.innerSource.splice(i, 1);
                        deleteitems.push(s.AssetId);
                    }
                }
                if (grid_dtassets.source != null) {
                    for (var j = grid_dtassets.source.length - 1; j >= 0; j--) {
                        var l = grid_dtassets.source[j].Values;
                        if (l.selected) {
                            grid_dtassets.source.splice(j, 1);
                        }
                    }
                }
                grid_dtassets.reset();
                if (deleteitems.length > 0)
                    doDelete(0, deleteitems);
            });
        }

        //**************************************Asset Type(s)****************************************************//
        var grid_dtat;
        function InitGridSelectedAssetTypes() {
            grid_dtat = new GridView('#selectedassettypelist');
            grid_dtat.lang = {
                all: GetTextByKey("P_GRID_ALL", "(All)"),
                ok: GetTextByKey("P_GRID_OK", "OK"),
                reset: GetTextByKey("P_GRID_RESET", "Reset")
            };
            var list_columns = [
                { name: 'Name', caption: GetTextByKey("P_UM_NAME", "Name"), valueIndex: 'Name', css: { 'width': 380, 'text-align': 'left' } }
            ];

            var columns = [
                {
                    // checkbox
                    name: 'check',
                    key: 'selected',
                    width: 45,
                    align: 'center',
                    sortable: false,
                    allcheck: true,
                    type: 3
                }
            ];
            // head
            for (var hd in list_columns) {
                var col = {};
                col.name = list_columns[hd].name;
                col.caption = list_columns[hd].caption;
                col.visible = true;
                col.sortable = true;
                col.width = list_columns[hd].css.width;
                col.align = list_columns[hd].css["text-align"]
                col.key = list_columns[hd].valueIndex;
                columns.push(col);
            }
            grid_dtat.canMultiSelect = true;
            grid_dtat.columns = columns;
            grid_dtat.init();
        }

        function showSelectedAssetType(data) {
            var rows = [];
            for (var i = 0; i < data.length; i++) {
                var r = data[i];
                var fr = { Values: r };
                rows.push(fr);
            }

            grid_dtat.setData(rows);
        }

        var grid_dtnjs;
        function InitGridAvailableAssetTypes() {
            grid_dtnjs = new GridView('#availableassettypelist');
            grid_dtnjs.lang = {
                all: GetTextByKey("P_GRID_ALL", "(All)"),
                ok: GetTextByKey("P_GRID_OK", "OK"),
                reset: GetTextByKey("P_GRID_RESET", "Reset")
            };
            var list_columns = [
                { name: 'Name', caption: GetTextByKey("P_UM_NAME", "Name"), valueIndex: 'Name', css: { 'width': 380, 'text-align': 'left' } }
            ];

            var columns = [
                {
                    // checkbox
                    name: 'check',
                    key: 'selected',
                    width: 45,
                    align: 'center',
                    sortable: false,
                    allcheck: true,
                    type: 3
                }
            ];
            // head
            for (var hd in list_columns) {
                var col = {};
                col.name = list_columns[hd].name;
                col.caption = list_columns[hd].caption;
                col.visible = true;
                col.sortable = true;
                col.width = list_columns[hd].css.width;
                col.align = list_columns[hd].css["text-align"]
                col.key = list_columns[hd].valueIndex;
                columns.push(col);
            }
            grid_dtnjs.canMultiSelect = true;
            grid_dtnjs.columns = columns;
            grid_dtnjs.init();
            grid_dtnjs.rowdblclick = function (rowindex) {
                var rowdata = grid_dtnjs.source[rowindex];
                if (rowdata) {
                    var AssetType = rowdata.Values;

                }
            };

            grid_dtnjs.selectedrowchanged = function (rowindex) {
                var rowdata = grid_dtnjs.source[rowindex];
                if (rowdata) {
                }
            }
        }

        function showAvailableAssetType(data) {
            var rows = [];
            for (var i = 0; i < data.length; i++) {
                var r = data[i];
                var fr = { Values: r };
                rows.push(fr);
            }

            grid_dtnjs.setData(rows);
        }

        function onJobsiteKeyPress(e) {
            if (e.keyCode === 13) {
                GetAssetTypeList();
            }
        };

        function GetAssetTypeList() {
            if (allAssetTypes)
                filterAvailableAssetTypes();
            else {
                $("#assettypedialogmask").show();
                _network.jobsitequery('GetMachineTypes', '', function (data) {
                    if (typeof data === "string") {
                        showAlert(data, GetTextByKey("P_JS_CONFIGURATION", 'Configuration'));
                        return;
                    }
                    allAssetTypes = data;
                    filterAvailableAssetTypes();
                    $("#assettypedialogmask").hide();
                }, function (e) {
                    $("#assettypedialogmask").hide();
                });
            }
        }

        function filterAvailableAssetTypes() {
            var selected = [];
            for (var i = 0; i < _selectedAssetTypes.length; i++) {
                var m = _selectedAssetTypes[i];
                selected.push(m.AssetId || m.ID);
            }
            var filter = $('#txt_assettype_key').val().toLowerCase();

            var _availableAssetTypes = [];
            if (allAssetTypes) {
                for (var i = 0; i < allAssetTypes.length; i++) {
                    var m = allAssetTypes[i];
                    if ((filter == "" || m.Name.toLowerCase().indexOf(filter) >= 0)
                        && $.inArray(m.ID, selected) < 0) {
                        m.selected = false;
                        _availableAssetTypes.push(m);
                    }
                }
            }
            showAvailableAssetType(_availableAssetTypes);
        }

        function OnAssetTypeAdd() {
            $('#txt_assettype_key').val('');
            $('#dialog_assettype .dialog-title span.title').text(GetTextByKey("P_JS_SELECTASSETTYPES", 'Select Asset Types'));
            showmaskbg(true);
            $('#dialog_assettype')
                .attr('act', 'edit')
                .css({
                    'top': (document.documentElement.clientHeight - $('#dialog_assettype').height()) / 3,
                    'left': (document.documentElement.clientWidth - $('#dialog_assettype').width()) / 2
                })
                .showDialogfixed();

            GetAssetTypeList();
        }

        function OnSelectAssetTypes() {
            var itemids = [];
            for (var i = 0; i < grid_dtnjs.source.length; i++) {
                var m = grid_dtnjs.source[i].Values;
                if (m.selected) {
                    m.selected = false;
                    _selectedAssetTypes.push(m);
                    itemids.push(m.ID);
                }
            }
            showSelectedAssetType(_selectedAssetTypes);
            doSave(1, itemids);

            $('#dialog_assettype').hideDialog();
        }

        function OnAssetTypeDelete() {
            showConfirm(GetTextByKey("P_JS_AREYOUSUREYOUWANTTODELETETHESESELECTEDASSETTYPES", 'Are you sure you want to delete these selected asset type(s)?'), GetTextByKey("P_JS_CONFIGURATION", 'Configuration'), function () {
                _selectedAssetTypes = [];
                var deleteitems = [];
                if (grid_dtat.source != null) {
                    for (var j = grid_dtat.source.length - 1; j >= 0; j--) {
                        var l = grid_dtat.source[j].Values;
                        if (l.selected) {
                            grid_dtat.source.splice(j, 1);
                            deleteitems.push(l.AssetId || l.ID);
                        }
                        else {
                            _selectedAssetTypes.push(l);
                        }
                    }
                }
                grid_dtat.reset();

                if (deleteitems.length > 0)
                    doDelete(1, deleteitems);
            });
        }

        function doDelete(criteria, items) {
            var alerttitle = GetTextByKey("P_JS_CONFIGURATION", "Configuration");

            items = JSON.stringify(items);
            var param = JSON.stringify([criteria, items]);
            param = htmlencode(param);
            _network.jobsitequery("DeleteJobsiteAutoCreateItems", param, function (data) {
                if (data !== "OK") {
                    showAlert(data, alerttitle);
                } else {
                    if (criteria == 0)
                        showAlert(GetTextByKey("P_JS_DELETEDASSETSSUCCESSFULLY", "Deleted asset(s) successfully."), alerttitle);
                    else
                        showAlert(GetTextByKey("P_JS_DELETEDASSETTYPESSUCCESSFULLY", "Deleted asset type(s) successfully."), alerttitle);
                }
            }, function (err) {
            });
        }

        function doSave(criteria, items) {
            var alerttitle = GetTextByKey("P_JS_CONFIGURATION", "Configuration");

            items = JSON.stringify(items);
            var param = JSON.stringify([criteria, items]);
            param = htmlencode(param);
            showloading(true);
            _network.jobsitequery("SaveJobsiteAutoCreateItems", param, function (data) {
                showloading(false);
                if (data !== "OK") {
                    showAlert(data, alerttitle);
                } else {
                    if (criteria == 0)
                        showAlert(GetTextByKey("P_JS_ADDEDASSETSSUCCESSFULLY", "Added asset(s) successfully."), alerttitle);
                    else
                        showAlert(GetTextByKey("P_JS_ADDEDASSETTYPESSUCCESSFULLY", "Added asset type(s) successfully."), alerttitle);
                }
            }, function (err) {
                showloading(false);
            });
        }

        function OnExit() {
            window.parent.CloseACConfigDialog();
        }

    </script>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <div id="mask_bg" style="display: none; z-index: 1">
        <div class="loading c-spin"></div>
    </div>
    <div>
        <div id="dialogmask" class="maskbg" style="display: none; z-index: 1;">
            <div class="loading_icon icon c-spin"></div>
        </div>
        <div class="function_title">
            <span class="sbutton iconexit" onclick="OnExit();" data-lgid="P_JS_EXIT">Exit</span>
        </div>
        <div class="clear"></div>
        <div class="content_main" id="divcontent" style="overflow: auto;">
            <div class="edit-content">
                <div style="font-size: 14px; padding: 10px;">
                    <span data-lgid="P_JS_AUTOCREATEJOBSITETIPS">Auto-Create Jobsites Based Upon the Behavior of the Following Assets and Asset Types</span>
                </div>
                <div id="div_container">
                    <div style="display: inline-block;">
                        <div class="machine_filter" style="margin: 9px 6px 5px">
                            <span class="title" data-lgid="P_UM_ASSETASS">Asset(s)</span>
                            <span class="sbutton iconadd" onclick="OnAssetAdd()" data-lgid="P_UM_ADD">Add</span>
                            <span class="sbutton icondelete" onclick="OnMachineDelete()" data-lgid="P_UM_DELETE">Delete</span>
                        </div>
                        <div id="selectedmachinelist" style="height: 200px; width: 760px;"></div>
                    </div>

                    <div>
                        <div class="machine_filter" style="margin: 9px 6px 5px">
                            <span class="title" data-lgid="P_JS_ASSETTYPES">Asset Type(s)</span>
                            <span class="sbutton iconadd" onclick="OnAssetTypeAdd()" data-lgid="P_UM_ADD">Add</span>
                            <span class="sbutton icondelete" onclick="OnAssetTypeDelete()" data-lgid="P_UM_DELETE">Delete</span>
                        </div>
                        <div id="selectedassettypelist" style="height: 200px; width: 760px;"></div>
                    </div>
                    <div class="mask_loading dialog" style="display: none;"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="dialog" id="dialog_assettype" style="display: none; width: 650px;">
        <div class="dialog-title"><span class="title" data-lgid="P_JS_SELECTASSETTYPES">Select Asset Types</span><em class="dialog-close"></em></div>
        <div class="dialog-content">
            <div style="position: relative; width: 470px; margin-top: 4px; float: left">
                <input type="text" placeholder="Search" id="txt_assettype_key" autocomplete="off" style="width: 100%; padding-right: 28px; height: 25px; line-height: 25px; box-sizing: border-box; text-indent: 4px;" />
                <div style="position: absolute; top: 0px; right: 0px; height: 25px; width: 28px; text-align: center; line-height: 25px; font-size: 1.2em; font-family: FontAwesome; font-weight: 900; color: rgb(123, 28, 33); cursor: pointer;" onclick="GetAssetTypeList()">&#xf002;</div>
            </div>
            <div style="clear: both;"></div>
            <div id="availableassettypelist" style="height: 400px; width: 630px; margin: 10px 0 4px;"></div>
        </div>
        <div class="dialog-func">
            <input type="button" value="Cancel" data-lgid="P_UM_CANCEL" class="dialog-close" tabindex="18" style="height: 26px;" />
            <input type="button" onclick="OnSelectAssetTypes();" value="OK" data-lgid="P_UM_OK" tabindex="17" />
            <div class="clear"></div>
        </div>
        <div class="maskbg" style="display: none;"></div>
    </div>
</asp:Content>