Ignore:
Timestamp:
09/21/22 18:47:39 (2 years ago)
Author:
Marko <Marko@…>
Branches:
master
Children:
34950c6
Parents:
5201690
Message:

Component for editing offers added

Location:
phonelux-frontend/src
Files:
4 added
27 edited

Legend:

Unmodified
Added
Removed

  • phonelux-frontend/src/App.js

    r5201690 rd66b8eb  
    1010import SuperAdminComponent from "./components/SuperAdminComponent/SuperAdminComponent";
    1111import EditOfferComponent from "./components/EditOfferComponent/EditOfferComponent";
     12import CompareOffersComponent from "./components/CompareOffersComponent/CompareOffersComponent";
     13import SpecificationsFilterComponent from "./components/FiltersComponents/SpecificationsFilterComponent";
    1214
    1315
    … …  
    2628        <Route path="/management/users" element={<SuperAdminComponent/>}/>
    2729        <Route path="/admin/editoffer/:offerId" element={<EditOfferComponent/>}/>
     30        <Route path="/compareoffers" element={<CompareOffersComponent/>}/>
    2831      </Routes>
    2932    </BrowserRouter>

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

    r5201690 rd66b8eb  
    99    height: 500px;
    1010    overflow: scroll;
     11    border: 1px solid black;
    1112}
    1213

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

    r5201690 rd66b8eb  
    6767    background-color: rgb(230, 232, 230);
    6868    font-size: 22px;
     69    text-align: center;
     70   
    6971}
     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  
     1import { CollectionsOutlined } from '@mui/icons-material'
    12import axios from 'axios'
    23import React, { Component } from 'react'
     4import UserContext from '../../context/UserContext'
    35import HeaderComponent from '../HeaderComponent/HeaderComponent'
    46import './EditOfferComponent.css'
    … …  
    1517
    1618    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
    1729        var config = {
    1830            method: 'get',
    … …  
    3244         
    3345    }
     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    }
    3497   
    3598  render() {
     99    console.log(this.state)
    36100    return (
    37101      <div className='edit-offer-component-main'>
    38102        <HeaderComponent/>
    39103        <div className='edit-offer-table-wrapper'>
     104
    40105            <table className='edit-offer-table'>
    41106                <thead>
    42                     <tr><th colSpan={2}>Измени детали за понудата</th></tr>
     107                    <tr><th colSpan={2}>Понуда</th></tr>
    43108                </thead>
     109
    44110                <tbody>
    45111                    <tr className='edit-offer-table-row'>
    46                         <td>Име на понуда</td>
     112                        <td><b>Име на понуда</b></td>
    47113                        <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>
    53121                        <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>
    58143                        <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>
    100226                    </tr>
    101227                </tbody>
    102228            </table>
    103 
    104229        </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>
    107233      </div>
    108234     
    … …  
    111237}
    112238
     239EditOfferComponent.contextType = UserContext
     240
    113241export default EditOfferComponent

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

    r5201690 rd66b8eb  
    1111 
    1212    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],
    1415      minValue: 0,
    1516      maxValue: 0
    … …  
    3940  handleChange = () => {
    4041    this.props.changeHandler({priceRange: this.state.value.join('-')})
     42    localStorage.setItem('priceRange',this.state.value.join('-'))
    4143  }
    4244

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

    r5201690 rd66b8eb  
    77
    88}
     9
     10.list-item-text-filters span{
     11    overflow-x: scroll;
     12}

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

    r5201690 rd66b8eb  
    1515    constructor(props) {
    1616      super(props)
    17        
     17        const {type} = this.props
     18        console.log(type)
    1819      this.state = {
    19          pickedItems: [],
     20         pickedItems: localStorage.getItem(type) ? localStorage.getItem(type).split(',') : [],
    2021         items: [],
    2122         type: '',
    … …  
    3738        }
    3839
    39 
    4040        let endpoint
    41         if(this.props.type == 'brands')
    42         {
    43           endpoint = '/brands'
     41        switch (this.props.type) {
     42
     43          case 'brands':
     44            endpoint = '/brands'
    4445          this.setState({
    4546            type: 'Брендови'
    4647          })
    47         }
    48         else{
    49           endpoint = '/shops'
     48            break;
     49          case 'shops':
     50            endpoint = '/shops'
    5051          this.setState({
    5152            type: 'Продавници'
    5253          })
     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;
    53123        }
    54124
    … …  
    63133            pickedItems: typeof value === 'string' ? value.split(',') : value
    64134        }, ()=>{
    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;
    68192          }
     193          // if(this.props.type == 'brands')
     194          // {
     195          //   this.props.changeHandler({brands: this.state.pickedItems.join(',')})
     196          // }
    69197         
    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          // }
    74202         
    75203        })
     204
     205
    76206      };
    77 
     207    // sx={{ m: 1, width: 250 }} kaj formcontrol
    78208
    79209  render() {
    80210    return (
    81211        <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}}>
    83213          <InputLabel className="input-select-label">{this.state.type}</InputLabel>
    84214          <Select
    … …  
    94224  >
    95225            {this.state.items.map((item) => (
    96               <MenuItem key={item} value={item}>
     226              <MenuItem key={item} value={item} >
    97227                <Checkbox checked={this.state.pickedItems.indexOf(item) > -1} />
    98                 <ListItemText primary={item} />
     228                <ListItemText className='list-item-text-filters' primary={item} />
    99229              </MenuItem>
    100230            ))}

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

    r5201690 rd66b8eb  
    6363 
    6464    this.state = {
    65        
     65
    6666    }
    6767  }

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

    r5201690 rd66b8eb  
    11.sortby-component-wrapper{
    22    display: flex;
    3     justify-content: end;
     3    justify-content: space-between;
    44    padding: 20px;
    55    background-color: #DEE4E1
    … …  
    1111    background-color: #e6f8ef;
    1212    margin-right: 15px;
     13    height: 50%;
     14    margin-left: auto;
    1315}
     16
     17
     18.popover-specification-container{
     19    height: 500px;
     20    overflow-y: scroll;
     21}

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

    r5201690 rd66b8eb  
    11import React, { Component } from 'react'
     2import { Link } from 'react-router-dom'
    23import './SortByComponent.css'
     4import SpecificationsFilterComponent from './SpecificationsFilterComponent'
    35
    46export class SortByComponent extends Component {
    … …  
    810   
    911      this.state = {
    10          sortBy: 'mostPopular'
     12         sortBy: localStorage.getItem('sortBy') ? localStorage.getItem('sortBy') : 'mostPopular'
    1113      }
    1214    }
    … …  
    1416    handleChange = (e) => {
    1517      this.props.changeHandler({sortBy: e.target.value})
     18      localStorage.setItem('sortBy',e.target.value)
    1619    }
    1720
    … …  
    1922    return (
    2023        <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'>
    2226          <option value="mostPopular">Најпопуларно</option>
    2327          <option value="ascending">Цена: Ниска {'>'} Висока</option>

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

    r5201690 rd66b8eb  
    2929
    3030          <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'/>
    3232          </Grid>
    3333
    3434          <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'/>
    3636          </Grid>
    3737

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

    r5201690 rd66b8eb  
    1616    priceRange: '',
    1717    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: ''
    1928  }
    2029}
    … …  
    5766    })
    5867  }
     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
     137componentDidMount(){
     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)
    59218}
    60219
    61220
    62221  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)
    65225    return (
    66226        <>

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

    r5201690 rd66b8eb  
    1010      this.state = {
    1111         
     12      }
     13    }
     14
     15    componentDidMount(){
     16      if(localStorage.getItem('token'))
     17      {
     18        window.location.href = "/"
    1219      }
    1320    }

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

    r5201690 rd66b8eb  
    3030}
    3131
     32.navbar-comparephone-icon:hover{
     33    cursor: pointer;
     34}
     35

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

    r5201690 rd66b8eb  
    1111import UserContext from '../../context/UserContext';
    1212import SupervisorAccountIcon from '@mui/icons-material/SupervisorAccount';
     13import PhoneIphoneIcon from '@mui/icons-material/PhoneIphone';
    1314
    1415export class NavbarComponent extends Component {
    … …  
    3536            <Link style={{color: 'black'}} to={"/management/users"}>
    3637              <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'/>
    3746            </Link>
    3847          </Tippy> : <></>

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

    r5201690 rd66b8eb  
    66import './PhoneCardGridComponent.css'
    77import phoneImage from '../../images/phone.png'
     8import SortByComponent from '../FiltersComponents/SortByComponent'
    89
    910export class PhoneCardGridComponent extends Component {
    … …  
    2021    }
    2122
     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
    2249  }
    2350
    … …  
    4673      {
    4774        filters += 'sortBy='+this.props.sortBy+'&'
    48       }
     75      }
     76
     77      // dodaj gi i filtrite za specifikacija
     78
     79      // izdvoj metod da ti pravi querystring
    4980
    5081      axios.get('/phones'+filters)
    … …  
    6293
    6394  componentDidMount() {
    64     axios.get('/phones')
     95    axios.get('/phones'+this.getQueryString())
    6596      .then(response => {
    6697        this.setState({

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

    r5201690 rd66b8eb  
    3535    cursor: pointer;
    3636}
     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  
    99import VisibilityIcon from '@mui/icons-material/Visibility';
    1010import CheckIcon from '@mui/icons-material/Check';
     11import CompareIcon from '@mui/icons-material/Compare';
     12import BookmarkRemoveIcon from '@mui/icons-material/BookmarkRemove';
    1113
    1214export class PhoneOfferComponent extends Component {
    … …  
    1618   
    1719      this.state = {
    18        
    1920      }
    2021    }
    … …  
    7273      });
    7374    }
     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    }
    7493   
    7594   
    … …  
    81100      <td>{this.props.price} ден.</td>
    82101      <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        } */}
    83129        {
    84130          window.location.href.split('/')[5] == 'favouriteoffers' ?   
    … …  
    98144          localStorage.getItem('token') && this.props.loggedUserFavouriteOffers.filter(offer => offer.id == this.props.id).length != 0?
    99145          <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' }}/>
    101147          </Tippy>
    102148          : <></>
    … …  
    105151
    106152        <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>
    108154        </Link>
    109155        </td>

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

    r5201690 rd66b8eb  
    5656.phone-offer-details-last-updated-header{
    5757    width: 25%;
    58     margin-left: 20px;
     58    margin-left: 5%;
    5959    padding: 10px;
    6060    border: 1px solid rgb(199, 193, 193);
    61     background-color: #B6E2C8;
     61    background-color: #dadedc;
    6262    border-radius: 50px;
    6363    text-align: center;
    … …  
    7373.phone-offer-details-edit-header{
    7474    width: 100%;
    75     margin-left: 20px;
     75    margin-left: 5%;
    7676    padding-top: 10px;
    7777    border: 1px solid black;
    … …  
    9696}
    9797
     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}
    98111
     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  
    44import HeaderComponent from '../HeaderComponent/HeaderComponent'
    55import UserContext from '../../context/UserContext'
     6import CheckIcon from '@mui/icons-material/Check';
    67import { Link } from 'react-router-dom'
     8import Tippy from '@tippyjs/react'
    79
    810
    … …  
    1921
    2022    componentDidMount(){
    21         axios.get('/phoneoffer/'+this.state.offerId)
     23        this.getPhoneOffer()
     24    }
     25
     26    getPhoneOffer = () => {
     27      axios.get('/phoneoffer/'+this.state.offerId)
    2228        .then(response => {
    2329            this.setState({
    … …  
    2733    }
    2834
     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
    2953  render() {
     54    console.log(this.state)
    3055    return (
    3156      <div className='phone-offer-details-main'>
    … …  
    4065              </Link> : <></>
    4166          }
     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          })()}
    4284        </div>
     85        <div className='phone-offer-details-last-updated-wrapper'></div>
    4386        <div className='phone-offer-details-table-wrapper'>
    4487        <div className='phone-offer-details-table-section'>

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

    r5201690 rd66b8eb  
    1818        axios.get('/phones/'+this.state.phoneId)
    1919        .then(response => {
     20          console.log(response.data)
    2021            this.setState({
    2122                phone: response.data

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

    r5201690 rd66b8eb  
    7070}
    7171
    72 

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

    r5201690 rd66b8eb  
    2222      axios.get('/phones/offers/'+this.props.phoneId)
    2323      .then(response => {
     24        console.log(response.data)
    2425          this.setState({
    2526              phone_offers: response.data

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

    r5201690 rd66b8eb  
    44
    55export 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
    623  render() {
    724    return (

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

    r5201690 rd66b8eb  
    88import SearchIcon from '@mui/icons-material/Search';
    99import InputBase from '@mui/material/InputBase';
     10import UserContext from '../../context/UserContext';
    1011
    1112
    … …  
    6869
    6970    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      // }
    7080      this.getUsers()
    7181    }
    … …  
    199209}
    200210
     211SuperAdminComponent.contextType = UserContext
     212
    201213export default SuperAdminComponent

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

    r5201690 rd66b8eb  
    77import PhoneOfferComponent from '../PhoneOfferComponent/PhoneOfferComponent'
    88import CheaperOffersComponent from '../CheaperOffersComponent/CheaperOffersComponent'
     9import { wait } from '@testing-library/user-event/dist/utils'
    910
    1011export class UserFavouriteOffersComponent extends Component {
    … …  
    2122
    2223    componentDidMount(){
     24      if(!localStorage.getItem('token')){
     25        window.location.href = "/"
     26      }
     27
    2328      this.getFavouriteOffersForLoggedUser()
    2429    }
    … …  
    2732      var config = {
    2833        method: 'get',
    29         url: '/user/'+this.context.userId+'/favouriteoffers',
     34        url: '/user/'+window.location.href.split('/')[4]+'/favouriteoffers',
    3035        headers: {
    3136          'Authorization': 'Bearer '+localStorage.getItem('token')
    … …  
    5964   
    6065  render() {
    61  
     66  // console.log(this.context)
    6267
    6368    return (
    … …  
    7176          <StarIcon style={{fontSize: '50px', marginTop: '20px', marginLeft: '10px'}}/>
    7277          </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         
    93108          <CheaperOffersComponent
    94109           cheaperOffers={this.state.cheaperOffers}

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

    r5201690 rd66b8eb  
    1212         userId: '',
    1313         name: '',
    14          role: '',
    15          userFavouriteOffers: []
     14         role: ''
    1615      }
    1716    }
    … …  
    2827                name: firstName,
    2928                role: userRole
    30              }, this.updateUserFavouriteOffers)
     29             })
    3130            }).catch(error => console.log(error))
    3231        }
    3332    }
    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   
    5634   
    5735  render() {
    58     const {userId,name,role, userFavouriteOffers} = this.state
    59     // const {updateUserFavouriteOffers} = this
     36    const {userId,name,role} = this.state
    6037    return (
    6138      <UserContext.Provider value={{
    6239        userId,
    6340        name,
    64         role,
    65         // userFavouriteOffers,
    66         // updateUserFavouriteOffers
     41        role
    6742      }}>
    6843        {this.props.children}
Note: See TracChangeset for help on using the changeset viewer.