<%@ page language="C#" autoeventwireup="true" inherits="sadmin_Dashboard, App_Web_dashboard.aspx.9de8af5a" enableEventValidation="false" %>

<%@ Register Src="~/sadmin/NewHeader.ascx" TagPrefix="uc1" TagName="NewHeader" %>
<%@ Register Src="~/sadmin/NewFooter.ascx" TagPrefix="uc1" TagName="NewFooter" %>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>网上预约系统</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <!-- Bootstrap core CSS -->
    <link href="/lib/bootstrap/bootstrap.css" rel="stylesheet">
    <link href="/control/plugin/fullcalendar/fullcalendar.css" rel="stylesheet" />
    <!-- ionicons -->
    <link href="/lib/ionicons/ionicons.min.css" rel="stylesheet">
    <!-- base -->
    <link href="/css/base.css?v=45" rel="stylesheet">
    <link href="/css/a_home.css" rel="stylesheet">
    <script src="/lib/jquery/jquery-3.1.1.min.js"></script>
    
    <!--[if lt IE 9]>
      <script src="/js/html5shiv.min.js"></script>
      <script src="/js/respond.min.js"></script>
    <![endif]-->
</head>

<body class="overflow-hidden">
    <div class="wrapper">
        <uc1:NewHeader runat="server" ID="NewHeader" />
        <!-----------------页面主内容------------------>
        <div class="main-container">
            <div class="padding-md">
                <div class="row p-left-md p-right-md">
                    <div class="page-title pull-left font-16">
                        主页
                    </div>
                    <div class="page-sub-header pull-right">
                        欢迎 系统管理员 <i class="glyphicon glyphicon-map-marker text-danger"></i>
                        
                    </div>
                </div>
                <div class="row m-top-md">
                    <div class="col-lg-3 col-sm-6">
                        <a class="statistic-box bg_red m-bottom-md " href="/sadmin/Booking/Booking.aspx">
                            <div class="statistic-title">
                                预约记录
                            </div>

                            <div class="statistic-value">
                                预约申请
                            </div>

                            <div class="m-top-md"> 用户提交的预约申请</div>

                            <div class="statistic-icon-background">
                                <i class="ion-ios7-bolt"></i>
                            </div>
                        </a>
                    </div>

                    <div class="col-lg-3 col-sm-6">
                        <a href="/sadmin/EquipmentUse/EquipmentUse.aspx" class="statistic-box bg_blue m-bottom-md">
                            <div class="statistic-title">
                                预约设备分配情况
                            </div>

                            <div class="statistic-value">
                                分配情况
                            </div>

                            <div class="m-top-md">&nbsp;预约设备时间分配记录</div>

                            <div class="statistic-icon-background">
                                <i class="ion-nuclear"></i>
                            </div>

                        </a>
                    </div>

                    <div class="col-lg-3 col-sm-6">
                        <a href="/sadmin/User/User.aspx" class="statistic-box bg_violet m-bottom-md">
                            <div class="statistic-title">
                                提交申请的用户
                            </div>

                            <div class="statistic-value">
                                用户列表
                            </div>

                            <div class="m-top-md">&nbsp;已注册用户列表</div>

                            <div class="statistic-icon-background">
                                <i class="ion-ios7-eye"></i>
                            </div>

                        </a>
                    </div>

                    <div class="col-lg-3 col-sm-6">
                        <a href="/sadmin/Equipment/Equipment.aspx" class="statistic-box bg_green m-bottom-md">
                            <div class="statistic-title">
                                用户预约可选项
                            </div>
                            <div class="statistic-value">
                                预约设备
                            </div>
                            <div class="m-top-md">&nbsp;预定义的预约事物</div>
                            <div class="statistic-icon-background">
                                <i class="ion-coffee"></i>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="row  ">

                    <div class="col-lg-4">
                         <div>
                            <div class="pull-left">
                                <h3 class="page-header"><i class="glyphicon glyphicon-book"></i>
                                    当天分配情况
                                </h3>
                            </div>
                            <div class="pull-right" style="margin: 40px 0 20px;">
                                <a class="btn btn-primary" href="/sadmin/EquipmentUse/EquipmentUse.aspx"><i class="glyphicon glyphicon-share-alt"></i>更多 </a>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                        <div id="leftPanel" class="panel panel-default">
                            <div class="panel-body" style="height:642px; overflow:scroll">
                                <asp:Repeater ID="rptCurrentBooking" runat="server">
                                    <HeaderTemplate>
                                        <table id="dataView" class="table table-hover">
                                            <thead>
                                                <tr class='table-heading'>
                                                    <th style="white-space:nowrap">用户</th>
                                                    <th style="white-space:nowrap">预约设备</th>
                                                    <th style="white-space:nowrap">开始</th>
                                                    <th style="white-space:nowrap">结束</th>
                                                </tr>
                                            </thead>
                                            <tbody >
                                    </HeaderTemplate>
                                    <ItemTemplate>
                                        <tr>
                                            <td>
                                                <a href="/sadmin/User/UserDetails.aspx?id=<%#Eval("u_id") %>"><%#Eval("u_name") %> </a>
                                            </td>
                                            <td>
                                                <%#Eval("e_name")%>
                                            </td>
                                            <td><%#((DateTime)Eval("eu_start")).ToString("HH:mm")%></td>
                                            <td><%#((DateTime)Eval("eu_end")).ToString("HH:mm")%></td>
                                        </tr>
                                    </ItemTemplate>
                                    <FooterTemplate>
                                        </tbody> 
                                        </table>
                                         <div class="alert alert-info" style="display: <%#bool.Parse((rptCurrentBooking.Items.Count==0).ToString())?"block":"none"%>">
                                             <strong>当天暂无分配</strong>
                                         </div>
                                    </FooterTemplate>
                                </asp:Repeater>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-8">
                        <div>
                            <div class="pull-left">
                                <h3 class="page-header">
                                    <i class="glyphicon glyphicon-calendar"></i>
                                    时间分配情况
                                </h3>
                            </div>
                            <div class="pull-right" style="margin: 40px 0 20px; width: 400px">
                                <div class="input-group">
                                    <select class="form-control" id="elist">
                                        <%=bindEquipment() %>
                                    </select>
                                    <span class="input-group-btn">
                                        <a href="/sadmin/EquipmentUse/EquipmentUseCreate.aspx" class="btn  btn-primary ">新增时间分配</a>
                                    </span>
                                </div>
                                <!-- /input-group -->
                            </div>
                            <div class="clearfix"></div>
                            <script type="text/javascript">
                                var events = {
                                    url: '/sadmin/EquipmentUse/EquipmentUse.ashx',
                                    type: 'POST',
                                    data: {
                                        eid: $("#elist").val()
                                    }
                                }

                                $(function () {
                                    $("#elist").change(function () {
                                        events.data.eid = $(this).val();
                                        $('#calendar').fullCalendar('refetchEvents');
                                    });
                                })
                            </script>
                        </div>
                        <div id="rigthPanel" class="panel panel-default">
                            <div class="panel-body">
                                <script type="text/javascript">
                                    $(function () {
                                        $('#calendar').fullCalendar({
                                            events: events,
                                            defaultView: "agendaWeek",
                                            header: {
                                                left: 'prev,next today',
                                                center: 'title',
                                                right: 'month,listMonth,agendaWeek,listWeek,agendaDay,listDay'
                                            },
                                            views:
                                            {
                                                listMonth: { buttonText: '〓' },
                                                listWeek: { buttonText: '〓' },
                                                listDay: { buttonText: '〓' }
                                            }
                                            //,eventClick: function (calEvent, jsEvent, view) {
                                            //    //alert('预约用户: ' + calEvent.title
                                            //    //    + "起始日期：" +
                                            //    //    calEvent.start.Year + "截止日期："
                                            //    //    + calEvent.end);
                                            //}
                                        });
                                    });
                                </script>
                                <div class="form-group">
                                    <div id="calendar"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                   
                </div>
        
            </div>
            <!-- ./padding-md -->
        </div>
        <!-- /main-container -->
        <uc1:NewFooter runat="server" ID="NewFooter" />
    </div>

    <!----------------右下角置顶---------------->
    <a href="#" class="scroll-to-top hidden-print"><i class="ion-chevron-up"></i></a>

    <script src="/lib/bootstrap/bootstrap.min.js"></script>
    <script src="/js/custom.js?v=2"></script>

    <script src="/control/plugin/Highcharts/highcharts.js?v=20160102"></script>
    <script src="/control/plugin/Highcharts/data.js"></script>
    <script src="/control/plugin/Highcharts/exporting.js?v=20160101"></script>

    <script src="/control/plugin/fullcalendar/lib/moment.min.js"></script>
    <script src='/control/plugin/fullcalendar/fullcalendar.js'></script>
    <script src="/control/plugin/fullcalendar/locale/zh-cn.js"></script>

</body>
</html>
