Creating for AE "Sponsorships". Update file timestamps and remove unused files. Also switched to Svelte with Vite.
This commit is contained in:
Scott Idem
244
src/10_view__archive_obj.svelte
Normal file
244
src/10_view__archive_obj.svelte
Normal file
@@ -0,0 +1,244 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user