import { PanelOptionsEditorBuilder , dateTime } from '@grafana/data' ; import { ClockOptions , ClockMode , ClockType , FontWeight , ZoneFormat , ClockRefresh } from './types' ; import { getTimeZoneNames } from './ClockPanel' ; import { ColorEditor } from './ColorEditor' ; export const optionsBuilder = ( builder ) => { builder . addRadio ( { path : 'mode' , name : 'Mode' , settings : { options : [ { value : ClockMode . time , label : 'Time' } , { value : ClockMode . countdown , label : 'Countdown' } , ] , } , defaultValue : ClockMode . time , } ) . addRadio ( { path : 'refresh' , name : 'Refresh' , settings : { options : [ { value : ClockRefresh . sec , label : 'Every second' } , { value : ClockRefresh . dashboard , label : 'With the dashboard' } , ] , } , defaultValue : ClockRefresh . sec , } ) . addCustomEditor ( { id : 'bgColor' , path : 'bgColor' , name : 'Background Color' , editor : ColorEditor , defaultValue : '' , } ) ; addCountdown ( builder ) ; addTimeFormat ( builder ) ; addTimeZone ( builder ) ; addDateFormat ( builder ) ; } ; function addCountdown ( builder ) { const category = [ 'Countdown' ] ; builder . addTextInput ( { category , path : 'countdownSettings.endCountdownTime' , name : 'End Time' , settings : { placeholder : 'ISO 8601 or RFC 2822 Date time' , } , defaultValue : dateTime ( Date . now ( ) ) . add ( 6 , 'h' ) . format ( ) , showIf : ( o ) => o . mode === ClockMode . countdown , } ) . addTextInput ( { category , path : 'countdownSettings.endText' , name : 'End Text' , defaultValue : '00:00:00' , showIf : ( o ) => o . mode === ClockMode . countdown , } ) . addTextInput ( { category , path : 'countdownSettings.customFormat' , name : 'Custom format' , settings : { placeholder : 'optional' , } , defaultValue : undefined , showIf : ( o ) => o . mode === ClockMode . countdown , } ) ; } function addTimeFormat ( builder ) { const category = [ 'Time Format' ] ; builder . addRadio ( { category , path : 'clockType' , name : 'Clock Type' , settings : { options : [ { value : ClockType . H24 , label : '24 Hour' } , { value : ClockType . H12 , label : '12 Hour' } , { value : ClockType . Custom , label : 'Custom' } , ] , } , defaultValue : ClockType . H24 , } ) . addTextInput ( { category , path : 'timeSettings.customFormat' , name : 'Time Format' , description : 'the date formatting pattern' , settings : { placeholder : 'date format' , } , defaultValue : undefined , showIf : ( opts ) => opts . clockType === ClockType . Custom , } ) . addTextInput ( { category , path : 'timeSettings.fontSize' , name : 'Font size' , settings : { placeholder : 'date format' , } , defaultValue : '12px' , } ) . addRadio ( { category , path : 'timeSettings.fontWeight' , name : 'Font weight' , settings : { options : [ { value : FontWeight . normal , label : 'Normal' } , { value : FontWeight . bold , label : 'Bold' } , ] , } , defaultValue : FontWeight . normal , } ) ; } function addTimeZone ( builder ) { const category = [ 'Timezone' ] ; const timezones = getTimeZoneNames ( ) . map ( ( n ) => { return { label : n , value : n } ; } ) ; timezones . unshift ( { label : 'Default' , value : '' } ) ; builder . addSelect ( { category , path : 'timezone' , name : 'Timezone' , settings : { options : timezones , } , defaultValue : '' , } ) . addBooleanSwitch ( { category , path : 'timezoneSettings.showTimezone' , name : 'Show Timezone' , defaultValue : false , } ) . addSelect ( { category , path : 'timezoneSettings.zoneFormat' , name : 'Display Format' , settings : { options : [ { value : ZoneFormat . name , label : 'Normal' } , { value : ZoneFormat . nameOffset , label : 'Name + Offset' } , { value : ZoneFormat . offsetAbbv , label : 'Offset + Abbreviation' } , { value : ZoneFormat . offset , label : 'Offset' } , { value : ZoneFormat . abbv , label : 'Abbriviation' } , ] , } , defaultValue : ZoneFormat . offsetAbbv , showIf : ( s ) => s . timezoneSettings ?. showTimezone , } ) . addTextInput ( { category , path : 'timezoneSettings.fontSize' , name : 'Font size' , settings : { placeholder : 'font size' , } , defaultValue : '12px' , showIf : ( s ) => s . timezoneSettings ?. showTimezone , } ) . addRadio ( { category , path : 'timezoneSettings.fontWeight' , name : 'Font weight' , settings : { options : [ { value : FontWeight . normal , label : 'Normal' } , { value : FontWeight . bold , label : 'Bold' } , ] , } , defaultValue : FontWeight . normal , showIf : ( s ) => s . timezoneSettings ?. showTimezone , } ) ; } function addDateFormat ( builder ) { const category = [ 'Date Options' ] ; builder . addBooleanSwitch ( { category , path : 'dateSettings.showDate' , name : 'Show Date' , defaultValue : false , } ) . addTextInput ( { category , path : 'dateSettings.dateFormat' , name : 'Date Format' , settings : { placeholder : 'Enter date format' , } , defaultValue : 'YYYY-MM-DD' , showIf : ( s ) => s . dateSettings ?. showDate , } ) . addTextInput ( { category , path : 'dateSettings.locale' , name : 'Locale' , settings : { placeholder : 'Enter locale: de, fr, es, ... (default: en)' , } , defaultValue : '' , showIf : ( s ) => s . dateSettings ?. showDate , } ) . addTextInput ( { category , path : 'dateSettings.fontSize' , name : 'Font size' , settings : { placeholder : 'date format' , } , defaultValue : '20px' , showIf : ( s ) => s . dateSettings ?. showDate , } ) . addRadio ( { category , path : 'dateSettings.fontWeight' , name : 'Font weight' , settings : { options : [ { value : FontWeight . normal , label : 'Normal' } , { value : FontWeight . bold , label : 'Bold' } , ] , } , defaultValue : FontWeight . normal , showIf : ( s ) => s . dateSettings ?. showDate , } ) ; }