577 lines
17 KiB
Svelte
577 lines
17 KiB
Svelte
<svelte:options tag="groups-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/groups.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,"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
|
|
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["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) {
|
|
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 + "/groups-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 group"
|
|
}
|
|
}
|
|
|
|
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> |