Making things look nicer. Better formatting.

This commit is contained in:
Scott Idem
2026-02-06 13:49:11 -05:00
parent 49e1d57f8f
commit 07dd6c18a1
3 changed files with 97 additions and 47 deletions

View File

@@ -3,7 +3,7 @@
"tabWidth": 4,
"singleQuote": true,
"trailingComma": "none",
"printWidth": 100,
"printWidth": 80,
"plugins": ["prettier-plugin-svelte"],
"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
}

View File

@@ -18,12 +18,12 @@
}
let {
log_lvl = 0,
log_lvl = $bindable(0),
additional_kv = $bindable({}),
e_success = $bindable(false),
e_class = '',
e_title = 'Technical Help',
e_text = 'Request technical help for this application.',
// e_title = 'Technical Help',
// e_text = 'Request technical help for this application.',
e_class_h1 = $bindable(''),
e_class_h2 = $bindable(''),
e_class_form_hidden = $bindable(''),
@@ -53,8 +53,8 @@
// Mail, MailCheck,
// Menu,
RefreshCw,
RefreshCcw,
RefreshCcwDot,
// RefreshCcw,
// RefreshCcwDot,
// ShieldEllipsis, ShieldMinus, ShieldPlus, ShieldUser,
SquareX
// User, UserCheck
@@ -81,7 +81,7 @@
let help_tech_text: string = $state('');
let hide_additional_info: boolean = $state(true);
function preventDefault<T extends Event>(fn: (event: T) => void) {
function prevent_default<T extends Event>(fn: (event: T) => void) {
return function (event: T) {
event.preventDefault();
fn(event);
@@ -125,7 +125,9 @@
api.send_email({
api_cfg: $ae_api,
from_email: $ae_loc.site_cfg_json?.noreply_email ?? 'noreply+tech@oneskyit.com',
from_email:
$ae_loc.site_cfg_json?.noreply_email ??
'noreply+tech@oneskyit.com',
from_name: $ae_loc.site_cfg_json?.noreply_name ?? 'IT NoReply',
// to_email: $ae_loc.site_cfg_json?.admin_email ?? 'admin+tech@oneskyit.com', // 'scott+idaabb@oneskyit.com',
to_email: 'it+tech@oneskyit.com',
@@ -151,7 +153,7 @@ class:to-90%={$ae_sess.show_help_tech} -->
flex flex-row
items-center justify-center
rounded-lg shadow-2xl
border-1 border-transparent
border border-transparent
transition-all
{e_class}
{!$ae_sess.show_help_tech ? e_class_form_hidden : e_class_form_showing}
@@ -198,12 +200,16 @@ class:to-90%={$ae_sess.show_help_tech} -->
"
>
{#if e_success}
<span class="text-lg text-green-800 dark:text-green-200 font-semibold">
<span
class="text-lg text-green-800 dark:text-green-200 font-semibold"
>
<BadgeQuestionMark class="inline-block mr-2" />
Help Requested
</span>
{:else}
<span class="text-lg text-gray-800 dark:text-gray-200 font-semibold">
<span
class="text-lg text-gray-800 dark:text-gray-200 font-semibold"
>
<BadgeQuestionMark class="inline-block mr-2" />
<!-- Request Technical Help -->
Notify Technical Support
@@ -241,7 +247,7 @@ class:to-90%={$ae_sess.show_help_tech} -->
items-center justify-center
w-md max-w-lg
"
onsubmit={preventDefault(() => {
onsubmit={prevent_default(() => {
// Do stuff...
send_help_tech_email();
@@ -298,8 +304,9 @@ class:to-90%={$ae_sess.show_help_tech} -->
text-sm text-gray-700 dark:text-gray-300 text-center italic
"
>
This is intended for technical issues only. Please contact your organization's staff
if you have a question about your membership, recorded content, meetings, or posts.
This is intended for technical issues only. Please contact your
organization's staff if you have a question about your
membership, recorded content, meetings, or posts.
</div>
<div
@@ -324,7 +331,9 @@ class:to-90%={$ae_sess.show_help_tech} -->
{e_class_h2}
"
>
<span class="text-base font-semibold text-gray-800 dark:text-gray-200">
<span
class="text-base font-semibold text-gray-800 dark:text-gray-200"
>
Additional Information Included
</span>
</h2>
@@ -335,7 +344,8 @@ class:to-90%={$ae_sess.show_help_tech} -->
btn btn-sm preset-tonal-tertiary
{btn_class}
"
onclick={() => (hide_additional_info = !hide_additional_info)}
onclick={() =>
(hide_additional_info = !hide_additional_info)}
title="Toggle additional information"
>
<span>
@@ -356,19 +366,26 @@ class:to-90%={$ae_sess.show_help_tech} -->
class:hidden={hide_additional_info}
>
<li>
<span class="text-sm text-gray-500 dark:text-gray-400">Datetime =</span>
<span class="text-sm text-gray-500 dark:text-gray-400"
>Datetime =</span
>
{new Date().toISOString()}
</li>
<li>
<span class="text-sm text-gray-500 dark:text-gray-400">URL =</span>
<span class="text-sm text-gray-500 dark:text-gray-400"
>URL =</span
>
{window.location.href}
</li>
<li>
<span class="text-sm text-gray-500 dark:text-gray-400">Browser =</span>
<span class="text-sm text-gray-500 dark:text-gray-400"
>Browser =</span
>
{navigator.userAgent}
</li>
<li>
<span class="text-sm text-gray-500 dark:text-gray-400">Viewport Size =</span
<span class="text-sm text-gray-500 dark:text-gray-400"
>Viewport Size =</span
>
{window.innerWidth} x {window.innerHeight}
</li>
@@ -379,66 +396,97 @@ class:to-90%={$ae_sess.show_help_tech} -->
{window.screen.width} x {window.screen.height}
</li>
<li>
<span class="text-sm text-gray-500 dark:text-gray-400">Dark mode =</span>
{window?.matchMedia?.('(prefers-color-scheme:dark)')?.matches ?? false}
<span class="text-sm text-gray-500 dark:text-gray-400"
>Dark mode =</span
>
{window?.matchMedia?.('(prefers-color-scheme:dark)')
?.matches ?? false}
</li>
<li>
<span class="text-sm text-gray-500 dark:text-gray-400">In iframe =</span>
<span class="text-sm text-gray-500 dark:text-gray-400"
>In iframe =</span
>
{$ae_loc?.iframe}
</li>
<li>
<span class="text-sm text-gray-500 dark:text-gray-400">Theme Mode =</span>
<span class="text-sm text-gray-500 dark:text-gray-400"
>Theme Mode =</span
>
{$ae_loc?.theme_mode}
</li>
<li>
<span class="text-sm text-gray-500 dark:text-gray-400">Theme Name =</span>
<span class="text-sm text-gray-500 dark:text-gray-400"
>Theme Name =</span
>
{$ae_loc?.theme_name}
</li>
<li>
<span class="text-sm text-gray-500 dark:text-gray-400">Account ID =</span>
<span class="text-sm text-gray-500 dark:text-gray-400"
>Account ID =</span
>
{$slct.account_id}
</li>
<li>
<span class="text-sm text-gray-500 dark:text-gray-400">Access Type =</span>
<span class="text-sm text-gray-500 dark:text-gray-400"
>Access Type =</span
>
{$ae_loc?.access_type}
</li>
{#if $ae_loc?.person_id}
<li>
<span class="text-sm text-gray-500 dark:text-gray-400">person_id =</span
<span
class="text-sm text-gray-500 dark:text-gray-400"
>person_id =</span
>
{$ae_loc?.person_id}
</li>
<li>
<span class="text-sm text-gray-500 dark:text-gray-400">full_name =</span
<span
class="text-sm text-gray-500 dark:text-gray-400"
>full_name =</span
>
{$ae_loc?.full_name}
</li>
{/if}
{#if $ae_loc?.user_id}
<li>
<span class="text-sm text-gray-500 dark:text-gray-400">user_id =</span>
<span
class="text-sm text-gray-500 dark:text-gray-400"
>user_id =</span
>
{$ae_loc?.user_id}
</li>
<li>
<span class="text-sm text-gray-500 dark:text-gray-400">username =</span>
<span
class="text-sm text-gray-500 dark:text-gray-400"
>username =</span
>
{$ae_loc?.username}
</li>
<li>
<span class="text-sm text-gray-500 dark:text-gray-400">email =</span>
<span
class="text-sm text-gray-500 dark:text-gray-400"
>email =</span
>
{$ae_loc?.email}
</li>
{/if}
<li>
<span class="text-sm text-gray-500 dark:text-gray-400">API Base URL =</span>
<span class="text-sm text-gray-500 dark:text-gray-400"
>API Base URL =</span
>
{$ae_api.base_url}
</li>
{#if additional_kv && Object.keys(additional_kv).length > 0}
<h2 class="text-base font-semibold text-gray-800">Component Info:</h2>
<h2 class="text-base font-semibold text-gray-800">
Component Info:
</h2>
<ul class="list-disc list-inside text-gray-800 text-sm">
{#each Object.entries(additional_kv) as [key, value]}
<li>
<span class="text-sm text-gray-500 dark:text-gray-400"
<span
class="text-sm text-gray-500 dark:text-gray-400"
>{key} =</span
>
{value ?? '-- not set --'}
@@ -447,9 +495,11 @@ class:to-90%={$ae_sess.show_help_tech} -->
</ul>
{/if}
</ul>
<div class="text-sm text-gray-700 dark:text-gray-300 text-center italic">
This information will be included in the help request to assist technical
support in diagnosing the issue.
<div
class="text-sm text-gray-700 dark:text-gray-300 text-center italic"
>
This information will be included in the help request to
assist technical support in diagnosing the issue.
</div>
</div>

View File

@@ -2,18 +2,18 @@
interface Props {
log_lvl?: number;
// export let lq__event_obj: any;
lq__event_presenter_obj: any; // This is the currently selected presenter.
// lq__event_presenter_obj: any; // This is the currently selected presenter.
lq__event_session_obj: any;
// );
lq__auth__event_presenter_obj: any;
// lq__auth__event_presenter_obj: any;
lq__event_presentation_obj_li: any;
}
let {
log_lvl = $bindable(0),
lq__event_presenter_obj,
// lq__event_presenter_obj,
lq__event_session_obj,
lq__auth__event_presenter_obj,
// lq__auth__event_presenter_obj,
lq__event_presentation_obj_li
}: Props = $props();
@@ -42,18 +42,18 @@
import {
ae_snip,
ae_loc,
ae_sess,
// ae_sess,
ae_api,
ae_trig,
// ae_trig,
slct,
slct_trigger
// slct_trigger
} from '$lib/stores/ae_stores';
import {
events_loc,
events_sess,
events_slct,
events_trigger,
events_trig_kv
// events_trigger,
// events_trig_kv
} from '$lib/stores/ae_events_stores';
import { events_func } from '$lib/ae_events_functions';