110 lines
4.5 KiB
JavaScript
110 lines
4.5 KiB
JavaScript
function Echocentric(props) {
|
|
return (
|
|
<Page>
|
|
<Section
|
|
title={<Text bold align="center">Time Settings</Text>}>
|
|
<Toggle
|
|
settingsKey="leadingZero"
|
|
label={`Hour has leading Zero`}
|
|
/>
|
|
<Select
|
|
label={`Colors`}
|
|
settingsKey="colors"
|
|
options={[
|
|
{name:"Custom color", value:"manual"},
|
|
{name:"Random colors", value:"random"},
|
|
{name:"Based on activity goal", value:"auto"}
|
|
]}
|
|
/>
|
|
{ (props.settings.colors && JSON.parse(props.settings.colors).values[0].value === 'manual' || false) &&
|
|
<ColorSelect
|
|
settingsKey="customcolor"
|
|
centered={true}
|
|
colors={[
|
|
{color: '#00b0e7', value: ['0.702','1.0','0.4']}, // hue, saturation, sat modifier
|
|
{color: '#2084c0', value: ['0.729','1.0','0.5']},
|
|
{color: '#2040c0', value: ['0.799','1.0','0.5']},
|
|
{color: '#5700ad', value: ['0.883','1.0','0.0']},
|
|
{color: '#685098', value: ['0.898','0.5','0.3']},
|
|
{color: '#8820c0', value: ['0.933','1.0','0.5']},
|
|
{color: '#c020c0', value: ['0.987','1.0','0.5']},
|
|
{color: '#806480', value: ['0.011','0.3','0.3']},
|
|
{color: '#e800d0', value: ['0.013','1.0','0.0']},
|
|
{color: '#a04890', value: ['0.016','0.8','0.7']},
|
|
{color: '#985070', value: ['0.085','0.5','0.3']},
|
|
{color: '#c02058', value: ['0.108','1.0','0.5']},
|
|
{color: '#e80040', value: ['0.113','1.0','0.0']},
|
|
{color: '#e83800', value: ['0.203','1.0','0.0']},
|
|
{color: '#986850', value: ['0.216','0.5','0.3']},
|
|
{color: '#e89c01', value: ['0.275','1.0','0.0']},
|
|
{color: '#c8e802', value: ['0.348','1.0','0.0']},
|
|
{color: '#788f4b', value: ['0.372','0.5','0.3']},
|
|
{color: '#42bb1b', value: ['0.444','1.0','0.5']},
|
|
{color: '#00e12d', value: ['0.525','1.0','0.0']},
|
|
{color: '#01e890', value: ['0.600','1.0','0.0']},
|
|
{color: '#608078', value: ['0.613','0.3','0.3']},
|
|
{color: '#48a090', value: ['0.632','0.8','0.7']},
|
|
{color: '#508c98', value: ['0.689','0.5','0.3']}
|
|
]}
|
|
/>
|
|
}
|
|
{ (props.settings.colors && JSON.parse(props.settings.colors).values[0].value === 'auto' || false) &&
|
|
<Select
|
|
label={`Activity for goal color`}
|
|
settingsKey="colorgoal"
|
|
options={[
|
|
{name:"Steps", value:"steps"},
|
|
{name:"Calories", value:"cal"},
|
|
{name:"Distance", value:"dist"},
|
|
{name:"Floors", value:"elev"},
|
|
{name:"Active Minutes", value:"actmin"},
|
|
{name:"Heart Rate", value:"hr"}
|
|
]}
|
|
/>
|
|
}
|
|
{ (props.settings.colors && JSON.parse(props.settings.colors).values[0].value === 'auto' || false) &&
|
|
<Text>You will see different colors depending on your activity. Red means you still have a long way to your goal. On your way there you will see orange and yellow, until finally when you've reached your goal you will see green. With heart rate the colors will work the other way around. Green means you are below your Fat Burn zone, your Fat Burn zone is yellow, Cardio is orange and Peak is red.</Text>
|
|
}
|
|
</Section>
|
|
<Section
|
|
title={<Text bold align="center">Secondary Information</Text>}>
|
|
<Select
|
|
label={`Second line`}
|
|
settingsKey="secondary"
|
|
options={[
|
|
{name:"nothing", value:"-"},
|
|
{name:"Date", value:"date"},
|
|
{name:"Steps", value:"steps"},
|
|
{name:"Calories", value:"cal"},
|
|
{name:"Distance", value:"dist"},
|
|
{name:"Floors", value:"elev"},
|
|
{name:"Active Minutes", value:"actmin"},
|
|
{name:"Heart Rate", value:"hr"}
|
|
]}
|
|
/>
|
|
<Select
|
|
label={`Date format`}
|
|
settingsKey="dateformat"
|
|
options={[
|
|
{name:"MM/DD", value:"md/"},
|
|
{name:"MM-DD", value:"md-"},
|
|
{name:"DD.MM.", value:"dm."},
|
|
{name:"DD/MM", value:"dm/"},
|
|
{name:"DD-MM", value:"dm-"}
|
|
]}
|
|
/>
|
|
<Select
|
|
label={`Tap action`}
|
|
settingsKey="tap"
|
|
options={[
|
|
{name:"nothing", value:"-"},
|
|
{name:"Activity overlay", value:"overlay"},
|
|
{name:"Changes secondary info", value:"cycle"}
|
|
]}
|
|
/>
|
|
</Section>
|
|
</Page>
|
|
);
|
|
}
|
|
|
|
registerSettingsPage(Echocentric); |