UI. Date-range-navigator-widget (init)

This commit is contained in:
okolesnik 2019-03-29 16:56:04 +02:00
parent 1aac2ec758
commit d3e041db13
19 changed files with 1538 additions and 330 deletions

View File

@ -0,0 +1,25 @@
{
"widgetsBundle": {
"alias": "date",
"title": "Date",
"image": null
},
"widgetTypes": [
{
"alias": "date_range_navigator",
"name": "Date-range-navigator",
"descriptor": {
"type": "static",
"sizeX": 5,
"sizeY": 5.5,
"resources": [],
"templateHtml": "<date-range-navigator-widget class=\"date-range-navigator-widget\" ctx=\"ctx\"></date-range-navigator-widget>",
"templateCss": "",
"controllerScript": "self.onInit = function() {\n scope = self.ctx.$scope;\n scope.ctx = self.ctx;\n}",
"settingsSchema": "{\n \"schema\": {\n \"type\": \"object\",\n \"title\": \"Settings\",\n \"properties\": {\n \"hidePicker\": {\n \"title\": \"Hide date range picker\",\n \"type\": \"boolean\",\n \"default\": false\n },\n \"onePanel\": {\n \"title\": \"Date range picker one panel\",\n \"type\": \"boolean\",\n \"default\": false\n },\n \"autoConfirm\": {\n \"title\": \"Date range picker auto confirm\",\n \"type\": \"boolean\",\n \"default\": false\n },\n \"showTemplate\": {\n \"title\": \"Date range picker show template\",\n \"type\": \"boolean\",\n \"default\": false\n },\n \"firstDayOfWeek\": {\n \"title\": \"First day of the week\",\n \"type\": \"number\",\n \"default\": 1\n },\n \"hideInterval\": {\n \"title\": \"Hide interval\",\n \"type\": \"boolean\",\n \"default\": false\n },\n \"initialInterval\": {\n\t\t\t\t\"title\": \"Initial interval\",\n\t\t\t\t\"type\": \"string\",\n\t\t\t\t\"default\": \"week\"\n\t\t\t},\n \"hideStepSize\": {\n \"title\": \"Hide step size\",\n \"type\": \"boolean\",\n \"default\": false\n },\n \"stepSize\": {\n\t\t\t\t\"title\": \"Initial step size\",\n\t\t\t\t\"type\": \"string\",\n\t\t\t\t\"default\": \"day\"\n\t\t\t},\n \"hideLabels\": {\n \"title\": \"Hide labels\",\n \"type\": \"boolean\",\n \"default\": false\n },\n \"useSessionStorage\": {\n \"title\": \"Use session storage\",\n \"type\": \"boolean\",\n \"default\": true\n }\n }\n },\n \"form\": [\n \"hidePicker\",\n\t\t\"onePanel\",\n\t\t\"autoConfirm\",\n\t\t\"showTemplate\",\n\t\t\"firstDayOfWeek\",\n \"hideInterval\",\n {\n\t\t\t\"key\": \"initialInterval\",\n\t\t\t\"type\": \"rc-select\",\n\t\t\t\"multiple\": false,\n\t\t\t\"items\": [\n\t\t\t\t{\n\t\t\t\t\t\"value\": \"hour\",\n\t\t\t\t\t\"label\": \"Hour\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"value\": \"day\",\n\t\t\t\t\t\"label\": \"Day\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"value\": \"week\",\n\t\t\t\t\t\"label\": \"Week\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"value\": \"twoWeeks\",\n\t\t\t\t\t\"label\": \"2 weeks\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"value\": \"month\",\n\t\t\t\t\t\"label\": \"Month\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"value\": \"threeMonths\",\n\t\t\t\t\t\"label\": \"3 months\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"value\": \"sixMonths\",\n\t\t\t\t\t\"label\": \"6 months\"\n\t\t\t\t}\n\t\t\t]\n\t\t},\n \"hideStepSize\",\n {\n\t\t\t\"key\": \"stepSize\",\n\t\t\t\"type\": \"rc-select\",\n\t\t\t\"multiple\": false,\n\t\t\t\"items\": [\n\t\t\t\t{\n\t\t\t\t\t\"value\": \"hour\",\n\t\t\t\t\t\"label\": \"Hour\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"value\": \"day\",\n\t\t\t\t\t\"label\": \"Day\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"value\": \"week\",\n\t\t\t\t\t\"label\": \"Week\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"value\": \"twoWeeks\",\n\t\t\t\t\t\"label\": \"2 weeks\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"value\": \"month\",\n\t\t\t\t\t\"label\": \"Month\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"value\": \"threeMonths\",\n\t\t\t\t\t\"label\": \"3 months\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"value\": \"sixMonths\",\n\t\t\t\t\t\"label\": \"6 months\"\n\t\t\t\t}\n\t\t\t]\n\t\t},\n\t\t\"hideLabels\",\n\t\t\"useSessionStorage\"\n ]\n}",
"dataKeySettingsSchema": "{}\n",
"defaultConfig": "{\"datasources\":[{\"type\":\"static\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.15479322438769105,\"funcBody\":\"var value = prevValue + Math.random() * 100 - 50;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -1000) {\\n\\tvalue = -1000;\\n} else if (value > 1000) {\\n\\tvalue = 1000;\\n}\\nreturn value;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":true,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"defaultInterval\":\"week\",\"stepSize\":\"day\"},\"title\":\"Date-range-navigator\",\"dropShadow\":true,\"enableFullscreen\":true,\"widgetStyle\":{},\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"useDashboardTimewindow\":true,\"showLegend\":false,\"actions\":{}}"
}
}
]
}

