This commit is contained in:
a-ill
2023-07-22 13:22:35 +03:00
parent 9387cdca70
commit 242c50043d
11 changed files with 197 additions and 85 deletions

View File

@@ -1,3 +1,4 @@
/*
export let groups = [
{
location: [["Bulgaria","Varna"],[43.21582161671174, 27.89896092161012]],
@@ -85,17 +86,7 @@ export let groups = [
contact: ["https://discord.gg/Qk8KUk787z","DiscordInviteLink"]
}
]
export let groupsByCountry = {}
for (let g of groups) {
let country = g.location[0][0]
if (country in groupsByCountry) {
groupsByCountry[country].push(g)
}
else {
groupsByCountry[country] = [g]
}
}
*/
export let groupsMarkersLayer = L.layerGroup()
let groupsMarkersLayerOut = L.layerGroup()
@@ -116,13 +107,14 @@ export function translate(content, x) {
function addMarkersToLayer(g,layer,content,locale) {
let coordinates
let text = "<b>"+content["Group"]+"</b><br>"
for (let field in g) {
for (let field of ["location","members","contact"]) {
let fieldText = content[field] + ": "
if (field=="contact") {
text += fieldText + "<a href='" + g.contact[0] + "' target='_blank' rel=noreferrer>" + content[g.contact[1]] + "</a>"
text += fieldText + "<a href='" + g.contact + "' target='_blank' rel=noreferrer>" + g.contact + "</a>"
}
else if (field=="location") {
let location = g[field][0]
let location = [g.country,g.state,g.town].filter(x => x!=null && x!=undefined)
let locationString
if (locale=="en") {
locationString = location.map(x => x).join(", ")
@@ -131,7 +123,7 @@ function addMarkersToLayer(g,layer,content,locale) {
locationString = location.map(x => translate(content, x)).join(", ")
}
text += fieldText + locationString + "<br>"
coordinates = g[field][1]
coordinates = [g.latitude,g.longitude]
}
else {
text += fieldText + g[field] + "<br>"
@@ -145,28 +137,29 @@ function addMarkersToLayer(g,layer,content,locale) {
popupAnchor: [1, -34],
shadowSize: [41, 41]
})
//console.log(text)
let marker = L.marker(coordinates, {icon: markerIcon})
marker.addTo(layer).bindPopup(text)
}
export function addMarkersGroups(map,content,locale) {
export function addMarkersGroups(groups,groupsByCountry,map,content,locale) {
for (let g of groups) {
addMarkersToLayer(g,groupsMarkersLayerIn,content,locale)
}
for (let gs of Object.values(groupsByCountry)) {
if (gs.length==1) {
let g = {...gs[0]}
g.location[0] = [g.location[0][0]]
g.country = [g.country]
addMarkersToLayer(g,groupsMarkersLayerOut,content,locale)
}
else {
let locationName = [gs[0].location[0][0]]
let locationName = gs[0].country
let locationCoordinates = [0,0]
let members = 0
let contact = gs[0].contact
for (let g of gs) {
locationCoordinates[0] += g.location[1][0]
locationCoordinates[1] += g.location[1][1]
locationCoordinates[0] += g.latitude
locationCoordinates[1] += g.longitude
members += g.members
if (g.contact[0]!=gs[0].contact[0]) {
contact = contactGeneral
@@ -175,13 +168,16 @@ export function addMarkersGroups(map,content,locale) {
locationCoordinates[0] = locationCoordinates[0]/gs.length
locationCoordinates[1] = locationCoordinates[1]/gs.length
let gNew = {
location: [locationName,locationCoordinates],
country: locationName,
latitude: locationCoordinates[0],
longitude: locationCoordinates[1],
members: members,
contact: contact
}
addMarkersToLayer(gNew,groupsMarkersLayerOut,content,locale)
}
}
groupsMarkersLayerOut.addTo(groupsMarkersLayer)
groupsMarkersLayer.addTo(map)
map.on("zoomend", () => onZoomEnd(map))

View File

@@ -4,7 +4,7 @@
// Import statements
import { onMount } from 'svelte'
import { writable } from 'svelte/store';
import { groupsByCountry, addMarkersGroups } from '/js/groups.js'
import { addMarkersGroups, translate } from '/js/groups.js'
import { loadLocaleContent, getData, sendData } from "/js/libraries/serverTools.js"
// Import components
@@ -13,6 +13,30 @@
// Main code
let loaded = writable(0)
let content = writable({})
let groups
let groupsByCountry
let callback = (response) => {
groups = JSON.parse(response)
groupsByCountry = {}
for (let g of groups) {
let country = g.country
if (g.contact==null) {
g.contact = "https://discord.gg/Qk8KUk787z"
}
if (country in groupsByCountry) {
groupsByCountry[country].push(g)
}
else {
groupsByCountry[country] = [g]
}
}
loaded.update((val) => {
return val + 1
})
}
getData("/assets/groups.json",callback)
let confirmationMsg
let addressInput
@@ -76,7 +100,7 @@
function mapCallbackGroups(createMap,content,locale) {
let map = createMap([22, 0],2)
addMarkersGroups(map,content,locale)
addMarkersGroups(groups,groupsByCountry,map,content,locale)
userPin.addTo(map)
map.on('click', function(event) {
@@ -111,8 +135,7 @@
town: addressVec[2],
latitude: userPinLat,
longitude: userPinLng,
contact: contactInput.value,
members: 1
contact: contactInput.value
}
if (data.state=="") {
@@ -139,7 +162,7 @@
</script>
{#key $loaded}
{#if $loaded==2}
{#if $loaded==3}
<div id="container">
<!--<img src="img/crowd.png" id="crowd" alt="crowd">-->
<div id="text-container">

View File

@@ -4,7 +4,7 @@
// Import statements
import { onMount } from 'svelte'
import { writable } from 'svelte/store';
import { groupsByCountry, addMarkersGroups, translate } from '/js/groups.js'
import { addMarkersGroups, translate } from '/js/groups.js'
import { loadLocaleContent, getData, sendData } from "/js/libraries/serverTools.js"
// Import components
@@ -13,21 +13,47 @@
// Main code
let loaded = writable(0)
let content = writable({})
let groups
let groupsByCountry
let locale = loadLocaleContent(content,"groups-component",loaded)
loadLocaleContent(content,"countries",loaded)
let callback = (response) => {
groups = JSON.parse(response)
groupsByCountry = {}
for (let g of groups) {
let country = g.country
if (g.contact==null) {
g.contact = "https://discord.gg/Qk8KUk787z"
}
if (country in groupsByCountry) {
groupsByCountry[country].push(g)
}
else {
groupsByCountry[country] = [g]
}
}
loaded.update((val) => {
return val + 1
})
}
getData("/assets/groups.json",callback)
function mapCallbackGroups(createMap,content,locale) {
let map = createMap([22, 0],2)
addMarkersGroups(map,content,locale)
addMarkersGroups(groups,groupsByCountry,map,content,locale)
}
function getCountry(x) {
return locale=="en" ? x : translate($content,x)
}
function getAddress(group) {
return group.location[0].map(x => locale=="en" ? x : translate($content,x)).join(", ")
function getAddress(g) {
let location = [g.country,g.state,g.town].filter(x => x!=null)
return location.map(x => locale=="en" ? x : translate($content,x)).join(", ")
}
onMount(() => {
@@ -36,7 +62,7 @@
</script>
{#key $loaded}
{#if $loaded==2}
{#if $loaded==3}
<div id="container">
<!--<img src="img/crowd.png" id="crowd" alt="crowd">-->
<div id="text-container">
@@ -53,7 +79,7 @@
<div class="location-info">
<p><b>{$content.location}: </b>{getAddress(group)}</p>
<p><b>{$content.members}: </b>{group.members}</p>
<p><b>{$content.contact}: </b><a href={group.contact[0]} target=;_blank; rel=noreferrer>{$content[group.contact[1]]}</a></p>
<p><b>{$content.contact}: </b><a href={group.contact} target=;_blank; rel=noreferrer>{group.contact}</a></p>
</div>
{/each}
</div>