riddhidave18/Gazebo_simulation-Frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Compare commits

base: riddhidave18:c586e2ed33e32759d09bee2828510f20b52cebcd
Branches Tags
riddhidave18:master
riddhidave18:feature-login
riddhidave18:vagrant-ansible
...
compare: riddhidave18:c1934e000c0010d2ff48a778205ef5ec7e8f58d5
Branches Tags
riddhidave18:feature-login
riddhidave18:vagrant-ansible
riddhidave18:master

2 Commits
c586e2ed33 ... c1934e000c

Author SHA1 Message Date
Riddhi Dave
c1934e000c session fetch updates 2021-03-10 14:46:47 -05:00
Riddhi Dave
5a826406da session fetch updates 2021-03-10 12:30:08 -05:00
3 changed files with 102 additions and 59 deletions
Show Stats Expand all files Collapse all files

1
nginx-conf/nginx.conf
View File

@ -6,6 +6,7 @@ server {
set $cors 'true';

5
public/config.js
View File

@ -1,4 +1,7 @@
var configs = {
"authUrl": "https://localhost:8433",
//"authUrl": "http://localhost:8000",
"authUrl": "https://{{base_url}}{{port_str}}",
//"authUrl": "https://localhost:8433",
"front_endUrl": "https://sim.{{base_url}}{{port_str}}/"
//"front_endUrl": "http://localhost:3006"
};

155
src/components/App.js
View File

@ -15,13 +15,16 @@ import { thisExpression } from '@babel/types';
class App extends Component{
state = {
data: [],
isLoading: false,
isAuthenticated: false,
user: undefined,
isLoggedin: false,
isUser: "",
launch: false,
isNavbar: false,
url: "",
backend_url: ""
backend_url: "",
data: {}
};
constructor(props){
@ -39,6 +42,7 @@ class App extends Component{
this.login = this.login.bind(this);
this.logout = this.logout.bind(this);
this.routeMain =this.routeMain.bind(this);
this.fetchusers =this.fetchusers.bind(this);
this.submit = this.submit.bind(this);
//this.getSimulator = this.settingsSimulator.bind(this);
@ -48,20 +52,53 @@ class App extends Component{
this.wait = this.wait.bind(this);
}
async componentDidMount() {
console.log(this.state.backend_url)
const response = await fetch(`${this.authip}/api/user_`,{credentials: 'include'});
console.log(response.ok);
const body = await response.text();
async componentDidMount () {
const body = this.fetchusers();
//const response = await axios.get('https://localhost:8433/api/curuser/');
//this.setState({isUser: response.data.fetchuser},()=>console.log('hey riddhi',this.state.isUser));
this.timer = setInterval(() => this.fetchusers(), 5000);
if (body === '') {
this.setState(({isAuthenticated: false}))
this.login()
} else {
this.setState({isAuthenticated: true, user: JSON.parse(body)})
this.setState({isAuthenticated: true})
}
console.log(this.state.isAuthenticated);
}
async fetchusers () {
try {
await fetch("http://localhost:8000/api/curuser/", {credentials: 'include'})
.then(response => {
if (response.status > 400) {
return this.setState(() => {
return { placeholder: "Something went wrong!" };
});
}
return response.json();
})
.then(data => {
this.setState(() => {
return {
data,
isAuthenticated : data.isLoggedin,
isUser : data.fetchuser
};
});
})
//.then(console.log(this.state.isUser))
.then(console.log(this.state.isAuthenticated));
}
catch (e) {
console.log('Error is:',e.response);
this.login()
}
}
routeMain(){
let path = '/';
this.props.history.push(path);
@ -70,7 +107,6 @@ class App extends Component{
login() {
console.log(window.location)
window.location.href = `${this.authip}/login`;
}
wait(ms){
var start = new Date().getTime();
@ -87,36 +123,36 @@ class App extends Component{
async logout() {
fetch(`${this.authip}/logout`,
//{
//method : 'GET',
//mode: 'no-cors',
// credentials: 'include',
//headers: {
//'Content-Type': 'application/json'
//},
//}
{
// method : 'GET',
mode: 'no-cors',
credentials: 'include',
headers: {
'Content-Type': 'application/json'
},
}
)
/*.then((response) => response)
.then((json) => {
console.log('Gotcha');
console.log(json.status === 204);
console.log(json.status);
console.log(this.state.isAuthenticated);
if (json.status === 204) {
this.state.isAuthenticated = false;
this.routeMain();
}
if (json.status === 200) {
this.state.isAuthenticated = false;
this.routeMain();
}
console.log(this.state.isAuthenticated);
})*/
.then(reponse => {
window.location.href = this.authip;
})
.then(reponse => {
this.wait(3000);
// .then((response) => response)
// .then((json) => {
// console.log('Gotcha');
// console.log(json.status === 204);
// console.log(json.status);
// console.log(this.state.isAuthenticated);
// if (json.status === 204) {
// this.state.isAuthenticated = false;
// this.routeMain();
// }
// if (json.status === 200) {
// this.state.isAuthenticated = false;
// this.routeMain();
// }
// console.log(this.state.isAuthenticated);
// })
// .then(reponse => {
// window.location.href = this.authip;
// })
.then(response => {
//this.wait(3000);
window.location.href = this.frontendip;
});
}
@ -137,7 +173,10 @@ class App extends Component{
]
});
};
componentWillUnmount() {
clearInterval(this.timer);
this.timer = null;
}
attach() {
this.timer = setInterval(()=> this.heartbeat(), 10000);
@ -159,33 +198,33 @@ class App extends Component{
handleUrl = (urlValue) => {
this.setState({url: urlValue});
}
/*settingsSimulator(launch) {
settingsSimulator(launch) {
if (launch){
const httpClient = axios.create();
httpClient.defaults.timeout = 600000;
// const httpClient = axios.create();
// httpClient.defaults.timeout = 600000;
// TODO : detach the heartbeat
httpClient.get(`http://${this.backendip}/simulator/stop/${this.state.user.sub}`, { withCredentials: true })
.then(res => {
this.setState({launch: false});
})
// httpClient.get(`http://${this.backendip}/simulator/stop/${this.state.user.sub}`, { withCredentials: true })
// .then(res => {
// this.setState({launch: false});
// })
}
else {
this.setState({isLoading : true, launch: true});
this.attach(this.state.launch);
//this.attach(this.state.launch);
const httpClient = axios.create();
httpClient.defaults.timeout = 600000;
// const httpClient = axios.create();
// httpClient.defaults.timeout = 600000;
httpClient.get(`http://${this.backendip}/simulator/start/${this.state.user.sub}/${this.state.user.given_name}/spiri-friend2019@`, { withCredentials: true })
.then(res => {
this.setState({simulator: res.data, isLoading: false, url: this.state.simulator.publicIp });
this.launchSimulator(this.state.simulator.publicIp);
})
// httpClient.get(`http://${this.backendip}/simulator/start/${this.state.user.sub}/${this.state.user.given_name}/spiri-friend2019@`, { withCredentials: true })
// .then(res => {
// this.setState({simulator: res.data, isLoading: false, url: this.state.simulator.publicIp });
// this.launchSimulator(this.state.simulator.publicIp);
// })
}
}*/
}
@ -221,8 +260,8 @@ class App extends Component{
const launch_ = this.state.launch ?
<div>
<div id="sim">
<iframe name="top_" src={'https://'+ '3.238.9.151' +':4200'} width="100%" height="375px" frameBorder="0"></iframe>
<iframe name="bottom_" src={'https://'+ '3.238.9.151' +':8888'} width="100%" height="375px" frameBorder="0"></iframe>
<iframe name="top_" src={'https://'+ '3.238.149.224' +':4200'} width="100%" height="375px" frameBorder="0"></iframe>
<iframe name="bottom_" src={'https://'+ 'http://3.238.149.224' +':8888'} width="100%" height="375px" frameBorder="0"></iframe>
</div>
</div>:
<div class="SpiriImage">