Skip to content
Snippets Groups Projects
Commit 2f6a4238 authored by alrwasheda's avatar alrwasheda :speech_balloon:
Browse files

Merge branch '28-fix-app-js-according-to-new-changes' into 'master' 

Resolve "fix app.js according to new changes"

Closes #28

See merge request swp-unisport/team-warumkeinrust/user-frontend!32
parents 889d2699 8d9da783
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
user-frontend/src/App.css
+ 26
− 8
View file @ 2f6a4238
......@@ -68,22 +68,40 @@ img {
/*----- Language change button -----*/
#lang_switch_en{
padding:0;
width: 30px;
height: 18px;
/* .lang_switch_en{
width: 50px;
height: 35px;
display: block;
cursor: pointer;
margin-left: 2rem;
margin-top: 2rem;
}
#lang_switch_de{
padding:0;
width: 30px;
height: 20px;
.lang_switch_de{
margin-top: 2rem;
width: 50px;
height: 35px;
display: block;
cursor: pointer;
} */
.lang_switch_en{
margin-top: 1rem;
max-width: 60%;
max-height:60%;
margin-left: 1rem;
}
.lang_switch_de{
margin-top: 1rem;
max-width: 60%;
max-height:60%;
margin-left: -1.2rem;
}
/*----- Back & Next button -----*/
#backButton{
padding: 0.4rem 1.8rem;
......
user-frontend/src/App.js
+ 73
− 9
View file @ 2f6a4238
......@@ -10,7 +10,9 @@ import dataExample from "./components/jsonExamples/DataExample.json"
import sportArtenExample from "./components/jsonExamples/SportArtenExample.json"
import questionsResponses from "./components/jsonExamples/QuestionsResponses.json"
import relevanceResponses from "./components/jsonExamples/RelevanceResponses.json"
import en_icon from './components/images/en_flag.png';
import de_icon from './components/images/de_flag.png';
import { Container, Row, Col} from 'react-bootstrap';
export default class App extends Component {
......@@ -21,23 +23,77 @@ export default class App extends Component {
dataArray : [],
sportArtenArray : [],
globalIndex: -1,
lang : "de"
};
//data of sportArtenArray
this.updateGlobalIndex = this.updateGlobalIndex.bind(this);
this.updateSportArten = this.updateSportArten.bind(this);
this.toEnglish = this.toEnglish.bind(this);
this.toGerman = this.toGerman.bind(this);
/* nicht mehr nötig : example data used for testing (see jsonExamples folder)
this.dataArray = dataExample.map((element) => element) //saving data from imported data_example to dataArray
*/
//this.sportArtenArray = sportArtenExample.map((element) => element);
}
//language is not being changed, cause the data is being fetch only once using componentDidMount(). changing the state is not forcing the app component to re-render..!!
//the idea: to send a new request according to chosen language at the beginning....
//de -> en.
toEnglish =() => {
this.setState(
{
lang : "en"
}
)
}
toGerman =() =>{
this.setState(
{
lang : "de"
}
)
}
/* //render language buttons
renderLanguageButtons(){
return(
<Container className ="header">
<Row className ="lang">
<Col xs md lg ="1" id = "lang_flag">
<img
style={this.state.lang === "en" ? {borderBottom:"#99cc01 solid 3px"} : {}}
className ="lang_switch"
src ={en_icon}
alt ="en_icon"
onClick={this.toEnglish}
/>
</Col>
<Col xs md lg ="1">
<img
style={this.state.lang === "de" ? {borderBottom:"#99cc01 solid 3px"} : {}}
className ="lang_switch"
src ={de_icon}
alt ="de_icon"
onClick={this.toGerman}
/>
</Col>
{console.log("this.state.lang: ",this.state.lang)}
</Row>
</Container>
)
} */
//---------------------------------------------------------------------------------fetching data
componentDidMount(){
const request = {
method: "GET",
headers: {'Accept-Language': 'de'}
}
/*if (data) {
......@@ -62,7 +118,6 @@ export default class App extends Component {
});
}
);
}
//---------------------------------------------------------------------------------
gatherAnswers() {
......@@ -110,7 +165,6 @@ export default class App extends Component {
const request = {
method: "POST",
headers: {
'Accept-Language': 'de',
'Accept': 'application/json',
'Content-Type': 'application/json',
},
......@@ -310,7 +364,10 @@ getRelevanceValue = (id) => {
cur_pos={this.state.globalIndex}
counter={currentQuestionIndex}
arrayLength={totalLengthOfQuestionsArray}
questionText={this.state.dataArray[this.state.globalIndex].text}
lang={this.state.lang}
toGerman={this.toGerman}
toEnglish={this.toEnglish}
questionText={this.state.lang === "de" ? this.state.dataArray[this.state.globalIndex].text_de : this.state.dataArray[this.state.globalIndex].text_en}
updateSportArten={this.updateSportArten}
/>
)
......@@ -322,7 +379,10 @@ getRelevanceValue = (id) => {
key={this.state.dataArray[this.state.globalIndex].pk}
cur_pos={this.state.globalIndex}
change_pos={this.updateGlobalIndex}
activityText={this.state.dataArray[this.state.globalIndex].text}
lang={this.state.lang}
toGerman={this.toGerman}
toEnglish={this.toEnglish}
activityText={this.state.lang === "de" ? this.state.dataArray[this.state.globalIndex].text_de : this.state.dataArray[this.state.globalIndex].text_en}
/>
)
}
......@@ -333,7 +393,10 @@ getRelevanceValue = (id) => {
key={this.state.dataArray[this.state.globalIndex].pk}
cur_pos={this.state.globalIndex}
change_pos={this.updateGlobalIndex}
wissenssnackText={this.state.dataArray[this.state.globalIndex].text}
lang={this.state.lang}
toGerman={this.toGerman}
toEnglish={this.toEnglish}
wissenssnackText={this.state.lang === "de" ? this.state.dataArray[this.state.globalIndex].text_de : this.state.dataArray[this.state.globalIndex].text_en}
/>
)
}
......@@ -352,6 +415,7 @@ getRelevanceValue = (id) => {
return (
<div className="App">
{/* {this.renderLanguageButtons()} */}
{this.renderContent()}
</div>
......
user-frontend/src/components/ActivityPage.js
+ 7
− 7
View file @ 2f6a4238
......@@ -56,25 +56,25 @@ class Activity extends React.Component{
<div className = "app-body">
<div className ="header fluid">
<div className ="row">
<div className = "col-1 col-sm-1 col-md-1 col-lg-1">
<div className = "col-2 col-sm-1 col-md-1 col-lg-1">
<img
style={this.props.lang === "en" ? {paddingBottom:"10px",borderBottom:"#99cc01 solid 5px"} : {}}
className ="lang_switch"
style={this.props.lang === "en" ? {paddingBottom:"3px",borderBottom:"#99cc01 solid 5px"} : {}}
className ="lang_switch_en"
src ={en_icon}
alt ="en_icon"
onClick={this.props.toEnglish}
/>
</div>
<div className = "col-1 col-sm-1 col-md-1 col-lg-1">
<div className = "col-2 col-sm-1 col-md-1 col-lg-1">
<img
style={this.props.lang === "de" ? {paddingBottom:"10px",borderBottom:"#99cc01 solid 5px"} : {}}
className ="lang_switch"
style={this.props.lang === "de" ? {paddingBottom:"3px",borderBottom:"#99cc01 solid 5px"} : {}}
className ="lang_switch_de"
src ={de_icon}
alt ="de_icon"
onClick={this.props.toGerman}
/>
</div>
<div className ="col-6 col-sm-8 col-md-8 col-lg-8"></div>
<div className ="col-4 col-sm-8 col-md-8 col-lg-8"></div>
<div className ="col-4 col-sm-2 col-md-2 col-lg-2">
<img className="unisportLogo"
src={unisport_logo} alt="unisport-logo"/>
......
user-frontend/src/components/QuestionPage.js
+ 7
− 7
View file @ 2f6a4238
......@@ -137,25 +137,25 @@ class Question extends React.Component{
<div className ="header fluid">
<div className ="row">
<div className = "col-1 col-sm-1 col-md-1 col-lg-1">
<div className = "col-2 col-sm-1 col-md-1 col-lg-1">
<img
style={this.props.lang === "en" ? {paddingBottom:"10px",borderBottom:"#99cc01 solid 5px"} : {}}
className ="lang_switch"
style={this.props.lang === "en" ? {paddingBottom: "3px",borderBottom:"#99cc01 solid 5px"} : {}}
className ="lang_switch_en"
src ={en_icon}
alt ="en_icon"
onClick={this.props.toEnglish}
/>
</div>
<div className = "col-1 col-sm-1 col-md-1 col-lg-1">
<div className = "col-2 col-sm-1 col-md-1 col-lg-1">
<img
style={this.props.lang === "de" ? {paddingBottom:"10px",borderBottom:"#99cc01 solid 5px"} : {}}
className ="lang_switch"
style={this.props.lang === "de" ? {paddingBottom: "3px",borderBottom:"#99cc01 solid 5px"} : {}}
className ="lang_switch_de"
src ={de_icon}
alt ="de_icon"
onClick={this.props.toGerman}
/>
</div>
<div className ="col-6 col-sm-8 col-md-8 col-lg-8"></div>
<div className ="col-4 col-sm-8 col-md-8 col-lg-8"></div>
<div className ="col-4 col-sm-2 col-md-2 col-lg-2">
<img className="unisportLogo"
src={unisport_logo} alt="unisport-logo"/>
......
user-frontend/src/components/WissenssnackPage.js
+ 7
− 7
View file @ 2f6a4238
......@@ -25,25 +25,25 @@ class Wissenssnack extends React.Component{
<div className = "app-body">
<div className ="header fluid">
<div className ="row">
<div className = "col-1 col-sm-1 col-md-1 col-lg-1">
<div className = "col-2 col-sm-1 col-md-1 col-lg-1">
<img
style={this.props.lang === "en" ? {paddingBottom:"10px",borderBottom:"#99cc01 solid 5px"} : {}}
className ="lang_switch"
style={this.props.lang === "en" ? {paddingBottom:"3px",borderBottom:"#99cc01 solid 5px"} : {}}
className ="lang_switch_en"
src ={en_icon}
alt ="en_icon"
onClick={this.props.toEnglish}
/>
</div>
<div className = "col-1 col-sm-1 col-md-1 col-lg-1">
<div className = "col-2 col-sm-1 col-md-1 col-lg-1">
<img
style={this.props.lang === "de" ? {paddingBottom:"10px",borderBottom:"#99cc01 solid 5px"} : {}}
className ="lang_switch"
style={this.props.lang === "de" ? {paddingBottom:"3px",borderBottom:"#99cc01 solid 5px"} : {}}
className ="lang_switch_de"
src ={de_icon}
alt ="de_icon"
onClick={this.props.toGerman}
/>
</div>
<div className ="col-6 col-sm-8 col-md-8 col-lg-8"></div>
<div className ="col-4 col-sm-8 col-md-8 col-lg-8"></div>
<div className ="col-4 col-sm-2 col-md-2 col-lg-2">
<img className="unisportLogo"
src={unisport_logo} alt="unisport-logo"/>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment