<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>
<style type="text/css">
    #appRoomForm table
    {
        margin: 0 auto;
    }
    #appRoomForm table th
    {
        font-weight: normal;
    }
</style>
<table id="dgAppRoom" class="easyui-datagrid" style="width: 100%; height: auto;"
    data-options="
			toolbar: '#tbAppRoom',
			border: false,
			singleSelect: true,
			pagination: true,
			pageSize: 20,
			rownumbers: true,
			striped: true,
			sortName: 'ID',
			sortOrder: 'asc',
			fit: true,
			fitColumns: true,
			idField: 'ID',
			method: 'POST',
            url: '/MobileApp/LoadAppRoomsByPage/',
            onDblClickRow: function(index, row) { editAppRoom(row); }
		">
    <thead>
        <tr>
            <th data-options="field:'ID',sortable:true,align:'center',resizable:false">
                <%: Html.Language("ID") %>
            </th>
            <th data-options="field:'MAC',sortable:true,width:100,resizable:false">
                MAC
            </th>
            <th data-options="field:'RoomNumber',sortable:true,width:20,resizable:false">
                <%: Html.Language("RoomNumber")%>
            </th>
        </tr>
    </thead>
</table>
<div id="tbAppRoom">
    <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-reload',plain:true"
        onclick="$('#dgAppRoom').datagrid('reload')">
        <%: Html.Language("Refresh")%></a> <a href="javascript:void(0)" class="easyui-linkbutton"
            data-options="iconCls:'icon-add',plain:true" onclick="addAppRoom()">
            <%: Html.Language("New")%></a> <a href="javascript:void(0)" class="easyui-linkbutton"
                data-options="iconCls:'icon-edit',plain:true" onclick="editAppRoom()">
                <%: Html.Language("Edit")%></a> <a href="javascript:void(0)" class="easyui-linkbutton"
                    data-options="iconCls:'icon-remove',plain:true" onclick="delAppRoom()">
                    <%: Html.Language("Delete")%></a>
</div>
<div id="AppRoomdialog" class="easyui-window"   style="padding: 5px; width: 300px;  height: 160px;" data-options="
		closed: true,
		modal: true,
		collapsible: false,
		minimizable: false,
		maximizable: false
	">
    <div class="easyui-panel dlg-content" style="margin-bottom: 5px;">
        <form id="appRoomForm" class="easyui-form" method="post" data-options="novalidate:true"
        enctype="multipart/form-data">
        <input type="hidden" id="RID" name="ID" value="0" />
        <table cellspacing="5px">
            <tr>
                <th>
                    <label for="txtMAC">
                        MAC</label>
                </th>
                <td>
                    <input class="easyui-validatebox textbox text" id="txtMAC" name="MAC" data-options="required:true,validType:'length[3,20]'" />
                </td>
            </tr>
            <tr>
                <th>
                    <label for="txtRoomNumber">
                        <%: Html.Language("RoomNumber")%></label>
                </th>
                <td>
                    <input class="easyui-validatebox textbox text" id="txtRoomNumber" name="RoomNumber"
                        data-options="required:false" />
                </td>
            </tr>
        </table>
        </form>
    </div>
    <div class="dlg-footer" style="text-align: right; padding: 5px 5px 0 0;">
        <a class="easyui-linkbutton dlg-btn-save" data-options="iconCls:'icon-save'" href="javascript:void(0)"
            onclick="saveAppRoom();">
            <%: Html.Language("Save")%></a> <a class="easyui-linkbutton dlg-btn-cancel" data-options="iconCls:'icon-cancel'"
                href="javascript:void(0)" onclick="$('#AppRoomdialog').window('close');">
                <%: Html.Language("Cancel")%></a>
    </div>
</div>
<script type="text/javascript">

    function addAppRoom() {
        $('#appRoomForm').form('reset');
        $('#AppRoomdialog').window({ title: lang.NewPADRoomNumberSetting }).window('open');
    }

    function editAppRoom(row) {
        var row = row || $('#dgAppRoom').datagrid('getSelected');
        if (row) {
            $('#appRoomForm').form('reset');
            $('#RID').val(row.ID);
            $('#txtMAC').val(row.MAC);
            $('#txtRoomNumber').val(row.RoomNumber);

            $('#AppRoomdialog').window({ title: lang.EditPADRoomNumberSetting }).window('open');
        } else {
            $.tools.alert(lang.PleaseSelectTheData);
        }
    }

    function saveAppRoom() {

    	var params = $('#appRoomForm').serialize();

    	$.tools.post(params, '/MobileApp/SaveAppRoom/', function (r) {
    		if (r.IsSuccess) {
    			$('#dgAppRoom').datagrid('reload');
    			$('#AppRoomdialog').window('close');
    		}
    		$.tools.alert(r.Message);
    	});
    }

    function delAppRoom() {
        var rows = $('#dgAppRoom').datagrid('getSelections');
        if (!rows || rows.length == 0) {
            $.tools.alert(lang.PleaseSelectTheData);
            return;
        }

        var param;
        $.each(rows, function (i, n) {
            if (i == 0) {
                param = "idList=" + n.ID;
            }
            else {
                param += "&idList=" + n.ID;
            }
        });

        $.tools.delPost(param, "/MobileApp/DeleteAppRoom/", function () {
            $('#dgAppRoom').datagrid("clearSelections");
            $('#dgAppRoom').datagrid("reload");
        }, this);
    }
</script>
