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

Now with the ability to do basic archive content updates. The media player works.

Browse Source
This commit is contained in:
Scott Idem
2024-11-07 15:53:12 -05:00
parent d3609764e3
commit 079ec80fbd
8 changed files with 421 additions and 256 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/routes/idaa/(idaa)/archives/10_list__archive_content_obj.svelte
View File

@@ -8,7 +8,7 @@ import { ae, api, Element_modal_v3 } from 'aether_npm_lib';
import { slct, ae_app, slct_trigger } from './stores';
import Edit_archive_content_obj from './10_edit__archive_content_obj.svelte';
import Player_archive_content_obj from './10_player__archive_content_obj.svelte';
import Player_archive_content_obj from './ae_idaa_comp__media_player.svelte';
let idaa_archive_content_obj_li_get_promise: Promise<any>;
let idaa_archive_content_obj_get_promise: Promise<any>;

78
src/routes/idaa/(idaa)/archives/10_player__archive_content_obj.svelte
View File

@@ -1,78 +0,0 @@
<script lang="ts">
import { createEventDispatcher, onMount } from 'svelte';
import { fade } from 'svelte/transition';
// import { ae, Element_modal_v3 } from 'aether_npm_lib';
import { slct, slct_trigger, ae_app } from './stores';
// export let archive_content_id = null;
let file_icons:any = {}
file_icons['ac3'] = 'file-audio';
file_icons['aac'] = 'file-audio';
file_icons['csv'] = 'file-csv';
file_icons['doc'] = 'file-word';
file_icons['docx'] = 'file-word';
file_icons['gif'] = 'file-image';
file_icons['htm'] = 'file-code';
file_icons['html'] = 'file-code';
file_icons['jpeg'] = 'file-image';
file_icons['jpg'] = 'file-image';
file_icons['key'] = 'file-powerpoint';
file_icons['mkv'] = 'file-video';
file_icons['mov'] = 'file-video';
file_icons['mp3'] = 'file-audio';
file_icons['mp4'] = 'file-video';
file_icons['pdf'] = 'file-pdf';
file_icons['png'] = 'file-image';
file_icons['ppt'] = 'file-powerpoint';
file_icons['pptx'] = 'file-powerpoint';
file_icons['txt'] = 'file-alt';
file_icons['wav'] = 'file-audio';
file_icons['webp'] = 'file-image';
file_icons['xls'] = 'file-excel';
file_icons['xlsx'] = 'file-excel';
file_icons['zip'] = 'file-archive';
onMount(() => {
console.log('** Component Mounted: ** Player - Archive Content Obj');
});
</script>
<!-- <h3 class="ae_title">Viewing: {$slct.archive_content_obj.name}</h3> -->
<section class="ae_content">
{#if file_icons[$slct.archive_content_obj.file_extension] == 'file-audio'}
<audio id="view_archive_content_audio" width="" height="" autoplay controls style="max-width: 100%; max-height: 65vh;">
<source id="view_archive_content_audio_source" src="{$ae_app.app.base_url}{$slct.archive_content_obj.file_path}" type="audio/mpeg">
<!--<source src="audio.ogg" type="audio/ogg">-->
Your browser does not support the audio tag.
</audio>
{:else if file_icons[$slct.archive_content_obj.file_extension] == 'file-video'}
<video id="view_archive_content_video" width="" height="" autoplay controls style="max-width: 100%; max-height: 65vh;">
<source id="view_archive_content_video_source" src="{$ae_app.app.base_url}{$slct.archive_content_obj.file_path}" type="video/mp4">
<!--<source src="video.ogg" type="video/ogg">-->
<track kind="captions" src="" srclang="en" label="English">
Your browser does not support the video tag.
</video>
{:else if file_icons[$slct.archive_content_obj.file_extension] == 'file-image'}
<img id="view_archive_content_image" src="{$ae_app.app.base_url}{$slct.archive_content_obj.file_path}" alt="{$slct.archive_content_obj.name}" style="max-width: 100%; max-height: 65vh;" />
{:else}
<a href="{$ae_app.app.base_url}{$slct.archive_content_obj.file_path}">{$slct.archive_content_obj.filename}</a>
{/if}
{#if $slct.archive_content_obj.description}
<div id="archive_content__description" class="archive_content__description">
{$slct.archive_content_obj.description}
</div>
{/if}
{#if $slct.archive_content_obj.content_html}
<div id="archive_content__content_html" class="archive_content__content_html">
{@html $slct.archive_content_obj.content_html}
</div>
{/if}
</section>

41
src/routes/idaa/(idaa)/archives/[archive_id]/+page.svelte
View File

@@ -28,6 +28,7 @@ import Archive_view from './ae_idaa_comp__archive_obj_id_view.svelte';
import Archive_content_obj_li from './ae_idaa_comp__archive_content_obj_li.svelte';
import Archive_content_obj_id_edit from './ae_idaa_comp__archive_content_obj_id_edit.svelte';
import Media_player from './../ae_idaa_comp__media_player.svelte';
import { browser } from '$app/environment';
@@ -144,7 +145,11 @@ if (browser) {
<!-- </div> -->
{/if}
Edit Archive: {$lq__archive_obj?.name}</h3>
<span class="text-sm text-gray-500">
Edit Archive:
</span>
{$lq__archive_obj?.name}
</h3>
</div>
</svelte:fragment>
@@ -205,7 +210,11 @@ if (browser) {
<!-- </div> -->
{/if}
Edit Archive Content: {$lq__archive_content_obj?.name}</h3>
<span class="text-sm text-gray-500">
Edit Archive Content:
</span>
{$lq__archive_content_obj?.name}
</h3>
</div>
</svelte:fragment>
@@ -231,4 +240,32 @@ if (browser) {
</div>
</svelte:fragment> -->
</Modal>
<!-- Modal: Archive Content ID media player -->
<Modal
title="{$lq__archive_content_obj?.name} - {$lq__archive_content_obj?.id}"
bind:open={$idaa_sess.archives.show__modal_view__archive_content_id}
autoclose={false}
placement="top-center"
size="xl"
class="top-center bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-lg border-gray-200 dark:border-gray-700 divide-gray-200 dark:divide-gray-700 shadow-md relative flex flex-col mx-auto w-full divide-y"
>
<svelte:fragment slot="header">
<div class="flex flex-row items-center justify-between w-full">
<h3 class="text-lg font-semibold">
<span class="text-sm text-gray-500">
Viewing:
</span>
{$lq__archive_content_obj?.name}</h3>
</div>
</svelte:fragment>
<Media_player
lq__archive_content_obj={lq__archive_content_obj}
/>
</Modal>

392
src/routes/idaa/(idaa)/archives/[archive_id]/ae_idaa_comp__archive_content_obj_id_edit.svelte
View File

@@ -12,6 +12,7 @@ import { core_func } from '$lib/ae_core/ae_core_functions';
import { api } from '$lib/api';
import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
import { idaa_loc, idaa_sess, idaa_slct } from '$lib/ae_idaa_stores';
import { archives_func } from '$lib/ae_archives/ae_archives_functions';
import Tiptap_editor from '$lib/element_tiptap_editor.svelte';
@@ -21,6 +22,7 @@ let create_archive_content_obj_promise: any;
let delete_archive_content_obj_promise: any;
let update_archive_content_obj_promise: any;
let upload__hosted_file_obj_promise: any;
let prom_api__archive_content_obj_v2: any;
let disable_submit_btn = true;
@@ -105,52 +107,54 @@ onMount(() => {
async function handle_submit_form(event) {
console.log('*** handle_submit_form() ***');
if (log_lvl > 1) {
console.log('*** handle_submit_form() ***');
console.log(event.target);
}
disable_submit_btn = true;
let form_data = new FormData(event.target);
console.log(form_data);
if (log_lvl) {
console.log(form_data);
}
let form_archive_content_data = ae_util.extract_prefixed_form_data({prefix: null, form_data: form_data, trim_values: true, bool_tf_str: true, log_lvl: 0});
console.log(form_archive_content_data);
let archive_content_di = ae_util.extract_prefixed_form_data({prefix: null, form_data: form_data, trim_values: true, bool_tf_str: true, log_lvl: 0});
console.log(archive_content_di);
let archive_content_data: key_val = {};
let archive_content_do: key_val = {};
if (!$idaa_slct.archive_content_id) {
archive_content_data['account_id_random'] = $ae_loc.account_id;
archive_content_data['archive_id_random'] = $idaa_slct.archive_id;
// archive_content_data['enable'] = true;
archive_content_do['account_id_random'] = $ae_loc.account_id;
archive_content_do['archive_id_random'] = $idaa_slct.archive_id;
// archive_content_do['enable'] = true;
}
archive_content_data['name'] = form_archive_content_data.name;
if (tinyMCE.get('description')) {
archive_content_data['description'] = tinyMCE.get('description').getContent();
archive_content_do['name'] = archive_content_di.name;
// Check if the description_new_html exists and is a string
if (typeof $idaa_slct.archive_content_obj.description_new_html === 'string') {
console.log('New description is a string');
archive_content_do['description'] = $idaa_slct.archive_content_obj.description_new_html;
} else {
archive_content_data['description'] = form_archive_content_data.description;
console.log('New description is not a string. Do nothing.');
// archive_content_do['description'] = event_meeting_fd.description;
}
if (tinyMCE.get('content_html')) {
archive_content_data['content_html'] = tinyMCE.get('content_html').getContent();
if (archive_content_di.archive_content_type) {
archive_content_do['archive_content_type'] = archive_content_di.archive_content_type;
} else {
archive_content_data['content_html'] = form_archive_content_data.content_html;
archive_content_do['archive_content_type'] = null;
}
if (form_archive_content_data.archive_content_type) {
archive_content_data['archive_content_type'] = form_archive_content_data.archive_content_type;
} else {
archive_content_data['archive_content_type'] = null;
}
archive_content_do['enable_for_public'] = !!!archive_content_di.enable_for_public;
archive_content_data['enable_for_public'] = !!!form_archive_content_data.enable_for_public;
archive_content_data['file_path'] = form_archive_content_data.file_path;
archive_content_data['filename'] = form_archive_content_data.filename.trim();
archive_content_data['file_extension'] = form_archive_content_data.file_extension.trim();
archive_content_do['file_path'] = archive_content_di.file_path;
archive_content_do['filename'] = archive_content_di.filename.trim();
archive_content_do['file_extension'] = archive_content_di.file_extension.trim();
let date_time_str = null;
let date_part = form_archive_content_data.original_datetime_date.trim();
let time_part = form_archive_content_data.original_datetime_time.trim();
let date_part = archive_content_di.original_datetime_date.trim();
let time_part = archive_content_di.original_datetime_time.trim();
if (date_part && time_part) {
date_time_str = `${date_part} ${time_part}`;
} else if (date_part) {
@@ -159,42 +163,47 @@ async function handle_submit_form(event) {
// date_time_str = `${time_part}`;
date_time_str = false;
}
archive_content_data['original_datetime'] = date_time_str;
archive_content_do['original_datetime'] = date_time_str;
archive_content_data['original_timezone'] = form_archive_content_data.original_timezone;
archive_content_do['original_timezone'] = archive_content_di.original_timezone;
archive_content_data['original_location'] = form_archive_content_data.original_location;
archive_content_do['original_location'] = archive_content_di.original_location;
archive_content_data['hide'] = !!form_archive_content_data.hide;
archive_content_data['priority'] = !!form_archive_content_data.priority;
if (form_archive_content_data.sort) {
// Change this to a number type
archive_content_data['sort'] = Number(form_archive_content_data.sort);
archive_content_do['hide'] = archive_content_di.hide;
archive_content_do['priority'] = archive_content_di.priority;
if (archive_content_di.sort) {
archive_content_do['sort'] = Number(archive_content_di.sort);
} else {
archive_content_data['sort'] = null;
archive_content_do['sort'] = null;
}
if (form_archive_content_data.group) {
archive_content_data['group'] = form_archive_content_data.group;
if (archive_content_di.group) {
archive_content_do['group'] = archive_content_di.group;
} else {
archive_content_data['group'] = null;
}
if (archive_content_data['enable']) {
archive_content_data['enable'] = !!form_archive_content_data.enable;
archive_content_do['group'] = null;
}
if (tinyMCE.get('notes')) {
archive_content_data['notes'] = tinyMCE.get('notes').getContent();
// Check if the enable exists and is a string
console.log(`archive_content_di.enable = ${archive_content_di.enable}`);
// if (typeof archive_content_di.enable !== 'undefined') {
archive_content_do['enable'] = !!archive_content_di.enable;
// }
// Check if the notes_new_html exists and is a string
if (typeof $idaa_slct.archive_content_obj.notes_new_html === 'string') {
console.log('New notes is a string');
archive_content_do['notes'] = $idaa_slct.archive_content_obj.notes_new_html;
} else {
archive_content_data['notes'] = form_archive_content_data.notes;
console.log('New notes is not a string. Do nothing.');
// archive_content_do['notes'] = event_meeting_fd.notes;
}
console.log(archive_content_data);
console.log(archive_content_do);
if (!$idaa_slct.archive_content_id) {
create_archive_content_obj_promise = api.create_ae_obj_crud({
api_cfg: $ae_api,
obj_type: 'archive_content',
fields: archive_content_data,
fields: archive_content_do,
key: $ae_api.api_crud_super_key,
log_lvl: 1
})
@@ -232,16 +241,16 @@ async function handle_submit_form(event) {
console.log(upload__hosted_file_obj_promise);
let hosted_file_id = upload__hosted_file_obj_promise[0].hosted_file_id_random;
archive_content_data = {};
archive_content_data['hosted_file_id_random'] = hosted_file_id;
archive_content_data['file_path'] = `/hosted_file/download/${hosted_file_id}?filename=${form_archive_content_data.filename.trim()}`;
archive_content_data['archive_content_type'] = 'hosted_file';
archive_content_do = {};
archive_content_do['hosted_file_id_random'] = hosted_file_id;
archive_content_do['file_path'] = `/hosted_file/download/${hosted_file_id}?filename=${archive_content_di.filename.trim()}`;
archive_content_do['archive_content_type'] = 'hosted_file';
update_archive_content_obj_promise = await api.update_ae_obj_id_crud({
api_cfg: $ae_api,
obj_type: 'archive_content',
obj_id: $idaa_slct.archive_content_id,
fields: archive_content_data,
fields: archive_content_do,
key: $ae_api.api_crud_super_key,
log_lvl: 1
})
@@ -258,7 +267,7 @@ async function handle_submit_form(event) {
return false;
});
// update_archive_content_obj_promise = await update_archive_content_obj({archive_content_id: $idaa_slct.archive_content_id, data: archive_content_data})
// update_archive_content_obj_promise = await update_archive_content_obj({archive_content_id: $idaa_slct.archive_content_id, data: archive_content_do})
// console.log(update_archive_content_obj_promise);
return update_archive_content_obj_promise
})
@@ -282,13 +291,11 @@ async function handle_submit_form(event) {
return create_archive_content_obj_promise;
} else {
update_archive_content_obj_promise = api.update_ae_obj_id_crud({
prom_api__archive_content_obj_v2 = archives_func.update_ae_obj__archive_content({
api_cfg: $ae_api,
obj_type: 'archive_content',
obj_id: $idaa_slct.archive_content_id,
fields: archive_content_data,
key: $ae_api.api_crud_super_key,
log_lvl: 1
archive_content_id: $idaa_slct.archive_content_id,
data_kv: archive_content_do,
log_lvl: log_lvl
})
.then(function (archive_content_obj_update_result) {
if (!archive_content_obj_update_result) {
@@ -296,23 +303,54 @@ async function handle_submit_form(event) {
return false;
}
// dispatch(
// 'updated__archive_content_obj',
// {
// archive_content_id: $idaa_slct.archive_content_id,
// }
// );
return archive_content_obj_update_result;
})
.catch(function (error) {
console.log('Something went wrong.');
console.log(error);
return false;
})
.finally(() => {
// We need to do this since the comment has changed and the idaa_slct object does automatically update (yet...???).
$idaa_slct.archive_content_obj = $lq__archive_content_obj;
disable_submit_btn = false;
// $idaa_sess.archives.show__modal_edit__archive_content_id = false;
});
return update_archive_content_obj_promise;
return prom_api__archive_content_obj_v2;
}
// update_archive_content_obj_promise = api.update_ae_obj_id_crud({
// api_cfg: $ae_api,
// obj_type: 'archive_content',
// obj_id: $idaa_slct.archive_content_id,
// fields: archive_content_do,
// key: $ae_api.api_crud_super_key,
// log_lvl: 1
// })
// .then(function (archive_content_obj_update_result) {
// if (!archive_content_obj_update_result) {
// console.log('The result was null or false.');
// return false;
// }
// // dispatch(
// // 'updated__archive_content_obj',
// // {
// // archive_content_id: $idaa_slct.archive_content_id,
// // }
// // );
// return archive_content_obj_update_result;
// })
// .catch(function (error) {
// console.log('Something went wrong.');
// console.log(error);
// return false;
// });
// return update_archive_content_obj_promise;
// }
}
@@ -383,7 +421,7 @@ async function handle_submit_form(event) {
</select>
</label>
<fieldset class="">
<!-- <fieldset class="">
<legend class="">Public Access with Rotating Access Key/Passcode</legend>
<label for="enable_for_public_no" class="">No, disable public access
<input
@@ -394,7 +432,6 @@ async function handle_submit_form(event) {
value={false}
bind:group={$idaa_slct.archive_content_obj.enable_for_public}
>
<!-- <input type="radio" class="" id="enable_for_public_no" name="enable_for_public" value="0" checked={(!$idaa_slct.archive_content_obj.enable_for_public)} required> -->
</label>
<label for="enable_for_public_yes" class="">Yes, allow public access
<input
@@ -405,12 +442,12 @@ async function handle_submit_form(event) {
value={true}
bind:group={$idaa_slct.archive_content_obj.enable_for_public}
>
<!-- <input type="radio" class="" id="enable_for_public_yes" name="enable_for_public" value="1" checked={($idaa_slct.archive_content_obj.enable_for_public)} required > -->
</label>
</fieldset>
</fieldset> -->
<h3>File?</h3>
{#if !$idaa_slct.archive_content_id}
FILE INPUT GOES HERE
<!-- <Element_input_file_hashing
multiple = {false}
@@ -422,44 +459,47 @@ async function handle_submit_form(event) {
use_selected_file_table={true}
/> -->
<!-- bind:input_file_list = {$idaa_loc.archives.form_file_upload_list} -->
{:else}
<label for="file_path">File Path
{#if !$ae_loc.administrator_access}
<span class="fas fa-lock" title="Field is locked"></span>
{:else}
<span class="fas fa-unlock" title="Field is unlocked"></span>
{/if}
<input
type="text"
id="file_path"
name="file_path"
value={($idaa_slct.archive_content_obj.file_path ? $idaa_slct.archive_content_obj.file_path : '')}
readonly={!$ae_loc.administrator_access}
class="input w-full"
>
</label>
<label for="filename">Filename
<input type="text" id="filename" name="filename" value={($idaa_slct.archive_content_obj.filename ? $idaa_slct.archive_content_obj.filename : $idaa_loc.archives.input_filename)} class="input w-full">
</label>
<label for="file_extension">File Extension
{#if !$ae_loc.administrator_access}
<span class="fas fa-lock" title="Field is locked"></span>
{:else}
<span class="fas fa-unlock" title="Field is unlocked"></span>
{/if}
<input
type="text"
id="file_extension"
name="file_extension"
value={($idaa_slct.archive_content_obj.file_extension ? $idaa_slct.archive_content_obj.file_extension : $idaa_loc.archives.input_file_extension)}
readonly={!$ae_loc.administrator_access}
class="input w-24"
>
</label>
{/if}
<label for="file_path">File Path
{#if !$ae_loc.administrator_access}
<span class="fas fa-lock" title="Field is locked"></span>
{:else}
<span class="fas fa-unlock" title="Field is unlocked"></span>
{/if}
<input
type="text"
id="file_path"
name="file_path"
value={($idaa_slct.archive_content_obj.file_path ? $idaa_slct.archive_content_obj.file_path : '')}
readonly={!$ae_loc.administrator_access}
class="input w-full"
>
</label>
<label for="filename">Filename
<input type="text" id="filename" name="filename" value={($idaa_slct.archive_content_obj.filename ? $idaa_slct.archive_content_obj.filename : $idaa_loc.archives.input_filename)} class="input w-full">
</label>
<label for="file_extension">File Extension
{#if !$ae_loc.administrator_access}
<span class="fas fa-lock" title="Field is locked"></span>
{:else}
<span class="fas fa-unlock" title="Field is unlocked"></span>
{/if}
<input
type="text"
id="file_extension"
name="file_extension"
value={($idaa_slct.archive_content_obj.file_extension ? $idaa_slct.archive_content_obj.file_extension : $idaa_loc.archives.input_file_extension)}
readonly={!$ae_loc.administrator_access}
class="input w-24"
>
</label>
</section>
@@ -517,56 +557,117 @@ async function handle_submit_form(event) {
{$idaa_loc.archives.show__admin_options ? 'Hide' : 'Show'} Admin
</button>
<!-- BEGIN: section post__admin_options -->
<section
class="ae_section archive_content__admin_options border border-gray-200 rounded p-2 space-y-2"
class="ae_section post__admin_options border border-gray-200 rounded p-2 space-y-2 bg-red-100"
class:hidden={!$idaa_loc.archives.show__admin_options}
> <!-- BEGIN: section archive_content__admin_options -->
>
<h3 class="h3">
Admin Options
</h3>
<label>Hide
<input
type="checkbox"
name="hide"
id="hide"
bind:checked={$idaa_slct.archive_content_obj.hide}
class="checkbox"
<span
class="flex flex-col md:flex-row flex-wrap gap-2 items-center justify-center md:justify-stretch w-full"
>
<span
class="flex flex-row flex-wrap gap-2 items-center justify-evenly grow"
>
<!-- <input type="checkbox" name="hide" value={$idaa_slct.archive_content_obj.hide} /> -->
</label>
<fieldset class="flex flex-row gap-1 items-center justify-center">
<legend class="legend text-sm font-semibold">Hide</legend>
<div>
<input
type="radio"
id="hide_yes"
name="hide"
value={true}
bind:group={$idaa_slct.archive_content_obj.hide}
class="radio"
>
<label for="hide_yes">Yes</label>
</div>
<div>
<input
type="radio"
id="hide_no"
name="hide"
value={false}
bind:group={$idaa_slct.archive_content_obj.hide}
class="radio"
>
<label for="hide_no">No</label>
</div>
</fieldset>
<label>Priority
<input
type="checkbox"
name="priority"
id="priority"
bind:checked={$idaa_slct.archive_content_obj.priority}
class="checkbox"
>
<!-- <input type="checkbox" name="priority" value={$idaa_slct.archive_content_obj.priority} /> -->
</label>
<fieldset class="flex flex-row gap-2">
<legend class="legend text-sm font-semibold">Priority</legend>
<div>
<input
type="radio"
id="priority_yes"
name="priority"
value={true}
bind:group={$idaa_slct.archive_content_obj.priority}
class="radio"
>
<label for="priority_yes">Yes</label>
</div>
<div>
<input
type="radio"
id="priority_no"
name="priority"
value={false}
bind:group={$idaa_slct.archive_content_obj.priority}
class="radio"
>
<label for="priority_no">No</label>
</div>
</fieldset>
</span>
<label>Sort <input type="number" name="sort" value={$idaa_slct.archive_content_obj.sort} class="input w-24" /></label>
<span class="flex flex-row flex-wrap gap-1 items-center justify-evenly grow">
<label class="legend text-sm font-semibold">Sort <input type="number" name="sort" value={$idaa_slct.archive_content_obj.sort} class="input w-24" /></label>
<label>Group <input type="text" name="group" value={$idaa_slct.archive_content_obj.group} max="100" class="input w-48" /></label>
<label class="legend text-sm font-semibold">Group <input type="text" name="group" value={$idaa_slct.archive_content_obj.group ?? ''} max="100" class="input w-40" /></label>
</span>
{#if $ae_loc.administrator_access}
<label>Enable
<input
type="checkbox"
name="enable"
id="enable"
bind:checked={$idaa_slct.archive_content_obj.enable}
class="checkbox"
>
<!-- <input type="checkbox" name="enable" value={$idaa_slct.archive_content_obj.enable} checked={$idaa_slct.archive_content_obj.enable} /> -->
</label>
{/if}
{#if $ae_loc.administrator_access}
<span class="flex flex-row flex-wrap gap-1 items-center justify-evenly grow">
<fieldset class="flex flex-row gap-2">
<legend class="legend text-sm font-semibold">Enable</legend>
<div>
<input
type="radio"
id="enable_yes"
name="enable"
value={true}
bind:group={$idaa_slct.archive_content_obj.enable}
class="radio"
>
<label for="enable_yes">Yes</label>
</div>
<div>
<input
type="radio"
id="enable_no"
name="enable"
value={false}
bind:group={$idaa_slct.archive_content_obj.enable}
class="radio"
>
<label for="enable_no">No</label>
</div>
</fieldset>
</span>
{/if}
</span>
<label for="notes">
Internal Staff Notes
{#if $ae_loc.trusted_access}
<label
for="notes"
>
<span class="legend text-sm font-semibold">Internal Staff Notes</span>
<Tiptap_editor
default_minimal={true}
bind:html_text={$idaa_slct.archive_content_obj.notes}
@@ -574,8 +675,9 @@ async function handle_submit_form(event) {
bind:new_html={$idaa_slct.archive_content_obj.notes_new_html}
/>
</label>
{/if}
</section> <!-- END: section archive_content__admin_options -->
</section> <!-- END: section post__admin_options -->
{/if}

17
src/routes/idaa/(idaa)/archives/[archive_id]/ae_idaa_comp__archive_content_obj_li.svelte
View File

@@ -33,13 +33,13 @@ onMount(() => {
>
<header class="ae_header flex flex-row gap-2 items-center">
<h3 class="archive__name h3">
<h3 class="archive__name h4">
<span class="archive__name">{@html idaa_archive_content_obj.name}</span>
</h3>
{#if idaa_archive_content_obj.original_location}
&mdash;
<h4 class="h4">
<h4 class="h5">
<!-- <span class="ae_label">Location:</span> -->
<span class="ae_value">{idaa_archive_content_obj.original_location}</span>
</h4>
@@ -50,7 +50,7 @@ onMount(() => {
<div class="ae_options flex flex-row flex-wrap gap-2 items-center justify-center">
<button
disabled={!$ae_loc.administrator_access}
disabled={!$ae_loc.trusted_access}
on:click={() => {
$idaa_slct.archive_content_id = idaa_archive_content_obj?.archive_content_id;
$idaa_slct.archive_content_obj = idaa_archive_content_obj;
@@ -73,7 +73,7 @@ onMount(() => {
<span class="fas fa-play m-1"></span> Play/View
</button>
{#if $ae_loc.trusted_access && idaa_archive_content_obj?.hosted_file_id}
{#if $ae_loc.authenticated_access && idaa_archive_content_obj?.hosted_file_id}
<button
disabled={!$ae_loc.trusted_access}
on:click={() => {
@@ -141,13 +141,6 @@ onMount(() => {
{/if}
</div>
<!-- Doing some checks before the media player/viewer shows. The player should be the only one showing. So there is a sort of global check first. -->
{#if idaa_archive_content_obj.archive_content_id == $idaa_sess.archives.show_view__archive_content_media}
<!-- <Player_archive_content_obj archive_content_id={idaa_archive_content_obj.archive_content_id_random} /> -->
Player Goes Here
{/if}
<section class="ae_section archive_content__content">
{#if idaa_archive_content_obj?.description}
<div
@@ -189,7 +182,7 @@ onMount(() => {
<section
class="ae_section ae_footer ae_meta archive_content__meta text-sm text-gray-500 mt-4 flex flex-row gap-2 items-center justify-center"
class="ae_meta mt-2 flex flex-col sm:flex-row gap-1 items-center justify-center flex flex-col text-sm text-gray-500"
class:hidden={!$ae_loc.administrator_access}
>
<span

38
src/routes/idaa/(idaa)/archives/[archive_id]/ae_idaa_comp__archive_obj_id_view.svelte
View File

@@ -13,55 +13,59 @@ export let lq__archive_content_obj_li: any;
onMount(() => {
console.log('** Component Mounted: ** ID - Archive Obj');
});
// Reminder: Styling is being done with Tailwind CSS, not Bootstrap.
</script>
<section class="svelte_component ae_section ae_view archive_obj view__archive_obj" bind:clientHeight={$ae_loc.iframe_height_modal_body}>
<header class="ae_header archive__header">
<h2 class="archive__name">{@html $lq__archive_obj?.name} - {$lq__archive_content_obj_li?.length}</h2>
<h2 class="archive__name h3">{@html $lq__archive_obj?.name} ({$lq__archive_content_obj_li?.length}&times;)</h2>
</header>
<section class="archive__content">
<section class="archive__content max-w-xl">
{#if $lq__archive_obj?.description}<div class="ae_value archive__description">{@html $lq__archive_obj?.description}</div>{/if}
{#if $lq__archive_obj?.content_html}<div class="ae_value">{@html $lq__archive_obj?.content_html}</div>{/if}
{#if $lq__archive_obj?.original_url}
<div>
<span class="ae_label">URL:</span>
<span class="ae_value">{$lq__archive_obj?.original_url}</span>
<span class="ae_label text-sm">URL:</span>
<span class="ae_value font-semibold">{$lq__archive_obj?.original_url}</span>
</div>
{/if}
{#if $lq__archive_obj?.original_datetime}
<div class="archive__original_datetime">
<span class="ae_label">Start Date:</span>
<span class="ae_value">{ae_util.iso_datetime_formatter($lq__archive_obj?.original_datetime, 'datetime_long')}</span>
<span class="ae_label text-sm">Start Date:</span>
<span class="ae_value font-semibold">{ae_util.iso_datetime_formatter($lq__archive_obj?.original_datetime, 'date_long')}</span>
</div>
{/if}
{#if $lq__archive_obj?.original_timezone}
<span class="ae_label">Timezone:</span>
<span class="ae_value">{$lq__archive_obj?.original_timezone}</span>
<span class="ae_label text-sm">Timezone:</span>
<span class="ae_value font-semibold">{$lq__archive_obj?.original_timezone}</span>
{/if}
{#if $lq__archive_obj?.original_location}
<div>
<span class="ae_label">Location:</span>
<span class="ae_value">{$lq__archive_obj?.original_location}</span>
<span class="ae_label text-sm">Location:</span>
<span class="ae_value font-semibold">{$lq__archive_obj?.original_location}</span>
</div>
{/if}
</section>
<section
class="ae_section ae_meta archive__meta"
class:ae_d_none={!$ae_loc.administrator_access}
class="ae_meta archive__meta mt-2 flex flex-col gap-2 items-center justify-center"
class:hidden={!$ae_loc.administrator_access}
>
<div class="ae_group">
<div class="archive__created_on_updated_on">
<div class="ae_group flex flex-col sm:flex-row gap-1 items-center justify-center flex flex-col text-sm text-gray-500">
<span>
<span class="ae_label">Created on:</span>
<span class="ae_value archive__created_on">{ae_util.iso_datetime_formatter($lq__archive_obj?.created_on, 'datetime_iso_no_seconds')}</span>
{#if $lq__archive_obj?.updated_on}
</span>
{#if $lq__archive_obj?.updated_on}
<span>
<span class="ae_label">Updated on:</span>
<span class="ae_value">{ae_util.iso_datetime_formatter($lq__archive_obj?.updated_on, 'datetime_iso_no_seconds')}</span>
{/if}
</div>
</span>
{/if}
</div>
{#if $ae_loc.trusted_access}

107
src/routes/idaa/(idaa)/archives/ae_idaa_comp__media_player.svelte Normal file
View File

@@ -0,0 +1,107 @@
<script lang="ts">
import { createEventDispatcher, onMount } from 'svelte';
import { fade } from 'svelte/transition';
// import { ae, Element_modal_v3 } from 'aether_npm_lib';
import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
import { idaa_loc, idaa_sess, idaa_slct } from '$lib/ae_idaa_stores';
// export let archive_content_id = null;
let file_icons:any = {}
file_icons['ac3'] = 'file-audio';
file_icons['aac'] = 'file-audio';
file_icons['csv'] = 'file-csv';
file_icons['doc'] = 'file-word';
file_icons['docx'] = 'file-word';
file_icons['gif'] = 'file-image';
file_icons['htm'] = 'file-code';
file_icons['html'] = 'file-code';
file_icons['jpeg'] = 'file-image';
file_icons['jpg'] = 'file-image';
file_icons['key'] = 'file-powerpoint';
file_icons['mkv'] = 'file-video';
file_icons['mov'] = 'file-video';
file_icons['mp3'] = 'file-audio';
file_icons['mp4'] = 'file-video';
file_icons['pdf'] = 'file-pdf';
file_icons['png'] = 'file-image';
file_icons['ppt'] = 'file-powerpoint';
file_icons['pptx'] = 'file-powerpoint';
file_icons['txt'] = 'file-alt';
file_icons['wav'] = 'file-audio';
file_icons['webp'] = 'file-image';
file_icons['xls'] = 'file-excel';
file_icons['xlsx'] = 'file-excel';
file_icons['zip'] = 'file-archive';
onMount(() => {
console.log('** Component Mounted: ** Media Player - Archive Content Obj');
});
// Reminder: Styling is being done with Tailwind CSS, not Bootstrap.
</script>
<!-- <h3 class="ae_title">Viewing: {$idaa_slct.archive_content_obj.name}</h3> -->
<section class="ae_content flex flex-col gap-2 items-center justify-center">
{#if file_icons[$idaa_slct.archive_content_obj.file_extension] == 'file-audio'}
<audio
autoplay controls
style="max-width: 100%; max-height: 65vh;"
class="w-96 h-auto"
>
<source id="view_archive_content_audio_source" src="{$ae_api.base_url}/hosted_file/{$idaa_slct.archive_content_obj?.hosted_file_id}/download?x_no_account_id_token=direct-download" type="audio/mpeg">
<!--<source src="audio.ogg" type="audio/ogg">-->
Your browser does not support the audio tag.
</audio>
{:else if file_icons[$idaa_slct.archive_content_obj.file_extension] == 'file-video'}
<!-- ID: {$idaa_slct.archive_content_obj?.hosted_file_id} -->
<!-- style="max-width: 100%; max-height: 65vh;" -->
<video
autoplay controls
class="w-full h-auto"
>
<source
src="{$ae_api.base_url}/hosted_file/{$idaa_slct.archive_content_obj?.hosted_file_id}/download?x_no_account_id_token=direct-download"
type="video/mp4"
>
<!--<source src="video.ogg" type="video/ogg">-->
<track kind="captions" src="" srclang="en" label="English">
Your browser does not support the video tag.
</video>
{:else if file_icons[$idaa_slct.archive_content_obj.file_extension] == 'file-image'}
<img
src="{$ae_api.base_url}/hosted_file/{$idaa_slct.archive_content_obj?.hosted_file_id}/download?x_no_account_id_token=direct-download"
alt="{$idaa_slct.archive_content_obj.name}"
style="max-width: 100%; max-height: 65vh;"
/>
{:else}
<a
href="{$ae_api.base_url}/hosted_file/{$idaa_slct.archive_content_obj?.hosted_file_id}/download?x_no_account_id_token=direct-download"
target="_blank"
class="btn btn-md variant-ghost-primary hover:variant-filled-primary transition"
title="Download: {$idaa_slct.archive_content_obj.filename}"
download="{$idaa_slct.archive_content_obj.filename}"
>
<span class="fas fa-download m-1"></span>
Download:
{$idaa_slct.archive_content_obj.filename}
</a>
{/if}
{#if $idaa_slct.archive_content_obj.description}
<div class="archive_content__description">
{$idaa_slct.archive_content_obj.description}
</div>
{/if}
{#if $idaa_slct.archive_content_obj.content_html}
<div class="archive_content__content_html">
{@html $idaa_slct.archive_content_obj.content_html}
</div>
{/if}
</section>

2
src/routes/idaa/(idaa)/bb/ae_idaa_comp__post_comment_obj_id_edit.svelte
View File

@@ -20,8 +20,8 @@ let disable_submit_btn = false;
async function handle_submit_form(event: any) {
console.log('*** handle_submit_form() ***');
if (log_lvl > 1) {
console.log('*** handle_submit_form() ***');
console.log(event.target);
}