urec/chat_back
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Изменения фронта

Browse source
This commit is contained in:
urec56 2024-02-06 22:42:06 +03:00
parent 4048619221
commit 9c80825226
10 changed files with 1092 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
chat_test/requirements.txt
View file

@ -9,7 +9,6 @@ async-timeout==4.0.3
asyncpg==0.29.0 asyncpg==0.29.0
attrs==23.2.0 attrs==23.2.0
autoflake==2.2.1 autoflake==2.2.1
bcrypt==4.1.2
billiard==4.2.0 billiard==4.2.0
black==23.12.1 black==23.12.1
celery==5.3.6 celery==5.3.6
@ -99,3 +98,5 @@ WTForms==3.1.2
yarl==1.9.4 yarl==1.9.4
zope.event==5.0 zope.event==5.0
zope.interface==6.1 zope.interface==6.1
pywin32==305; platform_system=="Windows"
bcrypt==4.1.2; platform_system=="Windows"

2
front/index.html
View file

@ -8,6 +8,6 @@
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
<script type="module" src="/src/main.jsx"></script> <script type="module" src="/src/chat/main.jsx"></script>
</body> </body>
</html> </html>

939
front/package-lock.json generated
View file

File diff suppressed because it is too large Load diff

1
front/package.json
View file

@ -10,6 +10,7 @@
"preview": "vite preview" "preview": "vite preview"
}, },
"dependencies": { "dependencies": {
"antd": "^5.14.0",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0" "react-dom": "^18.2.0"
}, },

42
front/src/chat/App.jsx
View file

@ -1,35 +1,17 @@
import { DatePicker } from "antd"; import { Layout } from 'antd';
import { Layout, Flex } from 'antd'; import AppHeader from "./components/layout/AppHeader.jsx";
const { Header, Footer, Sider, Content } = Layout; import AppFooter from "./components/layout/AppFooter.jsx";
const headerStyle = { import AppContent from "./components/layout/AppContent.jsx";
textAlign: 'center', import AppZalupa from "./components/layout/AppZalupa.jsx";
color: '#fff',
paddingInline: 48,
lineHeight: '64px',
backgroundColor: '#4096ff',
};
const contentStyle = {
textAlign: 'center',
minHeight: 120,
lineHeight: 'calc(100vh - 64px)',
color: '#fff',
backgroundColor: '#001529',
};
const footerStyle = {
textAlign: 'center',
color: '#fff',
backgroundColor: '#4096ff',
};
const layoutStyle = {
borderRadius: 8,
overflow: 'hidden',
};
export default function App() { export default function App() {
return <Layout style={layoutStyle}> return <Layout>
<Header style={headerStyle}>Header</Header> <AppHeader />
<AppZalupa />
<Layout> <Layout>
<Content style={contentStyle}>Content</Content> <AppContent />
</Layout> </Layout>
<Footer style={footerStyle}>Footer</Footer> <AppFooter />
</Layout> </Layout>
} }

13
front/src/chat/api.js Normal file
View file

@ -0,0 +1,13 @@
export const users= await fetch('http://localhost:8000/api/users', {
method: "GET"
})
.then(function (response) {
return response.json();
})
.then(function (data) {
console.log(data);
return data;
})
.catch(function (error) {
console.log('Ошибка:', error);
});

17
front/src/chat/components/layout/AppContent.jsx Normal file
View file

@ -0,0 +1,17 @@
import {Layout} from "antd";
import {users} from "../../api.js";
const contentStyle = {
textAlign: 'center',
minHeight: 120,
lineHeight: 'calc(100vh - 64px)',
color: '#fff',
backgroundColor: '#001529',
padding: '1rem',
};
export default function () {
return (<Layout.Content style={contentStyle}>users</Layout.Content>)
}

11
front/src/chat/components/layout/AppFooter.jsx Normal file
View file

@ -0,0 +1,11 @@
import {Layout} from "antd";
const footerStyle = {
textAlign: 'center',
color: '#fff',
backgroundColor: '#4096ff',
};
export default function () {
return (<Layout.Footer style={footerStyle}>Footer</Layout.Footer>)
}

13
front/src/chat/components/layout/AppHeader.jsx Normal file
View file

@ -0,0 +1,13 @@
import {Layout} from "antd";
const headerStyle = {
textAlign: 'center',
color: '#fff',
paddingInline: 48,
lineHeight: '64px',
backgroundColor: '#4096ff',
};
export default function () {
return (<Layout.Header style={headerStyle}>Header</Layout.Header>)
}

85
front/src/chat/components/layout/AppZalupa.jsx Normal file
View file

@ -0,0 +1,85 @@
import React, { useEffect, useState } from 'react';
import { Avatar, Button, Skeleton, List} from 'antd';
const count = 3;
const fakeDataUrl = `http://localhost:8000/api/users`;
export default function () {
const [initLoading, setInitLoading] = useState(true);
const [loading, setLoading] = useState(false);
const [data, setData] = useState([]);
const [list, setList] = useState([]);
useEffect(() => {
fetch(fakeDataUrl)
.then((res) => res.json())
.then((res) => {
setInitLoading(false);
setData(res.results);
setList(res.results);
});
}, []);
const onLoadMore = () => {
setLoading(true);
setList(
data.concat(
[...new Array(count)].map(() => ({
loading: true,
name: {},
picture: {},
})),
),
);
fetch(fakeDataUrl)
.then((res) => res.json())
.then((res) => {
const newData = data.concat(res.results);
setData(newData);
setList(newData);
setLoading(false);
// Resetting window's offsetTop so as to display react-virtualized demo underfloor.
// In real scene, you can using public method of react-virtualized:
// https://stackoverflow.com/questions/46700726/how-to-use-public-method-updateposition-of-react-virtualized
window.dispatchEvent(new Event('resize'));
});
};
const loadMore =
!initLoading && !loading ? (
<div
style={{
textAlign: 'center',
marginTop: 12,
height: 32,
lineHeight: '32px',
}}
>
<Button onClick={onLoadMore}>loading more</Button>
</div>
) : null;
return (
<List
className="demo-loadmore-list"
loading={initLoading}
itemLayout="horizontal"
loadMore={loadMore}
dataSource={list}
renderItem={(item) => (
<List.Item
actions={[<a key="list-loadmore-edit">edit</a>, <a key="list-loadmore-more">more</a>]}
>
<Skeleton avatar title={false} loading={item.loading} active>
<List.Item.Meta
avatar={<Avatar src={item.picture.large} />}
title={<a href="https://ant.design">{item.name?.last}</a>}
description="Ant Design, a design language for background applications, is refined by Ant UED Team"
/>
<div>content</div>
</Skeleton>
</List.Item>
)}
/>
);
};