Skip to content

R
retypos-server
Commit 25b2fa09 authored by Георгий Попов's avatar Георгий Попов
Browse files
Options

[Задача 12794] Добавил компонент TypoList, который отображает список опечаток,…

[Задача 12794] Добавил компонент TypoList, который отображает список опечаток, компонент еще не полностью готов.
parent 2c5eeac6
Hide whitespace changes
Inline Side-by-side
Showing with 127 additions and 70 deletions
cp/application/controllers/admins/Sites.php
View file @ 25b2fa09
......@@ -25,7 +25,7 @@ class Sites extends CI_Controller {
/*Создаем шаблон*/
function index() {
$data['items'] = menu_admin($this->config->base_url());
$data['menuItems'] = menu_admin($this->config->base_url());
$data['base_url'] = $this->config->base_url();
$this->load->view($this->header_name, $data);
......
cp/application/controllers/admins/Users.php
View file @ 25b2fa09
......@@ -27,7 +27,7 @@ class Users extends CI_Controller {
/*Создаем шаблон*/
function index() {
$data['items'] = menu_admin($this->config->base_url());
$data['menuItems'] = menu_admin($this->config->base_url());
$data['base_url'] = $this->config->base_url();
$this->load->view($this->header_name, $data);
......
cp/application/views/menus/menu.php
View file @ 25b2fa09
......@@ -12,7 +12,6 @@
<div class="collapse navbar-collapse " id="navbarNav">
<ul class="navbar-nav mr-auto">
<?foreach ($menuItems as $index => $item): ?>
<?if ($index === 0): ?>
<li class="nav-item active">
......
cp/application/views/users/typos.php
View file @ 25b2fa09
<div id="root" class="body">
<div id="root" class="body border border-light">
</div>
\ No newline at end of file
cp/javascript/src/components/SiteList.jsx
View file @ 25b2fa09
import React from 'react'
import {Nav, NavItem, NavLink, TabContent, TabPane} from "reactstrap";
import Site from "./Site";
import {Nav, NavItem, NavLink, TabContent, TabPane, Alert} from "reactstrap";
import TypoList from "./TypoList";
export default class SiteList extends React.Component {
sites = this.props.sites;
constructor(props) {
super(props);
state = {
activeTab: this.sites[0].id
};
this.sites = this.props.sites;
this.state = {
activeTab: 0,
error: false,
};
this.typos = [];
this.loadSiteTypos(this.state.activeTab, () =>
this.forceUpdate()
);
}
toggle = (tab) => {
console.log("Toggle to ", tab);
if (this.state.activeTab !== tab) {
this.setState({
activeTab: tab
/* Обновляем стейт только после загрузки опечаток */
this.loadSiteTypos(tab, () => {
this.state.activeTab = tab;
this.forceUpdate();
})
}
};
loadSiteTypos(siteId, done) {
$.ajax({
url: window.baseUrl + "/users/typos/getSiteTypos?siteId=" + this.sites[siteId],
}).done((typos) => {
this.typos = typos;
if (done) {
done();
}
}).fail((error) => {
console.log(error);
this.state.error = true;
if (done) {
done();
}
});
}
render() {
const tabItems = this.sites.map(site =>
<NavItem key={site.id}>
<NavLink className={this.state.activeTab === site.id ? "active" : ""}
onClick={() => { this.toggle(site.id) }}>
const tabItems = this.sites.map((site, index) =>
<NavItem key={index}>
<NavLink className={this.state.activeTab === index ? "active" : ""}
onClick={() => { this.toggle(index) }}>
{site.name}
</NavLink>
</NavItem>
);
const tabContents = this.sites.map(site =>
<TabPane tabId={site.id}>
<Site site={site} />
</TabPane>
);
const tabContents = this.sites.map((site, index) => {
// Если была ошибка загрузки, то error = true,
// тогда вместо контента покажем ошибку загрузки
if (index === this.state.activeTab && this.state.error) {
return (
<Alert key={index} color="danger">
<h4 className="alert-heading">
Произошла ошибка загрузки, попробуйте позже
</h4>
<p>
При загрузке опечаток для сайта <strong>{site.name}</strong> произошла
ошибка. Попробуйте позже или напишите в службу поддержки
support@etersoft.ru.
</p>
</Alert>
);
}
return(
<TabPane key={index} tabId={index}>
<TypoList typos={this.typos}/>
</TabPane>
);
});
return (
<div>
<Nav tabs>
<Nav pills fill>
{tabItems}
</Nav>
<TabContent activeTab={this.state.activeTab}>
......
cp/javascript/src/components/Typo.jsx
View file @ 25b2fa09
import React, {Component} from 'react';
import {Card, CardBody, CardText} from 'reactstrap'
export default class Typo extends Component {
state = {
show: this.props.show
};
render() {
const {article} = this.props;
const {typo} = this.props;
const display = this.state.show ? "d-block" : "d-none";
return (
<div>
<h1>Опечатка #{article.id}</h1>
<div className="typo-body">
<div className="context">
{article.context}
</div>
<div className="original-text">{article.original}</div>
<div className="corrected-text">{article.corrected}</div>
<div className="comment">{article.comment}</div>
</div>
</div>
<Card className={display}>
<CardHeader>
Опечатка #{typo.id}
</CardHeader>
<CardBody>
<CardTitle><del>{typo.original}</del> -> {typo.corrected}</CardTitle>
<CardText>{typo.context}</CardText>
<a href="#" className="btn btn-primary">Исправить</a>
<a href="#" className="btn btn-danger">Отклонить</a>
<CardFooter>{typo.comment}</CardFooter>
</CardBody>
</Card>
);
}
......
cp/javascript/src/components/TypoList.jsx 0 → 100644
View file @ 25b2fa09
import React, {Component} from 'react';
import Typo from "./Typo";
export default class TypoList extends Component {
typos = this.props.typos;
state = {
currentTypo: 0
};
render() {
const typoCards = this.typos.map((typo, index) =>
<Typo typo={this.typos[this.state.currentTypo]}
show={this.state.currentTypo === index}/>
);
return <div>
{typoCards}
</div>
}
}
\ No newline at end of file
cp/stylesheet/stylesheet.css
View file @ 25b2fa09
......@@ -12,43 +12,11 @@ body {
position: absolute;
}
#menu {
border-radius: 0.5em;
background-color: #F3F3F3;
width: 300px;
text-align: center;
border: 1px solid #D0D0D0;
box-shadow: 4px 4px 3px #888888;
}
#menu .items {
text-align: center;
font-size: 120%;
line-height: 150%;
color: #2E728A;
}
#menu .items ul {
padding: 0;
}
#menu .items a {
text-decoration: none;
.body {
width: 80%;
margin: 0 auto;
}
#menu .items a:visited {
color: #2E728A;
text-decoration: none;
}
#menu .items a:hover {
color: #FF9C00;
}
.body {
margin-left: 320px;
float: left;
}
.header {
margin-bottom: 15px;
......@@ -62,4 +30,8 @@ body {
.typo {
background-color: rgba(200, 200, 10, 0.2);
}
.tab-content {
margin-top: 10px;
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment