Skip to content

Commit

Permalink
[WEEK4] Feat: Edit filter, swiper(#3)
Browse files Browse the repository at this point in the history 
Recolor filterMenu and Edit swiper navigation.
  • Loading branch information
@GT0122
GT0122 committed Feb 7, 2023
1 parent 598ab0f commit 4d28e1b
Show file tree
Hide file tree
Showing 8 changed files with 119 additions and 25 deletions.
42 changes: 42 additions & 0 deletions frontend/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions frontend/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,8 @@
"react-router-dom": "^5.3.4",
"react-scripts": "^5.0.1",
"redux": "^4.2.0",
"sass": "^1.58.0",
"scss": "^0.2.4",
"stream": "^0.0.2",
"styled-components": "^5.3.6",
"swiper": "^6.8.4",
Expand Down
15 changes: 14 additions & 1 deletion frontend/src/bootstrap-custom.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10765,9 +10765,18 @@ textarea.form-control-lg {
text-align: center;
}

#cloudCon {
#cloudConPrev {
text-align: center;
}

#cloudConNext {
text-align: center;
}

.wordcloud {
width: 100%;
}

.historys {
display: grid;
row-gap: 10px;
Expand Down Expand Up @@ -10805,4 +10814,8 @@ textarea.form-control-lg {
color: #ff6161 !important;
fill: #ff6161 !important;
stroke: #ff6161 !important;
}

.swiper-button-disabled {
visibility: hidden;
}
53 changes: 42 additions & 11 deletions frontend/src/pages/DetailPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,8 @@ function Detail() {

useEffect(() => {
const controller = new AbortController();
ReactDOM.render(<><br/><img src={loading} alt='loading'></img></>, document.getElementById('cloudCon'));
ReactDOM.render(<><br/><img src={loading} alt='loading'></img></>, document.getElementById('cloudConPrev'));
// ReactDOM.render(<><br/><img src={loading} alt='loading'></img></>, document.getElementById('cloudConNext'));
axios.get("http://34.64.87.78:8000/wishes/" + localStorage.getItem("token"))
.then(response => response.data)
.then(data => {
Expand All @@ -37,7 +38,7 @@ function Detail() {
})
.catch( error => console.log(error) );

axios.post(`http://115.85.181.95:30002/recommend/similar/item?item_id=${item_id}&top_k=10`)
axios.post(`http://115.85.181.95:30003/recommend/similar/item?item_id=${item_id}&top_k=10`)
.then(response => response.data)
.then(data => {
setSimilar(data);
Expand All @@ -46,35 +47,62 @@ function Detail() {

axios({
method:'GET',
url:`http://115.85.181.95:30002/wordcloud/?item_id=${item_id}&split=${5}`,
url:`http://115.85.181.95:30003/wordcloud/?item_id=${item_id}&split=${5}&label=${2}`,
// responseType:'blob'
})
.then(response => response.data)
.then(data => {
const Example = ({ data }) => <img src={`data:image/jpeg;base64,${data}`} alt='wordcloud'/>
ReactDOM.render(<Example data={data} />, document.getElementById('cloudCon'))
const Example = ({ data }) => <img src={`data:image/jpeg;base64,${data}`} class="wordcloud" alt='wordcloudPrev'/>
ReactDOM.render(<Example data={data} />, document.getElementById('cloudConPrev'))
})
.catch( error => console.log(error) );

// axios({
// method:'GET',
// url:`http://115.85.181.95:30003/wordcloud/?item_id=${item_id}&split=${5}&label=${2}`,
// // responseType:'blob'
// })
// .then(response => response.data)
// .then(data => {
// const Example = ({ data }) => <img src={`data:image/jpeg;base64,${data}`} class="wordcloud" alt='wordcloudNext'/>
// ReactDOM.render(<Example data={data} />, document.getElementById('cloudConNext'))
// })
// .catch( error => console.log(error) );


return () => {
controller.abort();
}
}, [item_id]);

const onClickButton = (value) => {
setActivated(value)
ReactDOM.render(<><br/><img src={loading}></img></>, document.getElementById('cloudCon'));
setActivated(value);
ReactDOM.render(<><br/><img src={loading} alt="loading"></img></>, document.getElementById('cloudConPrev'));
// ReactDOM.render(<><br/><img src={loading} alt="loading"></img></>, document.getElementById('cloudConNext'));

axios({
method:'GET',
url:`http://115.85.181.95:30002/wordcloud/?item_id=${item_id}&split=${value}`,
url:`http://115.85.181.95:30003/wordcloud/?item_id=${item_id}&split=${value}&label=${2}`,
})
.then(response => response.data)
.then(data => {
const Example = ({ data }) => <img src={`data:image/jpeg;base64,${data}`} alt='wordcloud'/>
ReactDOM.render(<Example data={data} />, document.getElementById('cloudCon'))
const Example = ({ data }) => <img src={`data:image/jpeg;base64,${data}`} class="wordcloud" alt='wordcloudPrev'/>
ReactDOM.render(<Example data={data} />, document.getElementById('cloudConPrev'))
})
.catch( error => console.log(error) );

// axios({
// method:'GET',
// url:`http://115.85.181.95:30003/wordcloud/?item_id=${item_id}&split=${0}&label=${1}`,
// // responseType:'blob'
// })
// .then(response => response.data)
// .then(data => {
// const Example = ({ data }) => <img src={`data:image/jpeg;base64,${data}`} class="wordcloud" alt='wordcloudNext'/>
// ReactDOM.render(<Example data={data} />, document.getElementById('cloudConNext'))
// })
// .catch( error => console.log(error) );

axios.post('http://localhost:8000/review/'+item_id, wishProducts)
.then(response => response.data)
.then(data => setAvg(data))
Expand Down Expand Up @@ -130,15 +158,18 @@ function Detail() {
</ItemBox>
<br/>
<div className = 'filterStar d-flex flex-row'>

{[5, 4, 3, 2, 1].map( (i) =>{
return (
<button value={ i } key={i} className={`btn ${activated === i ? 'btn-secondary' : 'btn-outline-secondary'}`} onClick={() => {
onClickButton(i);
}}>{ `${i}점` }</button>
)
})}

</div>
<div id='cloudCon'></div>
<div id='cloudConPrev'></div>
{/* <div id='cloudConNext'></div> */}
<br/>
<h3>유사한 물품</h3>
<br/>
Expand Down
10 changes: 5 additions & 5 deletions frontend/src/products/FilterBudgetLeft.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,25 +26,25 @@ function FilterBudgetLeft({ getFilter }) {
{ categories.map((cat,index) => {
return (
<>
<button value={ cat } className='deactivate category_item' key={`category${index}`}onClick={ (event) => {
<button value={ cat } className='btn btn-outline-secondary' key={`category${index}`} onClick={ (event) => {
const ca = event.target.value;
const click = event.target.className;
if(click === 'activate category_item') {
if(click === 'btn btn-secondary') {
setCategory(category.filter(c => c !== ca));
event.target.className = 'deactivate category_item';
event.target.className = 'btn btn-outline-secondary';
} else {
setCategory([...category, ca]);
event.target.className = 'activate category_item';
event.target.className = 'btn btn-secondary';
}
} }>{ cat }</button>
</>
)
})}
</div>
<br/>
<button className="btn btn-secondary apply" onClick={ () => getFilter(minprice, maxprice, category) }>Apply</button>
</div>
</li>
<button className="btn btn-dark apply" onClick={ () => getFilter(budget, category) }>Apply</button>
</ul>
</>
);
Expand Down
1 change: 0 additions & 1 deletion frontend/src/products/FilterMenuLeft.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,6 @@ function FilterMenuLeft({ getFilter }) {
<button className="btn btn-secondary apply" onClick={ () => getFilter(minprice, maxprice, category) }>Apply</button>
</div>
</li>
<button className="btn btn-dark apply" onClick={ () => getFilter(minprice, maxprice, category) }>Apply</button>
</ul>
</>
);
Expand Down
8 changes: 8 additions & 0 deletions frontend/src/products/ItemSwiper.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,18 @@ import SwiperCore, { Navigation } from "swiper";
import Product from "./Product";
import { useState, useEffect } from "react";

import "swiper/swiper.scss";
import "swiper/components/navigation/navigation.scss";
import "swiper/components/pagination/pagination.scss";

function ItemSwiper(props) {
const [ clicked, setClicked ] = useState([])
const wishProducts = props.wishProducts;
const products = props.products;
const field = props.field;

SwiperCore.use([Navigation]);

useEffect(() => {
const temp = []
Array.from(products).map((product) => {
Expand All @@ -19,6 +25,8 @@ function ItemSwiper(props) {
setClicked(temp)
}, [wishProducts])

console.log(document.getElementsByClassName('swiper')[0])

return (
<>
<Swiper
Expand Down
13 changes: 6 additions & 7 deletions frontend/src/products/ProductList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,13 +36,12 @@ function ProductList() {
.then(response => response.data)
.then(data => {
setWishProducts(data);
axios.post("http://115.85.181.95:30002/recommend/personal?top_k=10", {'input_list':data, 'filters':filter})
axios.post("http://115.85.181.95:30003/recommend/personal?top_k=10&user_id=" + logintoken, {'input_list':data, 'filters':filter})
.then( response => response.data)
.then( data => {
setProducts(data);
})
.catch( error => console.log(error) );
console.log(wishProducts);
})
.catch((error) => console.log(error));

Expand All @@ -52,14 +51,14 @@ function ProductList() {
})
.catch((error) => console.log(error));

axios.post(`http://115.85.181.95:30002/recommend/normal?k=10`, filter)
axios.post(`http://115.85.181.95:30003/recommend/normal?k=10`, filter)
.then( response => response.data)
.then( data => {
setTotals(data);
})
.catch( error => console.log(error) );

axios.post(`http://115.85.181.95:30002/recommend/similar/user?user_id=${logintoken}&top_k=10`, filter)
axios.post(`http://115.85.181.95:30003/recommend/similar/user?user_id=${logintoken}&top_k=10`, filter)
.then( response => response.data)
.then( data => {
setSimusers(data);
Expand Down Expand Up @@ -92,7 +91,7 @@ function ProductList() {
.then(response => response.data)
.then(data => {
setWishProducts(data);
axios.post(`http://115.85.181.95:30002/recommend/personal?top_k=10`, {'input_list':data, 'filters':d})
axios.post(`http://115.85.181.95:30003/recommend/personal?top_k=10`, {'input_list':data, 'filters':d})
.then( response => response.data )
.then( data => {
setProducts(data);
Expand All @@ -102,14 +101,14 @@ function ProductList() {
.catch( error => console.log(error) );


axios.post(`http://115.85.181.95:30002/recommend/normal?k=10`, d)
axios.post(`http://115.85.181.95:30003/recommend/normal?k=10`, d)
.then( response => response.data )
.then( data => {
setTotals(data);
})
.catch( error => console.log(error) );

axios.post(`http://115.85.181.95:30002/recommend/similar/user?user_id=${logintoken}&top_k=10`, d)
axios.post(`http://115.85.181.95:30003/recommend/similar/user?user_id=${logintoken}&top_k=10`, d)
.then( response => response.data )
.then( data => {
setSimusers(data);
Expand Down

0 comments on commit 4d28e1b

Please sign in to comment.