Added a data entry system at /groups-add

2023-07-20 00:15:12 +03:00
parent 4fd0a23b8f
commit 1afca45d4b
55 changed files with 10348 additions and 228 deletions
--- a/Server/app/resources/basic/BasicController.jl
+++ b/Server/app/resources/basic/BasicController.jl
@@ -11,6 +11,7 @@ dict_layouts = Dict(
    :manifesto => generate_layout_html("main",controller,"manifesto"),
    :join_us => generate_layout_html("main",controller,"join_us",libraries=["Leaflet"]),
    :groups => generate_layout_html("main",controller,"groups",libraries=["Leaflet"]),
+    :groups_add => generate_layout_html("main",controller,"groups_add",libraries=["Leaflet"]),
    :cooperatives => generate_layout_html("main",controller,"cooperatives",libraries=["Leaflet"]),
    :communes => generate_layout_html("main",controller,"communes",libraries=["Leaflet"]),
    :parties => generate_layout_html("main",controller,"parties",libraries=["Leaflet"]),
@@ -162,6 +163,14 @@ function groups()
    )
 end

+function groups_add()
+    locale = get_locale()
+    html(:basic,:groups_add, layout = dict_layouts[:groups_add], context = @__MODULE__,
+        title = groups_info[locale][:title],
+        description = groups_info[locale][:description]
+    )
+end
+
 function cooperatives()
    locale = get_locale()
    html(:basic,:cooperatives, layout = dict_layouts[:cooperatives], context = @__MODULE__,
@@ -202,4 +211,16 @@ function political_compass()
    )
 end

