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

session fetch updates

Browse Source
This commit is contained in:
Riddhi Dave 2021-03-10 12:30:08 -05:00
parent d6150dc24b
commit 5a826406da
3 changed files with 99 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
nginx-conf/nginx.conf
View File

@ -7,7 +7,7 @@ server {
set $cors ''; set $cors '';
if ($http_origin ~ '^http?://(localhost:3000|localhost:8080|174.138.41.124:8080|157.245.211.190)') { if ($http_origin ~ '^http?://(localhost:3006|localhost:8000|174.138.41.124:8080|157.245.211.190)') {
set $cors 'true'; set $cors 'true';
} }

3
public/config.js
View File

@ -1,5 +1,6 @@
var configs = { var configs = {
//"authUrl": "http://localhost:8000",
"authUrl": "https://{{base_url}}{{port_str}}", "authUrl": "https://{{base_url}}{{port_str}}",
"back_endUrl": "https://spirisimbackend.{{base_url}}{{port_str}}",
"front_endUrl": "https://sim.{{base_url}}{{port_str}}/" "front_endUrl": "https://sim.{{base_url}}{{port_str}}/"
//"front_endUrl": "http://localhost:3006"
}; };

154
src/components/App.js
View File

@ -15,13 +15,16 @@ import { thisExpression } from '@babel/types';
class App extends Component{ class App extends Component{
state = { state = {
data: [],
isLoading: false, isLoading: false,
isAuthenticated: false, isAuthenticated: false,
user: undefined, isLoggedin: false,
isUser: "",
launch: false, launch: false,
isNavbar: false, isNavbar: false,
url: "", url: "",
backend_url: "" backend_url: "",
data: {}
}; };
constructor(props){ constructor(props){
@ -30,7 +33,7 @@ class App extends Component{
console.log(cookies); console.log(cookies);
this.state.csrfToken = cookies.get('XSRF-TOKEN'); this.state.csrfToken = cookies.get('XSRF-TOKEN');
console.log(this.state.csrfToken); console.log(this.state.csrfToken);
this.backendip = window.configs.back_endUrl; //this.backendip = window.configs.back_endUrl;
this.frontendip = window.configs.front_endUrl; this.frontendip = window.configs.front_endUrl;
this.authip = window.configs.authUrl; this.authip = window.configs.authUrl;
this.simulatorWindow = null; this.simulatorWindow = null;
@ -39,8 +42,9 @@ class App extends Component{
this.login = this.login.bind(this); this.login = this.login.bind(this);
this.logout = this.logout.bind(this); this.logout = this.logout.bind(this);
this.routeMain =this.routeMain.bind(this); this.routeMain =this.routeMain.bind(this);
this.fetchusers =this.fetchusers.bind(this);
this.submit = this.submit.bind(this); this.submit = this.submit.bind(this);
this.getSimulator = this.settingsSimulator.bind(this); //this.getSimulator = this.settingsSimulator.bind(this);
this.handleUrl = this.handleUrl.bind(this); this.handleUrl = this.handleUrl.bind(this);
this.attach = this.attach.bind(this); this.attach = this.attach.bind(this);
@ -48,20 +52,51 @@ class App extends Component{
this.wait = this.wait.bind(this); this.wait = this.wait.bind(this);
} }
async componentDidMount() { async componentDidMount () {
console.log(this.state.backend_url) const body = this.fetchusers();
const response = await fetch(`${this.authip}`); //const response = await axios.get('https://localhost:8433/api/curuser/');
console.log(response.ok); //this.setState({isUser: response.data.fetchuser},()=>console.log('hey riddhi',this.state.isUser));
const body = await response.text(); this.timer = setInterval(() => this.fetchusers(), 5000);
if (body === '') { if (body === '') {
this.setState(({isAuthenticated: false})) this.setState(({isAuthenticated: false}))
this.login() this.login()
} else { } 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(){ routeMain(){
let path = '/'; let path = '/';
this.props.history.push(path); this.props.history.push(path);
@ -70,7 +105,6 @@ class App extends Component{
login() { login() {
console.log(window.location) console.log(window.location)
window.location.href = `${this.authip}/login`; window.location.href = `${this.authip}/login`;
} }
wait(ms){ wait(ms){
var start = new Date().getTime(); var start = new Date().getTime();
@ -87,36 +121,36 @@ class App extends Component{
async logout() { async logout() {
fetch(`${this.authip}/logout`, fetch(`${this.authip}/logout`,
//{ {
//method : 'GET', // method : 'GET',
//mode: 'no-cors', mode: 'no-cors',
// credentials: 'include', credentials: 'include',
//headers: { headers: {
//'Content-Type': 'application/json' 'Content-Type': 'application/json'
//}, },
//} }
) )
/*.then((response) => response) // .then((response) => response)
.then((json) => { // .then((json) => {
console.log('Gotcha'); // console.log('Gotcha');
console.log(json.status === 204); // console.log(json.status === 204);
console.log(json.status); // console.log(json.status);
console.log(this.state.isAuthenticated); // console.log(this.state.isAuthenticated);
if (json.status === 204) { // if (json.status === 204) {
this.state.isAuthenticated = false; // this.state.isAuthenticated = false;
this.routeMain(); // this.routeMain();
} // }
if (json.status === 200) { // if (json.status === 200) {
this.state.isAuthenticated = false; // this.state.isAuthenticated = false;
this.routeMain(); // this.routeMain();
} // }
console.log(this.state.isAuthenticated); // console.log(this.state.isAuthenticated);
})*/ // })
.then(reponse => { // .then(reponse => {
window.location.href = this.authip; // window.location.href = this.authip;
}) // })
.then(reponse => { .then(response => {
this.wait(3000); //this.wait(3000);
window.location.href = this.frontendip; window.location.href = this.frontendip;
}); });
} }
@ -137,7 +171,10 @@ class App extends Component{
] ]
}); });
}; };
componentWillUnmount() {
clearInterval(this.timer);
this.timer = null;
}
attach() { attach() {
this.timer = setInterval(()=> this.heartbeat(), 10000); this.timer = setInterval(()=> this.heartbeat(), 10000);
@ -161,28 +198,28 @@ class App extends Component{
} }
settingsSimulator(launch) { settingsSimulator(launch) {
if (launch){ if (launch){
const httpClient = axios.create(); // const httpClient = axios.create();
httpClient.defaults.timeout = 600000; // httpClient.defaults.timeout = 600000;
// TODO : detach the heartbeat // TODO : detach the heartbeat
httpClient.get(`http://${this.backendip}/simulator/stop/${this.state.user.sub}`, { withCredentials: true }) // httpClient.get(`http://${this.backendip}/simulator/stop/${this.state.user.sub}`, { withCredentials: true })
.then(res => { // .then(res => {
this.setState({launch: false}); // this.setState({launch: false});
}) // })
} }
else { else {
this.setState({isLoading : true, launch: true}); this.setState({isLoading : true, launch: true});
this.attach(this.state.launch); //this.attach(this.state.launch);
const httpClient = axios.create(); // const httpClient = axios.create();
httpClient.defaults.timeout = 600000; // httpClient.defaults.timeout = 600000;
httpClient.get(`http://${this.backendip}/simulator/start/${this.state.user.sub}/${this.state.user.given_name}/spiri-friend2019@`, { withCredentials: true }) // httpClient.get(`http://${this.backendip}/simulator/start/${this.state.user.sub}/${this.state.user.given_name}/spiri-friend2019@`, { withCredentials: true })
.then(res => { // .then(res => {
this.setState({simulator: res.data, isLoading: false, url: this.state.simulator.publicIp }); // this.setState({simulator: res.data, isLoading: false, url: this.state.simulator.publicIp });
this.launchSimulator(this.state.simulator.publicIp); // this.launchSimulator(this.state.simulator.publicIp);
}) // })
} }
} }
@ -205,6 +242,7 @@ class App extends Component{
<div id="navbar" class="navbar-collapse"> <div id="navbar" class="navbar-collapse">
<div class="SpiriHeader"> <div class="SpiriHeader">
<a class="Brand" href="/"> <a class="Brand" href="/">
<img align="left" src={header} width={'70cm'} height={'70cm'} /> <img align="left" src={header} width={'70cm'} height={'70cm'} />
</a> </a>
</div> </div>
@ -220,8 +258,8 @@ class App extends Component{
const launch_ = this.state.launch ? const launch_ = this.state.launch ?
<div> <div>
<div id="sim"> <div id="sim">
<iframe name="top_" src={'https://'+ '3.238.9.151' +':4200'} 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://'+ '3.238.9.151' +':8888'} 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>: </div>:
<div class="SpiriImage"> <div class="SpiriImage">