Finished groups
This commit is contained in:
a-ill
@@ -5,20 +5,24 @@
|
||||
// Import statements
|
||||
import { onMount, getContext } from 'svelte'
|
||||
import { writable } from 'svelte/store'
|
||||
import { getData } from "/js/libraries/serverTools.js"
|
||||
import { getData, sendData } from "/js/libraries/serverTools.js"
|
||||
|
||||
//Import components
|
||||
import "/js/components/select-component.js"
|
||||
import "/js/components/switch-component.js"
|
||||
|
||||
//Export statements
|
||||
export let groups = null
|
||||
|
||||
// Main code
|
||||
let section
|
||||
let user_groups
|
||||
let userGroups = []
|
||||
let groupsRequests = []
|
||||
let content = writable({})
|
||||
let loaded = writable(0)
|
||||
let keyRequests = 0
|
||||
let numLoaded = 2
|
||||
let mainPane
|
||||
let groupsAdd
|
||||
|
||||
let membersInput
|
||||
let saveMembersButton
|
||||
@@ -30,22 +34,46 @@
|
||||
|
||||
let locale = "en"
|
||||
|
||||
let inputLocation
|
||||
let inputContact
|
||||
let inputMembers
|
||||
let pencilMembers
|
||||
let pencilContact
|
||||
let pencilButtonMembers
|
||||
let pencilButtonContact
|
||||
|
||||
let myGroupLocation
|
||||
let myGroupStatus
|
||||
|
||||
let context = getContext("profile-component")
|
||||
let maps = context.maps
|
||||
|
||||
function groups_callback(response) {
|
||||
user_groups = JSON.parse(response)
|
||||
inputContact = getContact(user_groups[0].contact)
|
||||
inputMembers = user_groups[0].members
|
||||
userGroups = JSON.parse(response)
|
||||
context["userGroups"] = userGroups
|
||||
loaded.update((val) => {
|
||||
return val + 1
|
||||
})
|
||||
}
|
||||
getData("/xx/get_user_groups",groups_callback)
|
||||
getData("/xx/get-user-groups",groups_callback)
|
||||
|
||||
function requests_callback(response) {
|
||||
let parsed = JSON.parse(response)
|
||||
groupsRequests.push(...parsed)
|
||||
loaded.update((val) => {
|
||||
return val + 1
|
||||
})
|
||||
}
|
||||
getData("/xx/get-group-requests",requests_callback)
|
||||
|
||||
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(", ")
|
||||
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 getContact(c) {
|
||||
@@ -65,8 +93,10 @@
|
||||
|
||||
}
|
||||
|
||||
function showSaveButton(button) {
|
||||
button.style.display = "initial"
|
||||
function showSaveButton(button,input) {
|
||||
if (!input.readOnly) {
|
||||
button.style.display = "initial"
|
||||
}
|
||||
}
|
||||
|
||||
function resetMembersField() {
|
||||
@@ -89,73 +119,178 @@
|
||||
|
||||
function saveContact() {}
|
||||
|
||||
let showLocationOverlay = getContext("profile-component")
|
||||
function updateUserGroup(newInfo) {
|
||||
if (newInfo!=undefined) {
|
||||
myGroupLocation.innerHTML = getAddress(newInfo)
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
|
||||
document.addEventListener("click", function(event) {
|
||||
if (membersInputDiv.focused) {
|
||||
resetContactField()
|
||||
}
|
||||
else if (contactInputDiv.focused) {
|
||||
resetMembersField()
|
||||
function onLoadedGroups() {
|
||||
let els = [saveMembersButton,saveContactButton,membersInputDiv,contactInputDiv]
|
||||
if ($loaded==numLoaded && els.every(x => x!=undefined && x!=null)) {
|
||||
document.addEventListener("click", function(event) {
|
||||
let activeEl
|
||||
let shadowRoot = this.activeElement.shadowRoot
|
||||
if (shadowRoot!=null) {
|
||||
activeEl = shadowRoot.activeElement
|
||||
shadowRoot = activeEl.shadowRoot
|
||||
if (shadowRoot!=null) {
|
||||
activeEl = shadowRoot.activeElement
|
||||
}
|
||||
}
|
||||
if (activeEl == membersInput || activeEl == saveMembersButton) {
|
||||
resetContactField()
|
||||
}
|
||||
else if (activeEl == contactInput || activeEl == saveContactButton) {
|
||||
resetMembersField()
|
||||
}
|
||||
else {
|
||||
resetMembersField()
|
||||
resetContactField()
|
||||
}
|
||||
})
|
||||
context["updateUserGroup"] = updateUserGroup
|
||||
inputLocation = getAddress(userGroups[0])
|
||||
if (userGroups.length==0) {
|
||||
inputContact = ""
|
||||
inputMembers = ""
|
||||
}
|
||||
else {
|
||||
resetMembersField()
|
||||
resetContactField()
|
||||
let group = userGroups[0]
|
||||
|
||||
inputContact = getContact(group.contact)
|
||||
inputMembers = group.members
|
||||
let status = group.status
|
||||
if (status!=undefined) {
|
||||
if (status==0) {
|
||||
myGroupStatus.innerHTML = "(pending)"
|
||||
myGroupStatus.style.color = "#FFC90E"
|
||||
}
|
||||
else if (status==2) {
|
||||
myGroupStatus.innerHTML = "(rejected)"
|
||||
myGroupStatus.style.color = "#c52a28"
|
||||
}
|
||||
pencilMembers.style.display = "none"
|
||||
pencilContact.style.display = "none"
|
||||
pencilButtonContact.style.cursor = "default"
|
||||
pencilButtonMembers.style.cursor = "default"
|
||||
membersInput.readOnly = true
|
||||
contactInput.readOnly = true
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
else {
|
||||
let f = () => onLoadedGroups()
|
||||
setTimeout(f, 100)
|
||||
}
|
||||
}
|
||||
|
||||
function focus(el) {
|
||||
el.focus()
|
||||
el.click()
|
||||
}
|
||||
|
||||
function approveRequest(ind,user_id) {
|
||||
sendData("/xx/group-approve-request",{user_id: user_id})
|
||||
groupsRequests.splice(ind,1)
|
||||
keyRequests = keyRequests + 1
|
||||
}
|
||||
|
||||
function rejectRequest(ind,user_id) {
|
||||
sendData("/xx/group-reject-request",{user_id: user_id})
|
||||
groupsRequests.splice(ind,1)
|
||||
keyRequests = keyRequests + 1
|
||||
}
|
||||
|
||||
function launchGroupsAdd() {
|
||||
groupsAdd.style.display = "block"
|
||||
mainPane.style.display = "none"
|
||||
if (maps["groupsAdd"]!=undefined) {
|
||||
maps["groupsAdd"].invalidateSize()
|
||||
}
|
||||
}
|
||||
|
||||
function closeGroupsAdd() {
|
||||
groupsAdd.style.display = "none"
|
||||
mainPane.style.display = "block"
|
||||
}
|
||||
|
||||
context["onLoadedGroups"] = onLoadedGroups
|
||||
context["launchGroupsAdd"] = launchGroupsAdd
|
||||
context["closeGroupsAdd"] = closeGroupsAdd
|
||||
|
||||
onMount(() => {
|
||||
onLoadedGroups()
|
||||
})
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
{#key $loaded}
|
||||
{#if $loaded==1}
|
||||
|
||||
<h2>Groups</h2>
|
||||
<h3>My group</h3>
|
||||
<section bind:this={section} class="entries-section">
|
||||
{#if $loaded==numLoaded}
|
||||
<div bind:this={mainPane}>
|
||||
<h2>Groups</h2>
|
||||
<div>
|
||||
<div class="change-field-line">
|
||||
<span>Location:</span>
|
||||
<div class="change-field-div">
|
||||
<button class="change-field-button" on:click={launchChangeLocation}>{getAddress(user_groups[0])}
|
||||
<object type="image/svg+xml" data="/img/profile/icons/pencil.svg" title="pencil-icon" class="pencil"></object>
|
||||
</button>
|
||||
<h3 class="group-heading">My group</h3>
|
||||
<span bind:this={myGroupStatus} class="status"></span>
|
||||
</div>
|
||||
<section bind:this={section} class="entries-section">
|
||||
<div>
|
||||
<div class="change-field-line">
|
||||
<span>Location:</span>
|
||||
<div class="change-field-div">
|
||||
<button class="change-field-button" bind:this={myGroupLocation} on:click={launchGroupsAdd}>{inputLocation}
|
||||
<object type="image/svg+xml" data="/img/profile/icons/pencil.svg" title="pencil-icon" class="pencil"></object>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="change-field-line">
|
||||
<span>Members:</span>
|
||||
<div bind:this={membersInputDiv} class="change-field-div input-pencil">
|
||||
<button bind:this={saveMembersButton} class="save-button" on:click={saveMembers}>save</button>
|
||||
<input bind:this={membersInput} id="membersInput" class="text-input" type="text" bind:value={inputMembers} on:click={() => showSaveButton(saveMembersButton)}>
|
||||
<button class="text-input-pencil-button" on:click={() => membersInput.focus()}>
|
||||
<object type="image/svg+xml" data="/img/profile/icons/pencil.svg" title="pencil-icon" class="pencil"></object>
|
||||
</button>
|
||||
<div>
|
||||
<div class="change-field-line">
|
||||
<span>Members:</span>
|
||||
<div bind:this={membersInputDiv} class="change-field-div input-pencil">
|
||||
<div class="save-button-wrapper">
|
||||
<button bind:this={saveMembersButton} on:click={saveMembers} class="save-button" style="display: none">save</button>
|
||||
</div>
|
||||
<input bind:this={membersInput} id="membersInput" class="text-input" type="text" bind:value={inputMembers} on:click={() => showSaveButton(saveMembersButton,membersInput)}>
|
||||
<button bind:this={pencilButtonMembers} class="text-input-pencil-button" on:click={() => {focus(membersInput)}}>
|
||||
<object bind:this={pencilMembers} type="image/svg+xml" data="/img/profile/icons/pencil.svg" title="pencil-icon" class="pencil"></object>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="change-field-line">
|
||||
<span>Contact:</span>
|
||||
<div bind:this={contactInputDiv} class="change-field-div input-pencil">
|
||||
<button bind:this={saveContactButton} class="save-button" on:click={saveContact}>save</button>
|
||||
<input bind:this={contactInput} id="contactInput" class="text-input" type="text" bind:value={inputContact} on:click={() => showSaveButton(saveContactButton)}>
|
||||
<button class="text-input-pencil-button" on:click={() => contactInput.focus()}>
|
||||
<object type="image/svg+xml" data="/img/profile/icons/pencil.svg" title="pencil-icon" class="pencil"></object>
|
||||
</button>
|
||||
<div>
|
||||
<div class="change-field-line">
|
||||
<span>Contact:</span>
|
||||
<div bind:this={contactInputDiv} class="change-field-div input-pencil">
|
||||
<div class="save-button-wrapper">
|
||||
<button bind:this={saveContactButton} on:click={saveContact} class="save-button" style="display: none">save</button>
|
||||
</div>
|
||||
<input bind:this={contactInput} id="contactInput" class="text-input" type="text" bind:value={inputContact} on:click={() => showSaveButton(saveContactButton,contactInput)}>
|
||||
<button bind:this={pencilButtonContact} class="text-input-pencil-button" on:click={focus(contactInput)}>
|
||||
<object bind:this={pencilContact} type="image/svg+xml" data="/img/profile/icons/pencil.svg" title="pencil-icon" class="pencil"></object>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<h3>Requests</h3>
|
||||
<section bind:this={section} class="entries-section">
|
||||
|
||||
</section>
|
||||
</section>
|
||||
<h3>Requests</h3>
|
||||
<section bind:this={section} class="entries-section">
|
||||
{#key keyRequests}
|
||||
{#each groupsRequests as req,ind}
|
||||
<div>
|
||||
<div class="change-field-line">
|
||||
<span>{req.email}</span>
|
||||
<div class="request-button-wrapper">
|
||||
<button on:click={() => approveRequest(ind,req.user_id)} class="approve-button">approve</button>
|
||||
<button on:click={() => rejectRequest(ind,req.user_id)} class="approve-button" style="display:visible">reject</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
{/key}
|
||||
</section>
|
||||
</div>
|
||||
<!--Helper panes-->
|
||||
<groups-add-component bind:this={groupsAdd} style="display: none;"></groups-add-component>
|
||||
{/if}
|
||||
{/key}
|
||||
|
||||
@@ -163,10 +298,42 @@
|
||||
<style>
|
||||
@import '/css/common.css';
|
||||
|
||||
.request-button-wrapper {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.approve-button {
|
||||
height: 2.7rem;
|
||||
padding: 0rem 1rem;
|
||||
font-family: var(--sans-serif,sans-serif);
|
||||
font-size: 1.15rem;
|
||||
color: white;
|
||||
background-color: var(--red);
|
||||
border-color: var(--red);
|
||||
border-radius: 0.5rem;
|
||||
margin-top: -0.5rem;
|
||||
}
|
||||
|
||||
.group-heading {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.status {
|
||||
display: inline-block;
|
||||
font-size: 1.15rem;
|
||||
font-family: var(--sans-serif,sans-serif);
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
input {
|
||||
font-family: var(--sans-serif,sans-serif)
|
||||
}
|
||||
|
||||
.text-input-pencil-button {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
height: 2.3rem;
|
||||
height: 2.7rem;
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
@@ -187,10 +354,10 @@
|
||||
direction: rtl;
|
||||
border: 0;
|
||||
outline: none;
|
||||
bottom: 0.341rem;
|
||||
position: relative;
|
||||
top: 0.1rem;
|
||||
font-style: var(--sans-serif,sans-serif)
|
||||
height: 2.7rem;
|
||||
font-style: var(--sans-serif,sans-serif);
|
||||
background: transparent;
|
||||
margin-top: -0.5rem;
|
||||
}
|
||||
|
||||
#membersInput {
|
||||
@@ -202,17 +369,24 @@
|
||||
}
|
||||
|
||||
.save-button {
|
||||
position: relative;
|
||||
bottom: 0.34rem;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: -0.4rem;
|
||||
margin-right: 0.6rem;
|
||||
height: 2.73rem;
|
||||
width: 4.778rem;
|
||||
height: 2.7rem;
|
||||
width: 5rem;
|
||||
font-family: var(--sans-serif,sans-serif);
|
||||
font-size: 1.15rem;
|
||||
color: white;
|
||||
background-color: var(--red);
|
||||
border-color: var(--red);
|
||||
border-radius: 0.512rem;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.save-button-wrapper {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@@ -248,12 +422,14 @@
|
||||
|
||||
.change-field-div {
|
||||
width: max-content;
|
||||
position: relative;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.change-field-button {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
height: 2.73rem;
|
||||
height: 2.7rem;
|
||||
font-size: 1.15rem;
|
||||
font-family: var(--sans-serif,sans-serif);
|
||||
font-weight: 500;
|
||||
@@ -270,31 +446,10 @@
|
||||
h3 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.entry-container {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.entry {
|
||||
font-family: var(--sans-serif,sans-serif);
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
|
||||
span {
|
||||
font-family: var(--sans-serif,sans-serif);
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
|
||||
#groups-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#groups-section h2 {
|
||||
margin: auto;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user