site-libsoc/Server/public/js/components/parties-add-component.js

684 lines
20 KiB
JavaScript

(function(l, r) { if (!l || l.getElementById('livereloadscript')) return; r = l.createElement('script'); r.async = 1; r.src = '//' + (self.location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1'; r.id = 'livereloadscript'; l.getElementsByTagName('head')[0].appendChild(r) })(self.document);
import { S as SvelteElement, i as init, a as attribute_to_object, b as insert_dev, s as safe_not_equal, d as dispatch_dev, v as validate_slots, w as validate_store, x as component_subscribe, o as onMount, y as empty, n as noop, p as detach_dev, q as binding_callbacks, f as element, h as space, j as add_location, k as attr_dev, u as src_url_equal, z as set_custom_element_data, l as append_dev, m as listen_dev, r as run_all } from './index-998178c7.js';
import { w as writable } from './index-f9998ce7.js';
import { getData, loadLocaleContent, sendData } from '../../../../../../../../../js/libraries/serverTools.js';
import { addMarkersEntries, translate } from '../../../../../../../../../js/libraries/mapTools.js';
import '../../../../../../../../../js/components/map-component.js';
/* src\parties-add-component.svelte generated by Svelte v3.52.0 */
const file = "src\\parties-add-component.svelte";
// (222:4) {#if $loaded==3}
function create_if_block(ctx) {
let div7;
let div6;
let h1;
let t1;
let img;
let img_src_value;
let t2;
let p0;
let t4;
let ol;
let li0;
let t6;
let li1;
let t8;
let li2;
let t10;
let li3;
let t12;
let div2;
let label0;
let t14;
let div1;
let input0;
let t15;
let div0;
let t16;
let div5;
let label1;
let t18;
let div4;
let input1;
let t19;
let div3;
let t20;
let button;
let t22;
let p1;
let t23;
let map_component;
let map_component_callback_value;
let mounted;
let dispose;
const block = {
c: function create() {
div7 = element("div");
div6 = element("div");
h1 = element("h1");
h1.textContent = "Add a Party";
t1 = space();
img = element("img");
t2 = space();
p0 = element("p");
p0.textContent = "If there are no parties in your country which you can join then do the following:";
t4 = space();
ol = element("ol");
li0 = element("li");
li0.textContent = "Click on the map to show us where you are located;";
t6 = space();
li1 = element("li");
li1.textContent = "Add a way to contact you or leave blank for a pin to point to our discord;";
t8 = space();
li2 = element("li");
li2.textContent = "Press \"Submit\" to add yourself to our map;";
t10 = space();
li3 = element("li");
li3.textContent = "Verify yourself by having a chat with us at our Discord server to show on the map;";
t12 = space();
div2 = element("div");
label0 = element("label");
label0.textContent = "Location:";
t14 = space();
div1 = element("div");
input0 = element("input");
t15 = space();
div0 = element("div");
t16 = space();
div5 = element("div");
label1 = element("label");
label1.textContent = "Contact:";
t18 = space();
div4 = element("div");
input1 = element("input");
t19 = space();
div3 = element("div");
t20 = space();
button = element("button");
button.textContent = "Submit";
t22 = space();
p1 = element("p");
t23 = space();
map_component = element("map-component");
add_location(h1, file, 225, 16, 7500);
attr_dev(img, "id", "parties-img");
if (!src_url_equal(img.src, img_src_value = "/img/common/parties.svg")) attr_dev(img, "src", img_src_value);
attr_dev(img, "alt", "parties");
add_location(img, file, 226, 16, 7538);
attr_dev(p0, "class", "description");
add_location(p0, file, 227, 16, 7622);
add_location(li0, file, 229, 20, 7774);
add_location(li1, file, 230, 20, 7855);
add_location(li2, file, 231, 20, 7960);
add_location(li3, file, 232, 20, 8033);
add_location(ol, file, 228, 16, 7748);
attr_dev(label0, "for", "address-input");
add_location(label0, file, 235, 20, 8247);
attr_dev(input0, "id", "address-input");
attr_dev(input0, "type", "text");
input0.readOnly = true;
add_location(input0, file, 237, 24, 8367);
attr_dev(div0, "class", "ghost-input");
add_location(div0, file, 238, 24, 8508);
attr_dev(div1, "class", "input-wrapper");
add_location(div1, file, 236, 20, 8314);
attr_dev(div2, "id", "address-input-wrapper");
attr_dev(div2, "class", "input-label-wrapper");
add_location(div2, file, 234, 16, 8165);
attr_dev(label1, "for", "contact-input");
add_location(label1, file, 242, 20, 8664);
attr_dev(input1, "id", "contact-input");
attr_dev(input1, "type", "text");
add_location(input1, file, 244, 24, 8783);
attr_dev(div3, "class", "ghost-input");
add_location(div3, file, 245, 24, 8915);
attr_dev(div4, "class", "input-wrapper");
add_location(div4, file, 243, 20, 8730);
attr_dev(div5, "class", "input-label-wrapper");
add_location(div5, file, 241, 16, 8609);
attr_dev(button, "id", "submit-button");
add_location(button, file, 248, 16, 9016);
attr_dev(p1, "id", "confirmation-msg");
add_location(p1, file, 249, 16, 9102);
set_custom_element_data(map_component, "id", "map");
set_custom_element_data(map_component, "callback", map_component_callback_value = /*func*/ ctx[15]);
add_location(map_component, file, 250, 16, 9177);
attr_dev(div6, "id", "text-container");
add_location(div6, file, 224, 12, 7457);
attr_dev(div7, "id", "container");
add_location(div7, file, 222, 8, 7354);
},
m: function mount(target, anchor) {
insert_dev(target, div7, anchor);
append_dev(div7, div6);
append_dev(div6, h1);
append_dev(div6, t1);
append_dev(div6, img);
append_dev(div6, t2);
append_dev(div6, p0);
append_dev(div6, t4);
append_dev(div6, ol);
append_dev(ol, li0);
append_dev(ol, t6);
append_dev(ol, li1);
append_dev(ol, t8);
append_dev(ol, li2);
append_dev(ol, t10);
append_dev(ol, li3);
append_dev(div6, t12);
append_dev(div6, div2);
append_dev(div2, label0);
append_dev(div2, t14);
append_dev(div2, div1);
append_dev(div1, input0);
/*input0_binding*/ ctx[10](input0);
append_dev(div1, t15);
append_dev(div1, div0);
append_dev(div6, t16);
append_dev(div6, div5);
append_dev(div5, label1);
append_dev(div5, t18);
append_dev(div5, div4);
append_dev(div4, input1);
/*input1_binding*/ ctx[12](input1);
append_dev(div4, t19);
append_dev(div4, div3);
append_dev(div6, t20);
append_dev(div6, button);
append_dev(div6, t22);
append_dev(div6, p1);
/*p1_binding*/ ctx[14](p1);
append_dev(div6, t23);
append_dev(div6, map_component);
if (!mounted) {
dispose = [
listen_dev(input0, "input", /*input_handler*/ ctx[11], false, false, false),
listen_dev(input1, "input", /*input_handler_1*/ ctx[13], false, false, false),
listen_dev(button, "click", /*submitLocation*/ ctx[9], false, false, false)
];
mounted = true;
}
},
p: function update(ctx, dirty) {
if (dirty & /*$content*/ 16 && map_component_callback_value !== (map_component_callback_value = /*func*/ ctx[15])) {
set_custom_element_data(map_component, "callback", map_component_callback_value);
}
},
d: function destroy(detaching) {
if (detaching) detach_dev(div7);
/*input0_binding*/ ctx[10](null);
/*input1_binding*/ ctx[12](null);
/*p1_binding*/ ctx[14](null);
mounted = false;
run_all(dispose);
}
};
dispatch_dev("SvelteRegisterBlock", {
block,
id: create_if_block.name,
type: "if",
source: "(222:4) {#if $loaded==3}",
ctx
});
return block;
}
// (221:0) {#key $loaded}
function create_key_block(ctx) {
let if_block_anchor;
let if_block = /*$loaded*/ ctx[3] == 3 && create_if_block(ctx);
const block = {
c: function create() {
if (if_block) if_block.c();
if_block_anchor = empty();
},
m: function mount(target, anchor) {
if (if_block) if_block.m(target, anchor);
insert_dev(target, if_block_anchor, anchor);
},
p: function update(ctx, dirty) {
if (/*$loaded*/ ctx[3] == 3) {
if (if_block) {
if_block.p(ctx, dirty);
} else {
if_block = create_if_block(ctx);
if_block.c();
if_block.m(if_block_anchor.parentNode, if_block_anchor);
}
} else if (if_block) {
if_block.d(1);
if_block = null;
}
},
d: function destroy(detaching) {
if (if_block) if_block.d(detaching);
if (detaching) detach_dev(if_block_anchor);
}
};
dispatch_dev("SvelteRegisterBlock", {
block,
id: create_key_block.name,
type: "key",
source: "(221:0) {#key $loaded}",
ctx
});
return block;
}
function create_fragment(ctx) {
let previous_key = /*$loaded*/ ctx[3];
let key_block_anchor;
let key_block = create_key_block(ctx);
const block = {
c: function create() {
key_block.c();
key_block_anchor = empty();
this.c = noop;
},
l: function claim(nodes) {
throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
},
m: function mount(target, anchor) {
key_block.m(target, anchor);
insert_dev(target, key_block_anchor, anchor);
},
p: function update(ctx, [dirty]) {
if (dirty & /*$loaded*/ 8 && safe_not_equal(previous_key, previous_key = /*$loaded*/ ctx[3])) {
key_block.d(1);
key_block = create_key_block(ctx);
key_block.c();
key_block.m(key_block_anchor.parentNode, key_block_anchor);
} else {
key_block.p(ctx, dirty);
}
},
i: noop,
o: noop,
d: function destroy(detaching) {
if (detaching) detach_dev(key_block_anchor);
key_block.d(detaching);
}
};
dispatch_dev("SvelteRegisterBlock", {
block,
id: create_fragment.name,
type: "component",
source: "",
ctx
});
return block;
}
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 resizeInput(el) {
el.nextElementSibling.innerHTML = el.value;
}
function instance($$self, $$props, $$invalidate) {
let $loaded;
let $content;
let { $$slots: slots = {}, $$scope } = $$props;
validate_slots('parties-add-component', slots, []);
let loaded = writable(0);
validate_store(loaded, 'loaded');
component_subscribe($$self, loaded, value => $$invalidate(3, $loaded = value));
let content = writable({});
validate_store(content, 'content');
component_subscribe($$self, content, value => $$invalidate(4, $content = value));
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 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 = "";
}
$$invalidate(1, addressInput.value = fullAddress, addressInput);
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;
if (state != undefined) ; else {
state = "";
}
if (city != undefined) ; 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) {
$$invalidate(0, confirmationMsg.innerHTML = "You have been added to our database! Now go to our Discord to verify yourself.", confirmationMsg);
$$invalidate(0, confirmationMsg.style.color = "green", confirmationMsg);
} else {
$$invalidate(0, confirmationMsg.innerHTML = "Something went wrong.", confirmationMsg);
$$invalidate(0, confirmationMsg.style.color = "red", confirmationMsg);
}
}
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);
}
}
onMount(() => {
});
const writable_props = [];
Object.keys($$props).forEach(key => {
if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<parties-add-component> was created with unknown prop '${key}'`);
});
function input0_binding($$value) {
binding_callbacks[$$value ? 'unshift' : 'push'](() => {
addressInput = $$value;
$$invalidate(1, addressInput);
});
}
const input_handler = () => resizeInput(addressInput);
function input1_binding($$value) {
binding_callbacks[$$value ? 'unshift' : 'push'](() => {
contactInput = $$value;
$$invalidate(2, contactInput);
});
}
const input_handler_1 = () => resizeInput(contactInput);
function p1_binding($$value) {
binding_callbacks[$$value ? 'unshift' : 'push'](() => {
confirmationMsg = $$value;
$$invalidate(0, confirmationMsg);
});
}
const func = createMap => mapCallback(createMap, $content, locale);
$$self.$capture_state = () => ({
onMount,
writable,
loadLocaleContent,
getData,
sendData,
addMarkersEntries,
translate,
loaded,
content,
entries,
entriesByCountry,
callback,
confirmationMsg,
addressInput,
contactInput,
addressVec,
userPinLat,
userPinLng,
userPin,
locale,
createPin,
updatePin,
reverseGeocodeLocal,
reverseGeocode,
addGroupPinContent,
mapCallback,
updateConfirmationMsg,
submitLocation,
resizeInput,
$loaded,
$content
});
$$self.$inject_state = $$props => {
if ('loaded' in $$props) $$invalidate(5, loaded = $$props.loaded);
if ('content' in $$props) $$invalidate(6, content = $$props.content);
if ('entries' in $$props) entries = $$props.entries;
if ('entriesByCountry' in $$props) entriesByCountry = $$props.entriesByCountry;
if ('callback' in $$props) callback = $$props.callback;
if ('confirmationMsg' in $$props) $$invalidate(0, confirmationMsg = $$props.confirmationMsg);
if ('addressInput' in $$props) $$invalidate(1, addressInput = $$props.addressInput);
if ('contactInput' in $$props) $$invalidate(2, contactInput = $$props.contactInput);
if ('addressVec' in $$props) addressVec = $$props.addressVec;
if ('userPinLat' in $$props) userPinLat = $$props.userPinLat;
if ('userPinLng' in $$props) userPinLng = $$props.userPinLng;
if ('userPin' in $$props) userPin = $$props.userPin;
if ('locale' in $$props) $$invalidate(7, locale = $$props.locale);
};
if ($$props && "$$inject" in $$props) {
$$self.$inject_state($$props.$$inject);
}
return [
confirmationMsg,
addressInput,
contactInput,
$loaded,
$content,
loaded,
content,
locale,
mapCallback,
submitLocation,
input0_binding,
input_handler,
input1_binding,
input_handler_1,
p1_binding,
func
];
}
class Parties_add_component extends SvelteElement {
constructor(options) {
super();
this.shadowRoot.innerHTML = `<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}#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}#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>`;
init(
this,
{
target: this.shadowRoot,
props: attribute_to_object(this.attributes),
customElement: true
},
instance,
create_fragment,
safe_not_equal,
{},
null
);
if (options) {
if (options.target) {
insert_dev(options.target, this, options.anchor);
}
}
}
}
customElements.define("parties-add-component", Parties_add_component);
export { Parties_add_component as default };