kreta/KretaWeb/Areas/Tanulo/Views/TanuloApaczai/EszaAdatlapokMegtekintesePartialView.cshtml

@using Kreta.Web.Areas.Tanulo.Models
@using Kreta.Resources
@using Kreta.Web
@using Kreta.Enums.ManualEnums

@model TanuloApaczaiEszaAdatlapokMegtekinteseModel

@{
    var columnSizeClass = BootsrapHelper.GetSizeClasses(3);

    var dokumentumHozzaadasaContainerClass = "dokumentum-hozzaadasa-container";
    var dokumentumHozzaadasaTitleClass = "dokumentum-hozzaadasa-title";
    var dokumentumHozzaadasaFajlnevClass = "dokumentum-hozzaadasa-fajlnev";

    var successIcon = "fa-check-circle";
    var errorIcon = "fa-times";

    var eszaBelepoNyilatkozatIcon = Model.IsEszaBelepoNyilatkozatUploaded ? successIcon : errorIcon;
    var eszaBelepoNyilatkozatColor = Model.IsEszaBelepoNyilatkozatUploaded ? Constants.ApaczaiPalyazatColors.Green : Constants.ApaczaiPalyazatColors.Red;
    var eszaBelepoNyilatkozatIconContainerId = "eszaBelepoNyilatkozatIconContainer";
    var eszaBelepoNyilatkozatFileNameContainerId = "eszaBelepoNyilatkozatFileNameContainer";
    var eszaBelepoNyilatkozatFileUploadName = "eszaBelepoNyilatkozatIgazolasa";

    var eszaKilepoNyilatkozatIcon = Model.IsEszaKilepoNyilatkozatUploaded ? successIcon : errorIcon;
    var eszaKilepoNyilatkozatColor = Model.IsEszaKilepoNyilatkozatUploaded ? Constants.ApaczaiPalyazatColors.Green : Constants.ApaczaiPalyazatColors.Red;
    var eszaKilepoNyilatkozatIconContainerId = "eszaKilepoNyilatkozatIconContainer";
    var eszaKilepoNyilatkozatFileNameContainerId = "eszaKilepoNyilatkozatFileNameContainer";
    var eszaKilepoNyilatkozatFileUploadName = "eszaKilepoNyilatkozatIgazolasa";

    var dokumentumFeltoltesFigyelmeztetoUzenetFirstClass = "dokumentum-feltoltes-figyelmezteto-uzenet-first";
    var dokumentumFeltoltesFigyelmeztetoUzenetClass = "dokumentum-feltoltes-figyelmezteto-uzenet";
}
<style>

    .dokumentum-hozzaadasa-container {
        text-align: center;
    }

    .dokumentum-hozzaadasa-title {
        display: inline-block;
    }

    .dokumentum-hozzaadasa-fajlnev {
        margin-top: 20px;
    }

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

    .file-upload-center {
        justify-content: center;
    }

    .dokumentum-feltoltes-figyelmezteto-uzenet-first {
        margin-top: 40px;
    }

    .dokumentum-feltoltes-figyelmezteto-uzenet {
        font-style: italic;
    }
</style>


