Work on the new Data Store element

src/lib/ae_stores.ts

@@ -1,10 +1,10 @@
-import { localStorageStore } from '@skeletonlabs/skeleton'
+import { localStorageStore } from '@skeletonlabs/skeleton';
 import { get, readable, writable } from 'svelte/store';
 import type { get, Writable } from 'svelte/store';
 
 
 import { PUBLIC_TESTING, PUBLIC_AE_API_PROTOCOL, PUBLIC_AE_API_SERVER, PUBLIC_AE_API_BAK_SERVER, PUBLIC_AE_API_PORT, PUBLIC_AE_API_PATH, PUBLIC_AE_API_SECRET_KEY, PUBLIC_AE_API_CRUD_SUPER_KEY, PUBLIC_AE_NO_ACCOUNT_ID, PUBLIC_AE_NO_ACCOUNT_ID_TOKEN, PUBLIC_AE_ACCOUNT_ID, PUBLIC_AE_EVENT_ID, PUBLIC_AE_SPONSORSHIP_CFG_ID } from '$env/static/public';
-console.log(`AE Stores - PUBLIC_TESTING:`, PUBLIC_TESTING);
+// console.log(`AE Stores - PUBLIC_TESTING:`, PUBLIC_TESTING);
 
 const api_base_url = `${PUBLIC_AE_API_PROTOCOL}://${PUBLIC_AE_API_SERVER}:${PUBLIC_AE_API_PORT}${PUBLIC_AE_API_PATH}`;
 const api_base_url_bak = `${PUBLIC_AE_API_PROTOCOL}://${PUBLIC_AE_API_BAK_SERVER}:${PUBLIC_AE_API_PORT}${PUBLIC_AE_API_PATH}`;
