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

I think things are mostly working now...

Browse Source
This commit is contained in:
Scott Idem
2024-03-27 19:21:39 -04:00
parent 8d8fb0b638
commit 378ae11224
1 changed files with 108 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

205
src/lib/element_data_store.svelte
View File

@@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import type { Writable } from 'svelte/store'; // import type { Writable } from 'svelte/store';
import { localStorageStore } from '@skeletonlabs/skeleton'; // import { localStorageStore } from '@skeletonlabs/skeleton';
import { api } from '$lib/api'; import { api } from '$lib/api';
import { ae_loc, ae_sess, ae_api, slct, slct_trigger, ae_trig } from '$lib/ae_stores'; import { ae_loc, ae_sess, ae_api, slct, slct_trigger, ae_trig } from '$lib/ae_stores';
@@ -63,14 +63,21 @@ let ds_code_obj =
chk_account_id: null, chk_account_id: null,
}; };
let ae_ds_loc: Writable<key_val> = localStorageStore(`ae_ds__${ds_code}`, ds_code_obj); let ae_ds_tmp: key_val;
// console.log(`ae_e_data_store cached: ${ds_code} = `, $ae_ds_loc); if (browser && localStorage.getItem(`ae_ds__${ds_code}`)) {
ae_ds_tmp = JSON.parse(localStorage.getItem(`ae_ds__${ds_code}`));
} else {
ae_ds_tmp = ds_code_obj;
}
// Writable<key_val> = localStorageStore(`ae_ds__${ds_code}`, ds_code_obj);
// console.log(`ae_e_data_store cached: ${ds_code} = `, ae_ds_tmp);
console.log(`ae_e_data_store cached: ${ds_code} account_id=${$ae_loc.account_id}`); console.log(`ae_e_data_store cached: ${ds_code} account_id=${$ae_loc.account_id}`);
if (!$ae_ds_loc.id) { if (!ae_ds_tmp || !ae_ds_tmp.id) {
ds_loading_status = '-- loading --'; ds_loading_status = '-- loading --';
} else { } else {
// ae_ds_loc.set($ae_ds_loc); // ae_ds_loc.set(ae_ds_tmp);
} }
$ae_sess.ds.submit_status = null; $ae_sess.ds.submit_status = null;
@@ -79,37 +86,46 @@ $ae_sess.ds.update_status = null;
let trigger: null|string = null; let trigger: null|string = null;
$: if (ae_ds_tmp) {
console.log(`ae_e_data_store ae_ds_loc = `, ae_ds_tmp);
}
import { browser } from '$app/environment'; import { browser } from '$app/environment';
let ae_ds_loc_test: any;
if (browser) { if (browser) {
console.log('ae_ Browser detected.'); console.log('ae_e_data_store Browser detected.');
ae_ds_loc_test = JSON.parse(localStorage.getItem(`ae_ds__${ds_code}`));
console.log(`ae_e_data_store ae_ds_loc_test = `, ae_ds_loc_test);
// ae_ds_tmp = {id: null};
// ae_ds_tmp = ae_ds_loc_test;
} else { } else {
console.log('ae_ Browser not detected.'); console.log('ae_e_data_store Browser not detected.');
} }
// This is a quick check to make sure the data store is not stale. If it is, then we need to trigger a reload. // This is a quick check to make sure the data store is not stale. If it is, then we need to trigger a reload.
if (browser && $ae_ds_loc.loaded_on && $ae_ds_loc.chk_account_id == $ae_loc.account_id) { if (browser && ae_ds_tmp && ae_ds_tmp.loaded_on && ae_ds_tmp.chk_account_id == $ae_loc.account_id) {
console.log(`ae_data_store ${ds_code} loaded_on: ${$ae_ds_loc.loaded_on}`); console.log(`ae_e_data_store ${ds_code} loaded_on: ${ae_ds_tmp.loaded_on}`);
let loaded_on = new Date($ae_ds_loc.loaded_on); let loaded_on = new Date(ae_ds_tmp.loaded_on);
let now = new Date(); let now = new Date();
let diff = now.getTime() - loaded_on.getTime(); let diff = now.getTime() - loaded_on.getTime();
let diff_minutes = diff / (1000 * 60); let diff_minutes = diff / (1000 * 60);
if (diff_minutes > expire_minutes) { if (diff_minutes > expire_minutes) {
console.log(`Data Store ${ds_code} stale. Last loaded on: ${loaded_on.toISOString()}`); console.log(`ae_e_data_store: Data Store ${ds_code} stale. Last loaded on: ${loaded_on.toISOString()}`);
// Wait for random number of milliseconds to avoid all data stores being reloaded at the same time. // Wait for random number of milliseconds to avoid all data stores being reloaded at the same time.
let random_ms = Math.floor(Math.random() * 500); let random_ms = Math.floor(Math.random() * 500);
console.log(`Random number of milliseconds: ${random_ms}`); console.log(`ae_e_data_store: Random number of milliseconds: ${random_ms}`);
setTimeout(() => { setTimeout(() => {
trigger = 'load__ds__code'; trigger = 'load__ds__code';
}, random_ms); }, random_ms);
} }
} else if (browser) { } else if (browser) {
console.log('ae_data_store No loaded_on date found and or the account_id check failed. Need to trigger reload.'); console.log('ae_e_data_store: No loaded_on date found and or the account_id check failed. Need to trigger reload.');
trigger = 'load__ds__code'; trigger = 'load__ds__code';
} }
// This is a secondary check... The account_id should either be null or match the current account_id. // This is a secondary check... The account_id should either be null or match the current account_id.
if (!$ae_ds_loc.account_id === null || $ae_loc.account_id == $ae_loc.account_id) { if (!ae_ds_tmp || !ae_ds_tmp.account_id === null || $ae_loc.account_id == $ae_loc.account_id) {
trigger = 'load__ds__code'; trigger = 'load__ds__code';
} }
@@ -119,7 +135,7 @@ onMount(() => {
// Wait for random number of milliseconds to avoid all data stores being reloaded at the same time. // Wait for random number of milliseconds to avoid all data stores being reloaded at the same time.
let random_ms = Math.floor(Math.random() * 1500); let random_ms = Math.floor(Math.random() * 1500);
console.log(`Random number of milliseconds: ${random_ms}`); console.log(`ae_e_data_store: Random number of milliseconds: ${random_ms}`);
setTimeout(() => { setTimeout(() => {
trigger = 'load__ds__code'; trigger = 'load__ds__code';
}, random_ms); }, random_ms);
@@ -129,7 +145,7 @@ onMount(() => {
// console.log(`ae_ ds_code_li = `, ds_code_li); // console.log(`ae_ ds_code_li = `, ds_code_li);
$: if (trigger == 'load__ds__code' && ds_code && ds_type) { $: if (trigger == 'load__ds__code' && ds_code && ds_type) {
console.log(`ae_ load__ds__code: ${ds_code} ds_type=${ds_type} for_type=${for_type} for_id=${for_id} ${try_cache}`); console.log(`ae_e_data_store: ae_ load__ds__code: ${ds_code} ds_type=${ds_type} for_type=${for_type} for_id=${for_id} ${try_cache}`);
trigger = null; trigger = null;
@@ -169,7 +185,7 @@ async function load_data_store(
.then( function (ds_results) { .then( function (ds_results) {
// console.log(`ae_ Data Store ${code} = `, ds_results); // console.log(`ae_ Data Store ${code} = `, ds_results);
if (ds_results) { if (ds_results) {
console.log(`Got a result for code ${code}`); console.log(`ae_e_data_store: Got a result for code ${code}`);
if (!ds_results.data_store_id_random) { if (!ds_results.data_store_id_random) {
console.log('Something went wrong? No data store ID found.'); console.log('Something went wrong? No data store ID found.');
return false; return false;
@@ -178,33 +194,33 @@ async function load_data_store(
ds_loaded = true; ds_loaded = true;
// Set the loaded_on datetime to the current time for reference later. This will be used to determine if the data store is stale. // Set the loaded_on datetime to the current time for reference later. This will be used to determine if the data store is stale.
$ae_ds_loc.loaded_on = new Date().toISOString(); ae_ds_tmp.loaded_on = new Date().toISOString();
// Set the chk_account_id as a backup check to make sure the data store belongs to the account for the current site. This should not be needed, but here we are... // Set the chk_account_id as a backup check to make sure the data store belongs to the account for the current site. This should not be needed, but here we are...
$ae_ds_loc.chk_account_id = $ae_loc.account_id; ae_ds_tmp.chk_account_id = $ae_loc.account_id;
$ae_ds_loc.id = ds_results.data_store_id_random; ae_ds_tmp.id = ds_results.data_store_id_random;
$ae_ds_loc.account_id = ds_results.account_id_random; ae_ds_tmp.account_id = ds_results.account_id_random;
$ae_ds_loc.code = ds_results.code; // This will overwrite whatever was passed in. ae_ds_tmp.code = ds_results.code; // This will overwrite whatever was passed in.
$ae_ds_loc.name = ds_results.name; ae_ds_tmp.name = ds_results.name;
$ae_ds_loc.type = ds_results.type; // This will overwrite whatever was passed in. ae_ds_tmp.type = ds_results.type; // This will overwrite whatever was passed in.
if (type == 'html') { if (type == 'html') {
$ae_ds_loc.html = ds_results.text; ae_ds_tmp.html = ds_results.text;
val_html = ds_results.text; val_html = ds_results.text;
return ds_results.html; return ds_results.html;
} else if (type == 'json') { } else if (type == 'json') {
$ae_ds_loc.json = ds_results.json; ae_ds_tmp.json = ds_results.json;
val_json = ds_results.json; val_json = ds_results.json;
return ds_results.json; return ds_results.json;
} else if (type == 'md') { } else if (type == 'md') {
$ae_ds_loc.text = ds_results.text; ae_ds_tmp.text = ds_results.text;
val_md = ds_results.text; val_md = ds_results.text;
return ds_results.text; return ds_results.text;
} else if (type == 'sql') { } else if (type == 'sql') {
$ae_ds_loc.text = ds_results.text; ae_ds_tmp.text = ds_results.text;
val_sql = ds_results.text; val_sql = ds_results.text;
return ds_results.text; return ds_results.text;
} else { } else {
$ae_ds_loc.text = ds_results.text; ae_ds_tmp.text = ds_results.text;
val_text = ds_results.text; val_text = ds_results.text;
return ds_results.text; return ds_results.text;
} }
@@ -253,7 +269,7 @@ async function handle_submit_form(event: any) {
} }
// if (!$slct.data_store_id) { // if (!$slct.data_store_id) {
if (!$ae_ds_loc.id) { if (!ae_ds_tmp.id) {
data_store_do['account_id_random'] = $ae_loc.account_id; data_store_do['account_id_random'] = $ae_loc.account_id;
} }
@@ -329,7 +345,7 @@ async function handle_submit_form(event: any) {
console.log(data_store_do); console.log(data_store_do);
if (!$ae_ds_loc.id) { if (!ae_ds_tmp.id) {
// Create // Create
console.log(`ae_ Data Store Create:`, data_store_do); console.log(`ae_ Data Store Create:`, data_store_do);
ds_submit_results = handle_create__data_store({ ds_submit_results = handle_create__data_store({
@@ -339,16 +355,8 @@ async function handle_submit_form(event: any) {
.then( function (ds_results) { .then( function (ds_results) {
console.log(`ae_ Data Store Create Results:`, ds_results); console.log(`ae_ Data Store Create Results:`, ds_results);
if (ds_results) { if (ds_results) {
$ae_ds_loc.id = ds_results.data_store_id_random; ae_ds_tmp.id = ds_results.data_store_id_random;
// $ae_ds_loc.account_id = ds_results.account_id_random; ae_ds_tmp.updated_on = ds_results.updated_on;
// $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; return ds_results;
}) })
@@ -362,22 +370,13 @@ async function handle_submit_form(event: any) {
console.log(`ae_ Data Store Update:`, data_store_do); console.log(`ae_ Data Store Update:`, data_store_do);
ds_submit_results = handle_update__data_store({ ds_submit_results = handle_update__data_store({
obj_type: 'data_store', obj_type: 'data_store',
obj_id: $ae_ds_loc.id, obj_id: ae_ds_tmp.id,
data: data_store_do data: data_store_do
}) })
.then( function (ds_results) { .then( function (ds_results) {
console.log(`ae_ Data Store Update Results:`, ds_results); console.log(`ae_ Data Store Update Results:`, ds_results);
if (ds_results) { if (ds_results) {
// $ae_ds_loc.id = ds_results.data_store_id_random; ae_ds_tmp.updated_on = ds_results.updated_on;
// $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; return ds_results;
// }) // })
@@ -470,26 +469,26 @@ async function handle_update__data_store({
<div class="ae__elem__data_store relative {class_li}"> <div class="ae__elem__data_store relative {class_li}">
{#if $ae_ds_loc} {#if ae_ds_tmp}
{#if debug || $ae_loc.debug == 'debug'} {#if debug || $ae_loc.debug == 'debug'}
<pre> <pre>
id: {$ae_ds_loc.id}, id: {ae_ds_tmp.id},
code: {$ae_ds_loc.code}, code: {ae_ds_tmp.code},
type: {$ae_ds_loc.type}, type: {ae_ds_tmp.type},
for_type: {$ae_ds_loc.for_type}, for_type: {ae_ds_tmp.for_type},
for_id: {$ae_ds_loc.for_id}, for_id: {ae_ds_tmp.for_id},
access_read: {$ae_ds_loc.access_read}, access_read: {ae_ds_tmp.access_read},
access_write: {$ae_ds_loc.access_write}, access_write: {ae_ds_tmp.access_write},
access_delete: {$ae_ds_loc.access_delete}, access_delete: {ae_ds_tmp.access_delete},
name: {$ae_ds_loc.name}, name: {ae_ds_tmp.name},
html: {$ae_ds_loc.html}, html: {ae_ds_tmp.html},
json: {$ae_ds_loc.json}, json: {ae_ds_tmp.json},
md: {$ae_ds_loc.md}, md: {ae_ds_tmp.md},
text: {$ae_ds_loc.text}, text: {ae_ds_tmp.text},
updated_on: {$ae_ds_loc.updated_on}, updated_on: {ae_ds_tmp.updated_on},
</pre> </pre>
{/if} {/if}
@@ -503,7 +502,7 @@ async function handle_update__data_store({
<input <input
type="hidden" type="hidden"
name="ds_id_random" name="ds_id_random"
value={$ae_ds_loc.id} value={ae_ds_tmp.id}
/> />
{#if $ae_loc.trusted_access} {#if $ae_loc.trusted_access}
@@ -513,7 +512,7 @@ async function handle_update__data_store({
name="ds_use_account_id" name="ds_use_account_id"
class="checkbox" class="checkbox"
value="true" value="true"
checked={$ae_ds_loc.account_id ? true : false} checked={ae_ds_tmp.account_id ? true : false}
/> />
</label> </label>
{/if} {/if}
@@ -523,7 +522,7 @@ async function handle_update__data_store({
name="ds_account_id" name="ds_account_id"
class="input max-w-48 text-xs" class="input max-w-48 text-xs"
placeholder="Account ID" placeholder="Account ID"
value={$ae_ds_loc.account_id} value={ae_ds_tmp.account_id}
/> />
<input <input
@@ -531,7 +530,7 @@ async function handle_update__data_store({
name="ds_code" name="ds_code"
class="input text-xs" class="input text-xs"
placeholder="Data store code" placeholder="Data store code"
value={$ae_ds_loc.code} value={ae_ds_tmp.code}
required required
/> />
{/if} {/if}
@@ -541,7 +540,7 @@ async function handle_update__data_store({
name="ds_name" name="ds_name"
class="input text-xs" class="input text-xs"
placeholder="Data store name" placeholder="Data store name"
value={$ae_ds_loc.name} value={ae_ds_tmp.name}
required required
/> />
{/if} {/if}
@@ -551,7 +550,7 @@ async function handle_update__data_store({
name="ds_type" name="ds_type"
class="input max-w-48 text-xs" class="input max-w-48 text-xs"
placeholder="Data store type (html, json, md, sql, text)" placeholder="Data store type (html, json, md, sql, text)"
value={$ae_ds_loc.type} value={ae_ds_tmp.type}
required required
/> />
<input <input
@@ -559,58 +558,58 @@ async function handle_update__data_store({
name="ds_for_type" name="ds_for_type"
class="input max-w-48 text-xs" class="input max-w-48 text-xs"
placeholder="Data store For Type" placeholder="Data store For Type"
value={$ae_ds_loc.for_type} value={ae_ds_tmp.for_type}
/> />
<input <input
type="text" type="text"
name="ds_for_id" name="ds_for_id"
class="input max-w-48 text-xs" class="input max-w-48 text-xs"
placeholder="Data store For ID" placeholder="Data store For ID"
value={$ae_ds_loc.for_id} value={ae_ds_tmp.for_id}
/> />
<input <input
type="text" type="text"
name="ds_access_read" name="ds_access_read"
class="input max-w-48 text-xs" class="input max-w-48 text-xs"
placeholder="Access read" placeholder="Access read"
value={$ae_ds_loc.access_read} value={ae_ds_tmp.access_read}
/> />
<input <input
type="text" type="text"
name="ds_access_write" name="ds_access_write"
class="input max-w-48 text-xs" class="input max-w-48 text-xs"
placeholder="Access write" placeholder="Access write"
value={$ae_ds_loc.access_write} value={ae_ds_tmp.access_write}
/> />
<input <input
type="text" type="text"
name="ds_access_delete" name="ds_access_delete"
class="input max-w-48 text-xs" class="input max-w-48 text-xs"
placeholder="Access delete" placeholder="Access delete"
value={$ae_ds_loc.access_delete} value={ae_ds_tmp.access_delete}
/> />
{:else} {:else}
Code: {$ae_ds_loc.code} Code: {ae_ds_tmp.code}
<!-- Name: {$ae_ds_loc.name} --> <!-- Name: {ae_ds_tmp.name} -->
Type: {$ae_ds_loc.type} Type: {ae_ds_tmp.type}
{/if} {/if}
{#if $ae_ds_loc.type == 'html' || $ae_ds_loc.type == null} {#if ae_ds_tmp.type == 'html' || ae_ds_tmp.type == null}
<textarea <textarea
name="ds_value" name="ds_value"
class="textarea type_html font-mono text-sm" class="textarea type_html font-mono text-sm"
cols="75" cols="75"
rows="25" rows="25"
placeholder="Enter the HTML here" placeholder="Enter the HTML here"
>{$ae_ds_loc.type == 'html' && $ae_ds_loc.html ? $ae_ds_loc.html : ''}</textarea> >{ae_ds_tmp.type == 'html' && ae_ds_tmp.html ? ae_ds_tmp.html : ''}</textarea>
{:else if $ae_ds_loc.type == 'text'} {:else if ae_ds_tmp.type == 'text'}
<textarea <textarea
name="ds_value" name="ds_value"
class="textarea type_text" class="textarea type_text"
cols="70" cols="70"
rows="10" rows="10"
placeholder="Enter the text here" placeholder="Enter the text here"
>{$ae_ds_loc.type == 'text' ? $ae_ds_loc.text : ''}</textarea> >{ae_ds_tmp.type == 'text' ? ae_ds_tmp.text : ''}</textarea>
{/if} {/if}
<div class="flex gap-1 justify-center justify-evenly items-center p-1"> <div class="flex gap-1 justify-center justify-evenly items-center p-1">
@@ -690,20 +689,32 @@ async function handle_update__data_store({
<!-- {#if mode == 'view'} --> <!-- {#if mode == 'view'} -->
{#if !$ae_ds_loc.type && !$ae_ds_loc.html && !$ae_ds_loc.json && !$ae_ds_loc.md && !$ae_ds_loc.text} {#if !ae_ds_tmp.type && !ae_ds_tmp.html && !ae_ds_tmp.json && !ae_ds_tmp.md && !ae_ds_tmp.text}
<span class="variant-soft-warning">No data found! Is the data store correct or new?</span> {#if $ae_loc.administrator_access}
<span class="variant-soft-warning">No data found! Is the data store correct or new?</span>
{:else}
<!-- <span class="variant-soft">loading</span> -->
{/if}
{/if} {/if}
{#if $ae_ds_loc.type == 'html' && $ae_ds_loc.html} {#if ae_ds_tmp.type == 'html' && ae_ds_tmp.html}
{@html $ae_ds_loc.html} {@html ae_ds_tmp.html}
{:else if $ae_ds_loc.type == 'html'} {:else if ae_ds_tmp.type == 'html'}
<span class="variant-soft-warning">No HTML found! Is the data store type correct?</span> {#if $ae_loc.administrator_access}
<span class="variant-soft-warning">No HTML found! Is the data store type correct?</span>
{:else}
<!-- <span class="variant-soft">loading</span> -->
{/if}
{/if} {/if}
{#if $ae_ds_loc.type == 'text' && $ae_ds_loc.text} {#if ae_ds_tmp.type == 'text' && ae_ds_tmp.text}
{$ae_ds_loc.text} {ae_ds_tmp.text}
{:else if $ae_ds_loc.type == 'text'} {:else if ae_ds_tmp.type == 'text'}
<span class="variant-soft-warning">No text found! Is the data store type correct?</span> {#if $ae_loc.administrator_access}
<span class="variant-soft-warning">No text found! Is the data store type correct?</span>
{:else}
<!-- <span class="variant-soft">loading</span> -->
{/if}
{/if} {/if}
<button <button
@@ -716,7 +727,7 @@ async function handle_update__data_store({
show_edit = true; show_edit = true;
show_view = false; show_view = false;
}} }}
title="Double click to edit data store: {ds_code} with {$ae_ds_loc.account_id ? `account ID=${$ae_ds_loc.account_id}` : 'no account ID'}" title="Double click to edit data store: {ds_code} with {ae_ds_tmp.account_id ? `account ID=${ae_ds_tmp.account_id}` : 'no account ID'}"
> >
<span class="fas fa-edit mx-1"></span> <span class="fas fa-edit mx-1"></span>
Edit Edit