Ignore:
Timestamp:
09/07/22 00:49:45 (2 years ago)
Author:
Marko <Marko@…>
Branches:
master
Children:
f25d07e
Parents:
dfd5d87
Message:

Homepage, login and register components added

Location:
phonelux-frontend/src
Files:
23 added
1 deleted
11 edited
1 moved

Legend:

Unmodified
Added
Removed

  • phonelux-frontend/src/App.js

    rdfd5d87 rdbd4834  
    33import GroupedFiltersComponent from "./components/GroupedFiltersComponent/GroupedFiltersComponent";
    44import HeaderComponent from "./components/HeaderComponent/HeaderComponent";
    5 import SearchFieldComponent from "./components/FiltersComponents/SearchFieldComponent"
    6 import FilterPriceComponent from "./components/FiltersComponents/FilterPriceComponent"
     5import InputFormComponent from "./components/LoginRegisterComponents/InputFormComponent";
     6import LoginFormComponent from "./components/LoginRegisterComponents/LoginFormComponent";
     7import RegisterFormComponent from "./components/LoginRegisterComponents/RegisterFormComponent";
     8import PaginationComponent from "./components/PaginationComponent/PaginationComponent"
     9import PhoneCardComponent from "./components/PhoneCardComponent/PhoneCardComponent";
     10import PhoneCardGridComponent from "./components/PhoneCardGridComponent/PhoneCardGridComponent";
     11import HomepageComponent from "./components/HomepageComponent"
     12import PhonePageComponent from "./components/PhonePageComponent";
     13import SortByComponent from "./components/FiltersComponents/SortByComponent";
     14import LoginPageComponent from "./components/LoginPageComponent"
     15import RegisterPageComponent from "./components/RegisterPageComponent";
    716
    817
    9 function App() {
     18
     19function App() { 
    1020  return (
    1121    <BrowserRouter>
    1222      <Routes>
    13         <Route path="/" element={<GroupedFiltersComponent/>}/>
     23        {/* { <Route path="/" element={<PhoneCardComponent
     24        image_url='https://admin.ledikom.mk/uploads/items/411/1641668143apple-iphone-13-pro-max-1-250x300-pad.jpg?v=1'
     25        model='Apple iPhone 13 Pro Max' price='75000'/>}/> } */}
     26        <Route path="/" element={<HomepageComponent/>}/>
     27        <Route path="/login" element={<LoginPageComponent/>}/>
     28        <Route path="/register" element={<RegisterPageComponent/>}/>
     29        <Route path="/phones/:phoneId" element={<PhonePageComponent/>} />
     30
    1431      </Routes>
    1532    </BrowserRouter>
     33
    1634  );
    1735}

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

    rdfd5d87 rdbd4834  
    1 #priceContainer{
     1.sliderPriceContainer{
    22    display: flex;
     3
    34}
    45
    5 #slider{
    6     margin-top: 20px;
     6#priceSlider{
     7    margin-top: 15px;
    78}
    89
    9 #box{
     10.sliderBox{
    1011    margin-left: 20px;
    1112}
    1213
    13 #priceLabel{
    14     margin-top: 23px;
     14.sliderPriceLabel{
     15    margin-top: 20px;
    1516    font-size: 17px;
    1617}

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

    rdfd5d87 rdbd4834  
    33import Slider from '@mui/material/Slider';
    44import "./FilterPriceComponent.css"
     5import axios from 'axios';
    56
    6 function valuetext(value) {
    7   return `${value}°C`;
    8 }
     7export class FilterPriceComponent extends React.Component {
    98
    10 export default function RangeSlider() {
    11   const [value, setValue] = React.useState([20, 37]);
     9  constructor(props) {
     10    super(props)
     11 
     12    this.state = {
     13      value: [1000,150000],
     14      minValue: 0,
     15      maxValue: 0
     16    }
     17  }
    1218
    13   const handleChange = (event, newValue) => {
    14     setValue(newValue);
     19  componentDidMount(){
     20
     21
     22  axios.get('/lowestPrice')
     23    .then(response => this.setState({minValue: response.data}))
     24    .catch(error => console.log(error))
     25
     26    axios.get('/highestPrice')
     27    .then(response => this.setState({
     28      maxValue: response.data,
     29    }))
     30    .catch(error => console.log(error))
     31
     32  }
     33
     34  changeValue = (event, newValue) => {
     35    this.setState({
     36      value: newValue
     37    });
    1538  };
    1639
    17   return (
    18     <div id="priceContainer">
    19       <label id="priceLabel">Цена:</label>
    20     <Box id="box" sx={{ width: 350 }}>
     40  handleChange = () => {
     41    this.props.changeHandler({priceRange: this.state.value.join('-')})
     42  }
     43
     44
     45  render() {
     46    return (
     47      <div className="sliderPriceContainer">
     48      <label className="sliderPriceLabel">Цена:</label>
     49    <Box className="sliderBox" sx={{ width: 280 }}>
    2150      <Slider
    22       id="slider"
     51      id="priceSlider"
    2352        getAriaLabel={() => 'Price range'}
    24         value={value}
    25         onChange={handleChange}
     53        value={this.state.value}
     54        onChange={this.changeValue}
     55        onChangeCommitted={this.handleChange}
    2656        valueLabelDisplay="auto"
    27         getAriaValueText={valuetext}
     57        min={this.state.minValue}
     58        max={this.state.maxValue}
    2859      />
    2960    </Box>
    3061    </div>
    3162  );
     63  }
    3264}
     65
     66export default FilterPriceComponent
     67

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

    rdfd5d87 rdbd4834  
    1 #demo-multiple-checkbox{
    2     margin-top: 10px;
     1.input-select-label{
     2    margin-top: -5px;
    33}
    44
     5.input-select-option fieldset{
     6    border-radius: 20px;
     7
     8}

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

    rdfd5d87 rdbd4834  
     1
    12import * as React from 'react';
    23import OutlinedInput from '@mui/material/OutlinedInput';
    … …  
    89import Checkbox from '@mui/material/Checkbox';
    910import "./FilterSelectComponent.css"
     11import axios from 'axios';
    1012
    11 const ITEM_HEIGHT = 48;
    12 const ITEM_PADDING_TOP = 8;
    13 const MenuProps = {
    14   PaperProps: {
    15     style: {
    16       maxHeight: ITEM_HEIGHT * 5.5 + ITEM_PADDING_TOP,
    17       width: 250,
    18     },
    19   },
    20 };
     13export class FilterSelectComponent extends React.Component {
    2114
    22 const categories = [
    23   'Category1',
    24   'Category2',
    25   'Category3',
    26   'Category4',
    27   'Category5',
    28   'Category6',
    29   'Category7',
    30   'Category8',
    31   'Category9',
    32   'Category10',
    33 ];
     15    constructor(props) {
     16      super(props)
     17       
     18      this.state = {
     19         pickedItems: [],
     20         items: [],
     21         type: '',
     22         ITEM_HEIGHT: 48,
     23         ITEM_PADDING_TOP: 8,
     24         MenuProps: {}
     25      }
     26 
     27    }
    3428
    35 export default function MultipleSelectCheckmarks() {
    36   const [category, setCategory] = React.useState([]);
     29    componentDidMount(){
     30        this.state.MenuProps = {
     31            PaperProps: {
     32              style: {
     33                maxHeight: this.state.ITEM_HEIGHT * 5.5 + this.state.ITEM_PADDING_TOP,
     34                width: 250,
     35              },
     36            },
     37        }
    3738
    38   const handleChange = (event) => {
    39     const {
    40       target: { value },
    41     } = event;
    42     setCategory(
    43       // On autofill we get a stringified value.
    44       typeof value === 'string' ? value.split(',') : value,
    45     );
    46   };
    4739
    48   return (
    49     <div>
    50       <FormControl id="form" sx={{ m: 1, width: 200 }}>
    51         <InputLabel id="demo-multiple-checkbox-label">Category</InputLabel>
    52         <Select
    53           size={"small"}
    54           labelId="demo-multiple-checkbox-label"
    55           id="demo-multiple-checkbox"
    56           multiple
    57           value={category}
    58           onChange={handleChange}
    59           input={<OutlinedInput label="Category" />}  // tuka odi soodvetno imeto na filter
    60           renderValue={(selected) => selected.join(', ')}
    61           MenuProps={MenuProps}
    62 >
    63           {categories.map((cat) => (
    64             <MenuItem key={cat} value={cat}>
    65               <Checkbox checked={category.indexOf(cat) > -1} />
    66               <ListItemText primary={cat} />
    67             </MenuItem>
    68           ))}
    69         </Select>
    70       </FormControl>
    71     </div>
    72   );
     40        let endpoint
     41        if(this.props.type == 'brands')
     42        {
     43          endpoint = '/brands'
     44          this.setState({
     45            type: 'Брендови'
     46          })
     47        }
     48        else{
     49          endpoint = '/shops'
     50          this.setState({
     51            type: 'Продавници'
     52          })
     53        }
     54
     55        axios.get(endpoint)
     56        .then(response => this.setState({items: response.data}))
     57        .catch(error => console.log(error))
     58    }
     59
     60    handleChange = (event) => {
     61       let value = event.target.value
     62        this.setState({
     63            pickedItems: typeof value === 'string' ? value.split(',') : value
     64        }, ()=>{
     65          if(this.props.type == 'brands')
     66          {
     67            this.props.changeHandler({brands: this.state.pickedItems.join(',')})
     68          }
     69         
     70          if(this.props.type == 'shops')
     71          {
     72            this.props.changeHandler({shops: this.state.pickedItems.join(',')})
     73          }
     74         
     75        })
     76      };
     77
     78
     79  render() {
     80    return (
     81        <div>
     82        <FormControl className="form-select-component" sx={{ m: 1, width: 200 }}>
     83          <InputLabel className="input-select-label">{this.state.type}</InputLabel>
     84          <Select
     85            size={"small"}
     86            labelId="input-label-id"
     87            className="input-select-option"
     88            multiple
     89            value={this.state.pickedItems}
     90            onChange={this.handleChange}
     91            input={<OutlinedInput className='inner-input-selectfilter' label={this.state.type} />}
     92            renderValue={(selected) => selected.join(', ')}
     93            MenuProps={this.state.MenuProps}
     94  >
     95            {this.state.items.map((item) => (
     96              <MenuItem key={item} value={item}>
     97                <Checkbox checked={this.state.pickedItems.indexOf(item) > -1} />
     98                <ListItemText primary={item} />
     99              </MenuItem>
     100            ))}
     101          </Select>
     102        </FormControl>
     103      </div>
     104    )
     105  }
    73106}
     107
     108export default FilterSelectComponent

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

    rdfd5d87 rdbd4834  
    1 #searchfield{
    2     display: flex;
    3     border-radius: 20px;
    4     height: fit-content;
     1.search-phone-field{
     2        /* display: flex;
     3        height: fit-content;
     4        border-radius: 20px; */
     5        border: 1px solid rgb(131, 125, 125);
    56}
     7
     8.search-phone-input{
     9    margin:5px;
     10}
     11
     12
     13
     14

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

    rdfd5d87 rdbd4834  
    5959
    6060export default class SearchFieldComponent extends Component {
     61  constructor(props) {
     62    super(props)
     63 
     64    this.state = {
     65       
     66    }
     67  }
     68
     69  handleChange = (event) => {
     70    this.props.changeHandler({searchValue: event.target.value})
     71  }
     72 
    6173  render() {
    6274    return (
    63         <Search id="searchfield">
     75        <Search onChange={this.handleChange} className="search-phone-field">
    6476        <SearchIconWrapper id="iconwrapper">
    6577          <SearchIcon />
    6678        </SearchIconWrapper>
    6779        <StyledInputBase
    68         id="search"
     80          className="search-phone-input"
    6981          placeholder="Пребарувај…"
    7082          inputProps={{ 'aria-label': 'search' }}
    71         />
     83        /> 
    7284      </Search>
    7385    )

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

    rdfd5d87 rdbd4834  
    1 #filtersDiv{
    2     background-color: #91AD7E;
     1.grouped-filters-component{
     2    background-color: #a6c9ab;
    33    display: flex;
    4 }
    5 
    6 /* #filtersDiv > div{
    7     margin-left: 30px;
    8 } */
    9 
    10 
    11 #filtersDiv > div{
    12     margin-left: 30px;
    13 }
    14 
    15 #filtersDiv > div:nth-of-type(4){
    16     margin-top: 15px;
    17     margin-left: 200px;
     4    padding: 20px;
    185}
    196

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

    rdfd5d87 rdbd4834  
    88import FilterPriceComponent from "../FiltersComponents/FilterPriceComponent"
    99import SearchFieldComponent from '../FiltersComponents/SearchFieldComponent';
     10import { Grid } from '@mui/material';
     11import SortByComponent from '../FiltersComponents/SortByComponent';
    1012
    1113export default class GroupedFiltersComponent extends Component {
     14
     15  constructor(props) {
     16    super(props)
     17 
     18    this.state = {
     19     
     20    }
     21  }
     22 
     23
     24  componentDidMount(){
     25 
     26  }
     27
    1228  render() {
    1329    return (
    14       <div id="filtersDiv">
    15        <FilterSelectComponent/>
    16        <FilterSelectComponent/>
    17        <FilterPriceComponent/>
    18        <SearchFieldComponent/>
     30      <>
     31      <div className="grouped-filters-component">
     32        <Grid container spacing={5}>
     33
     34          <Grid className='filterscomponent-grid-item' item xs={6} sm={4} md={3}>
     35            <FilterSelectComponent changeHandler={this.props.passFilters} type='shops'/>
     36          </Grid>
     37
     38          <Grid className='filterscomponent-grid-item' item xs={6} sm={4} md={3}>
     39            <FilterSelectComponent changeHandler={this.props.passFilters} type='brands'/>
     40          </Grid>
     41
     42          <Grid className='filterscomponent-grid-item' item xs={6} sm={4} md={3}>
     43            <FilterPriceComponent changeHandler={this.props.passFilters}/>
     44          </Grid>
     45       
     46          <Grid className='filterscomponent-grid-item' item xs={6} sm={4} md={3}>
     47            <SearchFieldComponent changeHandler={this.props.passFilters} />
     48          </Grid>
     49       </Grid>
    1950      </div>
     51      <SortByComponent changeHandler={this.props.passFilters}/>
     52      </>
    2053    )
    2154  }
     55
    2256}

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

    rdfd5d87 rdbd4834  
    1 #header{
     1.header-component{
    22    background-color: #B6E2C8;
    33    display: flex;
    … …  
    55}
    66
    7 #header img{
     7.header-component img{
    88    width: 310px;
    99    height: 200px;

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

    rdfd5d87 rdbd4834  
    11import React, { Component } from 'react'
    2 import logo from '../../logo_phonelux.png'
     2import { Link } from 'react-router-dom'
     3import logo from '../../images/logo_phonelux.png'
    34import './HeaderComponent.css'
    45
    … …  
    67  render() {
    78    return (
    8       <div id='header'>
     9      <div className='header-component'>
     10          <Link style={{ textDecoration: 'none' }} to={"/"}>
    911        <img src={logo}></img>
     12        </Link>
    1013      </div>
    1114    )
Note: See TracChangeset for help on using the changeset viewer.