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

Merge branch '27-get-pictures-from-backend-to-activity-and-snacks' into 'master' 

Resolve "GET pictures from Backend to activity and snacks"

Closes #27

See merge request swp-unisport/team-warumkeinrust/user-frontend!33
parents 2f6a4238 5bdc9306
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
user-frontend/src/App.js
+ 13
− 151
View file @ 32a47a69
......@@ -6,13 +6,9 @@ import Question from "./components/QuestionPage.js";
import Activity from "./components/ActivityPage.js";
import Wissenssnack from "./components/WissenssnackPage.js";
import Result from "./components/ResultScreen";
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 {
......@@ -26,25 +22,18 @@ export default class App extends Component {
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(
{
......@@ -60,45 +49,13 @@ export default class App extends Component {
)
}
/* //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",
}
/*if (data) {
request.body = JSON.stringify(data);
}*/
let serverAdress = "http://localhost:8000/api/user/quiz/"
......@@ -125,11 +82,7 @@ export default class App extends Component {
let questionIDlist = []
//gather id for all fetched questions
/*for (let i = 0; i < this.state.dataArray.length; i++) {
if (this.state.dataArray[i].type === "question") {
questionIDlist.push(this.state.dataArray[i].pk)
}
}*/
this.state.dataArray.forEach(d => {
if (d.type ==="question") {
questionIDlist.push(d.pk)
......@@ -139,13 +92,7 @@ export default class App extends Component {
console.log("Question IDs: " + questionIDlist)
//gather data about questions from sessionStorage and pack them
/*for (let qid in questionIDlist) {
let answer = {};
answer.pk = qid;
answer.response = parseInt(sessionStorage.getItem("question"+qid));
answer.relevance = parseInt(sessionStorage.getItem("relevance"+qid));
outputData.push(answer);
}*/
questionIDlist.forEach(qid => {
let response = {};
response.pk = qid;
......@@ -171,9 +118,7 @@ export default class App extends Component {
body: JSON.stringify(data)
}
//prepare answers to questions
/*let data = this.gatherAnswers()
request.body = JSON.stringify(data);*/
let serverAdress = "http://localhost:8000/api/user/quiz/"
......@@ -197,8 +142,6 @@ export default class App extends Component {
}
//---------------------------------------------------------------------------------
//handling next and back buttons by in- and decrementing of this.globalIndex
updateGlobalIndex = (newValue) => {
this.setState({ globalIndex : newValue })
......@@ -207,8 +150,7 @@ export default class App extends Component {
updateSportArten = () => {
this.fetchSport()
//let data = this.fetchSport()
//this.setState({sportArtenArray : data })
}
//getting total number of questions to render in counter-section --no need until counter is fixed--
......@@ -256,7 +198,7 @@ export default class App extends Component {
}
}
else {
for (var i = 0; i < updatedResponses.length; i++) {
for (let i = 0; i < updatedResponses.length; i++) {
updatedResponses[i].checked = false;
}
}
......@@ -290,7 +232,7 @@ getRelevance = (id) => {
}
}
else {
for (var i = 0; i < updatedRelevance.length; i++) {
for (let i = 0; i < updatedRelevance.length; i++) {
if (updatedRelevance[i].value === 3) {
updatedRelevance[i].checked = true;
}
......@@ -317,11 +259,7 @@ getRelevanceValue = (id) => {
renderContent() {
//------------------------------------------------------------------------> show data to send
//catching any error if fetching data went wrong.
/*if(this.state.dataArray === null || this.state.dataArray.length === 0 ){
return <h1>hier ein Fehler!!!</h1>
}*/
//solange wir innerhalb von (question,wissenssnack,activity)-JSON arbeiten:
//if -1 render Welcome
let beginning = this.state.globalIndex < 0;
let end = this.state.globalIndex >= this.state.dataArray.length
......@@ -383,6 +321,7 @@ getRelevanceValue = (id) => {
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}
activityPhoto={this.state.dataArray[this.state.globalIndex].url}
/>
)
}
......@@ -397,6 +336,7 @@ getRelevanceValue = (id) => {
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}
wissenssnackPhoto={this.state.dataArray[this.state.globalIndex].url}
/>
)
}
......@@ -423,81 +363,3 @@ getRelevanceValue = (id) => {
}
}
//---------------------------------------------------------------------first work: with connection to djangoDB
/* class App extends Component {
constructor(props) {
super(props);
this.state = {
sportArts: {
sportart: "sportArt",
field: "outdoor",
einzelsport: false,
mannschaftssport: "false",
ausdauer: "false",
kraft: "false",
kampfsport: "false",
technischakrobatisch: "nein"
},
sportArts_list: []
};
};
async componentDidMount() {
try {
//TODO: change adress to relative
const res = await fetch('http://127.0.0.1:8000/api/sport/');
const sportArts_list = await res.json();
console.log(sportArts_list);
this.setState({
sportArts_list
});
} catch (error) {
console.log(error);
}
}
renderItems = () => {
const newItems = this.state.sportArts_list;
console.log(newItems);
return newItems.map(item => (
<li
key={item.id}
className="list-group-item"
>
<span
className = {`mr-2 `}
title={item.field}
>
<h1>{item.sportart}</h1>
</span>
</li>
));
};
render() {
return (
<main className="content">
<div className="row">
<div className="col-md-6 col-sm-10 mx-auto p-0">
<div className="card p-3">
<ul className="list-group list-group-flush">
{this.renderItems()}
</ul>
</div>
</div>
</div>
</main>
)
}
}
*/
user-frontend/src/components/ActivityPage.js
+ 1
− 2
View file @ 32a47a69
import React from "react";
import unisport_logo from './images/logo_unisport.png';
import activeImage from './images/aktiv1.png';
import "./css/Activity.css";
import en_icon from './images/en_flag.png';
import de_icon from './images/de_flag.png';
......@@ -87,7 +86,7 @@ class Activity extends React.Component{
<div className="col-12 col-sm-6 col-md-6 col-lg-6" id ="act-img-field">
<img className="img-fluid center rounded center-block d-block mx-auto"
src={activeImage} alt='active_img' id ="act-img"/>
src={this.props.activityPhoto} alt='active_img' id ="act-img"/>
</div>
<div className="col-sm-auto col-md-auto col-lg-1"></div>
<div className="col-12 col-sm-5 col-md-5 col-lg-4" id ="textfield">
......
user-frontend/src/components/ResultScreen.js
+ 1
− 7
View file @ 32a47a69
......@@ -67,7 +67,7 @@ class Result extends React.Component {
return (
<ListGroup.Item className="active-item list-group-item-action flex-colum align-items-start" >
<a href={sportArg.link} target="_blank">
<a href={sportArg.link} target="#"> {/* links missed for all result-sports */}
<div><p class="mb-2"><h4>{sportArg.name}</h4></p></div>
<span class="badge rounded-pill badge-result">{crit_one}</span>
......@@ -91,9 +91,3 @@ class Result extends React.Component {
}
export default Result;
/**
<small id ="rankingNr">{sportArg.pk}</small>
*
*
*/
\ No newline at end of file
user-frontend/src/components/WelcomeScreen.js
+ 2
− 5
View file @ 32a47a69
import React from "react";
import "./css/WelcomeScreen.css"
import project_logo from './images/logo_unisport_o_mat_755.png';
import en_icon from './images/en_flag.png';
import de_icon from './images/de_flag.png';
class Welcome extends React.Component{
constructor(props) {
super(props);
}
clickNext = () => {
this.props.change_pos(this.props.cur_pos + 1)
......
user-frontend/src/components/WissenssnackPage.js
+ 2
− 6
View file @ 32a47a69
import React from "react";
import "./css/Wissenssnack.css"
import unisport_logo from './images/logo_unisport.png';
import wissImage from './images/stair-up.png'
//import wissImage from './images/aktiv1.png';
import en_icon from './images/en_flag.png';
import de_icon from './images/de_flag.png';
class Wissenssnack extends React.Component{
constructor(props){
super(props)
}
clickNext = () => {
this.props.change_pos(this.props.cur_pos + 1)
......@@ -65,7 +61,7 @@ class Wissenssnack extends React.Component{
<div className="col-sm-auto col-md-auto"></div>
<div className="col-12 col-sm-6 col-md-6">
<img className="image-test img-fluid center rounded center-block d-block mx-auto"
id ="wiss-img" src={wissImage} alt='wiss-img'/>
id ="wiss-img" src={this.props.wissenssnackPhoto} alt='wiss-img'/>
</div>
</div>
</div>
......
user-frontend/src/components/css/Wissenssnack.css
+ 1
− 1
View file @ 32a47a69
......@@ -6,7 +6,7 @@
#wiss-img{
float:initial;
width: 25rem;
height: auto;
height: 25rem;
object-fit:scale-down;
}
/*
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment