-
Notifications
You must be signed in to change notification settings - Fork 145
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Update create message wizard to support push
- Loading branch information
1 parent
47c5eea
commit 98e7188
Showing
4 changed files
with
162 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
16 changes: 16 additions & 0 deletions
16
src/routes/console/project-[project]/messaging/pushPhone.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| <script lang="ts"> | ||
| export let title = ''; | ||
| export let body = ''; | ||
| </script> | ||
|
|
||
| <!-- TODO: Style to look like a push notification --> | ||
| <div class="phone card is-only-desktop"> | ||
| <p class="body-text-1 u-bold">{title}</p> | ||
| <p class="body-text-2">{body}</p> | ||
| </div> | ||
|
|
||
| <style lang="scss"> | ||
| .phone { | ||
| inline-size: calc(320 * 1rem / 16); | ||
| } | ||
| </style> |
142 changes: 142 additions & 0 deletions
142
src/routes/console/project-[project]/messaging/wizard/pushFormList.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,142 @@ | ||
| <script context="module" lang="ts"> | ||
| export async function createPushMessage(params: PushMessageParams) { | ||
| const response = await sdk.forProject.client.call( | ||
| 'POST', | ||
| new URL(sdk.forProject.client.config.endpoint + '/messaging/messages/push'), | ||
| { | ||
| 'X-Appwrite-Project': sdk.forProject.client.config.project, | ||
| 'content-type': 'application/json', | ||
| 'X-Appwrite-Mode': 'admin' | ||
| }, | ||
| params | ||
| ); | ||
| return response.json(); | ||
| } | ||
| </script> | ||
|
|
||
| <script lang="ts"> | ||
| import { messageParams, providerType, MessageStatuses, type PushMessageParams } from './store'; | ||
| import { | ||
| Button, | ||
| FormList, | ||
| InputEmail, | ||
| InputRadio, | ||
| InputText, | ||
| InputTextarea | ||
| } from '$lib/elements/forms'; | ||
| import { Pill } from '$lib/elements'; | ||
| import { CustomId, Modal } from '$lib/components'; | ||
| import { user } from '$lib/stores/user'; | ||
| import { clickOnEnter } from '$lib/helpers/a11y'; | ||
| import { ID } from '@appwrite.io/console'; | ||
| import { sdk } from '$lib/stores/sdk'; | ||
| import { ProviderTypes } from '../providerType.svelte'; | ||
| import PushPhone from '../pushPhone.svelte'; | ||
| let showCustomId = false; | ||
| let showTest = false; | ||
| let selected = 'self'; | ||
| let otherEmail = ''; | ||
| async function sendTestMessage() { | ||
| const email = selected === 'self' ? $user.email : otherEmail; | ||
| console.log(email); | ||
| createPushMessage({ | ||
| topics: $messageParams[ProviderTypes.Push]?.topics || [], | ||
| targets: $messageParams[ProviderTypes.Push]?.targets || [], | ||
| description: $messageParams[ProviderTypes.Push]?.description || 'Test push', | ||
| status: MessageStatuses.PROCESSING, | ||
| messageId: ID.unique(), | ||
| // TODO: properly handle the test email address | ||
| users: ['steven'], | ||
| body: $messageParams[ProviderTypes.Push]?.body || '', | ||
| title: $messageParams[ProviderTypes.Push]?.title || '', | ||
| data: $messageParams[ProviderTypes.Push]?.data || {} | ||
| }); | ||
| } | ||
| $: otherEmail = selected === 'self' ? '' : otherEmail; | ||
| </script> | ||
|
|
||
| <div class="u-flex u-gap-24"> | ||
| <FormList class="u-stretch"> | ||
| <InputText | ||
| id="title" | ||
| label="Title" | ||
| placeholder="Enter title" | ||
| bind:value={$messageParams[$providerType]['title']}> | ||
| </InputText> | ||
| <div class="u-colum-gap-2"> | ||
| <InputTextarea | ||
| id="message" | ||
| label="Message" | ||
| placeholder="Type here..." | ||
| bind:value={$messageParams[$providerType]['body']}> | ||
| </InputTextarea> | ||
| <!-- TODO: Add support for draft messages --> | ||
| <!-- <div class="u-flex u-main-end"> | ||
| <Button text on:click={() => (showTest = true)}>Send test message</Button> | ||
| </div> --> | ||
| <Modal | ||
| title="Send test message" | ||
| bind:show={showTest} | ||
| onSubmit={sendTestMessage} | ||
| size="big"> | ||
| <slot /> | ||
| <InputRadio | ||
| label={$user.phone} | ||
| bind:group={selected} | ||
| value="self" | ||
| id="self" | ||
| name="selected" /> | ||
| <InputRadio | ||
| label="Other" | ||
| bind:group={selected} | ||
| value="other" | ||
| id="other" | ||
| name="selected" | ||
| fullWidth> | ||
| <svelte:fragment slot="description"> | ||
| Enter the phone number to which the test message will be | ||
| <div | ||
| on:click={() => (selected = 'other')} | ||
| on:keyup|self={clickOnEnter} | ||
| role="button" | ||
| tabindex="0"> | ||
| <InputEmail | ||
| showLabel={false} | ||
| id="email" | ||
| label="Email" | ||
| placeholder="Enter email" | ||
| bind:value={otherEmail} /> | ||
| </div> | ||
| </svelte:fragment> | ||
| </InputRadio> | ||
|
|
||
| <svelte:fragment slot="footer"> | ||
| <Button secondary on:click={() => (showTest = false)}>Cancel</Button> | ||
| <Button submit>Send</Button> | ||
| </svelte:fragment> | ||
| </Modal> | ||
| </div> | ||
| {#if !showCustomId} | ||
| <div> | ||
| <Pill button on:click={() => (showCustomId = !showCustomId)} | ||
| ><span class="icon-pencil" aria-hidden="true" /><span class="text"> | ||
| Message ID | ||
| </span></Pill> | ||
| </div> | ||
| {:else} | ||
| <CustomId | ||
| bind:show={showCustomId} | ||
| name="Message" | ||
| bind:id={$messageParams[$providerType].messageId} | ||
| autofocus={false} /> | ||
| {/if} | ||
| </FormList> | ||
| <PushPhone | ||
| title={$messageParams[$providerType]['title']} | ||
| body={$messageParams[$providerType]['body']} /> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters