Ignore:
Timestamp:
10/01/22 22:56:40 (2 years ago)
Author:
Marko <Marko@…>
Branches:
master
Children:
ffd50db
Parents:
895cd87
Message:

Edited filter components

Location:
phonelux-frontend/src/components/CompareOffersComponent
Files:
2 edited

Legend:

Unmodified
Added
Removed

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

    r895cd87 rfd5b100  
    7171}
    7272
     73.show-all-specs-icon:hover{
     74    cursor: pointer;
     75}
     76

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

    r895cd87 rfd5b100  
    66import axios from 'axios';
    77import Tippy from '@tippyjs/react';
     8import VisibilityIcon from '@mui/icons-material/Visibility';
     9import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
    810
    911export class CompareOffersComponent extends Component {
    … …  
    1315   
    1416      this.state = {
    15          offersToCompare: []
     17         offersToCompare: [],
     18         showAllSpecs : false
    1619      }
    1720    }
    … …  
    4851    }
    4952
     53    changeShownSpecs = () => {
     54        this.setState({
     55            showAllSpecs: !this.state.showAllSpecs
     56        })
     57    }
     58
    5059   
    5160  render() {
    52     console.log(this.state)
    5361    return (
    5462      <div className='compare-offers-main'>
    … …  
    6573                <tbody>
    6674                    <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>
    6886                        {
    6987                            this.state.offersToCompare.map((offer,idx) =>
    … …  
    93111                        }
    94112                    </tr>
    95                     { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("РАМ меморија") ?
     113                    { this.state.showAllSpecs ||
     114                    !localStorage.getItem('pickedSpecifications') ||
     115                    localStorage.getItem('pickedSpecifications').includes("РАМ меморија") ?
    96116                    <tr className='compare-offers-table-row'>
    97117                        <th className='compare-offer-table-headers'>РАМ меморија</th>
    … …  
    102122                    </tr> : <></>
    103123                    }
    104                      { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("РОМ меморија") ?
     124                     { this.state.showAllSpecs ||
     125                     !localStorage.getItem('pickedSpecifications') ||
     126                     localStorage.getItem('pickedSpecifications').includes("РОМ меморија") ?
    105127                    <tr className='compare-offers-table-row'>
    106128                        <th className='compare-offer-table-headers'>РОМ меморија</th>
    … …  
    111133                    </tr> : <></>
    112134                    }
    113                      { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Предна камера") ?
     135                     { this.state.showAllSpecs ||
     136                     !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Предна камера") ?
    114137                    <tr className='compare-offers-table-row'>
    115138                        <th className='compare-offer-table-headers'>Предна камера</th>
    … …  
    120143                    </tr> : <></>
    121144                    }
    122                      { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Задна камера") ?
     145                     { this.state.showAllSpecs ||
     146                     !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Задна камера") ?
    123147                    <tr className='compare-offers-table-row'>
    124148                        <th className='compare-offer-table-headers'>Задна камера</th>
    … …  
    129153                    </tr> : <></>
    130154                    }
    131                      { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Процесор") ?
     155                     { this.state.showAllSpecs ||
     156                     !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Процесор") ?
    132157                    <tr className='compare-offers-table-row'>
    133158                        <th className='compare-offer-table-headers'>Процесор</th>
    … …  
    138163                    </tr> : <></>
    139164                    }
    140                      { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Чипсет") ?
     165                     { this.state.showAllSpecs ||
     166                     !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Чипсет") ?
    141167                    <tr className='compare-offers-table-row'>
    142168                        <th className='compare-offer-table-headers'>Чипсет</th>
    … …  
    147173                    </tr> : <></>
    148174                    }
    149                      { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Оперативен систем") ?
     175                     { this.state.showAllSpecs ||
     176                     !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Оперативен систем") ?
    150177                    <tr className='compare-offers-table-row'>
    151178                        <th className='compare-offer-table-headers'>Оперативен систем</th>
    … …  
    156183                    </tr> : <></>
    157184                    }
    158                      { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Батерија") ?
     185                     { this.state.showAllSpecs ||
     186                     !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Батерија") ?
    159187                    <tr className='compare-offers-table-row'>
    160188                        <th className='compare-offer-table-headers'>Батерија</th>
    … …  
    165193                    </tr> : <></>
    166194                    }
    167                      { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Боја") ?
     195                     { this.state.showAllSpecs ||
     196                     !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Боја") ?
    168197                    <tr className='compare-offers-table-row'>
    169198                        <th className='compare-offer-table-headers'>Боја</th>
Note: See TracChangeset for help on using the changeset viewer.