Index: phonelux-backend/src/main/java/finki/it/phoneluxbackend/controllers/PhoneController.java =================================================================== --- phonelux-backend/src/main/java/finki/it/phoneluxbackend/controllers/PhoneController.java (revision 527b93f9d268998c8652c2f6a916a078873fb0c6) +++ phonelux-backend/src/main/java/finki/it/phoneluxbackend/controllers/PhoneController.java (revision e5b84dc652434cab61718f38889fc36867569866) @@ -22,8 +22,11 @@ // handle request parameters for filtering phones @GetMapping(path = "/phones") - public List getPhones(){ - return phoneService.getPhones().stream() - .sorted(Comparator.comparing(Phone::getTotal_offers).reversed()) - .collect(Collectors.toList()); + public List getPhones(@RequestParam(name = "shops", required = false) String shops, + @RequestParam(name = "brands", required = false) String brands, + @RequestParam(name = "sortBy", required = false) String sortBy, + @RequestParam(name = "priceRange", required = false) String priceRange, + @RequestParam(name = "searchValue", required = false) String searchValue){ + + return phoneService.getPhones(shops,brands,sortBy,priceRange,searchValue); } Index: phonelux-backend/src/main/java/finki/it/phoneluxbackend/controllers/PhoneOfferController.java =================================================================== --- phonelux-backend/src/main/java/finki/it/phoneluxbackend/controllers/PhoneOfferController.java (revision 527b93f9d268998c8652c2f6a916a078873fb0c6) +++ phonelux-backend/src/main/java/finki/it/phoneluxbackend/controllers/PhoneOfferController.java (revision e5b84dc652434cab61718f38889fc36867569866) @@ -16,13 +16,17 @@ @RestController @AllArgsConstructor -@RequestMapping(path = "/phones/offers/{phoneId}") public class PhoneOfferController { private final PhoneOfferService phoneOfferService; private final PhoneService phoneService; - @GetMapping + @GetMapping(path = "/phones/offers/{phoneId}") public List getOffersForPhone(@PathVariable("phoneId") Long phoneId){ return phoneOfferService.getPhoneOffersForPhone(phoneId); } + @GetMapping(path = "/phoneoffer/{offerId}") + public PhoneOffer getPhoneOffer(@PathVariable("offerId") Long offerId){ + return phoneOfferService.getPhoneOffer(offerId); + } + } Index: phonelux-backend/src/main/java/finki/it/phoneluxbackend/security/CustomAuthenticationFilter.java =================================================================== --- phonelux-backend/src/main/java/finki/it/phoneluxbackend/security/CustomAuthenticationFilter.java (revision 527b93f9d268998c8652c2f6a916a078873fb0c6) +++ phonelux-backend/src/main/java/finki/it/phoneluxbackend/security/CustomAuthenticationFilter.java (revision e5b84dc652434cab61718f38889fc36867569866) @@ -33,5 +33,5 @@ @Override public Authentication attemptAuthentication(HttpServletRequest request, HttpServletResponse response) throws AuthenticationException { - String email = request.getParameter("email"); // mozda ke treba da se smeni vo username + String email = request.getParameter("email"); String password = request.getParameter("password"); UsernamePasswordAuthenticationToken authenticationToken = new UsernamePasswordAuthenticationToken(email,password); @@ -46,5 +46,5 @@ String access_token = JWT.create() .withSubject(user.getEmail()) - .withExpiresAt(new Date(System.currentTimeMillis() + 10 * 60 * 1000)) + .withExpiresAt(new Date(System.currentTimeMillis() + 10 * 60 * 100000)) // approx. 16.5 hours .withIssuer(request.getRequestURL().toString()) .withClaim("role", user.getAuthorities().stream() Index: phonelux-backend/src/main/java/finki/it/phoneluxbackend/services/PhoneOfferService.java =================================================================== --- phonelux-backend/src/main/java/finki/it/phoneluxbackend/services/PhoneOfferService.java (revision 527b93f9d268998c8652c2f6a916a078873fb0c6) +++ phonelux-backend/src/main/java/finki/it/phoneluxbackend/services/PhoneOfferService.java (revision e5b84dc652434cab61718f38889fc36867569866) @@ -30,4 +30,14 @@ } + public PhoneOffer getPhoneOffer(Long offerId){ + boolean exists = phoneOfferRepository.existsById(offerId); + + if(!exists) + throw new IllegalStateException("Phone offer with id "+offerId+" does not exist"); + + return phoneOfferRepository.findById(offerId).get(); + } + + public List getShops() { return phoneOfferRepository.findAll().stream() Index: phonelux-backend/src/main/java/finki/it/phoneluxbackend/services/PhoneService.java =================================================================== --- phonelux-backend/src/main/java/finki/it/phoneluxbackend/services/PhoneService.java (revision 527b93f9d268998c8652c2f6a916a078873fb0c6) +++ phonelux-backend/src/main/java/finki/it/phoneluxbackend/services/PhoneService.java (revision e5b84dc652434cab61718f38889fc36867569866) @@ -10,4 +10,5 @@ import java.util.Comparator; import java.util.List; +import java.util.Objects; import java.util.stream.Collectors; @@ -22,6 +23,55 @@ // TODO: insert logic to filter - public List getPhones(){ - return phoneRepository.findAll(); + public List getPhones(String shops, String brands, String sortBy, String priceRange, String searchValue){ + List phones = phoneRepository.findAll(); + + + if(brands != null) + { + phones = phones.stream() + .filter(phone -> brands.contains(phone.getBrand())).collect(Collectors.toList()); + } + + if(shops != null) + { + phones = phones.stream() + .filter(phone -> phone.getPhoneOffers().stream().anyMatch(offer -> shops.contains(offer.getOffer_shop()))) + .collect(Collectors.toList()); + } + + if(priceRange != null) + { + int lowestPrice = Integer.parseInt(priceRange.split("-")[0]); + int highestPrice = Integer.parseInt(priceRange.split("-")[1]); + phones = phones.stream() + .filter(phone -> phone.getLowestPrice() >= lowestPrice && phone.getLowestPrice() <= highestPrice) + .collect(Collectors.toList()); + } + + if(searchValue != null && !Objects.equals(searchValue.stripIndent(), "")){ + phones = phones.stream() + .filter(phone -> phone.getBrand().toLowerCase().contains(searchValue.stripIndent().toLowerCase()) + || phone.getModel().toLowerCase().contains(searchValue.stripIndent().toLowerCase())) + .collect(Collectors.toList()); + } + + phones = phones.stream().sorted(Comparator.comparing(Phone::getTotal_offers).reversed()) + .collect(Collectors.toList()); + if(sortBy != null) + { + if(sortBy.equals("ascending")) { + phones = phones.stream() + .sorted(Comparator.comparing(Phone::getLowestPrice)) + .collect(Collectors.toList()); + } + + if(sortBy.equals("descending")) { + phones = phones.stream() + .sorted(Comparator.comparing(Phone::getLowestPrice).reversed()) + .collect(Collectors.toList()); + } + } + + return phones; } Index: phonelux-backend/src/main/java/finki/it/phoneluxbackend/services/UserService.java =================================================================== --- phonelux-backend/src/main/java/finki/it/phoneluxbackend/services/UserService.java (revision 527b93f9d268998c8652c2f6a916a078873fb0c6) +++ phonelux-backend/src/main/java/finki/it/phoneluxbackend/services/UserService.java (revision e5b84dc652434cab61718f38889fc36867569866) @@ -40,8 +40,8 @@ User userToRegister = userRepository.findByEmail(user.getEmail()).get(); if(userToRegister.getEnabled()) { - return ResponseEntity.badRequest().body("Error: Email "+user.getEmail()+" already taken!"); + return ResponseEntity.badRequest().body("Error:Е-маил адресата е веќе зафатена!"); } else { - return ResponseEntity.badRequest().body("Email "+user.getEmail()+" not activated!" ); + return ResponseEntity.badRequest().body("Error:Профилот не е активиран. Потврдете на вашата е-маил адреса!" ); } } Index: phonelux-frontend/package-lock.json =================================================================== --- phonelux-frontend/package-lock.json (revision 527b93f9d268998c8652c2f6a916a078873fb0c6) +++ phonelux-frontend/package-lock.json (revision e5b84dc652434cab61718f38889fc36867569866) @@ -20,4 +20,5 @@ "@testing-library/react": "^13.3.0", "@testing-library/user-event": "^13.5.0", + "@tippyjs/react": "^4.2.6", "axios": "^0.27.2", "react": "^18.2.0", @@ -4092,4 +4093,16 @@ } }, + "node_modules/@tippyjs/react": { + "version": "4.2.6", + "resolved": "https://registry.npmjs.org/@tippyjs/react/-/react-4.2.6.tgz", + "integrity": "sha512-91RicDR+H7oDSyPycI13q3b7o4O60wa2oRbjlz2fyRLmHImc4vyDwuUP8NtZaN0VARJY5hybvDYrFzhY9+Lbyw==", + "dependencies": { + "tippy.js": "^6.3.1" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/@tootallnate/once": { "version": "1.1.2", @@ -16095,4 +16108,12 @@ "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz", "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==" + }, + "node_modules/tippy.js": { + "version": "6.3.7", + "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.7.tgz", + "integrity": "sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==", + "dependencies": { + "@popperjs/core": "^2.9.0" + } }, "node_modules/tmpl": { @@ -20076,4 +20097,12 @@ } }, + "@tippyjs/react": { + "version": "4.2.6", + "resolved": "https://registry.npmjs.org/@tippyjs/react/-/react-4.2.6.tgz", + "integrity": "sha512-91RicDR+H7oDSyPycI13q3b7o4O60wa2oRbjlz2fyRLmHImc4vyDwuUP8NtZaN0VARJY5hybvDYrFzhY9+Lbyw==", + "requires": { + "tippy.js": "^6.3.1" + } + }, "@tootallnate/once": { "version": "1.1.2", @@ -28712,4 +28741,12 @@ "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==" }, + "tippy.js": { + "version": "6.3.7", + "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.7.tgz", + "integrity": "sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==", + "requires": { + "@popperjs/core": "^2.9.0" + } + }, "tmpl": { "version": "1.0.5", Index: phonelux-frontend/package.json =================================================================== --- phonelux-frontend/package.json (revision 527b93f9d268998c8652c2f6a916a078873fb0c6) +++ phonelux-frontend/package.json (revision e5b84dc652434cab61718f38889fc36867569866) @@ -15,4 +15,5 @@ "@testing-library/react": "^13.3.0", "@testing-library/user-event": "^13.5.0", + "@tippyjs/react": "^4.2.6", "axios": "^0.27.2", "react": "^18.2.0", Index: phonelux-frontend/src/App.js =================================================================== --- phonelux-frontend/src/App.js (revision 527b93f9d268998c8652c2f6a916a078873fb0c6) +++ phonelux-frontend/src/App.js (revision e5b84dc652434cab61718f38889fc36867569866) @@ -1,17 +1,10 @@ import { BrowserRouter, Routes, Route } from "react-router-dom"; import './App.css'; -import GroupedFiltersComponent from "./components/GroupedFiltersComponent/GroupedFiltersComponent"; -import HeaderComponent from "./components/HeaderComponent/HeaderComponent"; -import InputFormComponent from "./components/LoginRegisterComponents/InputFormComponent"; -import LoginFormComponent from "./components/LoginRegisterComponents/LoginFormComponent"; -import RegisterFormComponent from "./components/LoginRegisterComponents/RegisterFormComponent"; -import PaginationComponent from "./components/PaginationComponent/PaginationComponent" -import PhoneCardComponent from "./components/PhoneCardComponent/PhoneCardComponent"; -import PhoneCardGridComponent from "./components/PhoneCardGridComponent/PhoneCardGridComponent"; import HomepageComponent from "./components/HomepageComponent" import PhonePageComponent from "./components/PhonePageComponent"; -import SortByComponent from "./components/FiltersComponents/SortByComponent"; import LoginPageComponent from "./components/LoginPageComponent" import RegisterPageComponent from "./components/RegisterPageComponent"; +import PhoneOfferDetailsComponent from "./components/PhoneOfferDetailsComponent/PhoneOfferDetailsComponent"; + @@ -21,11 +14,9 @@ - {/* { }/> } */} }/> }/> }/> } /> + } /> Index: phonelux-frontend/src/components/DataManager.js =================================================================== --- phonelux-frontend/src/components/DataManager.js (revision e5b84dc652434cab61718f38889fc36867569866) +++ phonelux-frontend/src/components/DataManager.js (revision e5b84dc652434cab61718f38889fc36867569866) @@ -0,0 +1,17 @@ +import React from 'react' + +class DataManager{ + + filters = null; + + setFilters = (filters) => { + this.filters = filters + } + + +} + + +const Data = new DataManager(); + +export default Data; Index: phonelux-frontend/src/components/FiltersComponents/FilterPriceComponent.js =================================================================== --- phonelux-frontend/src/components/FiltersComponents/FilterPriceComponent.js (revision 527b93f9d268998c8652c2f6a916a078873fb0c6) +++ phonelux-frontend/src/components/FiltersComponents/FilterPriceComponent.js (revision e5b84dc652434cab61718f38889fc36867569866) @@ -18,5 +18,4 @@ componentDidMount(){ - axios.get('/lowestPrice') Index: phonelux-frontend/src/components/FiltersComponents/SortByComponent.css =================================================================== --- phonelux-frontend/src/components/FiltersComponents/SortByComponent.css (revision 527b93f9d268998c8652c2f6a916a078873fb0c6) +++ phonelux-frontend/src/components/FiltersComponents/SortByComponent.css (revision e5b84dc652434cab61718f38889fc36867569866) @@ -10,3 +10,4 @@ width: 15%; background-color: #e6f8ef; + margin-right: 15px; } Index: phonelux-frontend/src/components/GroupedFiltersComponent/GroupedFiltersComponent.js =================================================================== --- phonelux-frontend/src/components/GroupedFiltersComponent/GroupedFiltersComponent.js (revision 527b93f9d268998c8652c2f6a916a078873fb0c6) +++ phonelux-frontend/src/components/GroupedFiltersComponent/GroupedFiltersComponent.js (revision e5b84dc652434cab61718f38889fc36867569866) @@ -21,8 +21,4 @@ } - - componentDidMount(){ - - } render() { Index: phonelux-frontend/src/components/HeaderComponent/HeaderComponent.css =================================================================== --- phonelux-frontend/src/components/HeaderComponent/HeaderComponent.css (revision 527b93f9d268998c8652c2f6a916a078873fb0c6) +++ phonelux-frontend/src/components/HeaderComponent/HeaderComponent.css (revision e5b84dc652434cab61718f38889fc36867569866) @@ -8,3 +8,11 @@ width: 310px; height: 200px; + margin-top: -65px; } + +.homepage-navbar-component{ + width: 100%; + display: flex; + justify-content: end; + background-color: #B6E2C8; +} Index: phonelux-frontend/src/components/HeaderComponent/HeaderComponent.js =================================================================== --- phonelux-frontend/src/components/HeaderComponent/HeaderComponent.js (revision 527b93f9d268998c8652c2f6a916a078873fb0c6) +++ phonelux-frontend/src/components/HeaderComponent/HeaderComponent.js (revision e5b84dc652434cab61718f38889fc36867569866) @@ -2,4 +2,5 @@ import { Link } from 'react-router-dom' import logo from '../../images/logo_phonelux.png' +import NavbarComponent from '../NavbarComponent/NavbarComponent' import './HeaderComponent.css' @@ -7,4 +8,8 @@ render() { return ( + <> +
+ +
@@ -12,4 +17,5 @@
+ ) } Index: phonelux-frontend/src/components/HomepageComponent.js =================================================================== --- phonelux-frontend/src/components/HomepageComponent.js (revision 527b93f9d268998c8652c2f6a916a078873fb0c6) +++ phonelux-frontend/src/components/HomepageComponent.js (revision e5b84dc652434cab61718f38889fc36867569866) @@ -3,4 +3,5 @@ import HeaderComponent from './HeaderComponent/HeaderComponent' import PhoneCardGridComponent from './PhoneCardGridComponent/PhoneCardGridComponent' + export class HomepageComponent extends Component { @@ -10,9 +11,9 @@ this.state = { - shops: null, - brands: null, - priceRange: null, - searchValue: null, - sortBy: null + shops: '', + brands: '', + priceRange: '', + searchValue: '', + sortBy: 'mostPopular' } } @@ -46,4 +47,5 @@ searchValue: e.searchValue }) + } @@ -56,4 +58,5 @@ } + render() { return ( @@ -61,5 +64,5 @@ - + ) Index: phonelux-frontend/src/components/LoginRegisterComponents/LoginFormComponent.css =================================================================== --- phonelux-frontend/src/components/LoginRegisterComponents/LoginFormComponent.css (revision 527b93f9d268998c8652c2f6a916a078873fb0c6) +++ phonelux-frontend/src/components/LoginRegisterComponents/LoginFormComponent.css (revision e5b84dc652434cab61718f38889fc36867569866) @@ -16,5 +16,5 @@ width: fit-content; box-shadow: 11px 12px 13px 12px rgb(207, 207, 207); - padding-top: 30px; + padding-top: 20px; border-radius: 60px; background-color: white; @@ -23,5 +23,5 @@ } .loginform-imgs-div { - padding-top: 20px; + padding-top: 10px; justify-content: center; display: flex; @@ -43,5 +43,5 @@ .loginform-sub-main-div > div{ - margin-bottom: 50px; + margin-bottom: 30px; margin-left: 80px; margin-right: 80px; @@ -137,10 +137,27 @@ color: blue; } - .register-link > a{ - color: rgb(53, 99, 70); - text-decoration: none; + + + + .registerform-link{ + color: rgb(53, 99, 70); + text-decoration: none; } - .register-link > a:hover{ - color: blue; + .registerform-link:hover{ + color: blue; } + + .loginform-message-wrapper{ + display: flex; + justify-content: center; + } + + .loginform-error-message{ + color: red; + border: 1px solid red; + width: fit-content; + padding: 10px; + border-radius: 50px; + background-color: rgb(251, 224, 224); + } Index: phonelux-frontend/src/components/LoginRegisterComponents/LoginFormComponent.js =================================================================== --- phonelux-frontend/src/components/LoginRegisterComponents/LoginFormComponent.js (revision 527b93f9d268998c8652c2f6a916a078873fb0c6) +++ phonelux-frontend/src/components/LoginRegisterComponents/LoginFormComponent.js (revision e5b84dc652434cab61718f38889fc36867569866) @@ -17,4 +17,5 @@ email: '', password: '', + serverResponse: '' } } @@ -42,9 +43,12 @@ axios(config) - .then(function (response) { - console.log(response.data); + .then((response) => { + // store access token in local storage, redirect to homepage + console.log(response.data) }) - .catch(function (error) { - console.log(error); + .catch((error) => { + this.setState({ + serverResponse: 'error' + }) }); @@ -67,5 +71,6 @@
- + {this.state.serverResponse == 'error' ?
+
Невалидна е-маил адреса или лозинка!
: <>}
@@ -93,5 +98,5 @@
-

Регистрирај се

+

Регистрирај се

Index: phonelux-frontend/src/components/LoginRegisterComponents/RegisterFormComponent.css =================================================================== --- phonelux-frontend/src/components/LoginRegisterComponents/RegisterFormComponent.css (revision 527b93f9d268998c8652c2f6a916a078873fb0c6) +++ phonelux-frontend/src/components/LoginRegisterComponents/RegisterFormComponent.css (revision e5b84dc652434cab61718f38889fc36867569866) @@ -23,5 +23,5 @@ } .registerform-imgs-div { - padding-top: 20px; + padding-top: 5px; justify-content: center; display: flex; @@ -158,4 +158,26 @@ } + .registerform-message-wrapper{ + display: flex; + justify-content: center; + } + + .registerform-error-message{ + color: red; + border: 1px solid red; + width: fit-content; + padding: 10px; + border-radius: 50px; + background-color: rgb(251, 224, 224); + } + + .registerform-success-message{ + color: green; + border: 1px solid green; + width: fit-content; + padding: 10px; + border-radius: 50px; + background-color: #B6E2C8; + } Index: phonelux-frontend/src/components/LoginRegisterComponents/RegisterFormComponent.js =================================================================== --- phonelux-frontend/src/components/LoginRegisterComponents/RegisterFormComponent.js (revision 527b93f9d268998c8652c2f6a916a078873fb0c6) +++ phonelux-frontend/src/components/LoginRegisterComponents/RegisterFormComponent.js (revision e5b84dc652434cab61718f38889fc36867569866) @@ -20,4 +20,5 @@ password: '', confirmPassword:'', + serverResponse: '' } } @@ -43,9 +44,13 @@ axios(config) - .then(function (response) { - console.log(response); + .then((response) => { + this.setState({ + serverResponse: response.data + }) }) - .catch(function (error) { - console.log(error); + .catch((error) => { + this.setState({ + serverResponse: error.response.data + }) }); @@ -59,6 +64,4 @@ - - render() { @@ -69,4 +72,24 @@
+ + {(() => { + if(this.state.serverResponse == '') + { + return <> + } + + if(this.state.serverResponse != '' && this.state.serverResponse.includes('Error')) + { + return
+
{this.state.serverResponse.split(':')[1]}
+ } + + if(this.state.serverResponse != '' && this.state.serverResponse.includes('token')) + { + return
+
Вашата регистрација е во тек. Потврдете на вашата е-маил адреса!
+ } + + })()}
Index: phonelux-frontend/src/components/NavbarComponent/NavbarComponent.css =================================================================== --- phonelux-frontend/src/components/NavbarComponent/NavbarComponent.css (revision e5b84dc652434cab61718f38889fc36867569866) +++ phonelux-frontend/src/components/NavbarComponent/NavbarComponent.css (revision e5b84dc652434cab61718f38889fc36867569866) @@ -0,0 +1,16 @@ +.phonelux-navbar{ + width: fit-content; + margin-right: 20px; +} + +.navbar-account-box-icon{ + font-size: 50px; + margin-top: 10px; +} + +.navbar-account-box-icon:hover{ + cursor: pointer; +} + + +/* style={{ fontSize: '50px', marginTop: '10px' }} */ Index: phonelux-frontend/src/components/NavbarComponent/NavbarComponent.js =================================================================== --- phonelux-frontend/src/components/NavbarComponent/NavbarComponent.js (revision e5b84dc652434cab61718f38889fc36867569866) +++ phonelux-frontend/src/components/NavbarComponent/NavbarComponent.js (revision e5b84dc652434cab61718f38889fc36867569866) @@ -0,0 +1,35 @@ +import React, { Component } from 'react' +import './NavbarComponent.css' +import AccountBoxIcon from '@mui/icons-material/AccountBox'; +import { style } from '@mui/system'; +import Tippy from '@tippyjs/react'; +import 'tippy.js/dist/tippy.css' +import { Link } from 'react-router-dom'; +import PersonIcon from '@mui/icons-material/Person'; +import LogoutIcon from '@mui/icons-material/Logout'; + +export class NavbarComponent extends Component { + + constructor(props) { + super(props) + + this.state = { + profileSectionOpen: false + } + } + + render() { + return ( +
+ + + + + {/* favourite offers icon goes here */} + +
+ ) + } +} + +export default NavbarComponent Index: onelux-frontend/src/components/PaginationComponent/PaginationComponent.css =================================================================== --- phonelux-frontend/src/components/PaginationComponent/PaginationComponent.css (revision 527b93f9d268998c8652c2f6a916a078873fb0c6) +++ (revision ) @@ -1,7 +1,0 @@ -.pagination-wrapper{ - margin-top: 40px; - padding-bottom: 40px; - display: flex; - justify-content: center; -} - Index: onelux-frontend/src/components/PaginationComponent/PaginationComponent.js =================================================================== --- phonelux-frontend/src/components/PaginationComponent/PaginationComponent.js (revision 527b93f9d268998c8652c2f6a916a078873fb0c6) +++ (revision ) @@ -1,26 +1,0 @@ -import * as React from 'react'; -import Pagination from '@mui/material/Pagination'; -import Stack from '@mui/material/Stack'; -import "./PaginationComponent.css" - -export class PaginationComponent extends React.Component { - constructor(props) { - super(props) - - this.state = { - - } - } - - render() { - return ( -
- this.props.changePageHandler(event.currentTarget.textContent)} - count={this.props.numberOfPages} color="primary" /> -
- ) - } -} - -export default PaginationComponent - Index: phonelux-frontend/src/components/PhoneCardComponent/PhoneCardComponent.css =================================================================== --- phonelux-frontend/src/components/PhoneCardComponent/PhoneCardComponent.css (revision 527b93f9d268998c8652c2f6a916a078873fb0c6) +++ phonelux-frontend/src/components/PhoneCardComponent/PhoneCardComponent.css (revision e5b84dc652434cab61718f38889fc36867569866) @@ -1,14 +1,20 @@ .phonecard{ - background-color: #B6E2C8; + /* background-color: #B6E2C8; */ padding:15px; justify-items: center; + padding-top: 35px; width: 250px; height: 400px; border-radius: 25px; + border: 3px solid #B6E2C8; + border-radius: 50px; } .phonecard:hover{ - background-color: #84c69f; + /* background-color: #B6E2C8; */ cursor: pointer; + 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 ; + border-radius: 50px; } @@ -26,11 +32,20 @@ .phonecard-lowestprice-header, .phonecard-totaloffers-header{ - margin-top: -10px; - color: rgb(34, 106, 106); - text-align: center; + margin-top: 20px; + text-align: right; +} + +.phonecard-totaloffers-header{ + margin-top: -15px; } .phonecard-model-header{ text-align: center; + border: 1px solid rgb(161, 165, 163); + border-radius: 20px 100px; + background-color: rgb(222, 228, 225); + padding: 5px; + padding-right: 10px; + } @@ -44,4 +59,12 @@ } +.phonecard-lowestprice-header{ + /* color: rgb(24, 117, 24); */ +} + +.phonecard-totaloffers-header{ + /* color: rgb(24, 117, 24); */ +} + .phonecard > h5 > p{ display: inline; Index: phonelux-frontend/src/components/PhoneCardComponent/PhoneCardComponent.js =================================================================== --- phonelux-frontend/src/components/PhoneCardComponent/PhoneCardComponent.js (revision 527b93f9d268998c8652c2f6a916a078873fb0c6) +++ phonelux-frontend/src/components/PhoneCardComponent/PhoneCardComponent.js (revision e5b84dc652434cab61718f38889fc36867569866) @@ -24,5 +24,5 @@

{this.props.model}

Најниска цена:

{this.props.lowestPrice}

ден.
-
Вкупно понуди:

{this.props.total_offers}

+
Вкупно понуди:

{this.props.total_offers}

Index: phonelux-frontend/src/components/PhoneCardGridComponent/PhoneCardGridComponent.css =================================================================== --- phonelux-frontend/src/components/PhoneCardGridComponent/PhoneCardGridComponent.css (revision 527b93f9d268998c8652c2f6a916a078873fb0c6) +++ phonelux-frontend/src/components/PhoneCardGridComponent/PhoneCardGridComponent.css (revision e5b84dc652434cab61718f38889fc36867569866) @@ -15,3 +15,11 @@ } +.pagination-wrapper{ + margin-top: 40px; + padding-bottom: 40px; + display: flex; + justify-content: center; +} + + Index: phonelux-frontend/src/components/PhoneCardGridComponent/PhoneCardGridComponent.js =================================================================== --- phonelux-frontend/src/components/PhoneCardGridComponent/PhoneCardGridComponent.js (revision 527b93f9d268998c8652c2f6a916a078873fb0c6) +++ phonelux-frontend/src/components/PhoneCardGridComponent/PhoneCardGridComponent.js (revision e5b84dc652434cab61718f38889fc36867569866) @@ -1,6 +1,5 @@ -import { Grid } from '@mui/material' +import { Grid, Pagination } from '@mui/material' import axios from 'axios' import React, { Component } from 'react' -import PaginationComponent from '../PaginationComponent/PaginationComponent' import '../PhoneCardComponent/PhoneCardComponent' import PhoneCardComponent from '../PhoneCardComponent/PhoneCardComponent' @@ -15,5 +14,4 @@ this.state = { phones: [], - loading: true, currentPage: 1, phonesPerPage: 12, @@ -24,13 +22,50 @@ } + componentDidUpdate(prevProps) { + if(JSON.stringify(prevProps) != JSON.stringify(this.props)){ + let filters = '?' + + if(this.props.shops) + { + filters += 'shops='+this.props.shops+'&' + } + if(this.props.brands) + { + filters += 'brands='+this.props.brands+'&' + } + if(this.props.priceRange) + { + filters += 'priceRange='+this.props.priceRange+'&' + } + if(this.props.searchValue) + { + filters += 'searchValue='+this.props.searchValue+'&' + } + + if(this.props.sortBy) + { + filters += 'sortBy='+this.props.sortBy+'&' + } + + axios.get('/phones'+filters) + .then(response => { + this.setState({ + phones: response.data, + numberOfPages: Math.ceil(response.data.length / this.state.phonesPerPage) + },(e) => this.setNewPage(e,this.state.currentPage)) + } + ) + .catch(error => console.log(error)) + console.log(filters) + } + } + componentDidMount() { - axios.get('/phones') .then(response => { this.setState({ phones: response.data, - loading: false, numberOfPages: Math.ceil(response.data.length / this.state.phonesPerPage) - },() => this.setNewPage(this.state.currentPage)) + },(e) => this.setNewPage(e,this.state.currentPage)) } ) @@ -38,17 +73,8 @@ } - setNewPage = (newPage) => { - if(newPage == '') - { - newPage = this.state.currentPage-1 - } - if(newPage == '') - { - newPage = this.state.currentPage+1 - } + setNewPage = (event,page) => { - - const indexOfLastPhone = parseInt(newPage) * this.state.phonesPerPage; + const indexOfLastPhone = parseInt(page) * this.state.phonesPerPage; const indexOfFirstPhone = indexOfLastPhone - this.state.phonesPerPage; @@ -56,5 +82,5 @@ this.setState({ - currentPage: parseInt(newPage), + currentPage: parseInt(page), currentPhones: currPhones }) @@ -63,4 +89,5 @@ render() { + return (
@@ -71,19 +98,15 @@ spacing={2}> - {this.state.currentPhones.map((phone) => - + )} - {/* - - */} - + +
+ +
+
) Index: phonelux-frontend/src/components/PhoneOfferComponent/PhoneOfferComponent.css =================================================================== --- phonelux-frontend/src/components/PhoneOfferComponent/PhoneOfferComponent.css (revision 527b93f9d268998c8652c2f6a916a078873fb0c6) +++ phonelux-frontend/src/components/PhoneOfferComponent/PhoneOfferComponent.css (revision e5b84dc652434cab61718f38889fc36867569866) @@ -0,0 +1,28 @@ +.phone-with-offers-table-row{ + font-size: 18px; +} + +.phone-with-offers-table-row > td:first-of-type { + font-weight: bold; +} + +.phone-offer-specifications-button{ + font-size: 17px; + padding: 10px; + background-color: #B6E2C8; + border-radius: 20px; + border: 1px solid black; +} + +.phone-with-offers-table-row td:last-of-type{ + display: flex; + justify-content: center; + flex-wrap: wrap; +} + +.phone-offer-specifications-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 ; +} Index: phonelux-frontend/src/components/PhoneOfferComponent/PhoneOfferComponent.js =================================================================== --- phonelux-frontend/src/components/PhoneOfferComponent/PhoneOfferComponent.js (revision 527b93f9d268998c8652c2f6a916a078873fb0c6) +++ phonelux-frontend/src/components/PhoneOfferComponent/PhoneOfferComponent.js (revision e5b84dc652434cab61718f38889fc36867569866) @@ -1,3 +1,5 @@ import React, { Component } from 'react' +import { Link } from 'react-router-dom' +import './PhoneOfferComponent.css' export class PhoneOfferComponent extends Component { @@ -13,11 +15,15 @@ render() { - console.log(this.props) + // console.log(this.props) return ( {this.props.offer_shop} - {this.props.offer_name} + {this.props.offer_name} {this.props.price} ден. - + + + + + ) @@ -27,24 +33,2 @@ export default PhoneOfferComponent - - - -// back_camera: null -// battery: null -// chipset: null -// color: null -// cpu: null -// front_camera: null -// id: 486 -// image_url: "https://setec.mk/image/cache/catalog/Product/51841_0-228x228.jpg" -// is_validated: false -// last_updated: "2022-07-26T22:00:00.000+00:00" -// 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…" -// offer_name: "Apple iPhone 13 128GB Midnight" -// offer_shop: "Setec" -// offer_shop_code: "51841" -// offer_url: "https://setec.mk/index.php?route=product/product&path=10066_10067&product_id=51841" -// operating_system: null -// price: 63990 -// ram_memory: null -// rom_memory: null Index: phonelux-frontend/src/components/PhoneOfferDetailsComponent/PhoneOfferDetailsComponent.css =================================================================== --- phonelux-frontend/src/components/PhoneOfferDetailsComponent/PhoneOfferDetailsComponent.css (revision e5b84dc652434cab61718f38889fc36867569866) +++ phonelux-frontend/src/components/PhoneOfferDetailsComponent/PhoneOfferDetailsComponent.css (revision e5b84dc652434cab61718f38889fc36867569866) @@ -0,0 +1,72 @@ +.phone-offer-details-main{ + width: 100%; +} + +.phone-offer-details-table th{ + text-align: center; + font-size: 38px; + padding: 20px; +} + +.phone-offer-details-table thead tr{ + background-color: #a6c9ab; +} + +.phone-offer-details-table-row:nth-of-type(even){ + background-color: #eef2f0; +} + +.phone-offer-details-table-row{ + border: 1px solid gainsboro; + +} + +.phone-offer-details-table{ + border-collapse: collapse; + width: 80%; + table-layout: fixed; +} + +.phone-offer-details-table-row td{ + text-align: center; + word-wrap: break-word; + font-size: 22px; + padding: 20px; +} + +.phone-offer-details-table-wrapper{ + display: flex; + justify-content: center; + margin-top: 30px; +} + +.phone-offer-details-table-section{ + display: flex; + justify-content: center; + margin-bottom: 50px; +} + +.phone-offer-details-table-row td a{ + text-decoration: none; +} + +.phone-offer-details-table-row td a:hover{ + color: rgb(40, 117, 40); +} + +.phone-offer-details-last-updated-header{ + width: 25%; + margin-left: 20px; + padding: 10px; + border: 1px solid rgb(199, 193, 193); + background-color: #B6E2C8; + border-radius: 50px; + text-align: center; +} + +.phone-offer-details-last-updated-wrapper{ + display: flex; + justify-content: start; +} + + Index: phonelux-frontend/src/components/PhoneOfferDetailsComponent/PhoneOfferDetailsComponent.js =================================================================== --- phonelux-frontend/src/components/PhoneOfferDetailsComponent/PhoneOfferDetailsComponent.js (revision e5b84dc652434cab61718f38889fc36867569866) +++ phonelux-frontend/src/components/PhoneOfferDetailsComponent/PhoneOfferDetailsComponent.js (revision e5b84dc652434cab61718f38889fc36867569866) @@ -0,0 +1,118 @@ +import React, { Component } from 'react' +import axios from 'axios' +import './PhoneOfferDetailsComponent.css' +import HeaderComponent from '../HeaderComponent/HeaderComponent' + + +export class PhoneOfferDetailsComponent extends Component { + + constructor(props) { + super(props) + + this.state = { + offerId: window.location.href.split('/')[4], + offer: null + } + } + + componentDidMount(){ + axios.get('/phoneoffer/'+this.state.offerId) + .then(response => { + this.setState({ + offer: response.data + }) + }).catch(error => console.log(error)) + } + + render() { + console.log(this.state) + return ( +
+ +
+

Последно ажурирана: {this.state.offer == null || + this.state.offer.last_updated == null ? '#' : this.state.offer.last_updated.split('T')[0]}

+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Детали за понудата
Понуда{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.price == null ? '/' : this.state.offer.price+' ден.'}
Предна камера{this.state.offer == null || + this.state.offer.front_camera == null ? '/' : this.state.offer.front_camera}
Задна камера{this.state.offer == null || + this.state.offer.back_camera == null ? '/' : this.state.offer.back_camera}
РОМ меморија{this.state.offer == null || + this.state.offer.rom_memory == null ? '/' : this.state.offer.rom_memory}
РАМ меморија{this.state.offer == null || + this.state.offer.ram_memory == null ? '/' : this.state.offer.ram_memory}
Оперативен систем{this.state.offer == null || + this.state.offer.operating_system == null ? '/' : this.state.offer.operating_system}
Чипсет{this.state.offer == null || + this.state.offer.chipset == null ? '/' : this.state.offer.chipset}
Процесор{this.state.offer == null || + this.state.offer.cpu == null ? '/' : this.state.offer.cpu}
Батерија{this.state.offer == null || + this.state.offer.battery == null ? '/' : this.state.offer.battery}
Боја{this.state.offer == null || + this.state.offer.color == null ? '/' : this.state.offer.color}
Опис{this.state.offer == null || + this.state.offer.offer_description == null ? '/' : this.state.offer.offer_description}
+
+
+ +
+ ) + } +} + +export default PhoneOfferDetailsComponent Index: phonelux-frontend/src/components/PhoneWithOffersComponent/PhoneWithOffersComponent.css =================================================================== --- phonelux-frontend/src/components/PhoneWithOffersComponent/PhoneWithOffersComponent.css (revision 527b93f9d268998c8652c2f6a916a078873fb0c6) +++ phonelux-frontend/src/components/PhoneWithOffersComponent/PhoneWithOffersComponent.css (revision e5b84dc652434cab61718f38889fc36867569866) @@ -23,5 +23,5 @@ .phone-with-offers-table-row:nth-of-type(even){ - background-color: #DEE4E1; + background-color: #eef2f0; } @@ -51,2 +51,20 @@ font-size: 22px; } + +.phone-with-offers-model-header{ + border: 1px solid gray; + padding: 10px; + padding-left: 50px; + padding-right: 50px; + border-radius: 10px 60px; + box-shadow: inset 0px 0px 25px 0px rgb(120, 190, 139); + outline: none; + background-color: #c4f3d8; +} + +.phone-with-offers-totaloffers-header{ + padding: 10px; + border: 1px solid rgb(199, 193, 193); + background-color: #B6E2C8; + border-radius: 50px; +} Index: phonelux-frontend/src/components/PhoneWithOffersComponent/PhoneWithOffersComponent.js =================================================================== --- phonelux-frontend/src/components/PhoneWithOffersComponent/PhoneWithOffersComponent.js (revision 527b93f9d268998c8652c2f6a916a078873fb0c6) +++ phonelux-frontend/src/components/PhoneWithOffersComponent/PhoneWithOffersComponent.js (revision e5b84dc652434cab61718f38889fc36867569866) @@ -31,5 +31,5 @@
-

Понуди: {this.props.total_offers}

+

Понуди: {this.props.total_offers}

@@ -41,5 +41,5 @@
-

{this.props.model}

+

{this.props.model}

@@ -58,5 +58,5 @@ { - this.state.phone_offers.map((offer) =>