kreta/KretaWeb/Areas/Adatszolgaltatasok/Views/Merohely/New_Modify_Meroallas_Popup.cshtml

@using Kreta.Web.Areas.Adatszolgaltatasok.Models
@using Kreta.Web.Helpers
@using Kreta.Resources
@using Kreta.Web.Areas.Intezmeny.Models
@using Kreta.Web.Helpers.Grid;
@model MeroallasModel

@{
    var newModifyMeroallasFormName = "meroallasNewModifyForm";
}

@using (Html.KretaForm(newModifyMeroallasFormName))
{
    @Html.KretaValidationSummary()
    <div class="container-fluid details">
        @Html.HiddenFor(x => x.Id)
        @Html.HiddenFor(x => x.MerohelyId)
        @Html.HiddenFor(x => x.PictureId)
        @Html.HiddenFor(x => x.IsDeleteImage)
        <div class="row">
            @Html.KretaNumericFor(x => x.Meroallas).Min(0.00).Max(Kreta.Core.Constants.MinMaxValues.MerohelyMaxValue).Step(0.01).RenderWithName(3, 3)
        </div>
        <div class="row">
            @Html.KretaDatePickerFor(x => x.LeolvasasDatuma).Min(new DateTime(1900, 1, 1)).Max(DateTime.Today).RenderWithName(3, 3)
        </div>
        <div class="row">
            <div class="col-xs-6 col-sm-6 col-md-3 "><label class="windowInputLabel">@IntezmenyResource.Foto</label></div>
        </div>
        <div class="row">
            @Html.KretaFileUpload("FotoInputContainer", onSelectEvent: "function(e){ MeroallasFileUploadHelper.onSelectKep(e); }", allowMultiple: false, selectText: IntezmenyResource.KepTallozasa)
        </div>
        <div id="ListViewContainer">
            <div class="row">
                <div class="col-md-3" />
                <div class="col-md-6">
                    @(Html.KretaListView<UploadedFile>(name: "meroallasKepList", tagName: "div", clientTemplateId: "PictureListViewTemplate", getUrl: new ApiUrlBuilder("MerohelyApi", "GetPicture", new Dictionary<string, object> { { "meroallasId", Model.Id.HasValue ? Model.Id : 0 }, { "pictureId", Model.PictureId.HasValue ? Model.PictureId : 0 } })).AutoBind(true))
                </div>
            </div>
        </div>
    </div>
}