<div class="container-fluid">
    <div class="row">
        <div class="@columnSizeClass @dokumentumHozzaadasaContainerClass">
            <h4 class="@dokumentumHozzaadasaTitleClass">@TanuloApaczaiResource.EszaBelepoNyilatkozat</h4>
        </div>
        <div class="@columnSizeClass @dokumentumHozzaadasaContainerClass">
            <h4 class="@dokumentumHozzaadasaTitleClass">@TanuloApaczaiResource.EszaKilepoNyilatkozat</h4>
        </div>
    </div>
    <div class="row">
        <div id="@eszaBelepoNyilatkozatIconContainerId" class="@columnSizeClass @dokumentumHozzaadasaContainerClass">
            <i class="fa @eszaBelepoNyilatkozatIcon fa-5x" aria-hidden="true" style="color: @eszaBelepoNyilatkozatColor;" />
        </div>
        <div id="@eszaKilepoNyilatkozatIconContainerId" class="@columnSizeClass @dokumentumHozzaadasaContainerClass">
            <i class="fa @eszaKilepoNyilatkozatIcon fa-5x" aria-hidden="true" style="color: @eszaKilepoNyilatkozatColor;" />
        </div>
    </div>

    <div class="row">
        <div id="@eszaBelepoNyilatkozatIconContainerId" class="@columnSizeClass" style="overflow-x: auto;">
            @foreach (var eszaBelepoNyilatkozatIgazolasaFajlnev in Model.EszaBelepoNyilatkozatIgazolasaFajlnevek)
            {
                <p class="@dokumentumHozzaadasaFajlnevClass">@eszaBelepoNyilatkozatIgazolasaFajlnev</p>
            }
        </div>
        <div id="@eszaKilepoNyilatkozatIconContainerId" class="@columnSizeClass" style="overflow-x: auto;">
           @foreach (var eszaKilepoNyilatkozatIgazolasaFajlnev in Model.EszaKilepoNyilatkozatIgazolasaFajlnevek)
            {
                <p class="@dokumentumHozzaadasaFajlnevClass">@eszaKilepoNyilatkozatIgazolasaFajlnev</p>
            }
        </div>
    </div>
    <div class="row">
        <div class="@columnSizeClass kretaLabelTooltip fileupload-info-icon-container file-upload-center">
            @Html.KretaFileUpload(
                     eszaBelepoNyilatkozatFileUploadName,
                     Url.Action("UploadEszaBelepoNyilatkozatIgazolasa", Constants.Controllers.TanuloApaczai),
                     autoUpload: true,
                     allowMultiple: false,
                     showFileList: false,
                     onSuccessEvent: "function (e) { DokumentumHozzaadasaHelper.onSuccessEvent(e, " + (int)ApaczaiDokumentumTipusEnum.EszaBelepoNyilatkozat + "); }",
                     onErrorEvent: "function (e) { DokumentumHozzaadasaHelper.onErrorEvent(e); }",
                     onSelectEvent: "function (e) { TanuloApaczaiHelper.onFileUploadSelect(e); }",
                     htmlAttributes: new Dictionary<string, object> { { "accept", string.Join(", ", Model.AllowedFileExtensions) } }
                 ).Enable(Model.IsEszaBelepoNyilatkozatEnable)
            <span class="kretaLabelTooltipText fileupload-tooltip-moreoreqthanmax-hatr @(Model.IsEszaBelepoNyilatkozatEnable ? "hidden" : "")">@TanuloApaczaiResource.DokumentumKategoriankentMaxFajlokSzama</span>
            <span class="kretaLabelTooltipText fileupload-tooltip">@TanuloApaczaiResource.EszaBelepoNyilatkozatTooltip</span>
            <div class="info-icon" />
        </div>

        <div class="@columnSizeClass kretaLabelTooltip fileupload-info-icon-container file-upload-center">
            @Html.KretaFileUpload(
                     eszaKilepoNyilatkozatFileUploadName,
                     Url.Action("UploadEszaKilepoNyilatkozatIgazolasa", Constants.Controllers.TanuloApaczai),
                     autoUpload: true,
                     allowMultiple: false,
                     showFileList: false,
                     onSuccessEvent: "function (e) { DokumentumHozzaadasaHelper.onSuccessEvent(e, " + (int)ApaczaiDokumentumTipusEnum.EszaKilepoNyilatkozat + "); }",
                     onErrorEvent: "function (e) { DokumentumHozzaadasaHelper.onErrorEvent(e); }",
                     onSelectEvent: "function (e) { TanuloApaczaiHelper.onFileUploadSelect(e); }",
                     htmlAttributes: new Dictionary<string, object> { { "accept", string.Join(", ", Model.AllowedFileExtensions) } }
                 ).Enable(Model.IsEszaKilepoNyilatkozatEnable)
            <span class="kretaLabelTooltipText fileupload-tooltip @(Model.IsEszaKilepoNyilatkozatEnable ? "hidden" : "")">@TanuloApaczaiResource.DokumentumKategoriankentMaxFajlokSzama</span>
            <span class="kretaLabelTooltipText fileupload-tooltip">@TanuloApaczaiResource.EszaKilepoNyilatkozatTooltip</span>
            <div class="info-icon" />
        </div>
    </div>
    <div class="row">
        <p class="@dokumentumFeltoltesFigyelmeztetoUzenetFirstClass @dokumentumFeltoltesFigyelmeztetoUzenetClass">@Html.Raw(TanuloApaczaiResource.DokumentumFeltoltesFigyelmeztetoUzenet1)</p>
        <p class="@dokumentumFeltoltesFigyelmeztetoUzenetClass">@TanuloApaczaiResource.DokumentumFeltoltesFigyelmeztetoUzenet2</p>
        <p class="@dokumentumFeltoltesFigyelmeztetoUzenetClass">@TanuloApaczaiResource.DokumentumFeltoltesFigyelmeztetoUzenet3</p>
        <p class="@dokumentumFeltoltesFigyelmeztetoUzenetClass">@TanuloApaczaiResource.DokumentumokFeltoltesUtanNemTorolhetok</p>
    </div>
</div>

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

        dokumentumHozzadasaHelper.onSuccessEvent = function (e, dokumentumTipus) {
            var iconContainerId = "";
            var filenameContainerId = "";
            var fileuploadId = "";
            switch (dokumentumTipus) {
                case @((int)ApaczaiDokumentumTipusEnum.EszaBelepoNyilatkozat):
                    iconContainerId = "@eszaBelepoNyilatkozatIconContainerId";
                    filenameContainerId = "@eszaBelepoNyilatkozatFileNameContainerId";
                    fileuploadId = "@eszaBelepoNyilatkozatFileUploadName";
                    break;
                case @((int)ApaczaiDokumentumTipusEnum.EszaKilepoNyilatkozat):
                    iconContainerId = "@eszaKilepoNyilatkozatIconContainerId";
                    filenameContainerId = "@eszaKilepoNyilatkozatFileNameContainerId";
                    fileuploadId = "@eszaKilepoNyilatkozatFileUploadName";
                    break;
            }

            var filenameContainer = $("#" + filenameContainerId);

            if (filenameContainer.children().length == 0) {
                var icon = $("#" + iconContainerId).children().first();
                icon.removeClass("@errorIcon");
                icon.addClass("@successIcon");

                icon.css("color", "@Constants.ApaczaiPalyazatColors.Green");
            }

            var newFilename = $("<p></p>")
                .addClass("@dokumentumHozzaadasaFajlnevClass")
                .append(e.files[0].name);
            filenameContainer.append(newFilename);

            if (filenameContainer.children().length >= @Model.KategoriankentiMaxFajlSzam) {
                $('#' + fileuploadId).data('kendoUpload').enable(false);
                $('#' + fileuploadId).parents('div.fileupload-info-icon-container').children('.hidden').removeClass('hidden');
            }
        }

        dokumentumHozzadasaHelper.onErrorEvent = function (e) {
            var uzenet;
            var jsonResponse = CommonUtils.JSONparse(e.XMLHttpRequest.response);
            if (jsonResponse.Json) {
                uzenet = jsonResponse.Json.Uzenet + ((jsonResponse.Json.MegjelenitendoHiba) ? ' (' + jsonResponse.Json.MegjelenitendoHiba + ')' : '');
            }
            else {
                uzenet = jsonResponse.Message;
            }
            KretaWindowHelper.feedbackWindow("@ErrorResource.Hiba", uzenet, true, null, "@CommonResource.Rendben");
        }
        return dokumentumHozzadasaHelper;
    })();
</script>

<script type="text/javascript">
    $(document).ready(function () {
        $(".k-widget.k-upload.k-header").css({
            "position": "initial",
            "background-color": "transparent",
            "border-color": "transparent",
            "text-align": "center"
        });

        var zones = $(".k-widget.k-upload.k-header.k-upload-empty > .k-dropzone");
        $.each(zones, function () {
            $(this).children().not(':first').remove();
        });
    });
</script>