Changeset dbd4834 for phonelux-frontend/src/components
- Timestamp:
- 09/07/22 00:49:45 (2 years ago)
- Branches:
- master
- Children:
- f25d07e
- Parents:
- dfd5d87
- Location:
- phonelux-frontend/src/components
- Files:
-
- 21 added
- 1 deleted
- 10 edited
Legend:
- Unmodified
- Added
- Removed
-
phonelux-frontend/src/components/FiltersComponents/FilterPriceComponent.css
rdfd5d87 rdbd4834 1 #priceContainer{1 .sliderPriceContainer{ 2 2 display: flex; 3 3 4 } 4 5 5 # slider{6 margin-top: 20px;6 #priceSlider{ 7 margin-top: 15px; 7 8 } 8 9 9 #box{10 .sliderBox{ 10 11 margin-left: 20px; 11 12 } 12 13 13 #priceLabel{14 margin-top: 2 3px;14 .sliderPriceLabel{ 15 margin-top: 20px; 15 16 font-size: 17px; 16 17 } -
phonelux-frontend/src/components/FiltersComponents/FilterPriceComponent.js
rdfd5d87 rdbd4834 3 3 import Slider from '@mui/material/Slider'; 4 4 import "./FilterPriceComponent.css" 5 import axios from 'axios'; 5 6 6 function valuetext(value) { 7 return `${value}°C`; 8 } 7 export class FilterPriceComponent extends React.Component { 9 8 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 } 12 18 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 }); 15 38 }; 16 39 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 }}> 21 50 <Slider 22 id=" slider"51 id="priceSlider" 23 52 getAriaLabel={() => 'Price range'} 24 value={value} 25 onChange={handleChange} 53 value={this.state.value} 54 onChange={this.changeValue} 55 onChangeCommitted={this.handleChange} 26 56 valueLabelDisplay="auto" 27 getAriaValueText={valuetext} 57 min={this.state.minValue} 58 max={this.state.maxValue} 28 59 /> 29 60 </Box> 30 61 </div> 31 62 ); 63 } 32 64 } 65 66 export 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; 3 3 } 4 4 5 .input-select-option fieldset{ 6 border-radius: 20px; 7 8 } -
phonelux-frontend/src/components/FiltersComponents/FilterSelectComponent.js
rdfd5d87 rdbd4834 1 1 2 import * as React from 'react'; 2 3 import OutlinedInput from '@mui/material/OutlinedInput'; … … 8 9 import Checkbox from '@mui/material/Checkbox'; 9 10 import "./FilterSelectComponent.css" 11 import axios from 'axios'; 10 12 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 }; 13 export class FilterSelectComponent extends React.Component { 21 14 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 } 34 28 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 } 37 38 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 };47 39 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 } 73 106 } 107 108 export 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); 5 6 } 7 8 .search-phone-input{ 9 margin:5px; 10 } 11 12 13 14 -
phonelux-frontend/src/components/FiltersComponents/SearchFieldComponent.js
rdfd5d87 rdbd4834 59 59 60 60 export 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 61 73 render() { 62 74 return ( 63 <Search id="searchfield">75 <Search onChange={this.handleChange} className="search-phone-field"> 64 76 <SearchIconWrapper id="iconwrapper"> 65 77 <SearchIcon /> 66 78 </SearchIconWrapper> 67 79 <StyledInputBase 68 id="search"80 className="search-phone-input" 69 81 placeholder="Пребарувај…" 70 82 inputProps={{ 'aria-label': 'search' }} 71 /> 83 /> 72 84 </Search> 73 85 ) -
phonelux-frontend/src/components/GroupedFiltersComponent/GroupedFiltersComponent.css
rdfd5d87 rdbd4834 1 #filtersDiv{2 background-color: # 91AD7E;1 .grouped-filters-component{ 2 background-color: #a6c9ab; 3 3 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; 18 5 } 19 6 -
phonelux-frontend/src/components/GroupedFiltersComponent/GroupedFiltersComponent.js
rdfd5d87 rdbd4834 8 8 import FilterPriceComponent from "../FiltersComponents/FilterPriceComponent" 9 9 import SearchFieldComponent from '../FiltersComponents/SearchFieldComponent'; 10 import { Grid } from '@mui/material'; 11 import SortByComponent from '../FiltersComponents/SortByComponent'; 10 12 11 13 export 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 12 28 render() { 13 29 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> 19 50 </div> 51 <SortByComponent changeHandler={this.props.passFilters}/> 52 </> 20 53 ) 21 54 } 55 22 56 } -
phonelux-frontend/src/components/HeaderComponent/HeaderComponent.css
rdfd5d87 rdbd4834 1 #header{1 .header-component{ 2 2 background-color: #B6E2C8; 3 3 display: flex; … … 5 5 } 6 6 7 #headerimg{7 .header-component img{ 8 8 width: 310px; 9 9 height: 200px; -
phonelux-frontend/src/components/HeaderComponent/HeaderComponent.js
rdfd5d87 rdbd4834 1 1 import React, { Component } from 'react' 2 import logo from '../../logo_phonelux.png' 2 import { Link } from 'react-router-dom' 3 import logo from '../../images/logo_phonelux.png' 3 4 import './HeaderComponent.css' 4 5 … … 6 7 render() { 7 8 return ( 8 <div id='header'> 9 <div className='header-component'> 10 <Link style={{ textDecoration: 'none' }} to={"/"}> 9 11 <img src={logo}></img> 12 </Link> 10 13 </div> 11 14 )
Note:
See TracChangeset
for help on using the changeset viewer.