2021-09-10 15:38:53 +00:00
import variables from 'modules/variables' ;
2021-08-14 19:10:48 +00:00
import { PureComponent } from 'react' ;
2021-02-27 13:46:41 +00:00
2021-09-26 17:03:32 +00:00
import Header from '../Header' ;
2021-02-27 13:46:41 +00:00
import Checkbox from '../Checkbox' ;
import Dropdown from '../Dropdown' ;
2021-03-23 11:45:09 +00:00
import Radio from '../Radio' ;
2022-04-14 21:09:10 +00:00
import Slider from '../Slider' ;
import Switch from '../Switch' ;
2021-02-27 13:46:41 +00:00
2022-04-08 13:48:36 +00:00
import SettingsItem from '../SettingsItem' ;
2022-04-14 21:09:10 +00:00
import { values } from 'modules/helpers/settings/modals' ;
2021-08-14 19:10:48 +00:00
export default class TimeSettings extends PureComponent {
2021-03-23 13:10:34 +00:00
constructor ( ) {
super ( ) ;
2021-03-17 17:55:58 +00:00
this . state = {
2022-04-08 13:48:36 +00:00
timeType : localStorage . getItem ( 'timeType' ) || 'digital' ,
2021-03-17 17:55:58 +00:00
} ;
}
render ( ) {
2021-09-17 13:13:31 +00:00
const getMessage = ( text ) => variables . language . getMessage ( variables . languagecode , text ) ;
2021-03-18 15:22:41 +00:00
2022-04-08 13:43:25 +00:00
let timeSettings = null ;
2021-03-19 15:56:48 +00:00
const digitalSettings = (
2022-04-08 13:48:36 +00:00
< SettingsItem
title = { getMessage ( 'modals.main.settings.sections.time.digital.title' ) }
subtitle = { getMessage ( 'modals.main.settings.sections.time.format' ) }
>
2022-04-16 18:25:42 +00:00
< Radio
name = "timeformat"
options = { [
{
name : getMessage ( 'modals.main.settings.sections.time.digital.twentyfourhour' ) ,
value : 'twentyfourhour' ,
} ,
{
name : getMessage ( 'modals.main.settings.sections.time.digital.twelvehour' ) ,
value : 'twelvehour' ,
} ,
] }
smallTitle = { true }
category = "clock"
/ >
2022-04-08 13:48:36 +00:00
< Checkbox
name = "seconds"
text = { getMessage ( 'modals.main.settings.sections.time.digital.seconds' ) }
category = "clock"
/ >
< Checkbox
name = "zero"
text = { getMessage ( 'modals.main.settings.sections.time.digital.zero' ) }
category = "clock"
/ >
< / SettingsItem >
2021-03-17 18:26:09 +00:00
) ;
2021-03-19 15:56:48 +00:00
const analogSettings = (
2022-04-08 13:48:36 +00:00
< SettingsItem
title = { getMessage ( 'modals.main.settings.sections.time.analogue.title' ) }
subtitle = "subtitle"
>
< Checkbox
name = "secondHand"
text = { getMessage ( 'modals.main.settings.sections.time.analogue.second_hand' ) }
category = "clock"
/ >
< Checkbox
name = "minuteHand"
text = { getMessage ( 'modals.main.settings.sections.time.analogue.minute_hand' ) }
category = "clock"
/ >
< Checkbox
name = "hourHand"
text = { getMessage ( 'modals.main.settings.sections.time.analogue.hour_hand' ) }
category = "clock"
/ >
< Checkbox
name = "hourMarks"
text = { getMessage ( 'modals.main.settings.sections.time.analogue.hour_marks' ) }
category = "clock"
/ >
< Checkbox
name = "minuteMarks"
text = { getMessage ( 'modals.main.settings.sections.time.analogue.minute_marks' ) }
category = "clock"
/ >
< / SettingsItem >
2021-03-17 18:26:09 +00:00
) ;
2021-03-17 17:55:58 +00:00
2022-04-08 13:43:25 +00:00
if ( this . state . timeType === 'digital' ) {
timeSettings = digitalSettings ;
} else if ( this . state . timeType === 'analogue' ) {
timeSettings = analogSettings ;
2021-03-17 17:55:58 +00:00
}
return (
2021-03-22 22:17:52 +00:00
< >
2022-04-08 13:48:36 +00:00
< Header
title = { getMessage ( 'modals.main.settings.sections.time.title' ) }
setting = "time"
category = "clock"
element = ".clock-container"
zoomSetting = "zoomClock"
switch = { true }
/ >
< SettingsItem
title = { getMessage ( 'modals.main.settings.sections.time.type' ) }
subtitle = "subtitle"
>
< Dropdown
label = { getMessage ( 'modals.main.settings.sections.time.type' ) }
name = "timeType"
onChange = { ( value ) => this . setState ( { timeType : value } ) }
category = "clock"
>
< option value = "digital" >
{ getMessage ( 'modals.main.settings.sections.time.digital.title' ) }
< / option >
< option value = "analogue" >
{ getMessage ( 'modals.main.settings.sections.time.analogue.title' ) }
< / option >
< option value = "percentageComplete" >
{ getMessage ( 'modals.main.settings.sections.time.percentage_complete' ) }
< / option >
< / Dropdown >
< / SettingsItem >
2021-03-19 15:56:48 +00:00
{ timeSettings }
2022-04-14 21:09:10 +00:00
< SettingsItem
title = "Pomodoro"
subtitle = "The Pomodoro Technique is a time management method developed by Francesco Cirillo in the late 1980s. It uses a timer to break work into intervals, typically 25 minutes in length, separated by short breaks"
final = { true }
>
< Switch
2022-04-16 18:25:42 +00:00
name = "Pomodoro"
2022-04-14 21:09:10 +00:00
text = { getMessage ( 'modals.main.settings.enabled' ) }
2022-04-16 18:25:42 +00:00
category = "Pomodoro"
element = "Pomodoro"
2022-04-14 21:09:10 +00:00
/ >
< Slider
title = "Work Length"
name = "pomdoroWorkLength"
default = "25"
step = "1"
min = "5"
max = "60"
marks = { values ( 'pomodoroWork' ) }
2022-04-16 18:25:42 +00:00
display = { ' ms' }
2022-04-14 21:09:10 +00:00
/ >
< Slider
title = "Break Length"
name = "PomodoroBreakLength"
default = "5"
step = "1"
min = "1"
max = "45"
marks = { values ( 'pomodoroBreak' ) }
2022-04-16 18:25:42 +00:00
display = { ' ms' }
2022-04-14 21:09:10 +00:00
/ >
< / SettingsItem >
2021-03-22 22:17:52 +00:00
< / >
2021-03-17 17:55:58 +00:00
) ;
}
2021-03-17 13:01:53 +00:00
}