Add all public info to ambassador map pin popup
This commit is contained in:
parent
be8e330d4c
commit
c6912c8dd5
2 changed files with 40 additions and 8 deletions
|
@ -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);
|
||||||
});
|
});
|
||||||
|
|
|
@ -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);
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in a new issue