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

Trying to make the slightly newer event session search page load consistently.

Browse Source
This commit is contained in:
Scott Idem
2024-09-27 13:08:31 -04:00
parent 25a28d4ff6
commit 495dd0e6d9
12 changed files with 618 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/lib/ae_events_stores.ts
View File

@@ -99,6 +99,8 @@ let events_local_data_struct: key_val = {
// Event Presentation Launcher (and native Electron app)
'launcher': {
controller_group_code: 'ae_launcher',
qry_limit__sessions: 50,
qry_limit__presentations: 25,
qry_limit__presenters: 75,
@@ -115,6 +117,8 @@ let events_local_data_struct: key_val = {
show_content__presentation_code: true,
show_content__presenter_code: true,
show_section__controller: false,
datetime_format: 'datetime_12_long',
time_format: 'time_12_short',
time_hours: 12, // 12 or 24

19
src/lib/ae_stores.ts
View File

@@ -1,11 +1,12 @@
import { localStorageStore } from '@skeletonlabs/skeleton';
import { writable } from 'svelte/store';
import type { Writable } from 'svelte/store';
import { readable, writable } from 'svelte/store';
import type { Readable, 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);
const api_server_fqdn = PUBLIC_AE_API_SERVER; // 'api.oneskyit.com'
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}`;
@@ -255,6 +256,7 @@ export let ae_sess = writable(ae_app_session_data_struct);
// *** BEGIN *** Temporary API data. This should be stored to session storage.
export let ae_api_data_struct: key_val = {
'ver': '2024-08-11_11',
'fqdn': api_server_fqdn,
'base_url': api_base_url,
'base_url_bak': api_base_url_bak,
'api_secret_key': api_secret_key, // 'YOUR_API_SECRET_KEY',
@@ -338,3 +340,16 @@ export let slct = writable(slct_obj_template);
// Updated 2024-02-27
export let slct_trigger: any = writable(null);
// console.log(`AE Stores - Selected Trigger:`, slct_trigger);
/* *** BEGIN *** Create time variable */
// Updated 2020
export const time = readable(new Date(), function start(set) {
const interval = setInterval(() => {
set(new Date());
}, 1000);
return function stop() {
clearInterval(interval);
};
});

3
src/lib/ae_utils/ae_utils__datetime_format.ts
View File

@@ -118,6 +118,9 @@ export let iso_datetime_formatter = function iso_datetime_formatter(
datetime_string = dayjs(raw_datetime).format('HH:mm:ss');
break;
case 'time_long':
datetime_string = dayjs(raw_datetime).format('HH:mm:ss A');
break;
case 'time_12_long':
datetime_string = dayjs(raw_datetime).format('hh:mm:ss A');
break;
case 'time_short':

311
src/lib/element_websocket_v2.svelte Normal file
View File

@@ -0,0 +1,311 @@
<script lang="ts">
import { createEventDispatcher, onMount } from 'svelte';
export let ws_server = 'dev-api.oneskyit.com';
export let base_url = `wss://${ws_server}/ws`;
export let group_id = 'default';
export let client_id = Date.now();
export let cmd: null|string = null;
export let msg: null|string = null;
export let type: null|string = null;
export let trigger_send: any = null;
export let ws_conn_status = null;
// *** Set initial variables
const dispatch = createEventDispatcher();
// JSON formatted data
let ws_data = {
'client_id': null, // The device or browser ID if available.
// 'src': null, // Sending client
// 'account_id': null, // Essentially the person ID or user ID if available.
// 'dest': null, // Destination client
'target': 'echo', // echo, dm (direct), grp (group), all (broadcast)
'type': 'cmd', // msg, cmd, json, hello, bye
// 'grp': null, // Destination group
'msg': null, // Message string
'cmd': null, // Command string
// 'data': null,
// 'b64': null,
}
let ws_received_list_cmd: string[] = [];
let ws_received_list_other: string[] = [];
let ws_received_list_msg: string[] = [];
onMount(async () => {
console.log('** Component Mounted: ** Element Websocket v2');
});
function ws_connect_group_id({group_id, client_id}) {
console.log(`${base_url}/group/${group_id}/client/${client_id}`);
let ws_connection = new WebSocket(`${base_url}/group/${group_id}/client/${client_id}`);
ws_connection.onopen = function() {
console.log('WS: connected');
ws_conn_status = 'connected';
dispatch('ws_conn', {
'status': 'connected'
});
ws_connection.send(JSON.stringify({
client_id: client_id,
target: 'echo',
type: 'hello',
group_id: group_id,
msg: 'You are connected!'
}));
ws_connection.send(JSON.stringify({
client_id: client_id,
target: 'all',
type: 'hello',
group_id: group_id,
msg: `Client ${client_id} connected!`
}));
};
ws_connection.onmessage = function(event) {
console.log('WS: message received');
console.log(event);
let ws_recv_data = JSON.parse(event.data);
console.log(ws_recv_data);
if (ws_recv_data.type == 'cmd') {
console.log(`WS: Type CMD: ${ws_recv_data.cmd}`);
ws_received_list_cmd.push(ws_recv_data);
ws_received_list_cmd = ws_received_list_cmd; // trigger Svelte update
} else {
console.log('WS: Type other');
ws_received_list_other.push(ws_recv_data);
ws_received_list_other = ws_received_list_other; // trigger Svelte update
}
dispatch('ws_recv', {
// 'client_id': ws_data.client_id, // The device or browser ID if available.
'src': ws_recv_data.client_id, // The device or browser ID if available.
// 'account_id': ws_recv_data.account_id, // Essentially the person ID or user ID if available.
'dest': group_id, // Destination client
'target': ws_recv_data.target, // echo, dm (direct), grp (group), all (broadcast)
'type': ws_recv_data.type, // Message type (msg, cmd, json, hello, bye)
// 'grp': ws_recv_data.grp, // Destination group
'msg': ws_recv_data.msg, // Message string
'cmd': ws_recv_data.cmd, // Command string
});
};
ws_connection.onclose = function(event) {
console.log('WS: connection closed');
ws_connection.send(JSON.stringify({
client_id: client_id,
target: 'all',
type: 'hello',
group_id: group_id,
msg: `Client ${client_id} is disconnecting!`
}));
ws_conn_status = 'disconnected';
dispatch('ws_conn', {
'status': 'disconnected'
});
setTimeout(function() {
console.log('WS: Disconnected... Try again!');
ws_connect_group_id({group_id: group_id, client_id: client_id});
console.log('WS: Again done?');
}, 1000);
};
ws_connection.onerror = function(event) {
console.log('WS: connection error???');
ws_connection.send(JSON.stringify({
client_id: client_id,
target: 'all',
type: 'hello',
group_id: group_id,
msg: `Client ${client_id} is having trouble?!`
}));
};
// NOTE WARNING: Uncommenting this seems to break FastAPI somehow???
// NOTE: from FastAPI log: RuntimeError: Unexpected ASGI message 'websocket.send', after sending 'websocket.close'.
// ws_connection.onerror = function(err) {
// console.error('WS socket error: ', err.message, 'Closing socket');
// // ws_connection.close();
// };
return ws_connection;
}
// Start the WS function
// let ws_group = ws_connect_group_id({group_id: group_id, client_id: client_id});
let ws_group: any = null;
if (group_id) {
ws_group = ws_connect_group_id({group_id: group_id, client_id: client_id});
}
$: if (trigger_send && cmd) {
console.log('WS: Send triggered!');
console.log(trigger_send);
console.log(cmd);
trigger_send = null;
ws_data.target = 'group';
ws_data.type = 'cmd';
ws_data.cmd = cmd;
handle_send_ws_data();
}
function handle_send_ws_data() {
console.log(ws_data);
if (!ws_data) {
return false;
}
let ws_data_json_str = JSON.stringify(ws_data);
let resp = ws_group.send(ws_data_json_str);
console.log(resp);
dispatch('ws_sent', {
// 'client_id': ws_data.client_id, // The device or browser ID if available.
'src': ws_data.client_id, // The device or browser ID if available.
// 'account_id': ws_data.account_id, // Essentially the person ID or user ID if available.
'dest': group_id, // Destination client
'group_id': group_id,
'target': ws_data.target, // echo, dm (direct), grp (group), all (broadcast)
'type': ws_data.type, // Message type (msg, cmd, json, hello, bye)
// 'grp': ws_data.grp, // Destination group
'msg': ws_data.msg, // Message string
'cmd': ws_data.cmd, // Command string
});
// cmd = '';
msg = '';
}
</script>
<section class="ae_element__websocket container p-1 bg-pink-100 text-xs">
<header>
<h1>Websockets</h1>
</header>
<!-- <form on:submit|preventDefault={handle_send_message}>
<select bind:value={type}>
<option value="">None</option>
<option value="echo">Echo</option>
<option value="dm">Direct Message</option>
<option value="group">Group Message</option>
<option value="all">Broadcast to All</option>
<option value="cmd">Command</option>
</select>
<select bind:value={group_id}>
<option value="">None</option>
<option value="test_grp_123">123</option>
<option value="test_grp_999">999</option>
<option value="test_grp_poster">A Poster Group</option>
</select>
<input type="text" bind:value={message_text} placeholder="Your message"/>
<button>Send</button>
</form> -->
{#if 1==2}
<form on:submit|preventDefault={handle_send_ws_data}>
<!-- <select bind:value={type}>
<option value="">None</option>
<option value="echo">Echo</option>
<option value="dm">Direct Message</option>
<option value="group">Group Message</option>
<option value="all">Broadcast to All</option>
<option value="cmd">Command</option>
</select> -->
<!-- <select bind:value={group_id}>
<option value="">None</option>
<option value="test_grp_123">123</option>
<option value="test_grp_999">999</option>
<option value="test_grp_poster">A Poster Group</option>
</select> -->
<!-- <input type="text" bind:value={dm_client_id} placeholder="Direct message client ID"/> -->
<input type="text" bind:value={ws_data.cmd} placeholder="Your command"/>
<input type="text" bind:value={ws_data.msg} placeholder="Your message"/>
<button>Send Example Group</button>
</form>
{/if}
<!-- <pre>
ae_load:event_session=jEG9APQRUs8 (Poster Session #3: Work Never Ends - Pythagoras)
ae_open:event_file=CHqU5sW7xbc (jpg)
ae_open:event_file=Kljq0uiTlXt (video)
</pre> -->
<!-- <hr> -->
<h2>Messages</h2>
<ul class='messages'>
{#each ws_received_list_other as msg_entry}
<li>
[{(msg_entry.group_id||'No Group ID')}]
{(msg_entry.client_id||'No Client ID')}
&mdash;
{(msg_entry.target||'No Target')}
&mdash;
{(msg_entry.type||'No Type')}: {msg_entry.msg}
<!-- <br>{JSON.stringify(msg_entry)} -->
</li>
{/each}
</ul>
<hr>
<h2>Commands</h2>
<ul class='commands'>
{#each ws_received_list_cmd as cmd_entry}
<li>
[{(cmd_entry.group_id||'No Group ID')}]
{(cmd_entry.client_id||'No Client ID')}
&mdash;
{(cmd_entry.target||'No Target')}
&mdash;
{(cmd_entry.type||'No Type')}: {cmd_entry.cmd}
</li>
{/each}
</ul>
</section>
<style>
/* .websocket_element {
background-color: white;
border-top: dashed medium gray;
color: gray;
font-size: .7em;
}
.websocket_element header {
font-size: .7em;
}
.websocket_element h2 {
font-size: .9em;
} */
</style>