Added admin panel
This commit is contained in:
a-ill
577
Server/app/svelte/src/profile/groups-add-component.svelte
Normal file
577
Server/app/svelte/src/profile/groups-add-component.svelte
Normal file
@@ -0,0 +1,577 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user