Skip to content

Commit

Permalink
yapp-project#26 파일(이미지) 업로드 및 데이터베이스 업로드
Browse files Browse the repository at this point in the history 
See: Github issue yapp-project#26
---------------------------------------
### 작업파일
* Enrolment 폴더 아래 파일들
* ViewRecipe 폴더 아래 파일들
* 각종 이미지
---------------------------------------
### 작업내용
* 아이콘, 이미지 적용
* 서버 데이터에 따른 동적 레이아웃 생성
* 위치만 잡아둔 내용 모두 내용 추가
---------------------------------------
### TODO
* 서버 레시피 저장 이슈 확인 후 데이터 저장 및 저장된 데이터 불러와서 잘 적용됬는지 확인
* 레시피 자세히 보기 우측 버튼 기능 추가
* 태그 입력 방식 추가
* 레시피 재료 삭제 버튼 위치 잡기
* 칵테일 재료과 비율에 따른 색상 채우기 기능 추가
* 합친 후 QA 진행 및 버그 수정
  • Loading branch information
@Sung-jin
Sung-jin committed May 25, 2019
1 parent e0708ab commit 513776c
Show file tree
Hide file tree
Showing 43 changed files with 576 additions and 175 deletions.
138 changes: 91 additions & 47 deletions src/containers/Enrolment/Enrolment.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import Step3 from "./Function/Step3";
import Done from "./Function/Done";
import { enrolmentRequest } from "../../action/enrolmentAction";
import axios from "axios";
import { ChromePicker } from 'react-color';

const cx = classNames.bind(styles);

