Index: phonelux-frontend/src/App.js =================================================================== --- phonelux-frontend/src/App.js (revision 520169098d7257d32291e4ee85b94e1e499ede09) +++ phonelux-frontend/src/App.js (revision d66b8ebb46c9e4a4056ded9adde5e33dcaaf6b44) @@ -10,4 +10,6 @@ import SuperAdminComponent from "./components/SuperAdminComponent/SuperAdminComponent"; import EditOfferComponent from "./components/EditOfferComponent/EditOfferComponent"; +import CompareOffersComponent from "./components/CompareOffersComponent/CompareOffersComponent"; +import SpecificationsFilterComponent from "./components/FiltersComponents/SpecificationsFilterComponent"; @@ -26,4 +28,5 @@ }/> }/> + }/> Index: phonelux-frontend/src/components/CheaperOffersComponent/CheaperOffersComponent.css =================================================================== --- phonelux-frontend/src/components/CheaperOffersComponent/CheaperOffersComponent.css (revision 520169098d7257d32291e4ee85b94e1e499ede09) +++ phonelux-frontend/src/components/CheaperOffersComponent/CheaperOffersComponent.css (revision d66b8ebb46c9e4a4056ded9adde5e33dcaaf6b44) @@ -9,4 +9,5 @@ height: 500px; overflow: scroll; + border: 1px solid black; } Index: phonelux-frontend/src/components/CompareOffersComponent/CompareOffersComponent.css =================================================================== --- phonelux-frontend/src/components/CompareOffersComponent/CompareOffersComponent.css (revision d66b8ebb46c9e4a4056ded9adde5e33dcaaf6b44) +++ phonelux-frontend/src/components/CompareOffersComponent/CompareOffersComponent.css (revision d66b8ebb46c9e4a4056ded9adde5e33dcaaf6b44) @@ -0,0 +1,72 @@ +.compare-offers-header{ + background-color: #B6E2C8; + justify-content: center; + align-content: center; + margin-top: -30px; + width: 100%; + display: flex; + font-size: 18px; +} +.compare-offers-header-text{ + width: fit-content; +} + +.compare-offers-table{ + border-collapse: collapse; + width: 100%; + table-layout: fixed; +} + + +.compare-offers-table-row:nth-of-type(even){ + background-color: #eef2f0; +} + +.compare-offers-table-row{ + border: 1px solid gainsboro; + padding: 20px ; +} + +.compare-offers-table td{ + text-align: center; + border: 1px solid gainsboro; + word-wrap: break-word; +} + + +.compare-offers-table-row td a{ + text-decoration: none; +} + +.compare-offers-table th{ + background-color: #afd3b4 +} + +.no-offers-saved-message{ + background-color: #afd3b4; + padding: 20px; + width: 30%; + text-align: center; + border-radius: 50px; + border: 1px solid black; + margin-left: auto; + margin-right: auto; + margin-top: 150px; +} + +.compare-offer-table-headers{ + width: 200px; +} + + +.compare-offers-top-headers{ + background-color: #afd3b4; + font-weight: bold; +} +.compare-offers-top-headers:hover{ + cursor: pointer; + background-color: rgb(203, 56, 56); + box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); + transition: box-shadow 0.5s, background-color 0.5s ; +} + Index: phonelux-frontend/src/components/CompareOffersComponent/CompareOffersComponent.js =================================================================== --- phonelux-frontend/src/components/CompareOffersComponent/CompareOffersComponent.js (revision d66b8ebb46c9e4a4056ded9adde5e33dcaaf6b44) +++ phonelux-frontend/src/components/CompareOffersComponent/CompareOffersComponent.js (revision d66b8ebb46c9e4a4056ded9adde5e33dcaaf6b44) @@ -0,0 +1,173 @@ +import React, { Component } from 'react' +import HeaderComponent from '../HeaderComponent/HeaderComponent' +import './CompareOffersComponent.css' +import CompareIcon from '@mui/icons-material/Compare'; +import RemoveCircleIcon from '@mui/icons-material/RemoveCircle'; +import axios from 'axios'; +import Tippy from '@tippyjs/react'; + +export class CompareOffersComponent extends Component { + + constructor(props) { + super(props) + + this.state = { + offersToCompare: [] + } + } + componentDidMount() { + if(localStorage.getItem('offersToCompare') && JSON.parse(localStorage.getItem('offersToCompare')).length >0) + { + let offersToCompareString = JSON.parse(localStorage.getItem('offersToCompare')).join(',') + + var config = { + method: 'get', + url: '/multipleoffers?offerIds='+offersToCompareString, + headers: { } + }; + + axios(config) + .then(response => { + this.setState({ + offersToCompare: response.data + }) + }) + .catch(error => { + console.log(error); + }); + } + } + + handleRemove = (event) => { + let offerToRemove = event.target.getAttribute('offerid') + let offers = JSON.parse(localStorage.getItem('offersToCompare')) + localStorage.setItem('offersToCompare',JSON.stringify(offers.filter(offer => offer!=offerToRemove))) + this.setState({ + offersToCompare: this.state.offersToCompare.filter(offer => offer.id != offerToRemove) + }) + } + + + render() { + console.log(this.state) + return ( +
+ +
+

+ Спореди понуди +

+
+ {(() => { + if(localStorage.getItem('offersToCompare') && JSON.parse(localStorage.getItem('offersToCompare')).length >0) + { + return + + + + { + this.state.offersToCompare.map((offer,idx) => + + + + ) + } + + + + { + this.state.offersToCompare.map((offer,idx) => ) + } + + + + { + this.state.offersToCompare.map((offer,idx) => ) + } + + + + { + this.state.offersToCompare.map((offer,idx) => ) + } + + + + { + this.state.offersToCompare.map((offer,idx) => ) + } + + + + { + this.state.offersToCompare.map((offer,idx) => ) + } + + + + { + this.state.offersToCompare.map((offer,idx) => ) + } + + + + { + this.state.offersToCompare.map((offer,idx) => ) + } + + + + { + this.state.offersToCompare.map((offer,idx) => ) + } + + + + { + this.state.offersToCompare.map((offer,idx) => ) + } + + + + { + this.state.offersToCompare.map((offer,idx) => ) + } + + + + { + this.state.offersToCompare.map((offer,idx) => ) + } + + + + { + this.state.offersToCompare.map((offer,idx) => ) + } + + +
Понуда #{idx+1}
Име на понуда{offer.offer_name}
Продавница{offer.offer_shop}
Цена{offer.price}
РАМ меморија{offer.ram_memory == null || + offer.ram_memory == '' ? '/' : offer.ram_memory}
РОМ меморија{offer.rom_memory == null || + offer.rom_memory == '' ? '/' : offer.rom_memory}
Предна камера{offer.front_camera == null || + offer.front_camera == '' ? '/' : offer.front_camera}
Задна камера{offer.back_camera == null || + offer.back_camera == '' ? '/' : offer.back_camera}
Процесор{offer.cpu == null || + offer.cpu == '' ? '/' : offer.cpu}
Чипсет{offer.chipset == null || + offer.chipset == '' ? '/' : offer.chipset}
Оперативен систем{offer.operating_system == null || + offer.operating_system == '' ? '/' : offer.operating_system}
Батерија{offer.battery == null || + offer.battery == '' ? '/' : offer.battery}
Боја{offer.color == null || + offer.color == '' ? '/' : offer.color}
+ } + else{ + return

Нема зачувано понуди

+ } + + })()} + +
+ ) + } +} + +export default CompareOffersComponent + Index: phonelux-frontend/src/components/EditOfferComponent/EditOfferComponent.css =================================================================== --- phonelux-frontend/src/components/EditOfferComponent/EditOfferComponent.css (revision 520169098d7257d32291e4ee85b94e1e499ede09) +++ phonelux-frontend/src/components/EditOfferComponent/EditOfferComponent.css (revision d66b8ebb46c9e4a4056ded9adde5e33dcaaf6b44) @@ -67,3 +67,51 @@ background-color: rgb(230, 232, 230); font-size: 22px; + text-align: center; + } + +.edit-offer-submit-button{ + font-size: 20px; + padding: 10px; + background-color: #B6E2C8; + border-radius: 20px; + border: 1px solid black; + width: 20%; + margin-bottom: 50px; + margin-right: 130px; +} + + +.edit-offer-submit-button:hover{ + cursor: pointer; + background-color: rgb(166, 201, 171); + box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); + transition: box-shadow 0.5s, background-color 0.5s ; +} + +.edit-offer-button-wrapper{ + margin-top: -25px; + display: flex; + justify-content: end; +} + +.edit-offer-offerimage{ + width: 40%; + height: 40%; + display: block; +} + +.edit-offer-imageurl-input{ + width: 80%; + font-size: 22px; + background-color: rgb(238, 240, 238); + border: 1px solid black; + text-align: center; + padding: 5px; +} + +.edit-offer-offerimage-wrapper{ + display: flex; + width: 100%; + justify-content: center; +} Index: phonelux-frontend/src/components/EditOfferComponent/EditOfferComponent.js =================================================================== --- phonelux-frontend/src/components/EditOfferComponent/EditOfferComponent.js (revision 520169098d7257d32291e4ee85b94e1e499ede09) +++ phonelux-frontend/src/components/EditOfferComponent/EditOfferComponent.js (revision d66b8ebb46c9e4a4056ded9adde5e33dcaaf6b44) @@ -1,4 +1,6 @@ +import { CollectionsOutlined } from '@mui/icons-material' import axios from 'axios' import React, { Component } from 'react' +import UserContext from '../../context/UserContext' import HeaderComponent from '../HeaderComponent/HeaderComponent' import './EditOfferComponent.css' @@ -15,4 +17,14 @@ componentDidMount(){ + // if(!localStorage.getItem('token')) + // { + // window.location.href = "/" + // } + + // if(this.context.role != 'ADMIN' && this.context.role != 'SUPERADMIN') + // { + // window.location.href = "/" + // } + var config = { method: 'get', @@ -32,77 +44,191 @@ } + + setInputValue = (e) => { + let editedOffer = Object.assign(this.state.offer,{[e.target.name]: e.target.value}) + this.setState({ + offer: editedOffer + }) + } + + handleSubmit = () =>{ + var dataToSend = JSON.stringify(this.state.offer) + var config = { + method: 'put', + url: '/admin/editoffer/'+this.state.offerId, + headers: { + 'Authorization': 'Bearer '+localStorage.getItem('token'), + 'Content-Type': 'application/json' + }, + data: { + "id" : this.state.offer.id, + "offer_shop" : this.state.offer.offer_shop, + "offer_name" : this.state.offer.offer_name, + "price" : this.state.offer.price, + "ram_memory" : this.state.offer.ram_memory, + "rom_memory" : this.state.offer.rom_memory, + "color" : this.state.offer.color, + "front_camera" : this.state.offer.front_camera, + "back_camera" : this.state.offer.back_camera, + "chipset" : this.state.offer.chipset, + "battery" : this.state.offer.battery, + "operating_system" : this.state.offer.operating_system, + "cpu" : this.state.offer.cpu, + "image_url" : this.state.offer.image_url, + "offer_url" : this.state.offer.offer_url, + "last_updated" : this.state.offer.last_updated, + "is_validated" : this.state.offer.is_validated, + "offer_description" : this.state.offer.offer_description, + "offer_shop_code" : this.state.offer.offer_shop_code + } + }; + + axios(config) + .then(response => { + window.location.href="/phoneoffer/"+this.state.offerId + }) + .catch(error => { + console.log(error); + }); + + + + } render() { + console.log(this.state) return (
+ - + + - + - - - + '#' : this.state.offer.offer_url}>{this.state.offer == null || this.state.offer.offer_name == null ? + '/' : this.state.offer.offer_name} + + + + + - - - + this.state.offer.offer_shop == null ? '/' : this.state.offer.offer_shop} + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + this.state.offer.price == null ? '/' : this.state.offer.price} + className='edit-offer-price-input' name='price' + onChange={(e) => this.setInputValue(e)}/>ден. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Измени детали за понудата
Понуда
Име на понудаИме на понуда {this.state.offer == null || this.state.offer.offer_name == null ? - '/' : this.state.offer.offer_name}
Продавница
Продавница {this.state.offer == null || - this.state.offer.offer_shop == null ? '/' : this.state.offer.offer_shop}
Цена
Опис за понудата{this.state.offer == null || + this.state.offer.offer_description == null ? '/' : this.state.offer.offer_description} +
Спецификации за понудата
Цена ден.
Предна камера
Задна камера
РОМ меморија
РАМ меморија
Оперативен систем
Чипсет
Процесор
Батерија
Боја
Опис
Предна камера
Задна камера
РОМ меморија
РАМ меморија
Оперативен систем +
Чипсет +
Процесор +
Батерија
Боја
Линк од слика на мобилниот телефон од понудата +
+ +
+ this.setInputValue(e)}/> +
-
- - +
+ +
@@ -111,3 +237,5 @@ } +EditOfferComponent.contextType = UserContext + export default EditOfferComponent Index: phonelux-frontend/src/components/FiltersComponents/FilterPriceComponent.js =================================================================== --- phonelux-frontend/src/components/FiltersComponents/FilterPriceComponent.js (revision 520169098d7257d32291e4ee85b94e1e499ede09) +++ phonelux-frontend/src/components/FiltersComponents/FilterPriceComponent.js (revision d66b8ebb46c9e4a4056ded9adde5e33dcaaf6b44) @@ -11,5 +11,6 @@ this.state = { - value: [1000,150000], + value: localStorage.getItem('priceRange') ? [parseInt(localStorage.getItem('priceRange').split('-')[0]), + parseInt(localStorage.getItem('priceRange').split('-')[1])] : [1000,150000], minValue: 0, maxValue: 0 @@ -39,4 +40,5 @@ handleChange = () => { this.props.changeHandler({priceRange: this.state.value.join('-')}) + localStorage.setItem('priceRange',this.state.value.join('-')) } Index: phonelux-frontend/src/components/FiltersComponents/FilterSelectComponent.css =================================================================== --- phonelux-frontend/src/components/FiltersComponents/FilterSelectComponent.css (revision 520169098d7257d32291e4ee85b94e1e499ede09) +++ phonelux-frontend/src/components/FiltersComponents/FilterSelectComponent.css (revision d66b8ebb46c9e4a4056ded9adde5e33dcaaf6b44) @@ -7,2 +7,6 @@ } + +.list-item-text-filters span{ + overflow-x: scroll; +} Index: phonelux-frontend/src/components/FiltersComponents/FilterSelectComponent.js =================================================================== --- phonelux-frontend/src/components/FiltersComponents/FilterSelectComponent.js (revision 520169098d7257d32291e4ee85b94e1e499ede09) +++ phonelux-frontend/src/components/FiltersComponents/FilterSelectComponent.js (revision d66b8ebb46c9e4a4056ded9adde5e33dcaaf6b44) @@ -15,7 +15,8 @@ constructor(props) { super(props) - + const {type} = this.props + console.log(type) this.state = { - pickedItems: [], + pickedItems: localStorage.getItem(type) ? localStorage.getItem(type).split(',') : [], items: [], type: '', @@ -37,18 +38,87 @@ } - let endpoint - if(this.props.type == 'brands') - { - endpoint = '/brands' + switch (this.props.type) { + + case 'brands': + endpoint = '/brands' this.setState({ type: 'Брендови' }) - } - else{ - endpoint = '/shops' + break; + case 'shops': + endpoint = '/shops' this.setState({ type: 'Продавници' }) + break; + + case 'ram': + endpoint = '/specifications/ram' + this.setState({ + type: 'РАМ меморија' + }) + break; + + case 'rom': + endpoint = '/specifications/rom' + this.setState({ + type: 'РОМ меморија' + }) + break; + + case 'frontcamera': + endpoint = '/specifications/frontcamera' + this.setState({ + type: 'Предна камера' + }) + break; + + case 'backcamera': + endpoint = '/specifications/backcamera' + this.setState({ + type: 'Задна камера' + }) + break; + + case 'chipset': + endpoint = '/specifications/chipset' + this.setState({ + type: 'Чипсет' + }) + break; + + case 'cpu': + endpoint = '/specifications/cpu' + this.setState({ + type: 'Процесор' + }) + break; + + + case 'operatingsystem': + endpoint = '/specifications/operatingsystem' + this.setState({ + type: 'Оперативен систем' + }) + break; + + + case 'color': + endpoint = '/specifications/color' + this.setState({ + type: 'Боја' + }) + break; + + case 'battery': + endpoint = '/specifications/battery' + this.setState({ + type: 'Батерија' + }) + break; + + default: + break; } @@ -63,22 +133,82 @@ pickedItems: typeof value === 'string' ? value.split(',') : value }, ()=>{ - if(this.props.type == 'brands') - { - this.props.changeHandler({brands: this.state.pickedItems.join(',')}) + + switch (this.props.type) { + case 'brands': + this.props.changeHandler({brands: this.state.pickedItems.join(',')}) + localStorage.setItem('brands', this.state.pickedItems.join(',')) + break; + + case 'shops': + this.props.changeHandler({shops: this.state.pickedItems.join(',')}) + localStorage.setItem('shops', this.state.pickedItems.join(',')) + break; + + case 'ram': + this.props.changeHandler({ram: this.state.pickedItems.join(',')}) + localStorage.setItem('ram', this.state.pickedItems.join(',')) + break; + case 'rom': + this.props.changeHandler({rom: this.state.pickedItems.join(',')}) + localStorage.setItem('rom', this.state.pickedItems.join(',')) + break; + case 'frontcamera': + this.props.changeHandler({frontcamera: this.state.pickedItems.join(',')}) + localStorage.setItem('frontcamera', this.state.pickedItems.join(',')) + break; + + case 'backcamera': + this.props.changeHandler({backcamera: this.state.pickedItems.join(',')}) + localStorage.setItem('backcamera', this.state.pickedItems.join(',')) + break; + + case 'chipset': + this.props.changeHandler({chipset: this.state.pickedItems.join(',')}) + localStorage.setItem('chipset', this.state.pickedItems.join(',')) + break; + + case 'cpu': + this.props.changeHandler({cpu: this.state.pickedItems.join(',')}) + localStorage.setItem('cpu', this.state.pickedItems.join(',')) + break; + + case 'operatingsystem': + this.props.changeHandler({operatingsystem: this.state.pickedItems.join(',')}) + localStorage.setItem('operatingsystem', this.state.pickedItems.join(',')) + break; + + case 'color': + this.props.changeHandler({color: this.state.pickedItems.join(',')}) + localStorage.setItem('color', this.state.pickedItems.join(',')) + break; + + case 'battery': + this.props.changeHandler({battery: this.state.pickedItems.join(',')}) + localStorage.setItem('battery', this.state.pickedItems.join(',')) + break; + + default: + break; } + // if(this.props.type == 'brands') + // { + // this.props.changeHandler({brands: this.state.pickedItems.join(',')}) + // } - if(this.props.type == 'shops') - { - this.props.changeHandler({shops: this.state.pickedItems.join(',')}) - } + // if(this.props.type == 'shops') + // { + // this.props.changeHandler({shops: this.state.pickedItems.join(',')}) + // } }) + + }; - + // sx={{ m: 1, width: 250 }} kaj formcontrol render() { return (
- + {this.state.type} + {localStorage.getItem('token') ? : <>} +