Add all public info to ambassador map pin popup

This commit is contained in:
Letícia Camara 2018-10-19 01:46:35 -03:00
parent be8e330d4c
commit c6912c8dd5
2 changed files with 40 additions and 8 deletions

View file

@ -138,7 +138,7 @@ class AmbassadorsPage extends Component {
searchText: app.addLocationSearchText(ambassador.cities), searchText: app.addLocationSearchText(ambassador.cities),
value: app.addLocation(ambassador.cities) value: app.addLocation(ambassador.cities)
} }
ambassador.map = app.addMapButton(ambassador.nickname, ambassador.cities); ambassador.map = app.addMapButton(ambassador, ambassador.cities);
ambassador.link = <a target="_blank" rel="noopener noreferrer" ambassador.link = <a target="_blank" rel="noopener noreferrer"
href={ambassador.url}>{stripProtocol(ambassador.url)}</a>; href={ambassador.url}>{stripProtocol(ambassador.url)}</a>;
}); });
@ -248,11 +248,22 @@ class AmbassadorsPage extends Component {
); );
} }
addMapButton(nickname, cities){ addMapButton(ambassador, cities){
const app = this; const app = this;
return ( return (
<span> <span>
{cities.map((location, index) => ( {cities.map((location, index) => {
const infoDescription = <div>
<div><b>Location</b>: {(location.name).replace(/(^|\s)\S/g, l => l.toUpperCase())} - {countries.getName(location.country)}</div>
{(ambassador.nickname) && (<div><b>Nickname</b>: {ambassador.nickname}</div>)}
{(ambassador.telegram) && (<div><b>Telegram</b>: {ambassador.telegram}</div>)}
{(ambassador.keybase) && (<div><b>Keybase</b>: {ambassador.keybase}</div>)}
{(ambassador.email) && (<div><b>Email</b>: {ambassador.email}</div>)}
{(ambassador.phone) && (<div><b>Phone</b>: {ambassador.phone}</div>)}
{(ambassador.url) && (<div><b>URL:</b>: <a target="_blank" rel="noopener noreferrer"
href={ambassador.url}>{stripProtocol(ambassador.url)}</a></div>)}
</div>;
return (
<div key={index}> <div key={index}>
<Button <Button
className="App-button" className="App-button"
@ -264,15 +275,15 @@ class AmbassadorsPage extends Component {
marginBottom: 5 marginBottom: 5
}} }}
onClick={() => app.openMaps( onClick={() => app.openMaps(
nickname, ambassador.nickname,
`${(location.name).replace(/(^|\s)\S/g, l => l.toUpperCase())} - ${countries.getName(location.country)}`, infoDescription,
location.lat, location.lat,
location.lon location.lon
)} )}
>Show on Map >Show on Map
</Button> </Button>
</div> </div>
))} );})}
</span> </span>
); );
} }
@ -288,12 +299,22 @@ class AmbassadorsPage extends Component {
const ambassadorsMarkers = []; const ambassadorsMarkers = [];
ambassadorsSearch.forEach(ambassador => { ambassadorsSearch.forEach(ambassador => {
ambassador.cities.forEach(function(city) { ambassador.cities.forEach(function(city) {
const infoDescription = <div>
<div><b>Location</b>: {(city.name).replace(/(^|\s)\S/g, l => l.toUpperCase())} - {countries.getName(city.country)}</div>
{(ambassador.nickname) && (<div><b>Nickname</b>: {ambassador.nickname}</div>)}
{(ambassador.telegram) && (<div><b>Telegram</b>: {ambassador.telegram}</div>)}
{(ambassador.keybase) && (<div><b>Keybase</b>: {ambassador.keybase}</div>)}
{(ambassador.email) && (<div><b>Email</b>: {ambassador.email}</div>)}
{(ambassador.phone) && (<div><b>Phone</b>: {ambassador.phone}</div>)}
{(ambassador.url) && (<div><b>URL:</b>: <a target="_blank" rel="noopener noreferrer"
href={ambassador.url}>{stripProtocol(ambassador.url)}</a></div>)}
</div>;
const marker = { const marker = {
lat: city.lat, lat: city.lat,
lng: city.lon, lng: city.lon,
withInfo: true, withInfo: true,
infoTitle: ambassador.nickname, infoTitle: ambassador.nickname,
infoDescription: `${city.name} - ${city.country}`, infoDescription: infoDescription,
}; };
ambassadorsMarkers.push(marker); ambassadorsMarkers.push(marker);
}); });

View file

@ -10,6 +10,7 @@ import EnhancedTable from '../EnhancedTable';
import Footer from '../Footer'; import Footer from '../Footer';
import LayerMap from '../LayerMap'; import LayerMap from '../LayerMap';
import PreviewMap from '../PreviewMap'; import PreviewMap from '../PreviewMap';
import { stripProtocol } from '../../utils/url';
// Helpers // Helpers
import Client from '../../utils/feathers'; import Client from '../../utils/feathers';
@ -134,12 +135,22 @@ class MerchantsPage extends Component {
const markers = []; const markers = [];
result.data.forEach(ambassador => { result.data.forEach(ambassador => {
ambassador.cities.forEach(function(city) { ambassador.cities.forEach(function(city) {
const infoDescription = <div>
<div><b>Location</b>: {(city.name).replace(/(^|\s)\S/g, l => l.toUpperCase())} - {countries.getName(city.country)}</div>
{(ambassador.nickname) && (<div><b>Nickname</b>: {ambassador.nickname}</div>)}
{(ambassador.telegram) && (<div><b>Telegram</b>: {ambassador.telegram}</div>)}
{(ambassador.keybase) && (<div><b>Keybase</b>: {ambassador.keybase}</div>)}
{(ambassador.email) && (<div><b>Email</b>: {ambassador.email}</div>)}
{(ambassador.phone) && (<div><b>Phone</b>: {ambassador.phone}</div>)}
{(ambassador.url) && (<div><b>URL:</b>: <a target="_blank" rel="noopener noreferrer"
href={ambassador.url}>{stripProtocol(ambassador.url)}</a></div>)}
</div>;
const marker = { const marker = {
lat: city.lat, lat: city.lat,
lng: city.lon, lng: city.lon,
withInfo: true, withInfo: true,
infoTitle: ambassador.nickname, infoTitle: ambassador.nickname,
infoDescription: `${city.name} - ${city.country}`, infoDescription: infoDescription,
}; };
markers.push(marker); markers.push(marker);
}); });