jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ui: fix curr tz on negative offsets

Browse source
This commit is contained in:
nick-delirium 2024-09-09 17:15:51 +02:00
parent 8e936d1657
commit 7f46f3cec2
No known key found for this signature in database
GPG key ID: 93ABD695DF5FDBA0
1 changed files with 54 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

91
frontend/app/components/shared/SessionSettings/components/DefaultTimezone.tsx
View file

@ -1,36 +1,45 @@
import React, { useEffect } from 'react';
import { Button } from 'UI';
import { Radio } from 'antd';
import { toJS } from 'mobx';
import { useObserver } from 'mobx-react-lite';
import React, { useEffect } from 'react';
import { toast } from 'react-toastify';
import Select from 'Shared/Select';
import { useStore } from 'App/mstore';
import { Timezone } from 'App/mstore/types/sessionSettings';
import { useObserver } from 'mobx-react-lite';
import { toast } from 'react-toastify';
import { toJS } from 'mobx';
import { Button } from 'UI';
import Select from 'Shared/Select';
type TimezonesDropdown = Timezone[];
function DefaultTimezone() {
const { settingsStore } = useStore();
const sessionSettings = useObserver(() => settingsStore.sessionSettings);
const [changed, setChanged] = React.useState(false);
const [shownTimezone, setShownTimezone] = React.useState<'user' | 'local'>(sessionSettings.shownTimezone);
const timezoneOptions: TimezonesDropdown = settingsStore.sessionSettings.defaultTimezones;
const [timezone, setTimezone] = React.useState(settingsStore.sessionSettings.timezone);
const [shownTimezone, setShownTimezone] = React.useState<'user' | 'local'>(
sessionSettings.shownTimezone
);
const timezoneOptions: TimezonesDropdown =
settingsStore.sessionSettings.defaultTimezones;
const [timezone, setTimezone] = React.useState(
settingsStore.sessionSettings.timezone
);
useEffect(() => {
if (!timezone) setTimezone({ label: 'Local Timezone', value: 'system' });
}, []);
const getCurrentTimezone = () => {
const currentTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
const timezoneOffset = Math.floor(new Date().getTimezoneOffset() / -60);
const remainingVal = Math.abs(new Date().getTimezoneOffset() % 60)
const timezoneValue = `UTC${
(timezoneOffset >= 0 ? '+' : '-') + timezoneOffset.toString().padStart(2, '0')
}${remainingVal ? `:${remainingVal.toString().padStart(2, '0')}` : ''}`;
const remainingVal = Math.abs(new Date().getTimezoneOffset() % 60);
const sign = timezoneOffset > 0 ? '+' : '-';
const tzOffsHrs = Math.abs(timezoneOffset)
.toString()
.padStart(2, '0');
const tzOffsMins = remainingVal ? `:${remainingVal.toString().padStart(2, '0')}` : '';
const timezoneValue = `UTC${sign}${tzOffsHrs}${tzOffsMins}`;
const selectedTimezone = timezoneOptions.find(
(option) => option.label.includes(currentTimezone) || option.value === timezoneValue
(option) => option.value === timezoneValue
);
return selectedTimezone ? selectedTimezone : null;
};
@ -56,15 +65,16 @@ function DefaultTimezone() {
};
const updateDisplayedTZ = (value: 'user' | 'local') => {
sessionSettings.updateKey('shownTimezone', value)
setShownTimezone(value)
}
sessionSettings.updateKey('shownTimezone', value);
setShownTimezone(value);
};
return (
<>
<h3 className="text-lg">Default Timezone</h3>
<div className="my-1">
Set the timezone for this project. All Sessions, Charts will be referenced to this.
Set the timezone for this project. All Sessions, Charts will be
referenced to this.
</div>
<div>
<Radio.Group
@ -77,27 +87,34 @@ function DefaultTimezone() {
<Radio.Button value={'user'}>End User's Timezone</Radio.Button>
</Radio.Group>
</div>
{shownTimezone === 'local' ?
{shownTimezone === 'local' ? (
<>
<div className="mt-2 flex items-center" style={{ width: '265px' }}>
<Select
options={timezoneOptions}
defaultValue={timezone.value}
className="w-full"
value={timezoneOptions.find((option) => option.value === timezone.value)}
onChange={onSelectChange}
/>
<div className="col-span-3 ml-3">
<Button disabled={!changed} variant="outline" size="medium" onClick={onTimezoneSave}>
Update
</Button>
<div className="mt-2 flex items-center" style={{ width: '265px' }}>
<Select
options={timezoneOptions}
defaultValue={timezone.value}
className="w-full"
value={timezoneOptions.find(
(option) => option.value === timezone.value
)}
onChange={onSelectChange}
/>
<div className="col-span-3 ml-3">
<Button
disabled={!changed}
variant="outline"
size="medium"
onClick={onTimezoneSave}
>
Update
</Button>
</div>
</div>
<div onClick={setCurrentTimezone} className="mt-3 link">
Apply my current timezone
</div>
</div>
<div onClick={setCurrentTimezone} className="mt-3 link">
Apply my current timezone
</div>
</>
: null}
) : null}
</>
);
}