reestr pagination

This commit is contained in:
gerchek 2022-01-26 15:52:51 +05:00
parent e8d987ee36
commit 65db2d80c7
12 changed files with 69 additions and 26 deletions

View File

@ -1,8 +1,8 @@
{
"files": {
"main.css": "/static/css/main.e6c909d5.chunk.css",
"main.js": "/static/js/main.5677fcd2.chunk.js",
"main.js.map": "/static/js/main.5677fcd2.chunk.js.map",
"main.css": "/static/css/main.1e3cf1c6.chunk.css",
"main.js": "/static/js/main.34ec379e.chunk.js",
"main.js.map": "/static/js/main.34ec379e.chunk.js.map",
"runtime-main.js": "/static/js/runtime-main.2cdb2292.js",
"runtime-main.js.map": "/static/js/runtime-main.2cdb2292.js.map",
"static/css/2.d555f809.chunk.css": "/static/css/2.d555f809.chunk.css",
@ -12,7 +12,7 @@
"static/js/3.f448a7ff.chunk.js.map": "/static/js/3.f448a7ff.chunk.js.map",
"index.html": "/index.html",
"static/css/2.d555f809.chunk.css.map": "/static/css/2.d555f809.chunk.css.map",
"static/css/main.e6c909d5.chunk.css.map": "/static/css/main.e6c909d5.chunk.css.map",
"static/css/main.1e3cf1c6.chunk.css.map": "/static/css/main.1e3cf1c6.chunk.css.map",
"static/js/2.60074970.chunk.js.LICENSE.txt": "/static/js/2.60074970.chunk.js.LICENSE.txt",
"static/media/2021.f2b58ae1.jpg": "/static/media/2021.f2b58ae1.jpg",
"static/media/airport.9ca79b5c.jpg": "/static/media/airport.9ca79b5c.jpg",
@ -47,7 +47,7 @@
"static/js/runtime-main.2cdb2292.js",
"static/css/2.d555f809.chunk.css",
"static/js/2.60074970.chunk.js",
"static/css/main.e6c909d5.chunk.css",
"static/js/main.5677fcd2.chunk.js"
"static/css/main.1e3cf1c6.chunk.css",
"static/js/main.34ec379e.chunk.js"
]
}

View File

@ -1 +1 @@
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="preconnect" href="https://fonts.googleapis.com"/><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/><link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>Etalon</title><link href="/static/css/2.d555f809.chunk.css" rel="stylesheet"><link href="/static/css/main.e6c909d5.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function t(t){for(var n,a,i=t[0],c=t[1],l=t[2],s=0,p=[];s<i.length;s++)a=i[s],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&p.push(o[a][0]),o[a]=0;for(n in c)Object.prototype.hasOwnProperty.call(c,n)&&(e[n]=c[n]);for(f&&f(t);p.length;)p.shift()();return u.push.apply(u,l||[]),r()}function r(){for(var e,t=0;t<u.length;t++){for(var r=u[t],n=!0,i=1;i<r.length;i++){var c=r[i];0!==o[c]&&(n=!1)}n&&(u.splice(t--,1),e=a(a.s=r[0]))}return e}var n={},o={1:0},u=[];function a(t){if(n[t])return n[t].exports;var r=n[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,a),r.l=!0,r.exports}a.e=function(e){var t=[],r=o[e];if(0!==r)if(r)t.push(r[2]);else{var n=new Promise((function(t,n){r=o[e]=[t,n]}));t.push(r[2]=n);var u,i=document.createElement("script");i.charset="utf-8",i.timeout=120,a.nc&&i.setAttribute("nonce",a.nc),i.src=function(e){return a.p+"static/js/"+({}[e]||e)+"."+{3:"f448a7ff"}[e]+".chunk.js"}(e);var c=new Error;u=function(t){i.onerror=i.onload=null,clearTimeout(l);var r=o[e];if(0!==r){if(r){var n=t&&("load"===t.type?"missing":t.type),u=t&&t.target&&t.target.src;c.message="Loading chunk "+e+" failed.\n("+n+": "+u+")",c.name="ChunkLoadError",c.type=n,c.request=u,r[1](c)}o[e]=void 0}};var l=setTimeout((function(){u({type:"timeout",target:i})}),12e4);i.onerror=i.onload=u,document.head.appendChild(i)}return Promise.all(t)},a.m=e,a.c=n,a.d=function(e,t,r){a.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,t){if(1&t&&(e=a(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(a.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)a.d(r,n,function(t){return e[t]}.bind(null,n));return r},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,"a",t),t},a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.p="/",a.oe=function(e){throw console.error(e),e};var i=this["webpackJsonpreact-etalon"]=this["webpackJsonpreact-etalon"]||[],c=i.push.bind(i);i.push=t,i=i.slice();for(var l=0;l<i.length;l++)t(i[l]);var f=c;r()}([])</script><script src="/static/js/2.60074970.chunk.js"></script><script src="/static/js/main.5677fcd2.chunk.js"></script></body></html>
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="preconnect" href="https://fonts.googleapis.com"/><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/><link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>Etalon</title><link href="/static/css/2.d555f809.chunk.css" rel="stylesheet"><link href="/static/css/main.1e3cf1c6.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function t(t){for(var n,a,i=t[0],c=t[1],l=t[2],s=0,p=[];s<i.length;s++)a=i[s],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&p.push(o[a][0]),o[a]=0;for(n in c)Object.prototype.hasOwnProperty.call(c,n)&&(e[n]=c[n]);for(f&&f(t);p.length;)p.shift()();return u.push.apply(u,l||[]),r()}function r(){for(var e,t=0;t<u.length;t++){for(var r=u[t],n=!0,i=1;i<r.length;i++){var c=r[i];0!==o[c]&&(n=!1)}n&&(u.splice(t--,1),e=a(a.s=r[0]))}return e}var n={},o={1:0},u=[];function a(t){if(n[t])return n[t].exports;var r=n[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,a),r.l=!0,r.exports}a.e=function(e){var t=[],r=o[e];if(0!==r)if(r)t.push(r[2]);else{var n=new Promise((function(t,n){r=o[e]=[t,n]}));t.push(r[2]=n);var u,i=document.createElement("script");i.charset="utf-8",i.timeout=120,a.nc&&i.setAttribute("nonce",a.nc),i.src=function(e){return a.p+"static/js/"+({}[e]||e)+"."+{3:"f448a7ff"}[e]+".chunk.js"}(e);var c=new Error;u=function(t){i.onerror=i.onload=null,clearTimeout(l);var r=o[e];if(0!==r){if(r){var n=t&&("load"===t.type?"missing":t.type),u=t&&t.target&&t.target.src;c.message="Loading chunk "+e+" failed.\n("+n+": "+u+")",c.name="ChunkLoadError",c.type=n,c.request=u,r[1](c)}o[e]=void 0}};var l=setTimeout((function(){u({type:"timeout",target:i})}),12e4);i.onerror=i.onload=u,document.head.appendChild(i)}return Promise.all(t)},a.m=e,a.c=n,a.d=function(e,t,r){a.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,t){if(1&t&&(e=a(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(a.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)a.d(r,n,function(t){return e[t]}.bind(null,n));return r},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,"a",t),t},a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.p="/",a.oe=function(e){throw console.error(e),e};var i=this["webpackJsonpreact-etalon"]=this["webpackJsonpreact-etalon"]||[],c=i.push.bind(i);i.push=t,i=i.slice();for(var l=0;l<i.length;l++)t(i[l]);var f=c;r()}([])</script><script src="/static/js/2.60074970.chunk.js"></script><script src="/static/js/main.34ec379e.chunk.js"></script></body></html>

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 one or more lines are too long

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 one or more lines are too long

