Changeset fd5b100 for phonelux-frontend/src
- Timestamp:
- 10/01/22 22:56:40 (2 years ago)
- Branches:
- master
- Children:
- ffd50db
- Parents:
- 895cd87
- Location:
- phonelux-frontend/src/components
- Files:
-
- 9 edited
Legend:
- Unmodified
- Added
- Removed
-
phonelux-frontend/src/components/CompareOffersComponent/CompareOffersComponent.css
r895cd87 rfd5b100 71 71 } 72 72 73 .show-all-specs-icon:hover{ 74 cursor: pointer; 75 } 76 -
phonelux-frontend/src/components/CompareOffersComponent/CompareOffersComponent.js
r895cd87 rfd5b100 6 6 import axios from 'axios'; 7 7 import Tippy from '@tippyjs/react'; 8 import VisibilityIcon from '@mui/icons-material/Visibility'; 9 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'; 8 10 9 11 export class CompareOffersComponent extends Component { … … 13 15 14 16 this.state = { 15 offersToCompare: [] 17 offersToCompare: [], 18 showAllSpecs : false 16 19 } 17 20 } … … 48 51 } 49 52 53 changeShownSpecs = () => { 54 this.setState({ 55 showAllSpecs: !this.state.showAllSpecs 56 }) 57 } 58 50 59 51 60 render() { 52 console.log(this.state)53 61 return ( 54 62 <div className='compare-offers-main'> … … 65 73 <tbody> 66 74 <tr className='compare-offers-table-row'> 67 <th className='compare-offer-table-headers'></th> 75 <th className='compare-offer-table-headers'> 76 { 77 this.state.showAllSpecs ? 78 <Tippy placement='bottom' content='Прикажи ги избраните спецификации'> 79 <VisibilityOffIcon className='show-all-specs-icon' onClick={this.changeShownSpecs} style={{fontSize: '45px'}}/> 80 </Tippy> : 81 <Tippy placement='bottom' content='Прикажи ги сите спецификации'> 82 <VisibilityIcon className='show-all-specs-icon' onClick={this.changeShownSpecs} style={{fontSize: '45px'}}/> 83 </Tippy> 84 } 85 </th> 68 86 { 69 87 this.state.offersToCompare.map((offer,idx) => … … 93 111 } 94 112 </tr> 95 { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("РАМ меморија") ? 113 { this.state.showAllSpecs || 114 !localStorage.getItem('pickedSpecifications') || 115 localStorage.getItem('pickedSpecifications').includes("РАМ меморија") ? 96 116 <tr className='compare-offers-table-row'> 97 117 <th className='compare-offer-table-headers'>РАМ меморија</th> … … 102 122 </tr> : <></> 103 123 } 104 { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("РОМ меморија") ? 124 { this.state.showAllSpecs || 125 !localStorage.getItem('pickedSpecifications') || 126 localStorage.getItem('pickedSpecifications').includes("РОМ меморија") ? 105 127 <tr className='compare-offers-table-row'> 106 128 <th className='compare-offer-table-headers'>РОМ меморија</th> … … 111 133 </tr> : <></> 112 134 } 113 { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Предна камера") ? 135 { this.state.showAllSpecs || 136 !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Предна камера") ? 114 137 <tr className='compare-offers-table-row'> 115 138 <th className='compare-offer-table-headers'>Предна камера</th> … … 120 143 </tr> : <></> 121 144 } 122 { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Задна камера") ? 145 { this.state.showAllSpecs || 146 !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Задна камера") ? 123 147 <tr className='compare-offers-table-row'> 124 148 <th className='compare-offer-table-headers'>Задна камера</th> … … 129 153 </tr> : <></> 130 154 } 131 { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Процесор") ? 155 { this.state.showAllSpecs || 156 !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Процесор") ? 132 157 <tr className='compare-offers-table-row'> 133 158 <th className='compare-offer-table-headers'>Процесор</th> … … 138 163 </tr> : <></> 139 164 } 140 { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Чипсет") ? 165 { this.state.showAllSpecs || 166 !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Чипсет") ? 141 167 <tr className='compare-offers-table-row'> 142 168 <th className='compare-offer-table-headers'>Чипсет</th> … … 147 173 </tr> : <></> 148 174 } 149 { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Оперативен систем") ? 175 { this.state.showAllSpecs || 176 !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Оперативен систем") ? 150 177 <tr className='compare-offers-table-row'> 151 178 <th className='compare-offer-table-headers'>Оперативен систем</th> … … 156 183 </tr> : <></> 157 184 } 158 { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Батерија") ? 185 { this.state.showAllSpecs || 186 !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Батерија") ? 159 187 <tr className='compare-offers-table-row'> 160 188 <th className='compare-offer-table-headers'>Батерија</th> … … 165 193 </tr> : <></> 166 194 } 167 { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Боја") ? 195 { this.state.showAllSpecs || 196 !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Боја") ? 168 197 <tr className='compare-offers-table-row'> 169 198 <th className='compare-offer-table-headers'>Боја</th> -
phonelux-frontend/src/components/FiltersComponents/SpecificationsFilterComponent.css
r895cd87 rfd5b100 6 6 padding: 5px; 7 7 margin-right: auto; 8 margin-left: 10px;9 8 height: fit-content; 10 9 margin-top: 0px; 11 10 padding-top: 5px; 12 width: 100%;11 width: 50%; 13 12 text-align: center; 14 13 display: flex; 15 14 justify-content: center; 15 word-break:break-all; 16 16 } 17 17 … … 36 36 } 37 37 38 .specifications-filter-icon-header{ 39 margin-top: -3px; 40 } 41 38 42 .specifications-filter-popover{ 39 43 text-align: center; 40 44 } 45 46 47 .pick-specifications-header{ 48 background-color: #B6E2C8; 49 border: 1px solid black; 50 width: fit-content; 51 border-radius: 20px; 52 padding: 5px; 53 margin-right: auto; 54 margin-left: 10px; 55 height: fit-content; 56 margin-top: 0px; 57 padding-top: 5px; 58 width: 50%; 59 text-align: center; 60 display: flex; 61 justify-content: center; 62 word-break:break-all; 63 } 64 65 .pick-specifications-header:hover{ 66 cursor: pointer; 67 background-color: rgb(166, 201, 171); 68 box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); 69 transition: box-shadow 0.5s, background-color 0.5s ; 70 } 71 72 73 .specifications-filter-main{ 74 width: 45%; 75 } -
phonelux-frontend/src/components/FiltersComponents/SpecificationsFilterComponent.js
r895cd87 rfd5b100 11 11 import axios from 'axios'; 12 12 import UserContext from '../../context/UserContext'; 13 import SettingsIcon from '@mui/icons-material/Settings'; 13 14 export class SpecificationsFilterComponent extends Component { 14 15 … … 53 54 return ( 54 55 <div className='specifications-filter-main'> 55 <h4 aria-describedby={id} className='specifications-filter-header' onClick={this.handleClick}>Спецификации 56 <h4 aria-describedby={id} className='specifications-filter-header' onClick={this.handleClick}> 57 <FilterAltIcon className='specifications-filter-icon-header'/>Филтер за спецификации 56 58 <ArrowDropDownIcon style={{marginTop:'-2px'}}/> 57 59 </h4> … … 98 100 </div> 99 101 </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>102 <h4 aria-describedby={id} className='pick-specifications-header' onClick={this.handleModalOpen}> 103 <SettingsIcon className='specifications-filter-icon-header'/>Спецификации за приказ 104 </h4> 103 105 { this.context.userId != '' && <PickSpecificationComponent 104 106 openModal={this.state.openModal} -
phonelux-frontend/src/components/HomepageComponent.js
r895cd87 rfd5b100 220 220 render() { 221 221 // console.log(this.context) 222 console.log(localStorage.getItem('token'))222 // console.log(localStorage.getItem('token')) 223 223 // console.log(this.state) 224 224 return ( -
phonelux-frontend/src/components/NavbarComponent/NavbarComponent.js
r895cd87 rfd5b100 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 import CompareIcon from '@mui/icons-material/Compare'; 14 14 15 15 export class NavbarComponent extends Component { … … 43 43 <Tippy placement='bottom' content='Споредба на мобилни телефони'> 44 44 <Link style={{color: 'black'}} to={"/compareoffers"}> 45 < PhoneIphoneIcon style={{fontSize: '40px', marginTop: '10px', marginRight: '10px' }} className='navbar-comparephone-icon'/>45 <CompareIcon style={{fontSize: '40px', marginTop: '10px', marginRight: '10px' }} className='navbar-comparephone-icon'/> 46 46 </Link> 47 47 </Tippy> : <></> -
phonelux-frontend/src/components/PhoneCardGridComponent/PhoneCardGridComponent.js
r895cd87 rfd5b100 43 43 filters += 'sortBy='+localStorage.getItem('sortBy')+'&' 44 44 } 45 46 // dodaj filtri za specifikacija i sredi go sortBy47 45 48 46 return filters -
phonelux-frontend/src/components/PhoneOfferDetailsComponent/PhoneOfferDetailsComponent.css
r895cd87 rfd5b100 131 131 } 132 132 133 .offerdetails-show-all-specs-icon:hover{ 134 cursor: pointer; 135 } 133 136 137 .offerdetails-show-all-specs-icon{ 138 margin-left: 10px; 139 margin-right: 10px; 140 } 141 142 143 -
phonelux-frontend/src/components/PhoneOfferDetailsComponent/PhoneOfferDetailsComponent.js
r895cd87 rfd5b100 7 7 import { Link } from 'react-router-dom' 8 8 import Tippy from '@tippyjs/react' 9 import VisibilityIcon from '@mui/icons-material/Visibility'; 10 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'; 9 11 10 12 … … 16 18 this.state = { 17 19 offerId: window.location.href.split('/')[4], 18 offer: null 20 offer: null, 21 showAllSpecs: false 19 22 } 20 23 } … … 51 54 } 52 55 56 57 changeShownSpecs = () => { 58 this.setState({ 59 showAllSpecs: !this.state.showAllSpecs 60 }) 61 } 62 53 63 render() { 54 64 console.log(this.state) … … 59 69 <h3 className='phone-offer-details-last-updated-header'>Последно ажурирана: {this.state.offer == null || 60 70 this.state.offer.last_updated == null ? '#' : this.state.offer.last_updated.split('T')[0]}</h3> 71 { 72 localStorage.getItem('token') ? 73 this.state.showAllSpecs ? 74 <Tippy placement='bottom' content='Прикажи ги избраните спецификации'> 75 <VisibilityOffIcon className='offerdetails-show-all-specs-icon' onClick={this.changeShownSpecs} style={{fontSize: '45px'}}/> 76 </Tippy> : 77 <Tippy placement='bottom' content='Прикажи ги сите спецификации'> 78 <VisibilityIcon className='offerdetails-show-all-specs-icon' onClick={this.changeShownSpecs} style={{fontSize: '45px'}}/> 79 </Tippy> : <></> 80 } 81 61 82 { 62 83 localStorage.getItem('token') && (this.context.role == 'ADMIN' || this.context.role == 'SUPERADMIN') ? … … 106 127 this.state.offer.price == null ? '/' : this.state.offer.price+' ден.'}</td> 107 128 </tr> 108 { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Предна камера") ? 129 { this.state.showAllSpecs || 130 !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Предна камера") ? 109 131 <tr className='phone-offer-details-table-row'> 110 132 <td>Предна камера</td><td>{this.state.offer == null || … … 113 135 } 114 136 115 { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Задна камера") ? 137 { this.state.showAllSpecs || 138 !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Задна камера") ? 116 139 <tr className='phone-offer-details-table-row'> 117 140 <td>Задна камера</td><td>{this.state.offer == null || … … 120 143 } 121 144 122 { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("РОМ меморија") ? 145 { this.state.showAllSpecs || 146 !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("РОМ меморија") ? 123 147 <tr className='phone-offer-details-table-row'> 124 148 <td>РОМ меморија</td><td>{this.state.offer == null || … … 127 151 } 128 152 129 { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("РАМ меморија") ? 153 { this.state.showAllSpecs || 154 !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("РАМ меморија") ? 130 155 <tr className='phone-offer-details-table-row'> 131 156 <td>РАМ меморија</td><td>{this.state.offer == null || … … 134 159 } 135 160 136 { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Оперативен систем") ? 161 { this.state.showAllSpecs || 162 !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Оперативен систем") ? 137 163 <tr className='phone-offer-details-table-row'> 138 164 <td>Оперативен систем</td><td>{this.state.offer == null || … … 141 167 } 142 168 143 { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Чипсет") ? 169 { this.state.showAllSpecs || 170 !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Чипсет") ? 144 171 <tr className='phone-offer-details-table-row'> 145 172 <td>Чипсет</td><td>{this.state.offer == null || … … 148 175 } 149 176 150 { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Процесор") ? 177 { this.state.showAllSpecs || 178 !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Процесор") ? 151 179 <tr className='phone-offer-details-table-row'> 152 180 <td>Процесор</td><td>{this.state.offer == null || … … 155 183 } 156 184 157 { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Батерија") ? 185 { this.state.showAllSpecs || 186 !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Батерија") ? 158 187 <tr className='phone-offer-details-table-row'> 159 188 <td>Батерија</td><td>{this.state.offer == null || … … 162 191 } 163 192 164 { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Боја") ? 193 { this.state.showAllSpecs || 194 !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Боја") ? 165 195 <tr className='phone-offer-details-table-row'> 166 196 <td>Боја</td><td>{this.state.offer == null ||
Note:
See TracChangeset
for help on using the changeset viewer.