<script type="text/javascript">
    var MeroallasFileUploadHelper = (function () {
        var meroallasFileUploadHelper = function () { };

        function readFileForPreview(file, listViewId)
        {
            listId = listViewId;
            var reader = new FileReader();

            if (file) {
                reader.onloadend = function () {
                    var dataSource = new kendo.data.DataSource(
                        {
                            data: [{ ContentAsBase64EncodedString: reader.result }]
                        });
                    var listView = $("#" + listViewId).data("kendoListView");

                    listView.setDataSource(dataSource);
                    listView.refresh();
                };

                reader.readAsDataURL(file);
            }
        }

        //Edithez kell
        meroallasFileUploadHelper.getFileForPreview = function (listViewId) {
            var url = "@Url.HttpRouteUrl(Constants.RouteKey.ActionApi, new { controller = Constants.ApiControllers.MerohelyApi, action = "GetPicture" })";
            AjaxHelper.DoPostQuery(url,null,
                { meroallasId: @(Model.Id.HasValue ? Model.Id : 0), pictureId: @(Model.PictureId.HasValue ? Model.PictureId : 0)},
                function (data)
                {
                    var dataSource = new kendo.data.DataSource();
                    if (data != "") {
                        dataSource.data([data.Data[0]]);
                    }

                    var listView = $("#" + listViewId).data("kendoListView");

                    listView.setDataSource(dataSource);
                    listView.refresh();
                });
        }

        meroallasFileUploadHelper.onSelectKep = function (e) {
            $('#ListViewContainer').show();
            KretaFileUpload.StopAnimation();
            var allowedFileExtensionArray = [".png", ".bmp", ".jpg", ".jpeg"];
            var attachmentMaxFileSizeInBytes = 1048576;
            var attachments = e.files;

            for(var i = 0; i < attachments.length;i++){
                if (attachmentMaxFileSizeInBytes<attachments[i].size){
                    e.preventDefault();
                    var errorMessage = "@ErrorResource.HibaTortentXMBNalNemLehetNagyobbAFajlMerete";
                    errorMessage=errorMessage.replace("{0}",attachmentMaxFileSizeInBytes/(1024*1024));
                    KretaWindowHelper.feedbackWindow("@CommonResource.Hiba", errorMessage, true);
                    $('#ListViewContainer').hide();
                    break;
                }

                if ($.inArray(attachments[i].extension.toLowerCase(), allowedFileExtensionArray)===-1){
                    e.preventDefault();
                    KretaWindowHelper.feedbackWindow("@CommonResource.Hiba", "@ErrorResource.AFajlKiterjeszteseVagyTipusaNemMegfelelo", true);
                    $('#ListViewContainer').hide();
                    break;
                }
            }

            setTimeout(function () {
                readFileForPreview(e.files[0].rawFile, "meroallasKepList");
            });
        }

        meroallasFileUploadHelper.DeleteImageButtonClick = function (imageDivId) {
            var imageDiv = $('#' + imageDivId);
            imageDiv.fadeTo(0, 0.55);
            var formData = $("#meroallasNewModifyForm").toObject();
            formData.MeroallasKep = [];
            document.getElementById("IsDeleteImage").value = true;
            $("#torlesSzoveg").css("visibility", "visible");
            $("#removeImage").css("visibility", "hidden");
         }

        return meroallasFileUploadHelper;
    })();

        $(document).ready(function () {
            if ("@(Model.PictureId.HasValue)" === "True") {
                $('#ListViewContainer').show();
                $('#meroallasWindow').height('600px');

            }
            else {
                $('#ListViewContainer').hide();
                var parentDiv = $('#meroallasWindow').parent();
                parentDiv.height('300px');
                parentDiv.css('margin-top',"-120px");
            }
           
    });

</script>

<script type="text/x-kendo-tmpl" id="PictureListViewTemplate">
    <div id="imageDiv_@Model.Id" style="margin-top:20px; border-color:white">
        <div class="UploadedFile meroallasUploadedFile">
            <span id="removeImage" onclick="MeroallasFileUploadHelper.DeleteImageButtonClick('imageDiv_'+@Model.Id)" class="k-icon k-i-close meroallas-remove-image">X</span>
            <img class="img-thumbnail" src="#:ContentAsBase64EncodedString#" />
        </div>
    </div>
    <div id="torlesSzoveg" class="meroallasTorlesSzoveg" style="visibility:hidden; color:red"><span>A kép törlése csak az adatok ’Mentés’-e után lesz végleges.</span></div>
</script>

<style>
    .meroallas-remove-image {
        position: absolute;
        top: -10px;
        right: -20px;
        border-radius: 10em;
        padding: 2px 4px 4px;
        text-decoration: none;
        font: 400 20px/20px sans-serif;
        background: #555;
        border: 2px solid #fff;
        color: #FFF;
        box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 2px 4px rgba(0,0,0,0.3);
        text-shadow: 0 1px 2px rgba(0,0,0,0.5);
        -webkit-transition: background 0.5s;
        transition: background 0.5s;
    }

        .meroallas-remove-image:hover {
            background: #E54E4E;
            cursor: pointer;
        }

    .meroallasUploadedFile {
        width: auto;
        height: auto;
        border: none;
    }

    .meroallasTorlesSzoveg {
        margin-left: 5px;
        margin-right: 5px;
        font-size: 15px;
    }

    #meroallasKepList {
        border: none;
    }

    .k-upload .k-upload-action {
        display: none;
    }

</style>