671
ui/package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -65,6 +65,7 @@
"material-ui": "^0.16.1", "material-ui": "^0.16.1",
"material-ui-number-input": "^5.0.16", "material-ui-number-input": "^5.0.16",
"md-color-picker": "0.2.6", "md-color-picker": "0.2.6",
"md-date-range-picker": "^0.8.4",
"mdPickers": "git://github.com/alenaksu/mdPickers.git#0.7.5", "mdPickers": "git://github.com/alenaksu/mdPickers.git#0.7.5",
"moment": "^2.15.0", "moment": "^2.15.0",
"ngFlowchart": "git://github.com/thingsboard/ngFlowchart.git#master", "ngFlowchart": "git://github.com/thingsboard/ngFlowchart.git#master",

View File

@ -22,6 +22,7 @@ import thingsboardTimeseriesTableWidget from '../widget/lib/timeseries-table-wid
import thingsboardAlarmsTableWidget from '../widget/lib/alarms-table-widget'; import thingsboardAlarmsTableWidget from '../widget/lib/alarms-table-widget';
import thingsboardEntitiesTableWidget from '../widget/lib/entities-table-widget'; import thingsboardEntitiesTableWidget from '../widget/lib/entities-table-widget';
import thingsboardExtensionsTableWidget from '../widget/lib/extensions-table-widget'; import thingsboardExtensionsTableWidget from '../widget/lib/extensions-table-widget';
import thingsboardDateRangeNavigatorWidget from '../widget/lib/date-range-navigator/date-range-navigator';
import thingsboardRpcWidgets from '../widget/lib/rpc'; import thingsboardRpcWidgets from '../widget/lib/rpc';
@ -33,6 +34,7 @@ import TbCanvasDigitalGauge from '../widget/lib/canvas-digital-gauge';
import TbMapWidget from '../widget/lib/map-widget'; import TbMapWidget from '../widget/lib/map-widget';
import TbMapWidgetV2 from '../widget/lib/map-widget2'; import TbMapWidgetV2 from '../widget/lib/map-widget2';
import 'jquery.terminal/js/jquery.terminal.min.js'; import 'jquery.terminal/js/jquery.terminal.min.js';
import 'jquery.terminal/css/jquery.terminal.min.css'; import 'jquery.terminal/css/jquery.terminal.min.css';
@ -43,7 +45,8 @@ import thingsboardTypes from '../common/types.constant';
import thingsboardUtils from '../common/utils.service'; import thingsboardUtils from '../common/utils.service';
export default angular.module('thingsboard.api.widget', ['oc.lazyLoad', thingsboardLedLight, thingsboardTimeseriesTableWidget, export default angular.module('thingsboard.api.widget', ['oc.lazyLoad', thingsboardLedLight, thingsboardTimeseriesTableWidget,
thingsboardAlarmsTableWidget, thingsboardEntitiesTableWidget, thingsboardExtensionsTableWidget, thingsboardRpcWidgets, thingsboardTypes, thingsboardUtils]) thingsboardAlarmsTableWidget, thingsboardEntitiesTableWidget, thingsboardExtensionsTableWidget,
thingsboardDateRangeNavigatorWidget, thingsboardRpcWidgets, thingsboardTypes, thingsboardUtils])
.factory('widgetService', WidgetService) .factory('widgetService', WidgetService)
.name; .name;

View File

@ -29,6 +29,7 @@ import 'angular-translate-storage-cookie';
import 'angular-translate-handler-log'; import 'angular-translate-handler-log';
import 'angular-translate-interpolation-messageformat'; import 'angular-translate-interpolation-messageformat';
import 'md-color-picker'; import 'md-color-picker';
import 'md-date-range-picker';
import mdPickers from 'mdPickers'; import mdPickers from 'mdPickers';
import ngSanitize from 'angular-sanitize'; import ngSanitize from 'angular-sanitize';
import FBAngular from 'angular-fullscreen'; import FBAngular from 'angular-fullscreen';
@ -65,6 +66,7 @@ import 'angular-hotkeys/build/hotkeys.min.css';
import 'angular-carousel/dist/angular-carousel.min.css'; import 'angular-carousel/dist/angular-carousel.min.css';
import 'angular-material-expansion-panel/dist/md-expansion-panel.min.css'; import 'angular-material-expansion-panel/dist/md-expansion-panel.min.css';
import 'ngFlowchart/dist/flowchart.css'; import 'ngFlowchart/dist/flowchart.css';
import 'md-date-range-picker/src/md-date-range-picker.css';
import '../scss/main.scss'; import '../scss/main.scss';
import thingsboardThirdpartyFix from './common/thirdparty-fix'; import thingsboardThirdpartyFix from './common/thirdparty-fix';
@ -106,6 +108,7 @@ angular.module('thingsboard', [
angularSocialshare, angularSocialshare,
'pascalprecht.translate', 'pascalprecht.translate',
'mdColorPicker', 'mdColorPicker',
'ngMaterialDateRangePicker',
mdPickers, mdPickers,
ngSanitize, ngSanitize,
FBAngular.name, FBAngular.name,

View File

@ -1549,6 +1549,65 @@
"widget-type-file": "Widget-Typdatei", "widget-type-file": "Widget-Typdatei",
"invalid-widget-type-file-error": "Widget-Typ kann nicht importiert werden: Ungültige Datenstruktur des Widget-Typs." "invalid-widget-type-file-error": "Widget-Typ kann nicht importiert werden: Ungültige Datenstruktur des Widget-Typs."
}, },
"widgets": {
"date-range-navigator": {
"localizationMap": {
"Sun": "So.",
"Mon": "Mo.",
"Tue": "Di.",
"Wed": "Mi.",
"Thu": "Do.",
"Fri": "Fr.",
"Sat": "Sa.",
"Jan": "Jan.",
"Feb": "Feb.",
"Mar": "März",
"Apr": "Apr.",
"May": "Mai",
"Jun": "Juni",
"Jul": "Juli",
"Aug": "Aug.",
"Sep": "Sep.",
"Oct": "Okt.",
"Nov": "Nov.",
"Dec": "Dez.",
"January": "Januar",
"February": "Februar",
"March": "März",
"April": "April",
"June": "Juni",
"July": "Juli",
"August": "August",
"September": "September",
"October": "Oktober",
"November": "November",
"December": "Dezember",
"Custom Date Range": "Benutzerdefinierter Datumsbereich",
"Date Range Template": "Datumsbereichsvorlage",
"Today": "Heute",
"Yesterday": "Gestern",
"This Week": "Diese Woche",
"Last Week": "Letzte Woche",
"This Month": "Diesen Monat",
"Last Month": "Im vergangenen Monat",
"Year": "Jahr",
"This Year": "Dieses Jahr",
"Last Year": "Vergangenes Jahr",
"Date picker": "Datumsauswahl",
"Hour": "Stunde",
"Day": "Tag",
"Week": "Woche",
"2 weeks": "2 Wochen",
"Month": "Monat",
"3 months": "3 Monate",
"6 months": "6 Monate",
"Custom interval": "Benutzerdefiniertes Intervall",
"Interval": "Intervall",
"Step size": "Schrittlänge",
"Ok": "Ok"
}
}
},
"icon": { "icon": {
"icon": "Symbol", "icon": "Symbol",
"select-icon": "Symbol auswählen", "select-icon": "Symbol auswählen",

View File

@ -1554,6 +1554,65 @@
"widget-type-file": "Widget type file", "widget-type-file": "Widget type file",
"invalid-widget-type-file-error": "Unable to import widget type: Invalid widget type data structure." "invalid-widget-type-file-error": "Unable to import widget type: Invalid widget type data structure."
}, },
"widgets": {
"date-range-navigator": {
"localizationMap": {
"Sun": "Sun",
"Mon": "Mon",
"Tue": "Tue",
"Wed": "Wed",
"Thu": "Thu",
"Fri": "Fri",
"Sat": "Sat",
"Jan": "Jan",
"Feb": "Feb",
"Mar": "Mar",
"Apr": "Apr",
"May": "May",
"Jun": "Jun",
"Jul": "Jul",
"Aug": "Aug",
"Sep": "Sep",
"Oct": "Oct",
"Nov": "Nov",
"Dec": "Dec",
"January": "January",
"February": "February",
"March": "March",
"April": "April",
"June": "June",
"July": "July",
"August": "August",
"September": "September",
"October": "October",
"November": "November",
"December": "December",
"Custom Date Range": "Custom Date Range",
"Date Range Template": "Date Range Template",
"Today": "Today",
"Yesterday": "Yesterday",
"This Week": "This Week",
"Last Week": "Last Week",
"This Month": "This Month",
"Last Month": "Last Month",
"Year": "Year",
"This Year": "This Year",
"Last Year": "Last Year",
"Date picker": "Date picker",
"Hour": "Hour",
"Day": "Day",
"Week": "Week",
"2 weeks": "2 Weeks",
"Month": "Month",
"3 months": "3 Months",
"6 months": "6 Months",
"Custom interval": "Custom interval",
"Interval": "Interval",
"Step size": "Step size",
"Ok": "Ok"
}
}
},
"icon": { "icon": {
"icon": "Icon", "icon": "Icon",
"select-icon": "Select icon", "select-icon": "Select icon",

View File

@ -1549,6 +1549,65 @@
"widget-type-file": "Archivo de tipo de widget", "widget-type-file": "Archivo de tipo de widget",
"invalid-widget-type-file-error": "No se puede importar tipo de widget: Estructura de datos del tipo de widget es inválida." "invalid-widget-type-file-error": "No se puede importar tipo de widget: Estructura de datos del tipo de widget es inválida."
}, },
"widgets": {
"date-range-navigator": {
"localizationMap": {
"Sun": "Dom.",
"Mon": "Lun.",
"Tue": "Mar.",
"Wed": "Mié",
"Thu": "Jue.",
"Fri": "Vie.",
"Sat": "Sáb.",
"Jan": "Ene.",
"Feb": "Feb.",
"Mar": "Mar.",
"Apr": "Abr.",
"May": "May.",
"Jun": "Jun.",
"Jul": "Jul.",
"Aug": "Ago.",
"Sep": "Sept.",
"Oct": "Oct.",
"Nov": "Nov.",
"Dec": "Dic.",
"January": "Enero",
"February": "Febrero",
"March": "Marzo",
"April": "Abril",
"June": "Junio",
"July": "Julio",
"August": "Agosto",
"September": "Septiembre",
"October": "Octubre",
"November": "Noviembre",
"December": "Diciembre",
"Custom Date Range": "Intervalo de fechas personalizado",
"Date Range Template": "Plantilla de rango de fechas",
"Today": "Hoy",
"Yesterday": "Ayer",
"This Week": "Esta semana",
"Last Week": "La semana pasada",
"This Month": "Este mes",
"Last Month": "El mes pasado",
"Year": "Año",
"This Year": "Este año",
"Last Year": "Último",
"Date picker": "Date picker",
"Hour": "Hora",
"Day": "Día",
"Week": "Semana",
"2 weeks": "2 Semanas",
"Month": "Mes",
"3 months": "3 Meses",
"6 months": "6 Meses",
"Custom interval": "Intervalo personalizado",
"Interval": "Intervalo",
"Step size": "Numero de pie",
"Ok": "De acuerdo"
}
}
},
"icon": { "icon": {
"icon": "Icono", "icon": "Icono",
"select-icon": "Seleccionar icono", "select-icon": "Seleccionar icono",

View File

@ -1549,6 +1549,65 @@
"widget-type-file": "پرونده نوع ويجت", "widget-type-file": "پرونده نوع ويجت",
"invalid-widget-type-file-error": ".وارد کردن نوع ويجت ممکن نيست: ساختار داده نوع ويجت نامعتبر است" "invalid-widget-type-file-error": ".وارد کردن نوع ويجت ممکن نيست: ساختار داده نوع ويجت نامعتبر است"
}, },
"widgets": {
"date-range-navigator": {
"localizationMap": {
"Sun": "یکشنبه",
"Mon": "دوشنبه",
"Tue": "سه‌شنبه",
"Wed": "چهارشنبه",
"Thu": "پنجشنبه",
"Fri": "جمعه",
"Sat": "شنبه",
"Jan": "ژانویهٔ",
"Feb": "فوریهٔ",
"Mar": "مارس",
"Apr": "آوریل",
"May": "مهٔ",
"Jun": "ژوئن",
"Jul": "ژوئیهٔ",
"Aug": "اوت",
"Sep": "سپتامبر",
"Oct": "اکتبر",
"Nov": "نوامبر",
"Dec": "دسامبر",
"January": "January",
"February": "February",
"March": "March",
"April": "April",
"June": "June",
"July": "July",
"August": "August",
"September": "September",
"October": "October",
"November": "November",
"December": "December",
"Custom Date Range": "Custom Date Range",
"Date Range Template": "Date Range Template",
"Today": "Today",
"Yesterday": "Yesterday",
"This Week": "This Week",
"Last Week": "Last Week",
"This Month": "This Month",
"Last Month": "Last Month",
"Year": "Year",
"This Year": "This Year",
"Last Year": "Last Year",
"Date picker": "Date picker",
"Hour": "Hour",
"Day": "Day",
"Week": "Week",
"2 weeks": "2 weeks",
"Month": "Month",
"3 months": "3 months",
"6 months": "6 months",
"Custom interval": "Custom interval",
"Interval": "Interval",
"Step size": "Step size",
"Ok": "Ok"
}
}
},
"icon": { "icon": {
"icon": "آيکون", "icon": "آيکون",
"select-icon": "انتخاب آيکون", "select-icon": "انتخاب آيکون",

View File

@ -1436,6 +1436,65 @@
"invalid-widget-type-file-error": "Impossible d'importer le type de widget: structure de données de type widget invalide.", "invalid-widget-type-file-error": "Impossible d'importer le type de widget: structure de données de type widget invalide.",
"widget-type-file": "Fichier de type Widget" "widget-type-file": "Fichier de type Widget"
}, },
"widgets": {
"date-range-navigator": {
"localizationMap": {
"Sun": "Dim.",
"Mon": "Lun.",
"Tue": "Mar.",
"Wed": "Mer.",
"Thu": "Jeu.",
"Fri": "Ven.",
"Sat": "Sam.",
"Jan": "Janv.",
"Feb": "Févr.",
"Mar": "Mars",
"Apr": "Avr.",
"May": "Mai",
"Jun": "Juin",
"Jul": "Juil.",
"Aug": "Août",
"Sep": "Sept.",
"Oct": "Oct.",
"Nov": "Nov.",
"Dec": "Déc.",
"January": "Janvier",
"February": "Février",
"March": "Mars",
"April": "Avril",
"June": "Juin",
"July": "Juillet",
"August": "Août",
"September": "Septembre",
"October": "Octobre",
"November": "Novembre",
"December": "Décembre",
"Custom Date Range": "Plage de dates personnalisée",
"Date Range Template": "Modèle de plage de dates",
"Today": "Aujourd'hui",
"Yesterday": "Hier",
"This Week": "Cette semaine",
"Last Week": "La semaine dernière",
"This Month": "Ce mois-ci",
"Last Month": "Le mois dernier",
"Year": "Année",
"This Year": "Cette année",
"Last Year": "L'année dernière",
"Date picker": "Sélecteur de date",
"Hour": "Heure",
"Day": "Journée",
"Week": "La semaine",
"2 weeks": "2 Semaines",
"Month": "Mois",
"3 months": "3 Mois",
"6 months": "6 Mois",
"Custom interval": "Intervalle personnalisé",
"Interval": "Intervalle",
"Step size": "Taille de pas",
"Ok": "Ok"
}
}
},
"widgets-bundle": { "widgets-bundle": {
"add": "Ajouter un groupe de widgets", "add": "Ajouter un groupe de widgets",
"add-widgets-bundle-text": "Ajouter un nouveau groupe de widgets", "add-widgets-bundle-text": "Ajouter un nouveau groupe de widgets",

View File

@ -1554,6 +1554,65 @@
"widget-type-file": "File tipo di widget", "widget-type-file": "File tipo di widget",
"invalid-widget-type-file-error": "Impossibile importare un tipo di widget: struttura dati del widget non valida." "invalid-widget-type-file-error": "Impossibile importare un tipo di widget: struttura dati del widget non valida."
}, },
"widgets": {
"date-range-navigator": {
"localizationMap": {
"Sun": "Dom",
"Mon": "Lun",
"Tue": "Mar",
"Wed": "Mer",
"Thu": "Gio",
"Fri": "Ven",
"Sat": "Sab",
"Jan": "Gen",
"Feb": "Feb",
"Mar": "Mar",
"Apr": "Apr",
"May": "Mag",
"Jun": "Giu",
"Jul": "Lug",
"Aug": "Ago",
"Sep": "Set",
"Oct": "Ott",
"Nov": "Nov",
"Dec": "Dic",
"January": "Gennaio",
"February": "Febbraio",
"March": "Marzo",
"April": "Aprile",
"June": "Giugno",
"July": "Luglio",
"August": "Agosto",
"September": "Settembre",
"October": "Ottobre",
"November": "Novembre",
"December": "Dicembre",
"Custom Date Range": "Intervallo di date personalizzato",
"Date Range Template": "Modello di intervallo di date",
"Today": "Oggi",
"Yesterday": "Ieri",
"This Week": "Questa settimana",
"Last Week": "La settimana scorsa",
"This Month": "Questo mese",
"Last Month": "Lo scorso mese",
"Year": "Anno",
"This Year": "Quest'anno",
"Last Year": "L'anno scorso",
"Date picker": "Date picker",
"Hour": "Ora",
"Day": "Giorno",
"Week": "Settimana",
"2 weeks": "2 Settimane",
"Month": "Mese",
"3 months": "3 Mesi",
"6 months": "6 Mesi",
"Custom interval": "Intervallo personalizzato",
"Interval": "Intervallo",
"Step size": "Dimensione del passo",
"Ok": "Ok"
}
}
},
"icon": { "icon": {
"icon": "Icona", "icon": "Icona",
"select-icon": "Seleziona icona", "select-icon": "Seleziona icona",

View File

@ -1432,6 +1432,65 @@
"widget-type-file": "ウィジェットタイプファイル", "widget-type-file": "ウィジェットタイプファイル",
"invalid-widget-type-file-error": "ウィジェットタイプをインポートできません:ウィジェットタイプのデータ構造が無効です。" "invalid-widget-type-file-error": "ウィジェットタイプをインポートできません:ウィジェットタイプのデータ構造が無効です。"
}, },
"widgets": {
"date-range-navigator": {
"localizationMap": {
"Sun": "日",
"Mon": "月",
"Tue": "火",
"Wed": "水",
"Thu": "木",
"Fri": "金",
"Sat": "土",
"Jan": "1月",
"Feb": "2月",
"Mar": "3月",
"Apr": "4月",
"May": "5月",
"Jun": "6月",
"Jul": "7月",
"Aug": "8月",
"Sep": "9月",
"Oct": "10月",
"Nov": "11月",
"Dec": "12月",
"January": "1月",
"February": "2月",
"March": "行進",
"April": "4月",
"June": "六月",
"July": "7月",
"August": "8月",
"September": "9月",
"October": "10月",
"November": "11月",
"December": "12月",
"Custom Date Range": "カスタム期間",
"Date Range Template": "日付範囲テンプレート",
"Today": "今日",
"Yesterday": "昨日",
"This Week": "今週",
"Last Week": "先週",
"This Month": "今月",
"Last Month": "先月",
"Year": "年",
"This Year": "今年",
"Last Year": "昨年",
"Date picker": "日付ピッカー",
"Hour": "時",
"Day": "日",
"Week": "週間",
"2 weeks": "2週間",
"Month": "月",
"3 months": "3ヶ月",
"6 months": "6ヵ月",
"Custom interval": "カスタム間隔",
"Interval": "間隔",
"Step size": "刻み幅",
"Ok": "Ok"
}
}
},
"icon": { "icon": {
"icon": "アイコン", "icon": "アイコン",
"select-icon": "選択アイコン", "select-icon": "選択アイコン",

View File

@ -1308,6 +1308,65 @@
"widget-type-file": "위젯 타입 파일", "widget-type-file": "위젯 타입 파일",
"invalid-widget-type-file-error": "위젯 타입을 가져오기 할 수 없습니다.: 잘못된 위젯 타입 데이터 구조입니다." "invalid-widget-type-file-error": "위젯 타입을 가져오기 할 수 없습니다.: 잘못된 위젯 타입 데이터 구조입니다."
}, },
"widgets": {
"date-range-navigator": {
"localizationMap": {
"Sun": "일",
"Mon": "월",
"Tue": "화",
"Wed": "수",
"Thu": "목",
"Fri": "금",
"Sat": "토",
"Jan": "1월",
"Feb": "2월",
"Mar": "3월",
"Apr": "4월",
"May": "5월",
"Jun": "6월",
"Jul": "7월",
"Aug": "8월",
"Sep": "9월",
"Oct": "10월",
"Nov": "11월",
"Dec": "12월",
"January": "일월",
"February": "이월",
"March": "행진",
"April": "4 월",
"June": "유월",
"July": "칠월",
"August": "팔월",
"September": "구월",
"October": "십월",
"November": "십일월",
"December": "12 월",
"Custom Date Range": "맞춤 기간",
"Date Range Template": "기간 템플릿",
"Today": "오늘",
"Yesterday": "어제",
"This Week": "이번 주",
"Last Week": "지난주",
"This Month": "이번 달",
"Last Month": "지난 달",
"Year": "년",
"This Year": "올해",
"Last Year": "작년",
"Date picker": "날짜 선택기",
"Hour": "시간",
"Day": "일",
"Week": "주",
"2 weeks": "이주",
"Month": "달",
"3 months": "3 개월",
"6 months": "6 개월",
"Custom interval": "사용자 지정 간격",
"Interval": "간격",
"Step size": "단계 크기",
"Ok": "Ok"
}
}
},
"icon": { "icon": {
"icon": "Icon", "icon": "Icon",
"select-icon": "Select icon", "select-icon": "Select icon",

View File

@ -1547,6 +1547,65 @@
"widget-type-file": "Файл типа виджета", "widget-type-file": "Файл типа виджета",
"invalid-widget-type-file-error": "Не удалось импортировать виджет: неизвестная схема данных типа виджета." "invalid-widget-type-file-error": "Не удалось импортировать виджет: неизвестная схема данных типа виджета."
}, },
"widgets": {
"date-range-navigator": {
"localizationMap": {
"Sun": "Вс",
"Mon": "Пн",
"Tue": "Вт",
"Wed": "Ср",
"Thu": "Чт",
"Fri": "Пт",
"Sat": "Сб",
"Jan": "Янв.",
"Feb": "Февр.",
"Mar": "Март",
"Apr": "Апр.",
"May": "Май",
"Jun": "Июнь",
"Jul": "Июль",
"Aug": "Авг.",
"Sep": "Сент.",
"Oct": "Окт.",
"Nov": "Нояб.",
"Dec": "Дек.",
"January": "Январь",
"February": "Февраль",
"March": "Март",
"April": "Апрель",
"June": "Июнь",
"July": "Июль",
"August": "Август",
"September": "Сентябрь",
"October": "Октября",
"November": "Ноябрь",
"December": "Декабрь",
"Custom Date Range": "Пользовательский диапазон дат",
"Date Range Template": "Шаблон диапазона дат",
"Today": "Сегодня",
"Yesterday": "Вчера",
"This Week": "На этой неделе",
"Last Week": "Прошлая неделя",
"This Month": "Этот месяц",
"Last Month": "Прошлый месяц",
"Year": "Год",
"This Year": "В этом году",
"Last Year": "Прошлый год",
"Date picker": "Выбор даты",
"Hour": "Час",
"Day": "День",
"Week": "Неделю",
"2 weeks": "2 Недели",
"Month": "Месяц",
"3 months": "3 Месяца",
"6 months": "6 Месяцев",
"Custom interval": "Пользовательский интервал",
"Interval": "Интервал",
"Step size": "Размер шага",
"Ok": "Ok"
}
}
},
"icon": { "icon": {
"icon": "Иконка", "icon": "Иконка",
"select-icon": "Выбрать иконку", "select-icon": "Выбрать иконку",

View File

@ -1514,6 +1514,65 @@
"widget-type-file": "Gösterge türü dosyası", "widget-type-file": "Gösterge türü dosyası",
"invalid-widget-type-file-error": "Gösterge türü içe aktarılamadı: Geçersiz gösterge türü veri yapısı." "invalid-widget-type-file-error": "Gösterge türü içe aktarılamadı: Geçersiz gösterge türü veri yapısı."
}, },
"widgets": {
"date-range-navigator": {
"localizationMap": {
"Sun": "Paz",
"Mon": "Pzt",
"Tue": "Sal",
"Wed": "Çar",
"Thu": "Per",
"Fri": "Cum",
"Sat": "Cmt",
"Jan": "Oca",
"Feb": "Şub",
"Mar": "Mar",
"Apr": "Nis",
"May": "May",
"Jun": "Haz",
"Jul": "Tem",
"Aug": "Ağu",
"Sep": "Eyl",
"Oct": "Eki",
"Nov": "Kas",
"Dec": "Ara",
"January": "Ocak",
"February": "Şubat",
"March": "Mart",
"April": "Nisan",
"June": "Haziran",
"July": "Temmuz",
"August": "Ağustos",
"September": "Eylül",
"October": "Ekim",
"November": "Kasım",
"December": "Aralık",
"Custom Date Range": "Özel Tarih Aralığı",
"Date Range Template": "Tarih Aralığı Şablonu",
"Today": "Bugün",
"Yesterday": "Dün",
"This Week": "Bu hafta",
"Last Week": "Geçen hafta",
"This Month": "Bu ay",
"Last Month": "Geçen ay",
"Year": "Yıl",
"This Year": "Bu yıl",
"Last Year": "Geçen yıl",
"Date picker": "Tarih seçici",
"Hour": "Saat",
"Day": "Gün",
"Week": "Hafta",
"2 weeks": "2 Hafta",
"Month": "Ay",
"3 months": "3 Ay",
"6 months": "6 Ay",
"Custom interval": "Özel aralık",
"Interval": "Aralık",
"Step size": "Adım boyutu",
"Ok": "Ok"
}
}
},
"icon": { "icon": {
"icon": "İkon", "icon": "İkon",
"select-icon": "İkon seç", "select-icon": "İkon seç",

View File

@ -1418,6 +1418,65 @@
"widget-type-file": "部件类型文件", "widget-type-file": "部件类型文件",
"invalid-widget-type-file-error": "无法导入部件类型:无效的部件类型数据结构。" "invalid-widget-type-file-error": "无法导入部件类型:无效的部件类型数据结构。"
}, },
"widgets": {
"date-range-navigator": {
"localizationMap": {
"Sun": "周日",
"Mon": "周一",
"Tue": "周二",
"Wed": "周三",
"Thu": "周四",
"Fri": "周五",
"Sat": "周六",
"Jan": "1月",
"Feb": "2月",
"Mar": "3月",
"Apr": "4月",
"May": "5月",
"Jun": "6月",
"Jul": "7月",
"Aug": "8月",
"Sep": "9月",
"Oct": "10月",
"Nov": "11月",
"Dec": "12月",
"January": "一月",
"February": "二月",
"March": "游行",
"April": "四月",
"June": "六月",
"July": "七月",
"August": "八月",
"September": "九月",
"October": "十月",
"November": "十一月",
"December": "十二月",
"Custom Date Range": "自定义日期范围",
"Date Range Template": "日期范围模板",
"Today": "今天",
"Yesterday": "昨天",
"This Week": "本星期",
"Last Week": "上个星期",
"This Month": "这个月",
"Last Month": "上个月",
"Year": "年",
"This Year": "今年",
"Last Year": "去年",
"Date picker": "日期选择器",
"Hour": "小时",
"Day": "天",
"Week": "周",
"2 weeks": "2周",
"Month": "月",
"3 months": "3个月",
"6 months": "6个月",
"Custom interval": "自定义间隔",
"Interval": "间隔",
"Step size": "一步的大小",
"Ok": "Ok"
}
}
},
"icon": { "icon": {
"icon": "图标", "icon": "图标",
"select-icon": "选择图标", "select-icon": "选择图标",

View File

@ -0,0 +1,303 @@
/*
* 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.
*/
/* eslint-disable import/no-unresolved, import/default */
import widgetTpl from './date-range-navigator.tpl.html';
import './date-range-navigator.scss';
/* eslint-enable import/no-unresolved, import/default */
export default angular.module('thingsboard.widgets.dateRangeNavigator', [])
.directive('dateRangeNavigatorWidget', DateRangeNavigatorWidget)
.name;
/*@ngInject*/
function DateRangeNavigatorWidget() {
return {
restrict: "E",
scope: true,
bindToController: {
tableId: '=',
ctx: '='
},
controller: DateRangeNavigatorWidgetController,
controllerAs: 'vm',
templateUrl: widgetTpl
};
}
/*@ngInject*/
function DateRangeNavigatorWidgetController($scope, $window, $filter) {
let vm = this,
hour = 3600000,
day = 86400000,
week = 604800000,
month = 2629743000,
words = [
"Mon",
"Tue",
"Wed",
"Thu",
"Fri",
"Sat",
"Sun",
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
"Ok",
'Custom Date Range',
'Date Range Template',
'Today',
'Yesterday',
'This Week',
'Last Week',
'Month',
'This Month',
'Last Month',
'Year',
'This Year',
'Last Year'
],
firstUpdate = true;
$scope.datesMap = {
hour: {
ts: hour,
label: "Hour"
},
day: {
ts: day,
label: "Day"
},
week: {
ts: week,
label: "Week"
},
twoWeeks: {
ts: week * 2,
label: "2 weeks"
},
month: {
ts: month,
label: "Month"
},
threeMonths: {
ts: month * 3,
label: "3 months"
},
sixMonths: {
ts: month * 6,
label: "6 months"
}
};
$scope.advancedModel = {};
$scope.endRestrictionDate = Date.now();
$scope.localizationMap = getLocalizationMap();
$scope.changeInterval = changeInterval;
$scope.goForth = goForth;
$scope.goBack = goBack;
$scope.triggerChange = triggerChange;
$scope.$watch('vm.ctx', function () {
if (vm.ctx && vm.ctx.dashboard.dashboardTimewindow) {
$scope.settings = vm.ctx.widgetConfig.settings;
let selection;
if ($scope.settings.useSessionStorage) {
selection = readFromStorage('date-range');
}
if (selection) {
$scope.advancedModel = {
selectedTemplateName: selection.name,
dateStart: selection.start,
dateEnd: selection.end
};
} else {
let end = new Date();
end.setHours(23,59,59,999);
let formattedDate = getFormattedDate(
(end.getTime() + 1) - $scope.datesMap[$scope.settings.initialInterval || "week"].ts,
end.getTime()
);
$scope.advancedModel = formattedDate;
}
$scope.selectedStepSize = $scope.datesMap[$scope.settings.stepSize || "day"].ts;
widgetContextTimewindowSync();
}
});
$scope.$on('dashboardTimewindowChanged', function () {
$scope.dashboardTimewindowChanged = true;
widgetContextTimewindowSync();
});
function getLocalizationMap() {
let result = {};
words.forEach(function (key) {
result[key] = $filter('translate')('widgets.date-range-navigator.localizationMap.' + key);
});
return result;
}
function triggerChange() {
updateTimewindow($scope.advancedModel.dateStart.getTime(), $scope.advancedModel.dateEnd.getTime() + day - 1);
}
function widgetContextTimewindowSync() {
if (vm.ctx && vm.ctx.dashboardTimewindow && $scope.dashboardTimewindowChanged &&
vm.ctx.dashboard.dashboardTimewindow.history &&
vm.ctx.dashboard.dashboardTimewindow.history.fixedTimewindow) {
if (!firstUpdate) {
updateAdvancedModel();
}
updateDateInterval();
if ($scope.settings.useSessionStorage) {
updateStorageDate();
}
if (firstUpdate) {
updateTimewindow($scope.advancedModel.dateStart.getTime(), $scope.advancedModel.dateEnd.getTime());
firstUpdate = false;
}
}
}
function getFormattedDate(startTime, endTime) {
var template;
let startDate = new Date(startTime);
let endDate = new Date(endTime);
if (getDateDiff(startDate, endDate) === 0) {
template = $filter('date')(startDate, 'dd MMM yyyy');
} else {
template = $filter('date')(
startDate,
'dd' + (startDate.getMonth() !== endDate.getMonth() || startDate.getFullYear() !== endDate.getFullYear() ? ' MMM' : '') + (startDate.getFullYear() !== endDate.getFullYear() ? ' yyyy' : '')
)
+ ' - ' +
$filter('date')(
endDate,
'dd MMM yyyy'
);
}
return {
selectedTemplateName: template,
dateStart: startDate,
dateEnd: endDate
};
}
function readFromStorage(itemKey) {
if ($window.sessionStorage.getItem(itemKey)) {
let selection = angular.fromJson($window.sessionStorage.getItem(itemKey));
selection.start = new Date(parseInt(selection.start));
selection.end = new Date(parseInt(selection.end));
return selection;
}
return undefined;
}
function goForth() {
updateTimewindow(vm.ctx.dashboard.dashboardTimewindow.history.fixedTimewindow.startTimeMs + $scope.selectedStepSize, vm.ctx.dashboard.dashboardTimewindow.history.fixedTimewindow.endTimeMs + $scope.selectedStepSize);
}
function goBack() {
updateTimewindow(vm.ctx.dashboard.dashboardTimewindow.history.fixedTimewindow.startTimeMs - $scope.selectedStepSize, vm.ctx.dashboard.dashboardTimewindow.history.fixedTimewindow.endTimeMs - $scope.selectedStepSize);
}
function changeInterval() {
updateTimewindow(vm.ctx.dashboard.dashboardTimewindow.history.fixedTimewindow.endTimeMs - $scope.selectedDateInterval / 2, vm.ctx.dashboard.dashboardTimewindow.history.fixedTimewindow.endTimeMs + $scope.selectedDateInterval / 2);
}
function getDateDiff(date1, date2) {
if (!date1 || !date2) return;
var _d1 = new Date(date1.getFullYear(), date1.getMonth(), date1.getDate()),
_d2 = new Date(date2.getFullYear(), date2.getMonth(), date2.getDate());
return _d2 - _d1;
}
function updateTimewindow(startTime, endTime) {
vm.ctx.dashboard.dashboardTimewindowApi.onUpdateTimewindow(startTime, endTime, 10);
}
function updateDateInterval() {
let interval = $scope.advancedModel.dateEnd.getTime() - $scope.advancedModel.dateStart.getTime();
for (let i in $scope.datesMap) {
if ($scope.datesMap.hasOwnProperty(i)) {
if ($scope.datesMap[i].ts === interval || $scope.datesMap[i].ts === interval + 1 || $scope.datesMap[i].ts === interval - 1) {
$scope.selectedDateInterval = $scope.datesMap[i].ts;
$scope.customInterval = false;
return;
}
}
}
$scope.selectedDateInterval = interval;
$scope.customInterval = {ts: interval, label: "Custom interval"};
}
function updateAdvancedModel() {
$scope.advancedModel = getFormattedDate(vm.ctx.dashboard.dashboardTimewindow.history.fixedTimewindow.startTimeMs, vm.ctx.dashboard.dashboardTimewindow.history.fixedTimewindow.endTimeMs);
}
function updateStorageDate() {
saveIntoStorage('date-range', {
start: $scope.advancedModel.dateStart.getTime(),
end: $scope.advancedModel.dateEnd.getTime(),
name: $scope.advancedModel.selectedTemplateName
});
}
function saveIntoStorage(keyName, selection) {
if (selection) {
$window.sessionStorage.setItem(keyName, angular.toJson(selection));
}
}
}

View File

@ -0,0 +1,124 @@
/**
* 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.
*/
.date-range-navigator-widget {
display: flex;
height: 100%;
}
.date-range-navigator {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-evenly;
width: 100%;
margin: auto;
.drn__element {
display: flex;
flex-direction: row;
align-items: center;
max-width: 100%;
height: 60px;
margin: 4px 0;
}
.navigation {
md-input-container {
margin: 0;
}
}
.picker {
.picker__wrapper {
position: relative;
max-width: 100%;
padding: 2px;
> label {
position: absolute;
right: -3px;
bottom: 100%;
left: 0;
padding-left: 3px;
color: #787878;
transform: scale(.75);
transform-origin: left bottom;
}
}
.md-select-value {
min-width: 225px;
border-color: #e1e1e1;
.md-select-icon {
color: #757575;
}
}
}
&.short-mode {
display: block;
width: 90%;
.drn__element {
width: 100%;
md-input-container {
flex: 1;
}
}
.picker {
.picker__wrapper {
width: 100%;
}
.md-select-value {
min-width: initial;
}
}
&.labels-hidden {
.drn__element {
margin: 0;
}
}
}
&.long-mode {
&.labels-hidden {
.drn__element {
height: 36px;
}
}
}
}

View File

@ -0,0 +1,87 @@
<!--
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>