/app-front-reactjs/src/components/Home.js
JavaScript | 194 lines | 172 code | 22 blank | 0 comment | 11 complexity | 6bf1d8897a1b5d36d62aa94fd22491fa MD5 | raw file
Possible License(s): BSD-3-Clause, BSD-2-Clause, MPL-2.0-no-copyleft-exception, GPL-2.0, LGPL-2.1, JSON, 0BSD, MIT, Apache-2.0, CC-BY-SA-3.0, CC-BY-4.0, Unlicense, GPL-3.0
- import React, {Component} from 'react';
- import {Link} from 'react-router-dom';
- import Header from '../admin/Header';
- import Sidebar from '../admin/SideBar';
- import Footer from './Footer';
- import axios from 'axios';
- class Home extends Component {
- constructor(props) {
- super(props);
- this.state = {
- dialectOrigin: '',
- phraseOrigin: '',
- dialectTarget: '',
- phraseTarget: '',
- allWords: '',
- phraseAnalytics: '',
- wordDifinition: [],
- };
- this.handleChange = this.handleChange.bind(this);
- this.handleSubmit = this.handleSubmit.bind(this);
- this.handleDifinition = this.handleDifinition.bind(this);
- }
- handleChange(event) {
- const target = event.target;
- const value = target.value;
- const name = target.name;
- this.setState({
- [name]: value
- });
- }
- handleSubmit(event) {
- const data = {
- "params": {
- dialectOrigin: this.state.dialectOrigin,
- phraseOrigin: this.state.phraseOrigin,
- dialectTarget: this.state.dialectTarget,
- }
- };
- axios.post(`/data/submit`,
- data).then(res => {
- const allWords = res.data;
- let i = 0;
- let words = "";
- let phraseTarget = "";
- while (i < Object.keys(allWords).length) {
- words = res.data[i][0]['word'];
- phraseTarget = phraseTarget.concat(words);
- if (Object.keys(allWords).length > 1)
- phraseTarget = phraseTarget.concat(" ");
- i++;
- }
- this.setState({allWords, phraseTarget});
- });
- }
- handleDifinition(evemt) {
- var obj = {};
- $('#info .property').each(function () {
- var value = $(this).children('.value').html();
- obj[$(this).attr('id')] = isNaN(value) || value == '' ? value : parseInt(value);
- });
- const data = {
- "params": {
- word: obj['text'],
- }
- };
- axios.post(`/translate`,
- data).then(res => {
- if (Object.keys(res.data).length > 0) {
- const wordDifinition = res.data[0]['definition'];
- this.setState({ wordDifinition });
- }
- });
- }
- render() {
- if (this.state.dialectTarget == 'Standard arabic dialect') {
- var StyleTarget = {
- textAlign: 'right',
- };
- var labelTarget = "أدخل عبارة لترجمة"
- ;
- } else {
- var labelTarget = "Enter a phrase to translate"
- }
- if (this.state.dialectOrigin == 'Standard arabic dialect') {
- var StyleOrigin = {
- textAlign: 'right',
- };
- var labelOrigin = "ترجمة إلى اللغة العربية"
- ;
- } else {
- var labelOrigin = "The translated phrase";
- }
- return (
- <div>
- <Header/>
- <Sidebar/>
- <div className="container">
- <div className="sectionform">
- <div className="col-md-5">
- <div className="form-group row">
- <div className="col-md-5">
- <select className="form-control" id="dialectOrigin" key="dialectOrigin" name="dialectOrigin"
- onChange={this.handleChange} required>
- <option>Choose a dialect</option>
- <option>Gulf dialect</option>
- <option>Standard arabic dialect</option>
- <option>Algerian dialect</option>
- </select>
- </div>
- </div>
- <div className="form-group row">
- <div className="col-md-10">
- <div id="fields">
- <textarea id="textarea" key="textarea" name="phraseOrigin" onChange={this.handleChange} style={StyleOrigin}
- className="form-control pull-right" rows="5"
- placeholder={labelOrigin}></textarea>
- </div>
- </div>
- </div>
- <button onClick={this.handleSubmit} className="btn btn-primary">Translate</button>
- </div>
- <div className="col-md-2 fix-top">
- <i className="glyphicon glyphicon-arrow-right arrow-left-size"></i><br></br>
- <i className="glyphicon glyphicon-arrow-left arrow-left-size"></i>
- </div>
- <div className="col-md-5">
- <div className="form-group row">
- <div className="col-md-5">
- <select className="form-control" id="dialectTarget" name="dialectTarget"
- onChange={this.handleChange} required>
- <option>Choose a dialect</option>
- <option>Gulf dialect</option>
- <option>Standard arabic dialect</option>
- <option>Algerian dialect</option>
- </select>
- </div>
- </div>
- <div className="form-group row">
- <div className="col-md-10">
- <textarea id="textarea" name="phraseTarget" value={this.state.phraseTarget} style={StyleTarget}
- className="form-control pull-right" rows="5"
- placeholder={labelTarget}></textarea>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div className="container fix-top">
- <div>
- <div className="col-md-6">
- <div className="panel panel-primary">
- <div className="panel-heading">
- <h3 id="info" className="panel-title">
- <a><i onClick={this.handleDifinition} id="console-log" className="glyphicon glyphicon-globe"></i></a>
- Definition :
- <span id="text" className="property line"> <span
- className="value"></span></span>
- </h3>
- <span className="pull-right clickable"><i
- className="glyphicon glyphicon-chevron-up"></i></span>
- </div>
- <div className="panel-body">{this.state.wordDifinition}</div>
- </div>
- </div>
- </div>
- </div>
- <Footer/>
- </div>
- );
- }
- }
- export default Home;