fleet-contractor/Site/js/mapview/mapviewshape.js

var shapevm;
$(function () {
    initshape();
});

var selectedShapeFileID = [];
function initshape() {
    shapevm = new Vue({
        el: '#shapeList',
        data: {
            shapes: []
        },
        methods: {
            reload: function (data) {
                this.shapes = data;

                var selcount = 0;
                for (var i = 0; i < this.shapes.length; i++) {
                    var o = this.shapes[i];
                    if (o.Selected) selcount++;
                }

                var chkSelectAllShape = document.getElementById("chkSelectAllShape");
                if (selcount == 0) {
                    chkSelectAllShape.checked = false;
                    chkSelectAllShape.indeterminate = false;
                }
                else if (selcount == this.shapes.length) {
                    chkSelectAllShape.checked = true;
                    chkSelectAllShape.indeterminate = false;
                }
                else {
                    chkSelectAllShape.indeterminate = true;
                }
            },
            chkShapeClick: function (e, s) {
                var t = $(e.target);
                var checked = t.prop("checked");
                if (checked) {
                    getShapeFileData(s);
                    if (selectedShapeFileID.indexOf(s.ID) < 0) {
                        selectedShapeFileID.push(s.ID);
                    }
                }
                else {
                    mapHelper.removeShape(s);
                    selectedShapeFileID.splice(selectedShapeFileID.indexOf(s.ID), 1);
                }

                this.reload(this.shapes);
            },
            linkShapeClick: function (s) {
                locateShape(s);
                s.Selected = true;
                if (selectedShapeFileID.indexOf(s.ID) < 0) {
                    selectedShapeFileID.push(s.ID);
                }

                this.reload(this.shapes);
            },
            deleteShapeClick: function (m, ev) {
                var e = { data: m };
                deleteShapeClick(e);
            }
        }
    });
}

function getShapeFileInfos() {
    var item = {
        'Key': companyids,
        'Value': htmlencode($("#txtShapeSearchText").val())
    };

    _network.mapviewquery("GetShapeFileInfos", JSON.stringify(item), function (data) {
        if (typeof (data) === "string") {
            _dialog.showAlert(data, GetTextByKey("P_MV_ERROR", 'Error'));
            return;
        }
        for (var i in data) {
            if (selectedShapeFileID.indexOf(data[i].ID) < 0)
                data[i].Selected = false;
            else
                data[i].Selected = true;
        }
        shapevm.reload(data);
    }, function () {
    });
}

function showConfirm1(msg, title, fok, fcancel) {
    showmaskbg(true);
    $('#addodomask').show();
    $('#addenginehoursmask').show();
    _dialog.showConfirm(msg, title, function (e) {
        showmaskbg(false);
        $('#addodomask').hide();
        $('#addenginehoursmask').hide();
        if (typeof fok === 'function') {
            fok(e);
        }
    }, function () {
        showmaskbg(false);
        $('#addodomask').hide();
        $('#addenginehoursmask').hide();
    });
}

function deleteShapeClick(e) {
    if (!e.data) {
        return;
    }
    var item = {
        'Key': e.data.CompanyID,
        'Value': e.data.ID
    };
    showmaskbg(true);
    showConfirm1(GetTextByKey("P_MV_DOYOUWANTTODELETETHESHAPEFILE", 'Do you want to delete the shape file?'), GetTextByKey("p_MV_DELETESHAPEFILE", 'Delete Shape File'), function () {
        _network.mapviewquery("DeleteShape", JSON.stringify(item), function (data) {
            mapHelper.removeShape(e.data);
            getShapeFileInfos();
        }, function (err) {
            _dialog.showAlert(GetTextByKey("P_MV_FAILEDTODELETETHISSHAPLEFILE", 'Failed to delete this shaple file.'), GetTextByKey("p_MV_DELETESHAPEFILE", 'Delete Shape File'));
        });
    });
}

function openImportShapeFile() {
    $('#dialog_shapename').val('');
    $('#dialog_shapenotes').val('');
    $('#span_filename').text('');
    showmaskbg(true);
    $('#dialog_importshapefile .dialog-title span.title').text(GetTextByKey("P_MV_IMPORTSHAPEFILE", 'Import Shape File'));
    $('#dialog_importshapefile')
        .attr('act', 'edit')
        .css({
            'width': 500,
            'top': (document.documentElement.clientHeight - $('#dialog_importshapefile').height()) / 4,
            'left': (document.documentElement.clientWidth - $('#dialog_importshapefile').width()) / 2
        })
        .showDialogfixed();
}

var shapefiledata;
function UploadImportShapeFile() {
    var file = $('<input type="file" style="display: none;" accept=".shp,.kml,.kmz"/>');
    file.change(function () {
        var file = this.files[0];
        shapefiledata = file;
        $('#span_filename').text(file.name);
        var name = $("#dialog_shapename").val();
        if (!name || name.length == 0) {
            if (file.name.length > 100)
                $("#dialog_shapename").val(file.name.substring(0, 100));
            else
                $("#dialog_shapename").val(file.name);
        }

    }).click();
}

function SaveImportShapeFile() {
    if (!shapefiledata)
        return;

    var item = {
        'Key': companyids,
        'Value': $("#dialog_shapename").val(),
        'Tag1': $("#dialog_shapenotes").val(),
    };

    if (!item.Value || item.Value.length == 0) {
        _dialog.showAlert(GetTextByKey("P_MV_SHAPENAMECANNOTBEEMPTY", 'Shape name cannot be empty.'), GetTextByKey("P_MV_IMPORTSHAPEFILE", 'Import Shape File'));
        return;
    }
    var param = JSON.stringify(item);
    param = htmlencode(param);

    var formData = new FormData();
    formData.append("iconFile", shapefiledata);
    formData.append("MethodName", "ImportShape");
    formData.append("ClientData", param);
    $.ajax({
        url: 'mapview.ashx?tp=ashx',
        type: 'POST',
        dataType: 'json',
        processData: false,
        contentType: false,
        data: formData,
        async: true,
        success: function (data) {
            if (data !== "OK") {
                _dialog.showAlert(data, GetTextByKey("P_MV_ERROR", 'Error'));
                return;
            }
            getShapeFileInfos();
            shapefiledata = undefined;
            $('#dialog_importshapefile').hideDialog();
            showmaskbg(false);
        },
        error: function (err) {
            _dialog.showAlert(err.statusText, GetTextByKey("P_MV_IMPORTSHAPEFILE", 'Import Shape File'));
        }
    });
}


function getShapeFileData(s, needLocate) {
    var item = {
        'Key': s.CompanyID,
        'Value': s.ID,
        'Tag1': s.FileName
    };

    _network.mapviewquery("GetShapeData", JSON.stringify(item), function (data) {
        if (typeof (data) === "string") {
            _dialog.showAlert(data, GetTextByKey("P_MV_ERROR", 'Error'));
            return;
        }
        s.Shape = data;

        if (needLocate)
            locateShape(s);
        else
            mapHelper.showShape(s);
    }, function () {
    });
}

function locateShape(s) {
    if (s.Shape) {
        mapHelper.showShape(s);
        mapHelper.locateShape(s);
    }
    else
        getShapeFileData(s, true);
}