283 lines
7.7 KiB
JavaScript
283 lines
7.7 KiB
JavaScript
import React from "react";
|
||
import Head from 'next/head';
|
||
import Image from 'next/image';
|
||
import moment from 'moment';
|
||
import 'moment/locale/ru';
|
||
import numeral from "numeral";
|
||
import { connect } from "react-redux";
|
||
import { withRouter } from 'next/router';
|
||
import { reduxWrapper } from '../../store';
|
||
|
||
import Header from '../components/Header';
|
||
import Footer from '../components/Footer';
|
||
import InnerMenu from "./components/InnerMenu";
|
||
import Company from "../components/Company";
|
||
|
||
class SchedulePage extends React.Component
|
||
{
|
||
constructor(props)
|
||
{
|
||
super(props);
|
||
this.state = {
|
||
payments: [{
|
||
date: "2021-11-15",
|
||
total: 128000.22,
|
||
}, {
|
||
date: "2021-11-25",
|
||
total: 239400.88,
|
||
}]
|
||
};
|
||
}
|
||
|
||
getPayments = (date) =>
|
||
{
|
||
const { payments } = this.state;
|
||
|
||
for(let i in payments)
|
||
{
|
||
if(payments[i].date === date)
|
||
{
|
||
return payments[i].total;
|
||
}
|
||
}
|
||
return undefined;
|
||
}
|
||
|
||
render()
|
||
{
|
||
let month = 10;
|
||
|
||
const dates = [];
|
||
const date_sm = moment().month(month).startOf("month");
|
||
const date_em = moment().month(month).endOf("month");
|
||
|
||
console.log("date_sm", date_sm.format("YYYY-MM-DD"));
|
||
console.log("date_em", date_em.format("YYYY-MM-DD"));
|
||
console.log("date_sm.day()", date_sm.day());
|
||
console.log("date_em.day()", date_em.day());
|
||
|
||
let date_s = null;
|
||
if(date_sm.day() !== 1)
|
||
{ date_s = date_sm.subtract(date_sm.day() - 1, "days"); }
|
||
else
|
||
{ date_s = date_sm; }
|
||
|
||
let date_e = null;
|
||
if(date_em.day() !== 0)
|
||
{ date_e = date_em.add(7 - date_em.day(), "days"); }
|
||
else
|
||
{ date_e = date_em; }
|
||
|
||
const date = moment();
|
||
console.log(date_sm.format("YYYY-MM-DD"));
|
||
console.log(date_sm.day());
|
||
console.log("date_s", date_s.format("YYYY-MM-DD"))
|
||
console.log("date_e", date_e.format("YYYY-MM-DD"))
|
||
|
||
let d = date_s;
|
||
dates.push({
|
||
date: date_s.clone(),
|
||
payment: this.getPayments(date_s.format("YYYY-MM-DD")),
|
||
});
|
||
|
||
while(d.add(1, 'days').diff(date_e) < 0)
|
||
{
|
||
//console.log(d.toDate());
|
||
dates.push({
|
||
date: d.clone(),
|
||
payment: this.getPayments(d.format("YYYY-MM-DD")),
|
||
});
|
||
}
|
||
|
||
const dow = date.day();
|
||
console.log(dow);
|
||
console.log("date.month())", date.month());
|
||
|
||
return (
|
||
<React.Fragment>
|
||
<Head>
|
||
<title>ЛК Эволюция автолизинга</title>
|
||
<meta
|
||
name="description"
|
||
content="ЛК Эволюция автолизинга"
|
||
/>
|
||
</Head>
|
||
<Header { ...this.props }/>
|
||
<main>
|
||
<section>
|
||
<div className="clear"></div>
|
||
<div className="container">
|
||
<div className="title_wrapper">
|
||
<div className="left">
|
||
<h1 className="section_title">Календарь оплат</h1>
|
||
</div>
|
||
<Company/>
|
||
</div>
|
||
<div className="aside_container about">
|
||
<InnerMenu { ...this.props }/>
|
||
<article>
|
||
<div className="calendar_wrapper">
|
||
<div className="form_field">
|
||
<select id="calendar_month">
|
||
<option selected>{ moment().month(month).format('MMMM') }</option>
|
||
</select>
|
||
</div>
|
||
<div className="calendar_grid">
|
||
<div className="grid_header">
|
||
<div className="grid_cell">Пн</div>
|
||
<div className="grid_cell">Вт</div>
|
||
<div className="grid_cell">Ср</div>
|
||
<div className="grid_cell">Чт</div>
|
||
<div className="grid_cell">Пт</div>
|
||
<div className="grid_cell">Сб</div>
|
||
<div className="grid_cell">Вс</div>
|
||
</div>
|
||
<div className="grid_body">
|
||
{ dates.map((day, index) => {
|
||
return (
|
||
<div key={ index } className={`grid_cell ${ day.date.month() !== month ? 'disabled' : '' }`}>
|
||
<div className="cell_header">
|
||
<p><span>{ day.date.format("DD") }</span> { day.date.format("MMM").toLocaleLowerCase() }</p>
|
||
</div>
|
||
<div className="cell_body">{ day.payment && (
|
||
<p>
|
||
Общий платеж
|
||
<span>{ numeral(day.payment).format('') } р.</span>
|
||
</p>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)
|
||
}) }
|
||
{/*}
|
||
<div className="grid_cell disabled">
|
||
<div className="cell_header">
|
||
<p><span>30</span> мая</p>
|
||
</div>
|
||
<div className="cell_body"></div>
|
||
</div>
|
||
|
||
<div className="grid_cell disabled">
|
||
<div className="cell_header">
|
||
<p><span>31</span> мая</p>
|
||
</div>
|
||
<div className="cell_body"></div>
|
||
</div>
|
||
|
||
<div className="grid_cell">
|
||
<div className="cell_header">
|
||
<p><span>01</span> июня</p>
|
||
</div>
|
||
<div className="cell_body"></div>
|
||
</div>
|
||
|
||
<div className="grid_cell">
|
||
<div className="cell_header">
|
||
<p><span>02</span> июня</p>
|
||
</div>
|
||
<div className="cell_body"></div>
|
||
</div>
|
||
|
||
<div className="grid_cell current">
|
||
<div className="cell_header">
|
||
<p><span>03</span> июня</p>
|
||
</div>
|
||
<div className="cell_body"></div>
|
||
</div>
|
||
|
||
<div className="grid_cell">
|
||
<div className="cell_header">
|
||
<p><span>04</span> июня</p>
|
||
</div>
|
||
<div className="cell_body"></div>
|
||
</div>
|
||
|
||
<div className="grid_cell">
|
||
<div className="cell_header">
|
||
<p><span>05</span> июня</p>
|
||
</div>
|
||
<div className="cell_body"></div>
|
||
</div>
|
||
<div className="grid_cell">
|
||
<div className="cell_header">
|
||
<p><span>30</span> мая</p>
|
||
</div>
|
||
<div className="cell_body"></div>
|
||
</div>
|
||
|
||
<div className="grid_cell">
|
||
<div className="cell_header">
|
||
<p><span>31</span> мая</p>
|
||
</div>
|
||
<div className="cell_body">
|
||
<p>
|
||
Общий платеж
|
||
<span>239 400,00 р.</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid_cell">
|
||
<div className="cell_header">
|
||
<p><span>01</span> июня</p>
|
||
</div>
|
||
<div className="cell_body"></div>
|
||
</div>
|
||
|
||
<div className="grid_cell">
|
||
<div className="cell_header">
|
||
<p><span>02</span> июня</p>
|
||
</div>
|
||
<div className="cell_body"></div>
|
||
</div>
|
||
|
||
<div className="grid_cell">
|
||
<div className="cell_header">
|
||
<p><span>03</span> июня</p>
|
||
</div>
|
||
<div className="cell_body"></div>
|
||
</div>
|
||
|
||
<div className="grid_cell">
|
||
<div className="cell_header">
|
||
<p><span>04</span> июня</p>
|
||
</div>
|
||
<div className="cell_body"></div>
|
||
</div>
|
||
|
||
<div className="grid_cell">
|
||
<div className="cell_header">
|
||
<p><span>05</span> июня</p>
|
||
</div>
|
||
<div className="cell_body"></div>
|
||
</div>
|
||
{*/}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
<Footer/>
|
||
</React.Fragment>
|
||
)
|
||
}
|
||
}
|
||
|
||
function mapStateToProps(state, ownProps)
|
||
{
|
||
return {
|
||
company: state.company,
|
||
schedule: state.payments,
|
||
}
|
||
}
|
||
|
||
export const getServerSideProps = reduxWrapper.getServerSideProps(store =>
|
||
async ({ req, res, query }) =>
|
||
{
|
||
}
|
||
);
|
||
|
||
export default withRouter(connect(mapStateToProps)(SchedulePage)); |