General clean up. Work on using iframes and setting the height correctly.

This commit is contained in:
Scott Idem
2024-11-15 14:38:59 -05:00
parent 547845ed62
commit a3a8f107d3
13 changed files with 79 additions and 2800 deletions

View File

@@ -1,15 +1,90 @@
<script lang="ts">
/** @type {import('./$types').LayoutData} */
export let data: any;
import { browser } from '$app/environment';
import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
let log_lvl = 0;
$ae_loc.url_origin = data.url.origin;
$ae_loc.params = data.params;
console.log(`+layout.svelte data:`, data);
let iframe = data.url.searchParams.get('iframe');
if (browser && iframe == 'true') {
console.log('Use iframe layout!');
// data_struct['iframe'] = iframe;
$ae_loc.iframe = true;
document.getElementsByTagName('html')[0].classList.add('iframe');
// document.getElementsByTagName('html')[0].classList.remove('dark');
// document.getElementsByTagName('html')[0].classList.remove('light');
// $ae_loc.hub.show_element__access_type = false;
// $ae_loc.hub.show_element__cfg = false;
} else if (browser && iframe == 'false') {
// data_struct['iframe'] = false;
$ae_loc.iframe = false;
document.getElementsByTagName('html')[0].classList.remove('iframe');
// document.getElementsByTagName('html')[0].classList.add('light');
}
$: if ($ae_loc.iframe_height && $ae_loc.iframe_height_modal_body) {
console.log('getting new dimensions for iframe:', $ae_loc.iframe_height, $ae_loc.iframe_height_modal_body);
let iframe_height = 0;
if ($ae_loc.iframe_height > $ae_loc.iframe_height_modal_body) {
iframe_height = $ae_loc.iframe_height;
} else {
iframe_height = $ae_loc.iframe_height_modal_body;
// console.log($ae_loc.modal_dimensions);
if ($ae_loc.modal_dimensions && $ae_loc.modal_dimensions.header_height) {
iframe_height = iframe_height + $ae_loc.modal_dimensions.header_height;
}
if ($ae_loc.modal_dimensions && $ae_loc.modal_dimensions.footer_height) {
iframe_height = iframe_height + $ae_loc.modal_dimensions.footer_height;
}
// iframe_height = iframe_height + 50; // Just in case
}
console.log(`Suggested new iframe_height: ${iframe_height}`);
window.parent.postMessage({'iframe_height': iframe_height}, "*"); // This should be in pixels
} else if ($ae_loc.iframe_height) {
console.log('setting new iframe_height:', $ae_loc.iframe_height);
// let iframe_height = $ae_loc.iframe_height;
window.parent.postMessage({'iframe_height': $ae_loc.iframe_height}, "*"); // This should be in pixels
}
</script>
<svelte:head>
<title>{$ae_loc.title ?? 'Æ loading...'}</title>
{#if $ae_loc.iframe}
<!-- <meta name="robots" content="noindex, nofollow" /> -->
<link href="https://assets-staging.noviams.com/novi-core-assets/css/fontawesome.css" rel="stylesheet" />
<link href="https://assets-staging.noviams.com/novi-core-assets/css/c/idaa/idaa.css" rel="stylesheet" />
{/if}
</svelte:head>
{#if ($ae_loc.trusted_access)}
<slot />
<div
bind:clientHeight={$ae_loc.iframe_height}
>
<slot />
</div>
{:else}
<div class="container flex flex-col gap-1 w-full items-center justify-center font-bold p-8 m-8">
<h1>

View File

@@ -62,6 +62,8 @@ $: lq__archive_content_obj = liveQuery(async () => {
return results;
});
</script>

View File

@@ -89,12 +89,9 @@ $: lq__archive_content_obj = liveQuery(async () => {
});
if (browser) {
console.log('Browser environment detected.');
}
</script>

View File

@@ -1,617 +0,0 @@
<script lang="ts">
type key_val = {
[key: string]: any;
};
// *** Import Svelte core
import { onMount } from 'svelte';
// *** Import Aether core variables and functions
import { ae, api, Element_modal_v3 } from 'aether_npm_lib';
import { slct, slct_trigger, ae_app } from './stores';
// *** Import Aether core components
// import { get_data_store_obj_w_code } from '../data_store/stores_data_store_api.js';
// *** Import Aether module variables and functions
// import { get_account_archive_obj_list } from './stores_ae_api.js';
// *** Import Aether module components
import Edit_archive_obj from './del 10_edit__archive_obj.svelte';
import List_archive_obj from './del 10_list__archive_obj.svelte';
import View_archive_obj from './del 10_view__archive_obj.svelte';
// *** Export/Exposed variables and functions for component
// export let account_id: string = $page['page_for']['account_id'];
export let account_id: string = $ae_app.account_id;
export let archive_id: string = $idaa_loc.archives.archive_id;
export let novi_uuid: string = $idaa_loc.novi_uuid;
export let novi_email: string = $idaa_loc.novi_email;
export let novi_full_name: string = $idaa_loc.novi_full_name;
export let novi_admin_li: string = $idaa_loc.novi_admin_li;
export let novi_trusted_li: string = $idaa_loc.novi_trusted_li;
// *** Set initial variables
$idaa_loc.novi_uuid = novi_uuid;
$idaa_loc.novi_email = decodeURIComponent(novi_email);
$idaa_loc.novi_full_name = decodeURIComponent(novi_full_name);
$idaa_loc.novi_admin_li = novi_admin_li;
$idaa_loc.novi_trusted_li = novi_trusted_li;
$ae_app.current_timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
if (!$ae_app.lu_timezone_list) {
$ae_app.lu_timezone_list = [];
}
$idaa_loc.archives.show_main__options = true; // Section for: buttons for creating new archives, show/hide archives, and search archives
// $idaa_loc.archives.show_list__archive_obj_li = true;
// $idaa_loc.archives.show_view__archive_obj = $idaa_loc.archives.show_view__archive_obj;
$idaa_loc.archives.fulltext_search_qry_str = '';
$idaa_loc.archives.qry_type = false
// NOTE: Check if the novi_uuid is in the novi_admin_li list
if ($idaa_loc.novi_uuid && $idaa_loc.novi_admin_li) {
if ($idaa_loc.novi_admin_li.includes($idaa_loc.novi_uuid)) {
$ae_loc.access_type = 'administrator';
$ae_loc.administrator_access = true;
$ae_loc.trusted_access = true;
}
}
// NOTE: Check if the novi_uuid is in the novi_trusted_li list
if ($idaa_loc.novi_uuid && $idaa_loc.novi_trusted_li) {
if ($idaa_loc.novi_trusted_li.includes($idaa_loc.novi_uuid)) {
$ae_loc.access_type = 'trusted';
$ae_loc.trusted_access = true;
}
}
if ($ae_loc.administrator_access) {
$idaa_loc.archives.enabled = 'enabled';
$idaa_loc.archives.hidden = 'not_hidden';
$idaa_loc.archives.limit = 150;
} else if ($ae_loc.trusted_access) {
$idaa_loc.archives.enabled = 'enabled';
$idaa_loc.archives.hidden = 'not_hidden';
$idaa_loc.archives.limit = 75;
} else {
$idaa_loc.archives.enabled = 'enabled';
$idaa_loc.archives.hidden = 'not_hidden';
$idaa_loc.archives.limit = 75;
}
let idaa_archive_obj_li_get_promise;
let idaa_archive_obj_get_promise;
if (account_id) {
$slct.account_id = account_id;
handle_load_archive_obj_li({account_id: $slct.account_id, try_cache: false});
}
if (archive_id) {
console.log(`Selected Archive ID: ${archive_id}`);
$slct.archive_id = archive_id;
$slct_trigger = 'load__archive_obj';
// $idaa_loc.archives.show_main__options = true;
$idaa_loc.archives.show_list__archive_obj_li = false;
$idaa_loc.archives.show_view__archive_obj = true;
$idaa_loc.archives.show_edit__archive_obj = false;
} else {
// $idaa_loc.archives.show_main__options = true;
$idaa_loc.archives.show_list__archive_obj_li = true;
$idaa_loc.archives.show_view__archive_obj = false;
$idaa_loc.archives.show_edit__archive_obj = false;
}
if (!$ae_app.client_content) {
$ae_app.client_content = {};
}
onMount(() => {
console.log('** Component Mounted: ** IDAA Archives - AE Archives: Main');
});
$: if ($ae_app.iframe_height && $ae_app.iframe_height_modal_body) {
console.log('getting new dimensions for iframe:', $ae_app.iframe_height, $ae_app.iframe_height_modal_body);
let iframe_height = 0;
if ($ae_app.iframe_height > $ae_app.iframe_height_modal_body) {
iframe_height = $ae_app.iframe_height;
} else {
iframe_height = $ae_app.iframe_height_modal_body;
// console.log($ae_app.modal_dimensions);
if ($ae_app.modal_dimensions && $ae_app.modal_dimensions.header_height) {
iframe_height = iframe_height + $ae_app.modal_dimensions.header_height;
}
if ($ae_app.modal_dimensions && $ae_app.modal_dimensions.footer_height) {
iframe_height = iframe_height + $ae_app.modal_dimensions.footer_height;
}
// iframe_height = iframe_height + 50; // Just in case
}
console.log(`Suggested new iframe_height: ${iframe_height}`);
window.parent.postMessage({'iframe_height': iframe_height}, "*"); // This should be in pixels
} else if ($ae_app.iframe_height) {
console.log('setting new iframe_height:', $ae_app.iframe_height);
// let iframe_height = $ae_app.iframe_height;
window.parent.postMessage({'iframe_height': $ae_app.iframe_height}, "*"); // This should be in pixels
}
$: if ($slct_trigger == 'load__archive_obj' && $slct.archive_id) {
console.log('*** $slct_trigger == load__archive_obj ***');
$slct_trigger = null;
handle_load_archive_obj({archive_id: $slct.archive_id, try_cache: false});
// Auto show the selected Archive ID
// Is this pushState needed here?
// Set the URL param "archive_id" to the current Archive ID. This is a just in case.
// const url = new URL(location);
// url.searchParams.set('archive_id', $slct.archive_id);
// history.pushState({}, '', url);
// Is this postMessage needed here?
let message = {'archive_id': $slct.archive_id};
window.parent.postMessage(message, "*");
// $idaa_loc.archives.show_main__options = false;
// $idaa_loc.archives.show_list__archive_obj_li = false;
// $idaa_loc.archives.show_view__archive_obj = true;
// $idaa_loc.archives.show_edit__archive_obj = false;
}
$: if ($slct_trigger == 'load__archive_obj_li' && $slct.account_id) {
console.log('*** $slct_trigger == load__archive_obj_li ***');
$slct_trigger = null;
handle_load_archive_obj_li({account_id: $slct.account_id, try_cache: false});
}
async function handle_load_archive_obj_li({account_id, try_cache=true}) {
console.log('*** handle_load_archive_obj_li() ***');
console.log($idaa_loc.archives);
let enabled = $idaa_loc.archives.enabled;
let hidden = $idaa_loc.archives.hidden;
let limit = $idaa_loc.archives.limit;
let offset = $idaa_loc.archives.offset;
let params = {};
let params_json: key_val = {};
if ($idaa_loc.archives.fulltext_search_qry_str && $idaa_loc.archives.fulltext_search_qry_str.length > 2) {
params_json['ft_qry'] = {
'default_qry_str': $idaa_loc.archives.fulltext_search_qry_str,
};
}
if ($idaa_loc.archives.qry_audio || $idaa_loc.archives.qry_video || $idaa_loc.archives.qry_other) {
params_json['and_qry'] = {};
if ($idaa_loc.archives.qry_audio) params_json['and_qry']['audio'] = true;
if ($idaa_loc.archives.qry_video) params_json['and_qry']['video'] = true;
if ($idaa_loc.archives.qry_other) params_json['and_qry']['other'] = $idaa_loc.archives.qry_other;
}
console.log('params_json:', params_json);
idaa_archive_obj_li_get_promise = api.get_ae_obj_li_for_obj_id_crud({
api_cfg: $ae_app.ae_api,
obj_type: 'archive', // Archive in this case is an IDAA archive.
for_obj_type: 'account',
for_obj_id: account_id,
use_alt_table: false, // NOTE: This will use the table_name_alt value instead of the table_name value in the API config.
use_alt_base: false, // NOTE: This will use the base_name_alt value instead of the base_name value in the API config.
enabled: enabled,
hidden: hidden,
order_by_li: {'priority': 'DESC', 'sort': 'DESC', 'created_on': 'DESC', 'updated_on': 'DESC'},
limit: limit,
offset: offset,
params_json: params_json,
params: params,
log_lvl: 1
})
.then(function (archive_obj_li_get_result) {
if (archive_obj_li_get_result) {
$slct.archive_obj_li = archive_obj_li_get_result;
console.log(`Archive list:`, $slct.archive_obj_li);
} else {
$slct.archive_obj_li = [];
}
})
.catch(function (error) {
console.log('No results returned or failed.', error);
});
return idaa_archive_obj_li_get_promise;
}
async function handle_load_archive_obj({archive_id, try_cache=false}) {
console.log('*** handle_load_archive_obj() ***');
// let enabled = $idaa_loc.archives.enabled;
// let hidden = $idaa_loc.archives.hidden;
// let limit = $idaa_loc.archives.limit;
// let offset = $idaa_loc.archives.offset;
let params = {};
idaa_archive_obj_get_promise = api.get_ae_obj_id_crud({
api_cfg: $ae_app.ae_api,
obj_type: 'archive',
obj_id: archive_id,
use_alt_table: false, // NOTE: This will use the table_name_alt value instead of the table_name value in the API config.
use_alt_base: false, // NOTE: This will use the base_name_alt value instead of the base_name value in the API config.
params: params,
log_lvl: 0
})
.then(function (archive_obj_get_result) {
if (archive_obj_get_result) {
$slct.archive_obj = archive_obj_get_result;
// console.log($slct.archive_obj.cfg_json.content_group_sort);
$idaa_loc.archives.content_group_sort = $slct.archive_obj.cfg_json.content_group_sort;
console.log(`Archive object:`, $slct.archive_obj);
}
})
.catch(function (error) {
console.log('No results returned or failed.', error);
});
return idaa_archive_obj_get_promise;
}
function handle_created_archive_obj(event) {
console.log('*** handle_created_archive_obj() ***');
console.log(event.detail);
handle_load_archive_obj({archive_id: $slct.archive_id, try_cache: false});
const url = new URL(location);
url.searchParams.set('archive_id', $slct.archive_id);
history.pushState({}, '', url);
let message = {'archive_id': $slct.archive_id};
window.parent.postMessage(message, "*");
// $slct_trigger = 'load__archive_obj';
$slct_trigger = 'load__archive_obj_li';
// $idaa_loc.archives.show_main__options = false;
$idaa_loc.archives.show_list__archive_obj_li = false;
$idaa_loc.archives.show_view__archive_obj = true;
$idaa_loc.archives.show_edit__archive_obj = false;
}
function handle_updated_archive_obj(event) {
console.log('*** handle_updated_archive_obj() ***');
console.log(event.detail);
$slct_trigger = 'load__archive_obj';
// NOTE: If the next trigger is set too quickly it will cause the one above to be missed.
// $slct_trigger = 'load__archive_obj_li';
// $idaa_loc.archives.show_main__options = false;
$idaa_loc.archives.show_list__archive_obj_li = false;
$idaa_loc.archives.show_view__archive_obj = true;
$idaa_loc.archives.show_edit__archive_obj = false;
}
function handle_deleted_archive_obj(event) {
console.log('*** handle_deleted_archive_obj() ***');
console.log(event.detail);
const url = new URL(location);
url.searchParams.delete('archive_id');
history.pushState({}, '', url);
let message = {'archive_id': null};
window.parent.postMessage(message, "*");
$slct_trigger = 'load__archive_obj_li';
$idaa_loc.archives.show_main__options = true;
$idaa_loc.archives.show_list__archive_obj_li = true;
$idaa_loc.archives.show_view__archive_obj = false;
$idaa_loc.archives.show_edit__archive_obj = false;
}
</script>
<section id="osit_idaa_archives" class="osit_archives ae_main c_idaa c_idaa_archives" bind:clientHeight={$ae_app.iframe_height}>
<!-- <header>
<h1>IDAA Archives</h1>
</header> -->
<section class="ae_section ae_meta">
<p>
Novi: {$idaa_loc.novi_full_name}
<span class="details">
(
{$idaa_loc.novi_email}
{#if $ae_loc.administrator_access}
<span class="access_type administrator_access">Administrator</span>
{:else if $ae_loc.trusted_access}
<span class="access_type trusted_access">Trusted</span>
{/if}
<span class="novi_uuid">UUID: {$idaa_loc.novi_uuid}</span>
)
</span>
</p>
<!-- <p>Page height: {window.innerHeight}</p> -->
</section>
{#if $idaa_loc.archives.show_main__options}
<section class="ae_section ae_options ae_column archive_obj__options">
<!-- <div class="note">A comment about the IDAA archives in general can go here.</div> -->
<div class="filters_and_search ae_group ae_row">
<!-- Show/hide hidden content -->
{#if $ae_loc.trusted_access}
{#if $idaa_loc.archives.hidden == 'not_hidden'}
<button
on:click={() => {
$idaa_loc.archives.hidden = 'all';
$idaa_loc.archives.limit = 150;
$slct_trigger = 'load__archive_obj_li';
}}
class="btn_new_bb_post ae_btn btn_xs ae_smallest btn btn-xs btn-info"
>
<span class="fas fa-eye"></span> Show Hidden Archives
</button>
{:else}
<button
on:click={() => {
$idaa_loc.archives.hidden = 'not_hidden';
$slct_trigger = 'load__archive_obj_li';
}}
class="btn_new_bb_post ae_btn btn_xs btn btn-xs btn-info"
>
<span class="fas fa-eye-slash"></span> Hide Hidden Archives
</button>
{/if}
<!-- We only want these options to show if a specific archive is showing. -->
{#if $idaa_loc.archives.show_view__archive_obj}
{#if $idaa_loc.archives.hidden == 'not_hidden'}
<button
on:click={() => {
$idaa_loc.archives.hidden = 'all';
$idaa_loc.archives.limit = 150;
$slct_trigger = 'load__archive_content_obj_li';
}}
class="btn_new_bb_post ae_btn btn_xs ae_smallest btn btn-xs btn-info"
>
<span class="fas fa-eye"></span> Show Hidden Content
</button>
{:else}
<button
on:click={() => {
$idaa_loc.archives.hidden = 'not_hidden';
$slct_trigger = 'load__archive_content_obj_li';
}}
class="btn_new_bb_post ae_btn btn_xs btn btn-xs btn-info"
>
<span class="fas fa-eye-slash"></span> Hide Hidden Content
</button>
{/if}
{/if}
{/if}
<!-- For administrator access: Show/hide disabled content -->
{#if $ae_loc.administrator_access}
{#if $idaa_loc.archives.enabled == 'enabled'}
<button
on:click={() => {
$idaa_loc.archives.hidden = 'all';
$idaa_loc.archives.enabled = 'all';
$idaa_loc.archives.limit = 500;
$slct_trigger = 'load__archive_obj_li';
}}
class="ae_btn btn_xs ae_smallest btn btn-xs btn-warning"
>
<span class="fas fa-eye"></span> Show Disabled Archives
</button>
{:else}
<button
on:click={() => {
$idaa_loc.archives.enabled = 'enabled';
$slct_trigger = 'load__archive_obj_li';
}}
class="ae_btn btn_xs ae_smallest btn btn-xs btn-warning"
>
<span class="fas fa-eye-slash"></span> Hide Disabled Archives
</button>
{/if}
{#if $idaa_loc.archives.enabled == 'enabled'}
<button
on:click={() => {
$idaa_loc.archives.hidden = 'all';
$idaa_loc.archives.enabled = 'all';
$idaa_loc.archives.limit = 500;
$slct_trigger = 'load__archive_content_obj_li';
}}
class="ae_btn btn_xs ae_smallest btn btn-xs btn-warning"
>
<span class="fas fa-eye"></span> Show Disabled Content
</button>
{:else}
<button
on:click={() => {
$idaa_loc.archives.enabled = 'enabled';
$slct_trigger = 'load__archive_content_obj_li';
}}
class="ae_btn btn_xs btn btn-xs btn-warning"
>
<span class="fas fa-eye-slash"></span> Hide Disabled Content
</button>
{/if}
{/if}
</div>
<!-- END: div filters_and_search -->
<div class="view_archvies_create_archive ae_group ae_row">
{#if $slct.archive_id}
<button
on:click={ () => {
$slct.archive_id = null;
$slct.archive_obj = {};
$idaa_loc.archives.show_main__options = true;
$idaa_loc.archives.show_list__archive_obj_li = true;
$idaa_loc.archives.show_view__archive_obj = false;
$idaa_loc.archives.show_edit__archive_obj = false;
// $ae_app.iframe_height_modal_body = 0;
const url = new URL(location);
url.searchParams.delete('archive_id');
history.pushState({}, '', url);
let message = {'archive_id': null};
window.parent.postMessage(message, "*");
}}
class="btn_new_archive ae_btn btn btn-secondary"
>
<span class="fas fa-times"></span> View Other Archives
</button>
{/if}
{#if $ae_loc.trusted_access}
<button
on:click={() => {
$slct.archive_id = null;
$slct.archive_obj = {};
const url = new URL(location);
url.searchParams.delete('archive_id');
history.pushState({}, '', url);
$idaa_loc.archives.show_main__options = true;
$idaa_loc.archives.show_list__archive_obj_li = false;
$idaa_loc.archives.show_view__archive_obj = false;
$idaa_loc.archives.show_edit__archive_obj = true;
}}
class="ae_btn ae_smallest btn_new_archive ae_btn btn btn-warning"
>
<span class="fas fa-plus"></span> Create new Archive
</button>
{/if}
</div>
</section>
{/if}
{#if $idaa_loc.archives.show_list__archive_obj_li}
<List_archive_obj
on:created__archive_obj={handle_created_archive_obj}
on:updated__archive_obj={handle_updated_archive_obj}
on:deleted__archive_obj={handle_deleted_archive_obj}
/>
{/if}
{#if $idaa_loc.archives.show_view__archive_obj && $slct.archive_obj}
<View_archive_obj />
{/if}
</section>
{#if $idaa_loc.archives.show_edit__archive_obj}
<Element_modal_v3
show = { true }
modal_cover_body = { false }
report_client_dimensions = { true }
on:close={ () => {
$idaa_loc.archives.show_main__options = true;
$idaa_loc.archives.show_list__archive_obj_li = true;
$idaa_loc.archives.show_edit__archive_obj = false;
$idaa_loc.archives.show_view__archive_obj = false;
const url = new URL(location);
url.searchParams.delete('archive_id');
history.pushState({}, '', url);
let message = {'archive_id': null};
window.parent.postMessage(message, "*");
}}
on:report__modal_dimensions={ (event) => {
console.log('*** on:report__modal_dimensions ***');
console.log(event.detail);
$ae_app.modal_dimensions = event.detail.modal_dimensions;
}}
>
<span slot="header_title">{@html ($slct.archive_obj.name ? $slct.archive_obj.name : 'New Archive Group')}</span>
<span slot="body">
<Edit_archive_obj
on:created__archive_obj={handle_created_archive_obj}
on:updated__archive_obj={handle_updated_archive_obj}
on:deleted__archive_obj={handle_deleted_archive_obj}
/>
</span>
</Element_modal_v3>
{/if}
<!-- {#if $idaa_loc.archives.show_view__archive_obj && $slct.archive_obj}
<Element_modal_v3
show = { true }
modal_cover_body = { true }
report_modal_dimensions = { true }
on:close={ () => {
$slct.archive_id = null;
$slct.archive_obj = {};
$idaa_loc.archives.show_main__options = true;
$idaa_loc.archives.show_list__archive_obj_li = true;
$idaa_loc.archives.show_view__archive_obj = false;
$idaa_loc.archives.show_edit__archive_obj = false;
$ae_app.iframe_height_modal_body = 0;
const url = new URL(location);
url.searchParams.delete('archive_id');
history.pushState({}, '', url);
let message = {'archive_id': null};
window.parent.postMessage(message, "*");
}}
on:report__modal_dimensions={ (event) => {
console.log('*** on:report__modal_dimensions ***');
console.log(event.detail);
$ae_app.modal_dimensions = event.detail.modal_dimensions;
}}
>
<span slot="header_title">{@html $slct.archive_obj.name}</span>
<span slot="body">
<View_archive_obj />
</span>
</Element_modal_v3>
{/if} -->
<style>
</style>

View File

@@ -1,706 +0,0 @@
<script lang="ts">
import { createEventDispatcher, onDestroy, onMount } from 'svelte';
import { fade } from 'svelte/transition';
import { ae, api, Element_input, Element_input_file_hashing } from 'aether_npm_lib';
import { slct, ae_app } from './stores';
const dispatch = createEventDispatcher();
type key_val = {
[key: string]: any;
};
$idaa_loc.archives.input_file_list = []
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 disable_submit_btn = true;
if ($slct.archive_content_id) {
console.log(`Archive Content ID selected: ${$slct.archive_content_id}`);
console.log(`Archive Content Object selected: ${$slct.archive_content_obj}`)
} else {
$slct.archive_content_id = null;
$slct.archive_content_obj = {
archive_id_random: null,
// archive_content_id_random: null,
archive_content_type: null,
name: null,
description: null,
content_html: null,
// hosted_file_id_random: null,
file_path: null,
filename: null,
file_extension: null,
original_datetime: null,
original_timezone: null,
original_location: null,
original_url: null,
original_url_text: null,
access_key: null, // or passcode?
enable: true,
hide: false,
priority: null,
sort: null,
notes: null,
};
console.log(`Archive Content Object started: ${$slct.archive_content_obj}`)
}
if ($slct.archive_content_obj) {
} else {
console.log(`Archive Content Object started: ${$slct.archive_content_obj}`)
}
onMount(() => {
console.log('** Component Mounted: ** Edit - Archive Content Obj');
tinymce_remove(); // This seems to fix rendering issues
tinymce_init();
});
onDestroy(() => {
console.log('** Component Destroyed: ** Edit - Event Obj');
tinymce_remove(); // This seems like the right thing to do
});
// let ae_iframe_height = window.outerHeight;
let ae_iframe_height = window.innerHeight;
console.log(`ae_iframe_height: ${ae_iframe_height}`);
$: if (ae_iframe_height) {
console.log('ae_iframe_height changed:', ae_iframe_height);
let iframe_height = ae_iframe_height; // TESTING!!!
// window.parent.postMessage({'iframe_height': `${iframe_height}px`}, "*");
window.parent.postMessage({'iframe_height': iframe_height}, "*");
}
$: if ($slct.archive_content_obj) {
console.log('Selected archive_content object changed?');
console.log($slct.archive_content_obj);
if ($slct.archive_content_obj == null) {
$slct.archive_content_obj = {title: null, content: null, name: null, description: null, notes: null, created_on: null, updated_on: null};
} else {
disable_submit_btn = false;
}
}
async function handle_submit_form(event) {
console.log('*** handle_submit_form() ***');
disable_submit_btn = true;
let form_data = new FormData(event.target);
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_data: key_val = {};
if (!$slct.archive_content_id) {
archive_content_data['account_id_random'] = $ae_app.account_id;
archive_content_data['archive_id_random'] = $slct.archive_id;
// archive_content_data['enable'] = true;
}
archive_content_data['name'] = form_archive_content_data.name;
if (tinyMCE.get('description')) {
archive_content_data['description'] = tinyMCE.get('description').getContent();
} else {
archive_content_data['description'] = form_archive_content_data.description;
}
if (tinyMCE.get('content_html')) {
archive_content_data['content_html'] = tinyMCE.get('content_html').getContent();
} else {
archive_content_data['content_html'] = form_archive_content_data.content_html;
}
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_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();
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();
if (date_part && time_part) {
date_time_str = `${date_part} ${time_part}`;
} else if (date_part) {
date_time_str = `${date_part}T00:00:00`;
} else if (time_part) {
// date_time_str = `${time_part}`;
date_time_str = false;
}
archive_content_data['original_datetime'] = date_time_str;
archive_content_data['original_timezone'] = form_archive_content_data.original_timezone;
archive_content_data['original_location'] = form_archive_content_data.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);
} else {
archive_content_data['sort'] = null;
}
if (form_archive_content_data.group) {
archive_content_data['group'] = form_archive_content_data.group;
} else {
archive_content_data['group'] = null;
}
if (archive_content_data['enable']) {
archive_content_data['enable'] = !!form_archive_content_data.enable;
}
if (tinyMCE.get('notes')) {
archive_content_data['notes'] = tinyMCE.get('notes').getContent();
} else {
archive_content_data['notes'] = form_archive_content_data.notes;
}
console.log(archive_content_data);
if (!$slct.archive_content_id) {
create_archive_content_obj_promise = api.create_ae_obj_crud({
api_cfg: $ae_app.ae_api,
obj_type: 'archive_content',
fields: archive_content_data,
key: $ae_app.ae_api.api_crud_super_key,
log_lvl: 1
})
.then(async function (archive_content_obj_create_result) {
if (!archive_content_obj_create_result) {
console.log('The result was null or false.');
return false;
}
$slct.archive_content_id = archive_content_obj_create_result.obj_id_random;
// Get ready to upload the file now that we have a new archive_content_id.
const form_data = new FormData();
form_data.append('account_id', $ae_app.account_id);
form_data.append('link_to_type', 'archive_content');
form_data.append('link_to_id', $slct.archive_content_id);
for (let i = 0; i < event.target.file_list.files.length; i++) {
form_data.append(`file_list`, event.target.archive_content_file_upload_list.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
upload__hosted_file_obj_promise = await api.post_object({api_cfg: $ae_app.ae_api, endpoint: endpoint, params: params, form_data: form_data});
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';
update_archive_content_obj_promise = await api.update_ae_obj_id_crud({
api_cfg: $ae_app.ae_api,
obj_type: 'archive_content',
obj_id: $slct.archive_content_id,
fields: archive_content_data,
key: $ae_app.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;
}
return archive_content_obj_update_result;
})
.catch(function (error) {
console.log('Something went wrong.');
console.log(error);
return false;
});
// update_archive_content_obj_promise = await update_archive_content_obj({archive_content_id: $slct.archive_content_id, data: archive_content_data})
// console.log(update_archive_content_obj_promise);
return update_archive_content_obj_promise
})
.then(function (archive_content_obj_create_result) {
dispatch(
'created__archive_content_obj',
{
archive_content_id: $slct.archive_content_id,
}
);
return archive_content_obj_create_result;
})
.catch(function (error) {
console.log('Something went wrong.');
console.log(error);
return false;
});
return create_archive_content_obj_promise;
} else {
update_archive_content_obj_promise = api.update_ae_obj_id_crud({
api_cfg: $ae_app.ae_api,
obj_type: 'archive_content',
obj_id: $slct.archive_content_id,
fields: archive_content_data,
key: $ae_app.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: $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;
}
}
function handle_input_file_list_updated(event) {
console.log(event.detail.element_id);
console.log(event.detail.input_file_list);
console.log(event.detail.input_file_list_processed);
// This now needs be reviewed and possibly updated with additional information. Check if any files have already been uploaded in the past and ignore.
let new_upload_list = event.detail.input_file_list_processed;
$idaa_loc.archives.input_file_list = new_upload_list;
// Setting the first file as the default. For now other files are ignored?
if (new_upload_list.length) {
$idaa_loc.archives.input_filename = new_upload_list[0].filename;
$idaa_loc.archives.input_file_extension = new_upload_list[0].guessed_extension;
} else {
$idaa_loc.archives.input_filename = '';
$idaa_loc.archives.input_file_extension = '';
}
// for (let file_upload_item of new_upload_list) {
// console.log(file_upload_item);
// filename = file_upload_item.filename;
// file_extension = file_upload_item.guessed_extension;
// }
}
$idaa_loc.archives.form_file_upload_list = [];
async function handle_delete_archive_content_obj({archive_content_id, hosted_file_id=null, method='delete'}) {
console.log('*** handle_delete_archive_content_obj() ***');
if (hosted_file_id) {
let delete_hosted_file_obj_promise = api.delete_hosted_file({
api_cfg: $ae_app.ae_api,
hosted_file_id: hosted_file_id,
link_to_type: 'archive_content',
link_to_id: archive_content_id,
rm_orphan: true,
// params: params,
key: $ae_app.ae_api.api_crud_super_key,
log_lvl: 2
})
.then(function (hosted_file_obj_delete_result) {
if (hosted_file_obj_delete_result) {
// console.log(`Result:`, hosted_file_obj_delete_result);
dispatch(
'deleted__hosted_file_obj',
{
hosted_file_id: hosted_file_id,
}
);
}
})
.catch(function (error) {
console.log('The result was null or false when trying to delete.', error);
});
}
delete_archive_content_obj_promise = api.delete_ae_obj_id_crud({
api_cfg: $ae_app.ae_api,
obj_type: 'archive_content',
obj_id: archive_content_id,
method: method,
// params: params,
key: $ae_app.ae_api.api_crud_super_key,
log_lvl: 0
})
.then(function (archive_content_obj_delete_result) {
if (archive_content_obj_delete_result) {
// console.log(`Result:`, archive_content_obj_delete_result);
dispatch(
'deleted__archive_content_obj',
{
archive_content_id: archive_content_id,
}
);
}
})
.catch(function (error) {
console.log('The result was null or false when trying to delete.', error);
});
return delete_archive_content_obj_promise;
}
function tinymce_init() {
// REFERENCE: https://www.tiny.cloud/docs/tinymce/6/basic-setup/
// plugins: [
// 'advlist', 'autolink', 'link', 'image', 'lists', 'charmap', 'preview', 'anchor', 'pagebreak',
// 'searchreplace', 'wordcount', 'visualblocks', 'visualchars', 'code', 'fullscreen', 'insertdatetime',
// 'media', 'table', 'emoticons', 'template', 'help'
// ],
// 'undo redo | styles | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent'
// NOTE: Regular version of the TinyMCE editor
tinymce.init({
selector: '.tinymce_editor.editor_regular',
// width: 600,
height: 400,
plugins: [ 'advlist', 'autolink', 'link', 'lists', 'anchor', 'code', 'help' ],
menubar: false,
toolbar: 'undo redo | styles | bold italic | alignleft aligncenter alignright | bullist numlist outdent indent | link | code | help',
});
// NOTE: Basic version of the TinyMCE editor
tinymce.init({
selector: '.tinymce_editor.editor_basic',
// width: 600,
height: 400,
plugins: [ 'lists', 'code', 'help' ],
menubar: false,
toolbar: 'undo redo | styles | bold italic | alignleft aligncenter | bullist numlist outdent indent | code | help',
});
// NOTE: Minimal version of the TinyMCE editor
tinymce.init({
selector: '.tinymce_editor.editor_basic_200',
// width: 600,
height: 200,
plugins: [ 'lists', 'code', 'help' ],
menubar: false,
toolbar: 'undo redo | styles | bold italic | alignleft aligncenter | bullist numlist outdent indent | code | help',
});
// NOTE: Less is more version of the TinyMCE editor
tinymce.init({
selector: '.tinymce_editor.editor_less_100',
// width: 600,
height: 100,
// plugins: [ 'lists', 'code', 'help' ],
menubar: false,
toolbar: false,
statusbar: false,
});
}
function tinymce_remove() {
tinymce.remove('.tinymce_editor.editor_regular');
tinymce.remove('.tinymce_editor.editor_basic');
tinymce.remove('.tinymce_editor.editor_basic_200');
tinymce.remove('.tinymce_editor.editor_less_100');
}
</script>
<section
class="svelte_component ae_edit archive_content_obj"
class:ae_create={!$slct.archive_content_id}
>
<!-- bind:clientHeight={ae_iframe_height} -->
<form on:submit|preventDefault={handle_submit_form} class="">
{#await update_archive_content_obj_promise}
<div class="awaiting alert_msg_pulse" out:fade={{ duration: 2000 }}>Saving...</div>
{:then}
{#if update_archive_content_obj_promise}
<div class="awaiting" out:fade={{ duration: 2000 }}>Finished saving</div>
{:else}
<!-- <div class="awaiting" out:fade={{ duration: 2000 }}>Nothing here yet</div> -->
{/if}
{/await}
<h3>Archive Content</h3>
<label for="title">Name of Content
<input type="text" id="name" name="name" required max="200" value={$slct.archive_content_obj.name ? $slct.archive_content_obj.name : '' } placeholder="Content name">
</label>
<label for="description">Description
<textarea id="description" name="description" rows="6" cols="80" value={$slct.archive_content_obj.description ? $slct.archive_content_obj.description : ''} class="ae_value archive_content__description tinymce_editor editor_basic_200"></textarea>
</label>
<label for="content_html">Content (HTML)
<textarea id="content_html" name="content_html" rows="6" cols="80" value={$slct.archive_content_obj.content_html ? $slct.archive_content_obj.content_html : ''} class="ae_value archive_content__content_html tinymce_editor editor_regular"></textarea>
</label>
<label for="archive_content_type">Type
<select id="archive_content_type" name="archive_content_type" value={$slct.archive_content_obj.archive_content_type}>
<option value="">-- None --</option>
<option value="hosted_file">Hosted File in &AElig;</option>
<option value="html">Hosted HTML in &AElig</option>
<option value="json">Hosted JSON in &AElig;</option>
<option value="url">External URL</option>
<option value="other">Other</option>
</select>
</label>
<fieldset class="">
<legend class="">Public Access with Rotating Access Key/Passcode</legend>
<label for="enable_for_public_no" class="">No, disable public access
<input
type="radio"
class=""
id="enable_for_public_no"
name="enable_for_public"
value={false}
bind:group={$slct.archive_content_obj.enable_for_public}
>
<!-- <input type="radio" class="" id="enable_for_public_no" name="enable_for_public" value="0" checked={(!$slct.archive_content_obj.enable_for_public)} required> -->
</label>
<label for="enable_for_public_yes" class="">Yes, allow public access
<input
type="radio"
class=""
id="enable_for_public_yes"
name="enable_for_public"
value={true}
bind:group={$slct.archive_content_obj.enable_for_public}
>
<!-- <input type="radio" class="" id="enable_for_public_yes" name="enable_for_public" value="1" checked={($slct.archive_content_obj.enable_for_public)} required > -->
</label>
</fieldset>
<h3>File?</h3>
{#if !$slct.archive_content_id}
<Element_input_file_hashing
multiple = {false}
required = {true}
accept = {''}
element_id = {'archive_content_file_upload_list'}
on:input_file_list_updated = {handle_input_file_list_updated}
use_selected_file_table={true}
/>
<!-- bind:input_file_list = {$idaa_loc.archives.form_file_upload_list} -->
{/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={($slct.archive_content_obj.file_path ? $slct.archive_content_obj.file_path : '')}
readonly={!$ae_loc.administrator_access}
>
</label>
<label for="filename">Filename
<input type="text" id="filename" name="filename" value={($slct.archive_content_obj.filename ? $slct.archive_content_obj.filename : $idaa_loc.archives.input_filename)}>
</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={($slct.archive_content_obj.file_extension ? $slct.archive_content_obj.file_extension : $idaa_loc.archives.input_file_extension)}
readonly={!$ae_loc.administrator_access}
>
</label>
<h3>Original</h3>
<label for="original_datetime">Original Date/Time
<input type="date" id="original_datetime_date" name="original_datetime_date" value={($slct.archive_content_obj.original_datetime ? ae.util.iso_datetime_formatter($slct.archive_content_obj.original_datetime,'date_iso') : '')} placeholder="YYYY-MM-DD">
<input type="time" id="original_datetime_time" name="original_datetime_time" value={($slct.archive_content_obj.original_datetime ? ae.util.iso_datetime_formatter($slct.archive_content_obj.original_datetime,'time_iso') : '')} placeholder="HH:MM AM/PM">
</label>
<fieldset class="flex_row flex_gap_md flex_justify_around">
<label for="original_timezone">Original Timezone
{#if $ae_app.lu_time_zone_list}
<select name="original_timezone" id="original_timezone" required>
{#each $ae_app.lu_time_zone_list as lu_timezone}
<option value="{lu_timezone.name}" selected={((($slct.archive_content_obj.original_timezone && lu_timezone.name == $slct.archive_content_obj.original_timezone) || lu_timezone.name == $ae_app.current_timezone) ? 'selected' : '')}>{lu_timezone.name}</option>
{/each}
</select>
{:else}
<input type="text" name="timezone" value={($slct.archive_content_obj.original_timezone ? $slct.archive_content_obj.original_timezone : $ae_app.current_timezone)} />
{/if}
</label>
</fieldset>
<!-- <label for="original_timezone">Original Timezone
<input type="text" id="original_timezone" name="original_timezone" value={$slct.archive_content_obj.original_timezone} list="timezones">
<datalist id="timezones">
<option value="UTC">UTC</option>
<option value="America/New_York">America/New York</option>
<option value="America/Chicago">America/Chicago</option>
<option value="America/Denver">America/Denver</option>
<option value="America/Phoenix">America/Phoenix</option>
<option value="America/Los_Angeles">America/Los Angeles</option>
<option value="America/Anchorage">America/Anchorage</option>
<option value="America/Adak">America/Adak</option>
<option value="Pacific/Honolulu">Pacific/Honolulu</option>
<option value="Pacific/Midway">Pacific/Midway</option>
<option value="US/Eastern">US/Eastern</option>
<option value="US/Central">US/Central</option>
<option value="US/Mountain">US/Mountain</option>
<option value="US/Pacific">US/Pacific</option>
<option value="US/Alaska">US/Alaska</option>
<option value="US/Hawaii">US/Hawaii</option>
<option value="US/Samoa">US/Samoa</option>
<option value="US/Aleutian">US/Aleutian</option>
<option value="US/Arizona">US/Arizona</option>
<option value="US/Michigan">US/Michigan</option>
</datalist>
</label> -->
<label for="original_location">Original Location
<input type="text" id="original_location" name="original_location" value={$slct.archive_content_obj.original_location}>
</label>
{#if $ae_loc.trusted_access}
<section class="ae_section archive_content__admin_options"> <!-- BEGIN: section archive_content__admin_options -->
<h3>
Admin Options
<button type="button" class="ae_btn ae_smallest ae_d_none_toggle ae_float_right btn btn-xs btn-info" on:click={() => {document.querySelector('.ae_d_none_content').classList.toggle('ae_d_none');}}><span class="fas fa-eye"></span> Show/Hide Admin</button>
</h3>
<span class="ae_d_none_content ae_d_none">
<label>Hide
<input
type="checkbox"
name="hide"
id="hide"
bind:checked={$slct.archive_content_obj.hide}
>
<!-- <input type="checkbox" name="hide" value={$slct.archive_content_obj.hide} /> -->
</label>
<label>Priority
<input
type="checkbox"
name="priority"
id="priority"
bind:checked={$slct.archive_content_obj.priority}
>
<!-- <input type="checkbox" name="priority" value={$slct.archive_content_obj.priority} /> -->
</label>
<label>Sort <input type="number" name="sort" value={$slct.archive_content_obj.sort} /></label>
<label>Group <input type="text" name="group" value={$slct.archive_content_obj.group} max="100" /></label>
{#if $ae_loc.administrator_access}
<label>Enable
<input
type="checkbox"
name="enable"
id="enable"
bind:checked={$slct.archive_content_obj.enable}
>
<!-- <input type="checkbox" name="enable" value={$slct.archive_content_obj.enable} checked={$slct.archive_content_obj.enable} /> -->
</label>
{/if}
<label>Internal Staff Notes
<textarea id="notes" name="notes" class="ae_value archive_content__notes tinymce_editor editor_basic_200" rows="2" cols="70" value={$slct.archive_content_obj.notes}></textarea>
</label>
</span> <!-- END: span ae_show_hide_content -->
</section> <!-- END: section archive_content__admin_options -->
{/if}
<section class="ae_section ae_options ae_row">
<button type="submit" class="ae_btn btn btn-primary"><span class="fas fa-check"></span> Save Archive Content</button>
{#if $slct.archive_content_id}
<button
on:click={() => {
if (!confirm('Are you sure you want to delete this archive content?')) {return false;}
handle_delete_archive_content_obj({archive_content_id: $slct.archive_content_id, hosted_file_id: $slct.archive_content_obj.hosted_file_id_random});
$slct.archive_content_id = null;
$slct.archive_content_obj = {};
}}
class="ae_btn ae_smallest btn btn-danger" type="button">
<span class="fas fa-minus"></span> Delete
</button>
{/if}
</section>
</form>
</section>
<style>
</style>

View File

@@ -1,588 +0,0 @@
<script lang="ts">
import { createEventDispatcher, onDestroy, onMount } from 'svelte';
import { fade } from 'svelte/transition';
import { ae, api, Element_input } from 'aether_npm_lib';
import { slct, ae_app } from './stores';
const dispatch = createEventDispatcher();
type key_val = {
[key: string]: any;
};
let create_archive_obj_promise: any;
let delete_archive_obj_promise: any;
let update_archive_obj_promise: any;
let disable_submit_btn = true;
if ($slct.archive_id) {
console.log(`Archive ID selected: ${$slct.archive_id}`);
console.log(`Archive Object selected: ${$slct.archive_obj}`)
} else {
$slct.archive_id = null;
$slct.archive_obj = {
title: null,
content: null,
topic_id: null,
anonymous: false,
external_person_id: $idaa_loc.novi_uuid,
full_name: $idaa_loc.novi_full_name,
email: $idaa_loc.novi_email,
sort: null,
notes: null,
};
console.log(`Archive Object started: ${$slct.archive_obj}`)
}
if ($slct.archive_obj) {
} else {
// $slct.archive_obj = {name: 'null', description: 'null'};
console.log(`Archive Object started: ${$slct.archive_obj}`)
}
if ($ae_app.lu_time_zone_list && $ae_app.lu_time_zone_list.length > 0) {
// console.log('Already have time zone list!', $ae_app.lu_time_zone_list);
} else {
console.log('No time zone list');
let lu_time_zone_li_get_promise = api.get_ae_obj_li_for_obj_id_crud({
api_cfg: $ae_app.ae_api,
obj_type: 'lu', // "lu" = a lookup table
for_obj_type: 'time_zone',
enabled: null,
hidden: null,
// order_by_li: {'name': 'ASC'},
log_lvl: 1
})
.then(function (lu_time_zone_li_get_result) {
if (lu_time_zone_li_get_result) {
$ae_app.lu_time_zone_list = lu_time_zone_li_get_result;
console.log(`Time zone list:`, $ae_app.lu_time_zone_list);
console.log($ae_app.lu_time_zone_list[0]);
console.log($ae_app.lu_time_zone_list[10]);
} else {
console.log(`No time zones returned!`);
$ae_app.lu_time_zone_list = [];
}
})
.catch(function (error) {
console.log('No results returned or failed.', error);
});
}
onMount(() => {
console.log('** Component Mounted: ** Edit - Event Obj');
tinymce_remove(); // This seems to fix rendering issues
tinymce_init();
});
onDestroy(() => {
console.log('** Component Destroyed: ** Edit - Event Obj');
tinymce_remove(); // This seems like the right thing to do
});
// let ae_iframe_height = window.outerHeight;
let ae_iframe_height = window.innerHeight;
console.log(`ae_iframe_height: ${ae_iframe_height}`);
$: if (ae_iframe_height) {
console.log('ae_iframe_height changed:', ae_iframe_height);
let iframe_height = ae_iframe_height; // TESTING!!!
// window.parent.postMessage({'iframe_height': `${iframe_height}px`}, "*");
window.parent.postMessage({'iframe_height': iframe_height}, "*");
}
$: if ($slct.archive_obj) {
console.log('Selected archive object changed?');
console.log($slct.archive_obj);
if ($slct.archive_obj == null) {
$slct.archive_obj = {title: null, content: null, name: null, description: null, notes: null, created_on: null, updated_on: null};
} else {
disable_submit_btn = false;
}
// ae.input_template['event']['timezone'] = 'EDT';
}
async function handle_submit_form(event) {
console.log('*** handle_submit_form() ***');
disable_submit_btn = true;
let form_data = new FormData(event.target);
console.log(form_data);
let form_archive_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_data);
let archive_data: key_val = {};
if (!$slct.archive_id) {
archive_data['account_id_random'] = $ae_app.account_id;
archive_data['enable'] = true;
}
archive_data['name'] = form_archive_data.name;
if (tinyMCE.get('description')) {
archive_data['description'] = tinyMCE.get('description').getContent();
} else {
archive_data['description'] = form_archive_data.description;
}
if (tinyMCE.get('content_html')) {
archive_data['content_html'] = tinyMCE.get('content_html').getContent();
} else {
archive_data['content_html'] = form_archive_data.content_html;
}
let date_time_str = null;
let date_part = form_archive_data.original_datetime_date.trim();
let time_part = form_archive_data.original_datetime_time.trim();
if (date_part && time_part) {
date_time_str = `${date_part} ${time_part}`;
} else if (date_part) {
date_time_str = `${date_part}T00:00:00`;
} else if (time_part) {
// date_time_str = `${time_part}`;
date_time_str = false;
}
archive_data['original_datetime'] = date_time_str;
archive_data['original_timezone'] = form_archive_data.original_timezone;
archive_data['original_location'] = form_archive_data.original_location;
archive_data['original_url'] = form_archive_data.original_url;
archive_data['original_url_text'] = form_archive_data.original_url_text;
archive_data['hide'] = !!form_archive_data.hide;
archive_data['priority'] = !!form_archive_data.priority;
if (form_archive_data.sort) {
archive_data['sort'] = Number(form_archive_data.sort);
} else {
archive_data['sort'] = null;
}
if (form_archive_data.group) {
archive_data['group'] = form_archive_data.group;
} else {
archive_data['group'] = null;
}
if (form_archive_data.enable) {
archive_data['enable'] = !!form_archive_data.enable;
}
if (tinyMCE.get('notes')) {
archive_data['notes'] = tinyMCE.get('notes').getContent();
} else {
archive_data['notes'] = form_archive_data.notes;
}
console.log(archive_data);
if (!$slct.archive_id) {
create_archive_obj_promise = api.create_ae_obj_crud({
api_cfg: $ae_app.ae_api,
obj_type: 'archive',
fields: archive_data,
key: $ae_app.ae_api.api_crud_super_key,
log_lvl: 1
})
.then(function (archive_obj_create_result) {
if (!archive_obj_create_result) {
console.log('The result was null or false.');
return false;
}
$slct.archive_id = archive_obj_create_result.obj_id_random;
dispatch(
'created__archive_obj',
{
archive_id: $slct.archive_id,
}
);
return archive_obj_create_result;
})
.catch(function (error) {
console.log('Something went wrong.');
console.log(error);
return false;
});
return create_archive_obj_promise;
} else {
update_archive_obj_promise = api.update_ae_obj_id_crud({
api_cfg: $ae_app.ae_api,
obj_type: 'archive',
obj_id: $slct.archive_id,
fields: archive_data,
key: $ae_app.ae_api.api_crud_super_key,
log_lvl: 1
})
.then(function (archive_obj_update_result) {
if (!archive_obj_update_result) {
console.log('The result was null or false.');
return false;
}
dispatch(
'updated__archive_obj',
{
archive_id: $slct.archive_id,
}
);
return archive_obj_update_result;
})
.catch(function (error) {
console.log('Something went wrong.');
console.log(error);
return false;
});
return update_archive_obj_promise;
}
}
async function handle_delete_archive_obj({archive_id, method='delete'}) {
console.log('*** handle_delete_archive_obj() ***');
delete_archive_obj_promise = api.delete_ae_obj_id_crud({
api_cfg: $ae_app.ae_api,
obj_type: 'archive',
obj_id: archive_id,
method: method,
// params: params,
key: $ae_app.ae_api.api_crud_super_key,
log_lvl: 0
})
.then(function (archive_obj_delete_result) {
if (archive_obj_delete_result) {
// console.log(`Result:`, archive_obj_delete_result);
dispatch(
'deleted__archive_obj',
{
archive_id: archive_id,
}
);
}
})
.catch(function (error) {
console.log('The result was null or false when trying to delete.', error);
});
return delete_archive_obj_promise;
}
function tinymce_init() {
// REFERENCE: https://www.tiny.cloud/docs/tinymce/6/basic-setup/
// plugins: [
// 'advlist', 'autolink', 'link', 'image', 'lists', 'charmap', 'preview', 'anchor', 'pagebreak',
// 'searchreplace', 'wordcount', 'visualblocks', 'visualchars', 'code', 'fullscreen', 'insertdatetime',
// 'media', 'table', 'emoticons', 'template', 'help'
// ],
// 'undo redo | styles | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent'
// NOTE: Regular version of the TinyMCE editor
tinymce.init({
selector: '.tinymce_editor.editor_regular',
// width: 600,
height: 400,
plugins: [ 'advlist', 'autolink', 'link', 'lists', 'anchor', 'code', 'help' ],
menubar: false,
toolbar: 'undo redo | styles | bold italic | alignleft aligncenter alignright | bullist numlist outdent indent | link | code | help',
});
// NOTE: Basic version of the TinyMCE editor
tinymce.init({
selector: '.tinymce_editor.editor_basic',
// width: 600,
height: 400,
plugins: [ 'lists', 'code', 'help' ],
menubar: false,
toolbar: 'undo redo | styles | bold italic | alignleft aligncenter | bullist numlist outdent indent | code | help',
});
// NOTE: Minimal version of the TinyMCE editor
tinymce.init({
selector: '.tinymce_editor.editor_basic_200',
// width: 600,
height: 200,
plugins: [ 'lists', 'code', 'help' ],
menubar: false,
toolbar: 'undo redo | styles | bold italic | alignleft aligncenter | bullist numlist outdent indent | code | help',
});
// NOTE: Less is more version of the TinyMCE editor
tinymce.init({
selector: '.tinymce_editor.editor_less_100',
// width: 600,
height: 100,
// plugins: [ 'lists', 'code', 'help' ],
menubar: false,
toolbar: false,
statusbar: false,
});
}
function tinymce_remove() {
tinymce.remove('.tinymce_editor.editor_regular');
tinymce.remove('.tinymce_editor.editor_basic');
tinymce.remove('.tinymce_editor.editor_basic_200');
tinymce.remove('.tinymce_editor.editor_less_100');
}
</script>
<section
class="svelte_component ae_edit archive_obj"
class:ae_create={!$slct.archive_id}
bind:clientHeight={$ae_app.iframe_height_modal_body}
>
<form on:submit|preventDefault={handle_submit_form} class="">
{#await update_archive_obj_promise}
<div class="awaiting alert_msg_pulse" out:fade={{ duration: 2000 }}>Saving...</div>
{:then}
{#if update_archive_obj_promise}
<div class="awaiting" out:fade={{ duration: 2000 }}>Finished saving</div>
{:else}
<!-- <div class="awaiting" out:fade={{ duration: 2000 }}>Nothing here yet</div> -->
{/if}
{/await}
<h3>Archive</h3>
<label for="name">Name of Archive
<input type="text" id="name" name="name" required max="20" value={$slct.archive_obj.name ? $slct.archive_obj.name : 'Testing!' } placeholder="Name of Archive">
</label>
<label for="description">Description
<textarea id="description" name="description" rows="6" cols="80" value={$slct.archive_obj.description ? $slct.archive_obj.description : ''} class="ae_value archive__description tinymce_editor editor_basic_200"></textarea>
</label>
<label for="content_html">Content (HTML)
<textarea id="content_html" name="content_html" rows="6" cols="80" value={$slct.archive_obj.content_html ? $slct.archive_obj.content_html : ''} class="ae_value archive__content_html tinymce_editor editor_regular"></textarea>
</label>
<h3>Original</h3>
<label for="original_datetime">Original Date/Time
<input type="date" id="original_datetime_date" name="original_datetime_date" value={($slct.archive_obj.original_datetime ? ae.util.iso_datetime_formatter($slct.archive_obj.original_datetime,'date_iso') : '')} placeholder="YYYY-MM-DD">
<input type="time" id="original_datetime_time" name="original_datetime_time" value={($slct.archive_obj.original_datetime ? ae.util.iso_datetime_formatter($slct.archive_obj.original_datetime,'time_iso') : '')} placeholder="HH:MM AM/PM">
</label>
<fieldset class="flex_row flex_gap_md flex_justify_around">
<label for="original_timezone">Original Timezone
{#if $ae_app.lu_time_zone_list}
<select name="original_timezone" id="original_timezone" required>
{#each $ae_app.lu_time_zone_list as lu_timezone}
<option value="{lu_timezone.name}" selected={((($slct.archive_obj.original_timezone && lu_timezone.name == $slct.archive_obj.original_timezone) || lu_timezone.name == $ae_app.current_timezone) ? 'selected' : '')}>{lu_timezone.name}</option>
{/each}
</select>
{:else}
<input type="text" name="timezone" value={($slct.archive_obj.original_timezone ? $slct.archive_obj.original_timezone : $ae_app.current_timezone)} />
{/if}
</label>
</fieldset>
<!-- <label for="original_timezone">Original Timezone
<input type="text" id="original_timezone" name="original_timezone" value={($slct.archive_obj.original_timezone ? $slct.archive_obj.original_timezone : $ae_app.current_timezone)} placeholder="Timezone" list="timezones">
<datalist id="timezones">
<option value="UTC">UTC</option>
<option value="America/New_York">America/New York</option>
<option value="America/Chicago">America/Chicago</option>
<option value="America/Denver">America/Denver</option>
<option value="America/Phoenix">America/Phoenix</option>
<option value="America/Los_Angeles">America/Los Angeles</option>
<option value="America/Anchorage">America/Anchorage</option>
<option value="America/Adak">America/Adak</option>
<option value="Pacific/Honolulu">Pacific/Honolulu</option>
<option value="Pacific/Midway">Pacific/Midway</option>
<option value="US/Eastern">US/Eastern</option>
<option value="US/Central">US/Central</option>
<option value="US/Mountain">US/Mountain</option>
<option value="US/Pacific">US/Pacific</option>
<option value="US/Alaska">US/Alaska</option>
<option value="US/Hawaii">US/Hawaii</option>
<option value="US/Samoa">US/Samoa</option>
<option value="US/Aleutian">US/Aleutian</option>
<option value="US/Arizona">US/Arizona</option>
<option value="US/Michigan">US/Michigan</option>
</datalist>
</label> -->
<label for="original_location">Original Location
<input type="text" id="original_location" name="original_location" value={($slct.archive_obj.original_location ? $slct.archive_obj.original_location : '')} placeholder="Location">
</label>
<label for="original_url">Original URL
<input type="text" id="original_url" name="original_url" max="255" value={$slct.archive_obj.original_url ? $slct.archive_obj.original_url : '' } placeholder="URL">
</label>
<label for="original_url_text">Original URL Text/Title
<input type="text" id="original_url_text" name="original_url_text" max="255" value={$slct.archive_obj.original_url_text ? $slct.archive_obj.original_url_text : '' } placeholder="URL text or title">
</label>
<!-- <label for="topic_id">BB post topic
<select id="topic_id" name="topic_id">
<option value="">-- None --</option>
<option value="16">Licensing/ monitoring/ credentialing issues</option>
<option value="17">Return to practice</option>
<option value="18">Contacts/ sponsorship in my area</option>
<option value="19">Professional positions</option>
<option value="21">Announcement</option>
</select>
</label> -->
<!-- <h3>Archiveer's Information</h3>
<fieldset class="">
<legend class="">Archive as Anonymous</legend>
<div class="">
<input type="radio" class="" id="anonymous_no" name="anonymous" value="0" checked={(!$slct.archive_obj.anonymous)} required>
<label for="anonymous_no" class="">No, include my name and email address</label>
</div>
<div class="">
<input type="radio" class="" id="anonymous_yes" name="anonymous" value="1" checked={($slct.archive_obj.anonymous)} required >
<label for="anonymous_yes" class="">Yes, the post will be listed as Anonymous</label>
</div>
</fieldset> -->
<!-- <label for="external_person_id">Your ID
<input type="text" id="external_person_id" name="external_person_id" value={$slct.archive_obj.external_person_id} readonly>
</label>
<label for="full_name">Your name
<input type="text" id="full_name" name="full_name" value={$slct.archive_obj.full_name}>
</label>
<label for="email">Your email
<input type="text" name="email" value={$slct.archive_obj.email} readonly>
</label> -->
<!-- <h3>Archiveer's Options</h3> -->
<!-- <fieldset class="">
<legend class="">Official or Member Archive</legend>
<div class="">
<input type="radio" class="" id="group_official" name="group" value="official">
<label for="group_official" class="">Archive as Official/Leadership</label>
</div>
<div class="">
<input type="radio" class="" id="group_member" name="group" value="member" checked="">
<label for="group_member" class="">Archive as Member</label>
</div>
</fieldset> -->
<!-- <fieldset class="">
<legend class="">Enable Comments</legend>
<div class="">
<input type="radio" class="" id="enable_comments_no" name="enable_comments" value="0">
<label for="enable_comments_no" class="">No, do not allow comments</label>
</div>
<div class="">
<input type="radio" class="" id="enable_comments_yes" name="enable_comments" value="1" checked>
<label for="enable_comments_yes" class="">Yes, allow comments</label>
</div>
</fieldset> -->
{#if $ae_loc.trusted_access}
<section class="ae_section archive__admin_options"> <!-- BEGIN: section archive__admin_options -->
<h3>
Admin Options
<button type="button" class="ae_btn ae_d_none_toggle ae_float_right ae_smallest btn btn-xs btn-info" on:click={() => {document.querySelector('.ae_d_none_content').classList.toggle('ae_fade_out'); document.querySelector('.ae_d_none_content').classList.toggle('ae_fade_in');}}><span class="fas fa-eye"></span> Show/Hide Admin</button>
</h3>
<span class="ae_d_none_content ae_fade_out">
<label>Hide
<input
type="checkbox"
name="hide"
id="hide"
bind:checked={$slct.archive_obj.hide}
>
<!-- <input type="checkbox" name="hide" value={$slct.archive_obj.hide} /> -->
</label>
<label>Priority
<input
type="checkbox"
name="priority"
id="priority"
bind:checked={$slct.archive_obj.priority}
>
<!-- <input type="checkbox" name="priority" value={$slct.archive_obj.priority} /> -->
</label>
<label>Sort <input type="number" name="sort" value={$slct.archive_obj.sort} /></label>
<label>Group <input type="text" name="group" value={$slct.archive_obj.group} max="100" /></label>
{#if $ae_loc.administrator_access}
<label>Enable
<input
type="checkbox"
name="enable"
id="enable"
bind:checked={$slct.archive_obj.enable}
>
<!-- <input type="checkbox" name="enable" value={$slct.archive_obj.enable} checked={$slct.archive_obj.enable} /> -->
</label>
{/if}
<label>Internal Staff Notes
<textarea id="notes" name="notes" class="ae_value archive__notes tinymce_editor editor_basic_200" rows="2" cols="70" value={$slct.archive_obj.notes}></textarea>
</label>
</span> <!-- END: span ae_show_hide_content -->
</section> <!-- END: section archive__admin_options -->
{/if}
<section class="ae_section ae_options ae_row">
<button type="submit" class="ae_btn btn btn-primary"><span class="fas fa-check"></span> Save Archive</button>
{#if $slct.archive_id}
<button
on:click={() => {
if (!confirm('Are you sure you want to delete this archive?')) {return false;}
handle_delete_archive_obj({archive_id: $slct.archive_id});
$slct.archive_id = null;
$slct.archive_obj = {};
}}
class="ae_btn ae_smallest btn btn-danger" type="button">
<span class="fas fa-minus"></span> Delete
</button>
{/if}
</section>
</form>
</section>
<style>
</style>

View File

@@ -1,489 +0,0 @@
<script lang="ts">
// *** Import Svelte core
import { onMount } from 'svelte';
import { fade } from 'svelte/transition';
// *** Import Aether core variables and functions
import { ae, api, Element_modal_v3 } from 'aether_npm_lib';
import { slct, ae_app, slct_trigger } from './stores';
import Edit_archive_content_obj from './del 10_edit__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>;
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';
let media_play_extension_li = ['m4a', 'mp4', 'mp3'];
onMount(() => {
console.log('** Component Mounted: ** List - Archive Content Obj Li');
});
$: if ($slct_trigger == 'load__archive_content_obj_li' && $slct.archive_id) {
$slct_trigger = null;
handle_load_archive_content_obj_li({archive_id: $slct.archive_id, try_cache: false});
}
async function handle_load_archive_content_obj_li({archive_id, try_cache=false}) {
console.log('*** handle_load_archive_content_obj_li() ***');
let enabled = $idaa_loc.archives.enabled;
let hidden = $idaa_loc.archives.hidden;
let limit = $idaa_loc.archives.limit;
let offset = $idaa_loc.archives.offset;
// $idaa_loc.archives.content_group_sort = 'DESC'; // 'ASC' or 'DESC'
let group_sort = $idaa_loc.archives.content_group_sort; // 'ASC' or 'DESC'
let params = {};
idaa_archive_content_obj_li_get_promise = api.get_ae_obj_li_for_obj_id_crud({
api_cfg: $ae_app.ae_api,
obj_type: 'archive_content',
for_obj_type: 'archive',
for_obj_id: archive_id,
enabled: enabled,
hidden: hidden,
order_by_li: {'group': group_sort, 'priority': 'DESC', 'sort': 'DESC', 'name': 'ASC', 'created_on': 'DESC', 'updated_on': 'DESC'},
limit: limit,
offset: offset,
params_json: null,
params: params,
log_lvl: 0
})
.then(function (archive_content_obj_li_get_result) {
if (archive_content_obj_li_get_result) {
$slct.archive_content_obj_li = archive_content_obj_li_get_result;
console.log(`Archive Content list:`, $slct.archive_content_obj_li);
// console.log(ae.dynamic_sort());
// $slct.archive_content_obj_li.sort(ae.util.dynamic_sort_multiple('group ASC', 'created_on DESC', 'updated_on DESC'));
} else {
$slct.archive_content_obj_li = [];
}
})
.catch(function (error) {
console.log('No results returned or failed.', error);
});
return idaa_archive_content_obj_li_get_promise;
}
$: if ($slct_trigger == 'load__archive_content_obj' && $slct.archive_content_id) {
$slct_trigger = null;
handle_load_archive_content_obj({archive_content_id: $slct.archive_content_id, try_cache: false});
}
async function handle_load_archive_content_obj({archive_content_id, try_cache=false}) {
console.log('*** handle_load_archive_content_obj() ***');
let params = {};
idaa_archive_content_obj_get_promise = api.get_ae_obj_id_crud({
api_cfg: $ae_app.ae_api,
obj_type: 'archive_content',
obj_id: archive_content_id,
use_alt_table: false, // NOTE: This will use the table_name_alt value instead of the table_name value in the API config.
use_alt_base: false, // NOTE: This will use the base_name_alt value instead of the base_name value in the API config.
params: params,
log_lvl: 0
})
.then(function (archive_content_obj_get_result) {
if (archive_content_obj_get_result) {
$slct.archive_content_obj = archive_content_obj_get_result;
console.log(`Archive object:`, $slct.archive_content_obj);
}
// handle_resize_document();
})
.catch(function (error) {
console.log('No results returned or failed.', error);
});
return idaa_archive_content_obj_get_promise;
}
function handle_created_archive_content_obj(event) {
console.log('*** handle_created_archive_content_obj() ***');
console.log(event.detail);
$slct_trigger = 'load__archive_content_obj_li';
$idaa_loc.archives.show_list__event_obj_li = true;
$idaa_loc.archives.show_edit__archive_content_id = false;
$idaa_loc.archives.show_view__archive_content_id = false;
}
function handle_updated_archive_content_obj(event) {
console.log('*** handle_updated_archive_content_obj() ***');
console.log(event.detail);
$slct_trigger = 'load__archive_content_obj_li';
$idaa_loc.archives.show_list__event_obj_li = true;
$idaa_loc.archives.show_edit__archive_content_id = false;
$idaa_loc.archives.show_view__archive_content_id = false;
}
function handle_deleted_archive_content_obj(event) {
console.log('*** handle_deleted_archive_content_obj() ***');
console.log(event.detail);
$slct_trigger = 'load__archive_content_obj_li';
$idaa_loc.archives.show_list__event_obj_li = true;
$idaa_loc.archives.show_edit__archive_content_id = false;
$idaa_loc.archives.show_view__archive_content_id = false;
}
</script>
<section class="svelte_component ae_section ae_list archive_content_obj_li list__archive_content_obj">
{#if $slct.archive_content_obj_li}
{#each $slct.archive_content_obj_li as idaa_archive_content_obj, index}
<!-- {#each $slct.archive_content_obj_li.sort(ae.util.dynamic_sort_multiple('group ASC', 'priority DESC')) as idaa_archive_content_obj, index} -->
{#if idaa_archive_content_obj.group && idaa_archive_content_obj.group != $slct.archive_content_obj_li[index - 1]?.group}
<div class="ae_row archive_content__group">
<button
class="ae_btn btn btn-info ae_margin_sm"
on:click={() => {
if ($idaa_loc.archives.show_list__archive_content_li_group == idaa_archive_content_obj.group) {
$idaa_loc.archives.show_list__archive_content_li_group = null;
} else {
$idaa_loc.archives.show_list__archive_content_li_group = idaa_archive_content_obj.group;
}
}}
>
{#if $idaa_loc.archives.show_list__archive_content_li_group == idaa_archive_content_obj.group}
<span class="fas fa-caret-down" in:fade={{ duration: 250 }}
out:fade={{ duration: 0 }}></span>
<!-- <span class="fas fa-minus"></span> -->
<span class="ae_label">Hide:</span>
{:else}
<span class="fas fa-caret-right" in:fade={{ duration: 250 }}
out:fade={{ duration: 0 }}></span>
<!-- <span class="fas fa-plus"></span> -->
<span class="ae_label">Show:</span>
{/if}
<!-- <span class="fas fa-caret-down"></span> -->
<!-- <span class="ae_label">Show:</span> -->
<span class="ae_value">{idaa_archive_content_obj.group}</span>
</button>
</div>
{/if}
{#if $idaa_loc.archives.show_list__archive_content_li_group == idaa_archive_content_obj.group}
<!-- class:ae_d_none={$idaa_loc.archives.show_list__archive_content_li_group != idaa_archive_content_obj.group} -->
<div
id={`idaa_archive_content_id__${idaa_archive_content_obj.archive_content_id_random}`}
class="container archive_content ae_object archive_content_obj"
class:archive__content_type={idaa_archive_content_obj.type}
in:fade={{ duration: 125 }}
out:fade={{ duration: 250 }}
>
<header class="ae_header archive_content__header">
<h3>
<span class="archive_content__name">{idaa_archive_content_obj.name}</span>
{#if idaa_archive_content_obj.type}<span class="badge badge-info bg-info"><span class="fas fa-user-md"></span> {idaa_archive_content_obj.type}</span>{/if}
{#if $ae_loc.trusted_access && idaa_archive_content_obj.hide}<span class="badge badge-warning"><span class="fas fa-exclamation-triangle"></span> Hidden</span>{/if}
{#if $ae_loc.administrator_access && !idaa_archive_content_obj.enable}<span class="badge badge-warning"><span class="fas fa-exclamation-triangle"></span> Not enabled</span>{/if}
</h3>
</header>
<section class="ae_options archive_content_obj__options">
{#if idaa_archive_content_obj.archive_content_id_random != $idaa_loc.archives.show_view__archive_content_media}
<button
on:click={ () => {
$slct.archive_content_id = idaa_archive_content_obj.archive_content_id_random;
$slct.archive_content_obj = idaa_archive_content_obj;
$idaa_loc.archives.show_view__archive_content_media = $slct.archive_content_id;
// idaa_archive_content_obj.show_view__archive_content_media = true;
}}
class="ae_btn btn_md btn btn-md btn-primary"
title="Open this file">
{#if media_play_extension_li.includes( idaa_archive_content_obj.file_extension)}
<span class="fas fa-play"></span>
Play <!-- This really should check the file type: view, show, play, listen, watch -->
{:else}
<span class="fas fa-eye"></span>
View
{/if}
<span class="badge">
{#if file_icons[idaa_archive_content_obj.file_extension]}
<span class="fas fa-{file_icons[idaa_archive_content_obj.file_extension]}"></span>
{:else}
<span class="fas fa-file"></span>
{/if}
.{idaa_archive_content_obj.file_extension}</span>
</button>
{:else}
<button
on:click={ () => {
$slct.archive_content_id = idaa_archive_content_obj.archive_content_id_random;
$slct.archive_content_obj = idaa_archive_content_obj;
$idaa_loc.archives.show_view__archive_content_media = false;
// idaa_archive_content_obj.show_view__archive_content_media = false;
}}
class="ae_btn btn_md btn btn-md btn-secondary"
title="Hide this file">
<span class="fas fa-play"></span>
Hide <!-- This really should check the file type: view, show, play, listen, watch -->
<span class="badge">
{#if file_icons[idaa_archive_content_obj.file_extension]}
<span class="fas fa-{file_icons[idaa_archive_content_obj.file_extension]}"></span>
{:else}
<span class="fas fa-file"></span>
{/if}
.{idaa_archive_content_obj.file_extension}</span>
</button>
{/if}
{#if $ae_loc.trusted_access}
<a href="{$ae_app.app.base_url}{idaa_archive_content_obj.hosted_file_path}" class="ae_btn btn_md btn btn-md btn-secondary" title="Download this file">
<span class="fas fa-download"></span>
Download <!-- This really should check the file type: view, show, play, listen, watch -->
<span class="badge">
{#if file_icons[idaa_archive_content_obj.file_extension]}
<span class="fas fa-{file_icons[idaa_archive_content_obj.file_extension]}"></span>
{:else}
<span class="fas fa-file"></span>
{/if}
.{idaa_archive_content_obj.file_extension}</span>
</a>
{/if}
{#if $ae_loc.trusted_access}
<button
on:click={() => {
$slct.archive_content_id = idaa_archive_content_obj.archive_content_id_random;
$slct.archive_content_obj = idaa_archive_content_obj;
$slct_trigger = 'load__archive_content_obj';
// const url = new URL(location);
// url.searchParams.set('archive_content_id', idaa_archive_content_obj.archive_content_id_random);
// history.pushState({}, '', url);
// $idaa_loc.archives.show_main__options = true;
// $idaa_loc.archives.show_list__archive_content_li = true;
// $idaa_loc.archives.show_view__archive_content_id = false;
$idaa_loc.archives.show_view__archive_content_media = false;
$idaa_loc.archives.show_edit__archive_content_id = true;
}}
class="ae_btn ae_smallest btn btn-warning"
title={`Edit content: ${idaa_archive_content_obj.name}`}
>
<span class="fas fa-edit"></span> Edit Content
</button>
<!-- <button
on:click={() => {
// Copy URL to clipboard
// Is there a URL anymore?
// const copy_text = document.getElementById(`archive_edit_url_${idaa_archive_content_obj.archive_content_id_random}`);
}}
class="ae_btn btn_sm btn_outline_info archive_edit_help"
>
<span class="fas fa-link"></span> URL
</button> -->
{/if}
</section>
<!-- 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_random == $idaa_loc.archives.show_view__archive_content_media}
<Player_archive_content_obj archive_content_id={idaa_archive_content_obj.archive_content_id_random} />
{/if}
<section class="ae_section archive_content__content">
{#if idaa_archive_content_obj.description}
<div
class="archive_content__description ae_description"
>
<div class="ae_label archive_content__description">Description:</div>
<div class="ae_value archive_content__description">
{idaa_archive_content_obj.description}
</div>
</div>
{/if}
{#if idaa_archive_content_obj.content_html}
<div
class="archive_content__content_html ae_content_html"
>
<div class="ae_label archive_content__content_html">Content:</div>
<div class="ae_value archive_content__content_html">
{@html idaa_archive_content_obj.content_html}
</div>
</div>
{/if}
<div
class="ae_group"
class:ae_d_none={!idaa_archive_content_obj.original_datetime && !idaa_archive_content_obj.original_timezone}
>
<span class="ae_label">Original date/time:</span>
{#if idaa_archive_content_obj.original_datetime}
<span class="ae_value ae_prop prop_original_datetime fs_smaller">{ae.util.iso_datetime_formatter(idaa_archive_content_obj.original_datetime, 'datetime_long')}</span>
{/if}
{#if idaa_archive_content_obj.original_timezone}
<span class="ae_label">Timezone:</span>
<span class="ae_value">{idaa_archive_content_obj.original_timezone}</span>
{/if}
</div>
</section>
<section
class="ae_section ae_footer ae_meta archive_content__meta"
class:ae_d_none={!$ae_loc.administrator_access}
>
<span
class="archive_content__archive_content_type"
class:ae_d_none={!idaa_archive_content_obj.archive_content_type}
>
Type: {idaa_archive_content_obj.archive_content_type}
</span>
<span class="ae_group">
<span
class="archive_content__created_on"
>
Created on: {ae.util.iso_datetime_formatter(idaa_archive_content_obj.created_on, 'datetime_short')}
</span>
<span
class="archive_content__updated_on"
class:ae_d_none={!idaa_archive_content_obj.updated_on}
>
Updated on: {ae.util.iso_datetime_formatter(idaa_archive_content_obj.updated_on, 'datetime_short')}
</span>
</span>
</section>
</div>
{/if}
{/each}
{:else}
<div>No archives avalible to show at this time</div>
{/if}
</section>
{#if $idaa_loc.archives.show_edit__archive_content_id}
<!-- <section class="ae_edit archive_content_obj archive_content_id idaa_archive_content_id_edit"> -->
<Element_modal_v3
show = { true }
modal_cover_body = { false }
on:close={ () => {
$slct.archive_content_id = null;
$slct.archive_content_obj = {};
// $idaa_loc.archives.show_main__options = true;
// $idaa_loc.archives.show_list__archive_content_li = true;
$idaa_loc.archives.show_view__archive_content_media = false;
$idaa_loc.archives.show_edit__archive_content_id = false;
// $idaa_loc.archives.show_view__archive_content_id = false;
const url = new URL(location);
url.searchParams.delete('archive_content_id');
history.pushState({}, '', url);
let message = {'archive_content_id': null};
window.parent.postMessage(message, "*");
}}
>
<span slot="header_title">{@html ($slct.archive_content_obj.name ? $slct.archive_content_obj.name : 'New Archive Content')}</span>
<span slot="body">
<Edit_archive_content_obj
on:created__archive_content_obj={handle_created_archive_content_obj}
on:updated__archive_content_obj={handle_updated_archive_content_obj}
on:deleted__archive_content_obj={handle_deleted_archive_content_obj}
/>
</span>
</Element_modal_v3>
<!-- </section> -->
{/if}
<style>
.ae_label {
font-size: smaller;
}
.ae_value {
font-weight: bold;
}
.ae_header h3 {
font-size: 1.2em;
margin: 0;
/* padding: 0; */
}
.ae_row.archive_content__group {
width: 100%;
}
.ae_row.archive_content__group button {
width: 100%;
}
.ae_value.archive_content__group {
font-size: 1.4em;
font-weight: bold;
margin: 0;
padding: 0;
text-align: center;
border-bottom: solid thin black;
}
.archive_content_obj .ae_meta {
flex-direction: column;
/* justify-content: space-between; */
}
.archive_content_obj .ae_meta .ae_group {
flex-direction: row;
}
.archive_content_obj .ae_meta .ae_options {
flex-direction: row;
justify-content: space-between;
}
</style>

View File

@@ -1,151 +0,0 @@
<script lang="ts">
// *** Import Svelte core
import { onMount } from 'svelte';
// *** Import Aether core variables and functions
import { ae } from 'aether_npm_lib';
import { slct, ae_app, slct_trigger } from './stores';
onMount(() => {
console.log('** Component Mounted: ** List - Archive Obj Li');
});
</script>
<section class="svelte_component ae_section ae_list archive_obj_li list__archive_obj archive_list">
{#if $slct.archive_obj_li}
{#each $slct.archive_obj_li as idaa_archive_obj, index}
<div
id={`idaa_archive_id__${idaa_archive_obj.archive_id_random}`}
class="archive ae_object archive_obj"
>
<div class="ae_header archive__header">
<span class="archive__name">{idaa_archive_obj.name}</span>
{#if idaa_archive_obj.original_location}
<span>(
<!-- <span class="ae_label">Location:</span> -->
<span class="ae_value">{idaa_archive_obj.original_location}</span>
)
</span>
{/if}
{#if $ae_loc.trusted_access && idaa_archive_obj.hide}<span class="badge badge-warning"><span class="fas fa-exclamation-triangle"></span> Hidden</span>{/if}
{#if $ae_loc.administrator_access && !idaa_archive_obj.enable}<span class="badge badge-warning"><span class="fas fa-exclamation-triangle"></span> Not enabled</span>{/if}
</div>
<div class="ae_options archive_obj__options">
<button
on:click={() => {
$slct.archive_id = idaa_archive_obj.archive_id_random;
$slct.archive_obj = idaa_archive_obj;
$idaa_loc.archives.content_group_sort = $slct.archive_obj.cfg_json.content_group_sort;
$slct_trigger = 'load__archive_obj';
$idaa_loc.archives.show_main__options = true;
$idaa_loc.archives.show_list__archive_obj_li = false;
$idaa_loc.archives.show_view__archive_obj = true;
$idaa_loc.archives.show_edit__archive_obj = false;
}}
class="btn btn-secondary"
title={`View: ${idaa_archive_obj.name}`}
>
<span class="fas fa-envelope-open"></span> Open
</button>
{#if $ae_loc.trusted_access}
<button
on:click={() => {
$slct.archive_id = idaa_archive_obj.archive_id_random;
$slct.archive_obj = idaa_archive_obj;
$slct_trigger = 'load__archive_obj';
// $idaa_loc.archives.show_main__options = true;
// $idaa_loc.archives.show_list__archive_obj_li = true;
$idaa_loc.archives.show_view__archive_obj = false;
$idaa_loc.archives.show_edit__archive_obj = true;
}}
class="ae_btn ae_smallest btn btn-warning"
title={`Edit archive: ${idaa_archive_obj.name}`}
>
<span class="fas fa-edit"></span> Edit Archive
</button>
{/if}
</div>
<section class="ae_section archive__content">
<div
class="archive_description description"
>
<!-- <div class="ae_label archive__description">Description:</div> -->
<div class="ae_value archive__description">
{@html idaa_archive_obj.description}
</div>
</div>
</section>
<section class="ae_section ae_footer ae_meta archive__meta">
<div class="ae_group">
{#if !idaa_archive_obj.updated_on}
<span
class="archive__created_on"
>
<span class="ae_label">Created on:</span>
<span class="ae_value">{ae.util.iso_datetime_formatter(idaa_archive_obj.created_on, 'datetime_short')}</span>
</span>
{:else}
<span
class="archive__updated_on"
>
<span class="ae_label">Updated on:</span>
<span class="ae_value">{ae.util.iso_datetime_formatter(idaa_archive_obj.updated_on, 'datetime_short')}</span>
</span>
{/if}
</div>
</section>
</div>
{/each}
{:else}
<div>No archives avalible to show at this time</div>
{/if}
</section>
<style>
.archive_obj {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 1em;
}
.archive__name {
font-size: 1.5em;
font-weight: bold;
}
.archive__content {
display: none;
}
.archive__meta {
display: none;
}
.archive_obj .ae_meta {
flex-direction: column;
/* justify-content: space-between; */
}
.archive_obj .ae_meta .ae_group {
flex-direction: row;
}
.archive_obj .ae_meta .ae_options {
flex-direction: row;
justify-content: space-between;
}
</style>

View File

@@ -1,244 +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';
// import Edit_archive_content_obj from './10_edit__archive_content_obj.svelte';
import List_archive_content_obj from './del 10_list__archive_content_obj.svelte';
const dispatch = createEventDispatcher();
if ($slct.archive_id) {
console.log(`Archive ID selected: ${$slct.archive_id}`);
console.log(`Archive Object selected: ${$slct.archive_obj}`)
$slct_trigger = 'load__archive_obj';
$slct_trigger = 'load__archive_content_obj_li';
// Auto show the selected Archive ID
// Set the URL param "archive_id" to the current Archive ID. This is a just in case.
const url = new URL(location);
url.searchParams.set('archive_id', $slct.archive_id);
history.pushState({}, '', url);
// $idaa_loc.archives.show_main__options = true;
$idaa_loc.archives.show_list__archive_obj_li = false;
$idaa_loc.archives.show_edit__archive_obj = false;
$idaa_loc.archives.show_view__archive_obj = true;
}
onMount(() => {
console.log('** Component Mounted: ** View - Archive Obj');
});
function handle_archive_content_obj_created(event) {
console.log('*** handle_archive_content_obj_created() ***');
console.log(event.detail);
$slct.archive_content_id = null;
$slct.archive_content_obj = {};
$slct_trigger = 'load__archive_obj_li';
$slct_trigger = 'load__archive_obj';
$slct_trigger = 'load__archive_content_obj_li';
// $idaa_loc.archives.show_list__archive_obj_li = false;
// $idaa_loc.archives.show_edit__archive_obj = false;
// $idaa_loc.archives.show_view__archive_obj = true;
$idaa_loc.archives.show_edit__archive_content_id = false;
}
function handle_archive_content_obj_updated(event) {
console.log('*** handle_archive_content_obj_updated() ***');
console.log(event.detail);
$slct_trigger = 'load__archive_obj';
$slct_trigger = 'load__archive_content_obj_li';
// $idaa_loc.archives.show_list__archive_obj_li = false;
// $idaa_loc.archives.show_edit__archive_obj = false;
// $idaa_loc.archives.show_view__archive_obj = true;
$idaa_loc.archives.show_edit__archive_content_id = false;
}
function handle_archive_content_obj_deleted(event) {
console.log('*** handle_archive_content_obj_deleted() ***');
console.log(event.detail);
$slct_trigger = 'load__archive_obj_li';
$slct_trigger = 'load__archive_obj';
$slct_trigger = 'load__archive_content_obj_li';
// $idaa_loc.archives.show_list__archive_obj_li = false;
// $idaa_loc.archives.show_edit__archive_obj = false;
// $idaa_loc.archives.show_view__archive_obj = true;
$idaa_loc.archives.show_edit__archive_content_id = false;
}
</script>
<section class="svelte_component ae_section ae_view archive_obj view__archive_obj" bind:clientHeight={$ae_app.iframe_height_modal_body}>
<header class="ae_header archive__header">
<h2 class="archive__name">{@html $slct.archive_obj.name}</h2>
</header>
<section class="archive__content">
{#if $slct.archive_obj.description}<div class="ae_value archive__description">{@html $slct.archive_obj.description}</div>{/if}
{#if $slct.archive_obj.content_html}<div class="ae_value">{@html $slct.archive_obj.content_html}</div>{/if}
{#if $slct.archive_obj.original_url}
<div>
<span class="ae_label">URL:</span>
<span class="ae_value">{$slct.archive_obj.original_url}</span>
</div>
{/if}
{#if $slct.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($slct.archive_obj.original_datetime, 'datetime_long')}</span>
</div>
{/if}
{#if $slct.archive_obj.original_timezone}
<span class="ae_label">Timezone:</span>
<span class="ae_value">{$slct.archive_obj.original_timezone}</span>
{/if}
{#if $slct.archive_obj.original_location}
<div>
<span class="ae_label">Location:</span>
<span class="ae_value">{$slct.archive_obj.original_location}</span>
</div>
{/if}
</section>
<section
class="ae_section ae_meta archive__meta"
class:ae_d_none={!$ae_loc.administrator_access}
>
<div class="ae_group">
<div class="archive__created_on_updated_on">
<span class="ae_label">Created on:</span>
<span class="ae_value archive__created_on">{ae.util.iso_datetime_formatter($slct.archive_obj.created_on, 'datetime_iso_no_seconds')}</span>
{#if $slct.archive_obj.updated_on}
<span class="ae_label">Updated on:</span>
<span class="ae_value">{ae.util.iso_datetime_formatter($slct.archive_obj.updated_on, 'datetime_iso_no_seconds')}</span>
{/if}
</div>
</div>
{#if $ae_loc.trusted_access}
<div class="ae_options">
{#if $ae_loc.trusted_access || $slct.archive_obj.external_person_id === $idaa_loc.novi_uuid}
<button
on:click={() => {
$slct.archive_content_id = null;
$slct.archive_content_obj = {};
$idaa_loc.archives.show_edit__archive_content_id = true;
}}
class="ae_btn ae_smallest btn btn-warning"
title={`Add content for: ${$slct.archive_obj.name}`}
>
<span class="fas fa-plus"></span> Add Content
</button>
<button
on:click={() => {
// $slct.archive_id = $slct.archive_obj.archive_id_random;
// $slct.archive_obj = $slct.archive_obj;
// const url = new URL(location);
// url.searchParams.set('archive_id', $slct.archive_obj.archive_id_random);
// history.pushState({}, '', url);
// $idaa_loc.archives.show_main__options = false;
// $idaa_loc.archives.show_list__archive_obj_li = false;
$idaa_loc.archives.show_view__archive_obj = false;
$idaa_loc.archives.show_edit__archive_obj = true;
}}
class="ae_btn ae_smallest btn btn-xs btn-warning"
title={`Edit archive: ${$slct.archive_obj.name}`}
>
<span class="fas fa-edit"></span> Edit Archive
</button>
{/if}
</div>
{/if}
</section>
{#if $slct.archive_obj}
<!-- {#each $slct.archive_content_obj_li as idaa_archive_content_obj, index} -->
<List_archive_content_obj />
<!-- {/each} -->
{/if}
<!-- {#if $slct.archive_content_obj_li && $slct.archive_content_obj_li.length} -->
<!-- {#each $slct.archive_content_obj_li as idaa_archive_content_obj, index}
<hr />
<span class="archive_content__name">{idaa_archive_content_obj.name}</span>
<pre class="archive_content__content">{@html idaa_archive_content_obj.content}</pre>
<section class="ae_section ae_meta archive_content__meta">
<div class="ae_group">
<div class="archive_content__created_on_updated_on">
Created on:
<span class="archive_content__created_on">{ae.util.iso_datetime_formatter(idaa_archive_content_obj.created_on, 'datetime_iso_no_seconds')}
{#if idaa_archive_content_obj.updated_on}
Updated on:
{ae.util.iso_datetime_formatter(idaa_archive_content_obj.updated_on, 'datetime_iso_no_seconds')}
{/if}
</div>
</div>
{#if $ae_loc.trusted_access || idaa_archive_content_obj.external_person_id === $idaa_loc.novi_uuid}
<div class="ae_options">
<button on:click={() => {
$slct.archive_content_id = idaa_archive_content_obj.archive_content_id_random;
$slct.archive_content_obj = idaa_archive_content_obj;
// $idaa_loc.archives.show_archive_content_list = false;
$idaa_loc.archives.show_edit__archive_content_id = true;
// $idaa_loc.archives.show_view__archive_obj = false;
}}
class="btn btn-default"
>
<span class="fas fa-edit"></span> Edit Content
</button>
</div>
{/if}
</section>
{/each} -->
<!-- {/if} -->
</section>
<style>
.ae_label {
font-size: smaller;
}
.ae_value {
font-weight: bold;
}
.archive_obj .ae_meta {
flex-direction: column;
/* justify-content: space-between; */
}
.archive_obj .ae_meta .ae_group {
flex-direction: row;
}
.archive_obj .ae_meta .ae_options {
flex-direction: row;
justify-content: space-between;
}
.archive__created_on_updated_on, .archive_content__created_on_updated_on {
/* font-size: smaller; */
/* background-color: hsla(0,80%,50%,1); */
/* color: hsla(0,0%,50%,1); */
}
</style>

View File

@@ -14,7 +14,7 @@ import { idaa_loc, idaa_sess, idaa_slct } from '$lib/ae_idaa_stores';
// *** Import Aether module variables and functions
// *** Import Aether module components
import Edit_post_obj from './10_edit__post_obj.svelte';
import Edit_post_obj from './del 10_edit__post_obj.svelte';
import View_post_obj from './ae_idaa_comp__post_obj_id_view.svelte';
// *** Export/Exposed variables and functions for component