Moved all entries to db
This commit is contained in:
a-ill
415
Server/app/svelte/src/communes-add-component.svelte
Normal file
415
Server/app/svelte/src/communes-add-component.svelte
Normal file
@@ -0,0 +1,415 @@
|
||||
<svelte:options tag="communes-add-component" />
|
||||
|
||||
<script>
|
||||
// Import statements
|
||||
import { onMount } 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 components
|
||||
import "/js/components/map-component.js"
|
||||
import "/js/components/select-component.js"
|
||||
|
||||
// Main code
|
||||
let loaded = writable(0)
|
||||
let content = writable({})
|
||||
let entries
|
||||
let entriesByCountry
|
||||
|
||||
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/communes.json",callback)
|
||||
|
||||
|
||||
let confirmationMsg
|
||||
let addressInput
|
||||
let contactInput
|
||||
let statusInput
|
||||
let addressVec
|
||||
let userPinLat = 0
|
||||
let userPinLng = 0
|
||||
let userPin = createPin(0,0)
|
||||
userPin.setOpacity(0)
|
||||
|
||||
let locale = loadLocaleContent(content,"communes-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
|
||||
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["Group"]+"</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) {
|
||||
let map = createMap([22, 0],2)
|
||||
addMarkersEntries(entries,entriesByCountry,map,content,locale,addGroupPinContent,"green")
|
||||
|
||||
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)
|
||||
reverseGeocodeLocal(lat, lng)
|
||||
reverseGeocode(lat, lng)
|
||||
})
|
||||
}
|
||||
|
||||
function updateConfirmationMsg(response) {
|
||||
if (response!==false) {
|
||||
|
||||
confirmationMsg.innerHTML = "You have been added to our database! Now go to our Discord to verify yourself."
|
||||
confirmationMsg.style.color = "green"
|
||||
}
|
||||
else {
|
||||
confirmationMsg.innerHTML = "Something went wrong."
|
||||
confirmationMsg.style.color = "red"
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function submitLocation() {
|
||||
if (addressVec!=undefined) {
|
||||
let data = {
|
||||
country: addressVec[0],
|
||||
state: addressVec[1],
|
||||
town: addressVec[2],
|
||||
latitude: userPinLat,
|
||||
longitude: userPinLng,
|
||||
contact: contactInput.value,
|
||||
status: statusInput.value
|
||||
}
|
||||
|
||||
if (data.state=="") {
|
||||
data.state = null
|
||||
}
|
||||
if (data.town=="") {
|
||||
data.town = null
|
||||
}
|
||||
if (data.contact=="") {
|
||||
data.contact = null
|
||||
}
|
||||
let url = "/" + locale + "/communes-add-post/"
|
||||
sendData(url,data,updateConfirmationMsg)
|
||||
}
|
||||
}
|
||||
|
||||
function resizeInput(el) {
|
||||
el.nextElementSibling.innerHTML = el.value
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
|
||||
})
|
||||
</script>
|
||||
|
||||
{#key $loaded}
|
||||
{#if $loaded==3}
|
||||
<div id="container">
|
||||
<!--<img src="img/crowd.png" id="crowd" alt="crowd">-->
|
||||
<div id="text-container">
|
||||
<h1>Add a Commune</h1>
|
||||
<img id="communes-img" src="/img/common/communes.svg" alt="communes">
|
||||
<p class="description">If there are no communes near you who you can join and you want to start your own then do the following:</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;</li>
|
||||
<li>Press "Submit" to add yourself to our map;</li>
|
||||
<li>Verify yourself by having a chat with us at our Discord server to show on the map;</li>
|
||||
</ol>
|
||||
<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>
|
||||
<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>
|
||||
<div id="status-input-wrapper" class="input-label-wrapper">
|
||||
<label for="contact-input">Status: </label>
|
||||
<div class="input-wrapper">
|
||||
<select-component bind:this={statusInput} id="status-input" options={["forming","growing","not growing"]}></select-component>
|
||||
<div class="ghost-input"></div>
|
||||
</div>
|
||||
</div>
|
||||
<button id="submit-button" on:click={submitLocation}>Submit</button>
|
||||
<p id="confirmation-msg" bind:this={confirmationMsg}></p>
|
||||
<map-component id="map" callback={(createMap) => mapCallback(createMap,$content,locale)}></map-component>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/key}
|
||||
|
||||
<style>
|
||||
@import '/css/common.css';
|
||||
|
||||
#confirmation-msg {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
ol li {
|
||||
margin-left: 3rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
font-family: var(--serif,serif);
|
||||
font-size: 1.15rem;
|
||||
line-height: 160%;
|
||||
color: #222222;
|
||||
width: 5.5rem;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
#status-input {
|
||||
--width: 100%;
|
||||
--height: 2.5rem;
|
||||
--display: inline-block;
|
||||
--position: relative;
|
||||
--background-color: white;
|
||||
--border-radius: 0.4rem;
|
||||
--border: black solid 0.063rem;
|
||||
--padding-left: 0.5rem;
|
||||
--font-size: 1.15rem;
|
||||
--font-family: var(--serif, serif);
|
||||
}
|
||||
|
||||
#status-input-wrapper {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
#communes-img {
|
||||
position: absolute;
|
||||
width: 11.5rem;
|
||||
left: 50%;
|
||||
transform: translate(-50%);
|
||||
z-index: 0;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
#text-container>:nth-child(3) {
|
||||
margin-top: 8rem;
|
||||
}
|
||||
|
||||
#map {
|
||||
--height: 30rem;
|
||||
--width: 100%;
|
||||
--margin-top: 2rem;
|
||||
--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;
|
||||
}
|
||||
|
||||
#container {
|
||||
margin: auto;
|
||||
max-width: 800px;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
#container p {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -3,31 +3,56 @@
|
||||
<script>
|
||||
// Import statements
|
||||
import { onMount } from 'svelte'
|
||||
import { writable } from 'svelte/store';
|
||||
import { communesByCountry, addMarkersCommunes } from '/js/communes.js'
|
||||
import { loadLocaleContent } from "/js/libraries/serverTools.js"
|
||||
|
||||
import { writable } from 'svelte/store'
|
||||
import { loadLocaleContent, getData} from "/js/libraries/serverTools.js"
|
||||
import { addMarkersEntries, translate } from "/js/libraries/mapTools.js"
|
||||
import { addCommunePinContent } 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
|
||||
|
||||
loadLocaleContent(content,"countries",loaded)
|
||||
let locale = loadLocaleContent(content,"communes-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/communes.json",callback)
|
||||
|
||||
function mapCallbackCommunes(createMap,content,locale) {
|
||||
function mapCallback(createMap,content,locale) {
|
||||
let map = createMap([22, 0],2)
|
||||
addMarkersCommunes(map,content,locale)
|
||||
addMarkersEntries(entries,entriesByCountry,map,content,locale,addCommunePinContent,"red")
|
||||
}
|
||||
|
||||
function getCountry(name) {
|
||||
return locale=="en" ? name : $content[name]
|
||||
function getCountry(x) {
|
||||
return locale=="en" ? x : translate($content,x)
|
||||
}
|
||||
|
||||
function getAddress(group) {
|
||||
return group.location[0].map(x => locale=="en" ? x : $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,25 +61,27 @@
|
||||
</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">
|
||||
<h1>{$content.communes}</h1>
|
||||
<img id="commune-img" src="/img/common/commune.svg" alt="commune">
|
||||
<img id="communes-img" src="/img/common/communes.svg" alt="commune">
|
||||
<p class="description">{$content.p1}</p>
|
||||
<h3>{$content.subheading1}</h3>
|
||||
<map-component id="map" callback={(createMap) => mapCallbackCommunes(createMap,$content,locale)}></map-component>
|
||||
<map-component id="map" callback={(createMap) => mapCallback(createMap,$content,locale)}></map-component>
|
||||
<p id="add-prompt">{$content["map-prompt"]}</p>
|
||||
{#each Object.entries(communesByCountry) as [name,communes]}
|
||||
{#each Object.entries(entriesByCountry) as [name,entries]}
|
||||
<h4 class="country-name">{getCountry(name)}</h4>
|
||||
<div class="country-block">
|
||||
{#each communes as commune}
|
||||
{#each entries as entry}
|
||||
|
||||
<div class="location-info">
|
||||
<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>
|
||||
<p><b>{$content.location}: </b>{getAddress(entry)}</p>
|
||||
<p><b>{$content.status}: </b>{$content[entry.status]}</p>
|
||||
<p><b>{$content.members}: </b>{entry.members}</p>
|
||||
<p><b>{$content.contact}: </b><a href={entry.contact} target=;_blank; rel=noreferrer>{entry.contact}</a></p>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
@@ -75,7 +102,7 @@
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
#commune-img {
|
||||
#communes-img {
|
||||
position: absolute;
|
||||
width: 11.5rem;
|
||||
left: 50%;
|
||||
|
||||
@@ -50,6 +50,8 @@
|
||||
width: var(--width,100%);
|
||||
margin-top: var(--margin-top,0);
|
||||
margin-bottom: var(--margin-bottom,0);
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -194,6 +194,7 @@
|
||||
.select span {
|
||||
position: relative;
|
||||
padding-top: 0.5rem;
|
||||
padding-left: 0.3rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
||||
413
Server/app/svelte/src/cooperatives-add-component.svelte
Normal file
413
Server/app/svelte/src/cooperatives-add-component.svelte
Normal file
@@ -0,0 +1,413 @@
|
||||
<svelte:options tag="cooperatives-add-component" />
|
||||
|
||||
<script>
|
||||
// Import statements
|
||||
import { onMount } 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 components
|
||||
import "/js/components/map-component.js"
|
||||
|
||||
// Main code
|
||||
let loaded = writable(0)
|
||||
let content = writable({})
|
||||
let entries
|
||||
let entriesByCountry
|
||||
|
||||
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/groups.json",callback)
|
||||
|
||||
|
||||
let confirmationMsg
|
||||
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 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
|
||||
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["Group"]+"</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) {
|
||||
let map = createMap([22, 0],2)
|
||||
addMarkersEntries(entries,entriesByCountry,map,content,locale,addGroupPinContent,"green")
|
||||
|
||||
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)
|
||||
reverseGeocodeLocal(lat, lng)
|
||||
reverseGeocode(lat, lng)
|
||||
})
|
||||
}
|
||||
|
||||
function updateConfirmationMsg(response) {
|
||||
if (response!==false) {
|
||||
|
||||
confirmationMsg.innerHTML = "You have been added to our database! Now go to our Discord to verify yourself."
|
||||
confirmationMsg.style.color = "green"
|
||||
}
|
||||
else {
|
||||
confirmationMsg.innerHTML = "Something went wrong."
|
||||
confirmationMsg.style.color = "red"
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function submitLocation() {
|
||||
if (addressVec!=undefined) {
|
||||
let data = {
|
||||
country: addressVec[0],
|
||||
state: addressVec[1],
|
||||
town: addressVec[2],
|
||||
latitude: userPinLat,
|
||||
longitude: userPinLng,
|
||||
contact: contactInput.value
|
||||
}
|
||||
|
||||
if (data.state=="") {
|
||||
data.state = null
|
||||
}
|
||||
if (data.town=="") {
|
||||
data.town = null
|
||||
}
|
||||
if (data.contact=="") {
|
||||
data.contact = null
|
||||
}
|
||||
let url = "/" + locale + "/groups-add-post/"
|
||||
sendData(url,data,updateConfirmationMsg)
|
||||
}
|
||||
}
|
||||
|
||||
function resizeInput(el) {
|
||||
el.nextElementSibling.innerHTML = el.value
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
|
||||
})
|
||||
</script>
|
||||
|
||||
{#key $loaded}
|
||||
{#if $loaded==3}
|
||||
<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 do the following:</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;</li>
|
||||
<li>Press "Submit" to add yourself to our map;</li>
|
||||
<li>Verify yourself by having a chat with us at our Discord server to show on the map;</li>
|
||||
</ol>
|
||||
<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>
|
||||
<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>
|
||||
<button id="submit-button" on:click={submitLocation}>Submit</button>
|
||||
<p id="confirmation-msg" bind:this={confirmationMsg}></p>
|
||||
<map-component id="map" callback={(createMap) => mapCallback(createMap,$content,locale)}></map-component>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/key}
|
||||
|
||||
<style>
|
||||
@import '/css/common.css';
|
||||
|
||||
#confirmation-msg {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
ol li {
|
||||
margin-left: 3rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
font-family: var(--serif,serif);
|
||||
font-size: 1.15rem;
|
||||
line-height: 160%;
|
||||
color: #222222;
|
||||
width: 5.5rem;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
#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-top: 2rem;
|
||||
--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>
|
||||
@@ -4,8 +4,9 @@
|
||||
// Import statements
|
||||
import { onMount } from 'svelte'
|
||||
import { writable } from 'svelte/store';
|
||||
import { coopsByCountry, addMarkersCoops } from '/js/coops.js'
|
||||
import { loadLocaleContent } from "/js/libraries/serverTools.js"
|
||||
import { loadLocaleContent, getData} from "/js/libraries/serverTools.js"
|
||||
import { addMarkersEntries, translate } from "/js/libraries/mapTools.js"
|
||||
import { addCoopPinContent } from "/js/mapFuncs.js"
|
||||
|
||||
// Import components
|
||||
import "/js/components/map-component.js"
|
||||
@@ -13,21 +14,45 @@
|
||||
// Main code
|
||||
let loaded = writable(0)
|
||||
let content = writable({})
|
||||
let entries
|
||||
let entriesByCountry
|
||||
|
||||
let locale = loadLocaleContent(content,"countries",loaded)
|
||||
loadLocaleContent(content,"cooperatives-component",loaded)
|
||||
let locale = loadLocaleContent(content,"cooperatives-component",loaded)
|
||||
loadLocaleContent(content,"countries",loaded)
|
||||
|
||||
function mapCallbackCoops(createMap,content) {
|
||||
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/cooperatives.json",callback)
|
||||
|
||||
function mapCallback(createMap,content,locale) {
|
||||
let map = createMap([22, 0],2)
|
||||
addMarkersCoops(map,content,locale)
|
||||
addMarkersEntries(entries,entriesByCountry,map,content,locale,addCoopPinContent,"blue")
|
||||
}
|
||||
|
||||
function getCountry(name) {
|
||||
return locale=="en" ? name : $content[name]
|
||||
function getCountry(x) {
|
||||
return locale=="en" ? x : translate($content,x)
|
||||
}
|
||||
|
||||
function getAddress(group) {
|
||||
return group.location[0].map(x => locale=="en" ? x : $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,37 +61,38 @@
|
||||
</script>
|
||||
|
||||
{#key $loaded}
|
||||
{#if $loaded==2}
|
||||
{#if $loaded==3}
|
||||
<div id="container">
|
||||
<div id="text-container">
|
||||
<h1>{$content.cooperatives}</h1>
|
||||
<img id="coops-img" src="/img/common/coops.svg" alt="coops">
|
||||
<p class="description">{$content.p1}</p>
|
||||
<h3>{$content.subheading1}</h3>
|
||||
<map-component id="map" callback={(createMap) => mapCallbackCoops(createMap,$content,locale)}></map-component>
|
||||
<map-component id="map" callback={(createMap) => mapCallback(createMap,$content,locale)}></map-component>
|
||||
<p id="add-prompt">{$content["map-prompt"]}</p>
|
||||
{#each Object.entries(coopsByCountry) as [name,coops]}
|
||||
{#each Object.entries(entriesByCountry) as [name,entries]}
|
||||
<h4 class="country-name">{getCountry(name)}</h4>
|
||||
<div class="country-block">
|
||||
{#each coops as coop}
|
||||
{#each entries as entry}
|
||||
{console.log(entry)}
|
||||
<div class="location-info">
|
||||
<div class="img-general-info">
|
||||
<div>
|
||||
<p><b>{$content.name}: </b>{coop.name}</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>
|
||||
<p><b>{$content.website}: </b><a href={coop.website[0]} target="_blank" rel=noreferrer>{coop.website[1]}</a></p>
|
||||
<p><b>{$content.contact}: </b><a href={coop.contact[0]} target=;_blank; rel=noreferrer>{$content[coop.contact[1]]}</a></p>
|
||||
<p><b>{$content.name}: </b>{entry.name}</p>
|
||||
<p><b>{$content.location}: </b>{getAddress(entry)}</p>
|
||||
<p><b>{$content.market}: </b>{entry.market}</p>
|
||||
<p><b>{$content.workers}: </b>{entry.workers}</p>
|
||||
<p><b>{$content.status}: </b>{entry.status}</p>
|
||||
<p><b>{$content.website}: </b><a href={entry.website} target="_blank" rel=noreferrer>{entry.website}</a></p>
|
||||
<p><b>{$content.contact}: </b><a href={entry.contact} target=;_blank; rel=noreferrer>{entry.contact}</a></p>
|
||||
</div>
|
||||
<picture>
|
||||
<source srcset={"/img/coops/"+coop.logo+".webp"}>
|
||||
<source srcset={"/img/coops/"+coop.logo+".png"}>
|
||||
<source srcset={"/img/coops/"+entry.logo+".webp"}>
|
||||
<source srcset={"/img/coops/"+entry.logo+".png"}>
|
||||
<img class="coop-logo" alt="logo">
|
||||
</picture>
|
||||
</div>
|
||||
<p><b>{$content.description}: </b>{$content[coop.description]}</p>
|
||||
<p><b>{$content.description}: </b>{entry.description}</p>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
@@ -4,8 +4,8 @@
|
||||
// Import statements
|
||||
import { onMount } from 'svelte'
|
||||
import { writable } from 'svelte/store';
|
||||
import { addMarkersGroups, translate } from '/js/groups.js'
|
||||
import { loadLocaleContent, getData, sendData } from "/js/libraries/serverTools.js"
|
||||
import { addMarkersEntries, translate } from "/js/libraries/mapTools.js"
|
||||
|
||||
// Import components
|
||||
import "/js/components/map-component.js"
|
||||
@@ -13,22 +13,22 @@
|
||||
// Main code
|
||||
let loaded = writable(0)
|
||||
let content = writable({})
|
||||
let groups
|
||||
let groupsByCountry
|
||||
let entries
|
||||
let entriesByCountry
|
||||
|
||||
let callback = (response) => {
|
||||
groups = JSON.parse(response)
|
||||
groupsByCountry = {}
|
||||
for (let g of groups) {
|
||||
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 groupsByCountry) {
|
||||
groupsByCountry[country].push(g)
|
||||
if (country in entriesByCountry) {
|
||||
entriesByCountry[country].push(g)
|
||||
}
|
||||
else {
|
||||
groupsByCountry[country] = [g]
|
||||
entriesByCountry[country] = [g]
|
||||
}
|
||||
}
|
||||
loaded.update((val) => {
|
||||
@@ -126,9 +126,37 @@
|
||||
getData(url,callback)
|
||||
}
|
||||
|
||||
function mapCallbackGroups(createMap,content,locale) {
|
||||
function addGroupPinContent(g,content,locale) {
|
||||
let coordinates
|
||||
let text = "<b>"+content["Group"]+"</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) {
|
||||
let map = createMap([22, 0],2)
|
||||
addMarkersGroups(groups,groupsByCountry,map,content,locale)
|
||||
addMarkersEntries(entries,entriesByCountry,map,content,locale,addGroupPinContent,"green")
|
||||
|
||||
userPin.addTo(map)
|
||||
map.on('click', function(event) {
|
||||
@@ -220,7 +248,7 @@
|
||||
</div>
|
||||
<button id="submit-button" on:click={submitLocation}>Submit</button>
|
||||
<p id="confirmation-msg" bind:this={confirmationMsg}></p>
|
||||
<map-component id="map" callback={(createMap) => mapCallbackGroups(createMap,$content,locale)}></map-component>
|
||||
<map-component id="map" callback={(createMap) => mapCallback(createMap,$content,locale)}></map-component>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -4,8 +4,9 @@
|
||||
// Import statements
|
||||
import { onMount } from 'svelte'
|
||||
import { writable } from 'svelte/store';
|
||||
import { addMarkersGroups, translate } from '/js/groups.js'
|
||||
import { loadLocaleContent, getData, sendData } from "/js/libraries/serverTools.js"
|
||||
import { loadLocaleContent, getData} from "/js/libraries/serverTools.js"
|
||||
import { addMarkersEntries, translate } from "/js/libraries/mapTools.js"
|
||||
import { addGroupPinContent } from "/js/mapFuncs.js"
|
||||
|
||||
// Import components
|
||||
import "/js/components/map-component.js"
|
||||
@@ -13,25 +14,25 @@
|
||||
// Main code
|
||||
let loaded = writable(0)
|
||||
let content = writable({})
|
||||
let groups
|
||||
let groupsByCountry
|
||||
let entries
|
||||
let entriesByCountry
|
||||
|
||||
let locale = loadLocaleContent(content,"groups-component",loaded)
|
||||
loadLocaleContent(content,"countries",loaded)
|
||||
|
||||
let callback = (response) => {
|
||||
groups = JSON.parse(response)
|
||||
groupsByCountry = {}
|
||||
for (let g of groups) {
|
||||
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 groupsByCountry) {
|
||||
groupsByCountry[country].push(g)
|
||||
if (country in entriesByCountry) {
|
||||
entriesByCountry[country].push(g)
|
||||
}
|
||||
else {
|
||||
groupsByCountry[country] = [g]
|
||||
entriesByCountry[country] = [g]
|
||||
}
|
||||
}
|
||||
loaded.update((val) => {
|
||||
@@ -40,9 +41,9 @@
|
||||
}
|
||||
getData("/assets/groups.json",callback)
|
||||
|
||||
function mapCallbackGroups(createMap,content,locale) {
|
||||
function mapCallback(createMap,content,locale) {
|
||||
let map = createMap([22, 0],2)
|
||||
addMarkersGroups(groups,groupsByCountry,map,content,locale)
|
||||
addMarkersEntries(entries,entriesByCountry,map,content,locale,addGroupPinContent,"green")
|
||||
}
|
||||
|
||||
function getCountry(x) {
|
||||
@@ -68,16 +69,16 @@
|
||||
<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,locale)}></map-component>
|
||||
<map-component id="map" callback={(createMap) => mapCallback(createMap,$content,locale)}></map-component>
|
||||
<p id="add-prompt">{$content["map-prompt"]}</p>
|
||||
{#each Object.entries(groupsByCountry) as [name,groups]}
|
||||
{#each Object.entries(entriesByCountry) as [name,entries]}
|
||||
<h4 class="country-name">{getCountry(name)}</h4>
|
||||
<div class="country-block">
|
||||
{#each groups as group}
|
||||
{#each entries as entry}
|
||||
<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} target=;_blank; rel=noreferrer>{group.contact}</a></p>
|
||||
<p><b>{$content.location}: </b>{getAddress(entry)}</p>
|
||||
<p><b>{$content.members}: </b>{entry.members}</p>
|
||||
<p><b>{$content.contact}: </b><a href={entry.contact} target=;_blank; rel=noreferrer>{entry.contact}</a></p>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
@@ -4,11 +4,9 @@
|
||||
// Import statements
|
||||
import { onMount } from 'svelte'
|
||||
import { writable } from 'svelte/store';
|
||||
import { addMarkersGroups, groupsMarkersLayer } from '/js/groups.js'
|
||||
import { addMarkersCoops, coopsMarkersLayer } from '/js/coops.js'
|
||||
import { addMarkersCommunes, communesMarkersLayer } from '/js/communes.js'
|
||||
import { addMarkersParties, partiesMarkersLayer } from '/js/parties.js'
|
||||
import { loadLocaleContent, getData } from "/js/libraries/serverTools.js"
|
||||
import { addMarkersEntries, translate } from "/js/libraries/mapTools.js"
|
||||
import { addGroupPinContent, addCommunePinContent, addCoopPinContent, addPartyPinContent } from "/js/mapFuncs.js"
|
||||
|
||||
// Import components
|
||||
import "/js/components/map-component.js"
|
||||
@@ -16,8 +14,8 @@
|
||||
// Main code
|
||||
let loaded = writable(0)
|
||||
let content = writable({})
|
||||
let groups
|
||||
let groupsByCountry
|
||||
let entries = {}
|
||||
let entriesByCountry ={}
|
||||
|
||||
loadLocaleContent(content,"groups-component",loaded)
|
||||
loadLocaleContent(content,"communes-component",loaded)
|
||||
@@ -27,40 +25,42 @@
|
||||
let locale = loadLocaleContent(content,"join-us-component",loaded)
|
||||
|
||||
|
||||
let callback = (response) => {
|
||||
groups = JSON.parse(response)
|
||||
groupsByCountry = {}
|
||||
for (let g of groups) {
|
||||
let callback = (response,name) => {
|
||||
entries[name] = JSON.parse(response)
|
||||
entriesByCountry[name] = {}
|
||||
for (let g of entries[name]) {
|
||||
let country = g.country
|
||||
if (g.contact==null) {
|
||||
g.contact = "https://discord.gg/Qk8KUk787z"
|
||||
}
|
||||
if (country in groupsByCountry) {
|
||||
groupsByCountry[country].push(g)
|
||||
if (country in entriesByCountry[name]) {
|
||||
entriesByCountry[name][country].push(g)
|
||||
}
|
||||
else {
|
||||
groupsByCountry[country] = [g]
|
||||
entriesByCountry[name][country] = [g]
|
||||
}
|
||||
}
|
||||
loaded.update((val) => {
|
||||
return val + 1
|
||||
})
|
||||
}
|
||||
getData("/assets/groups.json",callback)
|
||||
getData("/assets/groups.json",(response) => callback(response,"groups"))
|
||||
getData("/assets/communes.json",(response) => callback(response,"communes"))
|
||||
getData("/assets/cooperatives.json",(response) => callback(response,"cooperatives"))
|
||||
getData("/assets/parties.json",(response) => callback(response,"parties"))
|
||||
|
||||
function mapCallback(createMap,content,locale) {
|
||||
let map = createMap([22, 0],2)
|
||||
addMarkersGroups(groups,groupsByCountry,map,content,locale)
|
||||
addMarkersCommunes(map,content,locale)
|
||||
addMarkersCoops(map,content,locale)
|
||||
addMarkersParties(map,content,locale)
|
||||
let groupsMarkersLayer = addMarkersEntries(entries["groups"],entriesByCountry["groups"],map,content,locale,addGroupPinContent,"green")
|
||||
let communesMarkersLayer = addMarkersEntries(entries["communes"],entriesByCountry["communes"],map,content,locale,addCommunePinContent,"red")
|
||||
let coopsMarkersLayer = addMarkersEntries(entries["cooperatives"],entriesByCountry["cooperatives"],map,content,locale,addCoopPinContent,"blue")
|
||||
let partiesMarkersLayer = addMarkersEntries(entries["parties"],entriesByCountry["parties"],map,content,locale,addPartyPinContent,"gold")
|
||||
|
||||
let overlayMaps = {
|
||||
"Groups": groupsMarkersLayer,
|
||||
"Communes": communesMarkersLayer,
|
||||
"Coops": coopsMarkersLayer,
|
||||
"Parties": partiesMarkersLayer,
|
||||
}
|
||||
let overlayMaps = {}
|
||||
overlayMaps[content.groups] = groupsMarkersLayer
|
||||
overlayMaps[content.communes] = communesMarkersLayer
|
||||
overlayMaps[content.cooperatives] = coopsMarkersLayer
|
||||
overlayMaps[content.parties] = partiesMarkersLayer
|
||||
L.control.layers(null, overlayMaps).addTo(map)
|
||||
}
|
||||
|
||||
@@ -70,7 +70,7 @@
|
||||
</script>
|
||||
|
||||
{#key $loaded}
|
||||
{#if $loaded==7}
|
||||
{#if $loaded==10}
|
||||
<div id="container">
|
||||
<div id="text-container">
|
||||
<h1>{$content.heading}</h1>
|
||||
@@ -101,7 +101,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,locale)}></map-component>
|
||||
<map-component id="map" callback={(createMap) => mapCallback(createMap,$content,locale)} colors={["#23AC20","#CA2437","#217BC9","#FFD326"]}></map-component>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -4,11 +4,9 @@
|
||||
// Import statements
|
||||
import { onMount } from 'svelte'
|
||||
import { writable } from 'svelte/store';
|
||||
import { addMarkersGroups, groupsMarkersLayer, translate } from '/js/groups.js'
|
||||
import { addMarkersCoops, coopsMarkersLayer } from '/js/coops.js'
|
||||
import { addMarkersCommunes, communesMarkersLayer } from '/js/communes.js'
|
||||
import { addMarkersParties, partiesMarkersLayer } from '/js/parties.js'
|
||||
import { loadLocaleContent, getData } from "/js/libraries/serverTools.js"
|
||||
import { addMarkersEntries, translate } from "/js/libraries/mapTools.js"
|
||||
import { addGroupPinContent, addCommunePinContent, addCoopPinContent, addPartyPinContent } from "/js/mapFuncs.js"
|
||||
|
||||
// Import components
|
||||
import "/js/components/map-component.js"
|
||||
@@ -18,8 +16,8 @@
|
||||
let gridWidth
|
||||
let loaded = writable(0)
|
||||
let content = writable({})
|
||||
let groups
|
||||
let groupsByCountry
|
||||
let entries = {}
|
||||
let entriesByCountry ={}
|
||||
|
||||
function changeWidth(locale) {
|
||||
if (locale=="ru") {
|
||||
@@ -30,26 +28,29 @@
|
||||
}
|
||||
}
|
||||
|
||||
let callback = (response) => {
|
||||
groups = JSON.parse(response)
|
||||
groupsByCountry = {}
|
||||
for (let g of groups) {
|
||||
let callback = (response,name) => {
|
||||
entries[name] = JSON.parse(response)
|
||||
entriesByCountry[name] = {}
|
||||
for (let g of entries[name]) {
|
||||
let country = g.country
|
||||
if (g.contact==null) {
|
||||
g.contact = "https://discord.gg/Qk8KUk787z"
|
||||
}
|
||||
if (country in groupsByCountry) {
|
||||
groupsByCountry[country].push(g)
|
||||
if (country in entriesByCountry[name]) {
|
||||
entriesByCountry[name][country].push(g)
|
||||
}
|
||||
else {
|
||||
groupsByCountry[country] = [g]
|
||||
entriesByCountry[name][country] = [g]
|
||||
}
|
||||
}
|
||||
loaded.update((val) => {
|
||||
return val + 1
|
||||
})
|
||||
}
|
||||
getData("/assets/groups.json",callback)
|
||||
getData("/assets/groups.json",(response) => callback(response,"groups"))
|
||||
getData("/assets/communes.json",(response) => callback(response,"communes"))
|
||||
getData("/assets/cooperatives.json",(response) => callback(response,"cooperatives"))
|
||||
getData("/assets/parties.json",(response) => callback(response,"parties"))
|
||||
|
||||
loadLocaleContent(content,"groups-component",loaded)
|
||||
loadLocaleContent(content,"communes-component",loaded)
|
||||
@@ -61,10 +62,10 @@
|
||||
|
||||
function mapCallback(createMap,content,locale) {
|
||||
let map = createMap([22, 0],2)
|
||||
addMarkersGroups(groups,groupsByCountry,map,content,locale)
|
||||
addMarkersCommunes(map,content,locale)
|
||||
addMarkersCoops(map,content,locale)
|
||||
addMarkersParties(map,content,locale)
|
||||
let groupsMarkersLayer = addMarkersEntries(entries["groups"],entriesByCountry["groups"],map,content,locale,addGroupPinContent,"green")
|
||||
let communesMarkersLayer = addMarkersEntries(entries["communes"],entriesByCountry["communes"],map,content,locale,addCommunePinContent,"red")
|
||||
let coopsMarkersLayer = addMarkersEntries(entries["cooperatives"],entriesByCountry["cooperatives"],map,content,locale,addCoopPinContent,"blue")
|
||||
let partiesMarkersLayer = addMarkersEntries(entries["parties"],entriesByCountry["parties"],map,content,locale,addPartyPinContent,"gold")
|
||||
|
||||
let overlayMaps = {}
|
||||
overlayMaps[content.groups] = groupsMarkersLayer
|
||||
@@ -81,7 +82,7 @@
|
||||
</script>
|
||||
|
||||
{#key $loaded}
|
||||
{#if $loaded==7}
|
||||
{#if $loaded==10}
|
||||
<div id="container">
|
||||
<picture>
|
||||
<source srcset="/img/crowd.webp">
|
||||
@@ -97,9 +98,9 @@
|
||||
<p>{$content.groupsText}</p>
|
||||
</div>
|
||||
<div>
|
||||
<a href={"/" + locale + "/communes"}><h2>{$content.communesTitle}</h2></a>
|
||||
<img id="communes-img" src="/img/common/commune.svg" alt="communes">
|
||||
<p>{$content.communesText}</p>
|
||||
<a href={"/" + locale + "/parties"}><h2>{$content.partiesTitle}</h2></a>
|
||||
<img id="parties-img" src="/img/common/parties.svg" alt="coops">
|
||||
<p>{$content.partiesText}</p>
|
||||
</div>
|
||||
<div>
|
||||
<a href={"/" + locale + "/coops"}><h2>{$content.cooperativesTitle}</h2></a>
|
||||
@@ -107,9 +108,9 @@
|
||||
<p>{$content.cooperativesText}</p>
|
||||
</div>
|
||||
<div>
|
||||
<a href={"/" + locale + "/parties"}><h2>{$content.partiesTitle}</h2></a>
|
||||
<img id="parties-img" src="/img/common/parties.svg" alt="coops">
|
||||
<p>{$content.partiesText}</p>
|
||||
<a href={"/" + locale + "/communes"}><h2>{$content.communesTitle}</h2></a>
|
||||
<img id="communes-img" src="/img/common/communes.svg" alt="communes">
|
||||
<p>{$content.communesText}</p>
|
||||
</div>
|
||||
</div>
|
||||
<!--
|
||||
|
||||
413
Server/app/svelte/src/parties-add-component.svelte
Normal file
413
Server/app/svelte/src/parties-add-component.svelte
Normal file
@@ -0,0 +1,413 @@
|
||||
<svelte:options tag="parties-add-component" />
|
||||
|
||||
<script>
|
||||
// Import statements
|
||||
import { onMount } 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 components
|
||||
import "/js/components/map-component.js"
|
||||
|
||||
// Main code
|
||||
let loaded = writable(0)
|
||||
let content = writable({})
|
||||
let entries
|
||||
let entriesByCountry
|
||||
|
||||
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/parties.json",callback)
|
||||
|
||||
|
||||
let confirmationMsg
|
||||
let addressInput
|
||||
let contactInput
|
||||
let addressVec
|
||||
let userPinLat = 0
|
||||
let userPinLng = 0
|
||||
let userPin = createPin(0,0)
|
||||
userPin.setOpacity(0)
|
||||
|
||||
let locale = loadLocaleContent(content,"parties-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
|
||||
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["Group"]+"</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) {
|
||||
let map = createMap([22, 0],2)
|
||||
addMarkersEntries(entries,entriesByCountry,map,content,locale,addGroupPinContent,"green")
|
||||
|
||||
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)
|
||||
reverseGeocodeLocal(lat, lng)
|
||||
reverseGeocode(lat, lng)
|
||||
})
|
||||
}
|
||||
|
||||
function updateConfirmationMsg(response) {
|
||||
if (response!==false) {
|
||||
|
||||
confirmationMsg.innerHTML = "You have been added to our database! Now go to our Discord to verify yourself."
|
||||
confirmationMsg.style.color = "green"
|
||||
}
|
||||
else {
|
||||
confirmationMsg.innerHTML = "Something went wrong."
|
||||
confirmationMsg.style.color = "red"
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function submitLocation() {
|
||||
if (addressVec!=undefined) {
|
||||
let data = {
|
||||
country: addressVec[0],
|
||||
state: addressVec[1],
|
||||
town: addressVec[2],
|
||||
latitude: userPinLat,
|
||||
longitude: userPinLng,
|
||||
contact: contactInput.value
|
||||
}
|
||||
|
||||
if (data.state=="") {
|
||||
data.state = null
|
||||
}
|
||||
if (data.town=="") {
|
||||
data.town = null
|
||||
}
|
||||
if (data.contact=="") {
|
||||
data.contact = null
|
||||
}
|
||||
let url = "/" + locale + "/parties-add-post/"
|
||||
sendData(url,data,updateConfirmationMsg)
|
||||
}
|
||||
}
|
||||
|
||||
function resizeInput(el) {
|
||||
el.nextElementSibling.innerHTML = el.value
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
|
||||
})
|
||||
</script>
|
||||
|
||||
{#key $loaded}
|
||||
{#if $loaded==3}
|
||||
<div id="container">
|
||||
<!--<img src="img/crowd.png" id="crowd" alt="crowd">-->
|
||||
<div id="text-container">
|
||||
<h1>Add a Party</h1>
|
||||
<img id="parties-img" src="/img/common/parties.svg" alt="parties">
|
||||
<p class="description">If there are no parties in your country which you can join then do the following:</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;</li>
|
||||
<li>Press "Submit" to add yourself to our map;</li>
|
||||
<li>Verify yourself by having a chat with us at our Discord server to show on the map;</li>
|
||||
</ol>
|
||||
<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>
|
||||
<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>
|
||||
<button id="submit-button" on:click={submitLocation}>Submit</button>
|
||||
<p id="confirmation-msg" bind:this={confirmationMsg}></p>
|
||||
<map-component id="map" callback={(createMap) => mapCallback(createMap,$content,locale)}></map-component>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/key}
|
||||
|
||||
<style>
|
||||
@import '/css/common.css';
|
||||
|
||||
#confirmation-msg {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
ol li {
|
||||
margin-left: 3rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
font-family: var(--serif,serif);
|
||||
font-size: 1.15rem;
|
||||
line-height: 160%;
|
||||
color: #222222;
|
||||
width: 5.5rem;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
#add-prompt {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
#parties-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-top: 2rem;
|
||||
--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>
|
||||
@@ -4,8 +4,9 @@
|
||||
// Import statements
|
||||
import { onMount } from 'svelte'
|
||||
import { writable } from 'svelte/store';
|
||||
import { partiesByCountry, addMarkersParties } from '/js/parties.js'
|
||||
import { loadLocaleContent } from "/js/libraries/serverTools.js"
|
||||
import { loadLocaleContent, getData} from "/js/libraries/serverTools.js"
|
||||
import { addMarkersEntries, translate } from "/js/libraries/mapTools.js"
|
||||
import { addPartyPinContent } from "/js/mapFuncs.js"
|
||||
|
||||
// Import components
|
||||
import "/js/components/map-component.js"
|
||||
@@ -13,21 +14,45 @@
|
||||
// Main code
|
||||
let loaded = writable(0)
|
||||
let content = writable({})
|
||||
let entries
|
||||
let entriesByCountry
|
||||
|
||||
loadLocaleContent(content,"countries",loaded)
|
||||
let locale = loadLocaleContent(content,"parties-component",loaded)
|
||||
loadLocaleContent(content,"countries",loaded)
|
||||
|
||||
function mapCallbackParties(createMap,content,locale) {
|
||||
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/parties.json",callback)
|
||||
|
||||
function mapCallback(createMap,content,locale) {
|
||||
let map = createMap([22, 0],2)
|
||||
addMarkersParties(map,content,locale)
|
||||
addMarkersEntries(entries,entriesByCountry,map,content,locale,addPartyPinContent,"gold")
|
||||
}
|
||||
|
||||
function getCountry(name) {
|
||||
return locale=="en" ? name : $content[name]
|
||||
function getCountry(x) {
|
||||
return locale=="en" ? x : translate($content,x)
|
||||
}
|
||||
|
||||
function getAddress(group) {
|
||||
return locale=="en" ? group.location : $content[group.location]
|
||||
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 +61,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">
|
||||
@@ -44,26 +69,27 @@
|
||||
<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,locale)}></map-component>
|
||||
<map-component id="map" callback={(createMap) => mapCallback(createMap,$content,locale)}></map-component>
|
||||
<p id="add-prompt">{$content["map-prompt"]}</p>
|
||||
{#each Object.entries(partiesByCountry) as [name,parties]}
|
||||
{#each Object.entries(entriesByCountry) as [name,entries]}
|
||||
<h4 class="country-name">{getCountry(name)}</h4>
|
||||
<div class="country-block">
|
||||
{#each parties as party}
|
||||
{#each entries as entry}
|
||||
<div class="location-info">
|
||||
<div class="img-general-info">
|
||||
<picture>
|
||||
<source srcset={"/img/parties/"+party.logo+".webp"}>
|
||||
<source srcset={"/img/parties/"+party.logo+".jpg"}>
|
||||
<source srcset={"/img/parties/"+entry.logo+".webp"}>
|
||||
<source srcset={"/img/parties/"+entry.logo+".jpg"}>
|
||||
<img class="party-logo" alt="logo">
|
||||
</picture>
|
||||
<div>
|
||||
<p><b>{$content.name}: </b>{party.name}</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>
|
||||
<p><b>{$content.name}: </b>{entry.name}</p>
|
||||
<p><b>{$content.location}: </b>{getAddress(entry)}</p>
|
||||
<p><b>{$content.website}: </b><a href={entry.website} target=;_blank; rel=noreferrer>{entry.website}</a></p>
|
||||
<p><b>{$content.contact}: </b><a href={entry.contact} target=;_blank; rel=noreferrer>{entry.contact}</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<p><b>{$content.description}: </b>{$content[party.description]}</p>
|
||||
<p><b>{$content.description}: </b>{$content[entry.description]}</p>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
@@ -134,7 +160,7 @@
|
||||
.party-logo {
|
||||
position: relative;
|
||||
right: 0;
|
||||
max-height: 5.5rem;
|
||||
max-height: 6.5rem;
|
||||
max-width: 100%;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
195
Server/app/svelte/src/partners-add-component.svelte
Normal file
195
Server/app/svelte/src/partners-add-component.svelte
Normal file
@@ -0,0 +1,195 @@
|
||||
<svelte:options tag="partners-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 components
|
||||
import "/js/components/map-component.js"
|
||||
|
||||
// Main code
|
||||
let loaded = writable(0)
|
||||
let content = writable({})
|
||||
let entries
|
||||
let entriesByCountry
|
||||
|
||||
let locale = loadLocaleContent(content,"groups-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/groups.json",callback)
|
||||
|
||||
function addGroupPinContent(g,content,locale) {
|
||||
let coordinates
|
||||
let text = "<b>"+content["Group"]+"</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) {
|
||||
let map = createMap([22, 0],2)
|
||||
addMarkersEntries(entries,entriesByCountry,map,content,locale,addGroupPinContent,"green")
|
||||
}
|
||||
|
||||
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.groups}</h1>
|
||||
<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) => 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.location}: </b>{getAddress(entry)}</p>
|
||||
<p><b>{$content.members}: </b>{entry.members}</p>
|
||||
<p><b>{$content.contact}: </b><a href={entry.contact} target=;_blank; rel=noreferrer>{entry.contact}</a></p>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/key}
|
||||
|
||||
<style>
|
||||
@import '/css/common.css';
|
||||
|
||||
.description {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
#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>
|
||||
@@ -4,25 +4,55 @@
|
||||
// Import statements
|
||||
import { onMount } from 'svelte'
|
||||
import { writable } from 'svelte/store';
|
||||
import { loadLocaleContent } from "/js/libraries/serverTools.js"
|
||||
import { partnersByCountry } from '/js/partners.js'
|
||||
|
||||
import { loadLocaleContent, getData} from "/js/libraries/serverTools.js"
|
||||
import { addMarkersEntries, translate } from "/js/libraries/mapTools.js"
|
||||
import { addPartnersPinContent } 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
|
||||
|
||||
loadLocaleContent(content,"countries",loaded)
|
||||
let locale = loadLocaleContent(content,"partners-component",loaded)
|
||||
loadLocaleContent(content,"countries",loaded)
|
||||
|
||||
function getCountry(name) {
|
||||
return locale=="en" ? name : $content[name]
|
||||
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/partners.json",callback)
|
||||
|
||||
function mapCallback(createMap,content,locale) {
|
||||
let map = createMap([22, 0],2)
|
||||
addMarkersEntries(entries,entriesByCountry,map,content,locale,addPartnersPinContent,"blue")
|
||||
}
|
||||
|
||||
function getAddress(group) {
|
||||
return group.location[0].map(x => locale=="en" ? x : $content[x]).join(", ")
|
||||
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(() => {
|
||||
@@ -31,7 +61,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">
|
||||
@@ -39,25 +69,27 @@
|
||||
<img id="hands-img" src="/img/common/handshake.svg" alt="hands">
|
||||
<p>{$content.p1}</p>
|
||||
<h3>{$content.subheading1}</h3>
|
||||
{#each Object.entries(partnersByCountry) as [name,partners]}
|
||||
<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 partners as partner}
|
||||
{#each entries as entry}
|
||||
<div class="location-info">
|
||||
<div class="img-general-info">
|
||||
<picture>
|
||||
<source srcset={"/img/partners/"+partner.logo+".webp"}>
|
||||
<source srcset={"/img/partners/"+partner.logo+".jpg"}>
|
||||
<source srcset={"/img/partners/"+entry.logo+".webp"}>
|
||||
<source srcset={"/img/partners/"+entry.logo+".jpg"}>
|
||||
<img class="partner-logo" alt="logo">
|
||||
</picture>
|
||||
<div>
|
||||
<p><b>{$content.name}: </b>{partner.name}</p>
|
||||
<p><b>{$content.type}: </b>{$content[partner.type]}</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>
|
||||
<p><b>{$content.name}: </b>{entry.name}</p>
|
||||
<p><b>{$content.location}: </b>{getAddress(entry)}</p>
|
||||
<p><b>{$content.website}: </b><a href={entry.website} target=;_blank; rel=noreferrer>{entry.website}</a></p>
|
||||
<p><b>{$content.contact}: </b><a href={entry.website} target=;_blank; rel=noreferrer>{entry.contact}</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<p><b>{$content.description}: </b>{$content[partner.description]}</p>
|
||||
<p><b>{$content.description}: </b>{entry.description}</p>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
@@ -133,7 +165,7 @@
|
||||
#map {
|
||||
--height: 30rem;
|
||||
--width: 100%;
|
||||
--margin-bottom: 3rem;
|
||||
--margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
#text-container {
|
||||
@@ -148,7 +180,7 @@
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-bottom: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
#container {
|
||||
|
||||
Reference in New Issue
Block a user