245 lines
8.6 KiB
Svelte
245 lines
8.6 KiB
Svelte
<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 './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);
|
|
|
|
// $ae_app.archives.show_main__options = true;
|
|
$ae_app.archives.show_list__archive_obj_li = false;
|
|
$ae_app.archives.show_edit__archive_obj = false;
|
|
$ae_app.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';
|
|
|
|
// $ae_app.archives.show_list__archive_obj_li = false;
|
|
// $ae_app.archives.show_edit__archive_obj = false;
|
|
// $ae_app.archives.show_view__archive_obj = true;
|
|
$ae_app.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';
|
|
|
|
// $ae_app.archives.show_list__archive_obj_li = false;
|
|
// $ae_app.archives.show_edit__archive_obj = false;
|
|
// $ae_app.archives.show_view__archive_obj = true;
|
|
$ae_app.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';
|
|
|
|
// $ae_app.archives.show_list__archive_obj_li = false;
|
|
// $ae_app.archives.show_edit__archive_obj = false;
|
|
// $ae_app.archives.show_view__archive_obj = true;
|
|
$ae_app.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_app.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_app.trusted_access}
|
|
<div class="ae_options">
|
|
{#if $ae_app.trusted_access || $slct.archive_obj.external_person_id === $ae_app.novi_uuid}
|
|
<button
|
|
on:click={() => {
|
|
$slct.archive_content_id = null;
|
|
$slct.archive_content_obj = {};
|
|
$ae_app.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);
|
|
|
|
// $ae_app.archives.show_main__options = false;
|
|
// $ae_app.archives.show_list__archive_obj_li = false;
|
|
$ae_app.archives.show_view__archive_obj = false;
|
|
$ae_app.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_app.trusted_access || idaa_archive_content_obj.external_person_id === $ae_app.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;
|
|
|
|
// $ae_app.archives.show_archive_content_list = false;
|
|
$ae_app.archives.show_edit__archive_content_id = true;
|
|
// $ae_app.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>
|