Оценка работы
This commit is contained in:
Denis
parent
c8d6de0556
commit
0d7936ed7f
5118
css/main/style.css
5118
css/main/style.css
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
10657
package-lock.json
generated
10657
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,119 +1,135 @@
|
|||||||
import React from "react";
|
import React from "react"
|
||||||
import { connect } from "react-redux";
|
import { connect } from "react-redux"
|
||||||
import { SpinnerCircular } from 'spinners-react';
|
import { SpinnerCircular } from "spinners-react"
|
||||||
|
import Rating from "../Rating"
|
||||||
|
import { getImage } from "../../../actions"
|
||||||
|
|
||||||
import { getImage } from '../../../actions';
|
class Manager extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props)
|
||||||
|
this.state = {
|
||||||
|
company: {},
|
||||||
|
photo: undefined,
|
||||||
|
loading: true,
|
||||||
|
full: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
class Manager extends React.Component
|
static getDerivedStateFromProps(nextProps, prevState) {
|
||||||
{
|
return {
|
||||||
constructor(props)
|
company: nextProps.company
|
||||||
{
|
}
|
||||||
super(props);
|
}
|
||||||
this.state = {
|
|
||||||
company: {},
|
|
||||||
photo: undefined,
|
|
||||||
loading: true,
|
|
||||||
full: false,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
static getDerivedStateFromProps(nextProps, prevState)
|
componentDidMount() {
|
||||||
{
|
const { company } = this.state
|
||||||
return {
|
|
||||||
company: nextProps.company,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidMount()
|
this._loadManagerAvatar()
|
||||||
{
|
}
|
||||||
const { company } = this.state;
|
|
||||||
|
|
||||||
this._loadManagerAvatar();
|
componentDidUpdate(prevProps, prevState) {
|
||||||
}
|
if (prevState.company.manager_photo === undefined && this.state.company.manager_photo !== undefined) {
|
||||||
|
this._loadManagerAvatar()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
componentDidUpdate(prevProps, prevState)
|
_loadManagerAvatar = () => {
|
||||||
{
|
const { company } = this.state
|
||||||
if(prevState.company.manager_photo === undefined && this.state.company.manager_photo !== undefined)
|
|
||||||
{
|
|
||||||
this._loadManagerAvatar();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
_loadManagerAvatar = () =>
|
if (company.manager_photo !== undefined && company.manager_photo !== null && company.manager_photo !== "") {
|
||||||
{
|
getImage({ id: company.manager_photo }).then((result) => {
|
||||||
const { company } = this.state;
|
this.setState({ photo: result, loading: false })
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
if (company.manager_photo !== undefined) {
|
||||||
|
this.setState({ photo: null, loading: false })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
if(company.manager_photo !== undefined && company.manager_photo !== null && company.manager_photo !== "")
|
_handle_onFull = () => {
|
||||||
{
|
this.setState({ full: this.state.full ? false : true })
|
||||||
getImage({ id: company.manager_photo })
|
}
|
||||||
.then((result) =>
|
|
||||||
{
|
|
||||||
this.setState({ photo: result, loading: false });
|
|
||||||
})
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
if(company.manager_photo !== undefined)
|
|
||||||
{
|
|
||||||
this.setState({ photo: null, loading: false });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
_handle_onFull = () =>
|
render() {
|
||||||
{
|
const { company, loading, photo, full } = this.state
|
||||||
this.setState({ full: this.state.full ? false : true });
|
|
||||||
}
|
|
||||||
|
|
||||||
render()
|
return (
|
||||||
{
|
<div className="helpBox_wrapper">
|
||||||
const { company, loading, photo, full, } = this.state;
|
<div className={`helpBox ${!full ? "hidden" : ""}`}>
|
||||||
|
<div className="avatar">
|
||||||
|
{loading ? (
|
||||||
|
<SpinnerCircular
|
||||||
|
size={24}
|
||||||
|
thickness={51}
|
||||||
|
speed={100}
|
||||||
|
color="rgba(28, 1, 169, 1)"
|
||||||
|
secondaryColor="rgba(236, 239, 244, 1)"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<img
|
||||||
|
src={photo !== null ? photo : `/assets/images/icons/avatar.svg`}
|
||||||
|
loading="lazy"
|
||||||
|
alt={company.manager_fio}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="content">
|
||||||
|
<p className="message">Помогу выбрать новый автомобиль</p>
|
||||||
|
<p className="name">{company.manager_fio}</p>
|
||||||
|
<p className="position">{company.manager_jobtitle}</p>
|
||||||
|
<div className="info">
|
||||||
|
<a href={`mailto:${company.manager_email}`}>{company.manager_email}</a>
|
||||||
|
{company.manager_mobilephone !== undefined &&
|
||||||
|
company.manager_mobilephone !== null &&
|
||||||
|
company.manager_mobilephone !== "" && (
|
||||||
|
<a href={`tel:+${company.manager_mobilephone.replace(/[^\d]/gm, "")}`}>
|
||||||
|
{company.manager_mobilephone}
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
{company.manager_telegram !== undefined &&
|
||||||
|
company.manager_telegram !== null &&
|
||||||
|
company.manager_telegram !== "" && (
|
||||||
|
<a
|
||||||
|
href={`https://telegram.me/${company.manager_telegram.replace("@", "")}`}
|
||||||
|
target="_blank"
|
||||||
|
>{`@${company.manager_telegram.replace("@", "")}`}</a>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="button" onClick={this._handle_onFull}></div>
|
||||||
|
</div>
|
||||||
|
<div className={`helpBox_small interactive ${full ? "hidden" : ""}`} onClick={this._handle_onFull}>
|
||||||
|
<div className="avatar">
|
||||||
|
{loading ? (
|
||||||
|
<SpinnerCircular
|
||||||
|
size={24}
|
||||||
|
thickness={51}
|
||||||
|
speed={100}
|
||||||
|
color="rgba(28, 1, 169, 1)"
|
||||||
|
secondaryColor="rgba(236, 239, 244, 1)"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<img
|
||||||
|
src={photo !== null ? photo : `/assets/images/icons/avatar.svg`}
|
||||||
|
loading="lazy"
|
||||||
|
alt={company.manager_fio}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
return (
|
{/* Оценка */}
|
||||||
<div className="helpBox_wrapper">
|
<Rating />
|
||||||
<div className={ `helpBox ${ !full ? "hidden" : "" }` }>
|
</div>
|
||||||
<div className="avatar">
|
)
|
||||||
{ loading ? (
|
}
|
||||||
<SpinnerCircular size={24} thickness={51} speed={100} color="rgba(28, 1, 169, 1)" secondaryColor="rgba(236, 239, 244, 1)" />
|
|
||||||
) : (
|
|
||||||
<img src={ photo !== null ? photo : `/assets/images/icons/avatar.svg` } loading="lazy" alt={ company.manager_fio } />
|
|
||||||
) }
|
|
||||||
</div>
|
|
||||||
<div className="content">
|
|
||||||
<p className="message">Помогу выбрать новый автомобиль</p>
|
|
||||||
<p className="name">{ company.manager_fio }</p>
|
|
||||||
<p className="position">{ company.manager_jobtitle }</p>
|
|
||||||
<div className="info">
|
|
||||||
<a href={ `mailto:${ company.manager_email }` }>{ company.manager_email }</a>
|
|
||||||
{ company.manager_mobilephone !== undefined && company.manager_mobilephone !== null && company.manager_mobilephone !== "" && (
|
|
||||||
<a href={ `tel:+${ company.manager_mobilephone.replace(/[^\d]/mg, '') }` }>{ company.manager_mobilephone }</a>
|
|
||||||
) }
|
|
||||||
{ company.manager_telegram !== undefined && company.manager_telegram !== null && company.manager_telegram !== "" && (
|
|
||||||
<a href={ `https://telegram.me/${ company.manager_telegram.replace("@", "") }` } target="_blank">{ `@${ company.manager_telegram.replace("@", "")}` }</a>
|
|
||||||
) }
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="button" onClick={ this._handle_onFull }></div>
|
|
||||||
</div>
|
|
||||||
<div className={ `helpBox_small interactive ${ full ? "hidden" : "" }` } onClick={ this._handle_onFull }>
|
|
||||||
<div className="avatar">
|
|
||||||
{ loading ? (
|
|
||||||
<SpinnerCircular size={24} thickness={51} speed={100} color="rgba(28, 1, 169, 1)" secondaryColor="rgba(236, 239, 244, 1)" />
|
|
||||||
) : (
|
|
||||||
<img src={ photo !== null ? photo : `/assets/images/icons/avatar.svg` } loading="lazy" alt={ company.manager_fio } />
|
|
||||||
) }
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function mapStateToProps(state, ownProps)
|
function mapStateToProps(state, ownProps) {
|
||||||
{
|
return {
|
||||||
return {
|
company: state.company
|
||||||
company: state.company,
|
}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default connect(mapStateToProps)(Manager);
|
export default connect(mapStateToProps)(Manager)
|
||||||
|
|||||||
115
pages/components/Rating/index.js
Normal file
115
pages/components/Rating/index.js
Normal file
@ -0,0 +1,115 @@
|
|||||||
|
import React from "react"
|
||||||
|
import { connect } from "react-redux"
|
||||||
|
|
||||||
|
class Rating extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props)
|
||||||
|
this.state = {
|
||||||
|
opened: false,
|
||||||
|
rating: 0,
|
||||||
|
hovered: 0,
|
||||||
|
stars: []
|
||||||
|
}
|
||||||
|
|
||||||
|
let outOf = props.outOf ? props.outOf : 5
|
||||||
|
|
||||||
|
for (var i = 0; i < outOf; i++) {
|
||||||
|
this.state.stars.push(i + 1)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
static getDerivedStateFromProps(nextProps, prevState) {
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {}
|
||||||
|
|
||||||
|
componentDidUpdate(prevProps, prevState) {}
|
||||||
|
|
||||||
|
changeRating(newRating) {
|
||||||
|
this.setState({
|
||||||
|
rating: newRating
|
||||||
|
})
|
||||||
|
|
||||||
|
if (this.props.onChange) this.props.onChange(newRating)
|
||||||
|
}
|
||||||
|
|
||||||
|
hoverRating(rating) {
|
||||||
|
this.setState({
|
||||||
|
hovered: rating
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
_handleRate = () => {
|
||||||
|
if (this.state.rating > 0) {
|
||||||
|
this.setState({
|
||||||
|
opened: true
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { opened, stars, rating, hovered } = this.state
|
||||||
|
const data = ["Очень плохо", "Плохо", "Нормально", "Хорошо", "Отлично"]
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={opened ? "rate_us opened" : "rate_us"}>
|
||||||
|
<div className="rate_body">
|
||||||
|
<p>Оцените нас</p>
|
||||||
|
<div className="rate_start">
|
||||||
|
<div className="stars">
|
||||||
|
{stars.map((star) => {
|
||||||
|
return (
|
||||||
|
<label
|
||||||
|
className={rating < star ? (hovered < star ? "" : "hover") : "active"}
|
||||||
|
onClick={() => {
|
||||||
|
this.changeRating(star)
|
||||||
|
}}
|
||||||
|
onMouseEnter={() => {
|
||||||
|
this.hoverRating(star)
|
||||||
|
}}
|
||||||
|
onMouseLeave={() => {
|
||||||
|
this.hoverRating(0)
|
||||||
|
}}
|
||||||
|
></label>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
{opened ? (
|
||||||
|
<p>{data[this.state.rating - 1]}</p>
|
||||||
|
) : (
|
||||||
|
<button
|
||||||
|
className="button button button-blue"
|
||||||
|
onClick={() => {
|
||||||
|
this._handleRate()
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Оценить
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<form>
|
||||||
|
<div className="form_field">
|
||||||
|
<input type="text" value="" placeholder="Имя" />
|
||||||
|
</div>
|
||||||
|
<div className="form_field">
|
||||||
|
<input type="text" value="" placeholder="Телефон" />
|
||||||
|
</div>
|
||||||
|
<div className="form_field">
|
||||||
|
<textarea placeholder="Комментарий"></textarea>
|
||||||
|
</div>
|
||||||
|
<button type="submit" className="button button button-blue">
|
||||||
|
Отправить
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function mapStateToProps(state, ownProps) {
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default connect(mapStateToProps)(Rating)
|
||||||
Loading…
x
Reference in New Issue
Block a user