[ Mini Kiebo ]

Server: Windows NT AKFAR_SERVER 10.0 build 26200 (Windows 10) AMD64 Path: D:/xampp/htdocs/simaku-aset/application/views/admin/master/ [ Home ]
File: rooms_js.php
<div id="createWindow">
    <form action="" id="createForm" method="POST">
        <input type="hidden" id="isEdit" name="isEdit" value="0">
        <input type="hidden" id="idUp" name="idUp" value=''>
        <div class="form-group row">
            <label class="col-md-4 text-right">Gedung :</label>
            <div class="col-md-5">
                <input id="building" style="width: 100%">
            </div>
        </div>

        <div class="form-group row">
            <label class="col-md-4 text-right">Lantai:</label>
            <div class="col-md-5">
                <input id="floor" title="" class="k-textbox" style="width: 100%" />
            </div>
        </div>

        <div class="form-group row">
            <label class="col-md-4 text-right">Ruang:</label>
            <div class="col-md-5">
                <input id="room" title="" class="k-textbox" style="width: 100%" />
            </div>
        </div>

        <div class="form-group row">
            <label class="col-md-4 text-right">Kode Ruang:</label>
            <div class="col-md-5">
                <input id="room_code" title="" class="k-textbox" style="width: 100%" />
            </div>
        </div>
        <div class="form-group row">
            <label class="col-md-4 text-right">Keterangan:</label>
            <div class="col-md-5">
                <input id="room_note" title="" class="k-textbox" style="width: 100%" />
            </div>
        </div>
        <div cla <div class="form-group row pull-right">
            <div class="col-md-6">
                <button class="btn btn-primary" id='saveChanges' type="submit">Simpan</button>
            </div>
        </div>
    </form>
</div>
<script type="text/x-kendo-template" id="tambahTemplate">
    <button class="k-button" onclick="create_click()">
                <span class="k-icon k-i-plus"></span>&nbsp;Tambah Data
            </button>
