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

Now with more download and copy link options.

Browse Source
This commit is contained in:
Scott Idem
2024-10-18 15:51:52 -04:00
parent 488031f90c
commit 5da209ee1c
7 changed files with 228 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/lib/ae_utils/ae_utils.ts
View File

@@ -2,7 +2,7 @@
import { process_permission_checks } from './ae_utils__perm_checks';
import { iso_datetime_formatter } from './ae_utils__datetime_format';
import { is_datetime_recent } from './ae_utils__is_datetime_recent';
import { format_bytes, guess_file_name, guess_file_extension, get_file_hash } from './ae_utils__files';
import { clean_filename, format_bytes, guess_file_name, guess_file_extension, get_file_hash } from './ae_utils__files';
type key_str = {
[key: string]: string;
@@ -710,6 +710,7 @@ export let ae_util = {
is_datetime_recent: is_datetime_recent,
process_permission_checks: process_permission_checks,
iso_datetime_formatter: iso_datetime_formatter,
clean_filename: clean_filename,
format_bytes: format_bytes,
number_w_commas: number_w_commas,
guess_file_name: guess_file_name,

14
src/lib/ae_utils/ae_utils__files.ts
View File

@@ -1,5 +1,19 @@
// These are all file related functions.
// Use a defined list of unacceptable characters to remove from a filename.
// Updated 2024-10-18
export let clean_filename = function clean_filename(filename: any|string, unacceptable_chars: RegExp = /[ <>:"/\\|?*]/g, replacement_char: string = '_') {
// console.log('*** clean_filename() ***');
if (!filename) {
return '';
}
let cleaned_filename = filename.replace(unacceptable_chars, replacement_char);
// console.log(cleaned_filename);
return cleaned_filename;
}
export let format_bytes = function format_bytes(
bytes: number,
decimals: number = 2

105
src/lib/element_manage_event_file_li.svelte
View File

@@ -30,7 +30,7 @@ export let display_mode: string = 'default'; // 'default', 'compact', 'minimal',
let ae_promises: key_val = {};
let ae_tmp: key_val = {};
ae_tmp.show__file_li = true;
ae_tmp.show__direct_download = false;
ae_tmp.show__direct_download = $events_loc.pres_mgmt.show__direct_download;
// let ae_triggers: key_val = {};
onMount(() => {
@@ -196,30 +196,95 @@ onMount(() => {
{event_file_obj.file_purpose}
</span>
</button>
<a
href="{$ae_api.base_url}/event/file/{event_file_obj.event_file_id_random}/download?filename={event_file_obj.filename}&x_no_account_id_token=direct-download"
class="btn btn-sm variant-soft-secondary m-0.5 *:hover:inline"
<span
class="px-4 py-2 flex flex-col gap-0.5"
class:hidden={!ae_tmp.show__direct_download}
title={`Download this file:\n${event_file_obj.filename}\n[API] SHA256: ${event_file_obj.hash_sha256.slice(0, 10)}... Hosted ID: ${event_file_obj.hosted_file_id_random} Event File ID: ${event_file_obj.event_file_id_random}`}
>
<span class="fas fa-download mx-1"></span>
<div class="hidden">
Download
<div class="flex flex-row gap-0.5">
<span class="text-xs text-gray-500 w-32">
Original:
</span>
<a
href="{$ae_api.base_url}/event/file/{event_file_obj?.event_file_id_random}/download?filename={ae_util.clean_filename(event_file_obj?.filename)}&x_no_account_id_token=direct-download"
class="btn btn-sm p-1 variant-soft-secondary *:hover:inline lg:text-xs underline"
title={`Download this file:\n${ae_util.clean_filename(event_file_obj?.filename)}\n[API] SHA256: ${event_file_obj?.hash_sha256.slice(0, 10)}...\nHosted ID: ${event_file_obj?.hosted_file_id_random} Event File ID: ${event_file_obj?.event_file_id_random}`}
>
<span class="fas fa-download mx-1"></span>
<span class="hidden">
Download
</span>
</a>
<button
type="button"
use:clipboard={encodeURI(`${$ae_api.base_url}/event/file/${event_file_obj?.event_file_id_random}/download?filename=${ae_util.clean_filename(event_file_obj?.filename)}&x_no_account_id_token=direct-download`)}
class="btn btn-sm p-1 variant-soft-secondary *:hover:inline lg:text-xs"
title="Copy the direct download file link: {ae_util.clean_filename(event_file_obj?.filename ?? 'unknown')}"
>
<span class="fas fa-copy mx-1"></span>
<span class="hidden">
Copy Link
</span>
</button>
</div>
</a>
<button
type="button"
use:clipboard={encodeURI(`${$ae_api.base_url}/event/file/${event_file_obj.event_file_id_random}/download?filename=${event_file_obj.filename}&x_no_account_id_token=direct-download`)}
class="btn btn-sm variant-soft-secondary m-0.5 *:hover:inline"
class:hidden={!ae_tmp.show__direct_download}
title="Copy the direct download file link to the clipboard."
>
<span class="fas fa-copy mx-1"></span>
<div class="hidden">
Copy Link
<div class="flex flex-row gap-0.5">
<span class="text-xs text-gray-500 w-32">
Session Name:
</span>
<a
href="{$ae_api.base_url}/event/file/{event_file_obj?.event_file_id_random}/download?filename={event_file_obj?.event_session_code}-{ae_util.clean_filename(event_file_obj?.event_presentation_name).substring(0, 20)}-{ae_util.clean_filename(event_file_obj?.event_presenter_full_name)}.{event_file_obj?.extension}&x_no_account_id_token=direct-download"
class="btn btn-sm p-1 variant-soft-secondary *:hover:inline lg:text-xs underline"
title={`Download renamed with session name to: ${event_file_obj?.event_session_code}-${ae_util.clean_filename(event_file_obj?.event_session_name).substring(0, 20)}-${ae_util.clean_filename(event_file_obj?.event_presenter_full_name)}.${event_file_obj?.extension}`}
>
<span class="fas fa-download mx-1"></span>
<span class="hidden">
Renamed
</span>
</a>
<button
type="button"
use:clipboard={encodeURI(`${$ae_api.base_url}/event/file/${event_file_obj?.event_file_id_random}/download?filename=${event_file_obj?.event_session_code}-${ae_util.clean_filename(event_file_obj?.event_session_name).substring(0, 20)}-${ae_util.clean_filename(event_file_obj?.event_presenter_full_name)}.${event_file_obj?.extension}&x_no_account_id_token=direct-download`)}
class="btn btn-sm p-1 variant-soft-secondary *:hover:inline lg:text-xs"
title="Copy the renamed file link"
>
<span class="fas fa-copy mx-1"></span>
<span class="hidden">
Copy Renamed
</span>
</button>
</div>
</button>
<div class="flex flex-row gap-0.5">
<span class="text-xs text-gray-500 w-32">
Presentation Name:
</span>
<a
href="{$ae_api.base_url}/event/file/{event_file_obj?.event_file_id_random}/download?filename={event_file_obj?.event_session_code}-{ae_util.clean_filename(event_file_obj?.event_presentation_name).substring(0, 20)}-{ae_util.clean_filename(event_file_obj?.event_presenter_full_name)}.{event_file_obj?.extension}&x_no_account_id_token=direct-download"
class="btn btn-sm p-1 variant-soft-secondary *:hover:inline lg:text-xs underline"
title={`Download renamed with presentation name to: ${event_file_obj?.event_session_code}-${ae_util.clean_filename(event_file_obj?.event_presentation_name).substring(0, 20)}-${ae_util.clean_filename(event_file_obj?.event_presenter_full_name)}.${event_file_obj?.extension}`}
>
<span class="fas fa-download mx-1"></span>
<span class="hidden">
Renamed
</span>
</a>
<button
type="button"
use:clipboard={encodeURI(`${$ae_api.base_url}/event/file/${event_file_obj?.event_file_id_random}/download?filename=${event_file_obj?.event_session_code}-${ae_util.clean_filename(event_file_obj?.event_presentation_name).substring(0, 20)}-${ae_util.clean_filename(event_file_obj?.event_presenter_full_name)}.${event_file_obj?.extension}&x_no_account_id_token=direct-download`)}
class="btn btn-sm p-1 variant-soft-secondary *:hover:inline lg:text-xs"
title="Copy the renamed file link"
>
<span class="fas fa-copy mx-1"></span>
<span class="hidden">
Copy Renamed
</span>
</button>
</div>
</span>
{:else}
<!-- Show change filename input field here -->
<span
class="flex flex-col gap-1 text-sm"

1
src/routes/events/[event_id]/locations/ae_comp__event_location_obj_li.svelte
View File

@@ -6,7 +6,6 @@ import { events_func } from '$lib/ae_events_functions';
import Comp_event_session_obj_li from '../../../events_pres_mgmt/ae_comp__event_session_obj_li_wrapper.svelte';
import Element_ae_crud from '$lib/element_ae_crud.svelte';
import Element_manage_event_file_li_wrap from '$lib/element_manage_event_file_li_all.svelte';
import Comp_event_device_obj_li from './../device/ae_comp__event_device_obj_li_wrapper.svelte';
// Exports

1
src/routes/events/[event_id]/reports/+page.svelte
View File

@@ -901,6 +901,7 @@ async function handle_qry__event_session(
<Comp_event_file_obj_tbl
bind:event_file_id_random_li={event_file_id_random_li}
bind:show_direct_download={$events_loc.pres_mgmt.show__direct_download}
show_location_fields={true}
show_presenter_fields={true}
show_presentation_fields={true}

27
src/routes/events/[event_id]/reports/event_reports_page_menu.svelte
View File

@@ -224,6 +224,33 @@ let ae_triggers: key_val = {};
{#if $ae_loc.authenticated_access}
<div class="flex flex-col gap-1 items-center">
<!-- Button to toggle between the showing additional hidden download buttons -->
{#if $events_loc.pres_mgmt.show__direct_download}
<button
type="button"
on:click={() => {
$events_loc.pres_mgmt.show__direct_download = !$events_loc.pres_mgmt.show__direct_download;
}}
class="btn btn-sm variant-ghost-success"
title="Hide additional direct download and copy link buttons?"
>
<span class="fas fa-eye-slash m-1"></span>
Hide Download Buttons?
</button>
{:else}
<button
type="button"
on:click={() => {
$events_loc.pres_mgmt.show__direct_download = !$events_loc.pres_mgmt.show__direct_download;
}}
class="btn btn-sm variant-ghost-warning"
title="Show additional direct download and copy link buttons?"
>
<span class="fas fa-eye m-1"></span>
Show Download Buttons?
</button>
{/if}
<!-- Button to toggle between the showing hidden sessions -->
{#if $events_loc.pres_mgmt.qry_hidden == 'all'}
<button

120
src/routes/events_pres_mgmt/ae_comp__event_file_obj_tbl.svelte
View File

@@ -16,6 +16,7 @@ export let event_file_id_random_li: Array<string> = [];
export let allow_basic: boolean = false;
export let allow_moderator: boolean = false;
// export let max_records: number = 100;
export let show_direct_download: boolean = false;
export let show_location_fields: boolean = false;
export let show_presentation_fields: boolean = false;
export let show_presenter_fields: boolean = false;
@@ -35,6 +36,9 @@ let lq_kv__event_file_obj_li = liveQuery(
() => db_events.files
.bulkGet(event_file_id_random_li)
);
// Define the list of unacceptable characters
const unacceptable_chars = /[ <>:"/\\|?*]/g;
</script>
@@ -70,7 +74,10 @@ let lq_kv__event_file_obj_li = liveQuery(
Filename
<!-- ({$lq_kv__event_file_obj_li?.length}&times;) -->
</th>
<th class="px-4 py-2">
<th
class="px-4 py-2"
class:hidden={!show_direct_download}
>
Link
</th>
<th class="px-4 py-2">Size</th>
@@ -152,28 +159,99 @@ let lq_kv__event_file_obj_li = liveQuery(
</button>
<!-- {event_file_obj?.filename} -->
</td>
<td class="px-4 py-2">
<a
href="{$ae_api.base_url}/event/file/{event_file_obj?.event_file_id_random}/download?filename={event_file_obj?.filename}&x_no_account_id_token=direct-download"
class="btn btn-sm variant-soft-secondary m-0.5 *:hover:inline lg:text-xs"
title={`Download this file:\n${event_file_obj?.filename}\n[API] SHA256: ${event_file_obj?.hash_sha256.slice(0, 10)}... Hosted ID: ${event_file_obj?.hosted_file_id_random} Event File ID: ${event_file_obj?.event_file_id_random}`}
<td
class="px-4 py-2 flex flex-col gap-0.5"
class:hidden={!show_direct_download}
>
<div
class:hidden={!show_direct_download}
class="flex flex-row gap-0.5">
<span class="text-xs text-gray-500 w-32">
Original:
</span>
<a
href="{$ae_api.base_url}/event/file/{event_file_obj?.event_file_id_random}/download?filename={ae_util.clean_filename(event_file_obj?.filename)}&x_no_account_id_token=direct-download"
class="btn btn-sm p-1 variant-soft-secondary *:hover:inline lg:text-xs underline"
title={`Download this file:\n${ae_util.clean_filename(event_file_obj?.filename)}\n[API] SHA256: ${event_file_obj?.hash_sha256.slice(0, 10)}...\nHosted ID: ${event_file_obj?.hosted_file_id_random} Event File ID: ${event_file_obj?.event_file_id_random}`}
>
<span class="fas fa-download mx-1"></span>
<span class="hidden">
Download
</span>
</a>
<button
type="button"
use:clipboard={encodeURI(`${$ae_api.base_url}/event/file/${event_file_obj?.event_file_id_random}/download?filename=${ae_util.clean_filename(event_file_obj?.filename)}&x_no_account_id_token=direct-download`)}
class="btn btn-sm p-1 variant-soft-secondary *:hover:inline lg:text-xs"
title="Copy the direct download file link: {ae_util.clean_filename(event_file_obj?.filename ?? 'unknown')}"
>
<span class="fas fa-copy mx-1"></span>
<span class="hidden">
Copy Link
</span>
</button>
</div>
<div
class="flex flex-row gap-0.5"
class:hidden={!show_direct_download}
>
<span class="fas fa-download mx-1"></span>
<div class="hidden">
Download
</div>
</a>
<button
type="button"
use:clipboard={encodeURI(`${$ae_api.base_url}/event/file/${event_file_obj?.event_file_id_random}/download?filename=${event_file_obj?.filename}&x_no_account_id_token=direct-download`)}
class="btn btn-sm variant-soft-secondary m-0.5 *:hover:inline lg:text-xs"
title="Copy the direct download file link to the clipboard."
<span class="text-xs text-gray-500 w-32">
Session Name:
</span>
<a
href="{$ae_api.base_url}/event/file/{event_file_obj?.event_file_id_random}/download?filename={event_file_obj?.event_session_code}-{ae_util.clean_filename(event_file_obj?.event_presentation_name).substring(0, 20)}-{ae_util.clean_filename(event_file_obj?.event_presenter_full_name)}.{event_file_obj?.extension}&x_no_account_id_token=direct-download"
class="btn btn-sm p-1 variant-soft-secondary *:hover:inline lg:text-xs underline"
title={`Download renamed with session name to: ${event_file_obj?.event_session_code}-${ae_util.clean_filename(event_file_obj?.event_session_name).substring(0, 20)}-${ae_util.clean_filename(event_file_obj?.event_presenter_full_name)}.${event_file_obj?.extension}`}
>
<span class="fas fa-download mx-1"></span>
<span class="hidden">
Renamed
</span>
</a>
<button
type="button"
use:clipboard={encodeURI(`${$ae_api.base_url}/event/file/${event_file_obj?.event_file_id_random}/download?filename=${event_file_obj?.event_session_code}-${ae_util.clean_filename(event_file_obj?.event_session_name).substring(0, 20)}-${ae_util.clean_filename(event_file_obj?.event_presenter_full_name)}.${event_file_obj?.extension}&x_no_account_id_token=direct-download`)}
class="btn btn-sm p-1 variant-soft-secondary *:hover:inline lg:text-xs"
title="Copy the renamed file link"
>
<span class="fas fa-copy mx-1"></span>
<span class="hidden">
Copy Renamed
</span>
</button>
</div>
<div
class:hidden={!show_direct_download}
class="flex flex-row gap-0.5"
>
<span class="fas fa-copy mx-1"></span>
<div class="hidden">
Copy Link
</div>
</button>
<span class="text-xs text-gray-500 w-32">
Presentation Name:
</span>
<a
href="{$ae_api.base_url}/event/file/{event_file_obj?.event_file_id_random}/download?filename={event_file_obj?.event_session_code}-{ae_util.clean_filename(event_file_obj?.event_presentation_name).substring(0, 20)}-{ae_util.clean_filename(event_file_obj?.event_presenter_full_name)}.{event_file_obj?.extension}&x_no_account_id_token=direct-download"
class="btn btn-sm p-1 variant-soft-secondary *:hover:inline lg:text-xs underline"
title={`Download renamed with presentation name to: ${event_file_obj?.event_session_code}-${ae_util.clean_filename(event_file_obj?.event_presentation_name).substring(0, 20)}-${ae_util.clean_filename(event_file_obj?.event_presenter_full_name)}.${event_file_obj?.extension}`}
>
<span class="fas fa-download mx-1"></span>
<span class="hidden">
Renamed
</span>
</a>
<button
type="button"
use:clipboard={encodeURI(`${$ae_api.base_url}/event/file/${event_file_obj?.event_file_id_random}/download?filename=${event_file_obj?.event_session_code}-${ae_util.clean_filename(event_file_obj?.event_presentation_name).substring(0, 20)}-${ae_util.clean_filename(event_file_obj?.event_presenter_full_name)}.${event_file_obj?.extension}&x_no_account_id_token=direct-download`)}
class="btn btn-sm p-1 variant-soft-secondary *:hover:inline lg:text-xs"
title="Copy the renamed file link"
>
<span class="fas fa-copy mx-1"></span>
<span class="hidden">
Copy Renamed
</span>
</button>
</div>
</td>
<td class="px-4 py-2">{ae_util.format_bytes(event_file_obj?.file_size)}</td>
<td