TPS
/
etalon_frontend
4
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

styling corrections, a tag corrected

This commit is contained in:
VividTruthKeeper 2022-05-18 22:05:24 +05:00
parent ecc87921f1
commit fd633cb64b
5 changed files with 261 additions and 290 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/helpers/TableSearch.js
View File

@ -1,8 +1,8 @@
export const tableSearch = (word, tableRef) => {
// Declare variables
let table, tr, td, i, txtValue;
let table, tr, i, txtValue;
word = word.toUpperCase();
table = document.querySelector('.' + tableRef);
table = document.querySelector("." + tableRef);
tr = table.getElementsByTagName("tr");
// Loop through all table rows, and hide those who don't match the search query

175
src/pages/Regulations.js
View File

@ -1,29 +1,18 @@
// IMPORT MODULES
import React from "react";
import { withTranslation } from 'react-i18next';
import parse from 'html-react-parser';
import i18n from '../i18n';
import { withTranslation } from "react-i18next";
import parse from "html-react-parser";
import i18n from "../i18n";
// SEARCH
import { tableSearch } from '../helpers/TableSearch';
import { tableSearch } from "../helpers/TableSearch";
// IMPORT COMPONENTS
import Breadcrumb from "../components/Global/Breadcrumb";
// IMPORT IMAGES
import Loop from "../svg/loupe.svg";
import Next from "../svg/next.svg";
import Prev from "../svg/prev.svg";
// const Regulations = (props) => {
// const {t} = props;
// useEffect(() => {
// window.scrollTo(0, 0);
// }, []);
class Regulations extends React.Component {
constructor(props) {
super(props);
this.tableRef = React.createRef;
@ -31,69 +20,60 @@ class Regulations extends React.Component {
this.state = {
items: [],
DataisLoaded: false,
error: null
};
error: null,
};
}
componentDidMount() {
this._mounted = true
this._mounted = true;
this.makeRemoteRequest();
}
componentWillUnmount() {
this._mounted = false
this._mounted = false;
}
makeRemoteRequest = () => {
const url = `https://etalon.gov.tm:8080/api/v1/reestr_doc`;
const url = `https://etalon.gov.tm:8080/api/v1/reestr_doc`
if (this._mounted) {
this.setState({ DataisLoaded: true });
}
setTimeout(() => {
fetch(url, {
method: 'GET',
method: "GET",
})
.then(res => res.json())
.then(res => {
.then((res) => res.json())
.then((res) => {
if (this._mounted) {
this.setState({
items: res.data,
error: res.message || null,
DataisLoaded: true,
})
});
// console.log(this.state.items)
}
})
.catch(error => {
.catch((error) => {
if (this._mounted) {
this.setState({ error, DataisLoaded: false});
this.setState({ error, DataisLoaded: false });
}
});
}, 1500);
};
render() {
const { t } = this.props;
var number = 1;
var {DataisLoaded, items} = this.state;
if(!DataisLoaded){
return <div>Loading ....</div>
}else{
var { DataisLoaded, items } = this.state;
if (!DataisLoaded) {
return <div>Loading ....</div>;
} else {
return (
<section className="regulations">
<Breadcrumb
path_1={t('Реестр нормативной документации')}
path_1={t("Реестр нормативной документации")}
currentUrl="/measuring_regulations"
/>
<div className="container">
@ -101,10 +81,14 @@ class Regulations extends React.Component {
<div className="regulations-head">
<div className="regulations-head-left">
<form className="search-form">
<input type="text" placeholder="Поиск" onChange={(e) => {
const input = e.target.value;
tableSearch(input, 'tbody-search');
}} />
<input
type="text"
placeholder="Поиск"
onChange={(e) => {
const input = e.target.value;
tableSearch(input, "tbody-search");
}}
/>
<button type="button">
<div>
<img src={Loop} alt="Loop" />
@ -132,64 +116,62 @@ class Regulations extends React.Component {
<table className="regulations-table structure-table">
<tbody className="tbody-search">
<tr className="table-head">
<th className="n head">{t('№ серт.')}</th>
<th className="n head">{t("№ серт.")}</th>
<th className="number head">
{t('Номер нормативной документации')}
{t("Номер нормативной документации")}
</th>
<th className="replacedby head">{t('Взамен НТД')}</th>
<th className="replacedby head">{t("Взамен НТД")}</th>
<th className="desc head">
{t('Наименование нормативной документации')}
{t("Наименование нормативной документации")}
</th>
<th className="date head">{t('Дата введения')}</th>
<th className="limit head">{t('Срок действия')}</th>
<th className="limit head">{t('Примечание')}</th>
<th className="date head">{t("Дата введения")}</th>
<th className="limit head">{t("Срок действия")}</th>
<th className="limit head">{t("Примечание")}</th>
</tr>
{items.map(item=>(
<tr key={item.id}>
<td>{number++}</td>
<td>
{ i18n.language === 'en' &&
parse(item.document_number)
}
{ i18n.language === 'ru' &&
parse(item.document_number)
}
{ i18n.language === 'tm' &&
parse(JSON.parse(item['translations'][1]['attribute_data']).document_number )
}
</td>
<td>
{ i18n.language === 'en' &&
parse(item.instead)
}
{ i18n.language === 'ru' &&
parse(item.instead)
}
{ i18n.language === 'tm' &&
parse(JSON.parse(item['translations'][1]['attribute_data']).instead )
}
</td>
<td>
{/* {parse(item.name_of_documentation)} */}
{ i18n.language === 'en' &&
parse(item.name_of_documentation)
}
{ i18n.language === 'ru' &&
parse(item.name_of_documentation)
}
{ i18n.language === 'tm' &&
parse(JSON.parse(item['translations'][1]['attribute_data']).name_of_documentation )
}
</td>
<td>{item.introduction_date}</td>
<td>{item.validity}</td>
<td>{item.note}</td>
</tr>
{items.map((item) => (
<tr key={item.id}>
<td>{number++}</td>
<td>
{i18n.language === "en" &&
parse(item.document_number)}
{i18n.language === "ru" &&
parse(item.document_number)}
{i18n.language === "tm" &&
parse(
JSON.parse(
item["translations"][1]["attribute_data"]
).document_number
)}
</td>
<td>
{i18n.language === "en" && parse(item.instead)}
{i18n.language === "ru" && parse(item.instead)}
{i18n.language === "tm" &&
parse(
JSON.parse(
item["translations"][1]["attribute_data"]
).instead
)}
</td>
<td>
{/* {parse(item.name_of_documentation)} */}
{i18n.language === "en" &&
parse(item.name_of_documentation)}
{i18n.language === "ru" &&
parse(item.name_of_documentation)}
{i18n.language === "tm" &&
parse(
JSON.parse(
item["translations"][1]["attribute_data"]
).name_of_documentation
)}
</td>
<td>{item.introduction_date}</td>
<td>{item.validity}</td>
<td>{item.note}</td>
</tr>
))}
</tbody>
</table>
</div>
@ -200,8 +182,7 @@ class Regulations extends React.Component {
);
}
}
};
}
// export default Regulations;
export default withTranslation()(Regulations);

194
src/pages/Service.js
View File

@ -1,76 +1,57 @@
// IMPORT MODULES
import React from "react";
import { withTranslation } from 'react-i18next';
import i18n from '../i18n';
import React from "react";
import { withTranslation } from "react-i18next";
import i18n from "../i18n";
// IMPORT COMPONENTS
import Breadcrumb from "../components/Global/Breadcrumb";
import Service_bottom from "./Service_bottom";
// IMPORT IMAGES
// import Print from "../svg/print.svg";
// import Img1 from "../img/serviceRequest_1.jpg";
// import Img2 from "../img/serviceRequest_2.jpg";
// import Img3 from "../img/serviceRequest_3.jpg";
// import Img4 from "../img/serviceRequest_4.jpg";
// const Service = (props) => {
// const {t} = props;
class Service extends React.Component {
constructor(props) {
super(props);
this.state = {
items: [],
DataisLoaded: false,
error: null
};
error: null,
};
}
componentDidMount() {
this._mounted = true
this._mounted = true;
this.makeRemoteRequest();
}
componentWillUnmount() {
this._mounted = false
this._mounted = false;
}
makeRemoteRequest = () => {
const url = `https://etalon.gov.tm:8080/api/v1/insfor_usluh`;
if (this._mounted) {
this.setState({ DataisLoaded: true });
}
setTimeout(() => {
fetch(url, {
method: 'GET',
method: "GET",
})
.then(res => res.json())
.then(res => {
.then((res) => res.json())
.then((res) => {
if (this._mounted) {
this.setState({
items: res.data,
error: res.message || null,
DataisLoaded: true,
})
});
// console.log(res.data[0]['data'][0])
// console.log(this.state.items)
}
})
.catch(error => {
.catch((error) => {
if (this._mounted) {
this.setState({ error, DataisLoaded: false});
this.setState({ error, DataisLoaded: false });
}
});
}, 1500);
@ -79,104 +60,107 @@ class Service extends React.Component {
render() {
const { t } = this.props;
// const [pageIndex, setPageIndex] = useState(1);
var {DataisLoaded, items} = this.state;
if(!DataisLoaded){
return <div>Loading ....</div>
}else{
// const [pageIndex, setPageIndex] = useState(1);
var { DataisLoaded, items } = this.state;
if (!DataisLoaded) {
return <div>Loading ....</div>;
} else {
// console.log(this.state.items);
// useEffect(() => {
// window.scrollTo(0, 0);
// }, []);
// useEffect(() => {
// window.scrollTo(0, 0);
// }, []);
// DEFINE IMAGE SOURCES
// const img_1 = useRef();
// const img_2 = useRef();
// const img_3 = useRef();
// const img_4 = useRef();
// DEFINE IMAGE SOURCES
// const img_1 = useRef();
// const img_2 = useRef();
// const img_3 = useRef();
// const img_4 = useRef();
return (
<section className="service">
<Breadcrumb path_1={t('Информация')} currentUrl="/service" />
<Breadcrumb path_1={t("Информация")} currentUrl="/service" />
<div className="container">
<div className="service-inner">
<div className="tab-header">
<h4 className="tab-header-text" id="tab-header-text">
{t('Сведения об услугах проводимых Государственным эталонным центром')}
{t(
"Сведения об услугах проводимых Государственным эталонным центром"
)}
</h4>
<div className="tab-header-line"></div>
</div>
<div className="service-content">
<div className="structure-employees">
<table className="regulations-table structure-table">
<tbody>
<tr className="table-head">
<th className="n head">{t('№ пп')}</th>
<th className="number head">{t('Вид деятельности')}</th>
<th className="n head">{t("№ пп")}</th>
<th className="number head">{t("Вид деятельности")}</th>
<th className="replacedby head">
{t('Документы необходимые для проведения работ')}
{t("Документы необходимые для проведения работ")}
</th>
<th className="desc head">
{t('Порядок, в соответствии с которым проводиться деятельность')}
{t(
"Порядок, в соответствии с которым проводиться деятельность"
)}
</th>
<th className="date head">{t('Стоимость работ')}</th>
<th className="date head">{t("Стоимость работ")}</th>
</tr>
{items.map(item=>(
<tr key={item.id}>
<td>{item.id}</td>
<td>{ i18n.language === 'en' &&
JSON.parse(item['translations'][0]['attribute_data']).kind_of_activity
}
{ i18n.language === 'ru' &&
item.kind_of_activity
}
{ i18n.language === 'tm' &&
JSON.parse(item['translations'][1]['attribute_data']).kind_of_activity
}</td>
<td>
{ i18n.language === 'en' &&
JSON.parse(item['translations'][0]['attribute_data']).documents_for_employers
}
{ i18n.language === 'ru' &&
item.documents_for_employers
}
{ i18n.language === 'tm' &&
JSON.parse(item['translations'][1]['attribute_data']).documents_for_employers
}
</td>
<td>
{ i18n.language === 'en' &&
JSON.parse(item['translations'][0]['attribute_data']).order
}
{ i18n.language === 'ru' &&
item.order
}
{ i18n.language === 'tm' &&
JSON.parse(item['translations'][1]['attribute_data']).order
}
</td>
<td>
{ i18n.language === 'en' &&
JSON.parse(item['translations'][0]['attribute_data']).cost_of_work
}
{ i18n.language === 'ru' &&
item.cost_of_work
}
{ i18n.language === 'tm' &&
JSON.parse(item['translations'][1]['attribute_data']).cost_of_work
}
</td>
</tr>
{items.map((item) => (
<tr key={item.id}>
<td>{item.id}</td>
<td>
{i18n.language === "en" &&
JSON.parse(
item["translations"][0]["attribute_data"]
).kind_of_activity}
{i18n.language === "ru" && item.kind_of_activity}
{i18n.language === "tm" &&
JSON.parse(
item["translations"][1]["attribute_data"]
).kind_of_activity}
</td>
<td>
{i18n.language === "en" &&
JSON.parse(
item["translations"][0]["attribute_data"]
).documents_for_employers}
{i18n.language === "ru" &&
item.documents_for_employers}
{i18n.language === "tm" &&
JSON.parse(
item["translations"][1]["attribute_data"]
).documents_for_employers}
</td>
<td>
{i18n.language === "en" &&
JSON.parse(
item["translations"][0]["attribute_data"]
).order}
{i18n.language === "ru" && item.order}
{i18n.language === "tm" &&
JSON.parse(
item["translations"][1]["attribute_data"]
).order}
</td>
<td>
{i18n.language === "en" &&
JSON.parse(
item["translations"][0]["attribute_data"]
).cost_of_work}
{i18n.language === "ru" && item.cost_of_work}
{i18n.language === "tm" &&
JSON.parse(
item["translations"][1]["attribute_data"]
).cost_of_work}
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
@ -280,15 +264,13 @@ class Service extends React.Component {
</div>
</div>
</div> */}
</div>
</div>
</section>
);
}
}
};
}
// export default Service;
export default withTranslation()(Service);

145
src/pages/Service_bottom.js
View File

@ -1,8 +1,7 @@
// IMPORT MODULES
import React from "react";
import { withTranslation } from 'react-i18next';
import i18n from '../i18n';
import React from "react";
import { withTranslation } from "react-i18next";
import i18n from "../i18n";
// IMPORT COMPONENTS
// import Breadcrumb from "../components/Global/Breadcrumb";
@ -17,58 +16,50 @@ import Img1 from "../img/serviceRequest_1.jpg";
// const Service = (props) => {
// const {t} = props;
class Service_bottom extends React.Component {
constructor(props) {
super(props);
this.state = {
items: [],
DataisLoaded: false,
error: null
};
error: null,
};
}
componentDidMount() {
this._mounted = true
this._mounted = true;
this.makeRemoteRequest();
}
componentWillUnmount() {
this._mounted = false
this._mounted = false;
}
makeRemoteRequest = () => {
const url = `https://etalon.gov.tm:8080/api/v1/wid_zayawok`;
if (this._mounted) {
this.setState({ DataisLoaded: true });
}
setTimeout(() => {
fetch(url, {
method: 'GET',
method: "GET",
})
.then(res => res.json())
.then(res => {
.then((res) => res.json())
.then((res) => {
if (this._mounted) {
this.setState({
items: res.data,
error: res.message || null,
DataisLoaded: true,
})
});
// console.log(res.data[0]['data'][0])
// console.log(this.state.items)
}
})
.catch(error => {
.catch((error) => {
if (this._mounted) {
this.setState({ error, DataisLoaded: false});
this.setState({ error, DataisLoaded: false });
}
});
}, 1500);
@ -77,71 +68,67 @@ class Service_bottom extends React.Component {
render() {
const { t } = this.props;
var {DataisLoaded, items} = this.state;
if(!DataisLoaded){
return <div>Loading ....</div>
}else{
var { DataisLoaded, items } = this.state;
if (!DataisLoaded) {
return <div>Loading ....</div>;
} else {
// console.log(this.state.items);
return (
<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 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>
<div className="service-cards-wrapper">
{items.map((item) => (
<div
className="service-card"
onClick={() => {
window.open(item.image.path);
}}
key={item.id}
>
<div className="service-abs">
<div>
<img src={Print} alt="Print" />
</div>
</div>
<div className="service-cards-wrapper">
{items.map(item=>(
<div
className="service-card"
onClick={() => {
window.open(item.image.path);
}}
key={item.id}
>
<div className="service-abs">
<div>
<img src={Print} alt="Print" />
</div>
</div>
<div className="service-card-top">
<a href={Img1} type="application/octet-stream" download>
<div className="service-img-wrapper">
<img src={item.image.path} alt="Request1" />
</div>
</a>
</div>
<div className="service-card-bottom">
<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>
))}
<div className="service-card-top">
<a
href={Img1}
type="application/octet-stream"
onClick={(e) => {
e.stopPropagation();
}}
download="doc.png"
>
<div className="service-img-wrapper">
<img src={item.image.path} alt="Request1" />
</div>
</a>
</div>
<div className="service-card-bottom">
<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>
))}
</div>
</div>
);
}
}
};
}
// export default Service;
export default withTranslation()(Service_bottom);

33
src/styles/_main.scss
View File

@ -15,6 +15,9 @@
align-items: center;
justify-content: center;
padding-bottom: 10rem;
a {
width: 100%;
}
}
.swiper {
@ -175,10 +178,11 @@
}
.tab-name {
overflow-y: auto;
font-size: 1.8rem;
font-weight: bold;
margin: 2rem 0;
max-height: 7.5rem;
// max-height: 7.5rem;
overflow: hidden;
text-overflow: ellipsis;
}
@ -363,16 +367,12 @@
}
@media screen and (max-width: 1360px) {
.slider {
padding-bottom: 6rem;
}
.depts-wrapper {
grid-template-columns: repeat(2, 1fr);
}
// .sites-wrapper .site .sites-bottom h4 {
// font-size: 1.8rem;
// }
.dept {
max-width: unset;
@ -382,6 +382,7 @@
.sites-wrapper .site {
max-width: unset;
max-height: unset;
}
.tab-wrapper {
@ -404,9 +405,12 @@
max-height: unset;
width: 100%;
height: 35rem;
display: flex;
align-items: center;
justify-content: center;
img {
// width: 100%;
object-fit: cover;
height: 100%;
}
}
@ -414,6 +418,11 @@
}
}
@media screen and (max-width: 1000px) {
.second-slider .swipe-slide h2 {
font-size: 3rem;
}
}
@media screen and (max-width: 930px) {
.depts-wrapper {
grid-template-columns: 1fr;
@ -520,6 +529,12 @@
}
}
@media screen and (max-width: 670px) {
.second-slider .swipe-slide h2 {
font-size: 2.4rem;
}
}
@media screen and (max-width: 550px) {
.nav-right {
max-width: 35%;
@ -557,6 +572,12 @@
}
}
@media screen and (max-width: 410px) {
.second-slider .swipe-slide h2 {
font-size: 1.6rem;
}
}
@media screen and (max-width: 380px) {
#tab-header-text {
font-size: 2rem;