Added trade unions

2023-08-17 12:01:26 +03:00
parent 8e88a5a895
commit 73ece83c60
63 changed files with 1402 additions and 55 deletions
--- a/Server/app/svelte/src/join-us-component.svelte
+++ b/Server/app/svelte/src/join-us-component.svelte
@@ -21,6 +21,7 @@
    loadLocaleContent(content,"communes-component",loaded)
    loadLocaleContent(content,"cooperatives-component",loaded)
    loadLocaleContent(content,"parties-component",loaded)
+    loadLocaleContent(content,"trade-unions-component",loaded)
    loadLocaleContent(content,"countries",loaded)
    let locale = loadLocaleContent(content,"join-us-component",loaded)

@@ -48,6 +49,7 @@
    getData("/assets/communes.json",(response) => callback(response,"communes"))
    getData("/assets/cooperatives.json",(response) => callback(response,"cooperatives"))
    getData("/assets/parties.json",(response) => callback(response,"parties"))
+    getData("/assets/trade-unions.json",(response) => callback(response,"tradeUnions"))

    function mapCallback(createMap,content,locale) {
        let map = createMap([22, 0],2)
@@ -55,15 +57,19 @@
            enableCountryGrouping: true,
        }
        let groupsMarkersLayer = addMarkersEntries(entries["groups"],entriesByCountry["groups"],map,content,locale,addGroupPinContent,"green",options)
-        let communesMarkersLayer = addMarkersEntries(entries["communes"],entriesByCountry["communes"],map,content,locale,addCommunePinContent,"red",options)
-        let coopsMarkersLayer = addMarkersEntries(entries["cooperatives"],entriesByCountry["cooperatives"],map,content,locale,addCoopPinContent,"blue",options)
        let partiesMarkersLayer = addMarkersEntries(entries["parties"],entriesByCountry["parties"],map,content,locale,addPartyPinContent,"gold",options)
+        let tradeUnionsMarkersLayer = addMarkersEntries(entries["tradeUnions"],entriesByCountry["tradeUnions"],map,content,locale,addPartyPinContent,"violet",options)
+        let coopsMarkersLayer = addMarkersEntries(entries["cooperatives"],entriesByCountry["cooperatives"],map,content,locale,addCoopPinContent,"blue",options)
+        let communesMarkersLayer = addMarkersEntries(entries["communes"],entriesByCountry["communes"],map,content,locale,addCommunePinContent,"red",options)
+        

        let overlayMaps = {}
        overlayMaps[content.groups] = groupsMarkersLayer
-        overlayMaps[content.communes] = communesMarkersLayer
-        overlayMaps[content.cooperatives] = coopsMarkersLayer
        overlayMaps[content.parties] = partiesMarkersLayer
+        overlayMaps[content.tradeUnions] = tradeUnionsMarkersLayer
+        overlayMaps[content.cooperatives] = coopsMarkersLayer
+        overlayMaps[content.communes] = communesMarkersLayer
+        
        L.control.layers(null, overlayMaps).addTo(map)
    }

