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
Files:
9 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>

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

    r895cd87 rfd5b100  
    66    padding: 5px;
    77    margin-right: auto;
    8     margin-left: 10px;
    98    height: fit-content;
    109    margin-top: 0px;
    1110    padding-top: 5px;
    12     width: 100%;
     11    width: 50%;
    1312    text-align: center;
    1413    display: flex;
    1514    justify-content: center;
     15    word-break:break-all;
    1616}
    1717
    … …  
    3636}
    3737
     38.specifications-filter-icon-header{
     39   margin-top: -3px;
     40}
     41
    3842.specifications-filter-popover{
    3943    text-align: center;
    4044}
     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  
    1111import axios from 'axios';
    1212import UserContext from '../../context/UserContext';
     13import SettingsIcon from '@mui/icons-material/Settings';
    1314export class SpecificationsFilterComponent extends Component {
    1415
    … …  
    5354    return (
    5455      <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'/>Филтер за спецификации
    5658        <ArrowDropDownIcon style={{marginTop:'-2px'}}/>
    5759        </h4>
    … …  
    98100        </div>
    99101      </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>
    103105        { this.context.userId != '' && <PickSpecificationComponent
    104106        openModal={this.state.openModal}

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

    r895cd87 rfd5b100  
    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/NavbarComponent/NavbarComponent.js

    r895cd87 rfd5b100  
    1111import UserContext from '../../context/UserContext';
    1212import SupervisorAccountIcon from '@mui/icons-material/SupervisorAccount';
    13 import PhoneIphoneIcon from '@mui/icons-material/PhoneIphone';
     13import CompareIcon from '@mui/icons-material/Compare';
    1414
    1515export class NavbarComponent extends Component {
    … …  
    4343          <Tippy placement='bottom' content='Споредба на мобилни телефони'>
    4444            <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'/>
    4646            </Link>
    4747          </Tippy> : <></>

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

    r895cd87 rfd5b100  
    4343        filters += 'sortBy='+localStorage.getItem('sortBy')+'&'
    4444      }
    45 
    46       // dodaj filtri za specifikacija i sredi go sortBy
    4745
    4846      return filters

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

    r895cd87 rfd5b100  
    131131}
    132132
     133.offerdetails-show-all-specs-icon:hover{
     134    cursor: pointer;
     135}
    133136
     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  
    77import { Link } from 'react-router-dom'
    88import Tippy from '@tippyjs/react'
     9import VisibilityIcon from '@mui/icons-material/Visibility';
     10import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
    911
    1012
    … …  
    1618      this.state = {
    1719        offerId: window.location.href.split('/')[4],
    18         offer: null
     20        offer: null,
     21        showAllSpecs: false
    1922      }
    2023    }
    … …  
    5154    }
    5255
     56
     57    changeShownSpecs = () => {
     58      this.setState({
     59          showAllSpecs: !this.state.showAllSpecs
     60      })
     61  }
     62
    5363  render() {
    5464    console.log(this.state)
    … …  
    5969          <h3 className='phone-offer-details-last-updated-header'>Последно ажурирана: {this.state.offer == null ||
    6070          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
    6182          {
    6283            localStorage.getItem('token') && (this.context.role == 'ADMIN' || this.context.role == 'SUPERADMIN') ?
    … …  
    106127              this.state.offer.price == null ? '/' : this.state.offer.price+' ден.'}</td>
    107128            </tr>
    108             { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Предна камера") ?
     129            { this.state.showAllSpecs ||
     130            !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Предна камера") ?
    109131            <tr className='phone-offer-details-table-row'>
    110132              <td>Предна камера</td><td>{this.state.offer == null ||
    … …  
    113135            }
    114136
    115              { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Задна камера") ?
     137             { this.state.showAllSpecs ||
     138             !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Задна камера") ?
    116139            <tr className='phone-offer-details-table-row'>
    117140              <td>Задна камера</td><td>{this.state.offer == null ||
    … …  
    120143            }
    121144
    122             { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("РОМ меморија") ?
     145            { this.state.showAllSpecs ||
     146            !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("РОМ меморија") ?
    123147            <tr className='phone-offer-details-table-row'>
    124148              <td>РОМ меморија</td><td>{this.state.offer == null ||
    … …  
    127151            }
    128152
    129             { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("РАМ меморија") ?
     153            { this.state.showAllSpecs ||
     154            !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("РАМ меморија") ?
    130155            <tr className='phone-offer-details-table-row'>
    131156              <td>РАМ меморија</td><td>{this.state.offer == null ||
    … …  
    134159            }
    135160
    136             { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Оперативен систем") ?
     161            { this.state.showAllSpecs ||
     162            !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Оперативен систем") ?
    137163            <tr className='phone-offer-details-table-row'>
    138164              <td>Оперативен систем</td><td>{this.state.offer == null ||
    … …  
    141167             }
    142168
    143             { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Чипсет") ?
     169            { this.state.showAllSpecs ||
     170            !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Чипсет") ?
    144171            <tr className='phone-offer-details-table-row'>
    145172              <td>Чипсет</td><td>{this.state.offer == null ||
    … …  
    148175            }
    149176
    150             { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Процесор") ?
     177            { this.state.showAllSpecs ||
     178            !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Процесор") ?
    151179            <tr className='phone-offer-details-table-row'>
    152180              <td>Процесор</td><td>{this.state.offer == null ||
    … …  
    155183            }
    156184
    157             { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Батерија") ?
     185            { this.state.showAllSpecs ||
     186            !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Батерија") ?
    158187            <tr className='phone-offer-details-table-row'>
    159188              <td>Батерија</td><td>{this.state.offer == null ||
    … …  
    162191            }
    163192
    164             { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Боја") ?
     193            { this.state.showAllSpecs ||
     194            !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Боја") ?
    165195            <tr className='phone-offer-details-table-row'>
    166196              <td>Боја</td><td>{this.state.offer == null ||
Note: See TracChangeset for help on using the changeset viewer.