Changeset 13f1472 for frontend/src
- Timestamp:
- 09/18/22 18:09:53 (2 years ago)
- Branches:
- master
- Parents:
- 49b0bbd
- Location:
- frontend/src
- Files:
-
- 1 added
- 6 edited
Legend:
- Unmodified
- Added
- Removed
-
frontend/src/App.js
r49b0bbd r13f1472 3 3 import axios from 'axios' 4 4 import env from './env' 5 import { gapi } from 'gapi-script'; 5 6 6 7 import {Spin} from "antd"; … … 18 19 import Reset from "./Auth/Reset"; 19 20 import ToDo from "./Dashboard/ToDo"; 21 import Vip from "./Dashboard/Vip"; 20 22 21 23 … … 26 28 getUser() 27 29 },[]) 30 31 gapi.load('client:auth2', () => { 32 gapi.client.init({ 33 clientId: '748923557453-ljii8ulhti93man769d2dd9soi7038j5.apps.googleusercontent.com', 34 plugin_name: 'chat' 35 }); 36 }); 28 37 29 38 const getUser = () => { … … 50 59 <Route path="/dashboard/reviews" element={<Review/>}/> 51 60 <Route path="/dashboard/todo" element={<ToDo/>}/> 61 <Route path="/dashboard/vip" element={<Vip/>}/> 52 62 </Route> 53 63 <Route path="/login" element={loading ? <Spin /> : !user ? <Login setUser={setUser}/> : <Navigate to="/dashboard" replace={true} />}/> -
frontend/src/Auth/auth.js
r49b0bbd r13f1472 6 6 import '../App.css' 7 7 import env from "../env"; 8 import { GoogleLogin } from 'react-google-login'; 9 import FacebookLogin from 'react-facebook-login'; 8 10 9 11 const setAuthCookie = (token) => { … … 29 31 }); 30 32 setLoading(false) 33 }) 34 } 35 36 const googleLoginResponse = (response)=>{ 37 console.log(response) 38 setLoading(true) 39 console.log(response.tokenId) 40 setAuthCookie('Bearer '+response.tokenId) 41 axios.post(env.api+'Users/register',{email: response.profileObj.email, password:'', isConfirmed: true}).then(res => { 42 setUser(res.data) 43 setLoading(false) 44 history(res.data.isAdmin ? '/dashboard' : '/') 45 }) 46 } 47 48 const facebookLoginResponse = (response) =>{ 49 console.log(response) 50 setLoading(true) 51 setAuthCookie('Bearer '+response.accessToken) 52 axios.post(env.api+'Users/register',{email: response.email, password:'', isConfirmed: true}).then(res => { 53 setUser(res.data) 54 setLoading(false) 55 history(res.data.isAdmin ? '/dashboard' : '/') 31 56 }) 32 57 } … … 73 98 74 99 <Form.Item style={{margin:'0px'}}> 75 <Button type="primary" htmlType="submit" className="login-form-button" loading={loading} >100 <Button type="primary" htmlType="submit" className="login-form-button" loading={loading} style={{marginBottom:'5px'}}> 76 101 Log in 77 102 </Button> 103 <br/> 104 <GoogleLogin 105 clientId="748923557453-ljii8ulhti93man769d2dd9soi7038j5.apps.googleusercontent.com" 106 buttonText="Логирај се со Google" 107 onSuccess={googleLoginResponse} 108 /> 109 <FacebookLogin 110 appId="1455131645009417" 111 size={'small'} 112 textButton={'Логирај се со FB'} 113 icon="fa-facebook" 114 fields="name,email" 115 callback={facebookLoginResponse} /> 78 116 <div> 79 117 Или <a href={"/register"}>регистрирај се!</a> … … 102 140 } 103 141 setLoading(true) 104 axios.post(env.api+'Users/register',{email: attr.email, password: attr.password }).then(res => {142 axios.post(env.api+'Users/register',{email: attr.email, password: attr.password,isConfirmed:false}).then(res => { 105 143 setAuthCookie(res.data.token) 106 144 setUser(res.data) … … 109 147 }) 110 148 } 149 150 const googleLoginResponse = (response)=>{ 151 console.log(response) 152 setLoading(true) 153 console.log(response.tokenId) 154 setAuthCookie('Bearer '+response.tokenId) 155 axios.post(env.api+'Users/register',{email: response.profileObj.email, password:'', isConfirmed: true}).then(res => { 156 setUser(res.data) 157 setLoading(false) 158 history('/') 159 }) 160 } 161 162 const facebookLoginResponse = (response) =>{ 163 console.log(response) 164 setLoading(true) 165 setAuthCookie('Bearer '+response.accessToken) 166 axios.post(env.api+'Users/register',{email: response.email, password:'', isConfirmed: true}).then(res => { 167 setUser(res.data) 168 setLoading(false) 169 history('/') 170 }) 171 } 172 173 111 174 return( 112 175 <div style={{width:'100vw',height:'100vh', textAlign:'center', backgroundColor:'#F2F2F2'}}> … … 165 228 166 229 <Form.Item style={{margin:'0px'}}> 167 <Button type="primary" htmlType="submit" className="login-form-button" loading={loading} >230 <Button type="primary" htmlType="submit" className="login-form-button" loading={loading} style={{marginBottom:'5px'}}> 168 231 Register 169 232 </Button> 233 <br/> 234 <GoogleLogin 235 clientId="748923557453-ljii8ulhti93man769d2dd9soi7038j5.apps.googleusercontent.com" 236 buttonText="Регистрирај се со Google" 237 onSuccess={googleLoginResponse} 238 /> 239 <div style={{margin:'5px'}}/> 240 <FacebookLogin 241 appId="1455131645009417" 242 size={'small'} 243 textButton={'Регистрирај се со FB'} 244 icon="fa-facebook" 245 fields="name,email" 246 callback={facebookLoginResponse} /> 170 247 <div> 171 248 Или <a href={"/login"}>најави се!</a> -
frontend/src/Dashboard.js
r49b0bbd r13f1472 3 3 import {Link, useNavigate} from "react-router-dom"; 4 4 import {Outlet} from "react-router"; 5 import {BookOutlined, BulbOutlined, ContainerOutlined, QuestionCircleOutlined, UserOutlined} from "@ant-design/icons"; 5 import { 6 BookOutlined, 7 BulbOutlined, 8 ContainerOutlined, 9 QuestionCircleOutlined, StarOutlined, 10 UserOutlined 11 } from "@ant-design/icons"; 6 12 import * as PropTypes from "prop-types"; 7 13 import {Header} from "./Header"; … … 30 36 to="/dashboard/reviews">Оценки</Link></Menu.Item> 31 37 <Menu.Item key="5" icon={<BookOutlined/>}><Link to="/dashboard/todo">ToDo</Link></Menu.Item> 38 <Menu.Item key="6" icon={<StarOutlined />}><Link to="/dashboard/vip">VIP</Link></Menu.Item> 32 39 </Menu> 33 40 </div> -
frontend/src/Dashboard/Menu.js
r49b0bbd r13f1472 1 1 import React, {useEffect, useState} from 'react' 2 import {Button, Form, Input, Card, notification } from "antd";2 import {Button, Form, Input, Card, notification, Checkbox, message, Upload} from "antd"; 3 3 import axios from "axios"; 4 4 import env from "../env"; 5 import {PlusOutlined} from "@ant-design/icons"; 5 6 6 7 const Menu = props => { … … 23 24 } 24 25 26 const beforeUpload = (file) => { 27 const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'; 28 if (!isJpgOrPng) { 29 message.error('Сликата мора да е формат jpg или png'); 30 } 31 if(isJpgOrPng) setLoadingSave(true); 32 return isJpgOrPng; 33 } 34 const uploadChanged = (ev) =>{ 35 if(ev.file.status == 'done'){ 36 getRestaurant() 37 } 38 } 39 25 40 const addMenu = (data) => { 26 41 setLoadingSave(true); 42 console.log(data) 27 43 axios.post(env.api + 'Menu/',{...data,price: parseInt(data.price)}, { headers: {Authorization: localStorage.getItem('Auth')} 28 44 }).then(res => { … … 97 113 </Form.Item> 98 114 <Form.Item 115 label="Алергени" 116 name="alergens" 117 > 118 <Input/> 119 </Form.Item> 120 <Form.Item 99 121 label="Цена" 100 122 name="price" … … 109 131 <Input placeholder="Цена" type={'number'}/> 110 132 </Form.Item> 133 <Form.Item 134 name="isVipOnly" 135 valuePropName="checked" 136 > 137 <Checkbox>Само за VIP</Checkbox> 138 </Form.Item> 111 139 <Form.Item style={{textAlign: 'center'}}> 112 140 <Button type="primary" htmlType="submit" loading={loadingSave}> … … 118 146 <div style={{textAlign:'start'}}> 119 147 {restaurant.menu.map(el => 120 <Card title={el.title} extra={<p style={{color:'red',cursor:'pointer'}} onClick={()=>deleteMenu(el.id)}>Избриши</p>} style={{ width: 300, display:'inline-block', margin:'10px' }} size="small"> 148 <Card key={el.id} title={el.title} extra={<div>{el.isVipOnly ? <span style={{color:'orange',fontWeight:'bold'}}>VIP </span>:''}<span style={{color:'red',cursor:'pointer'}} onClick={()=>deleteMenu(el.id)}>Избриши</span></div>} style={{ width: 300, display:'inline-block', margin:'10px' }} size="small"> 149 <div style={{height:'100px', width:'270px'}}> 150 <Upload 151 name="file" 152 onChange={uploadChanged} 153 showUploadList={false} 154 beforeUpload={beforeUpload} 155 style={{height: '100px', overflow: 'hidden'}} 156 action={env.api+'Menu/'+el.id+'/upload'} 157 > 158 {el.image != "data:image/png;base64," ? <img style={{cursor: 'pointer'}} src={el.image} alt="avatar" 159 height='100px' width={'270px'}/> : <div style={{cursor:'pointer',margin: 15,border:'1px solid gray',padding: 5}}><PlusOutlined /><div style={{ marginTop: 8}}>Додади слика</div></div>} 160 </Upload> 161 </div> 121 162 <p>{el.description}</p> 163 <p>Алергени: {el.alergens.length ==0 ? 'Нема' : el.alergens}</p> 122 164 <b>{el.price} ден.</b> 123 165 </Card> -
frontend/src/FrontPage.js
r49b0bbd r13f1472 2 2 import {Header} from "./Header"; 3 3 import {Link, useNavigate} from "react-router-dom"; 4 import {Button, Card, DatePicker, Form, Image, Input, Modal, notification, Rate, Spin } from "antd";4 import {Button, Card, DatePicker, Form, Image, Input, Modal, notification, Rate, Spin, Upload} from "antd"; 5 5 import placeholderImage from '../src/Assets/placeholder.png' 6 6 import AddNewReservation from "./Dashboard/AddNewReservation"; … … 8 8 import env from "./env"; 9 9 import Review from "./Dashboard/Review"; 10 import {PlusOutlined} from "@ant-design/icons"; 10 11 11 12 const FrontPage = ({user, logout}) => { … … 17 18 const [refreshToggle, setRefreshToggle] = useState(false); 18 19 const history = useNavigate(); 20 const [filteredMenuItems, setFilteredMenuItems] = useState([]); 19 21 20 22 useEffect(()=>{ … … 22 24 axios.get(env.api + 'Restaurants').then(res=>{ 23 25 setRestaurant(res.data); 26 console.log(user); 27 if(!user || !user.isVip){ 28 setFilteredMenuItems(res.data.menu.filter(x => !x.isVipOnly)); 29 }else{ 30 setFilteredMenuItems(res.data.menu.sort((x,y) => x.isVipOnly ? -1 : 1)); 31 } 24 32 setLoading(false); 25 33 }); 26 },[ ])34 },[user]) 27 35 28 36 useEffect(()=>{ … … 33 41 } 34 42 },[user]) 43 44 const updateSearchValue = (value) => { 45 const val = value.target.value.toLowerCase(); 46 setFilteredMenuItems(items=>{ 47 if(val.length==0){ 48 return restaurant.menu; 49 } 50 const its = val.split(' '); 51 let allItems = [] 52 if(!user || !user.isVip){ 53 allItems = [...restaurant.menu.filter(x => !x.isVipOnly)] 54 }else{ 55 allItems = [...restaurant.menu.sort(x => x.isVipOnly)] 56 } 57 for(let it of its){ 58 if(it.length>0) 59 allItems = allItems.filter(x => !x.alergens.includes(it)); 60 } 61 return allItems; 62 }) 63 } 35 64 36 65 const saveNewReview = data =>{ … … 53 82 return( 54 83 <div> 55 <Header onClickButton={!user?()=>history('/login'):logout} buttonText={!user?'Најави се':'Одјави се'} />84 <Header onClickButton={!user?()=>history('/login'):logout} buttonText={!user?'Најави се':'Одјави се'} isVip={user && user.isVip}/> 56 85 {loading ? <Spin style={{margin: 20}}/> : 57 86 <div style={{ … … 105 134 }} > 106 135 <h2 style={{float: 'left'}}>Мени</h2> 136 <Input.Search onChange={updateSearchValue} placeholder={'Филтрирај алергени'} style={{float:'right', width:'200px'}}/> 107 137 </div> 108 {restaurant.menu.map(el => 109 <Card key={el.id} title={el.title} style={{ width: 280, display:'inline-block', margin:'10px' }} size="small"> 138 {filteredMenuItems.map(el => 139 <Card 140 key={el.id} 141 title={el.title} 142 extra={el.isVipOnly ? <span style={{color:'orange',fontWeight:'bold'}}>VIP </span>:''} 143 style={{ width: 280, display:'inline-block', margin:'10px',verticalAlign:'middle' }} 144 size="small" 145 cover={el.image != "data:image/png;base64," ? <img style={{cursor: 'pointer'}} src={el.image} alt="avatar" 146 height='100px' width={'270px'}/> : ''} 147 > 110 148 <p>{el.description}</p> 149 <p>Алергени: {el.alergens.length ==0 ? 'Нема' : el.alergens}</p> 111 150 <b>{el.price} ден.</b> 112 151 </Card> -
frontend/src/Header.js
r49b0bbd r13f1472 10 10 {props.buttonText} 11 11 </Button> 12 {props.isVip ? <span style={{color:'orange', float:'right', fontSize:'28px', fontWeight:'bold', marginRight:'10px'}}>VIP</span>:''} 12 13 </div>; 13 14 }
Note:
See TracChangeset
for help on using the changeset viewer.