
{% extends "base.html" %}

{%block title%}Falcon-Dashboard{%endblock%}

{% block more_head %}
{{super()}}

<script src="/static/js/jquery.shiftcheckbox.js" type= "text/javascript" ></script>
<script src="/static/js/dashboard.js?_v=0.1.0"></script>
<script>

        $(function(){
            $(document).ready (function() {
                $('.shiftCheckbox').shiftcheckbox();
            });
            $("#check_all_endpoints").bind("click", fn_check_all_hosts);
            $("#check_all_counters").bind("click", fn_check_all_items);
            $("#endpoint-search").keydown(function(event){
                if(event.keyCode == 13){
                    fn_list_endpoints();
                    event.preventDefault();
                    return false;
                }
            });
            $("#counter-search").keydown(function(event){
                if(event.keyCode == 13){
                    fn_list_counters();
                    event.preventDefault();
                    return false;
                }
            });
            $("#counter-filter").keydown(function(event){
                if(event.keyCode == 13){
                    filter_counter();
                    event.preventDefault();
                    return false;
                }
            });
            $("#tag-search").tokenfield();

            $("#service-search").select2({
                minimumInputLength: 3
            });

        })

</script>
{% endblock %}

{%block body_head%} <body> {%endblock%}


{%block navbar%}
  {%include "navbar.html"%}
{%endblock%}

{% block container %}

<div class="row">
    {% block main_section%}
    <div class="col-md-4">
        <div class="row">
            <div class="col-md-12" id="endpoints">
                    <div class="panel panel-info">
                        <div class="panel-heading">
                            <img class="loading pull-right" src="/static/img/loading.gif" style="display:none;"></img>
                            {{_('search endpoints')}}
                        </div>

                        <div class="panel-body">
                            <form role="form">
                                <div class="form-group">
                                    <label>Endpoint</label>
                                    <input id="endpoint-search" name="endpoint_search" type="text" class="form-control input-sm">
                                    <p class="help-block"><span class="text-warning">{{_('using SPACE to separate keywords')}}</span></p>
                                </div>
                                <div class="form-group">
                                    <label>{{_('labels')}}( eg: job=appstore-web)</label>
                                    <input id="tag-search" name="tag_search" type="text" class="form-control input-sm">
                                </div>
                            </form>
                            <form class="form-inline" role="form">
                                <div class="form-group">
                                    <button type="button" id="btn-search-endpoints" class="btn btn-default btn-sm btn-success" onclick="fn_list_endpoints();return false;">{{_('global search')}}</button>
                                    <select class="form-control input-sm" id="endpoint-limit" onchange="fn_list_endpoints();return false;">
                                        <option value="50"> Limit 50</option>
                                        <option value="100">Limit 100</option>
                                        <option value="500">Limit 500</option>
                                    </select>
                                    <select class="form-control input-sm" id="endpoint-page" onchange="fn_list_endpoints();return false;">
                                        {%for p in range(1, 21)%}
                                        <option value="{{p}}"> page {{p}}</option>
                                        {%endfor%}
                                    </select>
                                    <span class="cut-line">¦</span>
                                    <button class="btn btn-default btn-sm" onclick="fn_delete_endpoints();return false;">{{_('delete endpoints')}}</button>
                                </div>
                            </form>
                            <hr/>
                            <form class="form-inline" role="form">
                                <div class="form-group">
                                    <input id="endpoint-filter" type="text" class="form-control input-sm">
                                    <button class="btn btn-default btn-sm btn-info" onclick="filter_endpoint();return false;">{{_('quick filter')}}</button>
                                </div>
                            </form>

                        </div>

                        <table class="table table-striped">
                            <thead> <tr> 
                                <th>
                                <span style="display: inline-block;vertical-align:middle;">
                                    <input type="checkbox" id="check_all_endpoints" style="height:13px;">
                                    <span class="text-warning">{{_('using SHIFT to continue select')}}</span>
                                </span>
                                <span class="pull-right">
                                    <button class="btn btn-default btn-xs" onclick="fn_list_counters();return false;">{{_('list counters')}}</button>
                                </span>
                                </th>
                            </tr></thead>
                        </table>
                        <table class="table table-striped">
                            <thead>
                                <th width="15"></th> <th></th>
                            </thead>
                            <tbody id="tbody-endpoints">
                                {%for obj in endpoint_objs%}
                                <tr>
                                <td><input type="checkbox" class="input shiftCheckbox"
                                    data-eid="{{obj['id']}}"  data-fullname="{{obj['endpoint']}}"></input></td>
                                <td>{{obj['endpoint']}}</td>
                                </tr>
                                {%endfor%}
                            </tbody>
                        </table>

                    </div>
                </div>

            </div>
        </div>
    {%endblock%}

    {% block right_section%}
    <div class="col-md-8">
        <div class="row">
                <div class="col-md-12" id="counters">

                    <div class="panel panel-info">
                        <div class="panel-heading">
                            <img class="loading pull-right" src="/static/img/loading.gif" style="display:none;"></img>
                            {{_('search counters')}}
                        </div>

                        <div class="panel-body">
                            <form role="form">
                                <div class="form-group">
                                    <label>Counter</label>
                                    <input id="counter-search" type="text" class="form-control input-sm">
                                    <p class="help-block"><span class="text-warning">{{_('using SPACE to separate keywords')}}</span></p>
                                </div>
                            </form>

                            <form class="form-inline" role="form">
                                <button class="btn btn-default btn-sm btn-success" onclick="fn_list_counters();return false;">{{_('search')}}</button>
                                <div class="form-group">
                                    <select class="form-control input-sm" id="counter-limit" onchange="fn_list_counters();return false;">
                                        <option value="50"> Limit 50</option>
                                        <option value="100">Limit 100</option>
                                        <option value="500">Limit 500</option>
                                    </select>
                                    <select class="form-control input-sm" id="counter-page" onchange="fn_list_counters();return false;">
                                        {%for p in range(1, 21)%}
                                        <option value="{{p}}"> page {{p}}</option>
                                        {%endfor%}
                                    </select>
                                </div>
                                <div class="form-group">
                                    <input id="counter-filter" type="text" class="form-control input-sm">
                                    <button class="btn btn-default btn-sm btn-info" onclick="filter_counter();return false;">{{_('quick filter')}}</button>
                                    <button class="btn btn-default btn-sm" onclick="fn_delete_counters();return false;">{{_('delete counters')}}</button>
                                </div>

                                <div class="dropdown form-group pull-right">
                                    <a class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" href="#"> {{_('show')}}<span class="caret"></span></a>
                                    <ul class="dropdown-menu" role="menu">
                                      <li><a href="#" class="btn btn-link btn-xs" onclick="fn_show_all('h');return false;">{{_('endpoint view')}}</a></li>
                                      <li><a href="#" class="btn btn-link btn-xs" onclick="fn_show_all('k');return false;">{{_('counter view')}}</a></li>
                                      <li><a href="#" class="btn btn-link btn-xs" onclick="fn_show_all('a');return false;">{{_('multi view')}}</a></li>
                                    </ul>
                                </div>

                            </form>

                        </div>

                        <table class="table table-striped">
                            <thead> <tr>
                                <th width="30px"><input type="checkbox" id="check_all_counters"></th>
                                <th >Counters</th>
                                <th width="60px">{{_('type')}}</th>
                                <th width="60px">{{_('step')}}</th>
                            </tr></thead>

                            <tbody id="tbody-counters"> </tbody>
                        </table>
                    </div>

                </div>
        </div>
    </div>
    {% endblock %}

</div>
{% endblock %}
