Skip to content
This repository was archived by the owner on Aug 2, 2025. It is now read-only.

Commit f41f142

Browse files
ZamelaneZamelane
committed
WIP
1 parent 997ab12 commit f41f142

File tree

23 files changed

+615
-71
lines changed

23 files changed

+615
-71
lines changed

‎apps/web/src/app/AppWrapper/App/Epic/Tabbar.tsx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import {
2+
Icon24StorefrontOutline,
23
Icon28BookSpreadOutline,
34
Icon28GraphOutline,
45
Icon28HomeOutline,
@@ -13,6 +14,7 @@ import type { FC } from 'react'
1314

1415
import type { Pages } from '../../../../shared/types.ts'
1516
import {
17+
VIEW_MARKET,
1618
VIEW_MARKS,
1719
VIEW_NOTIFICATIONS,
1820
VIEW_SCHEDULE,
@@ -54,6 +56,14 @@ const Tabbar: FC<ITabbar> = ({ onStoryChange, activeView }) => {
5456
>
5557
<Icon28BookSpreadOutline />
5658
</TabbarItem>
59+
<TabbarItem
60+
onClick={() => onStoryChange(VIEW_MARKET)}
61+
selected={activeView === VIEW_MARKET}
62+
data-story={VIEW_MARKET}
63+
text='Магазин'
64+
>
65+
<Icon24StorefrontOutline />
66+
</TabbarItem>
5767
<TabbarItem
5868
onClick={() => onStoryChange(VIEW_SETTINGS)}
5969
selected={activeView === VIEW_SETTINGS}

‎apps/web/src/app/AppWrapper/App/Epic/index.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { View, useAdaptivityConditionalRender } from '@vkontakte/vkui'
66
import { Epic as VKUIEpic } from '@vkontakte/vkui/dist/components/Epic/Epic'
77
import {
88
MAIN_SETTINGS,
9+
VIEW_MARKET,
910
VIEW_MARKS,
1011
VIEW_NOTIFICATIONS,
1112
VIEW_SCHEDULE,
@@ -23,6 +24,7 @@ import {
2324
import type { Pages } from '../../../../shared/types.ts'
2425

2526
import type { FC } from 'react'
27+
import Market from '../../../../pages/Market'
2628
import Tabbar from './Tabbar'
2729

2830
interface IEpic {
@@ -53,6 +55,7 @@ const Epic: FC<IEpic> = ({ onStoryChange }) => {
5355
<Schedule id={VIEW_SCHEDULE} />
5456
<Achievements id={VIEW_MARKS} />
5557
<Notifications id={VIEW_NOTIFICATIONS} />
58+
<Market id={VIEW_MARKET} />
5659
<Settings id={VIEW_SETTINGS} />
5760
</View>
5861
</VKUIEpic>

‎apps/web/src/app/AppWrapper/App/ModalRoot/index.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,13 @@ import { ModalRoot as VKUIModalRoot } from '@vkontakte/vkui'
77
import {
88
MODAL_PAGE_LESSON,
99
MODAL_PAGE_MARK,
10+
MODAL_PAGE_MARKET_FILTERS,
1011
MODAL_PAGE_USER_EDIT
1112
} from '../../../../shared/config'
1213

1314
import LessonModal from './modals/LessonModal'
1415
import MarkDetailedModal from './modals/MarkDetailedModal'
16+
import MarketFiltersModal from './modals/MarketFiltersModal'
1517
import UserEditModal from './modals/UserEditModal'
1618

1719
const ModalRoot = () => {
@@ -26,6 +28,7 @@ const ModalRoot = () => {
2628
<LessonModal id={MODAL_PAGE_LESSON} />
2729
<MarkDetailedModal id={MODAL_PAGE_MARK} />
2830
<UserEditModal id={MODAL_PAGE_USER_EDIT} />
31+
<MarketFiltersModal id={MODAL_PAGE_MARKET_FILTERS} />
2932
</VKUIModalRoot>
3033
)
3134
}

‎apps/web/src/app/AppWrapper/App/ModalRoot/modals/MarketFiltersModal/index.tsx

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import {
2+
FormItem,
3+
FormLayoutGroup,
4+
ModalPage,
5+
ModalPageHeader,
6+
Radio,
7+
RadioGroup
8+
} from '@vkontakte/vkui'
9+
import { type FC, useState } from 'react'
10+
11+
interface Props {
12+
id: string
13+
}
14+
15+
const avaTypes = {
16+
types: ['Не важно', 'Статичные', 'Анимированные'],
17+
pictured: ['Не важно', 'Парень', 'Девушка']
18+
}
19+
20+
const filtersModal: FC<Props> = ({ id }) => {
21+
const [selectedType, setSelectedType] = useState(avaTypes.types[0])
22+
const [selectedPictured, setSelectedPictured] = useState(avaTypes.types[0])
23+
24+
const selectType = (value: string) => {
25+
setSelectedType(value)
26+
}
27+
28+
const selectPictured = (value: string) => {
29+
setSelectedPictured(value)
30+
}
31+
32+
return (
33+
<ModalPage id={id} header={<ModalPageHeader>Фильтры</ModalPageHeader>}>
34+
<FormLayoutGroup>
35+
<FormItem top='Тип изображения'>
36+
<RadioGroup>
37+
{avaTypes.types.map((value) => {
38+
return (
39+
<Radio
40+
key={value}
41+
value={value}
42+
name='type'
43+
checked={selectedType === value}
44+
onChange={() => selectType(value)}
45+
>
46+
{value}
47+
</Radio>
48+
)
49+
})}
50+
</RadioGroup>
51+
</FormItem>
52+
53+
<FormItem top='Кто изображён'>
54+
<RadioGroup>
55+
{avaTypes.pictured.map((value) => {
56+
return (
57+
<Radio
58+
key={value}
59+
value={value}
60+
name='pictured'
61+
checked={selectedPictured === value}
62+
onChange={() => selectPictured(value)}
63+
>
64+
{value}
65+
</Radio>
66+
)
67+
})}
68+
</RadioGroup>
69+
</FormItem>
70+
</FormLayoutGroup>
71+
</ModalPage>
72+
)
73+
}
74+
75+
export default filtersModal

‎apps/web/src/app/AppWrapper/App/ModalRoot/modals/UserEditModal/index.css

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.select-avatar {
2+
border: solid 2px var(--vkui--color_icon_accent_themed);
3+
padding: 3px;
4+
}
5+
6+
.select-avatar_badge {
7+
color: var(--vkui--color_icon_accent_themed);
8+
}

‎apps/web/src/app/AppWrapper/App/ModalRoot/modals/UserEditModal/index.tsx

Lines changed: 71 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@ import {
44
Group,
55
Header,
66
ModalPage,
7-
ModalPageHeader,
8-
Separator,
9-
SimpleCell,
10-
Spacing
7+
ModalPageHeader
118
} from '@vkontakte/vkui'
12-
import { useUserEditModal } from '../../../../../../store/userEditModal'
9+
import './index.css'
10+
import { Icon16DoneCircle, Icon56MarketOutline } from '@vkontakte/icons'
11+
import { useState } from 'react'
12+
1313
const urls = [
1414
'https://mangabuff.ru/img/avatars/x150/806.gif',
1515
'https://mangabuff.ru/img/avatars/x150/1209.gif',
@@ -30,26 +30,77 @@ const urls = [
3030
]
3131

3232
const UserEditModal = ({ id }: { id: string }) => {
33-
const { modalData } = useUserEditModal()
33+
const [selectAva, setSelectAva] = useState(urls[0])
34+
35+
const selectCurrAva = (url: string) => {
36+
setSelectAva(url)
37+
}
3438
return (
3539
<ModalPage id={id} size={500} dynamicContentHeight>
3640
<ModalPageHeader>Сменить аву</ModalPageHeader>
3741
<Group>
38-
<Group header={<Header mode='secondary'>Текущая ава</Header>}>
39-
<SimpleCell before={<Avatar src={urls[0]} />}>
40-
{modalData.name}
41-
</SimpleCell>
42-
</Group>
42+
{/*<Group>*/}
43+
{/* <RichCell*/}
44+
{/* before={<Avatar size={48} src={selectAva}/>}*/}
45+
{/* caption="Вы великолепны 😉"*/}
46+
{/* after={*/}
47+
{/* <Tooltip text='Кредиты — это то, сколько вы нам должны'>*/}
48+
{/* <label>*/}
49+
{/* 1 256{' '}*/}
50+
{/* <Icon28MoneyWadOutline height={20} style={{*/}
51+
{/* display: 'inline-block',*/}
52+
{/* verticalAlign: 'text-top',*/}
53+
{/* }}/>*/}
54+
{/* </label>*/}
55+
{/* </Tooltip>*/}
56+
{/* }*/}
57+
{/* afterCaption="Кредиты 👆"*/}
58+
{/* actions={*/}
59+
{/* <ButtonGroup mode="horizontal" gap="s" stretched>*/}
60+
{/* <Tooltip text='История списания и зачисления кредитов'>*/}
61+
{/* <Button*/}
62+
{/* mode="secondary"*/}
63+
{/* size="s">*/}
64+
{/* История*/}
65+
{/* </Button>*/}
66+
{/* </Tooltip>*/}
67+
{/* </ButtonGroup>*/}
68+
{/* }*/}
69+
{/* multiline*/}
70+
{/* >*/}
71+
{/* Евгений Малинин{' '}*/}
72+
{/* <Icon20CheckShieldGreen*/}
73+
{/* style={{*/}
74+
{/* display: 'inline-block',*/}
75+
{/* verticalAlign: 'text-top',*/}
76+
{/* }}*/}
77+
{/* />*/}
78+
{/* </RichCell>*/}
79+
{/*</Group>*/}
4380

44-
<Spacing size={24}>
45-
<Separator />
46-
</Spacing>
47-
48-
<Flex margin='auto' gap='2xl' justify='center'>
49-
{urls.map((url, index) => (
50-
<Avatar key={index} size={110} src={url} />
51-
))}
52-
</Flex>
81+
<Group header={<Header mode='secondary'>Мои аватарки</Header>}>
82+
<Flex margin='auto' gap='2xl' justify='center'>
83+
{urls.map((url, index) => (
84+
<Avatar
85+
key={index}
86+
size={110}
87+
src={url}
88+
onClick={() => selectCurrAva(url)}
89+
className={selectAva === url ? 'select-avatar' : ''}
90+
>
91+
<Avatar.Badge
92+
hidden={selectAva !== url}
93+
className='select-avatar_badge'
94+
>
95+
<Icon16DoneCircle height={25} width={25} />
96+
</Avatar.Badge>
97+
</Avatar>
98+
))}
99+
<Avatar size={110}>
100+
<Icon56MarketOutline />
101+
</Avatar>
102+
</Flex>
103+
</Group>
53104
</Group>
54105
</ModalPage>
55106
)

‎apps/web/src/app/AppWrapper/App/index.tsx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import {
2+
Icon24StorefrontOutline,
23
Icon28BookSpreadOutline,
34
Icon28GraphOutline,
45
Icon28HomeOutline,
@@ -27,6 +28,7 @@ import type { FC } from 'react'
2728
import type { Pages } from '../../../shared/types.ts'
2829
import {
2930
MAIN_SETTINGS,
31+
VIEW_MARKET,
3032
VIEW_MARKS,
3133
VIEW_NOTIFICATIONS,
3234
VIEW_SCHEDULE,
@@ -101,6 +103,13 @@ const App: FC = () => {
101103
>
102104
Объявления
103105
</Cell>
106+
<Cell
107+
onClick={() => onStoryChange(VIEW_MARKET)}
108+
hovered={panel === VIEW_MARKET}
109+
before={<Icon24StorefrontOutline />}
110+
>
111+
Магазин
112+
</Cell>
104113
<Cell
105114
onClick={() => onStoryChange(VIEW_SETTINGS)}
106115
hovered={panel === VIEW_SETTINGS}

‎apps/web/src/app/AppWrapper/index.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import {
66
ConfigProvider,
77
usePlatform
88
} from '@vkontakte/vkui'
9-
import { lazy } from 'react'
109

1110
import { Suspense } from '../../shared'
1211
import { router } from '../routes/router'

‎apps/web/src/app/routes/constants.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
export const VIEW_SCHEDULE = 'schedule'
22
export const VIEW_MARKS = 'marks'
33
export const VIEW_SETTINGS = 'settings'
4+
export const VIEW_MARKET = 'market'
45
export const VIEW_NOTIFICATIONS = 'notifications'
56

67
export const MAIN_SETTINGS = 'login'
@@ -9,4 +10,5 @@ export const PAGE_MAIN = '/'
910
export const PAGE_SCHEDULE = `/${VIEW_SCHEDULE}`
1011
export const PAGE_MARKS = `/${VIEW_MARKS}`
1112
export const PAGE_SETTINGS = `/${VIEW_SETTINGS}`
13+
export const PAGE_MARKET = `/${VIEW_MARKET}`
1214
export const PAGE_NOTIFICATIONS = `/${VIEW_NOTIFICATIONS}`

‎apps/web/src/app/routes/routes.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,12 @@ import type { RouteWithoutRoot } from '@vkontakte/vk-mini-apps-router'
22
import {
33
MAIN_SETTINGS,
44
PAGE_MAIN,
5+
PAGE_MARKET,
56
PAGE_MARKS,
67
PAGE_NOTIFICATIONS,
78
PAGE_SCHEDULE,
89
PAGE_SETTINGS,
10+
VIEW_MARKET,
911
VIEW_MARKS,
1012
VIEW_NOTIFICATIONS,
1113
VIEW_SCHEDULE,
@@ -28,6 +30,11 @@ export const routes: RouteWithoutRoot[] = [
2830
panel: VIEW_MARKS,
2931
view: VIEW_SCHEDULE
3032
},
33+
{
34+
path: PAGE_MARKET,
35+
panel: VIEW_MARKET,
36+
view: VIEW_SCHEDULE
37+
},
3138
{
3239
path: PAGE_SETTINGS,
3340
panel: VIEW_SETTINGS,

0 commit comments

Comments
 (0)