Skip to content

Commit

Permalink
code does not work needs debugging
Browse files Browse the repository at this point in the history
  • Loading branch information
@danielshid
danielshid committed Oct 4, 2024
1 parent 396f48c commit 265887a
Show file tree
Hide file tree
Showing 2 changed files with 30 additions and 30 deletions.
54 changes: 27 additions & 27 deletions src/client/app/components/IntervalControlsComponent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,17 +38,20 @@ export default function IntervalControlsComponent() {
const [daysCustom, setDaysCustom] = React.useState<number>(duration.asDays());
// True if custom duration input for bar or map is active.
const [showCustomDuration, setShowCustomDuration] = React.useState<boolean>(false);
// Define a flag to track if custom input is actively being used
const [isCustomInput, setIsCustomInput] = React.useState<boolean>(false);

// Keeps react-level state, and redux state in sync.
// Two different layers in state may differ especially when externally updated (chart link, history buttons.)
React.useEffect(() => {
// Assume value is valid since it is coming from state.
// Do not allow bad values in state.
const isCustom = !['1', '7', '28'].includes(duration.asDays().toString());
setShowCustomDuration(isCustom);
setDaysCustom(duration.asDays());
setDays(isCustom ? CUSTOM_INPUT : duration.asDays().toString());
}, [duration]);
// If user is in custom input mode, don't reset to standard options
if (!isCustomInput) {
const isCustom = !['1', '7', '28'].includes(duration.asDays().toString());
setShowCustomDuration(isCustom);
setDaysCustom(duration.asDays());
setDays(isCustom ? CUSTOM_INPUT : duration.asDays().toString());
}
}, [duration, isCustomInput]);

// Returns true if this is a valid duration.
const daysValid = (days: number) => {
Expand All @@ -57,6 +60,7 @@ export default function IntervalControlsComponent() {

// Updates values when the standard duration menu for bar or map is used.
const handleDaysChange = (value: string) => {
setIsCustomInput(false);
if (value === CUSTOM_INPUT) {
// Set menu value from standard value to special value to show custom
// and show the custom input area.
Expand All @@ -73,6 +77,7 @@ export default function IntervalControlsComponent() {

// Updates value when the custom duration input is used for bar or map.
const handleCustomDaysChange = (value: number) => {
setIsCustomInput(true);
setDaysCustom(value);
};

Expand Down Expand Up @@ -103,22 +108,6 @@ export default function IntervalControlsComponent() {
FourWeeks: '4.weeks'
};

// Defines the set of options for the dropdown
const options = chartType === ChartTypes.compare
? Object.entries(ComparePeriod).map(([key, value]) => (
<option value={value} key={key}>
{translate(comparePeriodTranslations[key as keyof typeof comparePeriodTranslations])}
</option>
))
: (
<>
<option value='1'>{translate('day')}</option>
<option value='7'>{translate('week')}</option>
<option value='28'>{translate('4.weeks')}</option>
<option value={CUSTOM_INPUT}>{translate('custom.value')}</option>
</>
);

return (
<div>
<div style={divTopBottomPadding}>
Expand All @@ -130,7 +119,7 @@ export default function IntervalControlsComponent() {
)}:
<TooltipMarkerComponent page='home' helpTextId={
chartType === ChartTypes.bar ? 'help.home.bar.days.tip' :
chartType === ChartTypes.map ? 'help.home.map.days.tip' :
chartType === ChartTypes.map ? 'help.home.map.interval.tip' :
'help.home.compare.period.tip'
} />
</p>
Expand All @@ -141,10 +130,21 @@ export default function IntervalControlsComponent() {
value={chartType === ChartTypes.compare ? comparePeriod?.toString() : days}
onChange={e => chartType === ChartTypes.compare ? handleComparePeriodChange(e.target.value) : handleDaysChange(e.target.value)}
>
{options}
{Object.entries(ComparePeriod).map(
([key, value]) => (
<option value={value} key={key}>
{translate(comparePeriodTranslations[key as keyof typeof comparePeriodTranslations])}
</option>
)
)}
{/* TODO: Compare is currently not ready for the custom option. */}
{chartType !== ChartTypes.compare &&
<option value={CUSTOM_INPUT}>
{translate('custom.value')}
</option>
}
</Input>
{/* TODO: Compare is currently not ready for a custom option. */}
{showCustomDuration && chartType !== ChartTypes.compare &&
{showCustomDuration &&
<FormGroup>
<Label for='days'>{translate('days.enter')}:</Label>
<Input
Expand Down
6 changes: 3 additions & 3 deletions src/client/app/translations/data.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@ const LocaleTranslationData = {
"as.meter.unit": "as meter unit",
"as.meter.defaultgraphicunit": "as meter default graphic unit",
"bar": "Bar",
"days.enter": "Enter in days and then hit enter",
"bar.interval": "Bar Interval",
"bar.raw": "Cannot create bar graph on raw units such as temperature",
"bar.stacking": "Bar Stacking",
Expand Down Expand Up @@ -121,6 +120,7 @@ const LocaleTranslationData = {
"date.range": 'Date Range',
"day": "Day",
"days": "Days",
"days.enter": "Enter in days and then hit enter",
"decreasing": "decreasing",
"default.area.normalize": "Normalize readings by area by default",
"default.area.unit": "Default Area Unit",
Expand Down Expand Up @@ -538,7 +538,6 @@ const LocaleTranslationData = {
"as.meter.unit": "as meter unit\u{26A1}",
"as.meter.defaultgraphicunit": "as meter default graphic unit\u{26A1}",
"bar": "Bande",
"bar.days.enter": "Enter in days and then hit enter\u{26A1}",
"bar.interval": "Intervalle du Diagramme à Bandes",
"bar.raw": "Cannot create bar graph on raw units such as temperature\u{26A1}",
"bar.stacking": "Empilage de Bandes",
Expand Down Expand Up @@ -630,6 +629,7 @@ const LocaleTranslationData = {
"date.range": 'Plage de dates',
"day": "Journée",
"days": "Journées",
"days.enter": "Enter in days and then hit enter\u{26A1}",
"decreasing": "decreasing\u{26A1}",
"default.area.normalize": "Normalize readings by area by default\u{26A1}",
"default.area.unit": "Default Area Unit\u{26A1}",
Expand Down Expand Up @@ -1047,7 +1047,6 @@ const LocaleTranslationData = {
"as.meter.unit": "como unidad de medidor",
"as.meter.defaultgraphicunit": "como unidad gráfica predeterminada del medidor",
"bar": "Barra",
"bar.days.enter": "Ingrese los días y presione \"Enter\"",
"bar.interval": "Intervalo de barra",
"bar.raw": "No se puede crear un gráfico de barras con unidades crudas como la temperatura",
"bar.stacking": "Apilamiento de barras",
Expand Down Expand Up @@ -1139,6 +1138,7 @@ const LocaleTranslationData = {
"date.range": 'Rango de fechas',
"day": "Día",
"days": "Días",
"days.enter": "Ingrese los días y presione \"Enter\"",
"decreasing": "decreciente",
"default.area.normalize": "Normalizar lecturas según el área por defecto",
"default.area.unit": "Unidad de área predeterminada",
Expand Down

0 comments on commit 265887a

Please sign in to comment.