diff --git a/package-lock.json b/package-lock.json index 4835dda..1ecae28 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7340,11 +7340,11 @@ } }, "engine.io-client": { - "version": "3.4.0", - "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-3.4.0.tgz", - "integrity": "sha512-a4J5QO2k99CM2a0b12IznnyQndoEvtA4UAldhGzKqnHf42I3Qs2W5SPnDvatZRcMaNZs4IevVicBPayxYt6FwA==", + "version": "3.4.3", + "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-3.4.3.tgz", + "integrity": "sha512-0NGY+9hioejTEJCaSJZfWZLk4FPI9dN+1H1C4+wj2iuFba47UgZbJzfWs4aNFajnX/qAaYKbe2lLTfEEWzCmcw==", "requires": { - "component-emitter": "1.2.1", + "component-emitter": "~1.3.0", "component-inherit": "0.0.3", "debug": "~4.1.0", "engine.io-parser": "~2.2.0", @@ -7357,11 +7357,6 @@ "yeast": "0.1.2" }, "dependencies": { - "component-emitter": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.2.1.tgz", - "integrity": "sha1-E3kY1teCg/ffemt8WmPhQOaUJeY=" - }, "debug": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz", diff --git a/src/Ades.css b/src/Ades.css index 1512935..eb9e23e 100644 --- a/src/Ades.css +++ b/src/Ades.css @@ -44,7 +44,7 @@ th, td { position: absolute; left: 0; bottom: 0; - font-size: 12px; + font-size: 48px; color: red; z-index: 1000000; } diff --git a/src/Ades.js b/src/Ades.js index eadd48b..1535d96 100644 --- a/src/Ades.js +++ b/src/Ades.js @@ -12,14 +12,14 @@ import { } from '@blueprintjs/core'; import S from 'sanctuary'; import { useTranslation } from 'react-i18next'; -import './css/animate.css'; import jwtDecode from 'jwt-decode'; +import io from 'socket.io-client'; /* * CSS Styling */ import './Ades.css'; - +import './css/animate.css'; /* * Components */ @@ -57,6 +57,7 @@ import VehiclesList from './dashboard/vehicle/VehiclesList'; import NewVehicle from './dashboard/vehicle/NewVehicle'; import HomeScreen from './dashboard/main_screen/HomeScreen'; import VerificationScreen from './VerificationScreen'; +import {API} from './consts'; /*function alertIsImportant(alertUtmMessage) { return ( @@ -135,6 +136,7 @@ function Ades() { const [isLoggedIn, setLoggedIn] = useState(true); const [role, setRole] = useState('none'); const [timeoutUnlogin, setTimeoutUnlogin] = useState(0); + const [mbSocket, setSocket] = useState(S.Nothing); useEffect(() => { if (S.isJust(state.auth.token)) { @@ -145,7 +147,6 @@ function Ades() { setRole(decoded.role); /* Get user full information if not yet fetched */ const username = decoded.username; - console.log('User is', username); if (S.isNothing(state.auth.user)) { actions.auth.info(username, () => { actions.operations.fetch(); @@ -157,6 +158,31 @@ function Ades() { actions.auth.logout(); }); } + if (S.isJust(mbSocket)) { + const socket = fM(mbSocket); + const token = fM(state.auth.token); + if (socket.connected) + socket.close(); + socket.io.opts.query = { token }; + socket.connect(); + } else { + const newSocket = io(API, { + query: { + token: fM(state.auth.token) + }, + transports: ['websocket'] + }); + /* Initialize sockets */ + newSocket.on('new-position', function (info) { + const info2 = {...info}; + //console.log('DroneState: new-position: ', info2); + actions.drones.post(info2); + }); + newSocket.on('operation-state-change', function (info) { + actions.operations.updateOne(info.gufi, info.state); + }); + setSocket(S.Just(newSocket)); + } setTimeoutUnlogin(setTimeout(() => { actions.auth.logout(); setRole('none'); diff --git a/src/dashboard/user/UsersList.js b/src/dashboard/user/UsersList.js index 718ee86..c192e6b 100644 --- a/src/dashboard/user/UsersList.js +++ b/src/dashboard/user/UsersList.js @@ -2,24 +2,15 @@ import React, {useEffect, useState} from 'react'; import {API} from '../../consts'; import {fM, maybeValues} from '../../libs/SaferSanctuary'; import S from 'sanctuary'; -import A from 'axios'; import '../../Ades.css'; import {Button, Intent, Tab, Tabs} from '@blueprintjs/core'; import {useHistory} from 'react-router-dom'; -import useAdesState, {print} from '../../state/AdesState'; +import useAdesState, {Axios, print} from '../../state/AdesState'; import {useTranslation} from 'react-i18next'; import { useParams } from 'react-router-dom'; import Pilot from './Pilot'; -const Axios = A.create({ - baseURL: API, - timeout: 15000, - headers: { - 'Content-Type': 'application/json', - } -}); - const USERS_ONE_PAGE_NUMBER = 8; function useUsersState() { diff --git a/src/map/hooks/useSimulatorLogic.js b/src/map/hooks/useSimulatorLogic.js index 625a62e..64769bc 100644 --- a/src/map/hooks/useSimulatorLogic.js +++ b/src/map/hooks/useSimulatorLogic.js @@ -63,10 +63,10 @@ function UseSimulatorLogic(refMapOnClick, map, token) { }); if (ratio < 1) { - const newTimer = setTimeout(() => fly(ratio + 0.02), 100); + const newTimer = setTimeout(() => fly(ratio + 0.02), 1000); setTimer(newTimer); } else { - const newTimer = setTimeout(() => fly(0.02), 100); + const newTimer = setTimeout(() => fly(0.02), 1000); setTimer(newTimer); } }; diff --git a/src/state/AdesState.js b/src/state/AdesState.js index 0e73af0..13095cb 100644 --- a/src/state/AdesState.js +++ b/src/state/AdesState.js @@ -1,25 +1,17 @@ import React from 'react'; import globalHook from '../libs/useGlobalHook'; -import A from 'axios'; import S from 'sanctuary'; - +import A from 'axios'; import {API, DEBUG} from '../consts'; import {Mutex} from 'async-mutex'; import {fM, maybeValues} from '../libs/SaferSanctuary'; -import io from 'socket.io-client'; /** * Global state of Ades - * @type {{operations: {list: Maybe, updated: number}, auth: {user: Maybe, username: string, token: Maybe}}} + * @type {AxiosInstance} */ -const Axios = A.create({ - baseURL: API, - timeout: 15000, - headers: { - 'Content-Type': 'application/json', - } -}); +let Axios; const quickFlyLocations = [ { @@ -236,6 +228,21 @@ function addQuickFly(store, data) { const actions = { auth: { login: (store, username, password, callback, errorCallback) => { + Axios = A.create({ + baseURL: API, + timeout: 15000, + headers: { + 'Content-Type': 'application/json', + } + }); + Axios.interceptors.response.use(function (response) { + if (response.headers.token) { + store.actions.auth.updateToken(response.headers.token); + } + return response; + }, function (error) { + return Promise.reject(error); + }); const authInfo = JSON.stringify({ username: username, password: password @@ -251,27 +258,11 @@ const actions = { errorCallback && error.response && errorCallback(error.response.data); }); }, - info: (store, username, okCallback, errorCallback) => { Axios.get('user/' + username, {headers: {auth: fM(store.state.auth.token)}}) .then(result => { print(store.state, false, 'InfoState', result.data); store.setState({auth: {...store.state.auth, user: S.Just(result.data)}}); - const socket = io(API, { - query: { - token: fM(store.state.auth.token) - }, - transports: ['websocket'] - }); - /* Initialize sockets */ - socket.on('new-position', function (info) { - const info2 = {...info}; - //console.log('DroneState: new-position: ', info2); - store.actions.drones.post(info2); - }); - socket.on('operation-state-change', function (info) { - updateOperationState(store, info.gufi, info.state); - }); okCallback && okCallback(result.data); }) .catch(error => { @@ -280,6 +271,12 @@ const actions = { errorCallback && errorCallback(); }); }, + updateToken: (store, newToken) => { + if (fM(store.state.auth.token) !== newToken) { + print(store.state, false, 'Token', newToken); + store.setState({auth: {...store.state.auth, token: S.Just(newToken)}}); + } + }, logout: (store) => { store.setState(initialState); } @@ -296,7 +293,7 @@ const actions = { },*/ vehicles: { fetch: (store) => { - Axios.get(API + 'vehicle', {headers: {auth: fM(store.state.auth.token)}}) + Axios.get('vehicle', {headers: {auth: fM(store.state.auth.token)}}) .then(result => addVehicles(store, result.data)) .catch(error => { print(store.state, true, 'VehicleState', error); @@ -309,7 +306,7 @@ const actions = { } }, post: (store, vehicle, callback, errorCallback) => { - A.post(API + 'vehicle', vehicle, {headers: {auth: fM(store.state.auth.token)}}) + Axios.post('vehicle', vehicle, {headers: {auth: fM(store.state.auth.token)}}) .then(result => { addVehicle(store, result.data); callback && callback(); @@ -326,13 +323,13 @@ const actions = { }, operations: { fetch: (store) => { - A.get(API + 'operation', {headers: {auth: fM(store.state.auth.token)}}) + Axios.get('operation', {headers: {auth: fM(store.state.auth.token)}}) .then(result => addOperations(store, result.data.ops)) // TODO: Contract .catch(error => print(store.state, true, 'OperationState', error)); }, post: (store, operation, callback, errorCallback) => { const operationCleaned = prepareOperation(operation); - A.post(API + 'operation', operationCleaned, {headers: {auth: fM(store.state.auth.token)}}) + Axios.post('operation', operationCleaned, {headers: {auth: fM(store.state.auth.token)}}) .then(result => { //addOperations(store, result.data); // TODO: Don't ask the server for the operations... @@ -346,7 +343,7 @@ const actions = { }, pendingacceptation: (store, gufi, comments, isApproved) => { const data = {comments: comments, approved: isApproved}; - A.post(API + 'operation/' + gufi + '/pendingtoaccept', data, {headers: {auth: fM(store.state.auth.token)}}) + Axios.post('operation/' + gufi + '/pendingtoaccept', data, {headers: {auth: fM(store.state.auth.token)}}) .then(() => { // TODO: // updateOperationState(store, gufi, isApproved ? 'ACCEPTED' : 'NOT_ACCEPTED'); @@ -355,6 +352,9 @@ const actions = { print(store.state, true, 'OperationState', error); //errorCallback && error.response && errorCallback(error.response.data); }); + }, + updateOne: (store, gufi, info) => { + updateOperationState(store, gufi, info); } }, drones: { @@ -429,14 +429,14 @@ const actions = { }, rfv: { fetch: (store) => { - A.get(API + 'restrictedflightvolume', {headers: {auth: fM(store.state.auth.token)}}) + Axios.get('restrictedflightvolume', {headers: {auth: fM(store.state.auth.token)}}) .then(result => addRFV(store, result.data)) .catch(error => print(store.state, true, 'RFVState', error)); } }, quickFly: { fetch: (store) => { - A.get(API + 'quickfly', {headers: { auth: fM(store.state.auth.token) }}) + Axios.get('quickfly', {headers: { auth: fM(store.state.auth.token) }}) .then(result => addQuickFly(store, result.data)) .catch(error => { addQuickFly(store, quickFlyLocations); @@ -450,7 +450,7 @@ const actions = { olds.push(data); addQuickFly(store, olds); callback && callback(); - /*A.post(API + 'quickfly', data, {headers: { auth: fM(store.state.auth.token) }}) + /*Axios.post('quickfly', data, {headers: { auth: fM(store.state.auth.token) }}) .then(result => { addQuickFly(result.data); callback && callback(); @@ -504,7 +504,8 @@ export { extractOperationsFromState, filterOperationsByState, filterOperationsByIds, - print + print, + Axios };