@@ -73,7 +79,7 @@
 </script>

 {#key $loaded}
-    {#if $loaded==10}
+    {#if $loaded==12}
        <div id="container">
            <div id="text-container">
                <h1>{$content.heading}</h1>
@@ -97,13 +103,14 @@
                    <p>{$content.findOur}</p>
                    <ol id="entities-list">
                        <li><a href={"/" + locale + "/groups"}>{$content.group}</a>,</li> 
-                        <li><a href={"/" + locale + "/communes"}>{$content.commune}</a></li> 
-                        <li><a href={"/" + locale + "/cooperatives"}>{$content.cooperative}</a> {$content.or}</li>
                        <li><a href={"/" + locale + "/parties"}>{$content.party}</a></li> 
+                        <li><a href={"/" + locale + "/trade-unions"}>{$content.tradeUnion}</a></li> 
+                        <li><a href={"/" + locale + "/cooperatives"}>{$content.cooperative}</a> {$content.or}</li>
+                        <li><a href={"/" + locale + "/communes"}>{$content.commune}</a></li> 
                    </ol>
                    <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>
+                <p>{$content.noneNear} <a href="https://discord.gg/Qk8KUk787z" target="_blank" rel=noreferrer>{$content.DiscordServer}</a> {$content.or} <a href="https://chat.whatsapp.com/BhnmUNljUxJ2AjeHUwyTKh" target="_blank" rel=noreferrer>{$content.WhatsAppGroup}</a>{$content.helpStart}</p>
                <map-component id="map" callback={(createMap) => mapCallback(createMap,$content,locale)} colors={["#23AC20","#CA2437","#217BC9","#FFD326"]}></map-component>
                <p id="add-prompt">{$content["map-prompt"]}</p>
            </div>
@@ -138,13 +145,16 @@
        background-image: url(https://www.libsoc.org/img/common/markers/marker-green.png);
    }
    #entities-list li:nth-of-type(2):before {
-        background-image: url(https://www.libsoc.org/img/common/markers/marker-red.png);
+        background-image: url(https://www.libsoc.org/img/common/markers/marker-gold.png);
    }
    #entities-list li:nth-of-type(3):before {
-        background-image: url(https://www.libsoc.org/img/common/markers/marker-blue.png);
+        background-image: url(https://www.libsoc.org/img/common/markers/marker-violet.png);
    }
    #entities-list li:nth-of-type(4):before {
-        background-image: url(https://www.libsoc.org/img/common/markers/marker-gold.png);
+        background-image: url(https://www.libsoc.org/img/common/markers/marker-blue.png);
+    }
+    #entities-list li:nth-of-type(5):before {
+        background-image: url(https://www.libsoc.org/img/common/markers/marker-red.png);
    }

    #entities-list li::marker {
--- a/Server/app/svelte/src/landing-component.svelte
+++ b/Server/app/svelte/src/landing-component.svelte
@@ -51,11 +51,14 @@
    getData("/assets/communes.json",(response) => callback(response,"communes"))
    getData("/assets/cooperatives.json",(response) => callback(response,"cooperatives"))
    getData("/assets/parties.json",(response) => callback(response,"parties"))
+    getData("/assets/trade-unions.json",(response) => callback(response,"tradeUnions"))

    loadLocaleContent(content,"groups-component",loaded)
    loadLocaleContent(content,"communes-component",loaded)
    loadLocaleContent(content,"cooperatives-component",loaded)
    loadLocaleContent(content,"parties-component",loaded)
+    loadLocaleContent(content,"trade-unions-component",loaded)
+
    loadLocaleContent(content,"countries",loaded)
    let locale = loadLocaleContent(content,"landing-component",loaded,changeWidth)
    changeWidth(locale)
@@ -66,15 +69,18 @@
            enableCountryGrouping: true,
        }
        let groupsMarkersLayer = addMarkersEntries(entries["groups"],entriesByCountry["groups"],map,content,locale,addGroupPinContent,"green",options)
-        let communesMarkersLayer = addMarkersEntries(entries["communes"],entriesByCountry["communes"],map,content,locale,addCommunePinContent,"red",options)
-        let coopsMarkersLayer = addMarkersEntries(entries["cooperatives"],entriesByCountry["cooperatives"],map,content,locale,addCoopPinContent,"blue",options)
        let partiesMarkersLayer = addMarkersEntries(entries["parties"],entriesByCountry["parties"],map,content,locale,addPartyPinContent,"gold",options)
+        let tradeUnionsMarkersLayer = addMarkersEntries(entries["tradeUnions"],entriesByCountry["tradeUnions"],map,content,locale,addPartyPinContent,"violet",options)
+        let coopsMarkersLayer = addMarkersEntries(entries["cooperatives"],entriesByCountry["cooperatives"],map,content,locale,addCoopPinContent,"blue",options)
+        let communesMarkersLayer = addMarkersEntries(entries["communes"],entriesByCountry["communes"],map,content,locale,addCommunePinContent,"red",options)
+        

        let overlayMaps = {}
        overlayMaps[content.groups] = groupsMarkersLayer
-        overlayMaps[content.communes] = communesMarkersLayer
-        overlayMaps[content.cooperatives] = coopsMarkersLayer
        overlayMaps[content.parties] = partiesMarkersLayer
+        overlayMaps[content.tradeUnions] = tradeUnionsMarkersLayer
+        overlayMaps[content.cooperatives] = coopsMarkersLayer
+        overlayMaps[content.communes] = communesMarkersLayer
        
        L.control.layers(null, overlayMaps).addTo(map)
    }
@@ -85,7 +91,7 @@
 </script>

 {#key $loaded}
-    {#if $loaded==10}
+    {#if $loaded==12}
        <div id="container">
            <picture>
                <source srcset="/img/crowd.webp">
@@ -105,6 +111,11 @@
                        <img id="parties-img" src="/img/common/parties.svg" alt="coops">
                        <p>{$content.partiesText}</p>
                    </div>
+                    <div>
+                        <a href={"/" + locale + "/trade-unions"}><h2>{$content.tradeUnionsTitle}</h2></a>
+                        <img id="trade-unions-img" src="/img/common/trade-unions.svg" alt="trade unions">
+                        <p>{$content.tradeUnionsText}</p>
+                    </div>
                    <div>
                        <a href={"/" + locale + "/coops"}><h2>{$content.cooperativesTitle}</h2></a>
                        <img id="coops-img" src="/img/common/coops.svg" alt="coops">
@@ -134,7 +145,7 @@
                </div>
                -->
                <h1 id="find-us">{$content.findUs}</h1>
-                <map-component id="map" callback={(createMap) => mapCallback(createMap,$content,locale)} colors={["#23AC20","#CA2437","#217BC9","#FFD326"]}></map-component>
+                <map-component id="map" callback={(createMap) => mapCallback(createMap,$content,locale)} colors={["#23AC20","#FFD326","#9D35CD","#217BC9","#CA2437"]}></map-component>
                <h1>{$content.whatNow}</h1>
                <div id="action-container">
                    <a class="link-button" href={"/" + locale + "/join-us"}>{$content.joinUs}</a>
@@ -188,7 +199,7 @@
        text-align: center;
    }
    
-    #groups-img, #communes-img, #coops-img, #parties-img {
+    #groups-img, #communes-img, #coops-img, #parties-img, #trade-unions-img {
        position: absolute;
        left: 50%;
        transform: translate(-50%);
@@ -202,6 +213,11 @@
        height: 7.5rem;
    }

+    #trade-unions-img {
+        margin-top: 0.5rem;
+        height: 7.5rem;
+    }
+
    #text-container {
        max-width: calc(100vw - 4rem);
        margin: auto;
@@ -230,13 +246,18 @@
    #container-grid {
        display: grid;
        grid-template-columns: var(--grid-width);
-        grid-template-rows: var(--grid-width);
+        grid-template-rows: 100% 100%;
        grid-gap: 4rem;
        row-gap: 2.5rem;
        margin-top: 2rem;
        margin-bottom: 1rem;
    }

+    #container-grid>:last-child {
+        grid-column: 1/span 2;
+
+    }
+
    #container-grid > div {
        position: relative;
    }
--- a/Server/app/svelte/src/navbar/navbar-logged.svelte
+++ b/Server/app/svelte/src/navbar/navbar-logged.svelte
@@ -115,9 +115,10 @@
                        <button on:click={() => showDropdown(initiativesDropdown)} on:focusout={() => hide(initiativesDropdown)} class="options-button">{$content.initiatives}</button>
                        <div bind:this={initiativesDropdown} class="options-dropdown">
                            <a href={"/"+locale+"/groups"}>{$content.groups}</a>
-                            <a href={"/"+locale+"/communes"}>{$content.communes}</a>
-                            <a href={"/"+locale+"/cooperatives"}>{$content.cooperatives}</a>
                            <a href={"/"+locale+"/parties"}>{$content.parties}</a>
+                            <a href={"/"+locale+"/trade-unions"}>{$content.tradeUnions}</a>
+                            <a href={"/"+locale+"/cooperatives"}>{$content.cooperatives}</a>
+                            <a href={"/"+locale+"/communes"}>{$content.communes}</a>
                            <a href={"/"+locale+"/partners"}>{$content.partners}</a>
                        </div>
                    </li>
--- a/Server/app/svelte/src/navbar/navbar-not-logged.svelte
+++ b/Server/app/svelte/src/navbar/navbar-not-logged.svelte
@@ -115,9 +115,10 @@
                        <button on:click={() => showDropdown(initiativesDropdown)} on:focusout={() => hide(initiativesDropdown)} class="options-button">{$content.initiatives}</button>
                        <div bind:this={initiativesDropdown} class="options-dropdown">
                            <a href={"/"+locale+"/groups"}>{$content.groups}</a>
-                            <a href={"/"+locale+"/communes"}>{$content.communes}</a>
-                            <a href={"/"+locale+"/cooperatives"}>{$content.cooperatives}</a>
                            <a href={"/"+locale+"/parties"}>{$content.parties}</a>
+                            <a href={"/"+locale+"/trade-unions"}>{$content.tradeUnions}</a>
+                            <a href={"/"+locale+"/cooperatives"}>{$content.cooperatives}</a>
+                            <a href={"/"+locale+"/communes"}>{$content.communes}</a>
                            <a href={"/"+locale+"/partners"}>{$content.partners}</a>
                        </div>
                    </li>
--- a/Server/app/svelte/src/profile/profile-component.svelte
+++ b/Server/app/svelte/src/profile/profile-component.svelte
@@ -15,6 +15,7 @@
    import "/js/components/profile-communes.js"
    import "/js/components/profile-coops.js"
    import "/js/components/profile-parties.js"
+    import "/js/components/profile-trade-unions.js"
    import "/js/components/groups-add-component.js"

    // Main code
@@ -26,6 +27,7 @@
    let communes
    let coops
    let parties
+    let tradeUnions
    let panes
    let groupsAdd

@@ -34,6 +36,7 @@
    let communesButton
    let coopsButton
    let partiesButton
+    let tradeUnionsButton
    let buttons

    let currentPaneIndex = 0
@@ -66,18 +69,21 @@
            setTimeout(f,100)
        }
        else {
-            let svgItem = svgFromObject(svgObject)
-            if (svgItem==null) {
+            let svgItems = svgFromObject(svgObject)
+            if (svgItems.length==0) {
                let f = () => styleField(div,weight,color)
                setTimeout(f,100)
            }
            else {
                div.style.fontWeight = weight
-                svgItem.setAttribute("fill", color)
+                for (let item of svgItems) {
+                    let fill = item.getAttribute("fill")
+                    if (fill!="#fff" && fill!=null) {
+                        item.setAttribute("fill", color)
+                    }
+                }
            }
        }
-       
-        
    }

    function fillFields() {
@@ -98,10 +104,10 @@

    function init() {
        panes = [general,groups,communes,coops,parties]
-        buttons = [generalButton,groupsButton,communesButton,coopsButton,partiesButton] 
+        buttons = [generalButton,groupsButton,communesButton,coopsButton,partiesButton,tradeUnionsButton] 
        if ($loaded==1 && panes.every(x => valid(x)) && buttons.every(x => valid(x))) {
-            panes = [general,groups,communes,coops,parties]
-            buttons = [generalButton,groupsButton,communesButton,coopsButton,partiesButton] 
+            panes = [general,groups,communes,coops,parties,tradeUnions]
+            buttons = [generalButton,groupsButton,communesButton,coopsButton,partiesButton,tradeUnionsButton] 

            fillFields()
            general.style.display = "initial"
@@ -155,6 +161,10 @@
            <object id="parties-img" class="icons" type="image/svg+xml" data="/img/common/parties.svg" title="parties"></object>            
            <span>parties</span>
        </button>
+        <button bind:this={tradeUnionsButton} on:click={() => changePane(tradeUnions,tradeUnionsButton)}>
+            <object id="trade-unions-img" class="icons" type="image/svg+xml" data="/img/common/trade-unions.svg" title="trade unions"></object>            
+            <span>trade unions</span>
+        </button>
        <button on:click={AuthTools.logout} id="logout-button">
            <object id="logout-img" class="icons" type="image/svg+xml" data="/img/profile/icons/logout.svg" title=""></object>            
            <span>logout</span>
@@ -165,9 +175,10 @@
            {#if $loaded==1}
                <profile-general bind:this={general} style="display: none;"></profile-general>
                <profile-groups bind:this={groups} style="display: none;"></profile-groups> 
-                <profile-communes bind:this={communes} style="display: none;"></profile-communes> 
-                <profile-coops bind:this={coops} style="display: none;"></profile-coops> 
                <profile-parties bind:this={parties} style="display: none;"></profile-parties> 
+                <profile-trade-unions bind:this={tradeUnions} style="display: none;"></profile-trade-unions> 
+                <profile-coops bind:this={coops} style="display: none;"></profile-coops> 
+                <profile-communes bind:this={communes} style="display: none;"></profile-communes> 
            {/if}
        {/key}
    </div>
--- a/Server/app/svelte/src/profile/profile-trade-unions.svelte
+++ b/Server/app/svelte/src/profile/profile-trade-unions.svelte
@@ -0,0 +1,29 @@
+<svelte:options tag="profile-trade-unions" />
+
+<script>
+
+    // Import statements
+    import { onMount } from 'svelte'
+    import * as AuthTools from "/js/libraries/authTools.js"
+
+    // Main code
+
+    onMount(() => {
+
+	})
+      
+</script>
+
+<h3>Under development</h3> 
+
+<p  style=" position: relative; margin-top: 2rem;">Visit <a href="https://discord.gg/Qk8KUk787z" style="color: #c52a28;">https://discord.gg/Qk8KUk787z</a> and ask for your trade union to be added.</p>
+
+<style>
+
+@import '/css/common.css';
+
+h3 {
+    text-align: center;
+}
+
+</style>
--- a/Server/app/svelte/src/profile/trade-unions-add-component.svelte
+++ b/Server/app/svelte/src/profile/trade-unions-add-component.svelte
@@ -0,0 +1,577 @@
+<svelte:options tag="trade-unions-add-component" />
+
+<script>
+    // Import statements
+    import { onMount, getContext } from 'svelte'
+    import { writable } from 'svelte/store';
+    import { loadLocaleContent, getData, sendData } from "/js/libraries/serverTools.js"
+    import { addMarkersEntries, translate } from "/js/libraries/mapTools.js"
+    import { validatePosNumber } from "/js/libraries/miscTools.js"
+    
+    // Import components
+    import "/js/components/map-component.js" 
+
+    // Export statements
+    export let map = null
+    
+    // Main code
+    let loaded = writable(0)
+    let content = writable({})
+    let entries
+    let entriesByCountry
+    let userData
+
+    let buttonsGroupMember
+    let buttonsNotGroupMember
+
+    let callback = (response) => {
+        entries = JSON.parse(response)
+        entriesByCountry = {}
+        for (let g of entries) {
+            let country = g.country
+            if (g.contact==null) {
+                g.contact = "https://discord.gg/Qk8KUk787z"
+            }
+            if (country in entriesByCountry) {
+                entriesByCountry[country].push(g)
+            }
+            else {
+                entriesByCountry[country] = [g]
+            }
+        }
+        loaded.update((val) => {
+            return val + 1
+        })
+    }
+    getData("/assets/trade-unions.json",callback)
+
+
+    let confirmationMsg
+    let addressInput
+    let contactInput
+    let membersInput
+    let addressVec = ["","",""]
+    let userPinData = {
+
+    }
+    let userPinLng = 0
+    let userPin = createPin(0,0)
+    userPin.setOpacity(0)
+    let modeButtons = []
+
+    let context = getContext("profile-component")
+    let closeGroupsAdd = context.closeGroupsAdd
+    let maps = context.maps
+    let onLoadedGroups = context.onLoadedGroups
+    let userGroups = context.userGroups
+    let user = context.user
+
+    let has_group = userGroups.length!=0
+    let mode = has_group ? 2 : 0
+    let pendingGroup
+    if  (has_group) {
+        pendingGroup= userGroups[0].status!=undefined
+        if (pendingGroup) {
+            mode = 3
+        }
+    }
+
+    let locale = loadLocaleContent(content,"trade-unions-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 reverseGeocodeLocal(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
+            resizeInput(addressInput)
+        }
+        getData(url,callback)
+    }
+
+    function reverseGeocode(latitude, longitude) {
+        let url = `https://nominatim.openstreetmap.org/reverse?lat=${latitude}&lon=${longitude}&format=jsonv2&accept-language=en`;
+        
+        let callback = (response) => {
+            // Parse the response JSON
+            response = JSON.parse(response)
+            // Extract the address information from the response
+            let address = response.address
+            if (address!=undefined) {
+                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 = ""
+                }
+                addressVec = [country,state,city]
+            }
+        }
+        getData(url,callback)
+    }
+
+    function addGroupPinContent(g,content,locale) {
+        let coordinates
+        let text = "<b>"+content["TradeUnion"]+"</b><br>"
+        for (let field of ["location","members","contact"]) {
+            let fieldText = content[field] + ": "
+            if (field=="contact") {
+                text += fieldText + "<a href='" + g.contact + "' target='_blank' rel=noreferrer>" + g.contact + "</a>"
+            }
+            else if (field=="location") {
+                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(", ")
+                }
+                else {
+                    locationString = location.map(x => translate(content, x)).join(", ")
+                }
+                text += fieldText + locationString + "<br>"
+                coordinates = [g.latitude,g.longitude]
+            }
+            else {
+                text += fieldText + g[field] + "<br>"
+            }
+        }
+        return {text,coordinates}
+    }
+
+    function mapCallback(createMap,content,locale) {
+        map = createMap([22, 0],2)
+        maps["groupsAdd"] = map
+        let options = {
+            enableCountryGrouping: false,
+            pinCallback: pinCallback
+        }
+        addMarkersEntries(entries,entriesByCountry,map,content,locale,addGroupPinContent,"green",options)
+
+        userPin.addTo(map)
+        map.on('click', function(event) {
+            if (mode==0) {
+                let lat = event.latlng.lat;
+                let lng = event.latlng.lng;
+                userPinData["latitude"] = lat
+                userPinData["longitude"] = lng
+                userPinData["id"] = null
+                updatePin(userPin,lat,lng)
+                userPin.setOpacity(1)
+                reverseGeocodeLocal(lat, lng)
+                reverseGeocode(lat, lng)
+            }
+        })
+    }
+
+    function updateConfirmationMsg(response) {
+        if (response!==false) {
+            if (mode==0 && !user.verified) {
+                confirmationMsg.innerHTML = "You have been added to our database! Now go to our Discord to verify yourself."
+            }
+            else {
+                confirmationMsg.innerHTML = "Success!"
+            }
+            confirmationMsg.style.color = "green"
+            if (mode==0 || mode==1) {
+                userGroups[0] = {}
+            }
+            userGroups[0].country = addressVec[0]=="" ? null :  addressVec[0]
+            userGroups[0].state = addressVec[1]=="" ? null :  addressVec[1]
+            userGroups[0].town = addressVec[2]=="" ? null :  addressVec[2]
+            userGroups[0].members = userPinData["members"]
+            onLoadedGroups()
+        }
+        else {
+            confirmationMsg.innerHTML = "Something went wrong."
+            confirmationMsg.style.color = "red"
+        }
+    }
+
+    function submitLocation() {
+        if (addressVec[0]!="" || mode==3) {
+            let membersVal, contactVal
+            if (mode==0) { // Create
+                membersVal = membersInput.value
+                contactVal = contactInput.value
+            }
+            else if (mode==1) { // Join
+                contactVal = contactInput.value
+            }
+            else if (mode==2 || mode==3) { // Move
+                membersVal = ""
+                contactVal = ""
+            }
+            else if (mode==3) { // Leave
+                membersVal = ""
+                contactVal = ""
+                addressVec = [null,null,null]
+                userPinData["latitude"] = null
+                userPinData["longitude"] = null
+            }
+            
+            userData = {
+                country: addressVec[0],
+                state: addressVec[1],
+                town: addressVec[2],
+                latitude: userPinData["latitude"],
+                longitude: userPinData["longitude"],
+                contact: contactVal=="" ? null : contactVal,
+                members: membersVal=="" ? null : parseInt(membersVal),
+                group_id: userPinData["id"],
+                mode: mode
+            }
+            
+            if (userData.state=="") {
+                userData.state = null
+            }
+            if (userData.town=="") {
+                userData.town = null
+            }
+            let url = "/" + locale + "/trade-unions-add-post/"
+            sendData(url,userData,updateConfirmationMsg)
+        }
+    }
+
+    function resizeInput(el) {
+        el.nextElementSibling.innerHTML = el.value
+    }
+
+    function pinCallback(marker,event) {
+        if (mode==1) {
+            let lat = event.latlng.lat;
+            let lng = event.latlng.lng;
+            userPinData["latitude"] = lat
+            userPinData["longitude"] = lng
+            userPinData["id"] = marker.id
+            userPinData["members"] = marker.members
+            updatePin(userPin,lat,lng)
+            userPin.setOpacity(1)
+            reverseGeocodeLocal(lat, lng)
+            reverseGeocode(lat, lng)
+        }
+    }
+
+    function chooseButton(index) {
+        for (let b of modeButtons) {
+            if (b!=undefined) {
+                b.style.background = "rgba(197, 43, 40, 0.319)"
+                b.style.color = "black"
+            }
+        }
+        modeButtons[index].style.background = "rgb(197, 43, 40)"
+        modeButtons[index].style.color = "white"
+        mode = index
+    }
+
+    function getAddress(g) {
+        if (g!=undefined) {
+            let location = [g.country,g.state,g.town].filter(x => x!=null)
+            return location.map(x => locale=="en" ? x : translate($content,x)).join(", ")
+        }
+        else {
+            return "Create or join trade-union"
+        }
+    }
+
+    function onLoaded() {
+        if ($loaded==3) {
+            chooseButton(mode)
+            if (mode==2 || mode==3) {
+                addressInput.value = getAddress(userGroups[0])
+            }
+        }
+        else {
+            let f = () => onLoaded()
+            setTimeout(f, 100)
+        }
+    }
+    
+    onMount(() => { 
+        onLoaded()
+    })
+</script>
+
+{#key $loaded}
+    {#if $loaded==3}
+        <div id="container">
+            <button class="close-button" on:click={closeGroupsAdd}></button>
+            <!--<img src="img/crowd.png" id="crowd" alt="crowd">-->
+            <div id="text-container">
+                {#if !has_group}
+                <div bind:this={buttonsNotGroupMember} id="button-line">
+                    <button bind:this={modeButtons[0]} on:click={() => chooseButton(0)}>Create</button>
+                    <button bind:this={modeButtons[1]} on:click={() => chooseButton(1)}>Join</button>
+                </div>
+                {:else if has_group && !pendingGroup}
+                <div bind:this={buttonsGroupMember} id="button-line">
+                    <button bind:this={modeButtons[2]} on:click={() => chooseButton(2)} style={"display: " + (pendingGroup ? "none" : "initial")}>Move</button>
+                    <button bind:this={modeButtons[3]} on:click={() => chooseButton(3)}>Leave</button>
+                </div>
+                {:else}
+                <div bind:this={buttonsGroupMember} id="button-line">
+                    <button bind:this={modeButtons[3]} on:click={() => chooseButton(3)}>Leave</button>
+                </div>
+                {/if}
+                <div id="address-input-wrapper" class="input-label-wrapper">
+                    <label for="address-input">Location: </label>
+                    <div class="input-wrapper">
+                        <input bind:this={addressInput} on:input={() => resizeInput(addressInput)} id="address-input" type="text" readonly>
+                        <div class="ghost-input"></div>
+                    </div>
+                </div>
+                {#key mode}
+                    {#if mode==0}
+                        <div id="members-input-wrapper" class="input-label-wrapper">
+                            <label for="members-input">Members: </label>
+                            <div class="input-wrapper">
+                                <input bind:this={membersInput} id="members-input" type="number" value={1} on:input={(event) => validatePosNumber(event,membersInput,10000)}>
+                            </div>
+                        </div>
+                    {/if}
+                    {#if mode==0 || mode==1}
+                        <div class="input-label-wrapper">
+                            <label for="contact-input">Contact: </label>
+                            <div class="input-wrapper">
+                                <input bind:this={contactInput} on:input={() => resizeInput(contactInput)} id="contact-input" type="text">
+                                <div class="ghost-input"></div>
+                            </div>
+                        </div>
+                    {/if}
+                {/key}
+                <button id="submit-button" on:click={submitLocation}>Submit</button>
+                <p id="confirmation-msg" bind:this={confirmationMsg}></p>
+                {#if !(has_group && pendingGroup)}
+                    <map-component id="map" callback={(createMap) => mapCallback(createMap,$content,locale)}></map-component>
+                {/if}
+            </div>
+        </div>
+    {/if}
+{/key}
+
+<style>
+    @import '/css/common.css';
+
+    #button-line {
+        position: relative;
+        width: fit-content;
+        margin: auto;
+        margin-top: 1.5rem;
+    }
+
+    #button-line button{
+        font-family: var(--sans-serif,sans-serif);
+        font-size: 1.15rem;
+        padding: 1rem 0;
+        width: 7rem;
+    }
+
+    #button-line :first-child {
+        border-top-left-radius: 1rem;
+        border-bottom-left-radius: 1rem;
+        margin-right: 0.1rem;
+    }
+
+    #button-line :last-child {
+        margin-left: 0.1rem;
+        border-top-right-radius: 1rem;
+        border-bottom-right-radius: 1rem;
+    }
+
+    .close-button {
+        position: absolute;
+        top: 2rem;
+        right: 0rem;
+        width: 2rem;
+        height: 2rem;
+        border: none;
+        cursor: pointer;
+        z-index: 2;
+    }
+
+    .close-button:hover {
+        opacity: 0.7;
+    }
+
+    .close-button::before,
+    .close-button::after {
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 0.2rem;
+        height: 2rem;
+        background-color: #000;
+        border-radius: 1rem;
+        }
+
+    .close-button::before {
+        transform: translate(-50%, -50%) rotate(45deg);
+    }
+
+    .close-button::after {
+        transform: translate(-50%, -50%) rotate(-45deg);
+    }
+    
+
+    #confirmation-msg {
+        margin-top: 0.5rem;
+        margin-bottom: 2rem;
+    }
+
+    ol li {
+        margin-left: 1rem;
+        margin-bottom: 0.5rem;
+    }
+
+    label {
+        display: inline-block;
+        font-family: var(--serif,serif);
+        font-size: 1.15rem;
+        line-height: 160%;
+        color: #222222;
+        width: 6rem;
+    }
+
+    input, .ghost-input {
+        font-size: 1.15rem;
+        font-family: var(--serif,serif);
+    }
+
+    input {
+        height: 2.5rem;
+        display: inline-block;
+        position: relative;
+    }
+
+    #address-input, #contact-input {
+        width: 100%;
+    }
+
+    #address-input-wrapper {
+        margin-top: 2rem;
+        margin-bottom: 1rem;
+    }
+
+    #members-input-wrapper {
+        margin-bottom: 1rem;
+    }
+
+    #members-input {
+        width: 5rem;
+    }
+
+    .ghost-input {
+        display: block;
+        visibility: hidden;
+        height: 0;
+        
+        padding-left: 0.5rem;
+        padding-right: 0.5rem;
+    }
+
+    .input-wrapper {
+        display: inline-block;
+        max-width: calc(100% - 5.5rem);
+        min-width: min(20rem, calc(100% - 5.5rem));
+        height: 2.5rem;
+    }
+
+    .input-label-wrapper {
+        display: flex;
+        justify-content: start;
+    }
+
+    .input-label-wrapper label {
+        position: relative;
+        top: 0.3rem;
+    }
+
+    .description {
+        margin-bottom: 1rem;
+    }
+
+    #submit-button {
+        display: block;
+        margin: auto;
+        margin-top: 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;
+    }
+
+
+    #map {
+        --height: 30rem;
+        --width: 100%;
+        --margin-top: 2rem;
+        --margin-bottom: 0.5rem;
+    }
+
+    #text-container {
+        position: relative;
+        max-width: calc(100vw - 4rem);
+        margin: auto;
+    }
+
+    #container {
+        margin: auto;
+        max-width: 800px;
+        margin-top: 1rem;
+        margin-bottom: 4rem;
+    }
+
+    #container p {
+        text-align: justify;
+    }
+
+</style>
--- a/Server/app/svelte/src/trade-unions-component.svelte
+++ b/Server/app/svelte/src/trade-unions-component.svelte
@@ -0,0 +1,178 @@
+<svelte:options tag="trade-unions-component" />
+
+<script>
+    // Import statements
+    import { onMount } from 'svelte'
+    import { writable } from 'svelte/store';
+    import { loadLocaleContent, getData} from "/js/libraries/serverTools.js"
+    import { addMarkersEntries, translate } from "/js/libraries/mapTools.js"
+    import { addTradeUnionPinContent } from "/js/mapFuncs.js"
+    
+    // Import components
+    import "/js/components/map-component.js" 
+    
+    // Main code
+    let loaded = writable(0)
+    let content = writable({})
+    let entries
+    let entriesByCountry
+
+    let locale = loadLocaleContent(content,"trade-unions-component",loaded)
+    loadLocaleContent(content,"countries",loaded)
+
+    let callback = (response) => {
+        entries = JSON.parse(response)
+        entriesByCountry = {}
+        for (let g of entries) {
+            let country = g.country
+            if (g.contact==null) {
+                g.contact = "https://discord.gg/Qk8KUk787z"
+            }
+            if (country in entriesByCountry) {
+                entriesByCountry[country].push(g)
+            }
+            else {
+                entriesByCountry[country] = [g]
+            }
+        }
+        loaded.update((val) => {
+            return val + 1
+        })
+    }
+    getData("/assets/trade-unions.json",callback)
+
+    function mapCallback(createMap,content,locale) {
+        let map = createMap([22, 0],2)
+        let options = {
+            enableCountryGrouping: true,
+        }
+        addMarkersEntries(entries,entriesByCountry,map,content,locale,addTradeUnionPinContent,"violet",options)
+    }
+
+    function getCountry(x) {
+        return locale=="en" ? x : translate($content,x)
+    }
+
+    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(() => { 
+
+    })
+</script>
+
+{#key $loaded}
+    {#if $loaded==3}
+        <div id="container">
+            <!--<img src="img/crowd.png" id="crowd" alt="crowd">-->
+            <div id="text-container">
+                <h1>{$content.tradeUnions}</h1>
+                <img id="trade-unions-img" src="/img/common/trade-unions.svg" alt="trade unions">
+                <p class="description">{$content.p1}</p>
+                <h3>{$content.subheading1}</h3>
+                <map-component id="map" callback={(createMap) => mapCallback(createMap,$content,locale)}></map-component>
+                <p id="add-prompt">{$content["map-prompt"]}</p>
+                {#each Object.entries(entriesByCountry) as [name,entries]}
+                    <h4 class="country-name">{getCountry(name)}</h4>
+                    <div class="country-block">
+                        {#each entries as entry}
+                            <div class="location-info">
+                                <p><b>{$content.name}: </b>{entry.name}</p>
+                                <p><b>{$content.location}: </b>{getAddress(entry)}</p>
+                                <p><b>{$content.members}: </b>{entry.members}</p>
+                                {#if entry.contact.includes("@") && entry.contact.trim().split(" ").length==1}
+                                    <p><b>{$content.contact}: </b><a href={"mailto:" + entry.contact} target=;_blank; rel=noreferrer>{entry.contact}</a></p>
+                                {:else if entry.contact.includes("http")}
+                                    <p><b>{$content.contact}: </b><a href={entry.contact} target=;_blank; rel=noreferrer>{entry.contact}</a></p>
+                                {:else}
+                                    <p><b>{$content.contact}: </b>{entry.contact}</p>
+                                {/if}
+                            </div>
+                        {/each}
+                    </div>
+                {/each}
+            </div>
+        </div>
+    {/if}
+{/key}
+
+<style>
+    @import '/css/common.css';
+
+    .description {
+        margin-bottom: 1rem;
+    }
+
+    #add-prompt {
+        margin-bottom: 2rem;
+    }
+
+    #trade-unions-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>