{% extends 'wgcomm/base.html' %}

{% block title %}
    Monitor
{% endblock %}

{% block tail %}
    <script src="{{ url_for('static',filename='wgcomm/js/console-realtimemonitor.js') }}"></script>
{% endblock %}
{% block tail_min %}
    <script src="{{ url_for('static',filename='wgcomm/js/console-realtimemonitor.min.js') }}"></script>
{% endblock %}
{% block main_content %}

    <!--app-content open-->
    <div class="app-content main-content mt-0">
        <div class="side-app">
            <!-- CONTAINER -->
            <div class="main-container container-fluid">
                <!-- PAGE-HEADER -->
                <div class="page-header">
                    <div>
                        <h1 class="page-title">Monitor</h1>
                    </div>
                    <div class="ms-auto pageheader-btn">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item">Console</li>
                            <li class="breadcrumb-item">Monitor</li>
                        </ol>
                    </div>
                </div>
                <!-- PAGE-HEADER END -->
                {% with messages = get_flashed_messages() %}
                    {% if messages %}
                        <div class="form-group">
                            <ul>
                                {% for message in messages %}
                                    <li class="text-danger">{{ message }}</li>
                                {% endfor %}
                            </ul>
                        </div>
                    {% endif %}
                {% endwith %}
                <!--ROW OPENED-->
                <div class="row">
                    {#                    <div class="col-md-12">#}
                    {#                        <div class="card">#}
                    {#                            <div class="card-body">#}
                    {#                                <div class="row gutters-xs">#}
                    {#                                    <div class="col-auto">#}
                    {#                                        <button href="#"#}
                    {#                                                class="btn btn-primary" id="btnOneKeyCloseDoor"#}
                    {#                                                data-id="Quick Lock"#}
                    {#                                                data-name="Quick Lock"#}
                    {#                                                data-url="/console_onekey_selected">#}
                    {#                                            <i class="fe"></i>Quick Lock#}
                    {#                                        </button>#}
                    {#                                    </div>#}
                    {#                                    <div class="col-auto">#}
                    {#                                        <button href="#"#}
                    {#                                                class="btn btn-warning" id="btnOneKeyOpenDoor"#}
                    {#                                                data-id="Quick Unlock"#}
                    {#                                                data-name="Quick Unlock"#}
                    {#                                                data-url="/console_onekey_selected">#}
                    {#                                            <i class="fe"></i>Quick Unlock#}
                    {#                                        </button>#}
                    {#                                    </div>#}
                    {#                                </div>#}
                    {#                                <p class="card-text text-warning" id="opSelectedResultInfo" hidden>#}
                    {#                                </p>#}
                    {#                            </div>#}
                    {#                        </div>#}
                    {#                    </div>#}
                    <div class="col-md-12">
                        <div class="card">
                            {% if onekey>0 %}
                                <div class="row gutters-xs">
                                    <div class="col-auto">
                                        <button href="#"
                                                class="btn btn-primary" id="btnOneKeyCloseDoor"
                                                data-id="Quick Lock"
                                                data-name="Quick Lock"
                                                data-url="/console_onekey_selected">
                                            <i class="fe"></i>Quick Lock
                                        </button>
                                    </div>
                                    <div class="col-auto">
                                        <button href="#"
                                                class="btn btn-warning" id="btnOneKeyOpenDoor"
                                                data-id="Quick Unlock"
                                                data-name="Quick Unlock"
                                                data-url="/console_onekey_selected">
                                            <i class="fe"></i>Quick Unlock
                                        </button>
                                    </div>
                                </div>
                                <p class="card-text text-warning" id="opSelectedResultInfo" hidden="hidden">
                                </p>
                            {% endif %}
                            <div id="calendar2" class="fc fc-media-screen fc-direction-ltr fc-theme-standard">
                                <div class="card-body tasks-table-container">
                                    <div class="fc-view-harness fc-view-harness-active" style="height: 200px;">
                                        <div class="fc-list  fc-list-sticky fc-listMonth-view fc-view">
                                            <div class="fc-scroller fc-scroller-liquid" id="logscroll"
                                                 style="overflow: hidden auto;">
                                                <div class="table-responsive">
                                                    <table id="table-monitorloglist"
                                                           class="table editable-table table-nowrap table-bordered  wp-100 active-tb">
                                                        <thead class="table-head">
                                                        <tr>
                                                            <th>RecID</th>
                                                            <th>Time</th>
                                                            <th>Description</th>
                                                        </tr>
                                                        </thead>
                                                        <tbody class="table-body">
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--ROW CLOSED-->
                <!-- row -->
                <div class="row">
                    <input type="hidden" name="wgserver1001" id="wgserver1001" value="{{ g.wgwsserver1001 }}">
                    <!--ROW OPENED-->
                    <div class="col-lg-8 col-xl-9">
                        <div class="row" id="111112">
                            <input type="hidden" name="alldoors" id="alldoors" value="{{ objlist }}">
                            <div class="col-md-6">
                                <div class="d-flex align-items-center gap-3"> <!-- 使用 Flexbox 容器 -->
                                    <div class="flex-grow-1">
                                        <input id="searchdoor" type="text" class="form-control form-control-sm"
                                               placeholder="Please input door name" onkeyup="showSelectedDoor()">
                                    </div>
                                    {% if g.extfunc5678_console_displayMoreLog %}
                                        <div class="flex-shrink-0">
                                            {#                                          <div class="d-flex align-items-center px-3 pt-3">#}
                                            <div>
                                                <label class="text-danger" id="recordcount"></label>
                                                {#                                            <a href="#" class="option-dots" data-bs-toggle="dropdown"#}
                                                {#                                               aria-haspopup="true"#}
                                                {#                                               aria-expanded="false"><i class="fe fe-more-vertical"></i></a>#}
                                                {#                                            <div class="dropdown-menu dropdown-menu-start folder-options">#}
                                                {#                                                <button href="#" class="dropdown-item active-btndetail" id="btnQuery10"#}
                                                {#                                                ><i class="typcn typcn-spanner">最近八条</i></button>#}
                                                {#                                            </div>#}
                                            </div>
                                        </div>
                                    {% else %}
                                        <label class="text-danger" id="recordcount" hidden="hidden"></label>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                        {#                        <div class="row" id="111112">#}
                        {#                             <input type="hidden" name="alldoors" id="alldoors"  value="{{ objlist }}">#}
                        {#                             <div class="col-md-6">#}
                        {#                             <input id="searchdoor" type="text" class="form-control form-control-sm" placeholder="Please input door name" onkeyup="showSelectedDoor()">#}
                        {#                             </div>#}
                        {#                        </div>#}
                        {#                        <div class="row" hidden="hidden" id="111111">#}
                        {#                            <div class="col-xl-2 col-md-4 col-sm-6">#}
                        {#                                <div class="card p-0 ">#}
                        {#                                    <div class="d-flex align-items-center px-3 pt-3">#}
                        {#                                        <div class="float-end ms-auto" id="sssop">#}
                        {#                                            <label class="text-danger" id="recordcount"></label>#}
                        {#                                            <a href="#" class="option-dots" data-bs-toggle="dropdown"#}
                        {#                                               aria-haspopup="true"#}
                        {#                                               aria-expanded="false"><i class="fe fe-more-vertical"></i></a>#}
                        {#                                            <div class="dropdown-menu dropdown-menu-start folder-options">#}
                        {#                                                <button href="#" class="dropdown-item active-btndetail" id="btnQuery10"#}
                        {#                                                ><i class="typcn typcn-spanner">最近八条</i></button>#}
                        {#                                            </div>#}
                        {#                                        </div>#}
                        {#                                    </div>#}
                        {#                                </div>#}
                        {#                            </div>#}
                        {#                        </div>#}
                        {% if g.extfunc5678_console_displayMoreLog %}
                            <div class="row" id="loginfo" hidden="hidden">
                                {#                        <div class="row" id="loginfo">#}
                                {% for i in (1,2,3,4,5,6,7,8) %}
                                    <div class="col-xl-3 col-md-3 col-sm-3">
                                        <div class="card p-0 ">
                                            <div class='d-flex align-items-center px-3 pt-3'>
                                                <div class='float-end ms-auto'>
                                                    <div class='card-body pt-0 text-start' id='divInfologAll{{ i }}'>
                                                        <div style='padding-top: 8px'>
                                                        </div>
                                                        <span id='divInfolog{{ i }}'></span>
                                                        {% if  g.extfunc5678_photo %}
                                                            <a href="#"><img id='img{{ i }}' src="" class="w-100"
                                                                             alt=""></a>
                                                        {% endif %}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                        {% endif %}
                        <div class="row">
                            {% for con in objlist %}
                                <div class="col-xl-2 col-md-4 col-sm-6" id="door-{{ con.f_DoorName }}">
                                    <div class="card p-0 ">
                                        <div class="d-flex align-items-center px-3 pt-3">
                                            <div class="float-end ms-auto"
                                                 id="{{ con.f_ControllerSN }}-{{ con.f_DoorNO }}op" hidden>
                                                <a href="#" class="option-dots" data-bs-toggle="dropdown"
                                                   aria-haspopup="true"
                                                   aria-expanded="false"><i class="fe fe-more-vertical"></i></a>
                                                <div class="dropdown-menu dropdown-menu-start folder-options">
                                                    <button href="#"
                                                            class="dropdown-item active-btnquerycontroller"
                                                            data-id="{{ con.f_ControllerSN }}-{{ con.f_DoorNO }}"
                                                            data-sn="{{ con.f_ControllerSN }}"
                                                            data-doorno="{{ con.f_DoorNO }}"
                                                            data-name="{{ con.f_DoorName }}"
                                                    ><i class="typcn typcn-spanner">Check</i></button>
                                                    <button href="#"
                                                            class="dropdown-item active-btnadjusttime"
                                                            data-id="{{ con.f_ControllerSN }}-{{ con.f_DoorNO }}"
                                                            data-sn="{{ con.f_ControllerSN }}"
                                                            data-doorno="{{ con.f_DoorNO }}"
                                                            data-name="{{ con.f_DoorName }}"
                                                    ><i class="typcn typcn-stopwatch">Adjust Time</i></button>
                                                    <button href="#"
                                                            class="dropdown-item active-btnopendoor"
                                                            data-id="{{ con.f_ControllerSN }}-{{ con.f_DoorNO }}"
                                                            data-sn="{{ con.f_ControllerSN }}"
                                                            data-doorno="{{ con.f_DoorNO }}"
                                                            data-name="{{ con.f_DoorName }}"
                                                    ><i class="typcn typcn-lock-open">Remote Open</i></button>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="card-body pt-0 text-center">
                                            {#2024-04-25 16:45:05                                            <div class="door-icon">#}
                                            {#                                                <img src="static/wgcomm/images/pConsole_Door_Unknown.png" alt="img"#}
                                            {#                                                     class="br-7" id="{{ con.f_ControllerSN }}-{{ con.f_DoorNO }}img">#}
                                            {#                                            </div>#}
                                            <div style="padding-top: 8px">
                                                <h6 class="mb-1 font-weight-semibold">{{ con.f_DoorName }}</h6>
                                            </div>

                                            {#                                            <div class="custom-checkbox custom-control">#}
                                            {#                                                <input type="checkbox" data-bs-checkboxes="mygroup"#}
                                            {#                                                       class="custom-control-input" id="{{ con.f_ControllerSN }}-{{ con.f_DoorNO }}selected" checked="checked">#}
                                            {#                                                <label for="{{ con.f_ControllerSN }}-{{ con.f_DoorNO }}selected" class="custom-control-label"></label>#}
                                            {#                                            <span class="text-muted fs-11"#}
                                            {#                                                  id="{{ con.f_ControllerSN }}-{{ con.f_DoorNO }}">Unconnected</span>#}
                                            {#                                            </div>#}
                                            <span class="text-muted fs-11"
                                                  id="{{ con.f_ControllerSN }}-{{ con.f_DoorNO }}">Unconnected</span>
                                            {#                                            <div class="text-start  fs-11" id="chkinfo{{ con.f_DoorName }}">#}
                                            {#                                            </div>#}
                                        </div>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                    <!--ROW CLOSED-->
                </div>
            </div>
        </div>
    </div>
    <!-- CONTAINER CLOSED -->
{% endblock %}