refactor schedule slot
This commit is contained in:
Maxim
parent
b3986f652e
commit
f8dc3898eb
11 changed files with 800 additions and 135 deletions
|
|
@ -1,61 +0,0 @@
|
|||
import dayjs from 'dayjs';
|
||||
|
||||
export const getRandomTimeslots = (count = 6, layerIndex, rotationIndex) => {
|
||||
const slots = [];
|
||||
for (let i = 0; i < count; i++) {
|
||||
const start = dayjs()
|
||||
.startOf('day')
|
||||
.add(i * 4, 'hour');
|
||||
const end = dayjs()
|
||||
.startOf('day')
|
||||
.add(i * 4 + 2, 'hour');
|
||||
//const inactive = end.isBefore(dayjs());
|
||||
const inactive = false;
|
||||
|
||||
slots.push({
|
||||
start,
|
||||
end,
|
||||
inactive,
|
||||
users: [getRandomUser() /*, getRandomUser()*/],
|
||||
color: getColor(layerIndex, rotationIndex),
|
||||
});
|
||||
}
|
||||
return slots;
|
||||
};
|
||||
|
||||
const L1_COLORS = ['#3D71D9', '#1A6BE8', '#6D609C', '#50639C', '#8214A0', '#44449F', '#4D3B72', '#273C6C'];
|
||||
|
||||
const L2_COLORS = ['#3CB979', '#A49E7C', '#188343', '#746D46', '#84362A', '#464121', '#521913', '#414130'];
|
||||
|
||||
const L3_COLORS = ['#377277', '#797B83', '#638282', '#626779', '#364E4E', '#47494F', '#423220', '#44321D'];
|
||||
|
||||
const OVERRIDE_COLORS = ['#C69B06', '#797B83', '#638282', '#626779'];
|
||||
|
||||
export const getOverrideColor = (index: number) => {
|
||||
return OVERRIDE_COLORS[index];
|
||||
};
|
||||
|
||||
const COLORS = [L1_COLORS, L2_COLORS, L3_COLORS, OVERRIDE_COLORS];
|
||||
|
||||
export const getColor = (layerIndex: number, rotationIndex: number) => {
|
||||
return COLORS[layerIndex][rotationIndex];
|
||||
};
|
||||
|
||||
const USERS = [
|
||||
'Innokentii Konstantinov',
|
||||
'Ildar Iskhakov',
|
||||
'Matias Bordese',
|
||||
'Michael Derynck',
|
||||
'Vadim Stepanov',
|
||||
'Matvey Kukuy',
|
||||
'Yulya Artyukhina',
|
||||
'Raphael Batyrbaev',
|
||||
];
|
||||
|
||||
export const getRandomUser = () => {
|
||||
return USERS[Math.floor(Math.random() * USERS.length)];
|
||||
};
|
||||
|
||||
export const getLabel = (layerIndex: number, rotationIndex) => {
|
||||
return `L ${layerIndex + 1}-${rotationIndex + 1}`;
|
||||
};
|
||||
|
|
@ -82,8 +82,6 @@ class Rotations extends Component<RotationsProps, RotationsState> {
|
|||
id={`${layerIndex}-${rotationIndex}`}
|
||||
layerIndex={layerIndex}
|
||||
rotationIndex={rotationIndex}
|
||||
slots={getRandomTimeslots(6, layerIndex, rotationIndex)}
|
||||
label={getLabel(layerIndex, rotationIndex)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,75 @@
|
|||
import dayjs from 'dayjs';
|
||||
|
||||
import { Shift } from 'models/schedule/schedule.types';
|
||||
import { User } from 'models/user/user.types';
|
||||
|
||||
export const getRandomTimeslots = (count = 6, layerIndex, rotationIndex) => {
|
||||
const slots = [];
|
||||
for (let i = 0; i < count; i++) {
|
||||
const start = dayjs()
|
||||
.startOf('day')
|
||||
.add(i * 4, 'hour');
|
||||
const end = dayjs()
|
||||
.startOf('day')
|
||||
.add(i * 4 + 2, 'hour');
|
||||
//const inactive = end.isBefore(dayjs());
|
||||
const inactive = false;
|
||||
|
||||
slots.push({
|
||||
start,
|
||||
end,
|
||||
inactive,
|
||||
users: [getRandomUser() /*, getRandomUser()*/],
|
||||
color: getColor(layerIndex, rotationIndex),
|
||||
});
|
||||
}
|
||||
return slots;
|
||||
};
|
||||
|
||||
const L1_COLORS = ['#3D71D9', '#1A6BE8', '#6D609C', '#50639C', '#8214A0', '#44449F', '#4D3B72', '#273C6C'];
|
||||
|
||||
const L2_COLORS = ['#3CB979', '#A49E7C', '#188343', '#746D46', '#84362A', '#464121', '#521913', '#414130'];
|
||||
|
||||
const L3_COLORS = ['#377277', '#797B83', '#638282', '#626779', '#364E4E', '#47494F', '#423220', '#44321D'];
|
||||
|
||||
const OVERRIDE_COLORS = ['#C69B06', '#797B83', '#638282', '#626779'];
|
||||
|
||||
export const getOverrideColor = (index: number) => {
|
||||
return OVERRIDE_COLORS[index];
|
||||
};
|
||||
|
||||
const COLORS = [L1_COLORS, L2_COLORS, L3_COLORS, OVERRIDE_COLORS];
|
||||
|
||||
export const getColor = (layerIndex: number, rotationIndex: number) => {
|
||||
return COLORS[layerIndex][rotationIndex];
|
||||
};
|
||||
|
||||
const USERS = [
|
||||
'Innokentii Konstantinov',
|
||||
'Ildar Iskhakov',
|
||||
'Matias Bordese',
|
||||
'Michael Derynck',
|
||||
'Vadim Stepanov',
|
||||
'Matvey Kukuy',
|
||||
'Yulya Artyukhina',
|
||||
'Raphael Batyrbaev',
|
||||
];
|
||||
|
||||
export const getRandomUser = () => {
|
||||
return USERS[Math.floor(Math.random() * USERS.length)];
|
||||
};
|
||||
|
||||
export const getLabel = (layerIndex: number, rotationIndex) => {
|
||||
return `L ${layerIndex + 1}-${rotationIndex + 1}`;
|
||||
};
|
||||
|
||||
export const getTitle = (user: User) => {
|
||||
return user
|
||||
? user.username
|
||||
.split(' ')
|
||||
.map((word) => word.charAt(0).toUpperCase())
|
||||
.join('')
|
||||
: null;
|
||||
};
|
||||
|
||||
export const getOuRanges = (shift: Shift, user: User) => {};
|
||||
|
|
@ -7,9 +7,21 @@
|
|||
gap: 4px;
|
||||
}
|
||||
|
||||
|
||||
.stack {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap:1px;
|
||||
}
|
||||
|
||||
.stack > .root {
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
.root__type_gap {
|
||||
background: rgba(209, 14, 92, 0.2);
|
||||
border: 1px dashed #FF5286;
|
||||
color: rgba(209, 14, 92, .5);
|
||||
}
|
||||
|
||||
.root__inactive {
|
||||
|
|
|
|||
|
|
@ -6,61 +6,85 @@ import { observer } from 'mobx-react';
|
|||
|
||||
import Line from 'components/ScheduleUserDetails/img/line.svg';
|
||||
import Text from 'components/Text/Text';
|
||||
import { Shift } from 'models/schedule/schedule.types';
|
||||
import { User } from 'models/user/user.types';
|
||||
import { useStore } from 'state/useStore';
|
||||
|
||||
import { getColor, getLabel, getTitle } from './ScheduleSlot.helpers';
|
||||
|
||||
import styles from './ScheduleSlot.module.css';
|
||||
|
||||
interface ScheduleSlotProps {
|
||||
color: string;
|
||||
userPk: User['pk'];
|
||||
label: string;
|
||||
inactive: boolean;
|
||||
width: number;
|
||||
index: number;
|
||||
layerIndex: number;
|
||||
rotationIndex: number;
|
||||
shift: Shift;
|
||||
}
|
||||
|
||||
const cx = cn.bind(styles);
|
||||
|
||||
const ScheduleSlot: FC<ScheduleSlotProps> = observer((props) => {
|
||||
const { color, userPk, inactive, label } = props;
|
||||
const { index, layerIndex, rotationIndex, shift } = props;
|
||||
const { duration, users } = shift;
|
||||
|
||||
const left = Math.random() * 50;
|
||||
const right = 100 - (left + 20 + Math.random() * 30);
|
||||
const isGap = !users.length;
|
||||
|
||||
const store = useStore();
|
||||
|
||||
const storeUser = store.userStore.items[userPk];
|
||||
const width = duration / (60 * 60 * 24 * 7);
|
||||
|
||||
let title = storeUser
|
||||
? storeUser.username
|
||||
.split(' ')
|
||||
.map((word) => word.charAt(0).toUpperCase())
|
||||
.join('')
|
||||
: null;
|
||||
const label = index === 0 && getLabel(layerIndex, rotationIndex);
|
||||
|
||||
return (
|
||||
<Tooltip content={<ScheduleSlotDetails user={storeUser} />}>
|
||||
<div
|
||||
className={cx('root', { root__inactive: inactive })}
|
||||
style={{
|
||||
backgroundColor: color,
|
||||
}}
|
||||
>
|
||||
<div style={{ left: `${left}%`, right: `${right}%` }} className={cx('striped')} />
|
||||
{label && (
|
||||
<div className={cx('label')} style={{ color }}>
|
||||
{label}
|
||||
<div className={cx('stack')} style={{ width: `${width * 100}%` }}>
|
||||
{!isGap ? (
|
||||
users.map((pk, userIndex) => {
|
||||
const left = Math.random() * 50;
|
||||
const right = 100 - (left + 20 + Math.random() * 30);
|
||||
|
||||
const storeUser = store.userStore.items[pk];
|
||||
|
||||
const inactive = false;
|
||||
|
||||
const color = getColor(layerIndex, rotationIndex);
|
||||
const title = getTitle(storeUser);
|
||||
|
||||
return (
|
||||
<Tooltip content={<ScheduleSlotDetails user={storeUser} currentUser={store.userStore.currentUser} />}>
|
||||
<div
|
||||
className={cx('root', { root__inactive: inactive })}
|
||||
style={{
|
||||
backgroundColor: color,
|
||||
}}
|
||||
>
|
||||
<div style={{ left: `${left}%`, right: `${right}%` }} className={cx('striped')} />
|
||||
{label && (
|
||||
<div className={cx('label')} style={{ color }}>
|
||||
{label}
|
||||
</div>
|
||||
)}
|
||||
<div className={cx('title')}>{title}</div>
|
||||
</div>
|
||||
</Tooltip>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<Tooltip content={<ScheduleGapDetails />}>
|
||||
<div className={cx('root', 'root__type_gap')} style={{}}>
|
||||
{label && <div className={cx('label')}>{label}</div>}
|
||||
</div>
|
||||
)}
|
||||
<div className={cx('title')}>{title}</div>
|
||||
</div>
|
||||
</Tooltip>
|
||||
</Tooltip>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
export default ScheduleSlot;
|
||||
|
||||
interface ScheduleSlotDetailsProps {}
|
||||
interface ScheduleSlotDetailsProps {
|
||||
user: User;
|
||||
currentUser: User;
|
||||
}
|
||||
|
||||
const ScheduleSlotDetails = (props: ScheduleSlotDetailsProps) => {
|
||||
const { user, currentUser } = props;
|
||||
|
|
@ -96,7 +120,7 @@ const ScheduleSlotDetails = (props: ScheduleSlotDetailsProps) => {
|
|||
</HorizontalGroup>
|
||||
</VerticalGroup>
|
||||
<VerticalGroup spacing="sm">
|
||||
<Text type="primary">Maxim Mordasov</Text>
|
||||
<Text type="primary">{currentUser?.username}</Text>
|
||||
<VerticalGroup spacing="none">
|
||||
<Text type="primary">30 apr, 12:54 </Text>
|
||||
<Text type="primary">29 apr, 20:00 </Text>
|
||||
|
|
@ -108,8 +132,24 @@ const ScheduleSlotDetails = (props: ScheduleSlotDetailsProps) => {
|
|||
);
|
||||
};
|
||||
|
||||
interface ScheduleGapProps {}
|
||||
interface ScheduleGapDetailsProps {}
|
||||
|
||||
export const ScheduleGap = (props: ScheduleGapProps) => {
|
||||
return <div className={cx('root', 'root__type_gap')} style={{}} />;
|
||||
const ScheduleGapDetails = (props: ScheduleGapDetailsProps) => {
|
||||
const {} = props;
|
||||
|
||||
return (
|
||||
<div className={cx('details')}>
|
||||
<VerticalGroup>
|
||||
<Text type="primary">Gaps this week</Text>
|
||||
<HorizontalGroup justify="space-between">
|
||||
<Text type="secondary">Number of gaps</Text>
|
||||
<Text type="secondary">12</Text>
|
||||
</HorizontalGroup>
|
||||
<HorizontalGroup justify="space-between">
|
||||
<Text type="secondary">Time</Text>
|
||||
<Text type="secondary">23h 12m</Text>
|
||||
</HorizontalGroup>
|
||||
</VerticalGroup>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -29,16 +29,6 @@
|
|||
display: flex;
|
||||
}
|
||||
|
||||
.stack {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap:1px;
|
||||
}
|
||||
|
||||
.stack > div {
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
.current-time {
|
||||
position: absolute;
|
||||
left: 450px;
|
||||
|
|
|
|||
|
|
@ -5,8 +5,7 @@ import cn from 'classnames/bind';
|
|||
import * as dayjs from 'dayjs';
|
||||
import { observer } from 'mobx-react';
|
||||
|
||||
import { getColor } from 'components/Rotations/Rotations.helpers';
|
||||
import ScheduleSlot, { ScheduleGap } from 'components/ScheduleSlot/ScheduleSlot';
|
||||
import ScheduleSlot from 'components/ScheduleSlot/ScheduleSlot';
|
||||
import Text from 'components/Text/Text';
|
||||
import { Rotation as RotationType } from 'models/schedule/schedule.types';
|
||||
import { useStore } from 'state/useStore';
|
||||
|
|
@ -46,29 +45,15 @@ const Rotation: FC<RotationProps> = observer((props) => {
|
|||
{/* <div className={cx('current-time')} />*/}
|
||||
<div className={cx('timeline')}>
|
||||
<div className={cx('slots')}>
|
||||
{shifts.map(({ start, duration, users }, slotIndex) => {
|
||||
const inactive = false;
|
||||
|
||||
const width = duration / (60 * 60 * 24 * 7);
|
||||
|
||||
{shifts.map((shift, index) => {
|
||||
return (
|
||||
<div className={cx('stack')} style={{ width: `${width * 100}%` }}>
|
||||
{users.length ? (
|
||||
users.map((pk, userIndex) => {
|
||||
return (
|
||||
<ScheduleSlot
|
||||
key={userIndex}
|
||||
color={getColor(layerIndex, rotationIndex)}
|
||||
label={slotIndex === 0 && userIndex === 0 && label}
|
||||
userPk={pk}
|
||||
inactive={inactive}
|
||||
/>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<ScheduleGap />
|
||||
)}
|
||||
</div>
|
||||
<ScheduleSlot
|
||||
key={index}
|
||||
index={index}
|
||||
shift={shift}
|
||||
layerIndex={layerIndex}
|
||||
rotationIndex={rotationIndex}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -152,11 +152,23 @@ export class ScheduleStore extends BaseStore {
|
|||
for (let i = 0; i < 14; i++) {
|
||||
shifts.push({
|
||||
start: dayjs(startMoment).add(3 * i, 'hour'),
|
||||
duration: (Math.floor(Math.random() * 6) + 8) * 60 * 60,
|
||||
duration: (Math.floor(Math.random() * 6) + 10) * 60 * 60,
|
||||
users: getUsers(),
|
||||
});
|
||||
}
|
||||
|
||||
const a = {
|
||||
working_hours: {
|
||||
monday: [{ start: '09:00:00', end: '18:00:00' }],
|
||||
tuesday: [{ start: '09:00:00', end: '18:00:00' }],
|
||||
wednesday: [{ start: '09:00:00', end: '18:00:00' }],
|
||||
thursday: [{ start: '09:00:00', end: '18:00:00' }],
|
||||
friday: [{ start: '09:00:00', end: '18:00:00' }],
|
||||
saturday: [],
|
||||
sunday: [],
|
||||
},
|
||||
};
|
||||
|
||||
resolve({ id: rotationId, shifts });
|
||||
}, 500);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,5 +1,604 @@
|
|||
import dayjs from 'dayjs';
|
||||
|
||||
const tzs = [
|
||||
'Africa/Abidjan',
|
||||
'Africa/Accra',
|
||||
'Africa/Addis_Ababa',
|
||||
'Africa/Algiers',
|
||||
'Africa/Asmara',
|
||||
'Africa/Asmera',
|
||||
'Africa/Bamako',
|
||||
'Africa/Bangui',
|
||||
'Africa/Banjul',
|
||||
'Africa/Bissau',
|
||||
'Africa/Blantyre',
|
||||
'Africa/Brazzaville',
|
||||
'Africa/Bujumbura',
|
||||
'Africa/Cairo',
|
||||
'Africa/Casablanca',
|
||||
'Africa/Ceuta',
|
||||
'Africa/Conakry',
|
||||
'Africa/Dakar',
|
||||
'Africa/Dar_es_Salaam',
|
||||
'Africa/Djibouti',
|
||||
'Africa/Douala',
|
||||
'Africa/El_Aaiun',
|
||||
'Africa/Freetown',
|
||||
'Africa/Gaborone',
|
||||
'Africa/Harare',
|
||||
'Africa/Johannesburg',
|
||||
'Africa/Juba',
|
||||
'Africa/Kampala',
|
||||
'Africa/Khartoum',
|
||||
'Africa/Kigali',
|
||||
'Africa/Kinshasa',
|
||||
'Africa/Lagos',
|
||||
'Africa/Libreville',
|
||||
'Africa/Lome',
|
||||
'Africa/Luanda',
|
||||
'Africa/Lubumbashi',
|
||||
'Africa/Lusaka',
|
||||
'Africa/Malabo',
|
||||
'Africa/Maputo',
|
||||
'Africa/Maseru',
|
||||
'Africa/Mbabane',
|
||||
'Africa/Mogadishu',
|
||||
'Africa/Monrovia',
|
||||
'Africa/Nairobi',
|
||||
'Africa/Ndjamena',
|
||||
'Africa/Niamey',
|
||||
'Africa/Nouakchott',
|
||||
'Africa/Ouagadougou',
|
||||
'Africa/Porto-Novo',
|
||||
'Africa/Sao_Tome',
|
||||
'Africa/Timbuktu',
|
||||
'Africa/Tripoli',
|
||||
'Africa/Tunis',
|
||||
'Africa/Windhoek',
|
||||
'America/Adak',
|
||||
'America/Anchorage',
|
||||
'America/Anguilla',
|
||||
'America/Antigua',
|
||||
'America/Araguaina',
|
||||
'America/Argentina/Buenos_Aires',
|
||||
'America/Argentina/Catamarca',
|
||||
'America/Argentina/ComodRivadavia',
|
||||
'America/Argentina/Cordoba',
|
||||
'America/Argentina/Jujuy',
|
||||
'America/Argentina/La_Rioja',
|
||||
'America/Argentina/Mendoza',
|
||||
'America/Argentina/Rio_Gallegos',
|
||||
'America/Argentina/Salta',
|
||||
'America/Argentina/San_Juan',
|
||||
'America/Argentina/San_Luis',
|
||||
'America/Argentina/Tucuman',
|
||||
'America/Argentina/Ushuaia',
|
||||
'America/Aruba',
|
||||
'America/Asuncion',
|
||||
'America/Atikokan',
|
||||
'America/Atka',
|
||||
'America/Bahia',
|
||||
'America/Bahia_Banderas',
|
||||
'America/Barbados',
|
||||
'America/Belem',
|
||||
'America/Belize',
|
||||
'America/Blanc-Sablon',
|
||||
'America/Boa_Vista',
|
||||
'America/Bogota',
|
||||
'America/Boise',
|
||||
'America/Buenos_Aires',
|
||||
'America/Cambridge_Bay',
|
||||
'America/Campo_Grande',
|
||||
'America/Cancun',
|
||||
'America/Caracas',
|
||||
'America/Catamarca',
|
||||
'America/Cayenne',
|
||||
'America/Cayman',
|
||||
'America/Chicago',
|
||||
'America/Chihuahua',
|
||||
'America/Coral_Harbour',
|
||||
'America/Cordoba',
|
||||
'America/Costa_Rica',
|
||||
'America/Creston',
|
||||
'America/Cuiaba',
|
||||
'America/Curacao',
|
||||
'America/Danmarkshavn',
|
||||
'America/Dawson',
|
||||
'America/Dawson_Creek',
|
||||
'America/Denver',
|
||||
'America/Detroit',
|
||||
'America/Dominica',
|
||||
'America/Edmonton',
|
||||
'America/Eirunepe',
|
||||
'America/El_Salvador',
|
||||
'America/Ensenada',
|
||||
'America/Fort_Nelson',
|
||||
'America/Fort_Wayne',
|
||||
'America/Fortaleza',
|
||||
'America/Glace_Bay',
|
||||
'America/Godthab',
|
||||
'America/Goose_Bay',
|
||||
'America/Grand_Turk',
|
||||
'America/Grenada',
|
||||
'America/Guadeloupe',
|
||||
'America/Guatemala',
|
||||
'America/Guayaquil',
|
||||
'America/Guyana',
|
||||
'America/Halifax',
|
||||
'America/Havana',
|
||||
'America/Hermosillo',
|
||||
'America/Indiana/Indianapolis',
|
||||
'America/Indiana/Knox',
|
||||
'America/Indiana/Marengo',
|
||||
'America/Indiana/Petersburg',
|
||||
'America/Indiana/Tell_City',
|
||||
'America/Indiana/Vevay',
|
||||
'America/Indiana/Vincennes',
|
||||
'America/Indiana/Winamac',
|
||||
'America/Indianapolis',
|
||||
'America/Inuvik',
|
||||
'America/Iqaluit',
|
||||
'America/Jamaica',
|
||||
'America/Jujuy',
|
||||
'America/Juneau',
|
||||
'America/Kentucky/Louisville',
|
||||
'America/Kentucky/Monticello',
|
||||
'America/Knox_IN',
|
||||
'America/Kralendijk',
|
||||
'America/La_Paz',
|
||||
'America/Lima',
|
||||
'America/Los_Angeles',
|
||||
'America/Louisville',
|
||||
'America/Lower_Princes',
|
||||
'America/Maceio',
|
||||
'America/Managua',
|
||||
'America/Manaus',
|
||||
'America/Marigot',
|
||||
'America/Martinique',
|
||||
'America/Matamoros',
|
||||
'America/Mazatlan',
|
||||
'America/Mendoza',
|
||||
'America/Menominee',
|
||||
'America/Merida',
|
||||
'America/Metlakatla',
|
||||
'America/Mexico_City',
|
||||
'America/Miquelon',
|
||||
'America/Moncton',
|
||||
'America/Monterrey',
|
||||
'America/Montevideo',
|
||||
'America/Montreal',
|
||||
'America/Montserrat',
|
||||
'America/Nassau',
|
||||
'America/New_York',
|
||||
'America/Nipigon',
|
||||
'America/Nome',
|
||||
'America/Noronha',
|
||||
'America/North_Dakota/Beulah',
|
||||
'America/North_Dakota/Center',
|
||||
'America/North_Dakota/New_Salem',
|
||||
'America/Ojinaga',
|
||||
'America/Panama',
|
||||
'America/Pangnirtung',
|
||||
'America/Paramaribo',
|
||||
'America/Phoenix',
|
||||
'America/Port-au-Prince',
|
||||
'America/Port_of_Spain',
|
||||
'America/Porto_Acre',
|
||||
'America/Porto_Velho',
|
||||
'America/Puerto_Rico',
|
||||
'America/Punta_Arenas',
|
||||
'America/Rainy_River',
|
||||
'America/Rankin_Inlet',
|
||||
'America/Recife',
|
||||
'America/Regina',
|
||||
'America/Resolute',
|
||||
'America/Rio_Branco',
|
||||
'America/Rosario',
|
||||
'America/Santa_Isabel',
|
||||
'America/Santarem',
|
||||
'America/Santiago',
|
||||
'America/Santo_Domingo',
|
||||
'America/Sao_Paulo',
|
||||
'America/Scoresbysund',
|
||||
'America/Shiprock',
|
||||
'America/Sitka',
|
||||
'America/St_Barthelemy',
|
||||
'America/St_Johns',
|
||||
'America/St_Kitts',
|
||||
'America/St_Lucia',
|
||||
'America/St_Thomas',
|
||||
'America/St_Vincent',
|
||||
'America/Swift_Current',
|
||||
'America/Tegucigalpa',
|
||||
'America/Thule',
|
||||
'America/Thunder_Bay',
|
||||
'America/Tijuana',
|
||||
'America/Toronto',
|
||||
'America/Tortola',
|
||||
'America/Vancouver',
|
||||
'America/Virgin',
|
||||
'America/Whitehorse',
|
||||
'America/Winnipeg',
|
||||
'America/Yakutat',
|
||||
'America/Yellowknife',
|
||||
'Antarctica/Casey',
|
||||
'Antarctica/Davis',
|
||||
'Antarctica/DumontDUrville',
|
||||
'Antarctica/Macquarie',
|
||||
'Antarctica/Mawson',
|
||||
'Antarctica/McMurdo',
|
||||
'Antarctica/Palmer',
|
||||
'Antarctica/Rothera',
|
||||
'Antarctica/South_Pole',
|
||||
'Antarctica/Syowa',
|
||||
'Antarctica/Troll',
|
||||
'Antarctica/Vostok',
|
||||
'Arctic/Longyearbyen',
|
||||
'Asia/Aden',
|
||||
'Asia/Almaty',
|
||||
'Asia/Amman',
|
||||
'Asia/Anadyr',
|
||||
'Asia/Aqtau',
|
||||
'Asia/Aqtobe',
|
||||
'Asia/Ashgabat',
|
||||
'Asia/Ashkhabad',
|
||||
'Asia/Atyrau',
|
||||
'Asia/Baghdad',
|
||||
'Asia/Bahrain',
|
||||
'Asia/Baku',
|
||||
'Asia/Bangkok',
|
||||
'Asia/Barnaul',
|
||||
'Asia/Beirut',
|
||||
'Asia/Bishkek',
|
||||
'Asia/Brunei',
|
||||
'Asia/Calcutta',
|
||||
'Asia/Chita',
|
||||
'Asia/Choibalsan',
|
||||
'Asia/Chongqing',
|
||||
'Asia/Chungking',
|
||||
'Asia/Colombo',
|
||||
'Asia/Dacca',
|
||||
'Asia/Damascus',
|
||||
'Asia/Dhaka',
|
||||
'Asia/Dili',
|
||||
'Asia/Dubai',
|
||||
'Asia/Dushanbe',
|
||||
'Asia/Famagusta',
|
||||
'Asia/Gaza',
|
||||
'Asia/Harbin',
|
||||
'Asia/Hebron',
|
||||
'Asia/Ho_Chi_Minh',
|
||||
'Asia/Hong_Kong',
|
||||
'Asia/Hovd',
|
||||
'Asia/Irkutsk',
|
||||
'Asia/Istanbul',
|
||||
'Asia/Jakarta',
|
||||
'Asia/Jayapura',
|
||||
'Asia/Jerusalem',
|
||||
'Asia/Kabul',
|
||||
'Asia/Kamchatka',
|
||||
'Asia/Karachi',
|
||||
'Asia/Kashgar',
|
||||
'Asia/Kathmandu',
|
||||
'Asia/Katmandu',
|
||||
'Asia/Khandyga',
|
||||
'Asia/Kolkata',
|
||||
'Asia/Krasnoyarsk',
|
||||
'Asia/Kuala_Lumpur',
|
||||
'Asia/Kuching',
|
||||
'Asia/Kuwait',
|
||||
'Asia/Macao',
|
||||
'Asia/Macau',
|
||||
'Asia/Magadan',
|
||||
'Asia/Makassar',
|
||||
'Asia/Manila',
|
||||
'Asia/Muscat',
|
||||
'Asia/Nicosia',
|
||||
'Asia/Novokuznetsk',
|
||||
'Asia/Novosibirsk',
|
||||
'Asia/Omsk',
|
||||
'Asia/Oral',
|
||||
'Asia/Phnom_Penh',
|
||||
'Asia/Pontianak',
|
||||
'Asia/Pyongyang',
|
||||
'Asia/Qatar',
|
||||
'Asia/Qyzylorda',
|
||||
'Asia/Rangoon',
|
||||
'Asia/Riyadh',
|
||||
'Asia/Saigon',
|
||||
'Asia/Sakhalin',
|
||||
'Asia/Samarkand',
|
||||
'Asia/Seoul',
|
||||
'Asia/Shanghai',
|
||||
'Asia/Singapore',
|
||||
'Asia/Srednekolymsk',
|
||||
'Asia/Taipei',
|
||||
'Asia/Tashkent',
|
||||
'Asia/Tbilisi',
|
||||
'Asia/Tehran',
|
||||
'Asia/Tel_Aviv',
|
||||
'Asia/Thimbu',
|
||||
'Asia/Thimphu',
|
||||
'Asia/Tokyo',
|
||||
'Asia/Tomsk',
|
||||
'Asia/Ujung_Pandang',
|
||||
'Asia/Ulaanbaatar',
|
||||
'Asia/Ulan_Bator',
|
||||
'Asia/Urumqi',
|
||||
'Asia/Ust-Nera',
|
||||
'Asia/Vientiane',
|
||||
'Asia/Vladivostok',
|
||||
'Asia/Yakutsk',
|
||||
'Asia/Yangon',
|
||||
'Asia/Yekaterinburg',
|
||||
'Asia/Yerevan',
|
||||
'Atlantic/Azores',
|
||||
'Atlantic/Bermuda',
|
||||
'Atlantic/Canary',
|
||||
'Atlantic/Cape_Verde',
|
||||
'Atlantic/Faeroe',
|
||||
'Atlantic/Faroe',
|
||||
'Atlantic/Jan_Mayen',
|
||||
'Atlantic/Madeira',
|
||||
'Atlantic/Reykjavik',
|
||||
'Atlantic/South_Georgia',
|
||||
'Atlantic/St_Helena',
|
||||
'Atlantic/Stanley',
|
||||
'Australia/ACT',
|
||||
'Australia/Adelaide',
|
||||
'Australia/Brisbane',
|
||||
'Australia/Broken_Hill',
|
||||
'Australia/Canberra',
|
||||
'Australia/Currie',
|
||||
'Australia/Darwin',
|
||||
'Australia/Eucla',
|
||||
'Australia/Hobart',
|
||||
'Australia/LHI',
|
||||
'Australia/Lindeman',
|
||||
'Australia/Lord_Howe',
|
||||
'Australia/Melbourne',
|
||||
'Australia/NSW',
|
||||
'Australia/North',
|
||||
'Australia/Perth',
|
||||
'Australia/Queensland',
|
||||
'Australia/South',
|
||||
'Australia/Sydney',
|
||||
'Australia/Tasmania',
|
||||
'Australia/Victoria',
|
||||
'Australia/West',
|
||||
'Australia/Yancowinna',
|
||||
'Brazil/Acre',
|
||||
'Brazil/DeNoronha',
|
||||
'Brazil/East',
|
||||
'Brazil/West',
|
||||
'CET',
|
||||
'CST6CDT',
|
||||
'Canada/Atlantic',
|
||||
'Canada/Central',
|
||||
'Canada/Eastern',
|
||||
'Canada/Mountain',
|
||||
'Canada/Newfoundland',
|
||||
'Canada/Pacific',
|
||||
'Canada/Saskatchewan',
|
||||
'Canada/Yukon',
|
||||
'Chile/Continental',
|
||||
'Chile/EasterIsland',
|
||||
'Cuba',
|
||||
'EET',
|
||||
'EST',
|
||||
'EST5EDT',
|
||||
'Egypt',
|
||||
'Eire',
|
||||
'Etc/GMT',
|
||||
'Etc/GMT+0',
|
||||
'Etc/GMT+1',
|
||||
'Etc/GMT+10',
|
||||
'Etc/GMT+11',
|
||||
'Etc/GMT+12',
|
||||
'Etc/GMT+2',
|
||||
'Etc/GMT+3',
|
||||
'Etc/GMT+4',
|
||||
'Etc/GMT+5',
|
||||
'Etc/GMT+6',
|
||||
'Etc/GMT+7',
|
||||
'Etc/GMT+8',
|
||||
'Etc/GMT+9',
|
||||
'Etc/GMT-0',
|
||||
'Etc/GMT-1',
|
||||
'Etc/GMT-10',
|
||||
'Etc/GMT-11',
|
||||
'Etc/GMT-12',
|
||||
'Etc/GMT-13',
|
||||
'Etc/GMT-14',
|
||||
'Etc/GMT-2',
|
||||
'Etc/GMT-3',
|
||||
'Etc/GMT-4',
|
||||
'Etc/GMT-5',
|
||||
'Etc/GMT-6',
|
||||
'Etc/GMT-7',
|
||||
'Etc/GMT-8',
|
||||
'Etc/GMT-9',
|
||||
'Etc/GMT0',
|
||||
'Etc/Greenwich',
|
||||
'Etc/UCT',
|
||||
'Etc/UTC',
|
||||
'Etc/Universal',
|
||||
'Etc/Zulu',
|
||||
'Europe/Amsterdam',
|
||||
'Europe/Andorra',
|
||||
'Europe/Astrakhan',
|
||||
'Europe/Athens',
|
||||
'Europe/Belfast',
|
||||
'Europe/Belgrade',
|
||||
'Europe/Berlin',
|
||||
'Europe/Bratislava',
|
||||
'Europe/Brussels',
|
||||
'Europe/Bucharest',
|
||||
'Europe/Budapest',
|
||||
'Europe/Busingen',
|
||||
'Europe/Chisinau',
|
||||
'Europe/Copenhagen',
|
||||
'Europe/Dublin',
|
||||
'Europe/Gibraltar',
|
||||
'Europe/Guernsey',
|
||||
'Europe/Helsinki',
|
||||
'Europe/Isle_of_Man',
|
||||
'Europe/Istanbul',
|
||||
'Europe/Jersey',
|
||||
'Europe/Kaliningrad',
|
||||
'Europe/Kiev',
|
||||
'Europe/Kirov',
|
||||
'Europe/Lisbon',
|
||||
'Europe/Ljubljana',
|
||||
'Europe/London',
|
||||
'Europe/Luxembourg',
|
||||
'Europe/Madrid',
|
||||
'Europe/Malta',
|
||||
'Europe/Mariehamn',
|
||||
'Europe/Minsk',
|
||||
'Europe/Monaco',
|
||||
'Europe/Moscow',
|
||||
'Europe/Nicosia',
|
||||
'Europe/Oslo',
|
||||
'Europe/Paris',
|
||||
'Europe/Podgorica',
|
||||
'Europe/Prague',
|
||||
'Europe/Riga',
|
||||
'Europe/Rome',
|
||||
'Europe/Samara',
|
||||
'Europe/San_Marino',
|
||||
'Europe/Sarajevo',
|
||||
'Europe/Saratov',
|
||||
'Europe/Simferopol',
|
||||
'Europe/Skopje',
|
||||
'Europe/Sofia',
|
||||
'Europe/Stockholm',
|
||||
'Europe/Tallinn',
|
||||
'Europe/Tirane',
|
||||
'Europe/Tiraspol',
|
||||
'Europe/Ulyanovsk',
|
||||
'Europe/Uzhgorod',
|
||||
'Europe/Vaduz',
|
||||
'Europe/Vatican',
|
||||
'Europe/Vienna',
|
||||
'Europe/Vilnius',
|
||||
'Europe/Volgograd',
|
||||
'Europe/Warsaw',
|
||||
'Europe/Zagreb',
|
||||
'Europe/Zaporozhye',
|
||||
'Europe/Zurich',
|
||||
'GB',
|
||||
'GB-Eire',
|
||||
'GMT',
|
||||
'GMT+0',
|
||||
'GMT-0',
|
||||
'GMT0',
|
||||
'Greenwich',
|
||||
'HST',
|
||||
'Hongkong',
|
||||
'Iceland',
|
||||
'Indian/Antananarivo',
|
||||
'Indian/Chagos',
|
||||
'Indian/Christmas',
|
||||
'Indian/Cocos',
|
||||
'Indian/Comoro',
|
||||
'Indian/Kerguelen',
|
||||
'Indian/Mahe',
|
||||
'Indian/Maldives',
|
||||
'Indian/Mauritius',
|
||||
'Indian/Mayotte',
|
||||
'Indian/Reunion',
|
||||
'Iran',
|
||||
'Israel',
|
||||
'Jamaica',
|
||||
'Japan',
|
||||
'Kwajalein',
|
||||
'Libya',
|
||||
'MET',
|
||||
'MST',
|
||||
'MST7MDT',
|
||||
'Mexico/BajaNorte',
|
||||
'Mexico/BajaSur',
|
||||
'Mexico/General',
|
||||
'NZ',
|
||||
'NZ-CHAT',
|
||||
'Navajo',
|
||||
'PRC',
|
||||
'PST8PDT',
|
||||
'Pacific/Apia',
|
||||
'Pacific/Auckland',
|
||||
'Pacific/Bougainville',
|
||||
'Pacific/Chatham',
|
||||
'Pacific/Chuuk',
|
||||
'Pacific/Easter',
|
||||
'Pacific/Efate',
|
||||
'Pacific/Enderbury',
|
||||
'Pacific/Fakaofo',
|
||||
'Pacific/Fiji',
|
||||
'Pacific/Funafuti',
|
||||
'Pacific/Galapagos',
|
||||
'Pacific/Gambier',
|
||||
'Pacific/Guadalcanal',
|
||||
'Pacific/Guam',
|
||||
'Pacific/Honolulu',
|
||||
'Pacific/Johnston',
|
||||
'Pacific/Kiritimati',
|
||||
'Pacific/Kosrae',
|
||||
'Pacific/Kwajalein',
|
||||
'Pacific/Majuro',
|
||||
'Pacific/Marquesas',
|
||||
'Pacific/Midway',
|
||||
'Pacific/Nauru',
|
||||
'Pacific/Niue',
|
||||
'Pacific/Norfolk',
|
||||
'Pacific/Noumea',
|
||||
'Pacific/Pago_Pago',
|
||||
'Pacific/Palau',
|
||||
'Pacific/Pitcairn',
|
||||
'Pacific/Pohnpei',
|
||||
'Pacific/Ponape',
|
||||
'Pacific/Port_Moresby',
|
||||
'Pacific/Rarotonga',
|
||||
'Pacific/Saipan',
|
||||
'Pacific/Samoa',
|
||||
'Pacific/Tahiti',
|
||||
'Pacific/Tarawa',
|
||||
'Pacific/Tongatapu',
|
||||
'Pacific/Truk',
|
||||
'Pacific/Wake',
|
||||
'Pacific/Wallis',
|
||||
'Pacific/Yap',
|
||||
'Poland',
|
||||
'Portugal',
|
||||
'ROC',
|
||||
'ROK',
|
||||
'Singapore',
|
||||
'Turkey',
|
||||
'UCT',
|
||||
'US/Alaska',
|
||||
'US/Aleutian',
|
||||
'US/Arizona',
|
||||
'US/Central',
|
||||
'US/East-Indiana',
|
||||
'US/Eastern',
|
||||
'US/Hawaii',
|
||||
'US/Indiana-Starke',
|
||||
'US/Michigan',
|
||||
'US/Mountain',
|
||||
'US/Pacific',
|
||||
'US/Pacific-New',
|
||||
'US/Samoa',
|
||||
'UTC',
|
||||
'Universal',
|
||||
'W-SU',
|
||||
'WET',
|
||||
'Zulu',
|
||||
];
|
||||
|
||||
export const getRandomTimezone = () => {
|
||||
return tzs[Math.floor(Math.random() * tzs.length)];
|
||||
};
|
||||
|
||||
export const getTzOffsetString = (moment: dayjs.Dayjs) => {
|
||||
const userOffset = moment.utcOffset();
|
||||
const userOffsetHours = userOffset / 60;
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import { action, computed, observable } from 'mobx';
|
|||
|
||||
import BaseStore from 'models/base_store';
|
||||
import { NotificationPolicyType } from 'models/notification_policy';
|
||||
import { getRandomTimezone } from 'models/timezone/timezone.helpers';
|
||||
import { makeRequest } from 'network';
|
||||
import { Mixpanel } from 'services/mixpanel';
|
||||
import { RootStore } from 'state';
|
||||
|
|
@ -97,12 +98,26 @@ export class UserStore extends BaseStore {
|
|||
...results.reduce(
|
||||
(acc: { [key: number]: User }, item: User) => ({
|
||||
...acc,
|
||||
[item.pk]: item,
|
||||
[item.pk]: {
|
||||
...item,
|
||||
tz: getRandomTimezone(),
|
||||
working_hours: {
|
||||
monday: [{ start: '09:00:00', end: '18:00:00' }],
|
||||
tuesday: [{ start: '09:00:00', end: '18:00:00' }],
|
||||
wednesday: [{ start: '09:00:00', end: '18:00:00' }],
|
||||
thursday: [{ start: '09:00:00', end: '18:00:00' }],
|
||||
friday: [{ start: '09:00:00', end: '18:00:00' }],
|
||||
saturday: [],
|
||||
sunday: [],
|
||||
},
|
||||
},
|
||||
}),
|
||||
{}
|
||||
),
|
||||
};
|
||||
|
||||
console.log(this.items);
|
||||
|
||||
this.searchResult = {
|
||||
count,
|
||||
results: results.map((item: User) => item.pk),
|
||||
|
|
|
|||
|
|
@ -131,7 +131,7 @@ class SchedulesPage extends React.Component<SchedulesPageProps, SchedulesPageSta
|
|||
<div className={cx('schedule')}>
|
||||
<TimelineMarks startMoment={startMoment} />
|
||||
<div className={cx('rotations')}>
|
||||
<Rotation id={`${1}-${2}`} layerIndex={1} rotationIndex={2} slots={getRandomTimeslots()} />
|
||||
<Rotation id={`${1}-${2}`} layerIndex={1} rotationIndex={2} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue