diff --git a/webapp/src/App.jsx b/webapp/src/App.jsx index 44c20fe..9b49d45 100644 --- a/webapp/src/App.jsx +++ b/webapp/src/App.jsx @@ -25,19 +25,18 @@ class App extends Component { } componentDidMount() { - - - connect((msg) => { console.log("New Message") - console.log(msg.data) + var jsonMSG; try { jsonMSG = JSON.parse(msg.data); } catch (error) { console.log(error); } + if(jsonMSG["Type"] == "COP"){ + console.log(msg.data) var Entities = Array.from(jsonMSG["Entities"]) if(Array.isArray(Entities)) { @@ -46,27 +45,34 @@ class App extends Component { }); } } + // this.state.Entities = jsonMSG // var jsonmsg = JSON.parse(msg); - this.setState(prevState => ({ - // chatHistory: [...this.state.History, msg] - // chatHistory: [...this.state.History, msg] + // this.setState(prevState => ({ + // // chatHistory: [...this.state.History, msg] + // // chatHistory: [...this.state.History, msg] - })) + // })) console.log(this.state.Entities); }); } - // send() { - // console.log("hello"); - // // sendMsg("hello world"); - // } - handleCallback = (ChildData) => { - this.setState({name: ChildData}) - console.log(ChildData); + updateMap() + { + var msg = + { + Type: "Request", + Data: "COP" + + } + sendMsg(JSON.stringify(msg)); + } + + MapIntervalCallback = () => { + this.updateMap() } render() { @@ -74,16 +80,18 @@ class App extends Component { return (
- +
+ + {/* */} -
+ {/*
{name} +
*/} +
- - - + {/* */}
); diff --git a/webapp/src/components/OpenSeaMap/OpenSeaMap.jsx b/webapp/src/components/OpenSeaMap/OpenSeaMap.jsx index f1f9958..9d5c88e 100644 --- a/webapp/src/components/OpenSeaMap/OpenSeaMap.jsx +++ b/webapp/src/components/OpenSeaMap/OpenSeaMap.jsx @@ -4,36 +4,45 @@ import React, { Component } from "react"; import { MapContainer, TileLayer,Marker, Popup } from 'react-leaflet' import { friend,Hostile, iconShip,createIcon } from "./icon"; import "./OpenSeaMap.scss" +import { sendMsg } from '../api'; // import icon from 'leaflet/dist/images/marker-icon.png'; class OpenSeaMap extends Component { + componentDidMount() { + // setInterval(() => this.setState({ time: Date.now()}), 1000) + setInterval(() => this.props.parentCallback(), 3000) + + +} + + + handleClick(e) + { + // console.log(e.target) + console.log("hello world"); + } makeIcon(index, entity) { var icon; - // switch (entity.Side) - // { - // case "Friend": - // icon = friend; - // break; - // case "Hostile": - // icon = Hostile; - // break; - // default: - - // break; - // } icon = createIcon(entity.Type,entity.Side) return ( - - + { + console.log(e.target.options.name); // will print 'FooBar' in console + }, + }} > + + {/* Omu-Aran the Head Post of Igbomina land, is a town in the Nigerian state of Kwara. It originated from Ife and currently the local government headquarters of Irepodun local government. - + */} ); @@ -45,7 +54,7 @@ class OpenSeaMap extends Component { // )); return ( -
+
@@ -54,14 +63,6 @@ class OpenSeaMap extends Component { {/* {positions} */} {this.props.Entities.map((pos, index) => ( this.makeIcon(index,pos) - // - // - // Omu-Aran the Head Post of Igbomina land, - // is a town in the Nigerian state of Kwara. - // It originated from Ife and currently the local - // government headquarters of Irepodun local government. - // - // ))}
diff --git a/webapp/src/components/OpenSeaMap/OpenSeaMap.scss b/webapp/src/components/OpenSeaMap/OpenSeaMap.scss index 7e9b69d..630773d 100644 --- a/webapp/src/components/OpenSeaMap/OpenSeaMap.scss +++ b/webapp/src/components/OpenSeaMap/OpenSeaMap.scss @@ -7,11 +7,12 @@ } -.container { +.map { padding-top: 1%; height: 800px; - width: 79%; - padding-left: 20%; + width: 76%; + // padding-left: 20%; + float: left; } // .leaflet-marker-icon{ diff --git a/webapp/src/components/OpenSeaMap/icon.jsx b/webapp/src/components/OpenSeaMap/icon.jsx index 340db3e..30e0038 100644 --- a/webapp/src/components/OpenSeaMap/icon.jsx +++ b/webapp/src/components/OpenSeaMap/icon.jsx @@ -1,4 +1,4 @@ -import {L, Icon} from 'leaflet'; +import { Icon} from 'leaflet'; import ms from 'milsymbol' const iconShip = new Icon({ @@ -50,10 +50,11 @@ switch (Type) { break; default: - SideLetter = "N"; + TypeLetter = "S"; break; } + var IconS = new ms.Symbol( "S"+SideLetter+TypeLetter+"*"+"--------" ) diff --git a/webapp/src/components/control/Tracklist/index.js b/webapp/src/components/control/Tracklist/index.js new file mode 100644 index 0000000..c007000 --- /dev/null +++ b/webapp/src/components/control/Tracklist/index.js @@ -0,0 +1,3 @@ +import Tracklist from "./tracklist.jsx"; + +export default Tracklist; diff --git a/webapp/src/components/control/Tracklist/tracklist.jsx b/webapp/src/components/control/Tracklist/tracklist.jsx new file mode 100644 index 0000000..4201a57 --- /dev/null +++ b/webapp/src/components/control/Tracklist/tracklist.jsx @@ -0,0 +1,44 @@ +import React from 'react'; +import './tracklist.scss' + + + + +class Tracklist extends React.Component +{ + render() + { + + return( +
+ + + + + + + + + + + { this.props.entities.map((val,index) => { + return ( + + + + + + + + ) + })} + +
NameCourseLatLon
{val.Name}{val.Course}{val.position[0]}{val.position[1]}
+
+ ); + } + +} + +export default Tracklist; + diff --git a/webapp/src/components/control/Tracklist/tracklist.scss b/webapp/src/components/control/Tracklist/tracklist.scss new file mode 100644 index 0000000..10bae13 --- /dev/null +++ b/webapp/src/components/control/Tracklist/tracklist.scss @@ -0,0 +1,8 @@ +.tracklist +{ + display: flex; +} + +td +{ +text-align: left;} \ No newline at end of file diff --git a/webapp/src/components/control/controls.css b/webapp/src/components/control/controls.css index 94a46b0..e6fb328 100644 --- a/webapp/src/components/control/controls.css +++ b/webapp/src/components/control/controls.css @@ -1,4 +1,5 @@ .controls{ display: flex; width: 20%; + float: left; } \ No newline at end of file diff --git a/webapp/src/components/control/controls.jsx b/webapp/src/components/control/controls.jsx index 08e44ea..b1fcb8b 100644 --- a/webapp/src/components/control/controls.jsx +++ b/webapp/src/components/control/controls.jsx @@ -1,7 +1,7 @@ import React from 'react'; import './controls.css' import { sendMsg } from '../api'; - +import Tracklist from './Tracklist' class Controls extends React.Component { constructor(props) { @@ -25,7 +25,8 @@ class Controls extends React.Component render() { return (
- + + {/* */}
); } diff --git a/webapp/src/components/control/index.js b/webapp/src/components/control/index.js new file mode 100644 index 0000000..2e505b2 --- /dev/null +++ b/webapp/src/components/control/index.js @@ -0,0 +1,3 @@ +import Controls from "./controls.jsx"; + +export default Controls;