Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Finally got the presenter file upload working better.

Browse Source
This commit is contained in:
Scott Idem
2024-06-14 16:23:10 -04:00
parent 06df9a6230
commit 97f15f41f7
4 changed files with 247 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/lib/ae_events_functions.ts
View File

@@ -1725,7 +1725,7 @@ async function handle_download_export__event_exhibit_tracking(
log_lvl=0
}
) {
console.log('*** stores_event_api.js: get_event_exhibit_tracking_export() ***');
console.log('*** ae_events_functions.js: get_event_exhibit_tracking_export() ***');
const endpoint = `/event/exhibit/${exhibit_id}/tracking/export`;
if (file_type == 'CSV' || file_type == 'Excel') {
@@ -1748,6 +1748,58 @@ async function handle_download_export__event_exhibit_tracking(
}
// Updated 2024-06-14
async function create_event_file_obj_from_hosted_file_async(
{
api_cfg,
hosted_file_id,
params={},
data={},
return_obj=false,
inc_hosted_file=false,
return_meta=false,
log_lvl=0
}
) {
console.log('*** ae_events_functions.js: create_event_file_obj_from_hosted_file() ***');
let endpoint = `/event/file/from_hosted_file/${hosted_file_id}`;
if (return_obj) {
params['return_obj'] = true;
}
if (inc_hosted_file) {
params['inc_hosted_file'] = true;
}
let event_file_obj_post_promise = await api.post_object({
api_cfg: api_cfg,
endpoint: endpoint,
params: params,
data: data,
return_obj: return_obj,
return_meta: return_meta,
log_lvl: log_lvl
})
.then(function (result) {
console.log('POST DONE create_event_file_obj_from_hosted_file');
console.log(result);
return result;
})
.catch(function (error) {
console.log(error);
return false; // Returning false since something may have gone wrong. Also more in line with what the API returns.
// return error;
});
// console.log(event_file_obj_post_promise);
if (return_obj) {
return event_file_obj_post_promise;
} else {
return event_file_obj_post_promise.event_file_id_random;
}
}
let export_obj = {
handle_load_ae_obj_id__event: handle_load_ae_obj_id__event,
handle_load_ae_obj_li__event: handle_load_ae_obj_li__event,
@@ -1776,5 +1828,7 @@ let export_obj = {
handle_create_ae_obj__exhibit_tracking: handle_create_ae_obj__exhibit_tracking,
handle_update_ae_obj__exhibit_tracking: handle_update_ae_obj__exhibit_tracking,
handle_download_export__event_exhibit_tracking: handle_download_export__event_exhibit_tracking,
create_event_file_obj_from_hosted_file_async: create_event_file_obj_from_hosted_file_async,
};
export let events_func = export_obj;

16
src/lib/ae_events_stores.ts
View File

@@ -135,8 +135,8 @@ let events_local_data_struct: key_val = {
'pres_mgmt': {
show_content__session_description: false,
show_content__presentation_description: false,
show_content__agree_text: false,
show_content__presenter_start: false,
// show_content__agree_text: false,
// show_content__presenter_start: false,
disable_submit__opt_out: true,
submit_status__opt_out: null,
@@ -263,11 +263,19 @@ let events_session_data_struct: key_val = {
// Presentation Management (Distributing)
'pres_mgmt': {
'fulltext_search_qry_str': null,
'status_qry__search': null,
fulltext_search_qry_str: null,
status_qry__search: null,
disable_submit__event_file_obj: false,
show_form__search: true,
show_form__search_results: true,
show_content__agree_text: false,
show_content__presenter_start: false,
new_upload_list: null,
files_uploading_count: null,
},
// Speakers Management (Collection)

53
src/routes/events_pres_mgmt/session/[slug]/+page.svelte
View File

@@ -34,6 +34,8 @@ console.log(`$slct.account_id = `, $slct.account_id);
let ae_acct = data[$slct.account_id];
console.log(`ae_acct = `, ae_acct);
$ae_loc.url_origin = data.url.origin;
$events_slct.event_id = ae_acct.slct.event_id;
$events_slct.event_obj = ae_acct.slct.event_obj;
$events_slct.event_session_id = ae_acct.slct.event_session_id;
@@ -62,10 +64,16 @@ if (!$events_loc.auth__kv) {
if (!$events_loc.pres_mgmt) {
$events_loc.pres_mgmt = {};
$events_loc.pres_mgmt.show_content__agree_text = null;
}
$events_loc.pres_mgmt.show_content__agree_text = false;
if (!$events_sess.pres_mgmt) {
$events_sess.pres_mgmt = {};
$events_sess.pres_mgmt.show_content__agree_text = null;
$events_sess.pres_mgmt.show_content__presenter_start = null;
}
$events_sess.pres_mgmt.show_content__agree_text = false;
$events_sess.pres_mgmt.show_content__presenter_start = false;
// import Leads_add_scan from './leads_add_scan.svelte';
// import Sessions_list from './sessions_list.svelte';
@@ -626,7 +634,7 @@ function send_init_confirm_email({to_email, to_name, person_id, person_passcode,
$events_slct.event_presenter_id = event_presenter_obj.event_presenter_id_random;
$events_slct.presenter_obj = event_presenter_obj;
$events_loc.pres_mgmt.show_content__presenter_start = event_presenter_obj.event_presenter_id_random;
$events_sess.pres_mgmt.show_content__presenter_start = event_presenter_obj.event_presenter_id_random;
}
}
class="btn btn-lg variant-ghost-primary text-lg font-bold min-w-56 hover:variant-filled-primary"
@@ -696,7 +704,7 @@ function send_init_confirm_email({to_email, to_name, person_id, person_passcode,
$events_slct.event_presenter_id = event_presenter_obj.event_presenter_id_random;
$events_slct.presenter_obj = event_presenter_obj;
$events_loc.pres_mgmt.show_content__agree_text = event_presenter_obj.event_presenter_id_random;
$events_sess.pres_mgmt.show_content__agree_text = event_presenter_obj.event_presenter_id_random;
}
}
class="btn btn-md variant-ghost-success hover:variant-filled-success"
@@ -718,7 +726,7 @@ function send_init_confirm_email({to_email, to_name, person_id, person_passcode,
$events_slct.event_presenter_id = event_presenter_obj.event_presenter_id_random;
$events_slct.presenter_obj = event_presenter_obj;
$events_loc.pres_mgmt.show_content__agree_text = event_presenter_obj.event_presenter_id_random;
$events_sess.pres_mgmt.show_content__agree_text = event_presenter_obj.event_presenter_id_random;
}
}
class="btn btn-md variant-ghost-warning hover:variant-filled-warning"
@@ -731,7 +739,7 @@ function send_init_confirm_email({to_email, to_name, person_id, person_passcode,
{#if $ae_loc.trusted_access && event_presenter_obj.email}
{#if $ae_loc.trusted_access}
<!-- <span class="fas fa-envelope"></span>
<a
href="mailto:{event_presenter_obj.email}"
@@ -739,9 +747,9 @@ function send_init_confirm_email({to_email, to_name, person_id, person_passcode,
>{event_presenter_obj.email}</a> -->
{#if event_presenter_obj.agree}
{#if event_presenter_obj.file_count}
<span>
<span class="fas fa-file"></span>
<span class="fas fa-file mx-1"></span>
{event_presenter_obj.file_count ? `(${event_presenter_obj.file_count}x files)` : '(0 files)'}
</span>
{/if}
@@ -759,14 +767,12 @@ function send_init_confirm_email({to_email, to_name, person_id, person_passcode,
Passcode: {event_presenter_obj.passcode}
</span>
{/if} -->
{:else}
{/if}
{#if $ae_loc.trusted_access}
<!-- A button to copy the access link to the clipboard. -->
<!-- Example: /events_pres_mgmt/session/Wh8UnJlbIA0?person_id=fV1dl_IJ0yY&person_pass=abc123 -->
<!-- {#if $ae_loc.trusted_access}
<button
type="button"
class="btn btn-sm variant-soft-primary"
@@ -776,17 +782,7 @@ function send_init_confirm_email({to_email, to_name, person_id, person_passcode,
<span class="fas fa-copy mx-1"></span>
Copy Access Link
</button>
{/if}
<!-- on:click={() => {
let person_id = event_presenter_obj.person_id_random;
let person_pass = event_presenter_obj.person_passcode;
let person_url = `/events_pres_mgmt/session/{$events_slct.event_session_id}?person_id=${person_id}&person_pass=${person_pass}`;
let base_url = window.location.origin;
console.log(`Copy the access link to the clipboard: ${person_url}`);
clipboard.writeText(base_url+person_url);
}} -->
{/if} -->
</li>
{/each}
@@ -888,7 +884,7 @@ function send_init_confirm_email({to_email, to_name, person_id, person_passcode,
</section>
{#if $events_loc.pres_mgmt?.show_content__agree_text}
{#if $events_sess.pres_mgmt?.show_content__agree_text}
<div class="ae_quick_modal_container">
<section class="ae_quick_popover">
@@ -903,7 +899,7 @@ function send_init_confirm_email({to_email, to_name, person_id, person_passcode,
<button
on:click={
() => {
$events_loc.pres_mgmt.show_content__agree_text = null;
$events_sess.pres_mgmt.show_content__agree_text = null;
}
}
class="btn btn-md variant-ghost-secondary hover:variant-filled-secondary float-right"
@@ -919,7 +915,7 @@ function send_init_confirm_email({to_email, to_name, person_id, person_passcode,
<button
on:click={
() => {
$events_loc.pres_mgmt.show_content__agree_text = null;
$events_sess.pres_mgmt.show_content__agree_text = null;
}
}
class="btn btn-md variant-soft-secondary hover:variant-filled-secondary"
@@ -935,7 +931,8 @@ function send_init_confirm_email({to_email, to_name, person_id, person_passcode,
</div>
{/if}
{#if $events_loc.pres_mgmt.show_content__presenter_start}
{#if $events_sess.pres_mgmt?.show_content__presenter_start}
<div class="ae_quick_modal_container">
<section class="ae_quick_popover">
@@ -945,7 +942,7 @@ function send_init_confirm_email({to_email, to_name, person_id, person_passcode,
<button
on:click={
() => {
$events_loc.pres_mgmt.show_content__presenter_start = null;
$events_sess.pres_mgmt.show_content__presenter_start = null;
}
}
class="btn btn-sm variant-soft-secondary float-right"
@@ -960,7 +957,7 @@ function send_init_confirm_email({to_email, to_name, person_id, person_passcode,
<button
on:click={
() => {
$events_loc.pres_mgmt.show_content__presenter_start = null;
$events_sess.pres_mgmt.show_content__presenter_start = null;
}
}
class="btn btn-sm variant-soft-secondary float-right"

160
src/routes/events_pres_mgmt/session/[slug]/presenter_view.svelte
View File

@@ -1,6 +1,8 @@
<script lang="ts">
console.log(`ae_events_pres_mgmt session [slug] form_agree.svelte`);
export let data: any;
import { onMount } from 'svelte';
import { clipboard, FileDropzone } from '@skeletonlabs/skeleton';
import { liveQuery } from "dexie";
@@ -130,6 +132,128 @@ onMount(() => {
// return ae_promises.update__event_presenter_obj;
// }
async function handle_submit_form_files(event) {
console.log('*** handle_submit_form() ***');
$events_sess.pres_mgmt.disable_submit__event_file_obj = true;
$events_sess.pres_mgmt.submit_status = 'saving';
let hosted_file_results;
if (event.target.presenter_event_file.files.length > 0) {
hosted_file_results = await handle_input_upload_files(event.target.presenter_event_file.files);
if (hosted_file_results) {
console.log(`hosted_file_results:`, hosted_file_results);
} else {
console.log(`hosted_file_results:`, hosted_file_results);
}
}
$events_sess.pres_mgmt.disable_submit__event_file_obj = false;
}
async function handle_input_upload_files(input_upload_files) {
console.log('*** handle_input_upload_files() ***');
let link_to_type = 'event_presenter';
let link_to_id = $events_slct.event_presenter_id;
const form_data = new FormData();
form_data.append('account_id', $ae_loc.account_id);
form_data.append('link_to_type', link_to_type);
form_data.append('link_to_id', link_to_id);
for (let i = 0; i < input_upload_files.length; i++) {
form_data.append(`file_list`, input_upload_files[i]);
}
let params = null;
let endpoint = '/hosted_file/upload_files';
console.log(form_data);
params = null;
// Uncomment and the post_promise is not seen by the "await" below
// post_promise = await api.post_object({api_cfg: $cfg.api, endpoint: endpoint, params: params, data:form_data});
// Uncomment so that the post_promise is not seen by the "await" below
ae_promises.upload__hosted_file_obj = await api.post_object({api_cfg: $ae_api, endpoint: endpoint, params: params, form_data: form_data})
.then(async function (result) {
// NOTE: The /hosted_file/upload_files endpoint will always return a list of successful files uploaded. In this case we are only uploading one file and expecting a list of one item.
let x = 0;
console.log(result[x]);
let hosted_file_obj = result[x];
let hosted_file_id = hosted_file_obj.hosted_file_id_random;
let event_file_data: key_val = {};
event_file_data['hosted_file_id_random'] = hosted_file_id;
event_file_data['for_type'] = link_to_type;
event_file_data['for_id_random'] = link_to_id;
event_file_data['filename'] = hosted_file_obj.filename;
event_file_data['extension'] = hosted_file_obj.extension;
event_file_data['enable'] = true;
console.log(event_file_data);
// $events_sess.pres_mgmt.new_upload_list[i].uploaded_bytes = 10; // fake 10 bytes at least...
let event_file_id = await events_func.create_event_file_obj_from_hosted_file_async({
api_cfg: $ae_api,
hosted_file_id: hosted_file_id,
data: event_file_data,
log_lvl: 2
})
.then(function (create_result) {
console.log(create_result); // NOTE: This should be the event_file_id string
// let event_file_id = create_result;
return create_result;
});
return event_file_id;
})
.then(function (event_file_id) {
// NOTE: Need to make sure the event file records are created first. The update won't see the changes if too fast.
// dispatch(
// 'event_file_obj_li_updated',
// {
// link_to_type: link_to_type,
// link_to_id: link_to_id,
// }
// );
// $ae_events.pres_mgmt.new_upload_list[i].uploaded = true;
// $ae_events.pres_mgmt.new_upload_list[i].uploaded_bytes = event.target.event_file_upload_file_list.files[i].size;
return event_file_id;
})
.catch(function (error) {
console.log('Something went wrong.');
console.log(error);
return false;
})
.finally(function (event_file_id) {
// $events_sess.pres_mgmt.files_uploading_count--;
return event_file_id;
});
console.log(ae_promises.upload__hosted_file_obj);
let hosted_file_result = ae_promises.upload__hosted_file_obj;
return hosted_file_result;
}
</script>
{#await $lq__event_presenter_obj}
@@ -189,7 +313,7 @@ onMount(() => {
type="button"
class="btn btn-sm variant-soft-warning"
use:clipboard={encodeURI(`${data.url.origin}/events_pres_mgmt/session/${$events_slct.event_session_id}?person_id=${event_presenter_obj.person_id_random}&person_pass=${event_presenter_obj.person_passcode}&presentation_id=${event_presentation_obj.event_presentation_id_random}&presenter_id=${event_presenter_obj.event_presenter_id_random}`)}
use:clipboard={encodeURI(`${$ae_loc.url_origin}/events_pres_mgmt/session/${$events_slct.event_session_id}?person_id=${$events_slct.presenter_obj.person_id_random}&person_pass=${$events_slct.presenter_obj.person_passcode}&presentation_id=${$events_slct.presentation_obj.event_presentation_id_random}&presenter_id=${$events_slct.presenter_obj.event_presenter_id_random}`)}
>
<span class="fas fa-copy mx-1"></span>
Copy Access Link
@@ -198,14 +322,23 @@ onMount(() => {
</li>
</ul>
<h3 class="h4">Files:</h3>
<h3 class="h4">Files: {$events_slct.presenter_obj.file_count ? `${$events_slct.presenter_obj.file_count}x` : '-- none --'}</h3>
<span class="text-muted bg-orange-100 p-2 rounded-md text-center">
WARNING: This is a work in progress. The file upload feature is not yet fully functional.
</span>
<form
class="modal-form {$ae_loc.hub.classes__form}"
on:submit|preventDefault={handle_submit_form_files}
>
<label for="input__presenter_event_file">
Upload outline or draft file(s):
<FileDropzone
id="input__presenter_event_file"
name="presenter_event_file"
padding="p-1"
accept="image/*"
accept="*"
class="w-96 variant-glass-warning"
on:change={(e) => {
console.log('*** FileDropzone change event ***', e);
@@ -219,13 +352,30 @@ onMount(() => {
>
<svelte:fragment slot="lead"><span class="fas fa-file-upload"></svelte:fragment>
<svelte:fragment slot="message"><strong>Upload your file</strong> (drag and drop)</svelte:fragment>
<svelte:fragment slot="meta">High resolution image files only<br>(PNG, WEBP, JPG, etc)</svelte:fragment>
<svelte:fragment slot="meta">Presentation related files only<br>(PowerPoint, Keynote, PDF, mp4, Word Doc, Excel, txt, etc)</svelte:fragment>
{ae_placeholder_li.new_file ?? 'No files selected.'}
</FileDropzone>
</label>
File count: {$events_slct.presenter_obj.file_count ?? '-- none --'}
<button
type="submit"
class="btn btn-md variant-ghost-secondary m-2"
disabled={($events_sess.pres_mgmt.disable_submit__event_file_obj)}
on:click={() => {
console.log('*** Save button clicked ***');
// if (!confirm('Are you sure you want to save this event_presenter?')) {return false;}
// handle_submit_form();
// handle_submit_form;
}}
>
<span class="fas fa-save mx-1"></span>
Upload File
</button>
</form>
{#if $lq__event_file_obj_li}
<ul
class="space-y-2 px-4"