feat(ui): tz selector for settings
This commit is contained in:
nick-delirium
parent
ebb625dd2b
commit
205195f946
4 changed files with 66 additions and 25 deletions
|
|
@ -73,7 +73,7 @@ interface Props {
|
|||
|
||||
function SessionItem(props: RouteComponentProps & Props) {
|
||||
const { settingsStore } = useStore();
|
||||
const { timezone } = settingsStore.sessionSettings;
|
||||
const { timezone, shownTimezone } = settingsStore.sessionSettings;
|
||||
|
||||
const {
|
||||
session,
|
||||
|
|
@ -210,7 +210,10 @@ function SessionItem(props: RouteComponentProps & Props) {
|
|||
User's Time:{' '}
|
||||
{formatTimeOrDate(
|
||||
startedAt,
|
||||
{ label: userTimezone.split('+').join(' +'), value: userTimezone.split(':')[0] },
|
||||
{
|
||||
label: userTimezone.split('+').join(' +'),
|
||||
value: userTimezone.split(':')[0],
|
||||
},
|
||||
true
|
||||
)}{' '}
|
||||
{userTimezone}
|
||||
|
|
@ -221,7 +224,15 @@ function SessionItem(props: RouteComponentProps & Props) {
|
|||
className="w-fit !block"
|
||||
>
|
||||
<TextEllipsis
|
||||
text={formatTimeOrDate(startedAt, timezone)}
|
||||
text={formatTimeOrDate(
|
||||
startedAt,
|
||||
shownTimezone === 'user' && userTimezone
|
||||
? {
|
||||
label: userTimezone.split('+').join(' +'),
|
||||
value: userTimezone.split(':')[0],
|
||||
}
|
||||
: timezone
|
||||
)}
|
||||
popupProps={{ inverted: true, size: 'tiny' }}
|
||||
/>
|
||||
</Tooltip>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
import React, { useEffect } from 'react';
|
||||
import { Button } from 'UI';
|
||||
import { Radio } from 'antd';
|
||||
|
||||
import Select from 'Shared/Select';
|
||||
import { useStore } from 'App/mstore';
|
||||
import { Timezone } from 'App/mstore/types/sessionSettings';
|
||||
|
|
@ -9,11 +11,12 @@ import { toast } from 'react-toastify';
|
|||
type TimezonesDropdown = Timezone[];
|
||||
|
||||
function DefaultTimezone() {
|
||||
const [changed, setChanged] = React.useState(false);
|
||||
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 sessionSettings = useObserver(() => settingsStore.sessionSettings);
|
||||
|
||||
useEffect(() => {
|
||||
if (!timezone) setTimezone({ label: 'Local Timezone', value: 'system' });
|
||||
|
|
@ -33,7 +36,6 @@ function DefaultTimezone() {
|
|||
|
||||
const setCurrentTimezone = () => {
|
||||
const selectedTimezone = getCurrentTimezone();
|
||||
console.log('selectedTimezone', selectedTimezone);
|
||||
if (selectedTimezone) {
|
||||
setTimezone(selectedTimezone);
|
||||
sessionSettings.updateKey('timezone', selectedTimezone);
|
||||
|
|
@ -52,30 +54,49 @@ function DefaultTimezone() {
|
|||
toast.success('Default timezone saved successfully');
|
||||
};
|
||||
|
||||
const updateDisplayedTZ = (value: 'user' | 'local') => {
|
||||
sessionSettings.updateKey('shownTimezone', value)
|
||||
setShownTimezone(value)
|
||||
}
|
||||
console.log(shownTimezone, sessionSettings.shownTimezone)
|
||||
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.
|
||||
</div>
|
||||
<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>
|
||||
<Radio.Group
|
||||
onChange={(e) => {
|
||||
updateDisplayedTZ(e.target.value);
|
||||
}}
|
||||
value={shownTimezone}
|
||||
>
|
||||
<Radio value={'local'}>Local Timezone</Radio>
|
||||
<Radio value={'user'}>End User's Timezone</Radio>
|
||||
</Radio.Group>
|
||||
</div>
|
||||
{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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div onClick={setCurrentTimezone} className="mt-3 link">
|
||||
Apply my current timezone
|
||||
</div>
|
||||
<div onClick={setCurrentTimezone} className="mt-3 link">
|
||||
Apply my current timezone
|
||||
</div>
|
||||
</>
|
||||
: null}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
export const SKIP_TO_ISSUE = "__$session-skipToIssue$__"
|
||||
export const TIMEZONE = "__$session-timezone$__"
|
||||
export const SHOWN_TIMEZONE = "__$session-shownTimezone$__"
|
||||
export const DURATION_FILTER = "__$session-durationFilter$__"
|
||||
export const SESSION_FILTER = "__$session-filter$__"
|
||||
export const GLOBAL_DESTINATION_PATH = "__$global-destinationPath$__"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { makeAutoObservable, runInAction } from 'mobx';
|
||||
import moment from 'moment';
|
||||
import { SKIP_TO_ISSUE, TIMEZONE, DURATION_FILTER, MOUSE_TRAIL } from 'App/constants/storageKeys';
|
||||
import { SKIP_TO_ISSUE, TIMEZONE, SHOWN_TIMEZONE, DURATION_FILTER, MOUSE_TRAIL } from 'App/constants/storageKeys';
|
||||
|
||||
export type Timezone = {
|
||||
label: string;
|
||||
|
|
@ -70,19 +70,24 @@ export default class SessionSettings {
|
|||
captureRate: string = '0';
|
||||
captureAll: boolean = false;
|
||||
mouseTrail: boolean = localStorage.getItem(MOUSE_TRAIL) !== 'false';
|
||||
shownTimezone: 'user' | 'local';
|
||||
|
||||
|
||||
constructor() {
|
||||
console.log(localStorage.getItem(SHOWN_TIMEZONE))
|
||||
// compatibility fix for old timezone storage
|
||||
// TODO: remove after a while (1.7.1?)
|
||||
const userTimezoneOffset = moment().format('Z');
|
||||
const defaultTimezone = this.defaultTimezones.find(tz => tz.value.includes('UTC' + userTimezoneOffset.slice(0,3))) || { label: 'Local', value: `UTC${userTimezoneOffset}` };
|
||||
|
||||
this.timezoneFix(defaultTimezone);
|
||||
// @ts-ignore
|
||||
this.timezone = JSON.parse(localStorage.getItem(TIMEZONE)) || defaultTimezone;
|
||||
if (localStorage.getItem(MOUSE_TRAIL) === null) {
|
||||
localStorage.setItem(MOUSE_TRAIL, 'true');
|
||||
}
|
||||
|
||||
this.shownTimezone = localStorage.getItem(SHOWN_TIMEZONE) === 'user' ? 'user' : 'local'
|
||||
makeAutoObservable(this);
|
||||
}
|
||||
|
||||
|
|
@ -112,11 +117,14 @@ export default class SessionSettings {
|
|||
|
||||
updateKey = (key: string, value: any) => {
|
||||
runInAction(() => {
|
||||
// @ts-ignore
|
||||
this[key] = value;
|
||||
});
|
||||
|
||||
if (key === 'captureRate' || key === 'captureAll') return;
|
||||
|
||||
if (key === 'shownTimezone') {
|
||||
return localStorage.setItem(SHOWN_TIMEZONE, value as string);
|
||||
}
|
||||
if (key === 'durationFilter' || key === 'timezone') {
|
||||
localStorage.setItem(`__$session-${key}$__`, JSON.stringify(value));
|
||||
} else {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue