annotation.html

{% extends "adim/annotation.html" %}
{% load static i18n adim_app_tags %}


{# ============== #}
{# MAIN CONTAINER #}
{# ============== #}
{% block main_container %}
    {% with adim_env="adim-env-anodate" %}
        {{ block.super }}
    {% endwith %}
{% endblock %}


{# ============= #}
{# Drawing Tools #}
{# ============= #}
{% block draw-tool-tb %}
    <label class="btn btn-lg btn-primary" title="Selection (A)">
        <input type="radio" name="toolType" value="select" id="tool-select" data-tool-name="select">
        <span class="fas fa-mouse-pointer"></span><span class="tool-text"> Select</span>
    </label>
    <label class="btn btn-lg btn-primary" title="Déplacement (Espace)">
        <input type="radio" name="toolType" value="pan" id="tool-pan" data-tool-name="pan">
        <span class="fas fa-hand-paper"></span><span class="tool-text"> Pan</span>
    </label>

    <label class="btn btn-lg btn-primary" title="Dessin libre (D)">
        <input type="radio" name="toolType" value="drawing" id="tool-drawing" data-tool-name="drawing">
        <span class="fas fa-pencil-alt" data-fa-transform="flip-h"></span><span class="tool-text"> Dessin</span>
    </label>
    <label class="btn btn-lg btn-primary" title="Lignes (L)">
        <input type="radio" name="toolType" value="lines" id="tool-lines" data-tool-name="lines">
        <span class="fas fa-minus"></span><span class="tool-text"> Lignes</span>
    </label>
    <label class="btn btn-lg btn-primary" title="Cercle (C)">
        <input type="radio" name="toolType" value="ellipse" id="tool-ellipse" data-tool-name="ellipse">
        <span class="far fa-circle"></span><span class="tool-text"> Cercle</span>
    </label>
    <label class="btn btn-lg btn-primary" title="Rectangle (R)">
        <input type="radio" name="toolType" value="rectangle" id="tool-rectangle" data-tool-name="rectangle">
        <span class="far fa-square"></span><span class="tool-text"> Rectangle</span>
    </label>

    <label class="btn btn-lg-off btn-primary" title="Marker">
        <input type="radio" name="toolType" value="text" id="tool-marker" data-tool-name="marker">
        <span class="fas fa-map-marker-alt"></span>
    </label>
{% endblock %}


{% block param-tool-tb %}
    <div class="btn-group" id="tool-colorselect" role="group">
        <button id="btnGroupDrop1" type="button" class="btn btn-light tinter dropdown-toggle" data-toggle="dropdown"
                aria-haspopup="true" aria-expanded="false"
                data-attr-name="color" title="Choix de la couleur">
            <span class="adim-icon-color"></span>
        </button>
        <div class="dropdown-menu color-menu right" aria-labelledby="btnGroupDrop1">
            <div class="dropdown-item-text p-0">
                <div class="d-flex flex-row">
                    <div class="p-2 m-2 c1 cpicker"></div>
                    <div class="p-2 m-2 c2 cpicker"></div>
                </div>
                <div class="d-flex flex-row">
                    <div class="p-2 m-2 c3 cpicker"></div>
                    <div class="p-2 m-2 c4 cpicker"></div>
                </div>
                <div class="d-flex flex-row">
                    <div class="p-2 m-2 c5 cpicker"></div>
                    <div class="p-2 m-2 c6 cpicker"></div>
                </div>
                <div class="d-flex flex-row mt-2">
                    <input type="color" name="colorpicker" value="#8017d4"
                           class="p-0 cx" style="border-radius: 25px;">
                </div>
            </div>
        </div>
    </div>

    <button class="btn btn-light" id="attr-font" type="button">
        <span class="fas fa-text-height"></span>
    </button>

    <div class="sldr btn btn-light" id="attr-size-slider">
        <span class="adim-icon-line-width" title="Epaisseur du trait"></span>
        <input type="range" min="1" max="50" step="1" value="5"
               data-attr-name="size"
               style="transform: rotate(270deg);width: 50px;margin-top: 15px;"/><br/>
        <output name="sliderOutput" id="sliderOutputId" class="badge badge-secondary" style="margin-top:15px;">5
        </output>
    </div>

    <div class="sldr btn btn-light" id="attr-opacity-slider">
        {#                        <div class="small tool-title" title="Opacité">Opacité</div>#}
        <span class="adim-icon-opacity" title="Opacité"></span>
        <input type="range" min="0" max="100" step="10" value="100"
               data-attr-name="opacity"
               style="transform: rotate(270deg);width: 50px;margin-top: 15px;"/><br/>
        <output name="opacityOutput" id="opacityOutputId" class="badge badge-secondary" style="margin-top:15px;">100%
        </output>
    </div>

    <button class="btn btn-light" id="attr-orderup" type="button" autocomplete="off"
            title="Mettre au premier plan. shift-click: avancer de un niveau">
        <i class="material-icons">flip_to_front</i>
    </button>

    <button class="btn btn-light" id="attr-orderdown" type="button" autocomplete="off"
            title="Mettre à l'arrière-plan. shift-click: reculer d'un niveau">
        <i class="material-icons">flip_to_back</i>
    </button>
{% endblock param-tool-tb %}


{# ================= #}
{# Side Panel Column #}
{# ================= #}
{% block side-col-panel-group %}

{% block publication-panel %}
    {% with collapsed=1 %}{{ block.super }}{% endwith %}
{% endblock publication-panel %}

<a class="btn btn-secondary btn-sm btn-block d-inline-flex" data-toggle="collapse" href="#collapseDisplay" role="button"
   aria-expanded="false" aria-controls="collapseDisplay">
    <div>Afficher</div>
    <i class="fas fa-chevron-circle-up ml-auto"></i>
</a>

<div class="collapse show panel-dark" id="collapseDisplay">
    <div class="card card-body">
        <div class="card-text" id="annotation-display-container">
            <!--div class="btn-group x-btn-group-2-col adim-display-type-selector category-list"-->
            <div class="adim-display-type-selector">
                {% set compteur = 0 %}
                {% with cat_set_name=anobj.envparam.category_set_name|default:"default" %}
                {% for cat in env_settings.categories|get_item:cat_set_name %}
                {% ifequal compteur 0 %}
                    <div class="row">
                {% endifequal %}
                <div class="col-6" style="padding:0;">
                    <button type="button" class="btn btn-sm btn-block btn-info btn-adim-layer active"
                            data-env="{{ adim_env }}"
                            data-category="{{ cat.id }}"
                            title="Afficher/masquer la catégorie «{{ cat.label }}»">
                        <span class="fas fa-tag" style="color:{{ cat.color }};"></span><span
                            class="btn-adim-layer-label"> {{ cat.label }}</span>
                    </button>
                </div>
                {% ifequal compteur 1 %}
                </div>
                {% set compteur = 0 %}
                {% else %}
                {% set compteur = 1 %}
                {% endifequal %}
                {% endfor %}
                {% endwith %}

                {#                Bouton "Sans catégorie et bouton "image" sur une/deux colonnes #}
                {% ifequal compteur 1 %}
                    <div class="col-6" style="padding:0;">
                        <button type="button" class="btn btn-sm btn-block btn-info btn-adim-layer active"
                                data-category="image">
                            <span class="fas fa-image"></span> Image
                        </button>
                    </div>
                    </div>
                    {% else %}
                    <div class="row">
                        <div class="col-12" style="padding:0;">
                            <button type="button" class="btn btn-block btn-sm btn-info btn-adim-layer active"
                                    data-category="image">
                                <span class="fas fa-image"></span> Image
                            </button>
                        </div>
                    </div>
                {% endifequal %}
        </div>
    </div>
    <!--/div-->
</div>
</div>


{% block property-panel %}{{ block.super }}{% endblock %}

{% block members-panel %}
    {% with collapsed=1 hidenames=1 %}{{ block.super }}{% endwith %}
{% endblock %}

<div id="annotation-markers-panel">
    <a class="btn btn-secondary btn-sm btn-block d-inline-flex" data-toggle="collapse" href="#collapseMarkers"
       role="button"
       aria-expanded="false" aria-controls="collapseMarkers">
        <div>Labels</div>
        <i class="fas fa-chevron-circle-up ml-auto"></i>
    </a>

    <div class="collapse show panel-dark" id="collapseMarkers">
        <div class="card card-body">
            <div class="card-text" id="annotation-markers-container">
                <ul class="list-group">
                </ul>
            </div>
        </div>
    </div>

    <script type="text/template" id="adim-tool-marker-label">
        <li class="adim-tool-marker-label-item list-group-item list-group-item-secondary"
            data-label="<%= label %>" data-annot-id="<%= id %>">
            <div class="d-inline-flex justify-content-start">
                <div class="p-1 list-group-item-heading"><h4><%= label %></h4></div>
                <div class="ml-auto p-1 list-group-item-text">
                    <textarea class="form-control" style="resize: vertical" <%= ro ? 'readonly' : '' %>><%= labelComment
                    %></textarea>
                </div>
            </div>
        </li>
    </script>
</div>

{% endblock %}


{# ============== #}
{# Property Panel #}
{# ============== #}
{% block property-panel-content %}
{% comment %}
    <div class="property-group confidence-prop">
        <label class="col-form-label" for="confidence-input">
            <small>Confiance: &nbsp;</small>
        </label>
        <input id="confidence-input" name="confidence" type="number" class="form-control rating" data-display="on"
               data-min="1" data-max="3"/>
    </div>
{% endcomment %}
<div class="property-group category-prop">
    <label class="col-form-label">
        Catégorie&hairsp;:
    </label>
    <div class="btn-toolbar btn-group-toggle category-list" id="prop-annot-category" data-toggle="buttons">
        {% set compteur = 0 %}
        {% with cat_set_name=anobj.envparam.category_set_name|default:"default" %}
        {% for cat in env_settings.categories|get_item:cat_set_name %}
        {% ifequal compteur 0 %}
            <div class="row btn-group" style="width: 100%;margin-left: 0;">
        {% endifequal %}
        <!--div class="col-6 btn-group" style="padding:0;"-->
        <button type="button" class="btn btn-sm btn-cat"
                data-env="{{ adim_env }}"
                data-category="{{ cat.id }}" data-color="{{ cat.color }}" data-color-bg="{{ cat.colorbg }}"
                title="{{ cat.title|default:cat.label }}"
                style="width:50%;height:100%;">
            <input type="radio" name="category" autocomplete="off"/>
            {{ cat.label }}
        </button>
        <!--/div-->
        {% ifequal compteur 1 %}
        </div>
        {% set compteur = 0 %}
        {% else %}
        {% set compteur = 1 %}
        {% endifequal %}
        {% endfor %}
        {% comment %}
            <label class="btn btn-sm btn-block btn-cat" data-category="cat_1" title="Marqueur">
                <input type="radio" name="category" autocomplete="off"/>
                Marqueur
            </label>
            <label class="btn btn-sm btn-block btn-cat" data-category="cat_2" title="Une date absolue">
                <input type="radio" name="category" autocomplete="off"/>
                Date
            </label>
            <label class="btn btn-sm btn-block btn-cat" data-category="cat_3">
                <input type="radio" name="category" autocomplete="off"/>
                Année
            </label>
            <label class="btn btn-sm btn-block btn-cat" data-category="cat_4" data-color="#FFA826">
                <input type="radio" name="category" autocomplete="off"/>
                Mois
            </label>
            <label class="btn btn-sm btn-block btn-cat" data-category="cat_4" data-color="#FFA826">
                <input type="radio" name="category" autocomplete="off"/>
                Mois
            </label>
            <label class="btn btn-sm btn-block btn-cat" data-category="cat_4" data-color="#FFA826">
                <input type="radio" name="category" autocomplete="off"/>
                Mois
            </label>
            <label class="btn btn-sm btn-block btn-cat" data-category="cat_4" data-color="#FFA826">
                <input type="radio" name="category" autocomplete="off"/>
                Mois
            </label>
            <label class="btn btn-sm btn-block btn-cat" data-category="cat_4" data-color="#FFA826">
                <input type="radio" name="category" autocomplete="off"/>
                Mois
            </label>
        {% endcomment %}
        {% endwith %}
    </div>
</div>

{% comment %}
    <div class="property-group comment-prop">
        <label class="col-form-label" for="prop-annot-comment">
            <small>Commentaire&hairsp;:</small>
        </label>
        <textarea class="form-control" id="prop-annot-comment" name="comment"></textarea>
    </div>
{% endcomment %}
{% endblock property-panel-content %}


{# ============================ #}
{# Altertative Side Panel Group #}
{# ============================ #}
{% block alt-side-col-panel-group %}
    <div id="alt-side-col-panel-group" class="p-1 w-50 panel-group"
         style="margin-right:0;padding-right:0;display:none;">

        <div id="shared-annotation-markers-panel" style="display: none;">
            <a class="btn btn-secondary btn-sm btn-block d-inline-flex" data-toggle="collapse"
               href="#collapseSharedMarkers" role="button"
               aria-expanded="false" aria-controls="collapseSharedMarkers">
                <div>Labels</div>
                <i class="fas fa-chevron-circle-right ml-auto"></i>
            </a>

            <div class="collapse show panel-dark show" id="collapseSharedMarkers">
                <div class="card card-body">
                    <div class="card-text" id="shared-annotation-markers-container">
                        <ul class="list-group">
                        </ul>
                    </div>
                </div>
            </div>

            <script type="text/template" id="shared-adim-tool-marker-label">
                <li class="adim-tool-marker-label-item list-group-item" data-annot-id="<%= id %>">
                    <div class="d-flex justify-content-start">
                        <div class="p-1 list-group-item-heading"><h5><%= label %></h5></div>
                        <div class="p-1 list-group-item-text"><%= labelComment %></div>
                    </div>
                </li>
            </script>
        </div>

    </div>
{% endblock alt-side-col-panel-group %}





{% block content_js %}
    <script type="application/javascript" src="{% static "js/libs/require.min.js" %}"
            data-main="{% static "js/anodate_app" %}{{ JS_MIN }}"></script>
{% endblock %}



{% comment %}
    {# This js config allow to specify the annotation types to be displayed. #}
    {# If not defined, it will be built from the tools found in the tool bars #}
    {% block inline_script %}
        {{ block.super }}
        <script>
            window.ADIM_CONFIG.activeTools = ['select', 'pan', 'drawing', 'lines', 'rectangle', 'arrow'];
        </script>
    {% endblock inline_script %}
{% endcomment %}