818 lines
30 KiB
Svelte
818 lines
30 KiB
Svelte
<script lang="ts">
|
|
console.log(`ae_events_pres_mgmt session [slug] form_agree.svelte`);
|
|
|
|
export let data: any;
|
|
|
|
import { createEventDispatcher, onMount } from 'svelte';
|
|
import { clipboard, FileDropzone } from '@skeletonlabs/skeleton';
|
|
import { liveQuery } from "dexie";
|
|
|
|
const dispatch = createEventDispatcher();
|
|
|
|
import type { key_val } from '$lib/ae_stores';
|
|
import { ae_util, shorten_string } from '$lib/ae_utils';
|
|
import { api } from '$lib/api';
|
|
import Element_data_store from '$lib/element_data_store.svelte';
|
|
import Element_ae_crud from '$lib/element_ae_crud.svelte';
|
|
|
|
import { ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
|
|
import { db_events } from "$lib/db_events";
|
|
import { events_loc, events_sess, events_slct, events_trigger } from '$lib/ae_events_stores';
|
|
import { events_func } from '$lib/ae_events_functions';
|
|
import ElementAeCrud from '$lib/element_ae_crud.svelte';
|
|
|
|
|
|
let ae_placeholder_li: key_val = {};
|
|
let ae_promises: key_val = {}; // Promise<any>;
|
|
let ae_tmp: key_val = {};
|
|
ae_tmp.show__file_li = true;
|
|
let ae_triggers: key_val = {};
|
|
|
|
let lq__event_session_obj = liveQuery(
|
|
() => db_events.sessions.get($events_slct.event_session_id)
|
|
);
|
|
|
|
// let lq__event_presentation_obj = liveQuery(
|
|
// async () => await db_events.presentations.get($events_slct.event_presentation_id)
|
|
// );
|
|
|
|
console.log(`$events_slct.event_presenter_id:`, $events_slct.event_presenter_id);
|
|
let lq__event_presenter_obj = liveQuery(
|
|
() => db_events.presenters.get($events_slct.event_presenter_id)
|
|
);
|
|
|
|
let lq__event_file_obj_li = liveQuery(
|
|
async () => await db_events.files.where('event_presenter_id_random').equals($events_slct.event_presenter_id).toArray()
|
|
);
|
|
|
|
// $events_slct.event_presenter_obj = $lq__event_presenter_obj;
|
|
|
|
// $events_sess.pres_mgmt.disable_submit__opt_out = false;
|
|
|
|
// let tmp_agree = false;
|
|
// let tmp_opt_out: key_val = {
|
|
// audio: false,
|
|
// video: false,
|
|
// transcription_and_publication: false,
|
|
// publication_in_app: false
|
|
// };
|
|
|
|
onMount(() => {
|
|
console.log('Events Session [slug]: presenter_view.svelte');
|
|
console.log(`$events_slct.event_presenter_id:`, $events_slct.event_presenter_id);
|
|
// console.log(`$lq__event_presenter_obj:`, $lq__event_presenter_obj);
|
|
|
|
$slct_trigger = 'load__event_file_obj_li';
|
|
});
|
|
|
|
|
|
// async function handle_submit_form(event) {
|
|
// console.log('*** handle_submit_form() ***');
|
|
|
|
// $events_sess.pres_mgmt.disable_submit__opt_out = true;
|
|
// $events_sess.pres_mgmt.submit_status = 'saving';
|
|
|
|
// // Data in
|
|
// let form_data = new FormData(event.target);
|
|
// console.log(form_data);
|
|
|
|
// let opt_out_di: key_val = ae_util.extract_prefixed_form_data({prefix: null, form_data: form_data, trim_values: true, bool_tf_str: true, log_lvl: 0});
|
|
// console.log(`opt_out_di:`, opt_out_di);
|
|
|
|
// // Data out
|
|
// let opt_out_do: key_val = {};
|
|
// opt_out_do.optout_audio = opt_out_di.optout_audio??false;
|
|
// opt_out_do.optout_video = opt_out_di.optout_video??false;
|
|
// opt_out_do.optout_transcription_and_publication = opt_out_di.optout_transcription_and_publication??false;
|
|
// opt_out_do.optout_publication_in_app = opt_out_di.optout_publication_in_app??false;
|
|
|
|
// console.log(`opt_out_do:`, opt_out_do);
|
|
|
|
// let data_out = {
|
|
// data_json: opt_out_do,
|
|
// }
|
|
|
|
// ae_promises.update__event_presenter_obj = await handle_update__event_presenter({
|
|
// obj_type: 'event_presenter',
|
|
// obj_id: $lq__event_presenter_obj?.event_presenter_id_random,
|
|
// data: data_out
|
|
// });
|
|
// console.log(ae_promises.update__event_presenter_obj);
|
|
|
|
// $events_sess.pres_mgmt.disable_submit__opt_out = false;
|
|
// $events_sess.pres_mgmt.submit_status = 'saved';
|
|
// }
|
|
|
|
|
|
// async function handle_update__event_presenter({
|
|
// obj_type,
|
|
// obj_id,
|
|
// data
|
|
// }) {
|
|
// console.log('*** handle_update__event_presenter() ***');
|
|
|
|
// ae_promises.update__event_presenter_obj = api.update_ae_obj_id_crud({
|
|
// api_cfg: $ae_api,
|
|
// obj_type: obj_type,
|
|
// obj_id: obj_id,
|
|
// fields: data,
|
|
// key: $ae_api.api_crud_super_key,
|
|
// return_obj: true,
|
|
// log_lvl: 2
|
|
// })
|
|
// .then(async function (update__obj_result) {
|
|
// if (!update__obj_result) {
|
|
// console.log('The result was null or false.');
|
|
// return false;
|
|
// } else {
|
|
// console.log(`update__obj_result = `, update__obj_result);
|
|
// }
|
|
// $slct_trigger = 'load__event_presenter_obj_li';
|
|
// return update__obj_result;
|
|
// })
|
|
// .catch(function (error) {
|
|
// console.log('Something went wrong.');
|
|
// console.log(error);
|
|
// return false;
|
|
// });
|
|
|
|
// 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 = api.post_object({
|
|
api_cfg: $ae_api,
|
|
endpoint: endpoint,
|
|
params: params,
|
|
form_data: form_data,
|
|
task_id: link_to_id,
|
|
log_lvl: 1
|
|
})
|
|
.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--;
|
|
$slct_trigger = 'load__event_file_obj_li';
|
|
|
|
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;
|
|
}
|
|
|
|
async function handle_delete__event_file({event_file_id}) {
|
|
console.log(`*** handle_delete__event_file() *** event_file_id:`, event_file_id);
|
|
|
|
let link_to_type = 'event_presenter';
|
|
let link_to_id = $events_slct.event_presenter_id;
|
|
|
|
ae_promises.delete__event_file_obj = await events_func.handle_delete_ae_obj_id__event_file({
|
|
api_cfg: $ae_api,
|
|
event_file_id: event_file_id,
|
|
log_lvl: 2
|
|
})
|
|
.then(function (event_file_obj_result) {
|
|
console.log(event_file_obj_result);
|
|
if (!event_file_obj_result) {
|
|
console.log('The result was null or false.');
|
|
return false;
|
|
} else {
|
|
console.log(`event_file_obj_result = `, event_file_obj_result);
|
|
}
|
|
|
|
dispatch(
|
|
'event_file_obj_deleted',
|
|
{
|
|
event_file_id: event_file_id,
|
|
link_to_type: link_to_type,
|
|
link_to_id: link_to_id,
|
|
}
|
|
|
|
);
|
|
return event_file_obj_result;
|
|
}).catch(function (error) {
|
|
console.log('Something went wrong deleting the event file.');
|
|
console.log(error);
|
|
return false;
|
|
});
|
|
|
|
return ae_promises.delete__event_file_obj;
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
{#await $lq__event_presenter_obj}
|
|
Loading...
|
|
{:then result}
|
|
|
|
{#if $lq__event_presenter_obj}
|
|
<h2 class="h3">
|
|
Presenter Details for:<br>
|
|
<strong>
|
|
{$events_slct.presenter_obj.full_name}
|
|
</strong>
|
|
<span class="text-sm">
|
|
({$events_slct.presenter_obj.email})
|
|
</span>
|
|
|
|
{#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 -->
|
|
<button
|
|
type="button"
|
|
|
|
|
|
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}`)}
|
|
class="btn btn-sm variant-ghost-warning float-right m-1"
|
|
title="Copy the presenter access link to the clipboard."
|
|
>
|
|
<span class="fas fa-copy mx-1"></span>
|
|
Copy Access Link
|
|
</button>
|
|
{/if}
|
|
</h2>
|
|
|
|
<section class="p-2">
|
|
<h3 class="h4">
|
|
<Element_ae_crud
|
|
api_cfg={$ae_api}
|
|
object_type={'event_presentation'}
|
|
object_id={$events_slct.presentation_obj.event_presentation_id_random}
|
|
field_name={'name'}
|
|
field_type={'text'}
|
|
field_value={$events_slct.presentation_obj.name}
|
|
allow_null={false}
|
|
hide_edit_btn={!$ae_loc.trusted_access}
|
|
outline_element={false}
|
|
show_crud={false}
|
|
display_inline={true}
|
|
class_li={''}
|
|
>
|
|
Title: "{$events_slct.presentation_obj.name}"
|
|
</Element_ae_crud>
|
|
</h3>
|
|
|
|
<h3 class="h4">Presenter:</h3>
|
|
<ul
|
|
class="space-y-2 px-4"
|
|
>
|
|
<li>
|
|
<span class="fas fa-user"></span>
|
|
<!-- {#if !$events_sess.pres_mgmt.show_edit__event_presenter_name}
|
|
{$events_slct.presenter_obj.full_name}
|
|
{:else} -->
|
|
<!-- <div
|
|
hidden={!$events_sess.pres_mgmt.show_edit__event_presenter_name}
|
|
> -->
|
|
<Element_ae_crud
|
|
api_cfg={$ae_api}
|
|
object_type={'event_presenter'}
|
|
object_id={$events_slct.presenter_obj.event_presenter_id_random}
|
|
field_name={'given_name'}
|
|
field_type={'text'}
|
|
field_value={$events_slct.presenter_obj.given_name}
|
|
allow_null={false}
|
|
hide_edit_btn={!$ae_loc.trusted_access}
|
|
outline_element={false}
|
|
show_crud={false}
|
|
display_inline={true}
|
|
class_li={''}
|
|
>
|
|
{$events_slct.presenter_obj.given_name}
|
|
</Element_ae_crud>
|
|
<Element_ae_crud
|
|
api_cfg={$ae_api}
|
|
object_type={'event_presenter'}
|
|
object_id={$events_slct.presenter_obj.event_presenter_id_random}
|
|
field_name={'family_name'}
|
|
field_type={'text'}
|
|
field_value={$events_slct.presenter_obj.family_name}
|
|
allow_null={false}
|
|
hide_edit_btn={!$ae_loc.trusted_access}
|
|
outline_element={false}
|
|
show_crud={false}
|
|
display_inline={true}
|
|
class_li={''}
|
|
>
|
|
{$events_slct.presenter_obj.family_name}
|
|
</Element_ae_crud>
|
|
<!-- </div> -->
|
|
<!-- {/if} -->
|
|
|
|
<!-- <button
|
|
on:click={() => {
|
|
console.log('*** Edit button clicked ***');
|
|
$events_sess.pres_mgmt.show_edit__event_presenter_name = !$events_sess.pres_mgmt.show_edit__event_presenter_name;
|
|
}}
|
|
class="btn btn-sm variant-soft-warning hover:variant-ghost-warning"
|
|
>
|
|
<span class="fas fa-edit mx-1"></span>
|
|
Edit
|
|
</button> -->
|
|
</li>
|
|
<li>
|
|
<Element_ae_crud
|
|
api_cfg={$ae_api}
|
|
object_type={'event_presenter'}
|
|
object_id={$events_slct.presenter_obj.event_presenter_id_random}
|
|
field_name={'email'}
|
|
field_type={'text'}
|
|
field_value={$events_slct.presenter_obj.email}
|
|
allow_null={false}
|
|
hide_edit_btn={!$ae_loc.trusted_access}
|
|
outline_element={false}
|
|
show_crud={false}
|
|
display_inline={false}
|
|
class_li={''}
|
|
>
|
|
<span class="fas fa-envelope"></span>
|
|
<a
|
|
href="mailto:{$events_slct.presenter_obj.email}"
|
|
class="text-blue-500"
|
|
>{$events_slct.presenter_obj.email}</a>
|
|
</Element_ae_crud>
|
|
|
|
{#if $events_slct.presenter_obj.person_primary_email != $events_slct.presenter_obj.email}
|
|
<Element_ae_crud
|
|
api_cfg={$ae_api}
|
|
object_type={'person'}
|
|
object_id={$events_slct.presenter_obj.person_id_random}
|
|
field_name={'primary_email'}
|
|
field_type={'text'}
|
|
field_value={$events_slct.presenter_obj.person_primary_email}
|
|
allow_null={false}
|
|
hide_edit_btn={!$ae_loc.trusted_access}
|
|
outline_element={false}
|
|
show_crud={false}
|
|
display_inline={false}
|
|
class_li={''}
|
|
>
|
|
<span class="fas fa-envelope"></span>
|
|
<a
|
|
href="mailto:{$events_slct.presenter_obj.person_primary_email}"
|
|
class="text-blue-500"
|
|
>{$events_slct.presenter_obj.person_primary_email}</a>
|
|
</Element_ae_crud>
|
|
{/if}
|
|
|
|
</li>
|
|
<li>
|
|
<Element_ae_crud
|
|
api_cfg={$ae_api}
|
|
object_type={'event_presenter'}
|
|
object_id={$events_slct.presenter_obj.event_presenter_id_random}
|
|
field_name={'affiliations'}
|
|
field_type={'text'}
|
|
field_value={$events_slct.presenter_obj.affiliations}
|
|
allow_null={false}
|
|
hide_edit_btn={!$ae_loc.trusted_access}
|
|
outline_element={false}
|
|
show_crud={false}
|
|
display_inline={false}
|
|
class_li={''}
|
|
>
|
|
<span class="fas fa-building"></span>
|
|
{$events_slct.presenter_obj.affiliations ?? '-- affiliations not set --'}
|
|
</Element_ae_crud>
|
|
</li>
|
|
<li>
|
|
<Element_ae_crud
|
|
api_cfg={$ae_api}
|
|
object_type={'event_presenter'}
|
|
object_id={$events_slct.presenter_obj.event_presenter_id_random}
|
|
field_name={'professional_title'}
|
|
field_type={'text'}
|
|
field_value={$events_slct.presenter_obj.professional_title}
|
|
allow_null={false}
|
|
hide_edit_btn={!$ae_loc.trusted_access}
|
|
outline_element={false}
|
|
show_crud={false}
|
|
display_inline={false}
|
|
class_li={''}
|
|
>
|
|
<span class="fas fa-user-tag"></span>
|
|
{$events_slct.presenter_obj.professional_title && $events_slct.presenter_obj.professional_title.length ? $events_slct.presenter_obj.professional_title : '-- professional title not set --'}
|
|
</Element_ae_crud>
|
|
</li>
|
|
<li>
|
|
<Element_ae_crud
|
|
api_cfg={$ae_api}
|
|
object_type={'person'}
|
|
object_id={$events_slct.presenter_obj.person_id_random}
|
|
field_name={'passcode'}
|
|
field_type={'text'}
|
|
field_value={$events_slct.presenter_obj.person_passcode}
|
|
allow_null={true}
|
|
hide_edit_btn={!$ae_loc.trusted_access}
|
|
outline_element={false}
|
|
show_crud={false}
|
|
display_inline={false}
|
|
class_li={''}
|
|
>
|
|
<span class="fas fa-user-secret"></span>
|
|
{$events_slct.presenter_obj.person_passcode ?? '-- passcode not set --'} (your passcode)
|
|
</Element_ae_crud>
|
|
|
|
<!-- <span class="fas fa-user-secret"></span>
|
|
{$events_slct.presenter_obj.person_passcode} (your passcode)
|
|
|
|
<button
|
|
title="Edit your passcode"
|
|
class="btn btn-sm variant-soft-warning"
|
|
class:hidden={!$ae_loc.trusted_access}
|
|
>
|
|
<span class="fas fa-edit">
|
|
</span>
|
|
Edit
|
|
</button> -->
|
|
</li>
|
|
</ul>
|
|
|
|
<h3 class="h4">
|
|
Files: {$events_slct.presenter_obj.file_count ? `${$events_slct.presenter_obj.file_count}x` : '-- none --'}
|
|
</h3>
|
|
<button
|
|
type="button"
|
|
on:click={() => {
|
|
console.log('*** Refresh button clicked ***');
|
|
ae_tmp.show__file_li = false;
|
|
console.log(`$lq__event_file_obj_li:`, $lq__event_file_obj_li);
|
|
$slct_trigger = 'load__event_file_obj_li';
|
|
ae_tmp.show__file_li = true;
|
|
}}
|
|
class="btn btn-sm variant-soft-secondary hover:variant-ghost-warning float-right transition hover:transition-all"
|
|
>
|
|
<span class="fas fa-sync-alt mx-1"></span>
|
|
Refresh Files
|
|
</button>
|
|
|
|
<div class="text-sm text-center bg-orange-100 rounded-md p-2">
|
|
WARNING: The file upload and management is a work in progress. You can upload and delete files, but not yet rename them.
|
|
</div>
|
|
<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="*"
|
|
class="w-96 variant-glass-warning"
|
|
on:change={(e) => {
|
|
console.log('*** FileDropzone change event ***', e);
|
|
|
|
if (e.target.files.length) {
|
|
ae_placeholder_li.new_file = `Ready to upload: ${e.target.files[0].name}`;
|
|
$events_sess.pres_mgmt.disable_submit__event_file_obj = false;
|
|
} else {
|
|
ae_placeholder_li.new_file = null;
|
|
}
|
|
}}
|
|
>
|
|
<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">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>
|
|
|
|
<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;
|
|
}}
|
|
>
|
|
{#await ae_promises.upload__hosted_file_obj}
|
|
<span class="fas fa-spinner fa-spin mx-1"></span>
|
|
<span class="">
|
|
Uploading
|
|
{#if $ae_sess.api_upload_kv[$events_slct.event_presenter_id]}
|
|
{$ae_sess.api_upload_kv[$events_slct.event_presenter_id].percent_completed}%
|
|
{/if}
|
|
</span>
|
|
{:then}
|
|
<span class="fas fa-upload mx-1"></span>
|
|
<span class="text-sm">
|
|
Upload:
|
|
</span>
|
|
<!-- <span class="fas fa-save mx-1"></span> -->
|
|
<span class="grow">
|
|
File
|
|
</span>
|
|
{/await}
|
|
<!-- <span class="fas fa-save mx-1"></span>
|
|
<span class="grow">
|
|
Upload File
|
|
</span> -->
|
|
</button>
|
|
|
|
</form>
|
|
|
|
|
|
{#if ae_tmp.show__file_li && $lq__event_file_obj_li && $lq__event_file_obj_li.length > 0}
|
|
<ul
|
|
class="space-y-2 px-4"
|
|
>
|
|
{#each $lq__event_file_obj_li as event_file_obj}
|
|
<li>
|
|
<!-- <span class="fas fa-file"></span> -->
|
|
<!-- <a
|
|
href={file_obj.url}
|
|
class="text-blue-500"
|
|
>{file_obj.filename}</a> -->
|
|
|
|
<button
|
|
on:click={() => {
|
|
// ae_promises[event_file_obj.event_file_id_random]
|
|
ae_promises[event_file_obj.event_file_id_random] = api.download_hosted_file({
|
|
api_cfg: $ae_api,
|
|
hosted_file_id: event_file_obj.hosted_file_id_random,
|
|
return_file: true,
|
|
filename: event_file_obj.filename,
|
|
auto_download: true,
|
|
log_lvl: 1
|
|
});
|
|
|
|
// window.postMessage({ type: 'download_event_file', event_file_id: event_file_obj.event_file_id_random, filename: event_file_obj.filename, auto_download: true }, '*');
|
|
}}
|
|
class="btn btn-md variant-ghost-primary hover:variant-filled-primary min-w-96"
|
|
title={`Download this file: ${event_file_obj.filename} [API] -- SHA256 hash: ${event_file_obj.hash_sha256.slice(0, 10)}...`}
|
|
>
|
|
{#await ae_promises[event_file_obj.event_file_id_random]}
|
|
<span class="fas fa-spinner fa-spin mx-1"></span>
|
|
<span class="">
|
|
Downloading
|
|
{#if $ae_sess.api_download_kv[event_file_obj.hosted_file_id_random]}
|
|
{$ae_sess.api_download_kv[event_file_obj.hosted_file_id_random].percent_completed}%
|
|
{/if}
|
|
:
|
|
</span>
|
|
{:then}
|
|
<span class="fas fa-download mx-1"></span>
|
|
<span class="text-sm">
|
|
Download:
|
|
</span>
|
|
{/await}
|
|
|
|
<span class="grow">
|
|
{ae_util.shorten_filename({filename: event_file_obj.filename, max_length: 25})}
|
|
</span>
|
|
</button>
|
|
|
|
<!-- Select from options for the purpose of this file -->
|
|
{#if ae_tmp[event_file_obj.event_file_id_random] && ae_tmp[event_file_obj.event_file_id_random]?.show__edit_file_purpose === true}
|
|
<Element_ae_crud
|
|
trigger_patch={ae_triggers.update_event_file_purpose}
|
|
api_cfg={$ae_api}
|
|
object_type={'event_file'}
|
|
object_id={event_file_obj.event_file_id_random}
|
|
field_name={'file_purpose'}
|
|
field_type={'button'}
|
|
field_value={ae_tmp[event_file_obj.event_file_id_random].file_purpose}
|
|
allow_null={false}
|
|
hide_edit_btn={true}
|
|
outline_element={false}
|
|
show_crud={false}
|
|
display_inline={true}
|
|
class_li={'m-1'}
|
|
on:ae_crud_updated={e => {
|
|
console.log(`ae_crud_updated:`, e.detail);
|
|
|
|
events_func.handle_load_ae_obj_id__event_file({api_cfg: $ae_api, event_file_id: event_file_obj.event_file_id_random, log_lvl: 1})
|
|
.then(function (load_results) {
|
|
// We need to force reload the Indexed DB - Dexie.js?
|
|
// Sometimes the changes are not seen. The file disappears when the Save button is pressed.
|
|
|
|
// Maybe reload page?
|
|
// window.location.reload();
|
|
})
|
|
.finally(function () {
|
|
// ae_tmp[event_file_obj.event_file_id_random].file_purpose = null;
|
|
ae_tmp[event_file_obj.event_file_id_random].show__edit_file_purpose = false;
|
|
// Careful with the trigger_patch. It will keep firing if not reset.
|
|
ae_triggers.update_event_file_purpose = false;
|
|
});
|
|
}}
|
|
>
|
|
|
|
<select
|
|
bind:value={ae_tmp[event_file_obj.event_file_id_random].file_purpose}
|
|
class="select min-w-fit max-w-fit text-sm mx-1"
|
|
>
|
|
<option value="outline" selected={event_file_obj.file_purpose === 'outline'}>1. Outline</option>
|
|
<option value="draft" selected={event_file_obj.file_purpose === 'draft'}>2. Draft</option>
|
|
<option value="final" selected={event_file_obj.file_purpose === 'final'}>3. Final</option>
|
|
<option value="supporting">X. Supporting File (audio, video, data, etc)</option>
|
|
<option value="handout">X. Handout</option>
|
|
<option value="other">X. Other</option>
|
|
<!-- <option value="poster">Final - Poster</option> -->
|
|
<!-- <option value="presentation">Final - Presentation</option> -->
|
|
<!-- Shows in session room -->
|
|
</select>
|
|
|
|
<button
|
|
type="button"
|
|
on:click={() => {
|
|
console.log('*** Save button clicked ***');
|
|
// if (!confirm('Are you sure you want to save this event_presenter?')) {return false;}
|
|
|
|
console.log(`Selected event_file_id: ${event_file_obj.event_file_id_random}`);
|
|
|
|
ae_triggers.update_event_file_purpose = true;
|
|
// ae_triggers.update_event_file_purpose = event_file_obj.event_file_id_random;
|
|
|
|
|
|
|
|
// ae_tmp.show__file_li = false;
|
|
}}
|
|
class="btn btn-sm variant-soft-success hover:variant-ghost-success mx-1"
|
|
>
|
|
<span class="fas fa-save mx-1"></span>
|
|
Save
|
|
</button>
|
|
</Element_ae_crud>
|
|
{:else}
|
|
<button
|
|
type="button"
|
|
title="Edit the purpose of this file"
|
|
on:click={() => {
|
|
ae_tmp[event_file_obj.event_file_id_random] = {
|
|
file_purpose: event_file_obj.file_purpose,
|
|
show__edit_file_purpose: true
|
|
}
|
|
|
|
// ae_tmp[event_file_obj.event_file_id_random].file_purpose = event_file_obj.file_purpose;
|
|
// ae_tmp[event_file_obj.event_file_id_random].show__edit_file_purpose = true;
|
|
}}
|
|
class="btn btn-sm variant-soft-primary hover:variant-ghost-primary mx-1"
|
|
>
|
|
<span class="fas fa-edit mx-1"></span>
|
|
Edit
|
|
</button>
|
|
{/if}
|
|
|
|
|
|
<button type="button"
|
|
title="Delete this file"
|
|
on:click={async () => {
|
|
if (!confirm(`Are you sure you want to delete this file?\n${event_file_obj.filename} [${event_file_obj.event_file_id_random}]`)) {return false;}
|
|
|
|
ae_promises[event_file_obj.event_file_id_random] = handle_delete__event_file({event_file_id: event_file_obj.event_file_id_random});
|
|
}}
|
|
class="btn btn-sm variant-soft-warning event_file_delete_btn width_100"
|
|
>
|
|
<span class="fas fa-minus mx-1"></span>
|
|
Delete
|
|
</button>
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
{:else}
|
|
<p>No files uploaded</p>
|
|
{/if}
|
|
|
|
|
|
|
|
<!-- <ul
|
|
class="space-y-2 px-4"
|
|
>
|
|
{#if $events_slct.presenter_obj.file_li}
|
|
{#each $events_slct.presenter_obj.file_li as file_obj}
|
|
<li>
|
|
<span class="fas fa-file"></span>
|
|
<a
|
|
href={file_obj.url}
|
|
class="text-blue-500"
|
|
>{file_obj.name}</a>
|
|
</li>
|
|
{/each}
|
|
{:else}
|
|
<li>
|
|
<span class="fas fa-file"></span>
|
|
No files uploaded
|
|
</li>
|
|
{/if}
|
|
</ul> -->
|
|
|
|
</section>
|
|
|
|
{/if}
|
|
|
|
{/await}
|