Changeset 48f3030 for phonelux-frontend


Ignore:
Timestamp:
09/23/22 02:03:14 (2 years ago)
Author:
Marko <Marko@…>
Branches:
master
Children:
895cd87
Parents:
436e0da
Message:

Implemented all use cases

Location:
phonelux-frontend/src
Files:
2 added
12 edited

Legend:

Unmodified
Added
Removed

  • phonelux-frontend/src/components/CheaperOffersComponent/CheaperOffersComponent.js

    r436e0da r48f3030  
    1919
    2020    return (
    21         <div>
     21        <div className='cheaperoffers-modal-main'>
    2222        <Modal
    2323          open={this.props.openModal}

  • phonelux-frontend/src/components/CompareOffersComponent/CompareOffersComponent.js

    r436e0da r48f3030  
    9090                        <th className='compare-offer-table-headers'>Цена</th>
    9191                        {
    92                         this.state.offersToCompare.map((offer,idx) => <td key={idx}>{offer.price}</td>)
     92                        this.state.offersToCompare.map((offer,idx) => <td key={idx}>{offer.price} ден.</td>)
    9393                        }
    9494                    </tr>
     95                    { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("РАМ меморија") ?
    9596                    <tr className='compare-offers-table-row'>
    9697                        <th className='compare-offer-table-headers'>РАМ меморија</th>
    … …  
    99100                            offer.ram_memory == '' ? '/' : offer.ram_memory}</td>)
    100101                        }
    101                     </tr>
     102                    </tr> : <></>
     103                    }
     104                     { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("РОМ меморија") ?
    102105                    <tr className='compare-offers-table-row'>
    103106                        <th className='compare-offer-table-headers'>РОМ меморија</th>
    … …  
    106109                            offer.rom_memory == '' ? '/' : offer.rom_memory}</td>)
    107110                        }
    108                     </tr>
     111                    </tr> : <></>
     112                    }
     113                     { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Предна камера") ?
    109114                    <tr className='compare-offers-table-row'>
    110115                        <th className='compare-offer-table-headers'>Предна камера</th>
    … …  
    113118                            offer.front_camera == '' ? '/' : offer.front_camera}</td>)
    114119                        }
    115                     </tr>
     120                    </tr> : <></>
     121                    }
     122                     { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Задна камера") ?
    116123                    <tr className='compare-offers-table-row'>
    117124                        <th className='compare-offer-table-headers'>Задна камера</th>
    … …  
    120127                            offer.back_camera == '' ? '/' : offer.back_camera}</td>)
    121128                        }
    122                     </tr>
     129                    </tr> : <></>
     130                    }
     131                     { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Процесор") ?
    123132                    <tr className='compare-offers-table-row'>
    124133                        <th className='compare-offer-table-headers'>Процесор</th>
    … …  
    127136                            offer.cpu == '' ? '/' : offer.cpu}</td>)
    128137                        }
    129                     </tr>
     138                    </tr> : <></>
     139                    }
     140                     { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Чипсет") ?
    130141                    <tr className='compare-offers-table-row'>
    131142                        <th className='compare-offer-table-headers'>Чипсет</th>
    … …  
    134145                            offer.chipset == '' ? '/' : offer.chipset}</td>)
    135146                        }
    136                     </tr>
     147                    </tr> : <></>
     148                    }
     149                     { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Оперативен систем") ?
    137150                    <tr className='compare-offers-table-row'>
    138151                        <th className='compare-offer-table-headers'>Оперативен систем</th>
    … …  
    141154                            offer.operating_system == '' ? '/' : offer.operating_system}</td>)
    142155                        }
    143                     </tr>
     156                    </tr> : <></>
     157                    }
     158                     { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Батерија") ?
    144159                    <tr className='compare-offers-table-row'>
    145160                        <th className='compare-offer-table-headers'>Батерија</th>
    … …  
    148163                            offer.battery == '' ? '/' : offer.battery}</td>)
    149164                        }
    150                     </tr>
     165                    </tr> : <></>
     166                    }
     167                     { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Боја") ?
    151168                    <tr className='compare-offers-table-row'>
    152169                        <th className='compare-offer-table-headers'>Боја</th>
    … …  
    155172                            offer.color == '' ? '/' : offer.color}</td>)
    156173                        }
    157                     </tr>
     174                    </tr> : <></>
     175                    }
    158176                </tbody>
    159177                </table>

  • phonelux-frontend/src/components/FiltersComponents/FilterSelectComponent.js

    r436e0da r48f3030  
    1616      super(props)
    1717        const {type} = this.props
    18         console.log(type)
    1918      this.state = {
    2019         pickedItems: localStorage.getItem(type) ? localStorage.getItem(type).split(',') : [],

  • phonelux-frontend/src/components/FiltersComponents/SortByComponent.css

    r436e0da r48f3030  
    2020    overflow-y: scroll;
    2121}
     22
     23.pick-specifications-icon{
     24    margin-left: 10px;
     25}
     26
     27.pick-specifications-icon:hover{
     28    cursor: pointer;
     29}
     30
     31.specifications-filter-main{
     32    display: flex;
     33}
     34.tippy-pick-specifications-icon{
     35    width: fit-content;
     36    text-align: center;
     37}

  • phonelux-frontend/src/components/FiltersComponents/SortByComponent.js

    r436e0da r48f3030  
    33import './SortByComponent.css'
    44import SpecificationsFilterComponent from './SpecificationsFilterComponent'
     5import FilterAltIcon from '@mui/icons-material/FilterAlt';
     6import PickSpecificationComponent from '../PickSpecificationComponent/PickSpecificationComponent';
    57
    68export class SortByComponent extends Component {
    … …  
    1012   
    1113      this.state = {
    12          sortBy: localStorage.getItem('sortBy') ? localStorage.getItem('sortBy') : 'mostPopular'
     14         sortBy: localStorage.getItem('sortBy') ? localStorage.getItem('sortBy') : 'mostPopular',
     15         openModal: false
    1316      }
    1417    }

  • phonelux-frontend/src/components/FiltersComponents/SpecificationsFilterComponent.css

    r436e0da r48f3030  
    1818.popover-specification-container{
    1919    overflow-y: scroll;
    20     height: 400px;
     20    height: fit-content;
     21    padding-bottom: 30px;
     22    max-height: 400px;
     23   
    2124}
    2225

  • phonelux-frontend/src/components/FiltersComponents/SpecificationsFilterComponent.js

    r436e0da r48f3030  
    88import FilterSelectComponent from './FilterSelectComponent';
    99import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
     10import PickSpecificationComponent from '../PickSpecificationComponent/PickSpecificationComponent';
     11import axios from 'axios';
     12import UserContext from '../../context/UserContext';
    1013export class SpecificationsFilterComponent extends Component {
    1114
    … …  
    1417   
    1518      this.state = {
    16         anchorEl: null
     19        anchorEl: null,
     20        openModal: false,
    1721      }
    1822    }
    … …  
    2933      })
    3034    };
     35
     36    handleModalClose = () =>{
     37      this.setState({
     38        openModal: false
     39      })
     40    }
     41
     42    handleModalOpen = () =>{
     43        this.setState({
     44            openModal: true
     45        })
     46    }
    3147
    3248  render() {
    … …  
    5369        <div className='popover-specification-container'>
    5470        <h2 className='popover-specification-container-header'>Филтер за спецификации</h2>
    55         <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='ram'></FilterSelectComponent>
    56         <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='rom'></FilterSelectComponent>
    57         <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='frontcamera'></FilterSelectComponent>
    58         <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='backcamera'></FilterSelectComponent>
    59         <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='chipset'></FilterSelectComponent>
    60         <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='cpu'></FilterSelectComponent>
    61         <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='operatingsystem'></FilterSelectComponent>
    62         <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='color'></FilterSelectComponent>
    63         <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='battery'></FilterSelectComponent>
     71        { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("РАМ меморија") ?
     72        <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='ram'></FilterSelectComponent> : <></>
     73        }
     74        { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("РОМ меморија") ?
     75        <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='rom'></FilterSelectComponent> : <></>
     76        }
     77        { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Предна камера") ?
     78        <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='frontcamera'></FilterSelectComponent> : <></>
     79        }
     80        { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Задна камера") ?
     81        <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='backcamera'></FilterSelectComponent> : <></>
     82        }
     83        { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Чипсет") ?
     84        <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='chipset'></FilterSelectComponent> : <></>
     85        }
     86         { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Процесор") ?
     87        <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='cpu'></FilterSelectComponent> : <></>
     88        }
     89        { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Оперативен систем") ?
     90        <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='operatingsystem'></FilterSelectComponent> : <></>
     91        }
     92        { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Боја") ?
     93        <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='color'></FilterSelectComponent> : <></>
     94        }
     95        { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Батерија") ?
     96        <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='battery'></FilterSelectComponent> : <></>
     97        }
    6498        </div>
    6599      </Popover>
     100      <Tippy className='tippy-pick-specifications-icon' placement='bottom' content='Изберете спецификации за приказ'>
     101        <FilterAltIcon onClick={this.handleModalOpen} style={{fontSize: '35px'}} className='pick-specifications-icon'></FilterAltIcon>
     102        </Tippy>
     103        { this.context.userId != '' && <PickSpecificationComponent
     104        openModal={this.state.openModal}
     105        handleClose={this.handleModalClose}/> }
    66106      </div>
    67107    )
    … …  
    69109}
    70110
     111SpecificationsFilterComponent.contextType = UserContext
     112
    71113export default SpecificationsFilterComponent
    72114

  • phonelux-frontend/src/components/HomepageComponent.js

    r436e0da r48f3030  
    220220  render() {
    221221    // console.log(this.context)
    222     // console.log(localStorage.getItem('token'))
     222    console.log(localStorage.getItem('token'))
    223223    // console.log(this.state)
    224224    return (

  • phonelux-frontend/src/components/PhoneOfferComponent/PhoneOfferComponent.js

    r436e0da r48f3030  
    121121          }
    122122      })()}
    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         } */}
    129123        {
    130124          window.location.href.split('/')[5] == 'favouriteoffers' ?   

  • phonelux-frontend/src/components/PhoneOfferDetailsComponent/PhoneOfferDetailsComponent.js

    r436e0da r48f3030  
    106106              this.state.offer.price == null ? '/' : this.state.offer.price+' ден.'}</td>
    107107            </tr>
     108            { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Предна камера") ?
    108109            <tr className='phone-offer-details-table-row'>
    109110              <td>Предна камера</td><td>{this.state.offer == null ||
    110111              this.state.offer.front_camera == null ? '/' : this.state.offer.front_camera}</td>
    111             </tr>
     112            </tr> : <></>
     113            }
    112114
     115             { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Задна камера") ?
    113116            <tr className='phone-offer-details-table-row'>
    114117              <td>Задна камера</td><td>{this.state.offer == null ||
    115118              this.state.offer.back_camera == null ? '/' : this.state.offer.back_camera}</td>
    116             </tr>
     119            </tr> : <></>
     120            }
    117121
     122            { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("РОМ меморија") ?
    118123            <tr className='phone-offer-details-table-row'>
    119124              <td>РОМ меморија</td><td>{this.state.offer == null ||
    120125              this.state.offer.rom_memory == null ? '/' : this.state.offer.rom_memory}</td>
    121             </tr>
     126            </tr> : <></>
     127            }
    122128
     129            { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("РАМ меморија") ?
    123130            <tr className='phone-offer-details-table-row'>
    124131              <td>РАМ меморија</td><td>{this.state.offer == null ||
    125132              this.state.offer.ram_memory == null ? '/' : this.state.offer.ram_memory}</td>
    126             </tr>
     133            </tr> : <></>
     134            }
    127135
     136            { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Оперативен систем") ?
    128137            <tr className='phone-offer-details-table-row'>
    129138              <td>Оперативен систем</td><td>{this.state.offer == null ||
    130139              this.state.offer.operating_system == null ? '/' : this.state.offer.operating_system}</td>
    131             </tr>
     140            </tr> : <></>
     141             }
    132142
     143            { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Чипсет") ?
    133144            <tr className='phone-offer-details-table-row'>
    134145              <td>Чипсет</td><td>{this.state.offer == null ||
    135146              this.state.offer.chipset == null ? '/' : this.state.offer.chipset}</td>
    136             </tr>
     147            </tr> : <></>
     148            }
    137149
     150            { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Процесор") ?
    138151            <tr className='phone-offer-details-table-row'>
    139152              <td>Процесор</td><td>{this.state.offer == null ||
    140153              this.state.offer.cpu == null ? '/' : this.state.offer.cpu}</td>
    141             </tr>
     154            </tr> : <></>
     155            }
    142156
     157            { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Батерија") ?
    143158            <tr className='phone-offer-details-table-row'>
    144159              <td>Батерија</td><td>{this.state.offer == null ||
    145160              this.state.offer.battery == null ? '/' : this.state.offer.battery}</td>
    146             </tr>
     161            </tr> : <></>
     162            }
    147163
     164            { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Боја") ?
    148165            <tr className='phone-offer-details-table-row'>
    149166              <td>Боја</td><td>{this.state.offer == null ||
    150167              this.state.offer.color == null ? '/' : this.state.offer.color}</td>
    151             </tr>
     168            </tr> : <></>
     169            }
    152170
    153171            <tr className='phone-offer-details-table-row'>

  • phonelux-frontend/src/components/PhonePageComponent.js

    r436e0da r48f3030  
    11import axios from 'axios'
    22import React, { Component } from 'react'
     3import UserContext from '../context/UserContext'
    34import HeaderComponent from './HeaderComponent/HeaderComponent'
    45import PhoneWithOffersComponent from './PhoneWithOffersComponent/PhoneWithOffersComponent'
    … …  
    3435  }
    3536}
    36 
    3737export default PhonePageComponent

  • phonelux-frontend/src/context/UserContext.js

    r436e0da r48f3030  
    2626                userId: id,
    2727                name: firstName,
    28                 role: userRole
     28                role: userRole,
    2929             })
    3030            }).catch(error => console.log(error))
    3131        }
    3232    }
    33    
    3433   
    3534  render() {
    … …  
    3938        userId,
    4039        name,
    41         role
     40        role,
    4241      }}>
    4342        {this.props.children}
Note: See TracChangeset for help on using the changeset viewer.