Skip to content

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

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

[Задача 12794] Добавил компонент TypoList, который отображает список опечаток, компонент еще не полностью готов.
parent 2c5eeac6
Show whitespace changes
Inline Side-by-side
Showing with 124 additions and 67 deletions
cp/application/controllers/admins/Sites.php
View file @ 25b2fa09
...@@ -25,7 +25,7 @@ class Sites extends CI_Controller { ...@@ -25,7 +25,7 @@ class Sites extends CI_Controller {
/*Создаем шаблон*/ /*Создаем шаблон*/
function index() { 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(); $data['base_url'] = $this->config->base_url();
$this->load->view($this->header_name, $data); $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 { ...@@ -27,7 +27,7 @@ class Users extends CI_Controller {
/*Создаем шаблон*/ /*Создаем шаблон*/
function index() { 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(); $data['base_url'] = $this->config->base_url();
$this->load->view($this->header_name, $data); $this->load->view($this->header_name, $data);
......
cp/application/views/menus/menu.php
View file @ 25b2fa09
...@@ -12,7 +12,6 @@ ...@@ -12,7 +12,6 @@
<div class="collapse navbar-collapse " id="navbarNav"> <div class="collapse navbar-collapse " id="navbarNav">
<ul class="navbar-nav mr-auto"> <ul class="navbar-nav mr-auto">
<?foreach ($menuItems as $index => $item): ?> <?foreach ($menuItems as $index => $item): ?>
<?if ($index === 0): ?> <?if ($index === 0): ?>
<li class="nav-item active"> <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> </div>
\ No newline at end of file
cp/javascript/src/components/SiteList.jsx
View file @ 25b2fa09
import React from 'react' import React from 'react'
import {Nav, NavItem, NavLink, TabContent, TabPane} from "reactstrap"; import {Nav, NavItem, NavLink, TabContent, TabPane, Alert} from "reactstrap";
import Site from "./Site"; import TypoList from "./TypoList";
export default class SiteList extends React.Component { export default class SiteList extends React.Component {
sites = this.props.sites; constructor(props) {
super(props);
state = { this.sites = this.props.sites;
activeTab: this.sites[0].id
this.state = {
activeTab: 0,
error: false,
}; };
this.typos = [];
this.loadSiteTypos(this.state.activeTab, () =>
this.forceUpdate()
);
}
toggle = (tab) => { toggle = (tab) => {
console.log("Toggle to ", tab);
if (this.state.activeTab !== 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() { render() {
const tabItems = this.sites.map(site => const tabItems = this.sites.map((site, index) =>
<NavItem key={site.id}> <NavItem key={index}>
<NavLink className={this.state.activeTab === site.id ? "active" : ""} <NavLink className={this.state.activeTab === index ? "active" : ""}
onClick={() => { this.toggle(site.id) }}> onClick={() => { this.toggle(index) }}>
{site.name} {site.name}
</NavLink> </NavLink>
</NavItem> </NavItem>
); );
const tabContents = this.sites.map(site => const tabContents = this.sites.map((site, index) => {
<TabPane tabId={site.id}> // Если была ошибка загрузки, то error = true,
<Site site={site} /> // тогда вместо контента покажем ошибку загрузки
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> </TabPane>
); );
});
return ( return (
<div> <div>
<Nav tabs> <Nav pills fill>
{tabItems} {tabItems}
</Nav> </Nav>
<TabContent activeTab={this.state.activeTab}> <TabContent activeTab={this.state.activeTab}>
......
cp/javascript/src/components/Typo.jsx
View file @ 25b2fa09
import React, {Component} from 'react'; import React, {Component} from 'react';
import {Card, CardBody, CardText} from 'reactstrap'
export default class Typo extends Component { export default class Typo extends Component {
state = {
show: this.props.show
};
render() { render() {
const {article} = this.props; const {typo} = this.props;
const display = this.state.show ? "d-block" : "d-none";
return ( return (
<div> <Card className={display}>
<h1>Опечатка #{article.id}</h1> <CardHeader>
<div className="typo-body"> Опечатка #{typo.id}
<div className="context"> </CardHeader>
{article.context}
</div> <CardBody>
<div className="original-text">{article.original}</div> <CardTitle><del>{typo.original}</del> -> {typo.corrected}</CardTitle>
<div className="corrected-text">{article.corrected}</div> <CardText>{typo.context}</CardText>
<div className="comment">{article.comment}</div>
</div> <a href="#" className="btn btn-primary">Исправить</a>
</div> <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,44 +12,12 @@ body { ...@@ -12,44 +12,12 @@ body {
position: absolute; 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;
}
#menu .items a:visited {
color: #2E728A;
text-decoration: none;
}
#menu .items a:hover {
color: #FF9C00;
}
.body { .body {
margin-left: 320px; width: 80%;
float: left; margin: 0 auto;
} }
.header { .header {
margin-bottom: 15px; margin-bottom: 15px;
} }
...@@ -63,3 +31,7 @@ body { ...@@ -63,3 +31,7 @@ body {
.typo { .typo {
background-color: rgba(200, 200, 10, 0.2); 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