WorkFlowCheck/src/WorkFlowCheck.Web/Pages/BaseStock/CheckPoints/CheckPointEditPage.cshtml

@page
@model WorkFlowCheck.Web.Pages.BaseStock.CheckPoints.CheckPointEditPageModel
@using Microsoft.AspNetCore.Antiforgery
@inject IAntiforgery Antiforgery
@{
    ViewData["Title"] = "Ellenőrzési pont";
    var checkpointId = Model.CheckPoint.Id;
    var url = Url.Page("./CheckPointEditPage", "LoadCheckListTemplateRows", new { id = checkpointId });
    var urlPost = Url.Page("./CheckPointEditPage", "Save");
}
<h1>@ViewData["Title"]</h1>

<input type="hidden" id="checkPointEditUrl" value="@url" />
<input type="hidden" id="checkPointEditPostUrl" value="@urlPost" />

<div class="card shadow p-4">
    <form method="post" id="checkPointForm">
        <meta name="csrf-token" content="@Antiforgery.GetAndStoreTokens(HttpContext).RequestToken" />
        <input type="hidden" asp-for="CheckPoint.Id" />
        <div class="mb-3">
            <label asp-for="CheckPoint.ShortName"></label>
            <input asp-for="CheckPoint.ShortName" class="form-control" />
            <span asp-validation-for="CheckPoint.ShortName" class="text-danger"></span>
        </div>
        <div class="mb-3">
            <label asp-for="CheckPoint.Code"></label>
            <input asp-for="CheckPoint.Code" class="form-control" />
            <span asp-validation-for="CheckPoint.Code" class="text-danger"></span>
        </div>
        <div class="col-md-3">
            <label asp-for="CheckPoint.IsEnabled"></label>
            <input type="checkbox" asp-for="CheckPoint.IsEnabled" class="form-check-input" />
            <span asp-validation-for="CheckPoint.IsEnabled" class="text-danger"></span>
        </div>
        <div class="mb-3">
            <button type="button" id="saveCheckPoint" class="btn btn-primary">Mentés</button>
            <button type="button" class="btn btn-secondary" onclick="history.back()">Mégsem</button>
        </div>
    </form>
</div>
<br />
<div class="card shadow p-4">
    <div class="d-flex justify-content-end">
        <button class="btn btn-primary float-right new-btn" data-bs-toggle="tooltip" data-bs-placement="top" title="Új elem hozzáadása">
            <i class="bi bi-plus-square"></i>
        </button>
    </div>
    <table id="tbCheckPointsEditPage" class="table table-bordered table-hover table-sm" style="width:100%">
        <thead class="table-primary">
            <tr>
                <th>ID</th>
                <th>RowIndex</th>
                <th>OperationDescription</th>
                <th>AnswerType</th>
                <th class="text-center">Action</th>
            </tr>
        </thead>
        <tfoot class="table-light">
            <tr>
                <th>ID</th>
                <th>RowIndex</th>
                <th>OperationDescription</th>
                <th>AnswerType</th>
                <th class="text-center">Action</th>
            </tr>
        </tfoot>
    </table>
</div>
<style>
    .box {
        display: inline-block;
        width: 25px;
        height: 25px;
        margin: 1px;
        text-align: center;
        line-height: 25px;
        font-size: 15px;
        border: 1px solid black;
        border-radius: 3px;
    }

    .yellow-box {
        background-color: yellow;
    }

    .red-box {
        background-color: red;
    }
</style>
@section Scripts {
    <script>

        const table = new DataTable('#tbCheckPointsEditPage', {
                ajax: {
                       url: $('#checkPointEditUrl').val(),
                       type: "GET",
                       dataSrc : "data"
                },
                columns: [
                    { data: "id" },
                    { data: "rowIndex" },
                    { data: "operationDescription" },
                    {
                            data: "answerType",
                            searchable: false,
                            sortable: false,
                            render: function ( data, type, row ) {
                                if (data === 'SI-N') {
                                    return '<div class="text-center"><div class="box yellow-box">I</div><div class="box">N</div></div>';
                                }
                                if (data === 'I-SN') {
                                    return '<div class="text-center"><div class="box">I</div><div class="box yellow-box">N</div></div>';
                                }
                                if (data === 'PI-N') {
                                    return '<div class="text-center"><div class="box red-box">I</div><div class="box">N</div></div>';
                                }
                                if (data === 'I-PN') {
                                    return '<div class="text-center"><div class="box">I</div><div class="box red-box">N</div></div>';
                                }
                                if (data==='P'){
                                    return '<div class="text-center"><i class="fas fa-camera fa-2x"></i></div>';
                                }
                                return data;
                            }

                    },
                    { data: null, render: function (data, type, row) {
                         return renderActionButtons(row.id);
                    }}
                ],
                columnDefs: [
                    {
                        "targets": 0,
                        "visible": false
                    },
                    {
                        "targets": 4,
                        "className": "text-center",
                        "width": "10%"
                    }
                ],

                processing:true,
                language: { url: '//cdn.datatables.net/plug-ins/2.2.2/i18n/hu.json',}
        });

        $('#tbCheckPointsEditPage').on('click', '.edit-btn', function ()
        {
            const row = table.row($(this).closest('tr')).data();
            window.location.href = `@Url.Page("/CheckListTemplate/CheckListTemplateRows/CheckListTemplateRowEditPage")?id=${row.id}`;
        });

        $('#tbCheckPointsEditPage').on('click', '.delete-btn', function ()
        {
            const row = table.row($(this).closest('tr')).data();
            showConfirmModal({
                title: 'Törlés megerősítése',
                message: 'Biztosan törölni szeretnéd ezt az elemet?',
                okText: 'Törlés',
                cancelText: 'Mégsem'
            }).then(function(result) {
                if(result === 'ok') {
                    console.log('Törlés végrehajtva');
                }
            });
        });

        $("#saveCheckPoint").click(function () {
            const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
            var formData = getFormAsNestedObject('#checkPointForm');

            $.ajax({
                url: $('#checkPointEditPostUrl').val(),
                type: 'POST',
                headers: {
                      'X-CSRF-TOKEN': csrfToken,
                      'Content-Type': 'application/json'
                },
                data: JSON.stringify(formData.CheckPoint),
                success: function (response) {
                    showMessageModal({
                        title: 'Figyelmem!',
                        message: 'Sikeres mentés.',
                        okText: 'Értettem'
                    });
                },
                error: function (xhr, status, error) {
                    // Hiba esetén
                    console.error("Hiba: ", error);
                    showMessageModal({
                        title: 'Hiba!',
                        message: 'A mentés NEM sikerült!',
                        okText: 'Értettem'
                    });
                }
            });

        });

    </script>
}