-end
+function groups_add_post()
+    data = collect(JSON3.read(rawpayload()))
+    push!(data,1)
+    dict = Dict(zip(["country","state","town","latitude","longitude","contact","members"],data))
+    insert_into_table("groups",dict)
+end
+
+end
+
+#=
+json_string = """["United States","California",null,38.24508142880928,-120.58593750000001,""]"""
+data = JSON3.read(json_string)´
+=#
--- a/Server/app/resources/basic/views/groups_add.jl.html
+++ b/Server/app/resources/basic/views/groups_add.jl.html
@@ -0,0 +1 @@
+<groups-add-component></groups-add-component>
--- a/Server/app/svelte/public/css/common.css
+++ b/Server/app/svelte/public/css/common.css
@@ -310,7 +310,7 @@ input[type="text"],input[type="email"],input[type="password"],input[type="number
    border-color: black;
    border: black solid 0.063rem;
    padding-left: 0.5rem;
-    font: 1.3rem var(--serif, serif);
+    font: 1.15rem var(--serif, serif);
 }

 input[type="text"] {
--- a/Server/app/svelte/public/js/communes.js
+++ b/Server/app/svelte/public/js/communes.js
@@ -39,7 +39,7 @@ for (let c of communes) {

 export let communesMarkersLayer = L.layerGroup()

-export function addMarkersCommunes(map,content) {
+export function addMarkersCommunes(map,content,locale) {
    for (let g of communes) {
        let coordinates
        let text = "<b>"+content["Commune"]+"</b><br>"
@@ -50,7 +50,14 @@ export function addMarkersCommunes(map,content) {
            }
            else if (field=="location") {
                let location = g[field][0]
-                let locationString = location.map(x => content[x]).join(", ")
+                let locationString
+                if (locale=="en") {
+                    locationString = location.map(x => x).join(", ")
+                }
+                else {
+                    locationString = location.map(x => content[x]).join(", ")
+                }
+
                text += fieldText + locationString + "<br>"
                coordinates = g[field][1]
            }
--- a/Server/app/svelte/public/js/coops.js
+++ b/Server/app/svelte/public/js/coops.js
@@ -2,7 +2,7 @@ export let coops = [
    {
        logo: "chiron_logo",
        name: "Chiron Health",
-        location: [["Estonia","KohtlaJarve"],[59.41038769769602, 27.287802936242034]],
+        location: [["Estonia","Kohtla-Järve"],[59.41038769769602, 27.287802936242034]],
        market:   "wellnessAndHealth",
        workers: 2,
        status: "inDevelopment",
@@ -13,7 +13,7 @@ export let coops = [
    {
        logo: "kuusk_logo",
        name: "Kuusk",
-        location: [["Estonia","KohtlaJarve"],[59.399947051803004, 27.277159931677055]],
+        location: [["Estonia","Kohtla-Järve"],[59.399947051803004, 27.277159931677055]],
        market: "herbalTeas",
        workers: 1,
        status: "inDevelopment",
@@ -36,7 +36,7 @@ for (let g of coops) {

 export let coopsMarkersLayer = L.layerGroup()

-export function addMarkersCoops(map,content) {
+export function addMarkersCoops(map,content,locale) {
    for (let g of coops) {
        let coordinates
        let text = "<b>"+content["Cooperative"]+"</b><br>"
@@ -56,7 +56,13 @@ export function addMarkersCoops(map,content) {
            }
            else if (field=="location") {
                let location = g[field][0]
-                let locationString = location.map(x => content[x]).join(", ")
+                let locationString
+                if (locale=="en") {
+                    locationString = location.map(x => x).join(", ")
+                }
+                else {
+                    locationString = location.map(x => content[x]).join(", ")
+                }
                text += fieldText + locationString + "<br>"
                coordinates = g[field][1]
            }
--- a/Server/app/svelte/public/js/groups.js
+++ b/Server/app/svelte/public/js/groups.js
@@ -25,7 +25,7 @@ export let groups = [
        contact: ["https://discord.gg/Qk8KUk787z","DiscordInviteLink"]
    },
    {
-        location: [["Estonia","KohtlaJarve"], [59.40629447076191, 27.280605339416322]],
+        location: [["Estonia","Kohtla-Järve"], [59.40629447076191, 27.280605339416322]],
        members: 3,
        contact: ["https://discord.gg/Qk8KUk787z","DiscordInviteLink"]
    },
@@ -93,7 +93,7 @@ let groupsMarkersLayerIn = L.layerGroup()

 let contactGeneral =["https://discord.gg/4BUau4AZre","DiscordInviteLink"]

-function addMarkersToLayer(g,layer,content) {
+function addMarkersToLayer(g,layer,content,locale) {
    let coordinates
    let text = "<b>"+content["Group"]+"</b><br>"
    for (let field in g) {
@@ -103,7 +103,13 @@ function addMarkersToLayer(g,layer,content) {
        }
        else if (field=="location") {
            let location = g[field][0]
-            let locationString = location.map(x => content[x]).join(", ")
+            let locationString
+            if (locale=="en") {
+                locationString = location.map(x => x).join(", ")
+            }
+            else {
+                locationString = location.map(x => content[x]).join(", ")
+            }
            text += fieldText + locationString + "<br>"
            coordinates = g[field][1]
        }
@@ -123,15 +129,15 @@ function addMarkersToLayer(g,layer,content) {
    marker.addTo(layer).bindPopup(text)
 }

-export function addMarkersGroups(map,content) {
+export function addMarkersGroups(map,content,locale) {
    for (let g of groups) {
-        addMarkersToLayer(g,groupsMarkersLayerIn,content)
+        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]]
-            addMarkersToLayer(g,groupsMarkersLayerOut,content)
+            addMarkersToLayer(g,groupsMarkersLayerOut,content,locale)
        }
        else {
            let locationName = [gs[0].location[0][0]]
@@ -153,7 +159,7 @@ export function addMarkersGroups(map,content) {
                members: members,
                contact: contact
            }
-            addMarkersToLayer(gNew,groupsMarkersLayerOut,content)
+            addMarkersToLayer(gNew,groupsMarkersLayerOut,content,locale)
        }
    }
    groupsMarkersLayerOut.addTo(groupsMarkersLayer)
@@ -172,37 +178,5 @@ function onZoomEnd(map) {
        groupsMarkersLayerIn.addTo(groupsMarkersLayer)
    }
 }
-/*
-function reverseGeocode(latitude, longitude) {
-    let url = `https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat=${latitude}&lon=${longitude}`;
-    
-    // Create a new XMLHttpRequest object
-    let xhr = new XMLHttpRequest();
-    
-    // Set up the AJAX request
-    xhr.open('GET', url, true);
-    
-    // Define the onload function
-    xhr.onload = function() {
-      if (xhr.status === 200) {
-        // Parse the response JSON
-        let response = JSON.parse(xhr.responseText);
-        
-        // Extract the address information from the response
-        let address = response.address;
-        let city = address.city || address.town || address.village || address.hamlet;
-        let country = address.country;
-        let fullAddress = city + ', ' + country;
-        
-        // Do something with the address
-        console.log(fullAddress);
-      }
-    };
-    
-    // Send the AJAX request
-    xhr.send();
-  }
+
  
-let latitude = 123.456; // Replace with your latitude
-let longitude = 78.901; // Replace with your longitude
-reverseGeocode(latitude, longitude);*/
--- a/Server/app/svelte/public/js/libraries/serverTools.js
+++ b/Server/app/svelte/public/js/libraries/serverTools.js
@@ -1,17 +1,17 @@

 // Get data from server
 export function getData(path,callback) {   
-    var xhr = new XMLHttpRequest();
-        xhr.overrideMimeType("application/json");
-    xhr.open('GET', path, true);
+    let xhr = new XMLHttpRequest();
+    xhr.overrideMimeType("application/json")
+    xhr.open('GET', path, true)
    xhr.onreadystatechange = function () {
-          if (xhr.readyState == 4 && xhr.status == "200") {
+        if (xhr.readyState == 4 && xhr.status == "200") {
            if (callback !== undefined) {
-                callback(xhr.responseText);
+                callback(xhr.responseText)
            }
-          }
+        }
    };
-    xhr.send(null);  
+    xhr.send()  
 }

 // Parse JSON from given path into a given variable under a given key
@@ -35,6 +35,7 @@ export function sendData(route,data,callback) {
                    callback(xhr.responseText)
                }
            } else {
+                console.log("Request gave an error")
                // Oh no! There has been an error with the request!
            }
            }
--- a/Server/app/svelte/public/js/parties.js
+++ b/Server/app/svelte/public/js/parties.js
@@ -22,7 +22,7 @@ for (let g of parties) {

 export let partiesMarkersLayer = L.layerGroup()

-export function addMarkersParties(map,content) {
+export function addMarkersParties(map,content,locale) {
    for (let g of parties) {
        let coordinates
        let text = "<b>"+content["Party"]+"</b><br>"
@@ -42,7 +42,13 @@ export function addMarkersParties(map,content) {
            }
            else if (field=="location") {
                let location = g[field][0]
-                let locationString = location
+                let locationString
+                if (locale=="en") {
+                    locationString = location
+                }
+                else {
+                    locationString = content[location]
+                }
                text += fieldText + locationString + "<br>"
                coordinates = g[field][1]
            }
--- a/Server/app/svelte/public/locales/en/countries.json
+++ b/Server/app/svelte/public/locales/en/countries.json
@@ -1,29 +1,3 @@
 {
-    "map-prompt": "Want to appear on our map? Contact us!",
-    "Online": "Online",
-    "Denmark": "Denmark",
-    "Estonia": "Estonia",
-    "Greece": "Greece",
-    "Latvia": "Latvia",
-    "Canada": "Canada",
-    "Germany": "Germany",
-    "Copenhagen": "Copenhagen",
-    "Ireland": "Ireland",
-    "USA": "USA",
-    "Bulgaria": "Bulgaria",
-    "Colorado": "Colorado",
-    "Georgia": "Georgia",
-    "Ohio": "Ohio",
-    "Montreal": "Montreal",
-    "Kolding": "Kolding",
-    "KohtlaJarve": "Kohtla-Järve",
-    "Athens": "Athens",
-    "Riga": "Riga",
-    "Halifax": "Halifax",
-    "Wiesbaden": "Wiesbaden",
-    "Florida": "Florida",
-    "Tallinn": "Tallinn",
-    "Varna": "Varna",
-    "Louisville": "Louisville",
-    "Toronto": "Toronto"
+    "map-prompt": "Want to appear on our map? Contact us!"
 }
--- a/Server/app/svelte/public/locales/ru/countries.json
+++ b/Server/app/svelte/public/locales/ru/countries.json
@@ -15,7 +15,7 @@
    "Ohio": "Огайо",
    "Copenhagen": "Копенгаген",
    "Kolding": "Колдинг",
-    "KohtlaJarve": "Кохтла-Ярве",
+    "Kohtla-Järve": "Кохтла-Ярве",
    "Athens": "Афины",
    "Riga": "Рига",
    "Halifax": "Галифакс",
--- a/Server/app/svelte/rollup.config.js
+++ b/Server/app/svelte/rollup.config.js
@@ -31,7 +31,6 @@ function serve() {
 		}
 	};
 }
-   

 const walkSync = require("walk-sync");
 const paths = walkSync("./src", {globs: ["**/*.svelte"]}).map(x => "src/"+x)
--- a/Server/app/svelte/src/communes-component.svelte
+++ b/Server/app/svelte/src/communes-component.svelte
@@ -17,9 +17,17 @@
    loadLocaleContent(content,"countries",loaded)
    let locale = loadLocaleContent(content,"communes-component",loaded)

-    function mapCallbackCommunes(createMap,content) {
+    function mapCallbackCommunes(createMap,content,locale) {
        let map = createMap([22, 0],2)
-        addMarkersCommunes(map,content)
+        addMarkersCommunes(map,content,locale)
+    }
+
+    function getCountry(name) {
+        return locale=="en" ? name : $content[name]
+    }
+
+    function getAddress(group) {
+        return group.location[0].map(x => locale=="en" ? x : $content[x]).join(", ")
    }

    onMount(() => { 
@@ -39,11 +47,11 @@
                <map-component id="map" callback={(createMap) => mapCallbackCommunes(createMap,$content,locale)}></map-component>
                <p id="add-prompt">{$content["map-prompt"]}</p>
                {#each Object.entries(communesByCountry) as [name,communes]}
-                    <h4 class="country-name">{$content[name]}</h4>
+                    <h4 class="country-name">{getCountry(name)}</h4>
                    <div class="country-block">
                        {#each communes as commune}
                            <div class="location-info">
-                                <p><b>{$content.location}: </b>{commune.location[0].map(x => $content[x]).join(", ")}</p>
+                                <p><b>{$content.location}: </b>{getAddress(commune)}</p>
                                <p><b>{$content.status}: </b>{$content[commune.status]}</p>
                                <p><b>{$content.members}: </b>{commune.members}</p>
                                <p><b>{$content.contact}: </b><a href={commune.contact[0]} target=;_blank; rel=noreferrer>{$content[commune.contact[1]]}</a></p>
--- a/Server/app/svelte/src/cooperatives-component.svelte
+++ b/Server/app/svelte/src/cooperatives-component.svelte
@@ -14,12 +14,20 @@
    let loaded = writable(0)
    let content = writable({})

-    loadLocaleContent(content,"countries",loaded)
-    let locale = loadLocaleContent(content,"cooperatives-component",loaded)
+    let locale = loadLocaleContent(content,"countries",loaded)
+    loadLocaleContent(content,"cooperatives-component",loaded)

    function mapCallbackCoops(createMap,content) {
        let map = createMap([22, 0],2)
-        addMarkersCoops(map,content)
+        addMarkersCoops(map,content,locale)
+    }
+
+    function getCountry(name) {
+        return locale=="en" ? name : $content[name]
+    }
+
+    function getAddress(group) {
+        return group.location[0].map(x => locale=="en" ? x : $content[x]).join(", ")
    }

    onMount(() => { 
@@ -38,14 +46,14 @@
                <map-component id="map" callback={(createMap) => mapCallbackCoops(createMap,$content,locale)}></map-component>
                <p id="add-prompt">{$content["map-prompt"]}</p>
                {#each Object.entries(coopsByCountry) as [name,coops]}
-                    <h4 class="country-name">{$content[name]}</h4>
+                    <h4 class="country-name">{getCountry(name)}</h4>
                    <div class="country-block">
                        {#each coops as coop}
                            <div class="location-info">
                                <div class="img-general-info">
                                    <div>
                                        <p><b>{$content.name}: </b>{coop.name}</p>
-                                        <p><b>{$content.location}: </b>{coop.location[0].map(x => $content[x]).join(", ")}</p>
+                                        <p><b>{$content.location}: </b>{getAddress(coop)}</p>
                                        <p><b>{$content.market}: </b>{$content[coop.market]}</p>
                                        <p><b>{$content.workers}: </b>{coop.workers}</p>
                                        <p><b>{$content.status}: </b>{$content[coop.status]}</p>
--- a/Server/app/svelte/src/groups-add-component.svelte
+++ b/Server/app/svelte/src/groups-add-component.svelte
@@ -0,0 +1,248 @@
+<svelte:options tag="groups-add-component" />
+
+<script>
+    // Import statements
+    import { onMount } from 'svelte'
+    import { writable } from 'svelte/store';
+    import { groupsByCountry, addMarkersGroups } from '/js/groups.js'
+    import { loadLocaleContent, getData, sendData } from "/js/libraries/serverTools.js"
+    
+    // Import components
+    import "/js/components/map-component.js" 
+    
+    // Main code
+    let loaded = writable(0)
+    let content = writable({})
+
+    let addressInput
+    let contactInput
+    let addressVec
+    let userPinLat = 0
+    let userPinLng = 0
+    let userPin = createPin(0,0)
+    userPin.setOpacity(0)
+
+    let locale = loadLocaleContent(content,"groups-component",loaded)
+    loadLocaleContent(content,"countries",loaded)
+
+    function createPin(lat,lng) {
+        let markerIcon = new L.Icon({
+            iconUrl: '/img/common/markers/marker-black.png',
+            shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
+            iconSize: [25, 41],
+            iconAnchor: [12, 41],
+            popupAnchor: [1, -34],
+            shadowSize: [41, 41]
+        })
+        return L.marker([lat,lng], {icon: markerIcon})
+    }
+
+    function updatePin(marker,lat,lng) {
+        let newLatLng = L.latLng(lat, lng); // Replace with the desired coordinates
+        marker.setLatLng(newLatLng)
+    }
+
+    function reverseGeocode(latitude, longitude) {
+        let url = `https://nominatim.openstreetmap.org/reverse?lat=${latitude}&lon=${longitude}&format=jsonv2`;
+        
+        let callback = (response) => {
+            // Parse the response JSON
+            response = JSON.parse(response)
+            // Extract the address information from the response
+            let address = response.address
+            let city = address.city || address.town || address.village || address.hamlet
+            let state = address.state
+            let country = address.country
+            let fullAddress = country
+            if (state!=undefined) {
+                fullAddress += ", " + state
+            }
+            else {
+                state = ""
+            }
+            if (city!=undefined) {
+                fullAddress += ", " + city
+            }
+            else {
+                city = ""
+            }
+            addressInput.value = fullAddress
+            addressVec = [country,state,city]
+        }
+        getData(url,callback)
+    }
+
+    function mapCallbackGroups(createMap,content) {
+        let map = createMap([22, 0],2)
+        addMarkersGroups(map,content)
+
+        userPin.addTo(map)
+        map.on('click', function(event) {
+            let lat = event.latlng.lat;
+            let lng = event.latlng.lng;
+            userPinLat = lat
+            userPinLng = lng
+            updatePin(userPin,lat,lng)
+            userPin.setOpacity(1)
+            reverseGeocode(lat, lng)
+        })
+    }
+
+    function submitLocation() {
+        if (addressVec!=undefined) {
+            let data = [...addressVec,userPinLat,userPinLng,contactInput.value]
+            let url = "/" + locale + "/groups-add-post/"
+            console.log(data)
+            sendData(url,data)
+
+        }
+        
+    }
+    
+    onMount(() => { 
+
+    })
+</script>
+
+{#key $loaded}
+    {#if $loaded==2}
+        <div id="container">
+            <!--<img src="img/crowd.png" id="crowd" alt="crowd">-->
+            <div id="text-container">
+                <h1>Add a Group</h1>
+                <img id="groups-img" src="/img/common/groups.svg" alt="groups">
+                <p class="description">If there are no groups in your town with whom you can organize then</p>
+                <ol>
+                    <li>click on the map to show us where you are located,</li>
+                    <li>add a way to contact you or leave blank for a pin to point to our discord and</li>
+                    <li>press "Submit" to add yourself to our map</li>
+                </ol>
+                <label for="address-input">Location: </label><input bind:this={addressInput} id="address-input" type="text" readonly><br>
+                <label for="contact-input">Contact: </label><input bind:this={contactInput} id="contact-input" type="text">
+                <button id="submit-button" on:click={submitLocation}>Submit</button>
+                <map-component id="map" callback={(createMap) => mapCallbackGroups(createMap,$content)}></map-component>
+            </div>
+        </div>
+    {/if}
+{/key}
+
+<style>
+    @import '/css/common.css';
+
+    ol li {
+        margin-left: 3rem;
+    }
+
+    label {
+        display: inline-block;
+        font-family: var(--serif,serif);
+        font-size: 1.15rem;
+        line-height: 160%;
+        color: #222222;
+        width: 5.5rem;
+    }
+
+    input {
+        font-size: 1.15rem;
+        font-family: var(--serif,serif);
+        height: 2.5rem;
+    }
+
+    #address-input {
+        margin-top: 2rem;
+        margin-bottom: 1rem;
+        width: min(30rem,calc(100% - 10rem));
+    }
+
+    #contact-input {
+        width: min(20rem,calc(100% - 10rem));
+    }
+
+    .description {
+        margin-bottom: 1rem;
+    }
+
+    #submit-button {
+        display: block;
+        margin-top: 2rem;
+        margin-bottom: 2rem;
+        padding: 1rem 2rem;
+        font-size: 1.4rem;
+        font-family: var(--sans-serif,sans-serif);
+        border: 0rem solid black;
+        border-radius: 0.5rem;
+        background: #cb1816;
+        color: white;
+    }
+
+    #add-prompt {
+        margin-bottom: 2rem;
+    }
+
+    #groups-img {
+        position: absolute;
+        width: 14rem;
+        left: 50%;
+        transform: translate(-50%);
+        z-index: 0;
+        opacity: 0.2;
+    }
+
+    #text-container>:nth-child(3) {
+        margin-top: 8rem;
+    }
+
+    .country-name {
+        margin-bottom: 0.5rem;
+    }
+
+    .country-block {
+        margin-bottom: 2rem;
+    }
+
+    .location-info {
+        margin-bottom: 0.75rem;
+    }
+
+    .location-info p {
+        margin-bottom: 0;
+    }
+
+    a {
+        color: #DD1C1A;
+    }
+
+    #map {
+        --height: 30rem;
+        --width: 100%;
+        --margin-bottom: 0.5rem;
+    }
+
+    #text-container {
+        position: relative;
+        max-width: calc(100vw - 4rem);
+        margin: auto;
+    }
+
+    h1 {
+        margin-bottom: 1rem;
+        font-size: 2.2rem;
+        text-align: center;
+    }
+
+    h3 {
+        margin-bottom: 1rem;
+    }
+
+    #container {
+        margin: auto;
+        max-width: 800px;
+        margin-top: 1rem;
+        margin-bottom: 4rem;
+    }
+
+    #container p {
+        text-align: justify;
+    }
+
+</style>
--- a/Server/app/svelte/src/groups-component.svelte
+++ b/Server/app/svelte/src/groups-component.svelte
@@ -5,7 +5,7 @@
    import { onMount } from 'svelte'
    import { writable } from 'svelte/store';
    import { groupsByCountry, addMarkersGroups } from '/js/groups.js'
-    import { loadLocaleContent} from "/js/libraries/serverTools.js"
+    import { loadLocaleContent, getData, sendData } from "/js/libraries/serverTools.js"
    
    // Import components
    import "/js/components/map-component.js" 
@@ -14,16 +14,24 @@
    let loaded = writable(0)
    let content = writable({})

-    loadLocaleContent(content,"groups-component",loaded)
+    let locale = loadLocaleContent(content,"groups-component",loaded)
    loadLocaleContent(content,"countries",loaded)

-    function mapCallbackGroups(createMap,content) {
+    function mapCallbackGroups(createMap,content,locale) {
        let map = createMap([22, 0],2)
-        addMarkersGroups(map,content)
+        addMarkersGroups(map,content,locale)
+    }
+
+    function getCountry(name) {
+        return locale=="en" ? name : $content[name]
+    }
+
+    function getAddress(group) {
+        return group.location[0].map(x => locale=="en" ? x : $content[x]).join(", ")
    }
    
    onMount(() => { 
-        //    {console.log(loaded)}
+
    })
 </script>

@@ -36,14 +44,14 @@
                <img id="groups-img" src="/img/common/groups.svg" alt="groups">
                <p class="description">{$content.p1}</p>
                <h3>{$content.subheading1}</h3>
-                <map-component id="map" callback={(createMap) => mapCallbackGroups(createMap,$content)}></map-component>
+                <map-component id="map" callback={(createMap) => mapCallbackGroups(createMap,$content,locale)}></map-component>
                <p id="add-prompt">{$content["map-prompt"]}</p>
                {#each Object.entries(groupsByCountry) as [name,groups]}
-                    <h4 class="country-name">{$content[name]}</h4>
+                    <h4 class="country-name">{getCountry(name)}</h4>
                    <div class="country-block">
                        {#each groups as group}
                            <div class="location-info">
-                                <p><b>{$content.location}: </b>{group.location[0].map(x => $content[x]).join(", ")}</p>
+                                <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>
                            </div>
--- a/Server/app/svelte/src/join-us-component.svelte
+++ b/Server/app/svelte/src/join-us-component.svelte
@@ -24,12 +24,12 @@
    loadLocaleContent(content,"countries",loaded)
    let locale = loadLocaleContent(content,"join-us-component",loaded)

-    function mapCallback(createMap,content) {
+    function mapCallback(createMap,content,locale) {
        let map = createMap([22, 0],2)
-        addMarkersGroups(map,content)
-        addMarkersCommunes(map,content)
-        addMarkersCoops(map,content)
-        addMarkersParties(map,content)
+        addMarkersGroups(map,content,locale)
+        addMarkersCommunes(map,content,locale)
+        addMarkersCoops(map,content,locale)
+        addMarkersParties(map,content,locale)

        let overlayMaps = {
            "Groups": groupsMarkersLayer,
@@ -77,7 +77,7 @@
                    <p>{$content.nearYou}</p>
                </div>
                <p>{$content.noneNear} <a href="https://chat.whatsapp.com/BhnmUNljUxJ2AjeHUwyTKh" target="_blank" rel=noreferrer>{$content.WhatsAppGroup}</a> {$content.or} <a href="https://discord.gg/Qk8KUk787z" target="_blank" rel=noreferrer>{$content.DiscordServer}</a>{$content.helpStart}</p>
-                <map-component id="map" callback={(createMap) => mapCallback(createMap,$content)}></map-component>
+                <map-component id="map" callback={(createMap) => mapCallback(createMap,$content,locale)}></map-component>
            </div>
        </div>
    {/if}
--- a/Server/app/svelte/src/landing-component.svelte
+++ b/Server/app/svelte/src/landing-component.svelte
@@ -36,12 +36,12 @@
    let locale = loadLocaleContent(content,"landing-component",loaded,changeWidth)
    changeWidth(locale)

-    function mapCallback(createMap,content) {
+    function mapCallback(createMap,content,locale) {
        let map = createMap([22, 0],2)
-        addMarkersGroups(map,content)
-        addMarkersCommunes(map,content)
-        addMarkersCoops(map,content)
-        addMarkersParties(map,content)
+        addMarkersGroups(map,content,locale)
+        addMarkersCommunes(map,content,locale)
+        addMarkersCoops(map,content,locale)
+        addMarkersParties(map,content,locale)

        let overlayMaps = {}
        overlayMaps[content.groups] = groupsMarkersLayer
@@ -107,7 +107,7 @@
                </div>
                -->
                <h1 id="find-us">{$content.findUs}</h1>
-                <map-component id="map" callback={(createMap) => mapCallback(createMap,$content)} colors={["#23AC20","#CA2437","#217BC9","#FFD326"]}></map-component>
+                <map-component id="map" callback={(createMap) => mapCallback(createMap,$content,locale)} colors={["#23AC20","#CA2437","#217BC9","#FFD326"]}></map-component>
                <h1>{$content.whatNow}</h1>
                <div id="action-container">
                    <a class="link-button" href={"/" + locale + "/join-us"}>{$content.joinUs}</a>
--- a/Server/app/svelte/src/parties-component.svelte
+++ b/Server/app/svelte/src/parties-component.svelte
@@ -15,11 +15,19 @@
    let content = writable({})

    loadLocaleContent(content,"countries",loaded)
-    loadLocaleContent(content,"parties-component",loaded)
+    let locale = loadLocaleContent(content,"parties-component",loaded)

-    function mapCallbackParties(createMap,content) {
+    function mapCallbackParties(createMap,content,locale) {
        let map = createMap([22, 0],2)
-        addMarkersParties(map,content)
+        addMarkersParties(map,content,locale)
+    }
+
+    function getCountry(name) {
+        return locale=="en" ? name : $content[name]
+    }
+
+    function getAddress(group) {
+        return locale=="en" ? group.location : $content[group.location]
    }

    onMount(() => { 
@@ -36,10 +44,10 @@
                <img id="party-img" src="/img/common/parties.svg" alt="party">
                <p class="description">{$content.p1}</p>
                <h3>{$content.subheading1}</h3>
-                <map-component id="map" callback={(createMap) => mapCallbackParties(createMap,$content)}></map-component>
+                <map-component id="map" callback={(createMap) => mapCallbackParties(createMap,$content,locale)}></map-component>
                <p id="add-prompt">{$content["map-prompt"]}</p>
                {#each Object.entries(partiesByCountry) as [name,parties]}
-                    <h4 class="country-name">{$content[name]}</h4>
+                    <h4 class="country-name">{getCountry(name)}</h4>
                    <div class="country-block">
                        {#each parties as party}
                        <div class="location-info">
@@ -51,7 +59,7 @@
                                </picture>
                                <div>
                                    <p><b>{$content.name}: </b>{party.name}</p>
-                                    <p><b>{$content.location}: </b>{$content[party.location[0]]}</p>
+                                    <p><b>{$content.location}: </b>{getAddress(party)}</p>
                                    <p><b>{$content.link}: </b><a href={party.link} target=;_blank; rel=noreferrer>{party.link}</a></p>
                                </div>
                            </div>
--- a/Server/app/svelte/src/partners-component.svelte
+++ b/Server/app/svelte/src/partners-component.svelte
@@ -15,7 +15,15 @@
    let content = writable({})

    loadLocaleContent(content,"countries",loaded)
-    loadLocaleContent(content,"partners-component",loaded)
+    let locale = loadLocaleContent(content,"partners-component",loaded)
+
+    function getCountry(name) {
+        return locale=="en" ? name : $content[name]
+    }
+
+    function getAddress(group) {
+        return group.location[0].map(x => locale=="en" ? x : $content[x]).join(", ")
+    }

    onMount(() => { 

@@ -32,7 +40,7 @@
                <p>{$content.p1}</p>
                <h3>{$content.subheading1}</h3>
                {#each Object.entries(partnersByCountry) as [name,partners]}
-                    <h4 class="country-name">{$content[name]}</h4>
+                    <h4 class="country-name">{getCountry(name)}</h4>
                    <div class="country-block">
                        {#each partners as partner}
                        <div class="location-info">
@@ -45,7 +53,7 @@
                                <div>
                                    <p><b>{$content.name}: </b>{partner.name}</p>
                                    <p><b>{$content.type}: </b>{$content[partner.type]}</p>
-                                    <p><b>{$content.location}: </b>{$content[partner.location[0][0]] + (partner.location[0][1]=="" ? "" : ", " +  $content[partner.location[0][1]])}</p>
+                                    <p><b>{$content.location}: </b>{getAddress(partner)}</p>
                                    <p><b>{$content.link}: </b><a href={partner.link} target=;_blank; rel=noreferrer>{partner.link}</a></p>
                                </div>
                            </div>
				`@@ -0,0 +1 @@`
				`<groups-add-component></groups-add-component>`