From da578b6ac7ba43b8d437aebbfe36777278370e5e Mon Sep 17 00:00:00 2001 From: Anton Tananaev Date: Mon, 3 Sep 2018 22:51:20 +1200 Subject: First hacky implementation --- modern/package.json | 3 +++ modern/public/favicon.ico | Bin 3870 -> 15086 bytes modern/public/index.html | 33 +++++++------------------------- modern/src/App.css | 28 --------------------------- modern/src/App.js | 22 ++++++++++++---------- modern/src/MainMap.js | 29 ++++++++++++++++++++++++++++ modern/src/MainToolbar.js | 47 ++++++++++++++++++++++++++++++++++++++++++++++ modern/src/index.css | 5 ----- modern/src/index.js | 1 - modern/src/logo.svg | 7 ------- 10 files changed, 98 insertions(+), 77 deletions(-) delete mode 100644 modern/src/App.css create mode 100644 modern/src/MainMap.js create mode 100644 modern/src/MainToolbar.js delete mode 100644 modern/src/index.css delete mode 100644 modern/src/logo.svg (limited to 'modern') diff --git a/modern/package.json b/modern/package.json index 6dea906..5dd4cb9 100644 --- a/modern/package.json +++ b/modern/package.json @@ -4,7 +4,10 @@ "private": true, "dependencies": { "@material-ui/core": "^3.0.1", + "@material-ui/icons": "^3.0.1", + "leaflet": "^1.3.4", "react": "^16.4.2", + "react-container-dimensions": "^1.4.1", "react-dom": "^16.4.2", "react-leaflet": "^2.0.1", "react-scripts": "1.1.5" diff --git a/modern/public/favicon.ico b/modern/public/favicon.ico index a11777c..6be99dd 100644 Binary files a/modern/public/favicon.ico and b/modern/public/favicon.ico differ diff --git a/modern/public/index.html b/modern/public/index.html index ed0ebaf..ac6d8d5 100644 --- a/modern/public/index.html +++ b/modern/public/index.html @@ -2,39 +2,20 @@ - + - - - React App + + + + + Traccar - +
- diff --git a/modern/src/App.css b/modern/src/App.css deleted file mode 100644 index c5c6e8a..0000000 --- a/modern/src/App.css +++ /dev/null @@ -1,28 +0,0 @@ -.App { - text-align: center; -} - -.App-logo { - animation: App-logo-spin infinite 20s linear; - height: 80px; -} - -.App-header { - background-color: #222; - height: 150px; - padding: 20px; - color: white; -} - -.App-title { - font-size: 1.5em; -} - -.App-intro { - font-size: large; -} - -@keyframes App-logo-spin { - from { transform: rotate(0deg); } - to { transform: rotate(360deg); } -} diff --git a/modern/src/App.js b/modern/src/App.js index 203067e..204c89e 100644 --- a/modern/src/App.js +++ b/modern/src/App.js @@ -1,18 +1,20 @@ import React, { Component } from 'react'; -import logo from './logo.svg'; -import './App.css'; +import ContainerDimensions from 'react-container-dimensions'; +import MainToobar from './MainToolbar'; +import MainMap from './MainMap'; class App extends Component { render() { return ( -
-
- logo -

Welcome to React

-
-

- To get started, edit src/App.js and save to reload. -

+
+
+ +
+
+ + + +
); } diff --git a/modern/src/MainMap.js b/modern/src/MainMap.js new file mode 100644 index 0000000..27c58bc --- /dev/null +++ b/modern/src/MainMap.js @@ -0,0 +1,29 @@ +import React, { Component } from 'react'; +import { Map, TileLayer, Marker, Popup } from 'react-leaflet'; + +class MainMap extends Component { + state = { + lat: 51.505, + lng: -0.09, + zoom: 13, + } + + render() { + const position = [this.state.lat, this.state.lng] + return ( + + + + + A pretty CSS3 popup.
Easily customizable. + + + + ) + } +} + +export default MainMap; diff --git a/modern/src/MainToolbar.js b/modern/src/MainToolbar.js new file mode 100644 index 0000000..e8294ab --- /dev/null +++ b/modern/src/MainToolbar.js @@ -0,0 +1,47 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import AppBar from '@material-ui/core/AppBar'; +import Toolbar from '@material-ui/core/Toolbar'; +import Typography from '@material-ui/core/Typography'; +import Button from '@material-ui/core/Button'; +import IconButton from '@material-ui/core/IconButton'; +import MenuIcon from '@material-ui/icons/Menu'; + +const styles = { + root: { + flexGrow: 1, + }, + flex: { + flexGrow: 1, + }, + menuButton: { + marginLeft: -12, + marginRight: 20, + }, +}; + +function MainToobar(props) { + const { classes } = props; + return ( +
+ + + + + + + Traccar + + + + +
+ ); +} + +MainToobar.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(MainToobar); diff --git a/modern/src/index.css b/modern/src/index.css deleted file mode 100644 index b4cc725..0000000 --- a/modern/src/index.css +++ /dev/null @@ -1,5 +0,0 @@ -body { - margin: 0; - padding: 0; - font-family: sans-serif; -} diff --git a/modern/src/index.js b/modern/src/index.js index fae3e35..917d651 100644 --- a/modern/src/index.js +++ b/modern/src/index.js @@ -1,6 +1,5 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import './index.css'; import App from './App'; import registerServiceWorker from './registerServiceWorker'; diff --git a/modern/src/logo.svg b/modern/src/logo.svg deleted file mode 100644 index 6b60c10..0000000 --- a/modern/src/logo.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - -- cgit v1.2.3