@@ -136,7 +136,9 @@ export let ae_app_session_data_struct: key_val = {
     // 'name': 'Aether App Template',
     // 'theme': 'light',
     // 'account_id': ae_account_id,
-    'ds': {},
+    'ds': {
+        'submit_status': null,
+    },
     'hub': {
         'show_xyz': null,
     },

src/lib/api.js

@@ -531,6 +531,8 @@ export let get_ae_obj_id_crud = async function get_ae_obj_id_crud({
         endpoint = `/crud/archive/content/${obj_id}`;
     } else if (obj_type == 'contact') {
         endpoint = `/crud/contact/${obj_id}`;
+    } else if (obj_type == 'data_store') {
+        endpoint = `/crud/data_store/${obj_id}`;
     } else if (obj_type == 'event') {
         endpoint = `/crud/event/${obj_id}`;
     } else if (obj_type == 'event_abstract') {
@@ -668,6 +670,8 @@ export let get_ae_obj_li_for_obj_id_crud = async function get_ae_obj_li_for_obj_
         endpoint = `/crud/archive/content/list`;
     } else if (obj_type == 'contact') {
         endpoint = `/crud/contact/list`;
+    } else if (obj_type == 'data_store') {
+        endpoint = `/crud/data_store/list`;
     } else if (obj_type == 'event') {
         endpoint = `/crud/event/list`;
     } else if (obj_type == 'event_abstract') {
@@ -838,6 +842,8 @@ export let create_ae_obj_crud = async function create_ae_obj_crud({api_cfg, obj_
         endpoint = `/crud/archive/content`;
     } else if (obj_type == 'contact') {
         endpoint = `/crud/contact`;
+    } else if (obj_type == 'data_store') {
+        endpoint = `/crud/data_store`;
     } else if (obj_type == 'event') {
         endpoint = `/crud/event`;
     } else if (obj_type == 'event_abstract') {
@@ -969,6 +975,8 @@ export let update_ae_obj_id_crud = async function update_ae_obj_id_crud({api_cfg
         endpoint = `/crud/archive/content/${obj_id}`;
     } else if (obj_type == 'contact') {
         endpoint = `/crud/contact/${obj_id}`;
+    } else if (obj_type == 'data_store') {
+        endpoint = `/crud/data_store/${obj_id}`;
     } else if (obj_type == 'event') {
         endpoint = `/crud/event/${obj_id}`;
     } else if (obj_type == 'event_abstract') {
@@ -1126,6 +1134,8 @@ export let delete_ae_obj_id_crud = async function delete_ae_obj_id_crud({api_cfg
         endpoint = `/crud/archive/content/${obj_id}`;
     } else if (obj_type == 'contact') {
         endpoint = `/crud/contact/${obj_id}`;
+    } else if (obj_type == 'data_store') {
+        endpoint = `/crud/data_store/${obj_id}`;
     } else if (obj_type == 'event') {
         endpoint = `/crud/event/${obj_id}`;
     } else if (obj_type == 'event_abstract') {

src/lib/element_data_store.svelte

@@ -0,0 +1,675 @@
+<script lang="ts">
+import { onMount } from 'svelte';
+import type { Writable } from 'svelte/store';
+import { localStorageStore } from '@skeletonlabs/skeleton';
+
+import { api } from '$lib/api';
+import { ae_loc, ae_sess, ae_api, slct, slct_trigger, ae_trig } from '$lib/ae_stores';
+import { ae_util } from '$lib/ae_utils';
+import type { key_val } from '$lib/ae_stores';
+
+export let ds_code: string;
+export let ds_type: string = 'text';
+export let for_type: string;
+export let for_id: string;
+
+export let store: string = 'local';
+export let display: string = 'block';
+export let class_li: string = ''; // : string[] = [];
+export let try_cache: boolean = true;
+
+export let show_edit: boolean = false;
+export let show_edit_btn: boolean = true;
+export let show_view: boolean = true;
+export let show_delete_btn: boolean = false;
+
+export let debug: boolean = false;
+
+let ae_promises: key_val = {}; // Promise<any>;
+let data_store_results: Promise<any>|key_val;
+
+let val_json: key_val;
+let val_html: key_val;
+let val_md: key_val;
+let val_sql: key_val;
+let val_text: string;
+
+
+let ds_code_obj =
+    {
+        id: null,
+        account_id: null,
+        code: ds_code,
+        type: ds_type,
+        for_type: null, // for_type
+        for_id: null, // for_id
+        access_read: null, // 'super', 'administrator', 'trusted', 'anonymous'
+        access_write: null, // 'super', 'administrator', 'trusted', 'anonymous'
+        access_delete: null, // 'super', 'administrator', 'trusted', 'anonymous'
+        name: null,
+        html: null,
+        json: null,
+        md: null,
+        text: null,
+        updated_on: null,
+    };
+
+let ae_ds_loc: Writable<key_val> = localStorageStore(`ae_ds__${ds_code}`, ds_code_obj);
+console.log(`ae_ Data Store ${ds_code} = `, $ae_ds_loc);
+
+$ae_sess.ds.submit_status = null;
+$ae_sess.ds.create_status = null;
+$ae_sess.ds.update_status = null;
+
+$slct_trigger = 'load__ds__code';
+
+onMount(() => {
+    console.log('Element: Data Store element_data_store.svelte');
+
+    if (ds_code && ds_type) {
+        $slct_trigger = 'load__ds__code';
+    }
+});
+
+// let ds_code_li = {}; //: key_val; // = ae_loc_tmp.ds;
+// console.log(`ae_ ds_code_li = `, ds_code_li);
+
+$: if ($slct_trigger == 'load__ds__code' && ds_code && ds_type) {
+    $slct_trigger = null;
+
+    load_data_store({
+        code: ds_code,
+        type: ds_type,
+        for_type: for_type,
+        for_id: for_id,
+        store: store,
+        display: display,
+        class_li: class_li,
+        try_cache: try_cache
+    });
+}
+
+async function load_data_store({
+        code,
+        type='text',
+        for_type=null,
+        for_id=null,
+        try_cache=true
+    }) {
+
+
+    // if ($ae_ds_loc) {
+    //     console.log(`ae_ Data Store ${code} = `, $ae_ds_loc);
+    //     // ds_code_val = ae_ds_loc;
+    //     // if (type == 'html') {
+    //     //     val_html = $ae_ds_loc.text;
+    //     // } else if (type == 'json') {
+    //     //     val_json = $ae_ds_loc.json;
+    //     // } else if (type == 'md') {
+    //     //     val_md = $ae_ds_loc.text;
+    //     // } else if (type == 'sql') {
+    //     //     val_sql = $ae_ds_loc.text;
+    //     // } else {
+    //     //     val_text = $ae_ds_loc.text;
+    //     // }
+    // }
+
+    let ds_code_val = await api.get_data_store_obj_w_code({
+        api_cfg: $ae_api,
+        data_store_code: code,
+        data_type: type,
+        log_lvl: 1
+        })
+    .then( function (ds_results) {
+        console.log(`ae_ Data Store ${code} = `, ds_results);
+        if (ds_results) {
+            console.log(`Got a result for code ${code}`);
+            if (!ds_results.data_store_id_random) {
+                console.log('Something went wrong? No data store ID found.');
+                return false;
+            }
+            $ae_ds_loc.id = ds_results.data_store_id_random;
+            $ae_ds_loc.account_id = ds_results.account_id_random;
+            $ae_ds_loc.code = ds_results.code; // This will overwrite whatever was passed in.
+            $ae_ds_loc.name = ds_results.name;
+            $ae_ds_loc.type = ds_results.type; // This will overwrite whatever was passed in.
+            if (type == 'html') {
+                $ae_ds_loc.html = ds_results.text;
+                val_html = ds_results.text;
+                return ds_results.html;
+            } else if (type == 'json') {
+                $ae_ds_loc.json = ds_results.json;
+                val_json = ds_results.json;
+                return ds_results.json;
+            } else if (type == 'md') {
+                $ae_ds_loc.text = ds_results.text;
+                val_md = ds_results.text;
+                return ds_results.text;
+            } else if (type == 'sql') {
+                $ae_ds_loc.text = ds_results.text;
+                val_sql = ds_results.text;
+                return ds_results.text;
+            } else {
+                $ae_ds_loc.text = ds_results.text;
+                val_text = ds_results.text;
+                return ds_results.text;
+            }
+        }
+    })
+    .catch(function (error) {
+        console.log(`Something went wrong. for code ${code}`);
+        console.log(error);
+        return false;
+    });
+    // .finally(function (ds_val_result) {
+    //     // console.log(`ae_ ds_code_val = `, ds_val_result);
+
+    //     // ae_ds_loc.set(ds_val_result);
+    //     // localStorage.setItem(ds_code, ds_val_result);
+    //     // sessionStorage.setItem(ds_code, ds_val_result);
+
+    //     // return ds_val_result;
+    // });
+    // console.log(`ae_ ds_code_val = `, ds_code_val);
+}
+
+
+async function handle_submit_form(event) {
+    console.log('*** handle_submit_form() ***');
+
+    $ae_sess.ds.submit_status = 'processing';
+
+
+    // Data in
+    let form_data = new FormData(event.target);
+    console.log(form_data);
+
+    let data_store_di: key_val = ae_util.extract_prefixed_form_data({prefix: null, form_data: form_data, trim_values: true, bool_tf_str: true, log_lvl: 0});
+    console.log(data_store_di);
+
+    // Data out
+    let data_store_do: key_val = {};
+
+    if (typeof data_store_di.ds_id_random !== 'undefined') {
+        data_store_do['data_store_id_random'] = data_store_di.ds_id_random;
+    }
+
+    // if (!$slct.data_store_id) {
+    if (!$ae_ds_loc.id) {
+        data_store_do['account_id_random'] = $ae_loc.account_id;
+    }
+
+    if (typeof data_store_di.ds_account_id !== 'undefined' && data_store_di.ds_account_id && data_store_di.ds_use_account_id) {
+        data_store_do['account_id_random'] = data_store_di.ds_account_id;
+    } else if (data_store_di.ds_use_account_id && $ae_loc.account_id) {
+        data_store_do['account_id_random'] = $ae_loc.account_id;
+    } else {
+        data_store_do['account_id_random'] = null;
+    }
+
+    if (typeof data_store_di.ds_code !== 'undefined') {
+        data_store_do['code'] = data_store_di.ds_code;
+    }
+
+    if (typeof data_store_di.ds_name !== 'undefined') {
+        data_store_do['name'] = data_store_di.ds_name;
+    }
+
+    if (typeof data_store_di.ds_type !== 'undefined') {
+        data_store_do['type'] = data_store_di.ds_type;
+    }
+
+    if (typeof data_store_di.ds_for_type !== 'undefined' && data_store_di.ds_for_type) {
+        data_store_do['for_type'] = data_store_di.ds_for_type;
+    } else {
+        data_store_do['for_type'] = null;
+    }
+
+    if (typeof data_store_di.ds_for_id !== 'undefined' && data_store_di.ds_for_id) {
+        data_store_do['for_id_random'] = data_store_di.ds_for_id;
+    } else {
+        data_store_do['for_id_random'] = null;
+    }
+
+    if (typeof data_store_di.ds_access_read !== 'undefined') {
+        data_store_do['access_read'] = data_store_di.ds_access_read;
+    }
+
+    if (typeof data_store_di.ds_access_write !== 'undefined') {
+        data_store_do['access_write'] = data_store_di.ds_access_write;
+    }
+
+    if (typeof data_store_di.ds_access_delete !== 'undefined') {
+        data_store_do['access_delete'] = data_store_di.ds_access_delete;
+    }
+
+    if (typeof data_store_di.ds_value !== 'undefined') {
+        if (data_store_di.ds_type == 'html') {
+            data_store_do['text'] = data_store_di.ds_value;
+        } else if (data_store_di.ds_type == 'json') {
+            data_store_do['json'] = data_store_di.ds_value;
+        } else if (data_store_di.ds_type == 'md') {
+            data_store_do['text'] = data_store_di.ds_value;
+        } else if (data_store_di.ds_type == 'sql') {
+            data_store_do['text'] = data_store_di.ds_value;
+        } else {
+            data_store_do['text'] = data_store_di.ds_value;
+        }
+    }
+
+    if (typeof data_store_di.ds_enable !== 'undefined') {
+        data_store_do['enable'] = data_store_di.ds_enable;
+    } else {
+        data_store_do['enable'] = true;
+    }
+
+    console.log(data_store_do);
+
+    if (!$ae_ds_loc.id) {
+        // Create
+        console.log(`ae_ Data Store Create:`, data_store_do);
+        data_store_results = handle_create__data_store({
+        obj_type: 'data_store',
+        data: data_store_do
+        })
+        .then( function (ds_results) {
+            console.log(`ae_ Data Store Create Results:`, ds_results);
+            if (ds_results) {
+                $ae_ds_loc.id = ds_results.data_store_id_random;
+                // $ae_ds_loc.account_id = ds_results.account_id_random;
+                // $ae_ds_loc.code = ds_results.code;
+                // $ae_ds_loc.name = ds_results.name;
+                // $ae_ds_loc.type = ds_results.type;
+                // $ae_ds_loc.html = ds_results.html;
+                // $ae_ds_loc.json = ds_results.json;
+                // $ae_ds_loc.md = ds_results.md;
+                // $ae_ds_loc.text = ds_results.text;
+                $ae_ds_loc.updated_on = ds_results.updated_on;
+            }
+            return ds_results;
+        })
+        .finally(function (ds_val_result) {
+            $ae_sess.ds.submit_status = 'created';
+        });
+    } else {
+        // Update
+        console.log(`ae_ Data Store Update:`, data_store_do);
+        data_store_results = handle_update__data_store({
+        obj_type: 'data_store',
+        obj_id: $ae_ds_loc.id,
+        data: data_store_do
+        })
+        .then( function (ds_results) {
+            console.log(`ae_ Data Store Update Results:`, ds_results);
+            if (ds_results) {
+                // $ae_ds_loc.id = ds_results.data_store_id_random;
+                // $ae_ds_loc.account_id = ds_results.account_id_random;
+                // $ae_ds_loc.code = ds_results.code;
+                // $ae_ds_loc.name = ds_results.name;
+                // $ae_ds_loc.type = ds_results.type;
+                // $ae_ds_loc.html = ds_results.html;
+                // $ae_ds_loc.json = ds_results.json;
+                // $ae_ds_loc.md = ds_results.md;
+                // $ae_ds_loc.text = ds_results.text;
+                $ae_ds_loc.updated_on = ds_results.updated_on;
+            }
+            return ds_results;
+        // })
+        // .finally(function (ds_val_result) {
+        //     // console.log(`ae_ ds_code_val = `, ds_val_result);
+        })
+        .finally(function (ds_val_result) {
+            $ae_sess.ds.submit_status = 'updated';
+        });
+    }
+
+
+}
+
+
+async function handle_create__data_store({
+        obj_type,
+        data
+        }) {
+    console.log('*** handle_create__data_store() ***');
+
+    $ae_sess.ds.create_status = 'starting';
+    ae_promises.api_create__data_store_obj = api.create_ae_obj_crud({
+        api_cfg: $ae_api,
+        obj_type: obj_type,
+        fields: data,
+        key: $ae_api.api_crud_super_key,
+        log_lvl: 2
+        })
+    .then(async function (create__obj_result) {
+        if (!create__obj_result) {
+            console.log('The result was null or false.');
+            return false;
+        }
+        return create__obj_result;
+    })
+    .catch(function (error) {
+        console.log('Something went wrong.');
+        console.log(error);
+        return false;
+    })
+    .finally(function (create__obj_result) {
+        $ae_sess.ds.create_status = 'finished';
+        return create__obj_result;
+    });
+
+    return ae_promises.api_create__data_store_obj;
+}
+
+
+async function handle_update__data_store({
+        obj_type,
+        obj_id,
+        data
+        }) {
+    console.log('*** handle_update__data_store() ***');
+
+    $ae_sess.ds.update_status = 'starting';
+    ae_promises.update__data_store_obj = api.update_ae_obj_id_crud({
+            api_cfg: $ae_api,
+            obj_type: obj_type,
+            obj_id: obj_id,
+            fields: data,
+            key: $ae_api.api_crud_super_key,
+            log_lvl: 2
+            })
+        .then(async function (update__obj_result) {
+            if (!update__obj_result) {
+                console.log('The result was null or false.');
+                return false;
+            }
+            return update__obj_result;
+        })
+        .catch(function (error) {
+            console.log('Something went wrong.');
+            console.log(error);
+            return false;
+        })
+        .finally(function (update__obj_result) {
+            $ae_sess.ds.update_status = 'finished';
+            return update__obj_result;
+        })
+
+        return ae_promises.update__data_store_obj;
+}
+</script>
+
+
+<div class="ae__elem__data_store relative {class_li}">
+{#if $ae_ds_loc}
+
+
+{#if debug || $ae_loc.debug == 'debug'}
+
+    <pre>
+    id: {$ae_ds_loc.id},
+    code: {$ae_ds_loc.code},
+    type: {$ae_ds_loc.type},
+    for_type: {$ae_ds_loc.for_type},
+    for_id: {$ae_ds_loc.for_id},
+    access_read: {$ae_ds_loc.access_read},
+    access_write: {$ae_ds_loc.access_write},
+    access_delete: {$ae_ds_loc.access_delete},
+    name: {$ae_ds_loc.name},
+    html: {$ae_ds_loc.html},
+    json: {$ae_ds_loc.json},
+    md: {$ae_ds_loc.md},
+    text: {$ae_ds_loc.text},
+    updated_on: {$ae_ds_loc.updated_on},
+    </pre>
+{/if}
+
+{#if show_edit}
+    <section class="edit z-50">
+    <form
+        class="ae__elem__data_store__form"
+        on:submit|preventDefault={handle_submit_form}
+        >
+
+    <input
+        type="hidden"
+        name="ds_id_random"
+        value={$ae_ds_loc.id}
+        />
+
+    {#if $ae_loc.administrator_access}
+        <label for="ds_use_account_id" class="label text-xs inline">Use Account ID
+        <input
+            type="checkbox"
+            name="ds_use_account_id"
+            class="checkbox"
+            value="true"
+            checked={$ae_ds_loc.account_id ? true : false}
+            />
+        </label>
+        <input
+            type="text"
+            name="ds_account_id"
+            class="input max-w-48 text-xs"
+            placeholder="Account ID"
+            value={$ae_ds_loc.account_id}
+            />
+
+
+        <input
+            type="text"
+            name="ds_code"
+            class="input text-xs"
+            placeholder="Data store code"
+            value={$ae_ds_loc.code}
+            required
+            />
+        <input
+            type="text"
+            name="ds_name"
+            class="input text-xs"
+            placeholder="Data store name"
+            value={$ae_ds_loc.name}
+            required
+            />
+        <input
+            type="text"
+            name="ds_type"
+            class="input max-w-48 text-xs"
+            placeholder="Data store type (html, json, md, sql, text)"
+            value={$ae_ds_loc.type}
+            required
+            />
+        <input
+            type="text"
+            name="ds_for_type"
+            class="input max-w-48 text-xs"
+            placeholder="Data store For Type"
+            value={$ae_ds_loc.for_type}
+            />
+        <input
+            type="text"
+            name="ds_for_id"
+            class="input max-w-48 text-xs"
+            placeholder="Data store For ID"
+            value={$ae_ds_loc.for_id}
+            />
+        <input
+            type="text"
+            name="ds_access_read"
+            class="input max-w-48 text-xs"
+            placeholder="Access read"
+            value={$ae_ds_loc.access_read}
+            />
+        <input
+            type="text"
+            name="ds_access_write"
+            class="input max-w-48 text-xs"
+            placeholder="Access write"
+            value={$ae_ds_loc.access_write}
+            />
+        <input
+            type="text"
+            name="ds_access_delete"
+            class="input max-w-48 text-xs"
+            placeholder="Access delete"
+            value={$ae_ds_loc.access_delete}
+            />
+    {/if}
+
+    {#if $ae_ds_loc.type == 'html' || $ae_ds_loc.type == null}
+    <textarea
+        name="ds_value"
+        class="textarea type_html font-mono text-sm"
+        cols="75"
+        rows="25"
+        placeholder="Enter the HTML here"
+        >{$ae_ds_loc.type == 'html' && $ae_ds_loc.html ? $ae_ds_loc.html : ''}</textarea>
+    {:else if $ae_ds_loc.type == 'text'}
+    <textarea
+        name="ds_value"
+        class="textarea type_text"
+        cols="70"
+        rows="10"
+        placeholder="Enter the text here"
+        >{$ae_ds_loc.type == 'text' ? $ae_ds_loc.text : ''}</textarea>
+    {/if}
+    <div class="flex gap-1 justify-center justify-evenly items-center p-1">
+
+    <button
+        type="button"
+        class="btn variant-soft-warning"
+        on:click={() => {
+            if (confirm('Are you sure you want to delete this data store?')) {
+                $slct_trigger = 'delete__ds__code';
+            }
+            show_edit = false;
+            show_view = true;
+        }}
+        >
+        <span class="fas fa-trash mx-1"></span>
+        Delete
+    </button>
+
+    <button
+        type="button"
+        class="btn variant-soft-primary"
+        on:click={() => {
+            show_edit = false;
+            show_view = true;
+        }}
+        >
+        <span class="fas fa-times mx-1"></span>
+        Cancel
+    </button>
+
+    <button
+        type="submit"
+        class="btn variant-soft-primary"
+        disabled={data_store_results instanceof Promise}
+        on:click={() => {
+            $slct_trigger = 'save__ds__code';
+        }}
+        >
+        <span class="fas fa-save mx-1"></span>
+        Save
+    </button>
+
+    {#await data_store_results}
+        <div class="modal-loading">
+            <span class="fas fa-spinner fa-spin"></span>
+            <span class="loading-text">
+                Saving...
+            </span>
+        </div>
+    {:then data_store_results}
+        {#if data_store_results}
+        <span class="fas fa-check text-green-500"></span>
+        <span class="saved-text">
+            Saved
+        </span>
+        {/if}
+    {/await}
+
+    <div
+        class="ae_debug"
+        class:hidden={!debug && $ae_loc.debug != 'debug'}
+        >
+    submit: {$ae_sess.ds.submit_status}
+    create: {$ae_sess.ds.create_status}
+    update: {$ae_sess.ds.update_status}
+    </div>
+
+    </div>
+
+    </form>
+    </section>
+{/if}
+
+<!-- {#if mode == 'view'} -->
+
+    {#if !$ae_ds_loc.type && !$ae_ds_loc.html && !$ae_ds_loc.json && !$ae_ds_loc.md && !$ae_ds_loc.text}
+        <span class="variant-soft-warning">No data found! Is the data store correct or new?</span>
+    {/if}
+
+    {#if $ae_ds_loc.type == 'html' && $ae_ds_loc.html}
+        {@html $ae_ds_loc.html}
+    {:else if $ae_ds_loc.type == 'html'}
+        <span class="variant-soft-warning">No HTML found! Is the data store type correct?</span>
+    {/if}
+
+    {#if $ae_ds_loc.type == 'text' && $ae_ds_loc.text}
+        {$ae_ds_loc.text}
+    {:else if $ae_ds_loc.type == 'text'}
+        <span class="variant-soft-warning">No text found! Is the data store type correct?</span>
+    {/if}
+
+    <button
+        class="ae_btn_edit__ds btn hover:variant-glass-warning text-xs absolute top-0 right-0 opacity-75 hover:opacity-100 transition delay-700 hover:delay-200 m-1 p-1"
+        on:click={() => {
+            show_edit = true;
+            show_view = false;
+        }}
+        >
+        <span class="fas fa-edit mx-1"></span>
+        Edit
+    </button>
+
+<!-- {/if} -->
+
+
+{/if}
+
+<!-- Text:
+<pre>
+{val_text}
+</pre> -->
+
+<!-- JSON:
+<pre>
+{val_json}
+</pre> -->
+
+</div>
+
+
+<style lang="postcss">
+/* .ae_btn_edit__ds {
+    opacity: .5;
+} */
+
+/* The section.edit should be above the rest of the content and centered on the page */
+section.edit {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 100;
+    background-color: hsla(0, 0%, 100%, .95);
+    padding: 1rem;
+    border-radius: .5rem;
+    box-shadow: 0 0 1rem hsla(0, 0%, 0%, .5);
+
+    min-width: 80%;
+}
+</style>

src/routes/events_badges/+page.svelte

@@ -4,10 +4,10 @@ export let data;
 
 import { onMount } from 'svelte';
 
-import { api } from '$lib/api';
 import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
 import { ae_util } from '$lib/ae_utils';
-import type { key_val } from '$lib/ae_stores';
+
+import Element_data_store from '$lib/element_data_store.svelte';
 
 
 onMount(() => {
@@ -22,16 +22,39 @@ onMount(() => {
     // $slct_trigger = 'msg_parent';
     ae_util.handle_url_and_message('event_id', $slct.event_id);
     ae_util.handle_url_and_message('event_badge_id', $slct.event_badge_id);
-    if ($slct.event_badge_id) {
-        console.log(`Got an ID. Let's show the modal!`);
-        modalStore.trigger(modal_edit__event_badge_obj);
-    }
+    // if ($slct.event_badge_id) {
+    //     console.log(`Got an ID. Let's show the modal!`);
+    //     modalStore.trigger(modal_edit__event_badge_obj);
+    // }
 });
 </script>
 
 
 <section class="ae_events_badges md:container h-full mx-auto">
 
+<h1 class="h2">New Events - Badges</h1>
+
+<Element_data_store
+    ds_code="events__badges__overview"
+    ds_type="html"
+    for_type="event"
+    for_id={$slct.event_id}
+    display="block"
+    class_li="variant-ghost-surface p-2"
+    />
+
+
+<Element_data_store
+    ds_code="events__badges__example"
+    ds_type="html"
+    for_type="event"
+    for_id={$slct.event_id}
+    store="local"
+    display="block"
+    class_li="variant-ghost-surface p-2"
+    try_cache={true}
+    show_edit={true}
+    />
 
 </section>
 

src/routes/events_speakers/10_edit_modal__event_presenter_obj.svelte

@@ -369,26 +369,26 @@ async function handle_create__event_presenter({
     console.log('*** handle_create__event_presenter() ***');
 
     ae_promises.api_create__event_presenter_obj = api.create_ae_obj_crud({
-            api_cfg: $ae_api,
-            obj_type: obj_type,
-            fields: data,
-            key: $ae_api.api_crud_super_key,
-            log_lvl: 2
-            })
-        .then(async function (create__obj_result) {
-            if (!create__obj_result) {
-                console.log('The result was null or false.');
-                return false;
-            }
-            return create__obj_result;
+        api_cfg: $ae_api,
+        obj_type: obj_type,
+        fields: data,
+        key: $ae_api.api_crud_super_key,
+        log_lvl: 2
         })
-        .catch(function (error) {
-            console.log('Something went wrong.');
-            console.log(error);
+    .then(async function (create__obj_result) {
+        if (!create__obj_result) {
+            console.log('The result was null or false.');
             return false;
-        });
+        }
+        return create__obj_result;
+    })
+    .catch(function (error) {
+        console.log('Something went wrong.');
+        console.log(error);
+        return false;
+    });
 
-        return ae_promises.api_create__event_presenter_obj;
+    return ae_promises.api_create__event_presenter_obj;
 }
 
 
@@ -400,27 +400,27 @@ async function handle_update__event_presenter({
     console.log('*** handle_update__event_presenter() ***');
 
     ae_promises.update__event_presenter_obj = api.update_ae_obj_id_crud({
-            api_cfg: $ae_api,
-            obj_type: obj_type,
-            obj_id: obj_id,
-            fields: data,
-            key: $ae_api.api_crud_super_key,
-            log_lvl: 2
-            })
-        .then(async function (update__obj_result) {
-            if (!update__obj_result) {
-                console.log('The result was null or false.');
-                return false;
-            }
-            return update__obj_result;
+        api_cfg: $ae_api,
+        obj_type: obj_type,
+        obj_id: obj_id,
+        fields: data,
+        key: $ae_api.api_crud_super_key,
+        log_lvl: 2
         })
-        .catch(function (error) {
-            console.log('Something went wrong.');
-            console.log(error);
+    .then(async function (update__obj_result) {
+        if (!update__obj_result) {
+            console.log('The result was null or false.');
             return false;
-        });
+        }
+        return update__obj_result;
+    })
+    .catch(function (error) {
+        console.log('Something went wrong.');
+        console.log(error);
+        return false;
+    });
 
-        return ae_promises.update__event_presenter_obj;
+    return ae_promises.update__event_presenter_obj;
 }
 </script>
 

src/routes/sponsorships/10_edit_modal__sponsorship_obj.svelte

@@ -8,6 +8,9 @@ import { fade } from 'svelte/transition';
 // store_current_tab must be prefixed with $ to be reactive.
 import { clipboard, FileDropzone, getModalStore, localStorageStore, ProgressRadial, RadioGroup, RadioItem, TabGroup, Tab, TabAnchor } from '@skeletonlabs/skeleton';
 import type { Writable } from 'svelte/store';
+
+import Element_data_store from '$lib/element_data_store.svelte';
+
 const store_current_tab: Writable<string> = localStorageStore('ae_sponsorships_current_tab', 'start');
 console.log(`store_current_tab:`, $store_current_tab);
 
@@ -1215,8 +1218,16 @@ async function handle_update__sponsorship({
             {$ae_loc.ds['sponsorships__agree_li'][1].code}
         {/if} -->
 
-        <h3 class="h4 input_required">Sponsor General Waiver</h3>
-        <p class="text-sm">Proceeds from your sponsorship benefit the National Marine Sanctuary Foundation, a 501c3 nonprofit organization. Your contribution may be tax-deductible. For more information, please consult with a tax professional. All sales are final, and contributions, purchases, tickets, and sponsorships are non-refundable. As the host of CHOW, the Foundation is committed to the safety and well-being of all participants. If CHOW moves entirely to a virtual platform due to external circumstances, the Foundation will work with you to ensure that we meet your sponsor benefit needs. In the event of cancellation, your purchase becomes a tax-deductible gift.</p>
+        <Element_data_store
+            ds_code="sponsorships__form__waiver_html"
+            ds_type="html"
+            for_type="sponsorship_cfg"
+            for_id={$slct.sponsorship_cfg_id}
+            display="block"
+            class_li=""
+            />
+        <!-- <h3 class="h4 input_required">Sponsor General Waiver</h3>
+        <p class="text-sm">Proceeds from your sponsorship benefit the National Marine Sanctuary Foundation, a 501c3 nonprofit organization. Your contribution may be tax-deductible. For more information, please consult with a tax professional. All sales are final, and contributions, purchases, tickets, and sponsorships are non-refundable. As the host of CHOW, the Foundation is committed to the safety and well-being of all participants. If CHOW moves entirely to a virtual platform due to external circumstances, the Foundation will work with you to ensure that we meet your sponsor benefit needs. In the event of cancellation, your purchase becomes a tax-deductible gift.</p> -->
         <label for="agree" class="label">
             <input
                 type="checkbox"
@@ -1230,8 +1241,16 @@ async function handle_update__sponsorship({
             Yes, I understand the "Sponsor General Waiver".
         </label>
 
-        <h3 class="h4">Special Accomodations</h3>
-        <p class="text-sm">If you require any special accommodations in order to enhance/enable your involvement with CHOW please provide details in the text box below. A member of the CHOW team will reach out to assist.</p>
+        <Element_data_store
+            ds_code="sponsorships__form__accomodations_html"
+            ds_type="html"
+            for_type="sponsorship_cfg"
+            for_id={$slct.sponsorship_cfg_id}
+            display="block"
+            class_li=""
+            />
+        <!-- <h3 class="h4">Special Accomodations</h3>
+        <p class="text-sm">If you require any special accommodations in order to enhance/enable your involvement with CHOW please provide details in the text box below. A member of the CHOW team will reach out to assist.</p> -->
         <label for="q_accommodations" class="label">
             <input
                 type="checkbox"