{% extends "base/base.html" %}
{% load staticfiles %}

{% block title %} Measurement groups {% endblock title %}

{% block stylesheets %}
    {{ block.super}}
{% endblock %}


{% block content %}
        <div class="col-md-3 col-sm-3 col-xs-12" style="">

            <div class="x_panel">
                <div class="x_title">
                    <h2>
                        {% if lang == 'hr'%}
                            Popis grupa
                        {% else %}
                            Group list
                        {% endif %}
                    </h2>
                    <ul class="nav navbar-right panel_toolbox">
                        <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                        </li>
                    </ul>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content" style="max-height: 300px;overflow-y: scroll">
                    <div id="treeview" style="font-size: 10px">

                    </div>
                </div>
            </div>

            <div class="x_panel">
                <div class="x_title">
                    <h2>
                        {% if lang == 'hr'%}
                            Opcije
                        {% else %}
                            Options
                        {% endif %}
                    </h2>
                    <ul class="nav navbar-right panel_toolbox">
                        <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                        </li>
                    </ul>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content" style="">
                    <div class="row">
                            <div class="btn-group btn-group-justified btn-sm" role="group" data-toggle="buttons" style="padding: 5px">
                                <a href="#" role="button" class="btn btn-default btn-xs" id="label-btn" style="pointer-events: none;" aria-disabled="true">
                                {% if lang == 'hr'%}
                                    GRUPA:
                                {% else %}
                                    GROUP:
                                {% endif %}
                                </a>
                                <div class="btn-group" role="group">
                                    <button id="AddNewMeasurementGroup" type="button" onclick="showAddNewMeasurementGroup(this)" class="btn btn-primary btn-sm">
                                        <span class="glyphicon glyphicon-plus"></span>
                                        {% if lang == 'hr'%}
                                            Dodaj
                                        {% else %}
                                            Add
                                        {% endif %}
                                    </button>
                                </div>
                                <div class="btn-group" role="group">
                                    <button id="EditMeasurementGroup" type="button" onclick="showEditMeasurementGroup(this)" class="btn btn-primary btn-sm" disabled>
                                        <span class="glyphicon glyphicon-pencil"></span>
                                        {% if lang == 'hr'%}
                                            Izmjeni
                                        {% else %}
                                            Edit
                                        {% endif %}
                                    </button>
                                </div>
                            </div>
                    </div>

                    <div class="row">
                            <div class="btn-group btn-group-justified btn-sm" role="group" data-toggle="buttons" style="padding: 5px">
                                <a href="#" role="button" class="btn btn-default btn-xs" id="label-btn" style="pointer-events: none;" aria-disabled="true">
                                {% if lang == 'hr'%}
                                    MJERENJE:
                                {% else %}
                                    MEASURE:
                                {% endif %}
                                </a>
                                <div class="btn-group" role="group">
                                    <button id="AddNewMeasurement" type="button" onclick="showAddNewMeasurementGroupMeasurement(this)" class="btn btn-primary btn-sm" disabled>
                                        <span class="glyphicon glyphicon-plus"></span>
                                        {% if lang == 'hr'%}
                                            Dodaj
                                        {% else %}
                                            Add
                                        {% endif %}
                                    </button>
                                </div>
                                <div class="btn-group" role="group">
                                    <button id="EditMeasurement" type="button" onclick="showEditMeasurementGroupMeasurement(this)" class="btn btn-primary btn-sm" disabled>
                                        <span class="glyphicon glyphicon-pencil"></span>
                                        {% if lang == 'hr'%}
                                            Izmjeni
                                        {% else %}
                                            Edit
                                        {% endif %}
                                    </button>
                                </div>
                            </div>
                    </div>


                    <div class="row">
                            <div class="btn-group btn-group-justified btn-sm" role="group" data-toggle="buttons" style="padding: 5px">
                                <a href="#" role="button" class="btn btn-default btn-xs" id="label-btn" style="pointer-events: none;" aria-disabled="true">
                                {% if lang == 'hr'%}
                                    PRORACUN:
                                {% else %}
                                    CALCULATION:
                                {% endif %}
                                </a>
                                <div class="btn-group" role="group">
                                    <button id="AddNewCalculation" type="button" onclick="showAddNewMeasurementGroupCalculation(this)" class="btn btn-primary btn-sm" disabled>
                                        <span class="glyphicon glyphicon-plus"></span>
                                        {% if lang == 'hr'%}
                                            Dodaj
                                        {% else %}
                                            Add
                                        {% endif %}
                                    </button>
                                </div>
                                <div class="btn-group" role="group">
                                    <button id="EditCalculation" type="button" onclick="showEditMeasurementGroupCalculation(this)" class="btn btn-primary btn-sm" disabled>
                                        <span class="glyphicon glyphicon-pencil"></span>
                                        {% if lang == 'hr'%}
                                            Izmjeni
                                        {% else %}
                                            Edit
                                        {% endif %}
                                    </button>
                                </div>
                            </div>
                    </div>

                    {% if lang == 'hr'%}
                        <label for="usr">OSTALO:</label>
                    {% else %}
                        <label for="usr">OTHER:</label>
                    {% endif %}


                    <input id="spinAvg" type="text" value="1" >

                    <button type="button" class="btn btn-default" onclick="printMeasurementPlot()" style="width: 100%; margin-bottom: 5pt">
                        <span class="glyphicon glyphicon-print" ></span>
                    </button>

                    {% if lang == 'hr'%}
                        <label for="usr">INTERVAL PROMATRANJA:</label>
                    {% else %}
                        <label for="usr">DATE INTERVAL:</label>
                    {% endif %}
                    <div id="reportrange" style="background: #fff; cursor: pointer; padding: 5px 10px; margin-bottom: 5pt; border: 1px solid #ccc; width: 100%; text-align: center">
                        <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>&nbsp;
                        <span></span> <b class="caret"></b>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-9 col-sm-9 col-xs-12" style="">

            <div class="x_panel">
                <div class="x_title">
                    <h2>
                        {% if lang == 'hr'%}
                            Prikaz
                        {% else %}
                            Graph
                        {% endif %}
                    </h2>
                    <ul class="nav navbar-right panel_toolbox">
                        <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                        </li>
                    </ul>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content" style="">
                    <div id="highplot" style="height: 500px; margin: 0 auto; "></div>

                    <div id="legend" style="width: 100%; height: 10%; margin-top: 15px; text-align: center "></div>
                    <img id="exportedImage" style="width:0;height:0;"/>
                    <div id="hiddenDiv" style="display:none"></div>
                </div>
            </div>
        </div>
{% endblock %}

{% block right_sidebar %}

{% endblock %}

{% block javascripts %}
    {{ block.super}}
    <script type="text/javascript" src="{%static "dygraph/dygraph-custom-labels.js" %}"></script>
    <script type="text/javascript" src="{%static "dygraph/dygraph-export.js" %}"></script>
    <script type="text/javascript" src="{%static "dygraph/dygraph-synchronize.js" %}"></script>
    <script type="text/javascript" src="{%static "js/daterangepicker.js" %}"></script>
    <script type="text/javascript" src="{%static "js/moment.min.js" %}"></script>
    <script type="text/javascript" src="{%static "js/bootstrap-treeview.js" %}"></script>
    <script type="text/javascript" src="{%static "js/dateformat.js" %}"></script>
    <script type="text/javascript" src="{%static "js/bootstrap-touchspin.min.js" %}"></script>
    <script type="text/javascript" src="{%static "js/math.js" %}"></script>

    <script>
        {% include "ll_js/measurement_groups.js" %}
    </script>

{% endblock %}