mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2025-01-09 01:37:24 +03:00
Created component to show a map on a modal window
This commit is contained in:
Alejandro Celaya
parent
95220b913a
commit
6abc0e7d02
6 changed files with 111 additions and 14 deletions
|
|
@ -29,6 +29,7 @@
|
|||
"chart.js": "^2.7.2",
|
||||
"classnames": "^2.2.6",
|
||||
"csvjson": "^5.1.0",
|
||||
"leaflet": "^1.4.0",
|
||||
"moment": "^2.22.2",
|
||||
"promise": "^8.0.1",
|
||||
"prop-types": "^15.6.2",
|
||||
|
|
@ -41,6 +42,7 @@
|
|||
"react-copy-to-clipboard": "^5.0.1",
|
||||
"react-datepicker": "~1.5.0",
|
||||
"react-dom": "^16.7.0",
|
||||
"react-leaflet": "^2.1.4",
|
||||
"react-moment": "^0.7.6",
|
||||
"react-redux": "^5.0.7",
|
||||
"react-router-dom": "^4.2.2",
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import registerServiceWorker from './registerServiceWorker';
|
|||
import container from './container';
|
||||
import store from './container/store';
|
||||
import '../node_modules/react-datepicker/dist/react-datepicker.css';
|
||||
import '../node_modules/leaflet/dist/leaflet.css';
|
||||
import './common/react-tagsinput.scss';
|
||||
import './index.scss';
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,9 @@ import PropTypes from 'prop-types';
|
|||
import { fromPairs, head, identity, keys, pipe, prop, reverse, sortBy, toLower, toPairs, type } from 'ramda';
|
||||
import SortingDropdown from '../utils/SortingDropdown';
|
||||
import GraphCard from './GraphCard';
|
||||
import MapModal from './helpers/MapModal';
|
||||
|
||||
const toLowerIfString = (value) => type(value) === 'String' ? toLower(value) : identity(value);
|
||||
|
||||
export default class SortableBarGraph extends React.Component {
|
||||
static propTypes = {
|
||||
|
|
@ -14,6 +17,7 @@ export default class SortableBarGraph extends React.Component {
|
|||
state = {
|
||||
orderField: undefined,
|
||||
orderDir: undefined,
|
||||
mapIsOpened: false,
|
||||
};
|
||||
|
||||
render() {
|
||||
|
|
@ -23,7 +27,6 @@ export default class SortableBarGraph extends React.Component {
|
|||
return stats;
|
||||
}
|
||||
|
||||
const toLowerIfString = (value) => type(value) === 'String' ? toLower(value) : identity(value);
|
||||
const sortedPairs = sortBy(
|
||||
pipe(
|
||||
prop(this.state.orderField === head(keys(sortingItems)) ? 0 : 1),
|
||||
|
|
@ -35,10 +38,14 @@ export default class SortableBarGraph extends React.Component {
|
|||
return fromPairs(this.state.orderDir === 'ASC' ? sortedPairs : reverse(sortedPairs));
|
||||
};
|
||||
|
||||
const toggleMap = () => this.setState(({ mapIsOpened }) => ({ mapIsOpened: !mapIsOpened }));
|
||||
|
||||
return (
|
||||
<GraphCard stats={sortStats()} isBarChart>
|
||||
{title}
|
||||
<div className="float-right">
|
||||
<button className="btn btn-link btn-sm" onClick={toggleMap}>Show in map</button>
|
||||
<MapModal toggle={toggleMap} isOpen={this.state.mapIsOpened} title={title} />
|
||||
<SortingDropdown
|
||||
isButton={false}
|
||||
right
|
||||
|
|
|
|||
38
src/visits/helpers/MapModal.js
Normal file
38
src/visits/helpers/MapModal.js
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
import React from 'react';
|
||||
import { Modal, ModalBody, ModalHeader } from 'reactstrap';
|
||||
import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
|
||||
import * as PropTypes from 'prop-types';
|
||||
import './MapModal.scss';
|
||||
|
||||
const propTypes = {
|
||||
toggle: PropTypes.func,
|
||||
isOpen: PropTypes.bool,
|
||||
title: PropTypes.string,
|
||||
};
|
||||
|
||||
const madridLat = 40.416775;
|
||||
const madridLong = -3.703790;
|
||||
const latLong = [ madridLat, madridLong ];
|
||||
|
||||
const MapModal = ({ toggle, isOpen, title }) => (
|
||||
<Modal toggle={toggle} isOpen={isOpen} centered size="lg" className="map-modal__modal">
|
||||
<ModalHeader toggle={toggle}>{title}</ModalHeader>
|
||||
<ModalBody>
|
||||
<Map center={latLong} zoom="13">
|
||||
<TileLayer
|
||||
attribution='&copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
|
||||
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
||||
/>
|
||||
<Marker position={latLong}>
|
||||
<Popup>
|
||||
A pretty CSS3 popup. <br /> Easily customizable.
|
||||
</Popup>
|
||||
</Marker>
|
||||
</Map>
|
||||
</ModalBody>
|
||||
</Modal>
|
||||
);
|
||||
|
||||
MapModal.propTypes = propTypes;
|
||||
|
||||
export default MapModal;
|
||||
38
src/visits/helpers/MapModal.scss
Normal file
38
src/visits/helpers/MapModal.scss
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
@import '../../utils/base';
|
||||
|
||||
.map-modal__modal {
|
||||
@media (min-width: $mdMin) {
|
||||
$margin: 20px;
|
||||
$offset: $margin * 2;
|
||||
|
||||
width: calc(100% - #{$offset});
|
||||
max-width: calc(100% - #{$offset});
|
||||
height: calc(100% - #{$offset});
|
||||
margin: $margin;
|
||||
}
|
||||
|
||||
@media (max-width: $smMax) {
|
||||
$margin: 10px;
|
||||
$offset: $margin * 2;
|
||||
|
||||
width: calc(100% - #{$offset});
|
||||
max-width: calc(100% - #{$offset});
|
||||
height: calc(100% - #{$offset});
|
||||
margin: $margin;
|
||||
}
|
||||
}
|
||||
|
||||
.map-modal__modal .modal-content {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.map-modal__modal .modal-body {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.map-modal__modal .leaflet-container {
|
||||
flex: 1 1 auto;
|
||||
border-radius: 0 0 .3rem .3rem;
|
||||
}
|
||||
37
yarn.lock
37
yarn.lock
|
|
@ -736,7 +736,7 @@
|
|||
dependencies:
|
||||
regenerator-runtime "^0.12.0"
|
||||
|
||||
"@babel/runtime@^7.1.2":
|
||||
"@babel/runtime@^7.1.2", "@babel/runtime@^7.2.0":
|
||||
version "7.2.0"
|
||||
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.2.0.tgz#b03e42eeddf5898e00646e4c840fa07ba8dcad7f"
|
||||
dependencies:
|
||||
|
|
@ -4356,7 +4356,7 @@ hoist-non-react-statics@^2.5.0:
|
|||
version "2.5.5"
|
||||
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"
|
||||
|
||||
hoist-non-react-statics@^3.1.0:
|
||||
hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.2.1:
|
||||
version "3.2.1"
|
||||
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.2.1.tgz#c09c0555c84b38a7ede6912b61efddafd6e75e1e"
|
||||
dependencies:
|
||||
|
|
@ -5720,6 +5720,11 @@ lcid@^2.0.0:
|
|||
dependencies:
|
||||
invert-kv "^2.0.0"
|
||||
|
||||
leaflet@^1.4.0:
|
||||
version "1.4.0"
|
||||
resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.4.0.tgz#d5f56eeb2aa32787c24011e8be4c77e362ae171b"
|
||||
integrity sha512-x9j9tGY1+PDLN9pcWTx9/y6C5nezoTMB8BLK5jTakx+H7bPlnbCHfi9Hjg+Qt36sgDz/cb9lrSpNQXmk45Tvhw==
|
||||
|
||||
left-pad@^1.3.0:
|
||||
version "1.3.0"
|
||||
resolved "https://registry.yarnpkg.com/left-pad/-/left-pad-1.3.0.tgz#5b8a3a7765dfe001261dde915589e782f8c94d1e"
|
||||
|
|
@ -5804,6 +5809,11 @@ locate-path@^3.0.0:
|
|||
p-locate "^3.0.0"
|
||||
path-exists "^3.0.0"
|
||||
|
||||
lodash-es@^4.0.0:
|
||||
version "4.17.11"
|
||||
resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.11.tgz#145ab4a7ac5c5e52a3531fb4f310255a152b4be0"
|
||||
integrity sha512-DHb1ub+rMjjrxqlB3H56/6MXtm1lSksDp2rA2cNWjG8mlDUYFhUj3Di2Zn5IwSU87xLv8tNIQ7sSwE/YOX/D/Q==
|
||||
|
||||
lodash._reinterpolate@~3.0.0:
|
||||
version "3.0.0"
|
||||
resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
|
||||
|
|
@ -7589,11 +7599,6 @@ postcss-reduce-initial@^4.0.2:
|
|||
postcss-reduce-transforms@^4.0.1:
|
||||
version "4.0.1"
|
||||
resolved "https://registry.yarnpkg.com/postcss-reduce-transforms/-/postcss-reduce-transforms-4.0.1.tgz#8600d5553bdd3ad640f43bff81eb52f8760d4561"
|
||||
dependencies:
|
||||
cssnano-util-get-match "^4.0.0"
|
||||
has "^1.0.0"
|
||||
postcss "^7.0.0"
|
||||
postcss-value-parser "^3.0.0"
|
||||
|
||||
postcss-replace-overflow-wrap@^3.0.0:
|
||||
version "3.0.0"
|
||||
|
|
@ -8062,6 +8067,17 @@ react-is@^16.3.2, react-is@^16.6.0, react-is@^16.6.1, react-is@^16.7.0:
|
|||
version "16.7.0"
|
||||
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.7.0.tgz#c1bd21c64f1f1364c6f70695ec02d69392f41bfa"
|
||||
|
||||
react-leaflet@^2.1.4:
|
||||
version "2.1.4"
|
||||
resolved "https://registry.yarnpkg.com/react-leaflet/-/react-leaflet-2.1.4.tgz#44192a972892c690d4148e48dacd613168fd8cc4"
|
||||
integrity sha512-OJvLq13ID5X6H/AM7woPmuqK7qEjT7RE81kysYU3X4HACsumAmvRuWffffxQ8Fl+m2cxkqF78eRmsWj5w9r1xw==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.2.0"
|
||||
hoist-non-react-statics "^3.2.1"
|
||||
lodash "^4.0.0"
|
||||
lodash-es "^4.0.0"
|
||||
warning "^4.0.0"
|
||||
|
||||
react-lifecycles-compat@^3.0.0, react-lifecycles-compat@^3.0.4:
|
||||
version "3.0.4"
|
||||
resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
|
||||
|
|
@ -8897,11 +8913,6 @@ shebang-regex@^1.0.0:
|
|||
shell-quote@1.6.1:
|
||||
version "1.6.1"
|
||||
resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.6.1.tgz#f4781949cce402697127430ea3b3c5476f481767"
|
||||
dependencies:
|
||||
array-filter "~0.0.0"
|
||||
array-map "~0.0.0"
|
||||
array-reduce "~0.0.0"
|
||||
jsonify "~0.0.0"
|
||||
|
||||
shellwords@^0.1.1:
|
||||
version "0.1.1"
|
||||
|
|
@ -10109,7 +10120,7 @@ warning@^3.0.0:
|
|||
dependencies:
|
||||
loose-envify "^1.0.0"
|
||||
|
||||
warning@^4.0.1:
|
||||
warning@^4.0.0, warning@^4.0.1:
|
||||
version "4.0.2"
|
||||
resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.2.tgz#aa6876480872116fa3e11d434b0d0d8d91e44607"
|
||||
dependencies:
|
||||
|
|
|
|||
Loading…
Reference in a new issue