+
+
'Price range'}
- value={value}
- onChange={handleChange}
+ value={this.state.value}
+ onChange={this.changeValue}
+ onChangeCommitted={this.handleChange}
valueLabelDisplay="auto"
- getAriaValueText={valuetext}
+ min={this.state.minValue}
+ max={this.state.maxValue}
/>
);
+ }
}
+
+export default FilterPriceComponent
+
Index: phonelux-frontend/src/components/FiltersComponents/FilterSelectComponent.css
===================================================================
--- phonelux-frontend/src/components/FiltersComponents/FilterSelectComponent.css (revision dfd5d87e3f5f69d6d595f8987195c739e3aa6466)
+++ phonelux-frontend/src/components/FiltersComponents/FilterSelectComponent.css (revision dbd483418f962e3b40992a977eef4ece28007aa2)
@@ -1,4 +1,8 @@
-#demo-multiple-checkbox{
- margin-top: 10px;
+.input-select-label{
+ margin-top: -5px;
}
+.input-select-option fieldset{
+ border-radius: 20px;
+
+}
Index: phonelux-frontend/src/components/FiltersComponents/FilterSelectComponent.js
===================================================================
--- phonelux-frontend/src/components/FiltersComponents/FilterSelectComponent.js (revision dfd5d87e3f5f69d6d595f8987195c739e3aa6466)
+++ phonelux-frontend/src/components/FiltersComponents/FilterSelectComponent.js (revision dbd483418f962e3b40992a977eef4ece28007aa2)
@@ -1,2 +1,3 @@
+
import * as React from 'react';
import OutlinedInput from '@mui/material/OutlinedInput';
@@ -8,66 +9,100 @@
import Checkbox from '@mui/material/Checkbox';
import "./FilterSelectComponent.css"
+import axios from 'axios';
-const ITEM_HEIGHT = 48;
-const ITEM_PADDING_TOP = 8;
-const MenuProps = {
- PaperProps: {
- style: {
- maxHeight: ITEM_HEIGHT * 5.5 + ITEM_PADDING_TOP,
- width: 250,
- },
- },
-};
+export class FilterSelectComponent extends React.Component {
-const categories = [
- 'Category1',
- 'Category2',
- 'Category3',
- 'Category4',
- 'Category5',
- 'Category6',
- 'Category7',
- 'Category8',
- 'Category9',
- 'Category10',
-];
+ constructor(props) {
+ super(props)
+
+ this.state = {
+ pickedItems: [],
+ items: [],
+ type: '',
+ ITEM_HEIGHT: 48,
+ ITEM_PADDING_TOP: 8,
+ MenuProps: {}
+ }
+
+ }
-export default function MultipleSelectCheckmarks() {
- const [category, setCategory] = React.useState([]);
+ componentDidMount(){
+ this.state.MenuProps = {
+ PaperProps: {
+ style: {
+ maxHeight: this.state.ITEM_HEIGHT * 5.5 + this.state.ITEM_PADDING_TOP,
+ width: 250,
+ },
+ },
+ }
- const handleChange = (event) => {
- const {
- target: { value },
- } = event;
- setCategory(
- // On autofill we get a stringified value.
- typeof value === 'string' ? value.split(',') : value,
- );
- };
- return (
-
-
- Category
- } // tuka odi soodvetno imeto na filter
- renderValue={(selected) => selected.join(', ')}
- MenuProps={MenuProps}
->
- {categories.map((cat) => (
-
- ))}
-
-
-
- );
+ let endpoint
+ if(this.props.type == 'brands')
+ {
+ endpoint = '/brands'
+ this.setState({
+ type: 'Брендови'
+ })
+ }
+ else{
+ endpoint = '/shops'
+ this.setState({
+ type: 'Продавници'
+ })
+ }
+
+ axios.get(endpoint)
+ .then(response => this.setState({items: response.data}))
+ .catch(error => console.log(error))
+ }
+
+ handleChange = (event) => {
+ let value = event.target.value
+ this.setState({
+ pickedItems: typeof value === 'string' ? value.split(',') : value
+ }, ()=>{
+ 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(',')})
+ }
+
+ })
+ };
+
+
+ render() {
+ return (
+
+
+ {this.state.type}
+ }
+ renderValue={(selected) => selected.join(', ')}
+ MenuProps={this.state.MenuProps}
+ >
+ {this.state.items.map((item) => (
+
+ ))}
+
+
+
+ )
+ }
}
+
+export default FilterSelectComponent
Index: phonelux-frontend/src/components/FiltersComponents/SearchFieldComponent.css
===================================================================
--- phonelux-frontend/src/components/FiltersComponents/SearchFieldComponent.css (revision dfd5d87e3f5f69d6d595f8987195c739e3aa6466)
+++ phonelux-frontend/src/components/FiltersComponents/SearchFieldComponent.css (revision dbd483418f962e3b40992a977eef4ece28007aa2)
@@ -1,5 +1,14 @@
-#searchfield{
- display: flex;
- border-radius: 20px;
- height: fit-content;
+.search-phone-field{
+ /* display: flex;
+ height: fit-content;
+ border-radius: 20px; */
+ border: 1px solid rgb(131, 125, 125);
}
+
+.search-phone-input{
+ margin:5px;
+}
+
+
+
+
Index: phonelux-frontend/src/components/FiltersComponents/SearchFieldComponent.js
===================================================================
--- phonelux-frontend/src/components/FiltersComponents/SearchFieldComponent.js (revision dfd5d87e3f5f69d6d595f8987195c739e3aa6466)
+++ phonelux-frontend/src/components/FiltersComponents/SearchFieldComponent.js (revision dbd483418f962e3b40992a977eef4ece28007aa2)
@@ -59,15 +59,27 @@
export default class SearchFieldComponent extends Component {
+ constructor(props) {
+ super(props)
+
+ this.state = {
+
+ }
+ }
+
+ handleChange = (event) => {
+ this.props.changeHandler({searchValue: event.target.value})
+ }
+
render() {
return (
-
+
+
+ )
+ }
+}
+
+export default SortByComponent
Index: phonelux-frontend/src/components/GroupedFiltersComponent/GroupedFiltersComponent.css
===================================================================
--- phonelux-frontend/src/components/GroupedFiltersComponent/GroupedFiltersComponent.css (revision dfd5d87e3f5f69d6d595f8987195c739e3aa6466)
+++ phonelux-frontend/src/components/GroupedFiltersComponent/GroupedFiltersComponent.css (revision dbd483418f962e3b40992a977eef4ece28007aa2)
@@ -1,19 +1,6 @@
-#filtersDiv{
- background-color: #91AD7E;
+.grouped-filters-component{
+ background-color: #a6c9ab;
display: flex;
-}
-
-/* #filtersDiv > div{
- margin-left: 30px;
-} */
-
-
-#filtersDiv > div{
- margin-left: 30px;
-}
-
-#filtersDiv > div:nth-of-type(4){
- margin-top: 15px;
- margin-left: 200px;
+ padding: 20px;
}
Index: phonelux-frontend/src/components/GroupedFiltersComponent/GroupedFiltersComponent.js
===================================================================
--- phonelux-frontend/src/components/GroupedFiltersComponent/GroupedFiltersComponent.js (revision dfd5d87e3f5f69d6d595f8987195c739e3aa6466)
+++ phonelux-frontend/src/components/GroupedFiltersComponent/GroupedFiltersComponent.js (revision dbd483418f962e3b40992a977eef4ece28007aa2)
@@ -8,15 +8,49 @@
import FilterPriceComponent from "../FiltersComponents/FilterPriceComponent"
import SearchFieldComponent from '../FiltersComponents/SearchFieldComponent';
+import { Grid } from '@mui/material';
+import SortByComponent from '../FiltersComponents/SortByComponent';
export default class GroupedFiltersComponent extends Component {
+
+ constructor(props) {
+ super(props)
+
+ this.state = {
+
+ }
+ }
+
+
+ componentDidMount(){
+
+ }
+
render() {
return (
-
-
+
)
}
+
}
Index: phonelux-frontend/src/components/HeaderComponent/HeaderComponent.css
===================================================================
--- phonelux-frontend/src/components/HeaderComponent/HeaderComponent.css (revision dfd5d87e3f5f69d6d595f8987195c739e3aa6466)
+++ phonelux-frontend/src/components/HeaderComponent/HeaderComponent.css (revision dbd483418f962e3b40992a977eef4ece28007aa2)
@@ -1,3 +1,3 @@
-#header{
+.header-component{
background-color: #B6E2C8;
display: flex;
@@ -5,5 +5,5 @@
}
-#header img{
+.header-component img{
width: 310px;
height: 200px;
Index: phonelux-frontend/src/components/HeaderComponent/HeaderComponent.js
===================================================================
--- phonelux-frontend/src/components/HeaderComponent/HeaderComponent.js (revision dfd5d87e3f5f69d6d595f8987195c739e3aa6466)
+++ phonelux-frontend/src/components/HeaderComponent/HeaderComponent.js (revision dbd483418f962e3b40992a977eef4ece28007aa2)
@@ -1,4 +1,5 @@
import React, { Component } from 'react'
-import logo from '../../logo_phonelux.png'
+import { Link } from 'react-router-dom'
+import logo from '../../images/logo_phonelux.png'
import './HeaderComponent.css'
@@ -6,6 +7,8 @@
render() {
return (
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+ }
+}
+
+export default PhoneCardComponent
Index: phonelux-frontend/src/components/PhoneCardGridComponent/PhoneCardGridComponent.css
===================================================================
--- phonelux-frontend/src/components/PhoneCardGridComponent/PhoneCardGridComponent.css (revision dbd483418f962e3b40992a977eef4ece28007aa2)
+++ phonelux-frontend/src/components/PhoneCardGridComponent/PhoneCardGridComponent.css (revision dbd483418f962e3b40992a977eef4ece28007aa2)
@@ -0,0 +1,17 @@
+
+
+.phonecardgrid-wrapper{
+ background-color: #DEE4E1;
+}
+
+
+.phonecardgrid-grid-container{
+ width: fit-content;
+}
+
+.phonecardgrid-item{
+ display: flex;
+ justify-content: center;
+}
+
+
Index: phonelux-frontend/src/components/PhoneCardGridComponent/PhoneCardGridComponent.js
===================================================================
--- phonelux-frontend/src/components/PhoneCardGridComponent/PhoneCardGridComponent.js (revision dbd483418f962e3b40992a977eef4ece28007aa2)
+++ phonelux-frontend/src/components/PhoneCardGridComponent/PhoneCardGridComponent.js (revision dbd483418f962e3b40992a977eef4ece28007aa2)
@@ -0,0 +1,93 @@
+import { Grid } 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'
+import './PhoneCardGridComponent.css'
+import phoneImage from '../../images/phone.png'
+
+export class PhoneCardGridComponent extends Component {
+
+ constructor(props) {
+ super(props)
+
+ this.state = {
+ phones: [],
+ loading: true,
+ currentPage: 1,
+ phonesPerPage: 12,
+ numberOfPages: 0,
+ currentPhones: []
+ }
+
+ }
+
+ 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))
+ }
+ )
+ .catch(error => console.log(error))
+ }
+
+ setNewPage = (newPage) => {
+ if(newPage == '')
+ {
+ newPage = this.state.currentPage-1
+ }
+
+ if(newPage == '')
+ {
+ newPage = this.state.currentPage+1
+ }
+
+
+ const indexOfLastPhone = parseInt(newPage) * this.state.phonesPerPage;
+ const indexOfFirstPhone = indexOfLastPhone - this.state.phonesPerPage;
+
+ const currPhones = this.state.phones.slice(indexOfFirstPhone, indexOfLastPhone)
+
+ this.setState({
+ currentPage: parseInt(newPage),
+ currentPhones: currPhones
+ })
+
+ }
+
+ render() {
+ return (
+
+ {this.props.offer_shop}
+ {this.props.offer_name}
+ {this.props.price} ден.
+
+ )
+ }
+}
+
+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/PhonePageComponent.js
===================================================================
--- phonelux-frontend/src/components/PhonePageComponent.js (revision dbd483418f962e3b40992a977eef4ece28007aa2)
+++ phonelux-frontend/src/components/PhonePageComponent.js (revision dbd483418f962e3b40992a977eef4ece28007aa2)
@@ -0,0 +1,36 @@
+import axios from 'axios'
+import React, { Component } from 'react'
+import HeaderComponent from './HeaderComponent/HeaderComponent'
+import PhoneWithOffersComponent from './PhoneWithOffersComponent/PhoneWithOffersComponent'
+
+export class PhonePageComponent extends Component {
+
+ constructor(props) {
+ super(props)
+
+ this.state = {
+ phoneId: window.location.href.split('/')[4],
+ phone: null
+ }
+ }
+
+ componentDidMount(){
+ axios.get('/phones/'+this.state.phoneId)
+ .then(response => {
+ this.setState({
+ phone: response.data
+ })
+ }).catch(error => console.log(error))
+ }
+
+ render() {
+ return (
+ <>
+
+
+
)
Index: phonelux-frontend/src/components/HomepageComponent.js
===================================================================
--- phonelux-frontend/src/components/HomepageComponent.js (revision dbd483418f962e3b40992a977eef4ece28007aa2)
+++ phonelux-frontend/src/components/HomepageComponent.js (revision dbd483418f962e3b40992a977eef4ece28007aa2)
@@ -0,0 +1,69 @@
+import React, { Component } from 'react'
+import GroupedFiltersComponent from './GroupedFiltersComponent/GroupedFiltersComponent'
+import HeaderComponent from './HeaderComponent/HeaderComponent'
+import PhoneCardGridComponent from './PhoneCardGridComponent/PhoneCardGridComponent'
+
+export class HomepageComponent extends Component {
+
+constructor(props) {
+ super(props)
+
+ this.state = {
+ shops: null,
+ brands: null,
+ priceRange: null,
+ searchValue: null,
+ sortBy: null
+ }
+}
+
+changeFilters = (e) => {
+
+ if(e.hasOwnProperty('priceRange'))
+ {
+ this.setState({
+ priceRange: e.priceRange
+ })
+ }
+
+ if(e.hasOwnProperty('shops'))
+ {
+ this.setState({
+ shops: e.shops
+ })
+ }
+
+ if(e.hasOwnProperty('brands'))
+ {
+ this.setState({
+ brands: e.brands
+ })
+ }
+
+ if(e.hasOwnProperty('searchValue'))
+ {
+ this.setState({
+ searchValue: e.searchValue
+ })
+ }
+
+ if(e.hasOwnProperty('sortBy'))
+ {
+ this.setState({
+ sortBy: e.sortBy
+ })
+ }
+}
+
+ render() {
+ return (
+ <>
+
-
-
- )
- }
-}
Index: phonelux-frontend/src/components/LoginPageComponent.js
===================================================================
--- phonelux-frontend/src/components/LoginPageComponent.js (revision dbd483418f962e3b40992a977eef4ece28007aa2)
+++ phonelux-frontend/src/components/LoginPageComponent.js (revision dbd483418f962e3b40992a977eef4ece28007aa2)
@@ -0,0 +1,26 @@
+import React, { Component } from 'react'
+import HeaderComponent from './HeaderComponent/HeaderComponent'
+import LoginFormComponent from './LoginRegisterComponents/LoginFormComponent'
+
+export class LoginPageComponent extends Component {
+
+ constructor(props) {
+ super(props)
+
+ this.state = {
+
+ }
+ }
+
+
+ render() {
+ return (
+ <>
+
+ this.props.setValue(e)}
+ {...inputProps}
+ onBlur={this.handleFocus}
+ focused={this.state.focused.toString()}
+ />
+ {this.props.errorMessage}
+
+ )
+ }
+}
+
+export default InputFormComponent
Index: phonelux-frontend/src/components/LoginRegisterComponents/LoginFormComponent.css
===================================================================
--- phonelux-frontend/src/components/LoginRegisterComponents/LoginFormComponent.css (revision dbd483418f962e3b40992a977eef4ece28007aa2)
+++ phonelux-frontend/src/components/LoginRegisterComponents/LoginFormComponent.css (revision dbd483418f962e3b40992a977eef4ece28007aa2)
@@ -0,0 +1,146 @@
+.loginform-main-div {
+ text-align: center;
+ justify-content: center;
+ display: flex;
+ padding-top: 40px;
+ padding-bottom: 90px;
+ background-color: #e1e3eb;
+ height: 100%;
+}
+
+
+.loginform-sub-main-div{
+ display: flex;
+ justify-content: center;
+ height: fit-content;
+ width: fit-content;
+ box-shadow: 11px 12px 13px 12px rgb(207, 207, 207);
+ padding-top: 30px;
+ border-radius: 60px;
+ background-color: white;
+ width: 65%;
+
+}
+.loginform-imgs-div {
+ padding-top: 20px;
+ justify-content: center;
+ display: flex;
+ }
+.loginform-image-container {
+ background-color: rgb(223, 221, 221);
+ border-radius: 150px;
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ height: 115px;
+ width: 115px;
+}
+.loginform-profile-img {
+ height: 100px;
+ width: 100px;
+ border-radius: 130px;
+}
+
+.loginform-sub-main-div > div{
+ margin-bottom: 50px;
+ margin-left: 80px;
+ margin-right: 80px;
+}
+
+.loginform-email-input > .inputform-validation-container > .validation-inputs{
+ width: 50%;
+}
+
+.loginform-password-input > .inputform-validation-container > .validation-inputs{
+ width: 50%;
+}
+
+.validation-inputs{
+ width: 100%;
+ height: 50px;
+ border-radius: 60px;
+ box-shadow: inset 0px 0px 25px 0px rgb(197, 189, 189);
+ border: none;
+ outline: none;
+ background-color: #fff;
+}
+
+
+.inputform-validation-container{
+ width: 100%;
+ justify-content: center;
+}
+
+
+.validation-inputs{
+ padding-left: 20px;
+ font-size: 22px;
+ width: 100%;
+}
+
+
+.loginform-button{
+ width: 80%;
+ height: 50px;
+ border-radius: 60px;
+ background-color: #91AD7E ;
+ color: white;
+ font-size: 25px;
+ border: none;
+ margin-top: 30px;
+}
+
+.loginform-button:hover{
+ background-color: #5c6b52 ;
+ cursor:pointer;
+}
+
+.form-error-span{
+ font-size: 12px;
+ padding: 3px;
+ color:red;
+ display: block;
+ justify-content: center;
+ display: none;
+}
+
+.loginform-sub-main-div > div{
+ width: 90%;
+}
+
+.loginform-button{
+ margin-top: 30px;
+ margin-bottom: 10px;
+}
+
+.inputform-validation-container input:invalid[focused="true"] ~ span{
+ display: block;
+}
+
+.loginform-password-input{
+ margin-top: 15px;
+}
+
+.inputform-validation-container input:invalid[focused="true"]{
+ border: 1px solid red;
+}
+
+.form-error-span{
+ width: 100%;
+}
+
+.register-link{
+ font-size: 25px;
+ font-weight: 400;
+ color: rgb(53, 99, 70);
+ text-decoration: none;
+ color: blue;
+}
+ .register-link > a{
+ color: rgb(53, 99, 70);
+ text-decoration: none;
+ }
+
+ .register-link > a:hover{
+ color: blue;
+ }
Index: phonelux-frontend/src/components/LoginRegisterComponents/LoginFormComponent.js
===================================================================
--- phonelux-frontend/src/components/LoginRegisterComponents/LoginFormComponent.js (revision dbd483418f962e3b40992a977eef4ece28007aa2)
+++ phonelux-frontend/src/components/LoginRegisterComponents/LoginFormComponent.js (revision dbd483418f962e3b40992a977eef4ece28007aa2)
@@ -0,0 +1,105 @@
+import React, { Component } from 'react'
+import profileIcon from "../../images/profileicon.png";
+import EmailIcon from '@mui/icons-material/Email';
+import "./LoginFormComponent.css"
+import InputFormComponent from './InputFormComponent';
+import { Link } from 'react-router-dom';
+import axios from 'axios';
+
+
+
+export class LoginFormComponent extends Component {
+
+ constructor(props) {
+ super(props)
+
+ this.state = {
+ email: '',
+ password: '',
+ }
+ }
+
+ changeHandler = (e) =>{
+ this.setState({[e.target.name] : e.target.value})
+ }
+
+ submitHandler = (e) => {
+ e.preventDefault()
+ var qs = require('qs');
+ var dataToSend = qs.stringify({
+ 'email': this.state.email,
+ 'password': this.state.password
+ });
+
+ var config = {
+ method: 'post',
+ url: '/login',
+ headers: {
+ 'Content-Type': 'application/x-www-form-urlencoded'
+ },
+ data : dataToSend
+ };
+
+ axios(config)
+ .then(function (response) {
+ console.log(response.data);
+ })
+ .catch(function (error) {
+ console.log(error);
+ });
+
+ }
+
+ setValue = (e) => {
+ this.setState({
+ [e.target.name]: e.target.value
+ })
+
+ }
+
+
+render() {
+
+ const {email,password} = this.state
+
+ return (
+
+
+ );
+}
+}
+
+export default LoginFormComponent
Index: phonelux-frontend/src/components/LoginRegisterComponents/RegisterFormComponent.css
===================================================================
--- phonelux-frontend/src/components/LoginRegisterComponents/RegisterFormComponent.css (revision dbd483418f962e3b40992a977eef4ece28007aa2)
+++ phonelux-frontend/src/components/LoginRegisterComponents/RegisterFormComponent.css (revision dbd483418f962e3b40992a977eef4ece28007aa2)
@@ -0,0 +1,161 @@
+.registerform-main-div {
+ text-align: center;
+ justify-content: center;
+ display: flex;
+ padding-top: 40px;
+ padding-bottom: 90px;
+ background-color: #e1e3eb;
+ height: 100%;
+ }
+ body{height: 100%;}
+
+ .registerform-sub-main-div{
+ display: flex;
+ justify-content: center;
+ height: fit-content;
+ width: fit-content;
+ box-shadow: 11px 12px 13px 12px rgb(207, 207, 207);
+ padding-top: 30px;
+ border-radius: 60px;
+ background-color: white;
+ width: 65%;
+
+ }
+ .registerform-imgs-div {
+ padding-top: 20px;
+ justify-content: center;
+ display: flex;
+ }
+ .registerform-image-container {
+ background-color: rgb(223, 221, 221);
+ border-radius: 150px;
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ height: 115px;
+ width: 115px;
+ }
+ .registerform-profile-img {
+ height: 100px;
+ width: 100px;
+ border-radius: 130px;
+ }
+
+ .registerform-sub-main-div > div{
+ margin-bottom: 50px;
+ margin-left: 80px;
+ margin-right: 80px;
+ }
+
+ .validation-inputs{
+ width: 300px;
+ height: 50px;
+ border-radius: 60px;
+ box-shadow: inset 0px 0px 25px 0px rgb(197, 189, 189);
+ border: none;
+ outline: none;
+ background-color: #fff;
+ }
+
+
+ .registerform-name-lastname div{
+ width: 50%;
+ margin-left: 10px;
+ margin-right: 10px;
+ }
+
+ .registerform-name-lastname{
+ display: flex;
+ }
+
+ .registerform-name-lastname input{
+ width: 90%;
+ }
+
+ .registerform-confirm-password-input{
+ padding-top: 20px;
+ width: 100%;
+ }
+
+ .inputform-validation-container{
+ width: 100%;
+ }
+
+
+ .validation-inputs{
+ padding-left: 20px;
+ font-size: 22px;
+ width: 100%;
+ }
+
+ .registerform-password-input > .inputform-validation-container > .validation-inputs{
+ width: 50%;
+ }
+
+ .registerform-password-input{
+ margin-top: 20px;
+ width: 100%;
+}
+
+.registerform-email-input{
+ padding-top: 20px;
+ width: 100%;
+}
+
+.lastname-input{
+ padding-top: 20px;
+}
+
+.registerform-confirm-password-input input{
+ width: 50%;
+}
+
+.password-input input{
+width: 50%;
+}
+
+.registerform-email-input input{
+ width: 50%;
+}
+
+
+ .registerform-button{
+ width: 80%;
+ height: 50px;
+ border-radius: 60px;
+ background-color: #91AD7E ;
+ color: white;
+ font-size: 25px;
+ border: none;
+ margin-top: 30px;
+ }
+
+ .registerform-button:hover{
+ background-color: #5c6b52 ;
+ cursor:pointer;
+ }
+
+ .form-error-span{
+ font-size: 12px;
+ padding: 3px;
+ color:red;
+ display: block;
+ justify-content: center;
+ display: none;
+ }
+
+ .inputform-validation-container input:invalid[focused="true"] ~ span{
+ display: block;
+ }
+
+ .inputform-validation-container input:invalid[focused="true"]{
+ border: 1px solid red;
+ }
+
+
+ .form-error-span{
+ width: 100%;
+ }
+
+
+
Index: phonelux-frontend/src/components/LoginRegisterComponents/RegisterFormComponent.js
===================================================================
--- phonelux-frontend/src/components/LoginRegisterComponents/RegisterFormComponent.js (revision dbd483418f962e3b40992a977eef4ece28007aa2)
+++ phonelux-frontend/src/components/LoginRegisterComponents/RegisterFormComponent.js (revision dbd483418f962e3b40992a977eef4ece28007aa2)
@@ -0,0 +1,121 @@
+import React, { Component } from 'react'
+import profileIcon from "../../images/profileicon.png";
+import "./RegisterFormComponent.css"
+import ErrorIcon from '@mui/icons-material/Error';
+import CheckBoxIcon from '@mui/icons-material/CheckBox';
+import InputFormComponent from './InputFormComponent';
+import { Input } from '@mui/material';
+import axios from 'axios';
+
+
+export class RegisterFormComponent extends Component {
+
+ constructor(props) {
+ super(props)
+
+ this.state = {
+ firstName: '',
+ lastName: '',
+ email: '',
+ password: '',
+ confirmPassword:'',
+ }
+ }
+
+ submitHandler = (e) => {
+ e.preventDefault()
+
+ let dataToSend = JSON.stringify({
+ "firstName": this.state.firstName,
+ "lastName": this.state.lastName,
+ "email": this.state.email,
+ "password": this.state.password
+ });
+
+ let config = {
+ method: 'post',
+ url: '/registration',
+ headers: {
+ 'Content-Type': 'application/json'
+ },
+ data : dataToSend
+ };
+
+ axios(config)
+ .then(function (response) {
+ console.log(response);
+ })
+ .catch(function (error) {
+ console.log(error);
+ });
+
+ }
+
+ setValue = (e) => {
+ this.setState({
+ [e.target.name]: e.target.value
+ })
+ }
+
+
+
+
+ render() {
+
+ const {firstName,lastName,email,password,confirmPassword} = this.state
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+ );
+ }
+}
+
+export default RegisterFormComponent
Index: phonelux-frontend/src/components/PaginationComponent/PaginationComponent.css
===================================================================
--- phonelux-frontend/src/components/PaginationComponent/PaginationComponent.css (revision dbd483418f962e3b40992a977eef4ece28007aa2)
+++ phonelux-frontend/src/components/PaginationComponent/PaginationComponent.css (revision dbd483418f962e3b40992a977eef4ece28007aa2)
@@ -0,0 +1,7 @@
+.pagination-wrapper{
+ margin-top: 40px;
+ padding-bottom: 40px;
+ display: flex;
+ justify-content: center;
+}
+
Index: phonelux-frontend/src/components/PaginationComponent/PaginationComponent.js
===================================================================
--- phonelux-frontend/src/components/PaginationComponent/PaginationComponent.js (revision dbd483418f962e3b40992a977eef4ece28007aa2)
+++ phonelux-frontend/src/components/PaginationComponent/PaginationComponent.js (revision dbd483418f962e3b40992a977eef4ece28007aa2)
@@ -0,0 +1,26 @@
+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 dbd483418f962e3b40992a977eef4ece28007aa2)
+++ phonelux-frontend/src/components/PhoneCardComponent/PhoneCardComponent.css (revision dbd483418f962e3b40992a977eef4ece28007aa2)
@@ -0,0 +1,52 @@
+.phonecard{
+ background-color: #B6E2C8;
+ padding:15px;
+ justify-items: center;
+ width: 250px;
+ height: 400px;
+ border-radius: 25px;
+}
+
+.phonecard:hover{
+ background-color: #84c69f;
+ cursor: pointer;
+}
+
+.phonecard img{
+ width: 200px;
+ height: 250px;
+ border-radius: 25px;
+ margin-left: 25px;
+}
+
+.phonecard-paper{
+ width: fit-content;
+ border-radius: 25px;
+}
+
+.phonecard-lowestprice-header, .phonecard-totaloffers-header{
+ margin-top: -10px;
+ color: rgb(34, 106, 106);
+ text-align: center;
+}
+
+.phonecard-model-header{
+ text-align: center;
+}
+
+
+.phonecard-lowestprice{
+ font-size: 20px;
+}
+
+.phonecard-totaloffers{
+ font-size: 20px;
+}
+
+.phonecard > h5 > p{
+ display: inline;
+}
+
+.phonecard > h6 > p{
+ display: inline;
+}
Index: phonelux-frontend/src/components/PhoneCardComponent/PhoneCardComponent.js
===================================================================
--- phonelux-frontend/src/components/PhoneCardComponent/PhoneCardComponent.js (revision dbd483418f962e3b40992a977eef4ece28007aa2)
+++ phonelux-frontend/src/components/PhoneCardComponent/PhoneCardComponent.js (revision dbd483418f962e3b40992a977eef4ece28007aa2)
@@ -0,0 +1,34 @@
+import React, { Component } from 'react'
+import './PhoneCardComponent.css'
+import Paper from '@mui/material/Paper';
+import { Link } from 'react-router-dom';
+
+export class PhoneCardComponent extends Component {
+
+ constructor(props) {
+ super(props)
+
+ this.state = {
+
+ }
+ }
+
+
+
+ render() {
+ return (
+
+
+ 
+
+ {this.props.model}
+Најниска цена:
{this.props.lowestPrice}
ден. +Вкупно понуди:
{this.props.total_offers}
+
+
+
+ {this.state.currentPhones.map((phone) =>
+ )}
+
+ {/*
+ */}
+
+
+ )
+ }
+}
+
+export default PhoneCardGridComponent
Index: phonelux-frontend/src/components/PhoneOfferComponent/PhoneOfferComponent.js
===================================================================
--- phonelux-frontend/src/components/PhoneOfferComponent/PhoneOfferComponent.js (revision dbd483418f962e3b40992a977eef4ece28007aa2)
+++ phonelux-frontend/src/components/PhoneOfferComponent/PhoneOfferComponent.js (revision dbd483418f962e3b40992a977eef4ece28007aa2)
@@ -0,0 +1,50 @@
+import React, { Component } from 'react'
+
+export class PhoneOfferComponent extends Component {
+
+ constructor(props) {
+ super(props)
+
+ this.state = {
+
+ }
+ }
+
+
+ render() {
+ console.log(this.props)
+ return (
+
+
+
+ )
+ }
+}
+
+export default PhoneWithOffersComponent
Index: phonelux-frontend/src/components/RegisterPageComponent.js
===================================================================
--- phonelux-frontend/src/components/RegisterPageComponent.js (revision dbd483418f962e3b40992a977eef4ece28007aa2)
+++ phonelux-frontend/src/components/RegisterPageComponent.js (revision dbd483418f962e3b40992a977eef4ece28007aa2)
@@ -0,0 +1,16 @@
+import React, { Component } from 'react'
+import HeaderComponent from './HeaderComponent/HeaderComponent'
+import RegisterFormComponent from './LoginRegisterComponents/RegisterFormComponent'
+
+export class RegisterPageComponent extends Component {
+ render() {
+ return (
+ <>
+
+
+
+
+
+
+ Понуди: {this.props.total_offers}
+
+
+ 
+
+
+
+
+
+ {this.props.model}
+
+
+
+
+
+
+
+
+ | Продавница | +Име на понуда | +Цена | ++ |
|---|