add tinder

src/client/index.ts

@@ -1,60 +1,103 @@
-import axios from 'axios';
-import { origin } from './config';
-
-
-export const register = async (username: string, password: string) => {
-    await axios.post(
-        origin + 'api/auth/register/',
-        {
-            'username': username,
-            'email': username,
-            'password': password
-        }
-    )
-}
-
-export const signin = async (username: string, password: string) => {
-    const response = await axios.post(
-        origin + 'api/auth/token/',
-        {
-            'username': username,
-            'password': password
-        }
-    );
-    return response.data;
-}
-
-
-export const startTinder = async () => {
-    const data = await axios.get(
-        origin + 'api/tinder/start',
-        {
-            headers: {
-                'Authorization': 'Bearer ' + localStorage.getItem('token')
-            }
-        }
-    );
-    return data.data;
-}
-
-export const swipe = async (itemId: string, type: string) => {
-    var url = origin + 'api/tinder/' + itemId + '/proceed/';
-    console.log(url, itemId)
-    try{
-        const data = await axios.post(
-            url,
-            {
-                'action': type,
-            },
-            {
-                headers: {
-                    'Authorization': 'Bearer ' + localStorage.getItem('token')
-                }
-            }
-        );
-        return data.data;
-    } catch {
-        return false
-    }
-
+import axios from 'axios';
+import { origin } from './config';
+
+
+export const register = async (username: string, password: string) => {
+    await axios.post(
+        origin + 'api/auth/register/',
+        {
+            'username': username,
+            'email': username,
+            'password': password
+        }
+    )
+}
+
+export const signin = async (username: string, password: string) => {
+    const response = await axios.post(
+        origin + 'api/auth/token/',
+        {
+            'username': username,
+            'password': password
+        }
+    );
+    return response.data;
+}
+
+
+export const startTinder = async () => {
+    const data = await axios.get(
+        origin + 'api/tinder/start',
+        {
+            headers: {
+                'Authorization': 'Bearer ' + localStorage.getItem('token')
+            }
+        }
+    );
+    return data.data;
+}
+
+export const swipe = async (itemId: string, type: string) => {
+    var url = origin + 'api/tinder/' + itemId + '/proceed/';
+    console.log(url, itemId)
+    try{
+        const data = await axios.post(
+            url,
+            {
+                'action': type,
+            },
+            {
+                headers: {
+                    'Authorization': 'Bearer ' + localStorage.getItem('token')
+                }
+            }
+        );
+        return data.data;
+    } catch {
+        return false
+    }
+
+}
+
+export const dailySelectionGenerate = async () => {
+    var data = await axios.get(
+        origin + 'api/recommendations/get_daily_selection/',
+        {
+            headers: {
+                'Authorization': 'Bearer ' + localStorage.getItem('token')
+            }
+        }
+    );
+    return data.data;
+}
+
+export const dailySelectionBuild = async (buildData: any) => {
+    var data = await axios.post(
+        origin + 'api/recommendations/generate_daily_selection/',
+        {nodes: buildData},
+        {
+            headers: {
+                'Authorization': 'Bearer ' + localStorage.getItem('token')
+            }
+        }
+    );
+    return data.data;
+}
+
+
+export const saveTinderPath = async (tinderData: any) => {
+    await axios.post(
+        origin + 'api/route/save', {
+            "points": [{
+                date: '2000-01-01',
+                paths: tinderData
+            },]
+        },
+        
+        {
+            headers: {
+                'Authorization': 'Bearer ' + localStorage.getItem('token')
+            }
+        }
+    )
 }

src/pages/EventMatch/index.tsx

@@ -1,93 +1,111 @@
-import react, { useRef } from 'react'
-import TinderCard from 'react-tinder-card'
-import './style.css'
-import { Block } from '../../elements/Block'
-import { Card, TinderCardContent } from '../../elements/Card'
-import { Button } from '../../elements/Button'
-import { startTinder, swipe, } from '../../client'
-import {useNavigate} from 'react-router-dom';
-
-interface IEventData{
-    title: string;
-    description: string;
-    id: string;
-}
-
-
-export const EventMatch: react.FC = () => {
-    const ref = useRef(null);
-    const navigate = useNavigate();
-    const started = useRef(false);
-    const swiping = useRef(false);
-    const [cardData, setCardData] = react.useState({title: "", description: "", id: ''} as IEventData);
-    const data  = react.useRef({title: "", description: "", id: ''} as IEventData)
-
-
-    if (!started.current) {
-        started.current = true;
-        startTinder().then((e) => {
-            
-            data.current = {
-                title: e.title,
-                description: e.description.split(' ').slice(0, 10).join(' '),
-                id: e.oid
-            };
-            setCardData({
-                title: e.title,
-                description: e.description.split(' ').slice(0, 10).join(' '),
-                id: e.oid
-            });
-        })
-    }
-
-
-    return <div className='centered tin'>
-    <Block className='tinder-block'>
-        <TinderCard ref={ref} onSwipe={(type) => {
-            console.log("swipe");
-            if (swiping.current) return;
-            swiping.current = true;
-            swipe(data.current.id, type).then((e) => {
-                if (!e) {
-                    navigate('/');
-                    return;
-                }
-                data.current = {
-                    title: e.event.title,
-                    description: e.event.description.split(' ').slice(0, 10).join(' '),
-                    id: e.event.oid
-                };
-                setCardData(
-                    {
-                        title: e.event.title,
-                        description: e.event.description.split(' ').slice(0, 10).join(' '),
-                        id: e.event.oid
-                    }
-                );
-                setTimeout(() => {
-                    (ref.current as any).restoreCard();
-                    swiping.current = false;
-                }, 2000);
-            })
-            
-        }}>
-            <Card className=''>
-                <TinderCardContent
-                    title={data.current.title}
-                    description={data.current.description}
-                ></TinderCardContent>
-            </Card>
-        </TinderCard>
-    </Block>
-
-    <Block className='tin-dir'>
-        <Button className='' onClick={() => {
-            (ref.current as any).swipe('left')
-        }}>Не нравится</Button>
-        <Button className='main-btn'>На главную</Button>
-        <Button className='' onClick={() => {
-            (ref.current as any).swipe('right')
-        }}>Нравится</Button>
-    </Block>
-   </div>
+import react, { useRef, useState } from 'react'
+import TinderCard from 'react-tinder-card'
+import './style.css'
+import { Block } from '../../elements/Block'
+import { Card, TinderCardContent } from '../../elements/Card'
+import { Button } from '../../elements/Button'
+import { dailySelectionBuild, dailySelectionGenerate, saveTinderPath, startTinder, swipe, } from '../../client'
+import {useNavigate} from 'react-router-dom';
+import { MyMap } from '../../elements/map'
+
+interface IEventData{
+    title: string;
+    description: string;
+    id: string;
+}
+
+
+export const EventMatch: react.FC = () => {
+    const ref = useRef(null);
+    const navigate = useNavigate();
+    const started = useRef(false);
+    const [dailyData, setDailyData] = useState([]);
+    const [resData, setResData] = useState<any[]>([]);
+    const queried = useRef(false);
+    const [answerData, setAnswerData] = useState([]);
+
+    if (!started.current) {
+        started.current = true;
+        dailySelectionGenerate().then((e) => {
+            console.log(e)
+            setDailyData(e.events);
+        })
+    }
+
+    return <div className='centered tin'>
+    <Block className='tinder-block'>
+        {
+            dailyData.map((e) => {
+                return <TinderCard 
+                    ref={ref} 
+                    className='card'
+                    onSwipe={(type) => {
+                        console.log(dailyData.indexOf(e))
+                        if (dailyData.indexOf(e) == 0) {
+                            if (!resData.length) return;
+                            if (!queried.current) {
+                                dailySelectionBuild(resData).then((e) => {
+                                    setAnswerData(e.path);
+                                });
+                                queried.current = true;
+                            }
+                        }
+                        
+                        if (type == 'right') {
+                            setResData(resData.concat([
+                                {
+                                    'action': 'right',
+                                    'oid': (e as any).oid
+                                } as any
+                            ]))
+                        }
+                        
+                    }}
+                >
+        
+                    <Card className=''>
+                        <TinderCardContent
+                            title={dailyData.length ? (e as any).title : ""}
+                            description={dailyData.length ? (e as any).description.slice(0, 70) : ""}
+                        ></TinderCardContent>
+                    </Card>
+                </TinderCard>
+            })
+        }
+        <div className='cont-span'>
+        {
+            dailyData.length && !answerData.length ?
+            (!queried.current ? 
+            <div className='span-cont'><span className='span-er'>Вы не выбрали ни одного события, Мы не можем сгенерировать вам маршрут. Возвращяйтесь к нам завтра. <a 
+            href="" onClick={() => {
+                navigate('/');
+            }}
+            >Вернуться на главную</a></span></div> : <span>Подождите немного, мы генерируем для вас ежедневный маршрут</span>) : answerData.length ? <MyMap points={
+                answerData.filter((e: any) => e.type == 'point').map((e: any) => {return {
+                    cords: [e.point.lat, e.point.lon],
+                    title: e.point.title,
+                    description: ""
+                }})
+                
+            }></MyMap> : <></>
+        }
+        {
+            answerData.length ? <div className='btns'>
+            <Button onClick={() => {
+                saveTinderPath(answerData);
+                navigate('/');
+            }} className=''>
+                Сохранить
+            </Button>
+            <Button onClick={() => {
+                navigate('/');
+            }} className=''>
+                На главную
+            </Button>
+            </div> : <></>
+        }
+        </div>
+        
+    </Block>
+   </div>
 }

src/pages/EventMatch/style.css

@@ -1,9 +1,47 @@
-.tinder-block{
-    width: 700px;
-    display: flex;
-    justify-content: center;
-}
-
-.main-btn{
-    background-color: #FFCF08;
+.tinder-block{
+    width: 700px;
+    display: flex;
+    justify-content: center;
+}
+
+.main-btn{
+    background-color: #FFCF08;
+}
+
+.tinder-block{
+    height: 600px;
+}
+
+.card{
+    position: absolute;
+}
+.span-er{
+    width: 250px;
+    text-align: center;
+}
+a{
+    color: black;
+}
+a:visited{
+    color: black;
+}
+
+.btns{
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    margin-top: 20px;
+}
+
+.cont-span{
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    width: 500px;
+}
+
+.span-cont{
+    display: flex;
+    justify-content: center;
+    
 }