Update custome translations to i18n and various improvements
This commit is contained in:
@@ -16,6 +16,8 @@ import { Button } from './ui/button';
|
||||
import { Switch } from './ui/switch';
|
||||
import { Label } from './ui/label';
|
||||
import { Separator } from './ui/separator';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './ui/tooltip';
|
||||
|
||||
const Settings = ({
|
||||
pkParams,
|
||||
@@ -28,72 +30,119 @@ const Settings = ({
|
||||
t
|
||||
}: any) => {
|
||||
const { showDayTimeOnXAxis, yAxisMin, yAxisMax, showTemplateDay, simulationDays, displayedDays } = uiSettings;
|
||||
const showDayReferenceLines = (uiSettings as any).showDayReferenceLines ?? true;
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>{t.advancedSettings}</CardTitle>
|
||||
<CardTitle className="text-lg">{t('diagramSettings')}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<Label htmlFor="showDayTimeOnXAxis" className="font-medium">
|
||||
{t.show24hTimeAxis}
|
||||
</Label>
|
||||
<Switch
|
||||
id="showDayTimeOnXAxis"
|
||||
checked={showDayTimeOnXAxis}
|
||||
onCheckedChange={checked => onUpdateUiSetting('showDayTimeOnXAxis', checked)}
|
||||
/>
|
||||
<div className="space-y-2">
|
||||
<Label className="font-medium">{t('xAxisTimeFormat')}</Label>
|
||||
<TooltipProvider>
|
||||
<Select
|
||||
value={showDayTimeOnXAxis}
|
||||
onValueChange={value => onUpdateUiSetting('showDayTimeOnXAxis', value)}
|
||||
>
|
||||
<SelectTrigger className="w-[240px]">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<SelectItem value="continuous">
|
||||
{t('xAxisFormatContinuous')}
|
||||
</SelectItem>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right">
|
||||
<p className="text-xs">{t('xAxisFormatContinuousDesc')}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<SelectItem value="24h">
|
||||
{t('xAxisFormat24h')}
|
||||
</SelectItem>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right">
|
||||
<p className="text-xs">{t('xAxisFormat24hDesc')}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<SelectItem value="12h">
|
||||
{t('xAxisFormat12h')}
|
||||
</SelectItem>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right">
|
||||
<p className="text-xs">{t('xAxisFormat12hDesc')}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<Label htmlFor="showTemplateDay" className="font-medium">
|
||||
{t.showTemplateDayInChart}
|
||||
<Switch
|
||||
id="showDayReferenceLines"
|
||||
checked={showDayReferenceLines}
|
||||
onCheckedChange={checked => onUpdateUiSetting('showDayReferenceLines', checked)}
|
||||
/>
|
||||
<Label htmlFor="showDayReferenceLines" className="font-regular">
|
||||
{t('showDayReferenceLines')}
|
||||
</Label>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<Switch
|
||||
id="showTemplateDay"
|
||||
checked={showTemplateDay}
|
||||
onCheckedChange={checked => onUpdateUiSetting('showTemplateDay', checked)}
|
||||
/>
|
||||
<Label htmlFor="showTemplateDay" className="font-regular">
|
||||
{t('showTemplateDayInChart')}
|
||||
</Label>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label className="font-medium">{t.simulationDuration}</Label>
|
||||
<Label className="font-medium">{t('simulationDuration')}</Label>
|
||||
<FormNumericInput
|
||||
value={simulationDays}
|
||||
onChange={val => onUpdateUiSetting('simulationDays', val)}
|
||||
increment={1}
|
||||
min={3}
|
||||
max={7}
|
||||
unit={t.days}
|
||||
unit={t('days')}
|
||||
required={true}
|
||||
errorMessage={t.errorNumberRequired}
|
||||
errorMessage={t('errorNumberRequired')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label className="font-medium">{t.displayedDays}</Label>
|
||||
<Label className="font-medium">{t('displayedDays')}</Label>
|
||||
<FormNumericInput
|
||||
value={displayedDays}
|
||||
onChange={val => onUpdateUiSetting('displayedDays', val)}
|
||||
increment={1}
|
||||
min={1}
|
||||
max={parseInt(simulationDays, 10) || 3}
|
||||
unit={t.days}
|
||||
unit={t('days')}
|
||||
required={true}
|
||||
errorMessage={t.errorNumberRequired}
|
||||
errorMessage={t('errorNumberRequired')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label className="font-medium">{t.yAxisRange}</Label>
|
||||
<Label className="font-medium">{t('yAxisRange')}</Label>
|
||||
<div className="flex items-center gap-2">
|
||||
<FormNumericInput
|
||||
value={yAxisMin}
|
||||
onChange={val => onUpdateUiSetting('yAxisMin', val)}
|
||||
increment={5}
|
||||
min={0}
|
||||
placeholder={t.auto}
|
||||
placeholder={t('auto')}
|
||||
allowEmpty={true}
|
||||
clearButton={true}
|
||||
/>
|
||||
@@ -103,7 +152,7 @@ const Settings = ({
|
||||
onChange={val => onUpdateUiSetting('yAxisMax', val)}
|
||||
increment={5}
|
||||
min={0}
|
||||
placeholder={t.auto}
|
||||
placeholder={t('auto')}
|
||||
unit="ng/ml"
|
||||
allowEmpty={true}
|
||||
clearButton={true}
|
||||
@@ -112,16 +161,16 @@ const Settings = ({
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label className="font-medium">{t.therapeuticRange}</Label>
|
||||
<Label className="font-medium">{t('therapeuticRange')}</Label>
|
||||
<div className="flex items-center gap-2">
|
||||
<FormNumericInput
|
||||
value={therapeuticRange.min}
|
||||
onChange={val => onUpdateTherapeuticRange('min', val)}
|
||||
increment={0.5}
|
||||
min={0}
|
||||
placeholder={t.min}
|
||||
placeholder={t('min')}
|
||||
required={true}
|
||||
errorMessage={t.therapeuticRangeMinRequired || 'Minimum therapeutic range is required'}
|
||||
errorMessage={t('therapeuticRangeMinRequired') || 'Minimum therapeutic range is required'}
|
||||
/>
|
||||
<span className="text-muted-foreground">-</span>
|
||||
<FormNumericInput
|
||||
@@ -129,19 +178,19 @@ const Settings = ({
|
||||
onChange={val => onUpdateTherapeuticRange('max', val)}
|
||||
increment={0.5}
|
||||
min={0}
|
||||
placeholder={t.max}
|
||||
placeholder={t('max')}
|
||||
unit="ng/ml"
|
||||
required={true}
|
||||
errorMessage={t.therapeuticRangeMaxRequired || 'Maximum therapeutic range is required'}
|
||||
errorMessage={t('therapeuticRangeMaxRequired') || 'Maximum therapeutic range is required'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Separator className="my-4" />
|
||||
|
||||
<h3 className="text-lg font-semibold">{t.dAmphetamineParameters}</h3>
|
||||
<h3 className="text-lg font-semibold">{t('dAmphetamineParameters')}</h3>
|
||||
<div className="space-y-2">
|
||||
<Label className="font-medium">{t.halfLife}</Label>
|
||||
<Label className="font-medium">{t('halfLife')}</Label>
|
||||
<FormNumericInput
|
||||
value={pkParams.damph.halfLife}
|
||||
onChange={val => onUpdatePkParams('damph', { halfLife: val })}
|
||||
@@ -149,15 +198,15 @@ const Settings = ({
|
||||
min={0.1}
|
||||
unit="h"
|
||||
required={true}
|
||||
errorMessage={t.halfLifeRequired || 'Half-life is required'}
|
||||
errorMessage={t('halfLifeRequired') || 'Half-life is required'}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Separator className="my-4" />
|
||||
|
||||
<h3 className="text-lg font-semibold">{t.lisdexamfetamineParameters}</h3>
|
||||
<h3 className="text-lg font-semibold">{t('lisdexamfetamineParameters')}</h3>
|
||||
<div className="space-y-2">
|
||||
<Label className="font-medium">{t.conversionHalfLife}</Label>
|
||||
<Label className="font-medium">{t('conversionHalfLife')}</Label>
|
||||
<FormNumericInput
|
||||
value={pkParams.ldx.halfLife}
|
||||
onChange={val => onUpdatePkParams('ldx', { halfLife: val })}
|
||||
@@ -165,20 +214,20 @@ const Settings = ({
|
||||
min={0.1}
|
||||
unit="h"
|
||||
required={true}
|
||||
errorMessage={t.conversionHalfLifeRequired || 'Conversion half-life is required'}
|
||||
errorMessage={t('conversionHalfLifeRequired') || 'Conversion half-life is required'}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label className="font-medium">{t.absorptionRate}</Label>
|
||||
<Label className="font-medium">{t('absorptionRate')}</Label>
|
||||
<FormNumericInput
|
||||
value={pkParams.ldx.absorptionRate}
|
||||
onChange={val => onUpdatePkParams('ldx', { absorptionRate: val })}
|
||||
increment={0.1}
|
||||
min={0.1}
|
||||
unit={t.faster}
|
||||
unit={t('faster')}
|
||||
required={true}
|
||||
errorMessage={t.absorptionRateRequired || 'Absorption rate is required'}
|
||||
errorMessage={t('absorptionRateRequired') || 'Absorption rate is required'}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -190,7 +239,7 @@ const Settings = ({
|
||||
variant="destructive"
|
||||
className="w-full"
|
||||
>
|
||||
{t.resetAllSettings}
|
||||
{t('resetAllSettings')}
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
Reference in New Issue
Block a user