</script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#search").keyup(function() {
            var searchValue = $('#search').val();
            $("#grid").data("kendoGrid").dataSource.filter({
                field: "room",
                operator: "Contains",
                value: searchValue
            });
        });

        deleteDialogTemplateitem = kendo.template($("#deleteDialogTemplateitem").html());
        $('#grid').kendoGrid({
            dataSource: {

                transport: {
                    read: function(options) {
                        $.ajax({
                            dataType: 'json',
                            url: '<?= base_url("master/rooms/show") ?>',
                            type: 'get',
                            data: options.data,
                            success: function(res) {
                                options.success(res);

                            },
                            error: function(xhr, ajaxOptions, thrownError) {
                                console.log(ajaxOptions);
                            }
                        })
                    },

                },
                schema: {
                    data: 'data',
                    total: 'total',
                    model: {
                        id: "id",
                    }
                },
                pageSize: 20
            },
            editable: 'popup',
            toolbar: [{
                template: kendo.template($("#tambahTemplate").html()),
            }],
            edit: function(e) {
                e.container.parent().find('.k-window-title').text(e.model.isNew() ? "Tambah Data" :
                    "Ubah Data");
            },
            sortable: true,
            pageable: {
                refresh: true,
                pageSizes: true,
                buttonCount: 5
            },
            columns: [{
                field: "building_name",
                title: "Nama Gedung",
                width: 100
            }, {
                field: "floor",
                title: "Lantai",
                width: 100
            }, {
                field: "room",
                title: "Ruangan",
                width: 100
            }, {
                field: "room_code",
                title: "Kode Ruang",
                width: 100
            }, {
                field: "room_note",
                title: "keterangan",
                width: 100
            }, {
                headerTemplate: "<span class='k-icon k-i-gear'></span>",
                headerAttributes: {
                    class: "table-header-cell",
                    style: "text-align: center"
                },
                attributes: {
                    class: "table-cell",
                    style: "text-align: center"
                },
                command: [{
                    name: "update",
                    iconClass: "k-icon k-i-pencil",
                    text: "Ubah",
                    click: update
                }, {
                    name: "tampil",
                    iconClass: "k-icon k-i-close",
                    text: "Hapus",
                    click: deleteData
                }, ],
                width: "150px"
            }]
        });

        function update(e) { //satrt create pinjma
            var detailRow = e.detailRow;
            e.preventDefault();

            createWindow.center().open();
            var tr = $(e.target).closest("tr"),
                data = this.dataItem(tr);
            console.log(data);
            $("#building").data("kendoDropDownList").value(data.building_id);
            $('#room').val(data.room);
            $('#floor').val(data.floor);
            $('#room_note').val(data.room_note);
            $('#isEdit').val("1");
            $('#idUp').val(data.id);
            $('#saveChanges').text('Ubah');
            // console.log(data.Entry_Period_Type_Id ,data.Register_Status_Id)

        }

        function deleteData(e) { //start delete item
            var detailRow = e.detailRow;
            e.preventDefault();
            var tr = $(e.target).closest("tr"),
                data = this.dataItem(tr);
            var deleteDialog = $("#ItemDelete").kendoDialog({
                width: "350px",
                title: "Hapus Data",
                visible: false,
                buttonLayout: "stretched",
                actions: [{
                        text: "Hapus",
                        primary: true,
                        action: function(e) {

                            $.ajax({
                                headers: {
                                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr(
                                        "content")
                                },
                                url: '<?= base_url("master/rooms/destroy") ?>',
                                type: "post",
                                data: {
                                    id: data.id
                                },
                                dataType: "json",
                                beforeSend: function() {
                                    // setting a timeout
                                    console.log(this.data);
                                },
                                success: function(e) {
                                    $('#grid').data("kendoGrid").dataSource.read();
                                },
                                error: function(xhr, ajaxOptions, thrownError) {

                                }

                            });
                        }
                    },
                    {
                        text: "Batal"
                    }
                ]
            }).data("kendoDialog");
            deleteDialog.content(deleteDialogTemplateitem(data));
            deleteDialog.open();
        } //end delete funtion


        // Dropdown
        var periode = $("#building").kendoDropDownList({ //start periode
            filter: "startswith",
            dataTextField: "building_name",
            dataValueField: "id",
            dataSource: {
                transport: {
                    read: function(options) {

                        $.ajax({
                            dataType: "json",
                            url: '<?= base_url("master/rooms/drowdownBuilding") ?>',
                            type: "GET",
                            data: options.data,
                            success: function(res) {
                                options.success(res);
                            },
                            error: function(xhr, ajaxOptions, thrownError) {}


                        });
                    }
                }
            },

        }); //periode

    })

    function create_click() { //satrt create pinjma
        $('#isEdit').val('0');
        $("#createForm")[0].reset();
        createWindow.center().open();
    }

    var createWindow = $("#createWindow").kendoWindow({ // jendela open function
        width: "600px",
        title: "Form Data",
        visible: false,
        actions: [
            "Minimize",
            "Maximize",
            "Close"
        ]
    }).data("kendoWindow");

    $("#createForm").submit(function(event) {
        alert("Anda Yakin?");
        event.preventDefault();
        var building_id = $("#building").val();
        var room = $('#room').val();
        var floor = $('#floor').val();
        var room_note = $('#room_note').val();
        var room_code = $('#room_code').val();
        if (building == "" || room == "") {
            console.log('validasi error' + building_id + 'room' + room);
        } else {
            if ($('#isEdit').val() == 0) {
                $.ajax({
                    headers: {
                        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
                    },
                    url: '<?= base_url("master/rooms/store") ?>',
                    type: "post",
                    data: {
                        building_id: building_id,
                        room: room,
                        floor: floor,
                        room_code: room_code,
                        room_note: room_note,
                    },
                    dataType: "json",

                    complete: function(e) {
                        $('#grid').data("kendoGrid").dataSource.read();
                        createWindow.close();
                        $('#isEdit').val('0');
                    },
                    error: function(xhr, ajaxOptions, thrownError) {

                    }

                });


            } else {
                $.ajax({
                    headers: {
                        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
                    },
                    url: '<?= base_url("master/rooms/update") ?>',
                    type: "post",
                    data: {
                        id: $('#idUp').val(),
                        building_id: building_id,
                        room: room,
                        floor: floor,
                        room_code: room_code,
                        room_note: room_note,
                    },
                    dataType: "json",

                    complete: function(e) {
                        $('#grid').data("kendoGrid").dataSource.read();
                        $('#isEdit').val('0');
                        $('#saveChanges').text('Tambahkan');

                        createWindow.close();
                    },
                    error: function(xhr, ajaxOptions, thrownError) {

                    }

                });
            }

        }
    });
</script>