diff --git a/flottform/forms/src/default-component.ts b/flottform/forms/src/default-component.ts index 025cf36..0bfe8a4 100644 --- a/flottform/forms/src/default-component.ts +++ b/flottform/forms/src/default-component.ts @@ -305,8 +305,9 @@ const handleTextInputStates = ({ if (id) { flottformItem.setAttribute('id', id); } - flottformTextInputHost.on('done', (message: string) => { - statusInformation.innerHTML = onSuccessText ?? `✨ You have succesfully submitted your message`; + flottformTextInputHost.on('text-received', (message: string) => { + statusInformation.innerHTML = + onSuccessText ?? `✨ You have succesfully submitted your message: ${message}`; statusInformation.appendChild(refreshChannelButton); flottformItem.replaceChildren(statusInformation); }); diff --git a/flottform/forms/src/flottform-text-input-client.ts b/flottform/forms/src/flottform-text-input-client.ts index c0e11ce..03a6a6a 100644 --- a/flottform/forms/src/flottform-text-input-client.ts +++ b/flottform/forms/src/flottform-text-input-client.ts @@ -2,10 +2,11 @@ import { FlottformChannelClient } from './flottform-channel-client'; import { DEFAULT_WEBRTC_CONFIG, EventEmitter, Logger, POLL_TIME_IN_MS } from './internal'; type Listeners = { + init: []; connected: []; 'webrtc:connection-impossible': []; - sending: []; // Emitted to signal the start of sending the file(s) - done: []; + 'text-transferred': [text: string]; // Emitted to signal the transfer of one text TO the Host. + 'text-received': [text: string]; // Emitted to signal the reception of one text FROM the Host. disconnected: []; error: [e: string]; }; @@ -49,13 +50,19 @@ export class FlottformTextInputClient extends EventEmitter { sendText = (text: string) => { // For now, I didn't handle very large texts since for most use cases the text won't exceed the size of 1 chunk ( 16KB ) - this.emit('sending'); this.channel?.sendData(text); - this.emit('done'); + this.emit('text-transferred', text); + }; + + private handleIncomingData = (e: MessageEvent) => { + // We suppose that the data received is small enough to be all included in 1 message + this.emit('text-received', e.data); }; private registerListeners = () => { - this.channel?.on('init', () => {}); + this.channel?.on('init', () => { + this.emit('init'); + }); this.channel?.on('retrieving-info-from-endpoint', () => {}); this.channel?.on('sending-client-info', () => {}); this.channel?.on('connecting-to-host', () => {}); @@ -65,8 +72,11 @@ export class FlottformTextInputClient extends EventEmitter { this.channel?.on('connection-impossible', () => { this.emit('webrtc:connection-impossible'); }); + this.channel?.on('receiving-data', (e) => { + this.handleIncomingData(e); + }); this.channel?.on('done', () => { - this.emit('done'); + //this.emit('done'); }); this.channel?.on('disconnected', () => { this.emit('disconnected'); diff --git a/flottform/forms/src/flottform-text-input-host.ts b/flottform/forms/src/flottform-text-input-host.ts index e2d342d..49b43c8 100644 --- a/flottform/forms/src/flottform-text-input-host.ts +++ b/flottform/forms/src/flottform-text-input-host.ts @@ -8,9 +8,9 @@ import { } from './internal'; type Listeners = BaseListeners & { - done: [data: string]; + 'text-transferred': [text: string]; // Emitted to signal the transfer of one text TO the Client. + 'text-received': [text: string]; // Emitted to signal the reception of one text FROM the Client. 'webrtc:waiting-for-text': []; - receive: []; 'webrtc:waiting-for-data': []; }; @@ -76,10 +76,15 @@ export class FlottformTextInputHost extends BaseInputHost { return this.qrCode; }; + sendText = (text: string) => { + // For now, I didn't handle very large texts since for most use cases the text won't exceed the size of 1 chunk ( 16KB ) + this.channel?.sendData(text); + this.emit('text-transferred', text); + }; + private handleIncomingData = (e: MessageEvent) => { - this.emit('receive'); // We suppose that the data received is small enough to be all included in 1 message - this.emit('done', e.data); + this.emit('text-received', e.data); if (this.inputField) { this.inputField.value = e.data; const event = new Event('change');