date-range-navigator.tpl.html 4.41 KB
<!--

    ThingsBoard, Inc. ("COMPANY") CONFIDENTIAL

    Copyright © 2016-2019 ThingsBoard, Inc. All Rights Reserved.

    NOTICE: All information contained herein is, and remains
    the property of ThingsBoard, Inc. and its suppliers,
    if any.  The intellectual and technical concepts contained
    herein are proprietary to ThingsBoard, Inc.
    and its suppliers and may be covered by U.S. and Foreign Patents,
    patents in process, and are protected by trade secret or copyright law.

    Dissemination of this information or reproduction of this material is strictly forbidden
    unless prior written permission is obtained from COMPANY.

    Access to the source code contained herein is hereby forbidden to anyone except current COMPANY employees,
    managers or contractors who have executed Confidentiality and Non-disclosure agreements
    explicitly covering such access.

    The copyright notice above does not evidence any actual or intended publication
    or disclosure  of  this source code, which includes
    information that is confidential and/or proprietary, and is a trade secret, of  COMPANY.
    ANY REPRODUCTION, MODIFICATION, DISTRIBUTION, PUBLIC  PERFORMANCE,
    OR PUBLIC DISPLAY OF OR THROUGH USE  OF THIS  SOURCE CODE  WITHOUT
    THE EXPRESS WRITTEN CONSENT OF COMPANY IS STRICTLY PROHIBITED,
    AND IN VIOLATION OF APPLICABLE LAWS AND INTERNATIONAL TREATIES.
    THE RECEIPT OR POSSESSION OF THIS SOURCE CODE AND/OR RELATED INFORMATION
    DOES NOT CONVEY OR IMPLY ANY RIGHTS TO REPRODUCE, DISCLOSE OR DISTRIBUTE ITS CONTENTS,
    OR TO MANUFACTURE, USE, OR SELL ANYTHING THAT IT  MAY DESCRIBE, IN WHOLE OR IN PART.

-->
<div class="date-range-navigator"
     ng-class="{'short-mode':vm.ctx.width < 400, 'labels-hidden': settings.hideLabels, 'long-mode': vm.ctx.width >= 400}"
>
    <div class="drn__element picker" ng-hide="settings.hidePicker" ng-if="vm.ctx">
        <div class="picker__wrapper">
            <label ng-hide="settings.hideLabels" ng-bind="'widgets.date-range-navigator.localizationMap.Date picker' | translate"></label>
            <md-date-range ng-model="advancedModel"
                           md-on-select="triggerChange()"
                           localization-map="localizationMap"
                           one-panel="settings.onePanel"
                           auto-confirm="settings.autoConfirm"
                           show-template="settings.showTemplate"
                           first-day-of-week="settings.firstDayOfWeek"
            ></md-date-range>
        </div>
    </div>

    <div class="drn__element navigation" ng-hide="settings.hideInterval">
        <md-input-container class="md-block"
                            flex-gt-sm
        >
            <label ng-hide="settings.hideLabels" ng-bind="'widgets.date-range-navigator.localizationMap.Interval' | translate"></label>
            <md-select ng-model="selectedDateInterval"
                       ng-change="changeInterval()"
                       aria-label="Pick date interval"
            >
                <md-option ng-if="customInterval" ng-value="customInterval.ts">{{'widgets.date-range-navigator.localizationMap.' + customInterval.label | translate}}</md-option>
                <md-option ng-repeat="(dateKey, dateValue) in datesMap" ng-value="dateValue.ts">
                    {{'widgets.date-range-navigator.localizationMap.' + dateValue.label | translate}}
                </md-option>
            </md-select>
        </md-input-container>
    </div>

    <div class="drn__element step" ng-hide="settings.hideStepSize">
        <md-button ng-click="goBack()" class="md-icon-button">
            <md-icon>keyboard_arrow_left</md-icon>
        </md-button>
        <md-input-container class="md-block"
                            flex-gt-sm
        >
            <label ng-hide="settings.hideLabels" ng-bind="'widgets.date-range-navigator.localizationMap.Step size' | translate"></label>
            <md-select ng-model="selectedStepSize"
                       aria-label="Pick date interval"
            >
                <md-option ng-repeat="(dateKey, dateValue) in datesMap" ng-value="dateValue.ts">
                    {{'widgets.date-range-navigator.localizationMap.'+dateValue.label | translate}}
                </md-option>
            </md-select>
        </md-input-container>
        <md-button ng-click="goForth()" class="md-icon-button">
            <md-icon>keyboard_arrow_right</md-icon>
        </md-button>
    </div>
</div>