Changeset d66b8eb
- Timestamp:
- 09/21/22 18:47:39 (2 years ago)
- Branches:
- master
- Children:
- 34950c6
- Parents:
- 5201690
- Location:
- phonelux-frontend/src
- Files:
-
- 4 added
- 27 edited
Legend:
- Unmodified
- Added
- Removed
-
phonelux-frontend/src/App.js
r5201690 rd66b8eb 10 10 import SuperAdminComponent from "./components/SuperAdminComponent/SuperAdminComponent"; 11 11 import EditOfferComponent from "./components/EditOfferComponent/EditOfferComponent"; 12 import CompareOffersComponent from "./components/CompareOffersComponent/CompareOffersComponent"; 13 import SpecificationsFilterComponent from "./components/FiltersComponents/SpecificationsFilterComponent"; 12 14 13 15 … … 26 28 <Route path="/management/users" element={<SuperAdminComponent/>}/> 27 29 <Route path="/admin/editoffer/:offerId" element={<EditOfferComponent/>}/> 30 <Route path="/compareoffers" element={<CompareOffersComponent/>}/> 28 31 </Routes> 29 32 </BrowserRouter> -
phonelux-frontend/src/components/CheaperOffersComponent/CheaperOffersComponent.css
r5201690 rd66b8eb 9 9 height: 500px; 10 10 overflow: scroll; 11 border: 1px solid black; 11 12 } 12 13 -
phonelux-frontend/src/components/EditOfferComponent/EditOfferComponent.css
r5201690 rd66b8eb 67 67 background-color: rgb(230, 232, 230); 68 68 font-size: 22px; 69 text-align: center; 70 69 71 } 72 73 .edit-offer-submit-button{ 74 font-size: 20px; 75 padding: 10px; 76 background-color: #B6E2C8; 77 border-radius: 20px; 78 border: 1px solid black; 79 width: 20%; 80 margin-bottom: 50px; 81 margin-right: 130px; 82 } 83 84 85 .edit-offer-submit-button:hover{ 86 cursor: pointer; 87 background-color: rgb(166, 201, 171); 88 box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); 89 transition: box-shadow 0.5s, background-color 0.5s ; 90 } 91 92 .edit-offer-button-wrapper{ 93 margin-top: -25px; 94 display: flex; 95 justify-content: end; 96 } 97 98 .edit-offer-offerimage{ 99 width: 40%; 100 height: 40%; 101 display: block; 102 } 103 104 .edit-offer-imageurl-input{ 105 width: 80%; 106 font-size: 22px; 107 background-color: rgb(238, 240, 238); 108 border: 1px solid black; 109 text-align: center; 110 padding: 5px; 111 } 112 113 .edit-offer-offerimage-wrapper{ 114 display: flex; 115 width: 100%; 116 justify-content: center; 117 } -
phonelux-frontend/src/components/EditOfferComponent/EditOfferComponent.js
r5201690 rd66b8eb 1 import { CollectionsOutlined } from '@mui/icons-material' 1 2 import axios from 'axios' 2 3 import React, { Component } from 'react' 4 import UserContext from '../../context/UserContext' 3 5 import HeaderComponent from '../HeaderComponent/HeaderComponent' 4 6 import './EditOfferComponent.css' … … 15 17 16 18 componentDidMount(){ 19 // if(!localStorage.getItem('token')) 20 // { 21 // window.location.href = "/" 22 // } 23 24 // if(this.context.role != 'ADMIN' && this.context.role != 'SUPERADMIN') 25 // { 26 // window.location.href = "/" 27 // } 28 17 29 var config = { 18 30 method: 'get', … … 32 44 33 45 } 46 47 setInputValue = (e) => { 48 let editedOffer = Object.assign(this.state.offer,{[e.target.name]: e.target.value}) 49 this.setState({ 50 offer: editedOffer 51 }) 52 } 53 54 handleSubmit = () =>{ 55 var dataToSend = JSON.stringify(this.state.offer) 56 var config = { 57 method: 'put', 58 url: '/admin/editoffer/'+this.state.offerId, 59 headers: { 60 'Authorization': 'Bearer '+localStorage.getItem('token'), 61 'Content-Type': 'application/json' 62 }, 63 data: { 64 "id" : this.state.offer.id, 65 "offer_shop" : this.state.offer.offer_shop, 66 "offer_name" : this.state.offer.offer_name, 67 "price" : this.state.offer.price, 68 "ram_memory" : this.state.offer.ram_memory, 69 "rom_memory" : this.state.offer.rom_memory, 70 "color" : this.state.offer.color, 71 "front_camera" : this.state.offer.front_camera, 72 "back_camera" : this.state.offer.back_camera, 73 "chipset" : this.state.offer.chipset, 74 "battery" : this.state.offer.battery, 75 "operating_system" : this.state.offer.operating_system, 76 "cpu" : this.state.offer.cpu, 77 "image_url" : this.state.offer.image_url, 78 "offer_url" : this.state.offer.offer_url, 79 "last_updated" : this.state.offer.last_updated, 80 "is_validated" : this.state.offer.is_validated, 81 "offer_description" : this.state.offer.offer_description, 82 "offer_shop_code" : this.state.offer.offer_shop_code 83 } 84 }; 85 86 axios(config) 87 .then(response => { 88 window.location.href="/phoneoffer/"+this.state.offerId 89 }) 90 .catch(error => { 91 console.log(error); 92 }); 93 94 95 96 } 34 97 35 98 render() { 99 console.log(this.state) 36 100 return ( 37 101 <div className='edit-offer-component-main'> 38 102 <HeaderComponent/> 39 103 <div className='edit-offer-table-wrapper'> 104 40 105 <table className='edit-offer-table'> 41 106 <thead> 42 <tr><th colSpan={2}> Измени детали за понудата</th></tr>107 <tr><th colSpan={2}>Понуда</th></tr> 43 108 </thead> 109 44 110 <tbody> 45 111 <tr className='edit-offer-table-row'> 46 <td> Име на понуда</td>112 <td><b>Име на понуда</b></td> 47 113 <td><a href={this.state.offer == null || this.state.offer.offer_url == null ? 48 '#' : this.state.offer.offer_url}>{this.state.offer == null || this.state.offer.offer_name == null ? 49 '/' : this.state.offer.offer_name}</a></td> 50 </tr> 51 <tr className='edit-offer-table-row'> 52 <td>Продавница</td> 114 '#' : this.state.offer.offer_url}>{this.state.offer == null || this.state.offer.offer_name == null ? 115 '/' : this.state.offer.offer_name}</a> 116 </td> 117 </tr> 118 119 <tr className='edit-offer-table-row'> 120 <td><b>Продавница</b></td> 53 121 <td>{this.state.offer == null || 54 this.state.offer.offer_shop == null ? '/' : this.state.offer.offer_shop}</td> 55 </tr> 56 <tr className='edit-offer-table-row'> 57 <td>Цена</td> 122 this.state.offer.offer_shop == null ? '/' : this.state.offer.offer_shop} 123 </td> 124 </tr> 125 126 127 <tr className='edit-offer-table-row'> 128 <td><b>Опис за понудата</b></td> 129 <td>{this.state.offer == null || 130 this.state.offer.offer_description == null ? '/' : this.state.offer.offer_description} 131 </td> 132 </tr> 133 </tbody> 134 135 <thead> 136 <tr><th colSpan={2}>Спецификации за понудата</th></tr> 137 </thead> 138 139 <tbody> 140 141 <tr className='edit-offer-table-row'> 142 <td><b>Цена</b></td> 58 143 <td><input value={this.state.offer == null || 59 this.state.offer.price == null ? '/' : this.state.offer.price} className='edit-offer-price-input'/><span className='edit-offer-price-span'>ден.</span></td> 60 </tr> 61 <tr className='edit-offer-table-row'> 62 <td>Предна камера</td> 63 <td><textarea className='edit-offer-table-textarea'></textarea></td> 64 </tr> 65 <tr className='edit-offer-table-row'> 66 <td>Задна камера</td> 67 <td><textarea className='edit-offer-table-textarea'></textarea></td> 68 </tr> 69 <tr className='edit-offer-table-row'> 70 <td>РОМ меморија</td> 71 <td><textarea className='edit-offer-table-textarea'></textarea></td> 72 </tr> 73 <tr className='edit-offer-table-row'> 74 <td>РАМ меморија</td> 75 <td><textarea className='edit-offer-table-textarea'></textarea></td> 76 </tr> 77 <tr className='edit-offer-table-row'> 78 <td>Оперативен систем</td> 79 <td><textarea className='edit-offer-table-textarea'></textarea></td> 80 </tr> 81 <tr className='edit-offer-table-row'> 82 <td>Чипсет</td> 83 <td><textarea className='edit-offer-table-textarea'></textarea></td> 84 </tr> 85 <tr className='edit-offer-table-row'> 86 <td>Процесор</td> 87 <td><textarea className='edit-offer-table-textarea'></textarea></td> 88 </tr> 89 <tr className='edit-offer-table-row'> 90 <td>Батерија</td> 91 <td><textarea className='edit-offer-table-textarea'></textarea></td> 92 </tr> 93 <tr className='edit-offer-table-row'> 94 <td>Боја</td> 95 <td><textarea className='edit-offer-table-textarea'></textarea></td> 96 </tr> 97 <tr className='edit-offer-table-row'> 98 <td>Опис</td> 99 <td><textarea className='edit-offer-table-textarea'></textarea></td> 144 this.state.offer.price == null ? '/' : this.state.offer.price} 145 className='edit-offer-price-input' name='price' 146 onChange={(e) => this.setInputValue(e)}/><span className='edit-offer-price-span'>ден.</span></td> 147 </tr> 148 149 <tr className='edit-offer-table-row'> 150 <td><b>Предна камера</b></td> 151 <td><textarea className='edit-offer-table-textarea' name='front_camera' value={this.state.offer == null || 152 this.state.offer.front_camera == null ? '/' : this.state.offer.front_camera} 153 onChange={(e) => this.setInputValue(e)}></textarea></td> 154 </tr> 155 156 <tr className='edit-offer-table-row'> 157 <td><b>Задна камера</b></td> 158 <td><textarea className='edit-offer-table-textarea' value={this.state.offer == null || 159 this.state.offer.back_camera == null ? '/' : this.state.offer.back_camera} 160 onChange={(e) => this.setInputValue(e)} name='back_camera'></textarea></td> 161 </tr> 162 <tr className='edit-offer-table-row'> 163 <td><b>РОМ меморија</b></td> 164 <td><textarea className='edit-offer-table-textarea' onChange={(e) => this.setInputValue(e)} 165 name='rom_memory' value={this.state.offer == null || 166 this.state.offer.rom_memory == null ? '/' : this.state.offer.rom_memory}></textarea></td> 167 </tr> 168 169 <tr className='edit-offer-table-row'> 170 <td><b>РАМ меморија</b></td> 171 <td><textarea className='edit-offer-table-textarea' onChange={(e) => this.setInputValue(e)} 172 name='ram_memory' value={this.state.offer == null || 173 this.state.offer.ram_memory == null ? '/' : this.state.offer.ram_memory}></textarea></td> 174 </tr> 175 176 <tr className='edit-offer-table-row'> 177 <td><b>Оперативен систем</b></td> 178 <td><textarea className='edit-offer-table-textarea' value={this.state.offer == null || 179 this.state.offer.operating_system == null ? '/' : this.state.offer.operating_system} name='operating_system' 180 onChange={(e) => this.setInputValue(e)}></textarea> 181 </td> 182 </tr> 183 184 <tr className='edit-offer-table-row'> 185 <td><b>Чипсет</b></td> 186 <td><textarea className='edit-offer-table-textarea' value={this.state.offer == null || 187 this.state.offer.chipset == null ? '/' : this.state.offer.chipset} name='chipset' 188 onChange={(e) => this.setInputValue(e)}></textarea> 189 </td> 190 </tr> 191 192 <tr className='edit-offer-table-row'> 193 <td><b>Процесор</b></td> 194 <td><textarea className='edit-offer-table-textarea' value={this.state.offer == null || 195 this.state.offer.cpu == null ? '/' : this.state.offer.cpu} name='cpu' 196 onChange={(e) => this.setInputValue(e)}></textarea> 197 </td> 198 </tr> 199 200 <tr className='edit-offer-table-row'> 201 <td><b>Батерија</b></td> 202 <td><textarea className='edit-offer-table-textarea' value={this.state.offer == null || 203 this.state.offer.battery == null ? '/' : this.state.offer.battery} name='battery' 204 onChange={(e) => this.setInputValue(e)}></textarea></td> 205 </tr> 206 207 <tr className='edit-offer-table-row'> 208 <td><b>Боја</b></td> 209 <td><textarea className='edit-offer-table-textarea' name='color' value={this.state.offer == null || 210 this.state.offer.color == null ? '/' : this.state.offer.color} 211 onChange={(e) => this.setInputValue(e)}></textarea></td> 212 </tr> 213 214 <tr className='edit-offer-table-row'> 215 <td><b>Линк од слика на мобилниот телефон од понудата</b></td> 216 <td> 217 <div className='edit-offer-offerimage-wrapper'> 218 <img className='edit-offer-offerimage' src={this.state.offer == null || 219 this.state.offer.image_url == null ? '#' : this.state.offer.image_url}/> 220 </div> 221 <input value={this.state.offer == null || 222 this.state.offer.image_url == null ? '/' : this.state.offer.image_url} 223 className='edit-offer-imageurl-input' name='image_url' 224 onChange={(e) => this.setInputValue(e)}/> 225 </td> 100 226 </tr> 101 227 </tbody> 102 228 </table> 103 104 229 </div> 105 106 230 <div className='edit-offer-button-wrapper'> 231 <button className='edit-offer-submit-button' onClick={this.handleSubmit}><b>Измени</b></button> 232 </div> 107 233 </div> 108 234 … … 111 237 } 112 238 239 EditOfferComponent.contextType = UserContext 240 113 241 export default EditOfferComponent -
phonelux-frontend/src/components/FiltersComponents/FilterPriceComponent.js
r5201690 rd66b8eb 11 11 12 12 this.state = { 13 value: [1000,150000], 13 value: localStorage.getItem('priceRange') ? [parseInt(localStorage.getItem('priceRange').split('-')[0]), 14 parseInt(localStorage.getItem('priceRange').split('-')[1])] : [1000,150000], 14 15 minValue: 0, 15 16 maxValue: 0 … … 39 40 handleChange = () => { 40 41 this.props.changeHandler({priceRange: this.state.value.join('-')}) 42 localStorage.setItem('priceRange',this.state.value.join('-')) 41 43 } 42 44 -
phonelux-frontend/src/components/FiltersComponents/FilterSelectComponent.css
r5201690 rd66b8eb 7 7 8 8 } 9 10 .list-item-text-filters span{ 11 overflow-x: scroll; 12 } -
phonelux-frontend/src/components/FiltersComponents/FilterSelectComponent.js
r5201690 rd66b8eb 15 15 constructor(props) { 16 16 super(props) 17 17 const {type} = this.props 18 console.log(type) 18 19 this.state = { 19 pickedItems: [],20 pickedItems: localStorage.getItem(type) ? localStorage.getItem(type).split(',') : [], 20 21 items: [], 21 22 type: '', … … 37 38 } 38 39 39 40 40 let endpoint 41 if(this.props.type == 'brands') 42 { 43 endpoint = '/brands' 41 switch (this.props.type) { 42 43 case 'brands': 44 endpoint = '/brands' 44 45 this.setState({ 45 46 type: 'Брендови' 46 47 }) 47 }48 else{49 endpoint = '/shops'48 break; 49 case 'shops': 50 endpoint = '/shops' 50 51 this.setState({ 51 52 type: 'Продавници' 52 53 }) 54 break; 55 56 case 'ram': 57 endpoint = '/specifications/ram' 58 this.setState({ 59 type: 'РАМ меморија' 60 }) 61 break; 62 63 case 'rom': 64 endpoint = '/specifications/rom' 65 this.setState({ 66 type: 'РОМ меморија' 67 }) 68 break; 69 70 case 'frontcamera': 71 endpoint = '/specifications/frontcamera' 72 this.setState({ 73 type: 'Предна камера' 74 }) 75 break; 76 77 case 'backcamera': 78 endpoint = '/specifications/backcamera' 79 this.setState({ 80 type: 'Задна камера' 81 }) 82 break; 83 84 case 'chipset': 85 endpoint = '/specifications/chipset' 86 this.setState({ 87 type: 'Чипсет' 88 }) 89 break; 90 91 case 'cpu': 92 endpoint = '/specifications/cpu' 93 this.setState({ 94 type: 'Процесор' 95 }) 96 break; 97 98 99 case 'operatingsystem': 100 endpoint = '/specifications/operatingsystem' 101 this.setState({ 102 type: 'Оперативен систем' 103 }) 104 break; 105 106 107 case 'color': 108 endpoint = '/specifications/color' 109 this.setState({ 110 type: 'Боја' 111 }) 112 break; 113 114 case 'battery': 115 endpoint = '/specifications/battery' 116 this.setState({ 117 type: 'Батерија' 118 }) 119 break; 120 121 default: 122 break; 53 123 } 54 124 … … 63 133 pickedItems: typeof value === 'string' ? value.split(',') : value 64 134 }, ()=>{ 65 if(this.props.type == 'brands') 66 { 67 this.props.changeHandler({brands: this.state.pickedItems.join(',')}) 135 136 switch (this.props.type) { 137 case 'brands': 138 this.props.changeHandler({brands: this.state.pickedItems.join(',')}) 139 localStorage.setItem('brands', this.state.pickedItems.join(',')) 140 break; 141 142 case 'shops': 143 this.props.changeHandler({shops: this.state.pickedItems.join(',')}) 144 localStorage.setItem('shops', this.state.pickedItems.join(',')) 145 break; 146 147 case 'ram': 148 this.props.changeHandler({ram: this.state.pickedItems.join(',')}) 149 localStorage.setItem('ram', this.state.pickedItems.join(',')) 150 break; 151 case 'rom': 152 this.props.changeHandler({rom: this.state.pickedItems.join(',')}) 153 localStorage.setItem('rom', this.state.pickedItems.join(',')) 154 break; 155 case 'frontcamera': 156 this.props.changeHandler({frontcamera: this.state.pickedItems.join(',')}) 157 localStorage.setItem('frontcamera', this.state.pickedItems.join(',')) 158 break; 159 160 case 'backcamera': 161 this.props.changeHandler({backcamera: this.state.pickedItems.join(',')}) 162 localStorage.setItem('backcamera', this.state.pickedItems.join(',')) 163 break; 164 165 case 'chipset': 166 this.props.changeHandler({chipset: this.state.pickedItems.join(',')}) 167 localStorage.setItem('chipset', this.state.pickedItems.join(',')) 168 break; 169 170 case 'cpu': 171 this.props.changeHandler({cpu: this.state.pickedItems.join(',')}) 172 localStorage.setItem('cpu', this.state.pickedItems.join(',')) 173 break; 174 175 case 'operatingsystem': 176 this.props.changeHandler({operatingsystem: this.state.pickedItems.join(',')}) 177 localStorage.setItem('operatingsystem', this.state.pickedItems.join(',')) 178 break; 179 180 case 'color': 181 this.props.changeHandler({color: this.state.pickedItems.join(',')}) 182 localStorage.setItem('color', this.state.pickedItems.join(',')) 183 break; 184 185 case 'battery': 186 this.props.changeHandler({battery: this.state.pickedItems.join(',')}) 187 localStorage.setItem('battery', this.state.pickedItems.join(',')) 188 break; 189 190 default: 191 break; 68 192 } 193 // if(this.props.type == 'brands') 194 // { 195 // this.props.changeHandler({brands: this.state.pickedItems.join(',')}) 196 // } 69 197 70 if(this.props.type == 'shops')71 {72 this.props.changeHandler({shops: this.state.pickedItems.join(',')})73 }198 // if(this.props.type == 'shops') 199 // { 200 // this.props.changeHandler({shops: this.state.pickedItems.join(',')}) 201 // } 74 202 75 203 }) 204 205 76 206 }; 77 207 // sx={{ m: 1, width: 250 }} kaj formcontrol 78 208 79 209 render() { 80 210 return ( 81 211 <div> 82 <FormControl className="form-select-component" sx={{ m: 1, width: 200}}>212 <FormControl className="form-select-component" sx={{ m: 1, width: this.props.width}}> 83 213 <InputLabel className="input-select-label">{this.state.type}</InputLabel> 84 214 <Select … … 94 224 > 95 225 {this.state.items.map((item) => ( 96 <MenuItem key={item} value={item} >226 <MenuItem key={item} value={item} > 97 227 <Checkbox checked={this.state.pickedItems.indexOf(item) > -1} /> 98 <ListItemText primary={item} />228 <ListItemText className='list-item-text-filters' primary={item} /> 99 229 </MenuItem> 100 230 ))} -
phonelux-frontend/src/components/FiltersComponents/SearchFieldComponent.js
r5201690 rd66b8eb 63 63 64 64 this.state = { 65 65 66 66 } 67 67 } -
phonelux-frontend/src/components/FiltersComponents/SortByComponent.css
r5201690 rd66b8eb 1 1 .sortby-component-wrapper{ 2 2 display: flex; 3 justify-content: end;3 justify-content: space-between; 4 4 padding: 20px; 5 5 background-color: #DEE4E1 … … 11 11 background-color: #e6f8ef; 12 12 margin-right: 15px; 13 height: 50%; 14 margin-left: auto; 13 15 } 16 17 18 .popover-specification-container{ 19 height: 500px; 20 overflow-y: scroll; 21 } -
phonelux-frontend/src/components/FiltersComponents/SortByComponent.js
r5201690 rd66b8eb 1 1 import React, { Component } from 'react' 2 import { Link } from 'react-router-dom' 2 3 import './SortByComponent.css' 4 import SpecificationsFilterComponent from './SpecificationsFilterComponent' 3 5 4 6 export class SortByComponent extends Component { … … 8 10 9 11 this.state = { 10 sortBy: 'mostPopular'12 sortBy: localStorage.getItem('sortBy') ? localStorage.getItem('sortBy') : 'mostPopular' 11 13 } 12 14 } … … 14 16 handleChange = (e) => { 15 17 this.props.changeHandler({sortBy: e.target.value}) 18 localStorage.setItem('sortBy',e.target.value) 16 19 } 17 20 … … 19 22 return ( 20 23 <div className="sortby-component-wrapper"> 21 <select defaultValue={'mostPopular'} onChange={this.handleChange} className='sortby-component-select'> 24 {localStorage.getItem('token') ? <SpecificationsFilterComponent changeHandler={this.props.changeHandler}/> : <></>} 25 <select defaultValue={this.state.sortBy} onChange={this.handleChange} className='sortby-component-select'> 22 26 <option value="mostPopular">Најпопуларно</option> 23 27 <option value="ascending">Цена: Ниска {'>'} Висока</option> -
phonelux-frontend/src/components/GroupedFiltersComponent/GroupedFiltersComponent.js
r5201690 rd66b8eb 29 29 30 30 <Grid className='filterscomponent-grid-item' item xs={6} sm={4} md={3}> 31 <FilterSelectComponent changeHandler={this.props.passFilters} type='shops'/>31 <FilterSelectComponent width={200} changeHandler={this.props.passFilters} type='shops'/> 32 32 </Grid> 33 33 34 34 <Grid className='filterscomponent-grid-item' item xs={6} sm={4} md={3}> 35 <FilterSelectComponent changeHandler={this.props.passFilters} type='brands'/>35 <FilterSelectComponent width={200} changeHandler={this.props.passFilters} type='brands'/> 36 36 </Grid> 37 37 -
phonelux-frontend/src/components/HomepageComponent.js
r5201690 rd66b8eb 16 16 priceRange: '', 17 17 searchValue: '', 18 sortBy: 'mostPopular' 18 sortBy: 'mostPopular', 19 ram: '', 20 rom: '', 21 frontcamera: '', 22 backcamera: '', 23 chipset: '', 24 cpu: '', 25 operatingsystem: '', 26 color: '', 27 battery: '' 19 28 } 20 29 } … … 57 66 }) 58 67 } 68 69 if(e.hasOwnProperty('ram')) 70 { 71 this.setState({ 72 ram: e.ram 73 }) 74 75 } 76 77 if(e.hasOwnProperty('rom')) 78 { 79 this.setState({ 80 rom: e.rom 81 }) 82 } 83 84 if(e.hasOwnProperty('frontcamera')) 85 { 86 this.setState({ 87 frontcamera: e.frontcamera 88 }) 89 } 90 91 if(e.hasOwnProperty('backcamera')) 92 { 93 this.setState({ 94 backcamera: e.backcamera 95 }) 96 97 } 98 99 if(e.hasOwnProperty('chipset')) 100 { 101 this.setState({ 102 chipset: e.chipset 103 }) 104 } 105 106 if(e.hasOwnProperty('cpu')) 107 { 108 this.setState({ 109 cpu: e.cpu 110 }) 111 112 } 113 114 if(e.hasOwnProperty('operatingsystem')) 115 { 116 this.setState({ 117 operatingsystem: e.operatingsystem 118 }) 119 } 120 121 if(e.hasOwnProperty('color')) 122 { 123 this.setState({ 124 color: e.color 125 }) 126 127 } 128 129 if(e.hasOwnProperty('battery')) 130 { 131 this.setState({ 132 battery: e.battery 133 }) 134 } 135 } 136 137 componentDidMount(){ 138 if(localStorage.getItem('brands')) 139 { 140 this.setState({ 141 brands: localStorage.getItem('brands') 142 }) 143 } 144 if(localStorage.getItem('shops')) 145 { 146 this.setState({ 147 shops: localStorage.getItem('shops') 148 }) 149 } 150 if(localStorage.getItem('priceRange')) 151 { 152 this.setState({ 153 priceRange: localStorage.getItem('priceRange') 154 }) 155 } 156 157 if(localStorage.getItem('sortBy')) 158 { 159 this.setState({ 160 sortBy: localStorage.getItem('sortBy') 161 }) 162 } 163 if(localStorage.getItem('ram')) 164 { 165 this.setState({ 166 ram: localStorage.getItem('ram') 167 }) 168 } 169 if(localStorage.getItem('rom')) 170 { 171 this.setState({ 172 rom: localStorage.getItem('rom') 173 }) 174 } 175 if(localStorage.getItem('frontcamera')) 176 { 177 this.setState({ 178 frontcamera: localStorage.getItem('frontcamera') 179 }) 180 } 181 if(localStorage.getItem('backcamera')) 182 { 183 this.setState({ 184 backcamera: localStorage.getItem('backcamera') 185 }) 186 } 187 if(localStorage.getItem('chipset')) 188 { 189 this.setState({ 190 chipset: localStorage.getItem('chipset') 191 }) 192 } 193 if(localStorage.getItem('cpu')) 194 { 195 this.setState({ 196 cpu: localStorage.getItem('cpu') 197 }) 198 } 199 if(localStorage.getItem('operatingsystem')) 200 { 201 this.setState({ 202 operatingsystem: localStorage.getItem('operatingsystem') 203 }) 204 } 205 if(localStorage.getItem('color')) 206 { 207 this.setState({ 208 color: localStorage.getItem('color') 209 }) 210 } 211 if(localStorage.getItem('battery')) 212 { 213 this.setState({ 214 battery: localStorage.getItem('battery') 215 }) 216 } 217 console.log(this.state) 59 218 } 60 219 61 220 62 221 render() { 63 console.log(this.context) 64 console.log(localStorage.getItem('token')) 222 // console.log(this.context) 223 // console.log(localStorage.getItem('token')) 224 console.log(this.state) 65 225 return ( 66 226 <> -
phonelux-frontend/src/components/LoginPageComponent.js
r5201690 rd66b8eb 10 10 this.state = { 11 11 12 } 13 } 14 15 componentDidMount(){ 16 if(localStorage.getItem('token')) 17 { 18 window.location.href = "/" 12 19 } 13 20 } -
phonelux-frontend/src/components/NavbarComponent/NavbarComponent.css
r5201690 rd66b8eb 30 30 } 31 31 32 .navbar-comparephone-icon:hover{ 33 cursor: pointer; 34 } 35 -
phonelux-frontend/src/components/NavbarComponent/NavbarComponent.js
r5201690 rd66b8eb 11 11 import UserContext from '../../context/UserContext'; 12 12 import SupervisorAccountIcon from '@mui/icons-material/SupervisorAccount'; 13 import PhoneIphoneIcon from '@mui/icons-material/PhoneIphone'; 13 14 14 15 export class NavbarComponent extends Component { … … 35 36 <Link style={{color: 'black'}} to={"/management/users"}> 36 37 <SupervisorAccountIcon style={{fontSize: '40px', marginTop: '10px', marginRight: '10px' }} className='navbar-superadmin-icon'/> 38 </Link> 39 </Tippy> : <></> 40 } 41 { 42 localStorage.getItem('token') ? 43 <Tippy placement='bottom' content='Споредба на мобилни телефони'> 44 <Link style={{color: 'black'}} to={"/compareoffers"}> 45 <PhoneIphoneIcon style={{fontSize: '40px', marginTop: '10px', marginRight: '10px' }} className='navbar-comparephone-icon'/> 37 46 </Link> 38 47 </Tippy> : <></> -
phonelux-frontend/src/components/PhoneCardGridComponent/PhoneCardGridComponent.js
r5201690 rd66b8eb 6 6 import './PhoneCardGridComponent.css' 7 7 import phoneImage from '../../images/phone.png' 8 import SortByComponent from '../FiltersComponents/SortByComponent' 8 9 9 10 export class PhoneCardGridComponent extends Component { … … 20 21 } 21 22 23 } 24 25 26 getQueryString = () => { 27 let filters = '?' 28 if(localStorage.getItem('shops')) 29 { 30 filters += 'shops='+localStorage.getItem('shops')+'&' 31 } 32 if(localStorage.getItem('brands')) 33 { 34 filters += 'brands='+localStorage.getItem('brands')+'&' 35 } 36 if(localStorage.getItem('priceRange')) 37 { 38 filters += 'priceRange='+localStorage.getItem('priceRange')+'&' 39 } 40 41 if(localStorage.getItem('sortBy')) 42 { 43 filters += 'sortBy='+localStorage.getItem('sortBy')+'&' 44 } 45 46 // dodaj filtri za specifikacija i sredi go sortBy 47 48 return filters 22 49 } 23 50 … … 46 73 { 47 74 filters += 'sortBy='+this.props.sortBy+'&' 48 } 75 } 76 77 // dodaj gi i filtrite za specifikacija 78 79 // izdvoj metod da ti pravi querystring 49 80 50 81 axios.get('/phones'+filters) … … 62 93 63 94 componentDidMount() { 64 axios.get('/phones' )95 axios.get('/phones'+this.getQueryString()) 65 96 .then(response => { 66 97 this.setState({ -
phonelux-frontend/src/components/PhoneOfferComponent/PhoneOfferComponent.css
r5201690 rd66b8eb 35 35 cursor: pointer; 36 36 } 37 38 .phone-offer-compare-icon:hover{ 39 cursor: pointer; 40 } 41 42 .phone-offer-remove-favouriteoffer-icon:hover{ 43 cursor: pointer; 44 } 45 46 .phone-offer-remove-favouriteoffer-icon{ 47 color: rgb(226, 213, 39); 48 } 49 50 .phone-offer-compare-selected-icon:hover{ 51 cursor: pointer; 52 } 53 54 .phone-offer-compare-selected-icon{ 55 color: rgb(226, 213, 39); 56 } 57 58 59 60 -
phonelux-frontend/src/components/PhoneOfferComponent/PhoneOfferComponent.js
r5201690 rd66b8eb 9 9 import VisibilityIcon from '@mui/icons-material/Visibility'; 10 10 import CheckIcon from '@mui/icons-material/Check'; 11 import CompareIcon from '@mui/icons-material/Compare'; 12 import BookmarkRemoveIcon from '@mui/icons-material/BookmarkRemove'; 11 13 12 14 export class PhoneOfferComponent extends Component { … … 16 18 17 19 this.state = { 18 19 20 } 20 21 } … … 72 73 }); 73 74 } 75 76 handleOfferCompare = () => { 77 let offersToCompare = [] 78 if(localStorage.getItem('offersToCompare')) 79 { 80 offersToCompare = JSON.parse(localStorage.getItem('offersToCompare')) 81 } 82 83 if(!offersToCompare.includes(this.props.id) && offersToCompare.length<5) 84 { 85 offersToCompare.push(this.props.id) 86 } 87 else{ 88 offersToCompare = offersToCompare.filter(offer => offer != this.props.id) 89 } 90 localStorage.setItem('offersToCompare', JSON.stringify(offersToCompare)) 91 this.forceUpdate() 92 } 74 93 75 94 … … 81 100 <td>{this.props.price} ден.</td> 82 101 <td> 102 103 {/* if else jsx syntax here to add icon */} 104 105 {(() => { 106 if(!localStorage.getItem('token')) 107 { 108 return <></> 109 } 110 111 if(localStorage.getItem('offersToCompare') && localStorage.getItem('offersToCompare').includes(this.props.id)) 112 { 113 return <Tippy placement='bottom' content='Избриши понуда за споредба'> 114 <CompareIcon onClick={this.handleOfferCompare} className='phone-offer-compare-selected-icon' style={{fontSize: '40px', marginRight: '10px' }}/> 115 </Tippy> 116 } 117 else{ 118 return <Tippy placement='bottom' content='Додади понуда за споредба'> 119 <CompareIcon onClick={this.handleOfferCompare} className='phone-offer-compare-icon' style={{fontSize: '40px', marginRight: '10px' }}/> 120 </Tippy> 121 } 122 })()} 123 {/* { 124 localStorage.getItem('token') && !localStorage.getItem('offersToCompare').includes(this.props.id)? 125 <Tippy placement='bottom' content='Додади понуда за споредба'> 126 <CompareIcon onClick={this.handleOfferCompare} className='phone-offer-compare-icon' style={{fontSize: '40px', marginRight: '10px' }}/> 127 </Tippy> : <></> 128 } */} 83 129 { 84 130 window.location.href.split('/')[5] == 'favouriteoffers' ? … … 98 144 localStorage.getItem('token') && this.props.loggedUserFavouriteOffers.filter(offer => offer.id == this.props.id).length != 0? 99 145 <Tippy placement='bottom' content='Избриши од омилени понуди'> 100 <StarIcon onClick={this.removeFromFavourite} className='phone-offer- favouriteoffer-icon' style={{fontSize: '40px', marginRight: '10px' }}/>146 <StarIcon onClick={this.removeFromFavourite} className='phone-offer-remove-favouriteoffer-icon' style={{fontSize: '40px', marginRight: '10px' }}/> 101 147 </Tippy> 102 148 : <></> … … 105 151 106 152 <Link style={{ textDecoration: 'none' }} to={"/phoneoffer/"+this.props.id}> 107 <button className='phone-offer-specifications-button'> Спецификации</button>153 <button className='phone-offer-specifications-button'><b>Спецификации</b></button> 108 154 </Link> 109 155 </td> -
phonelux-frontend/src/components/PhoneOfferDetailsComponent/PhoneOfferDetailsComponent.css
r5201690 rd66b8eb 56 56 .phone-offer-details-last-updated-header{ 57 57 width: 25%; 58 margin-left: 20px;58 margin-left: 5%; 59 59 padding: 10px; 60 60 border: 1px solid rgb(199, 193, 193); 61 background-color: # B6E2C8;61 background-color: #dadedc; 62 62 border-radius: 50px; 63 63 text-align: center; … … 73 73 .phone-offer-details-edit-header{ 74 74 width: 100%; 75 margin-left: 20px;75 margin-left: 5%; 76 76 padding-top: 10px; 77 77 border: 1px solid black; … … 96 96 } 97 97 98 .validate-offer-button{ 99 font-size: 17px; 100 padding: 10px; 101 background-color: rgb(170, 211, 240); 102 border-radius: 30px; 103 border: 1px solid black; 104 margin-left: auto; 105 margin-right: 10%; 106 width: 15%; 107 font-weight: bold; 108 font-size: 18px; 109 text-align: center; 110 } 98 111 112 .validate-offer-button:hover{ 113 cursor: pointer; 114 background-color: rgb(149, 187, 215); 115 box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); 116 transition: box-shadow 0.5s, background-color 0.5s ; 117 } 118 119 .offer-valid-header{ 120 font-size: 17px; 121 padding: 10px; 122 background-color: #96d5b0; 123 border-radius: 20px; 124 border: 1px solid black; 125 margin-left: auto; 126 margin-right: 10%; 127 text-align: center; 128 width: 15%; 129 font-weight: bold; 130 font-size: 19px; 131 } 132 133 -
phonelux-frontend/src/components/PhoneOfferDetailsComponent/PhoneOfferDetailsComponent.js
r5201690 rd66b8eb 4 4 import HeaderComponent from '../HeaderComponent/HeaderComponent' 5 5 import UserContext from '../../context/UserContext' 6 import CheckIcon from '@mui/icons-material/Check'; 6 7 import { Link } from 'react-router-dom' 8 import Tippy from '@tippyjs/react' 7 9 8 10 … … 19 21 20 22 componentDidMount(){ 21 axios.get('/phoneoffer/'+this.state.offerId) 23 this.getPhoneOffer() 24 } 25 26 getPhoneOffer = () => { 27 axios.get('/phoneoffer/'+this.state.offerId) 22 28 .then(response => { 23 29 this.setState({ … … 27 33 } 28 34 35 validateOffer = () => { 36 var config = { 37 method: 'put', 38 url: '/admin/validateoffer/'+this.state.offerId, 39 headers: { 40 'Authorization': 'Bearer '+localStorage.getItem('token') 41 } 42 }; 43 44 axios(config) 45 .then(response => { 46 this.getPhoneOffer(); 47 }) 48 .catch(error => { 49 console.log(error); 50 }); 51 } 52 29 53 render() { 54 console.log(this.state) 30 55 return ( 31 56 <div className='phone-offer-details-main'> … … 40 65 </Link> : <></> 41 66 } 67 68 69 {(() => { 70 if(this.state.offer != null && this.state.offer.is_validated) 71 { 72 return <Tippy placement='bottom' content='Понудата е валидна'> 73 <CheckIcon className='offer-valid-check-icon' style={{'fontSize': '60px'}}></CheckIcon> 74 </Tippy> 75 } 76 77 if(this.state.offer != null && !this.state.offer.is_validated && 78 (this.context.role == 'ADMIN' || this.context.role == 'SUPERADMIN')) 79 { 80 return <button onClick={this.validateOffer} className='validate-offer-button'>Валидирај понуда</button> 81 } 82 83 })()} 42 84 </div> 85 <div className='phone-offer-details-last-updated-wrapper'></div> 43 86 <div className='phone-offer-details-table-wrapper'> 44 87 <div className='phone-offer-details-table-section'> -
phonelux-frontend/src/components/PhonePageComponent.js
r5201690 rd66b8eb 18 18 axios.get('/phones/'+this.state.phoneId) 19 19 .then(response => { 20 console.log(response.data) 20 21 this.setState({ 21 22 phone: response.data -
phonelux-frontend/src/components/PhoneWithOffersComponent/PhoneWithOffersComponent.css
r5201690 rd66b8eb 70 70 } 71 71 72 -
phonelux-frontend/src/components/PhoneWithOffersComponent/PhoneWithOffersComponent.js
r5201690 rd66b8eb 22 22 axios.get('/phones/offers/'+this.props.phoneId) 23 23 .then(response => { 24 console.log(response.data) 24 25 this.setState({ 25 26 phone_offers: response.data -
phonelux-frontend/src/components/RegisterPageComponent.js
r5201690 rd66b8eb 4 4 5 5 export class RegisterPageComponent extends Component { 6 7 constructor(props) { 8 super(props) 9 10 this.state = { 11 12 } 13 } 14 15 16 componentDidMount(){ 17 if(localStorage.getItem('token')) 18 { 19 window.location.href = "/" 20 } 21 } 22 6 23 render() { 7 24 return ( -
phonelux-frontend/src/components/SuperAdminComponent/SuperAdminComponent.js
r5201690 rd66b8eb 8 8 import SearchIcon from '@mui/icons-material/Search'; 9 9 import InputBase from '@mui/material/InputBase'; 10 import UserContext from '../../context/UserContext'; 10 11 11 12 … … 68 69 69 70 componentDidMount(){ 71 // if(!localStorage.getItem('token')) 72 // { 73 // window.location.href = "/" 74 // } 75 76 // if(this.context.role != 'SUPERADMIN') 77 // { 78 // window.location.href = "/" 79 // } 70 80 this.getUsers() 71 81 } … … 199 209 } 200 210 211 SuperAdminComponent.contextType = UserContext 212 201 213 export default SuperAdminComponent -
phonelux-frontend/src/components/UserFavouriteOffersComponent/UserFavouriteOffersComponent.js
r5201690 rd66b8eb 7 7 import PhoneOfferComponent from '../PhoneOfferComponent/PhoneOfferComponent' 8 8 import CheaperOffersComponent from '../CheaperOffersComponent/CheaperOffersComponent' 9 import { wait } from '@testing-library/user-event/dist/utils' 9 10 10 11 export class UserFavouriteOffersComponent extends Component { … … 21 22 22 23 componentDidMount(){ 24 if(!localStorage.getItem('token')){ 25 window.location.href = "/" 26 } 27 23 28 this.getFavouriteOffersForLoggedUser() 24 29 } … … 27 32 var config = { 28 33 method: 'get', 29 url: '/user/'+ this.context.userId+'/favouriteoffers',34 url: '/user/'+window.location.href.split('/')[4]+'/favouriteoffers', 30 35 headers: { 31 36 'Authorization': 'Bearer '+localStorage.getItem('token') … … 59 64 60 65 render() { 61 66 // console.log(this.context) 62 67 63 68 return ( … … 71 76 <StarIcon style={{fontSize: '50px', marginTop: '20px', marginLeft: '10px'}}/> 72 77 </div> 73 <table cellPadding={20} className='phone-with-offers-table'> 74 <thead className='phone-with-offers-table-head'> 75 <tr> 76 <th>Продавница</th> 77 <th>Име на понуда</th> 78 <th>Цена</th> 79 <th></th> 80 </tr> 81 </thead> 82 <tbody> 83 { 84 this.state.userFavouriteOffers.map((offer,idx) => <PhoneOfferComponent key={idx} id={offer.id} 85 is_validated={offer.is_validated} offer_shop={offer.offer_shop} offer_name={offer.offer_name} 86 price={offer.price} offer_url={offer.offer_url} handleOpen={this.handleOpen} 87 loggedUserFavouriteOffers={this.state.userFavouriteOffers} 88 getFavouriteOffersForLoggedUser={this.getFavouriteOffersForLoggedUser} 89 />) 90 } 91 </tbody> 92 </table> 78 79 {(() => { 80 if(this.state.userFavouriteOffers.length != 0){ 81 return <table cellPadding={20} className='phone-with-offers-table'> 82 <thead className='phone-with-offers-table-head'> 83 <tr> 84 <th>Продавница</th> 85 <th>Име на понуда</th> 86 <th>Цена</th> 87 <th></th> 88 </tr> 89 </thead> 90 <tbody> 91 { 92 this.state.userFavouriteOffers.map((offer,idx) => <PhoneOfferComponent key={idx} id={offer.id} 93 is_validated={offer.is_validated} offer_shop={offer.offer_shop} offer_name={offer.offer_name} 94 price={offer.price} offer_url={offer.offer_url} handleOpen={this.handleOpen} 95 loggedUserFavouriteOffers={this.state.userFavouriteOffers} 96 getFavouriteOffersForLoggedUser={this.getFavouriteOffersForLoggedUser} 97 />) 98 } 99 </tbody> 100 </table> 101 } 102 else{ 103 return <h1 className='no-offers-saved-message'>Нема зачувано понуди</h1> 104 } 105 106 })()} 107 93 108 <CheaperOffersComponent 94 109 cheaperOffers={this.state.cheaperOffers} -
phonelux-frontend/src/context/UserContext.js
r5201690 rd66b8eb 12 12 userId: '', 13 13 name: '', 14 role: '', 15 userFavouriteOffers: [] 14 role: '' 16 15 } 17 16 } … … 28 27 name: firstName, 29 28 role: userRole 30 } , this.updateUserFavouriteOffers)29 }) 31 30 }).catch(error => console.log(error)) 32 31 } 33 32 } 34 35 // updateUserFavouriteOffers = () =>{ 36 // var config = { 37 // method: 'get', 38 // url: '/user/'+this.state.userId+'/favouriteoffers', 39 // headers: { 40 // 'Authorization': 'Bearer '+localStorage.getItem('token') 41 // } 42 // }; 43 44 // axios(config) 45 // .then(response => { 46 // this.setState({ 47 // userFavouriteOffers: response.data 48 // }) 49 // }) 50 // .catch(error => { 51 // console.log(error) 52 // }) 53 // } 54 55 33 56 34 57 35 render() { 58 const {userId,name,role, userFavouriteOffers} = this.state 59 // const {updateUserFavouriteOffers} = this 36 const {userId,name,role} = this.state 60 37 return ( 61 38 <UserContext.Provider value={{ 62 39 userId, 63 40 name, 64 role, 65 // userFavouriteOffers, 66 // updateUserFavouriteOffers 41 role 67 42 }}> 68 43 {this.props.children}
Note:
See TracChangeset
for help on using the changeset viewer.