View File

@ -19,13 +19,14 @@ class MeasuringRegister extends React.Component {
this.state = {
items: [],
DataisLoaded: false,
error: null
error: null,
tablePage: 0
};
}
componentDidMount() {
this._mounted = true
this.makeRemoteRequest();
this._mounted = true;
this.makeRemoteRequest(true);
}
@ -34,16 +35,21 @@ class MeasuringRegister extends React.Component {
this._mounted = false
}
makeRemoteRequest = () => {
const url = `http://217.174.238.204:8888/api/v1/reestr`
makeRemoteRequest = (query) => {
if(query){
this.setState({tablePage: this.state.tablePage + 1})
}
else if(this.state.tablePage > 1){
this.setState({tablePage: this.state.tablePage - 1})
}
const url = 'http://217.174.238.204:8888/api/v1/reestr';
if (this._mounted) {
this.setState({ DataisLoaded: true });
}
setTimeout(() => {
fetch(url, {
fetch(url + '?page=' + this.state.tablePage, {
method: 'GET',
})
@ -56,6 +62,7 @@ class MeasuringRegister extends React.Component {
error: res.message || null,
DataisLoaded: true,
})
// console.log(this.state.tablePage)
console.log(this.state.items)
}
@ -144,6 +151,10 @@ class MeasuringRegister extends React.Component {
</table>
</div>
</div>
<div className="pagination">
<button type="button" className="pagination-btn prev" onClick={() => {this.makeRemoteRequest(false)}}>Предыдущая</button>
<button type="button" className="pagination-btn next" onClick={() => {this.makeRemoteRequest(true)}}>Следующая</button>
</div>
</div>
</section>
);

View File

@ -1,7 +1,7 @@
// IMPORT MODULES
import React from "react";
import { withTranslation } from 'react-i18next';
// import i18n from '../i18n';
import i18n from '../i18n';
// IMPORT COMPONENTS
@ -91,7 +91,7 @@ class Service_bottom extends React.Component {
<div className="service-bottom">
<div className="tab-header">
<h4 className="tab-header-text" id="tab-header-text">
Виды заявок
{t('Виды заявок')}
</h4>
<div className="tab-header-line"></div>
</div>
@ -118,7 +118,17 @@ class Service_bottom extends React.Component {
</a>
</div>
<div className="service-card-bottom">
<h4 className="service-card-title">{item.title}</h4>
<h4 className="service-card-title">
{ i18n.language === 'en' &&
JSON.parse(item['translations'][0]['attribute_data']).title
}
{ i18n.language === 'ru' &&
item.title
}
{ i18n.language === 'tm' &&
JSON.parse(item['translations'][1]['attribute_data']).title
}
</h4>
</div>
</div>
))}

View File

@ -5,7 +5,7 @@
}
.mr-content {
padding-bottom: 10rem;
padding-bottom: 5rem;
}
.mr-table {
@ -19,6 +19,25 @@
}
}
.pagination{
padding-bottom: 10rem;
display: flex;
justify-content: flex-end;
.pagination-btn{
padding: 1rem 2rem;
background: none;
border: 0.1rem solid gray;
cursor: pointer;
transition: 0.3s all ease;
&:hover{
background: lightgray;
transition: 0.3s all ease;
}
}
}
// MOBILE
@media screen and(max-width: 1360px) {

View File

@ -23,7 +23,7 @@
}
.service-img-wrapper {
max-height: 32.4rem;
max-height: 45.4rem;
max-width: 28.5rem;
width: 100%;
height: 100%;
@ -36,8 +36,11 @@
}
.service-card {
display: flex;
flex-direction: column;
justify-content: space-between;
max-width: 30.5rem;
max-height: 39.6rem;
// max-height: 39.6rem;
cursor: pointer;
position: relative;
text-align: center;