Expand All @@ -23,6 +24,8 @@ const mapStateToProps = state => {

const mapDispatchToProps = { enrolmentRequest };

let colorTarget = "";

class Enrolment extends Component {
constructor (props){
super(props);
Expand Down Expand Up @@ -61,13 +64,14 @@ class Enrolment extends Component {
doneClose;
contents;
inputTarget;
colorClose;

componentDidMount() {
document.addEventListener('DOMContentLoaded', () => {
this.selectCup = document.querySelector(".cup-item1").classList[1];
this.selectAlcohol = document.querySelector(".alcohol-item1").classList[1];
this.doneClose = document.querySelector("#done-container").classList[1];

this.colorClose = document.querySelector("#color-picker").classList[1];
this.inputTarget = document.querySelectorAll("#recipe-name, #recipe-descripe, #recipe-tag");
});
this.selectStep = document.querySelector(".step-1").classList[1];
Expand Down Expand Up @@ -293,6 +297,16 @@ class Enrolment extends Component {
};

onAddStuff = () => {
let containerStyle = window.getComputedStyle ? getComputedStyle(document.querySelector("#stuff-container"), null) : document.querySelector("#stuff-container").currentStyle;
let maxHegihtStyle = window.getComputedStyle ? getComputedStyle(document.querySelector("#stuff-container").parentElement, null) : document.querySelector("#stuff-container").parentElement.currentStyle;

let containerHeight = parseInt(containerStyle.height);
let maxHeight = parseInt(maxHegihtStyle.height);

if (containerHeight + 62 >= maxHeight) {
document.querySelector("#stuff-container").style.position = 'relative';
}

let enrolmentData = {...this.state.enrolmentData};
let lastIndexID = this.state.stuffID;

Expand All @@ -314,35 +328,59 @@ class Enrolment extends Component {
};

onDeleteStuff = event => {
let containerStyle = window.getComputedStyle ? getComputedStyle(document.querySelector("#stuff-container"), null) : document.querySelector("#stuff-container").currentStyle;
let maxHegihtStyle = window.getComputedStyle ? getComputedStyle(document.querySelector("#stuff-container").parentElement, null) : document.querySelector("#stuff-container").parentElement.currentStyle;

let containerHeight = parseInt(containerStyle.height);
let maxHeight = parseInt(maxHegihtStyle.height);

if (containerHeight - 62 <= maxHeight) {
document.querySelector("#stuff-container").style.position = 'absolute';
}

let enrolmentData = {...this.state.enrolmentData};
let clickIndex = event.target.parentNode.parentNode.parentNode.getAttribute("stuff");

enrolmentData.stuff.splice(clickIndex, 1);
enrolmentData.stuff[clickIndex] = {};

this.setState(enrolmentData);

event.target.parentNode.parentNode.parentNode.remove();
event.target.parentNode.parentNode.remove();
}

onSelectColor = event => {
if (event.target.getAttribute("stuff")) {
let colorNumber = event.target.getAttribute("stuff");
this.setState({color_idx: colorNumber});
let colorContainer = document.querySelector("#color-picker");

document.querySelector(`#color-picker_${colorNumber}`).classList.toggle(this.doneClose);
} else {
let colorNumber = this.state.color_idx;
let enrolmentData = {...this.state.enrolmentData};
let rgb = document.querySelector(`#item-color_${colorNumber}`).style.backgroundColor.replace(/^(rgb|rgba)\(/,'').replace(/\)$/,'').replace(/\s/g,'').split(',');
colorTarget = event.target.id;
colorContainer.classList.remove(this.colorClose);
// console.log(document.querySelector("#color-picker").classList.contains(this.colorClose));

document.querySelector(`#color-picker_${colorNumber}`).classList.toggle(this.doneClose);

enrolmentData.stuff[colorNumber].color = "#" + ((1 << 24) + (parseInt(rgb[0]) << 16) + (parseInt(rgb[1]) << 8) + parseInt(rgb[2])).toString(16).slice(1);

this.setState(enrolmentData);
}
// if (event.target.getAttribute("stuff")) {
// let colorNumber = event.target.getAttribute("stuff");
// this.setState({color_idx: colorNumber});

// document.querySelector(`#color-picker_${colorNumber}`).classList.toggle(this.doneClose);
// } else {

// }
};

onSelectColorClose = () => {
let colorContainer = document.querySelector("#color-picker");
let target = document.querySelector(`#${colorTarget}`);
let targetNumber = target.getAttribute("stuff");
let enrolmentData = {...this.state.enrolmentData};
let rgb = target.style.backgroundColor.replace(/^(rgb|rgba)\(/,'').replace(/\)$/,'').replace(/\s/g,'').split(',');


colorContainer.classList.add(this.colorClose);

enrolmentData.stuff[targetNumber].color = "#" + ((1 << 24) + (parseInt(rgb[0]) << 16) + (parseInt(rgb[1]) << 8) + parseInt(rgb[2])).toString(16).slice(1);

this.setState(enrolmentData);
}

onSaveImages = images => {
this.setState({images: images});
}
Expand All @@ -356,45 +394,39 @@ class Enrolment extends Component {
else cup = 4;

// let tag = this.state.enrolmentData.info.tags;

console.log(this.state);

//태그 배열 형태로 나누는거 처리해야 됨
//재료 포멧은 정해야 될듯
// let data = {
// name: this.state.enrolmentData.info.name,
// glass: cup,
// percent: 50,
// description: this.state.enrolmentData.info.describe,
// tag: [],
// ingredient: this.state.stuff,
// owner: 'fonnie'
// }

let data = {
name: this.state.enrolmentData.info.name,
glass: cup,
percent: 50,
description: this.state.enrolmentData.info.describe,
tag: [],
ingredient: [{
name : "water",
color : "blue",
ml : 20
"name": "martini",
"glass" : 4,
"percent" : 50,
"description" : "This is so delicious",
"tag" : ["sweet", "romantic", "johnmat"],
"ingredient" : [{
"name" : "water",
"color" : "blue",
"ml" : 20
}, {
name : "hongcho",
color : "red",
ml : 10
"name" : "hongcho",
"color" : "red",
"ml" : 10
}],
owner: '이미지 추가까지 테스트!'
"owner" : "maga40"
}

// {
// "name": "martini",
// "glass" : 4,
// "percent" : 50,
// "description" : "This is so delicious",
// "tag" : ["sweet", "romantic", "johnmat"],
// "ingredient" : [{
// "name" : "water",
// "color" : "blue",
// "ml" : 20
// }, {
// "name" : "hongcho",
// "color" : "red",
// "ml" : 10
// }],
// "owner" : "maga40"
// }

// data.tag.push(tag);

this.props.enrolmentRequest(data);
Expand Down Expand Up @@ -423,12 +455,24 @@ class Enrolment extends Component {
});
}

handleChange = color => {
let target = document.querySelector(`#${colorTarget}`);
target.style.backgroundColor = color.hex;
}

render() {
const { left, middle, step, done } = this.state;

return (
<div className={cx("enrolment-container")}>

<div id={"color-picker"} className={cx("color-picker", "close")}>
<ChromePicker
onChange={ this.handleChange }
/>
<span id={"color-picker-background"} className={cx("picker-background")} onClick={ this.onSelectColorClose }></span>
</div>

<Header
onChangeStepStatus={this.onChangeStepStatus}
onSaveRecipe={this.onSaveRecipe}
Expand Down
32 changes: 32 additions & 0 deletions src/containers/Enrolment/Enrolment.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@ input {
outline: none;
}

.close {
display: none;
}

.enrolment-container {
position: absolute;
display: block;
Expand All @@ -15,6 +19,34 @@ input {
color: #ffffff;
z-index: 1;

.color-picker {
position: absolute;
height: 100%;
z-index: 2;
width: 100%;
height: 100%;

>div {
width: auto;
height: auto;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}

.picker-background {
display: block;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: transparent;
z-index: -1;
}
}

.content {
height: calc(100% - 303px);
padding: 74px 110px;
Expand Down
56 changes: 17 additions & 39 deletions src/containers/Enrolment/Function/Enrolment.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -324,6 +324,7 @@
line-height: 1.1;
letter-spacing: normal;
opacity: 0.2;
margin-bottom: 30px;
}

.stuff-area {
Expand All @@ -334,14 +335,13 @@
// overflow: scroll;
position: relative;
width: 100%;
height: calc(100% - 80px);
height: calc(100% - 110px);
overflow: auto;

.stuff-add {
display: block;
width: 100%;
height:auto;
margin-top: 30px;
cursor: pointer;
}

Expand All @@ -357,10 +357,8 @@

.stuff-container {
position: absolute;
height: auto;
width: 100%;
bottom: 0;



.stuff-item {
position: relative;
Expand All @@ -372,7 +370,7 @@
position: relative;

.stuff-item-input {
width: 100%;
width: 93%;
position: relative;
float: left;
border: 1px solid #ff365d;
Expand All @@ -395,28 +393,6 @@
// background-color: #4d191a;
box-sizing: border-box;
}

.color-picker {
position: absolute;
top: 10%;
left: -180px;
z-index: 2;
background-color: #fff;
padding: 5px 5px 10px 5px;
border-radius: 2px;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.8);

.picker-background {
display: block;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: transparent;
z-index: -1;
}
}

.stuff-item-input-stuff {
width: 40%;
Expand Down Expand Up @@ -471,17 +447,19 @@
font-size: 20px;
text-align: right;
}

.stuff-item-delete {
display: block;
position: absolute;
width: 3%;
padding-bottom: 3%;
top: 5%;
right: 1%;
border: 1px solid #707070;
box-sizing: border-box;
}
}

.stuff-delete {
display: block;
width: 5%;
height: 35px;
float:left;
background-image: url(../../../static/images/trash.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
transform: translate3d(0,0,0);
}
}

Expand Down
Loading

0 comments on commit 513776c

Please sign in to comment.