Ignore:
Timestamp:
09/11/22 18:03:58 (2 years ago)
Author:
Marko <Marko@…>
Branches:
master
Children:
775e15e
Parents:
527b93f
Message:

Prototype version

Location:
phonelux-frontend/src/components
Files:
5 added
2 deleted
18 edited

Legend:

Unmodified
Added
Removed

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

    r527b93f re5b84dc  
    1818
    1919  componentDidMount(){
    20 
    2120
    2221  axios.get('/lowestPrice')

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

    r527b93f re5b84dc  
    1010    width: 15%;
    1111    background-color: #e6f8ef;
     12    margin-right: 15px;
    1213}

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

    r527b93f re5b84dc  
    2121  }
    2222 
    23 
    24   componentDidMount(){
    25  
    26   }
    2723
    2824  render() {

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

    r527b93f re5b84dc  
    88    width: 310px;
    99    height: 200px;
     10    margin-top: -65px;
    1011}
     12
     13.homepage-navbar-component{
     14    width: 100%;
     15    display: flex;
     16    justify-content: end;
     17    background-color: #B6E2C8;
     18}

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

    r527b93f re5b84dc  
    22import { Link } from 'react-router-dom'
    33import logo from '../../images/logo_phonelux.png'
     4import NavbarComponent from '../NavbarComponent/NavbarComponent'
    45import './HeaderComponent.css'
    56
    … …  
    78  render() {
    89    return (
     10      <>
     11      <div className='homepage-navbar-component'>
     12        <NavbarComponent/>
     13      </div>
    914      <div className='header-component'>
    1015          <Link style={{ textDecoration: 'none' }} to={"/"}>
    … …  
    1217        </Link>
    1318      </div>
     19      </>
    1420    )
    1521  }

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

    r527b93f re5b84dc  
    33import HeaderComponent from './HeaderComponent/HeaderComponent'
    44import PhoneCardGridComponent from './PhoneCardGridComponent/PhoneCardGridComponent'
     5
    56
    67export class HomepageComponent extends Component {
    … …  
    1011
    1112  this.state = {
    12     shops: null,
    13     brands: null,
    14     priceRange: null,
    15     searchValue: null,
    16     sortBy: null
     13    shops: '',
     14    brands: '',
     15    priceRange: '',
     16    searchValue: '',
     17    sortBy: 'mostPopular'
    1718  }
    1819}
    … …  
    4647      searchValue: e.searchValue
    4748    })
     49
    4850  }
    4951
    … …  
    5658}
    5759
     60
    5861  render() {
    5962    return (
    … …  
    6164        <HeaderComponent/>
    6265        <GroupedFiltersComponent passFilters={this.changeFilters}/>
    63         <PhoneCardGridComponent/>
     66        <PhoneCardGridComponent {...this.state}/>
    6467        </>
    6568    )

  • phonelux-frontend/src/components/LoginRegisterComponents/LoginFormComponent.css

    r527b93f re5b84dc  
    1616  width: fit-content;
    1717  box-shadow: 11px 12px 13px 12px rgb(207, 207, 207);
    18   padding-top: 30px;
     18  padding-top: 20px;
    1919  border-radius: 60px;
    2020  background-color: white;
    … …  
    2323}
    2424.loginform-imgs-div {
    25     padding-top: 20px;
     25    padding-top: 10px;
    2626    justify-content: center;
    2727    display: flex;
    … …  
    4343
    4444.loginform-sub-main-div > div{
    45   margin-bottom: 50px;
     45  margin-bottom: 30px;
    4646  margin-left: 80px;
    4747  margin-right: 80px;
    … …  
    137137    color: blue;
    138138}
    139  .register-link > a{
    140      color: rgb(53, 99, 70);
    141      text-decoration: none;
     139
     140
     141
     142 .registerform-link{
     143  color: rgb(53, 99, 70);
     144  text-decoration: none;
    142145 }
    143146
    144  .register-link > a:hover{
    145   color: blue;
     147 .registerform-link:hover{
     148   color: blue;
    146149 }
     150
     151 .loginform-message-wrapper{
     152  display: flex;
     153  justify-content: center;
     154 }
     155
     156 .loginform-error-message{
     157  color: red;
     158  border: 1px solid red;
     159  width: fit-content;
     160  padding: 10px;
     161  border-radius: 50px;
     162  background-color: rgb(251, 224, 224);
     163 }

  • phonelux-frontend/src/components/LoginRegisterComponents/LoginFormComponent.js

    r527b93f re5b84dc  
    1717      email: '',
    1818      password: '',
     19      serverResponse: ''
    1920    }
    2021  }
    … …  
    4243
    4344      axios(config)
    44       .then(function (response) {
    45         console.log(response.data);
     45      .then((response) => {
     46       // store access token in local storage, redirect to homepage
     47       console.log(response.data)
    4648      })
    47       .catch(function (error) {
    48         console.log(error);
     49      .catch((error) => {
     50        this.setState({
     51          serverResponse: 'error'
     52        })
    4953      });
    5054
    … …  
    6771       <div className="loginform-sub-main-div">
    6872         <div>
    69 
     73          {this.state.serverResponse == 'error' ? <div className='loginform-message-wrapper'>
     74                          <h5 className='loginform-error-message'>Невалидна е-маил адреса или лозинка!</h5></div> : <></>}
    7075           <div className="loginform-imgs-div">
    7176             <div className="loginform-image-container">
    … …  
    9398            </div> 
    9499           </form>
    95            <p className='register-link'><Link to={"/register"}><a>Регистрирај се</a></Link></p>
     100           <p className='register-link'><Link className='registerform-link' to={"/register"}>Регистрирај се</Link></p>
    96101 
    97102         </div>

  • phonelux-frontend/src/components/LoginRegisterComponents/RegisterFormComponent.css

    r527b93f re5b84dc  
    2323  }
    2424  .registerform-imgs-div {
    25       padding-top: 20px;
     25      padding-top: 5px;
    2626      justify-content: center;
    2727      display: flex;
    … …  
    158158  }
    159159
     160  .registerform-message-wrapper{
     161    display: flex;
     162    justify-content: center;
     163  }
     164
     165  .registerform-error-message{
     166    color: red;
     167    border: 1px solid red;
     168    width: fit-content;
     169    padding: 10px;
     170    border-radius: 50px;
     171    background-color: rgb(251, 224, 224);
     172  }
     173
     174  .registerform-success-message{
     175    color: green;
     176    border: 1px solid green;
     177    width: fit-content;
     178    padding: 10px;
     179    border-radius: 50px;
     180    background-color: #B6E2C8;
     181  }
    160182
    161183

  • phonelux-frontend/src/components/LoginRegisterComponents/RegisterFormComponent.js

    r527b93f re5b84dc  
    2020        password: '',
    2121        confirmPassword:'',
     22        serverResponse: ''
    2223      }
    2324    }
    … …  
    4344
    4445        axios(config)
    45         .then(function (response) {
    46           console.log(response);
     46        .then((response) => {
     47          this.setState({
     48            serverResponse: response.data
     49          })
    4750        })
    48         .catch(function (error) {
    49           console.log(error);
     51        .catch((error) => {
     52          this.setState({
     53            serverResponse: error.response.data
     54          })
    5055        });
    5156
    … …  
    5964
    6065
    61    
    62 
    6366  render() {
    6467
    … …  
    6972         <div className="registerform-sub-main-div">
    7073           <div>
     74
     75            {(() => {
     76              if(this.state.serverResponse == '')
     77              {
     78                return <></>
     79              }
     80
     81              if(this.state.serverResponse != '' && this.state.serverResponse.includes('Error'))
     82              {
     83                return <div className='registerform-message-wrapper'>
     84                          <h5 className='registerform-error-message'>{this.state.serverResponse.split(':')[1]}</h5> </div>
     85              }
     86
     87              if(this.state.serverResponse != '' && this.state.serverResponse.includes('token'))
     88              {
     89                return <div className='registerform-message-wrapper'>
     90                          <h5 className='registerform-success-message'>Вашата регистрација е во тек. Потврдете на вашата е-маил адреса!</h5> </div>
     91              }
     92
     93            })()}
    7194
    7295             <div className="registerform-imgs-div">

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

    r527b93f re5b84dc  
    11.phonecard{
    2     background-color: #B6E2C8;
     2    /* background-color: #B6E2C8; */
    33    padding:15px;
    44    justify-items: center;
     5    padding-top: 35px;
    56    width: 250px;
    67    height: 400px;
    78    border-radius: 25px;
     9    border: 3px solid #B6E2C8;
     10    border-radius: 50px;
    811}
    912
    1013.phonecard:hover{
    11     background-color: #84c69f;
     14    /* background-color: #B6E2C8; */
    1215    cursor: pointer;
     16    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
     17    transition: box-shadow 0.5s, background-color 0.5s ;
     18    border-radius: 50px;
    1319}
    1420
    … …  
    2632
    2733.phonecard-lowestprice-header, .phonecard-totaloffers-header{
    28     margin-top: -10px;
    29     color: rgb(34, 106, 106);
    30     text-align: center;
     34    margin-top: 20px;
     35    text-align: right;
     36}
     37
     38.phonecard-totaloffers-header{
     39    margin-top: -15px;
    3140}
    3241
    3342.phonecard-model-header{
    3443    text-align: center;
     44    border: 1px solid rgb(161, 165, 163);
     45    border-radius: 20px 100px;
     46    background-color: rgb(222, 228, 225);
     47    padding: 5px;
     48    padding-right: 10px;
     49   
    3550}
    3651
    … …  
    4459}
    4560
     61.phonecard-lowestprice-header{
     62    /* color: rgb(24, 117, 24); */
     63}
     64
     65.phonecard-totaloffers-header{
     66    /* color: rgb(24, 117, 24); */
     67}
     68
    4669.phonecard > h5 > p{
    4770    display: inline;

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

    r527b93f re5b84dc  
    2424        <h3 className='phonecard-model-header'>{this.props.model}</h3>
    2525        <h5 className='phonecard-lowestprice-header'>Најниска цена: <p className='phonecard-lowestprice'>{this.props.lowestPrice}</p> ден.</h5>
    26         <h6 className='phonecard-totaloffers-header'>Вкупно понуди: <p className='phonecard-totaloffers'>{this.props.total_offers}</p></h6>
     26        <h5 className='phonecard-totaloffers-header'>Вкупно понуди: <p className='phonecard-totaloffers'>{this.props.total_offers}</p></h5>
    2727      </div>
    2828      </Paper>

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

    r527b93f re5b84dc  
    1515}
    1616
     17.pagination-wrapper{
     18    margin-top: 40px;
     19    padding-bottom: 40px;
     20    display: flex;
     21    justify-content: center;
     22}
    1723
     24
     25

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

    r527b93f re5b84dc  
    1 import { Grid } from '@mui/material'
     1import { Grid, Pagination } from '@mui/material'
    22import axios from 'axios'
    33import React, { Component } from 'react'
    4 import PaginationComponent from '../PaginationComponent/PaginationComponent'
    54import '../PhoneCardComponent/PhoneCardComponent'
    65import PhoneCardComponent from '../PhoneCardComponent/PhoneCardComponent'
    … …  
    1514    this.state = {
    1615      phones: [],
    17       loading: true,
    1816      currentPage: 1,
    1917      phonesPerPage: 12,
    … …  
    2422  }
    2523
     24  componentDidUpdate(prevProps) {
     25    if(JSON.stringify(prevProps) != JSON.stringify(this.props)){
     26      let filters = '?'
     27
     28      if(this.props.shops)
     29      {
     30        filters += 'shops='+this.props.shops+'&'
     31      }
     32      if(this.props.brands)
     33      {
     34        filters += 'brands='+this.props.brands+'&'
     35      }
     36      if(this.props.priceRange)
     37      {
     38        filters += 'priceRange='+this.props.priceRange+'&'
     39      }
     40      if(this.props.searchValue)
     41      {
     42        filters += 'searchValue='+this.props.searchValue+'&'
     43      }
     44
     45      if(this.props.sortBy)
     46      {
     47        filters += 'sortBy='+this.props.sortBy+'&'
     48      }
     49
     50      axios.get('/phones'+filters)
     51      .then(response => {
     52        this.setState({
     53          phones: response.data,
     54          numberOfPages: Math.ceil(response.data.length / this.state.phonesPerPage)
     55        },(e) => this.setNewPage(e,this.state.currentPage))
     56      }
     57      )
     58      .catch(error => console.log(error))
     59      console.log(filters)
     60    }
     61  }
     62
    2663  componentDidMount() {
    27 
    2864    axios.get('/phones')
    2965      .then(response => {
    3066        this.setState({
    3167          phones: response.data,
    32           loading: false,
    3368          numberOfPages: Math.ceil(response.data.length / this.state.phonesPerPage)
    34         },() => this.setNewPage(this.state.currentPage))
     69        },(e) => this.setNewPage(e,this.state.currentPage))
    3570      }
    3671      )
    … …  
    3873  }
    3974
    40   setNewPage = (newPage) => {
    41     if(newPage == '')
    42     {
    43       newPage = this.state.currentPage-1
    44     }
    4575
    46     if(newPage == '')
    47     {
    48       newPage = this.state.currentPage+1
    49     }
     76  setNewPage = (event,page) => {
    5077
    51 
    52     const indexOfLastPhone = parseInt(newPage) * this.state.phonesPerPage;
     78    const indexOfLastPhone = parseInt(page) * this.state.phonesPerPage;
    5379    const indexOfFirstPhone = indexOfLastPhone - this.state.phonesPerPage;
    5480
    … …  
    5682
    5783    this.setState({
    58       currentPage: parseInt(newPage),
     84      currentPage: parseInt(page),
    5985      currentPhones: currPhones
    6086    })
    … …  
    6389
    6490  render() {
     91
    6592    return (
    6693      <div className='phonecardgrid-wrapper'>
    … …  
    7198       spacing={2}>
    7299
    73         {this.state.currentPhones.map((phone) => <Grid className='phonecardgrid-item' item md={3}>
    74           <PhoneCardComponent key={phone.id} id={phone.id} brand={phone.brand}
     100        {this.state.currentPhones.map((phone,idx) => <Grid key={idx} className='phonecardgrid-item' item md={3}>
     101          <PhoneCardComponent id={phone.id} brand={phone.brand}
    75102          model={phone.model} image_url={phone.image_url == null ? phoneImage : phone.image_url} total_offers={phone.total_offers} lowestPrice={phone.lowestPrice}/></Grid>)}
    76103
    77         {/* <Grid item xs={12} md={12}>
    78         <PaginationComponent
    79           currentPage={this.state.currentPage}
    80           changePageHandler={this.setNewPage}
    81           numberOfPages={this.state.numberOfPages} />
    82           </Grid> */}
    83104      </Grid>
    84       <PaginationComponent
    85           currentPage={this.state.currentPage}
    86           changePageHandler={this.setNewPage}
    87           numberOfPages={this.state.numberOfPages} />
     105
     106      <div className='pagination-wrapper'>
     107         <Pagination className='paginationcomponent-pagination' onChange={this.setNewPage} page={this.state.currentPage}
     108          count={this.state.numberOfPages} color="primary" />
     109      </div>
     110
    88111      </div>
    89112    )

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

    r527b93f re5b84dc  
     1.phone-with-offers-table-row{
     2    font-size: 18px;
     3}
     4
     5.phone-with-offers-table-row > td:first-of-type {
     6    font-weight: bold;
     7}
     8
     9.phone-offer-specifications-button{
     10    font-size: 17px;
     11    padding: 10px;
     12    background-color: #B6E2C8;
     13    border-radius: 20px;
     14    border: 1px solid black;
     15}
     16
     17.phone-with-offers-table-row td:last-of-type{
     18    display: flex;
     19    justify-content: center;
     20    flex-wrap: wrap;
     21}
     22
     23.phone-offer-specifications-button:hover{
     24    cursor: pointer;
     25    background-color: rgb(166, 201, 171);
     26    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
     27    transition: box-shadow 0.5s, background-color 0.5s ;
     28}

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

    r527b93f re5b84dc  
    11import React, { Component } from 'react'
     2import { Link } from 'react-router-dom'
     3import './PhoneOfferComponent.css'
    24
    35export class PhoneOfferComponent extends Component {
    … …  
    1315   
    1416  render() {
    15     console.log(this.props)
     17    // console.log(this.props)
    1618    return (
    1719      <tr className='phone-with-offers-table-row'>
    1820      <td>{this.props.offer_shop}</td>
    19       <td><a href={this.props.offer_url}>{this.props.offer_name}</a></td>
     21      <td><a style={{ textDecoration: 'none' }} href={this.props.offer_url}>{this.props.offer_name}</a></td>
    2022      <td>{this.props.price} ден.</td>
    21       <td></td>
     23      <td>
     24        <Link style={{ textDecoration: 'none' }} to={"/phoneoffer/"+this.props.id}>
     25          <button className='phone-offer-specifications-button'>Спецификации</button>
     26        </Link>
     27        </td>
    2228      </tr>
    2329    )
    … …  
    2733export default PhoneOfferComponent
    2834
    29 
    30 
    31 
    32 // back_camera: null
    33 // battery: null
    34 // chipset: null
    35 // color: null
    36 // cpu: null
    37 // front_camera: null
    38 // id: 486
    39 // image_url: "https://setec.mk/image/cache/catalog/Product/51841_0-228x228.jpg"
    40 // is_validated: false
    41 // last_updated: "2022-07-26T22:00:00.000+00:00"
    42 // offer_description: "Apple iPhone 13 128GB Midnight, GSM/CDMA/HSPA/EVDO/LTE/ 5G, Display: Super Retina XDR OLED; HDR10; Dolby Vision; 800 nits (HBM); 1200 nit…"
    43 // offer_name: "Apple iPhone 13 128GB Midnight"
    44 // offer_shop: "Setec"
    45 // offer_shop_code: "51841"
    46 // offer_url: "https://setec.mk/index.php?route=product/product&path=10066_10067&product_id=51841"
    47 // operating_system: null
    48 // price: 63990
    49 // ram_memory: null
    50 // rom_memory: null

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

    r527b93f re5b84dc  
    2323
    2424.phone-with-offers-table-row:nth-of-type(even){
    25     background-color: #DEE4E1;
     25    background-color: #eef2f0;
    2626}
    2727
    … …  
    5151    font-size: 22px;
    5252}
     53
     54.phone-with-offers-model-header{
     55    border: 1px solid gray;
     56    padding: 10px;
     57    padding-left: 50px;
     58    padding-right: 50px;
     59    border-radius: 10px 60px;
     60    box-shadow: inset 0px 0px 25px 0px rgb(120, 190, 139);
     61    outline: none;
     62    background-color: #c4f3d8;
     63}
     64
     65.phone-with-offers-totaloffers-header{
     66    padding: 10px;
     67    border: 1px solid rgb(199, 193, 193);
     68    background-color: #B6E2C8;
     69    border-radius: 50px;
     70}

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

    r527b93f re5b84dc  
    3131        <div className='phone-with-offers-sub-main'>
    3232            <div className='phone-with-offers-totaloffers-div'>
    33                 <h3>Понуди: {this.props.total_offers}</h3>
     33                <h3 className='phone-with-offers-totaloffers-header'>Понуди: {this.props.total_offers}</h3>
    3434            </div>
    3535
    … …  
    4141
    4242            <div className='phone-with-offers-model-wrapper'>
    43             <h1>{this.props.model}</h1>
     43            <h1 className='phone-with-offers-model-header'>{this.props.model}</h1>
    4444            </div>
    4545        </div>
    … …  
    5858            <tbody>
    5959              {
    60                 this.state.phone_offers.map((offer) => <PhoneOfferComponent key={offer.offer_id} id={offer.id}
     60                this.state.phone_offers.map((offer,idx) => <PhoneOfferComponent key={idx} id={offer.id}
    6161                is_validated={offer.is_validated} offer_shop={offer.offer_shop} offer_name={offer.offer_name}
    6262                price={offer.price} offer_url={offer.offer_url}
Note: See TracChangeset for help on using the changeset viewer.