First version of the technical help notification is ready for IDAA.
This commit is contained in:
Scott Idem
@@ -55,6 +55,7 @@ if (log_lvl) {
|
||||
}
|
||||
|
||||
let help_tech_text: string = $state('');
|
||||
let hide_additional_info: boolean = $state(true);
|
||||
|
||||
function preventDefault(fn) {
|
||||
return function (event) {
|
||||
@@ -102,12 +103,13 @@ function send_help_tech_email() {
|
||||
api.send_email({
|
||||
api_cfg: $ae_api,
|
||||
from_email: $ae_loc.site_cfg_json?.noreply_email ?? 'noreply+tech@oneskyit.com',
|
||||
from_name: $ae_loc.site_cfg_json?.noreply_name ?? 'Tech NoReply',
|
||||
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: 'scott+tech@oneskyit.com',
|
||||
to_email: 'it+tech@oneskyit.com',
|
||||
// to_email: $idaa_slct.post_obj.email,
|
||||
// to_email: 'scott+idaabb@oneskyit.com',
|
||||
to_name: $ae_loc.site_cfg_json?.admin_name ?? 'Tech Admin',
|
||||
// to_name: $ae_loc.site_cfg_json?.admin_name ?? 'IT Tech',
|
||||
to_name: 'IT Tech',
|
||||
// to_name: $idaa_slct.post_obj.full_name ?? 'IDAA BB Poster',
|
||||
subject: subject,
|
||||
body_html: body_html,
|
||||
@@ -121,18 +123,23 @@ function send_help_tech_email() {
|
||||
<div
|
||||
class="
|
||||
m-2
|
||||
mx-auto
|
||||
p-2
|
||||
flex flex-row
|
||||
items-center justify-center
|
||||
preset-tonal-surface
|
||||
rounded-lg shadow-2xl
|
||||
border-2
|
||||
border-blue-400 dark:border-blue-600
|
||||
shadow-blue-200 dark:shadow-blue-800
|
||||
bg-blue-100 dark:bg-blue-900
|
||||
border-2 border-transparent
|
||||
transition-all
|
||||
{e_class}
|
||||
"
|
||||
class:w-xl={$ae_sess.show_help_tech}
|
||||
class:w-fit={!$ae_sess.show_help_tech}
|
||||
class:hover:border-blue-400={$ae_sess.show_help_tech}
|
||||
class:hover:dark:border-blue-600={$ae_sess.show_help_tech}
|
||||
class:hover:shadow-blue-200={$ae_sess.show_help_tech}
|
||||
class:hover:dark:shadow-blue-800={$ae_sess.show_help_tech}
|
||||
class:bg-blue-100={$ae_sess.show_help_tech}
|
||||
class:dark:bg-blue-900={$ae_sess.show_help_tech}
|
||||
>
|
||||
|
||||
|
||||
@@ -144,114 +151,204 @@ function send_help_tech_email() {
|
||||
transition-all
|
||||
"
|
||||
>
|
||||
{#if e_success}
|
||||
<span class="text-green-500">
|
||||
<BadgeQuestionMark class="inline-block mr-2" />
|
||||
Help Requested
|
||||
</span>
|
||||
{:else}
|
||||
<span class="text-gray-800 font-semibold">
|
||||
<BadgeQuestionMark class="inline-block mr-2" />
|
||||
<!-- Request Technical Help -->
|
||||
Notify Technical Support
|
||||
</span>
|
||||
<!-- <span class="text-gray-500">
|
||||
Send your help request with or without a description.
|
||||
</span> -->
|
||||
{/if}
|
||||
|
||||
<form
|
||||
class="
|
||||
m-1
|
||||
flex flex-col gap-1
|
||||
items-center justify-center
|
||||
w-md max-w-lg
|
||||
"
|
||||
onsubmit={preventDefault(() => {
|
||||
// Do stuff...
|
||||
send_help_tech_email();
|
||||
|
||||
// Hide the request form
|
||||
$ae_sess.show_help_tech = false;
|
||||
})}
|
||||
>
|
||||
<textarea
|
||||
class="w-full max-w-lg h-24 p-2 border border-gray-300 rounded"
|
||||
placeholder="Send with or without a description...."
|
||||
bind:value={help_tech_text}
|
||||
></textarea>
|
||||
<button
|
||||
type="submit"
|
||||
<div
|
||||
class="
|
||||
btn btn-lg
|
||||
m-1
|
||||
preset-tonal-success
|
||||
preset-outlined-warning-600-400
|
||||
transition-all
|
||||
{btn_class}
|
||||
d-flex align-items-center justify-content-between
|
||||
flex flex-row gap-1 items-center justify-between
|
||||
w-full
|
||||
"
|
||||
title={btn_title}
|
||||
>
|
||||
{#if !hide_icon}
|
||||
<!-- <BadgeQuestionMark class="inline-block mr-2" /> -->
|
||||
<LifeBuoy class="inline-block m-1" />
|
||||
{/if}
|
||||
<h3
|
||||
class="
|
||||
|
||||
{#if !help_tech_text}
|
||||
Notify Without Description
|
||||
{:else}
|
||||
Send Notification
|
||||
{/if}
|
||||
</button>
|
||||
text-base font-semibold text-gray-800
|
||||
w-fit
|
||||
"
|
||||
>
|
||||
{#if e_success}
|
||||
<span class="text-green-500">
|
||||
<BadgeQuestionMark class="inline-block mr-2" />
|
||||
Help Requested
|
||||
</span>
|
||||
{:else}
|
||||
<span class="text-gray-800 font-semibold">
|
||||
<BadgeQuestionMark class="inline-block mr-2" />
|
||||
<!-- Request Technical Help -->
|
||||
Notify Technical Support
|
||||
</span>
|
||||
<!-- <span class="text-gray-500">
|
||||
Send your help request with or without a description.
|
||||
</span> -->
|
||||
{/if}
|
||||
|
||||
</form>
|
||||
<!-- Cancel button -->
|
||||
</h3>
|
||||
<button
|
||||
onclick={() => ($ae_sess.show_help_tech = false)}
|
||||
class="
|
||||
btn btn-base preset-tonal-tertiary
|
||||
{btn_class}
|
||||
"
|
||||
title="Close Help Request Form"
|
||||
>
|
||||
<span class="fas fa-times"></span>
|
||||
<span class="sr-only">Close</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p class="text-sm text-gray-500 text-center">
|
||||
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.
|
||||
</p>
|
||||
<form
|
||||
class="
|
||||
m-1
|
||||
flex flex-col gap-1
|
||||
items-center justify-center
|
||||
w-md max-w-lg
|
||||
"
|
||||
onsubmit={preventDefault(() => {
|
||||
// Do stuff...
|
||||
send_help_tech_email();
|
||||
|
||||
<div>
|
||||
<h2 class="text-lg font-semibold text-gray-800">
|
||||
Additional Information Included
|
||||
</h2>
|
||||
<ul class="list-disc list-inside text-gray-800 text-sm">
|
||||
<li>Datetime = {new Date().toISOString()}</li>
|
||||
<li>URL: {window.location.href}</li>
|
||||
<li>Browser = {navigator.userAgent}</li>
|
||||
<li>Viewport Size = {window.innerWidth} x {window.innerHeight}</li>
|
||||
<li>Screen Resolution = {window.screen.width} x {window.screen.height}</li>
|
||||
<li>In iframe = {$ae_loc?.iframe}</li>
|
||||
<li>Theme Mode = {$ae_loc?.theme_mode}</li>
|
||||
<li>Theme Name = {$ae_loc?.theme_name}</li>
|
||||
<li>Account ID = {$slct.account_id}</li>
|
||||
<li>Access Type = {$ae_loc?.access_type}</li>
|
||||
{#if $ae_loc?.person_id}
|
||||
<li>person_id = {$ae_loc?.person_id}</li>
|
||||
<li>full_name = {$ae_loc?.full_name}</li>
|
||||
{/if}
|
||||
{#if $ae_loc?.user_id}
|
||||
<li>user_id = {$ae_loc?.user_id}</li>
|
||||
<li>username = {$ae_loc?.username}</li>
|
||||
<li>email = {$ae_loc?.email}</li>
|
||||
{/if}
|
||||
<li>API Base URL: {$ae_api.base_url}</li>
|
||||
// Hide the request form
|
||||
$ae_sess.show_help_tech = false;
|
||||
})}
|
||||
>
|
||||
<textarea
|
||||
class="w-full max-w-lg h-24 p-2 border border-gray-300 rounded"
|
||||
placeholder="Send with or without a description...."
|
||||
bind:value={help_tech_text}
|
||||
></textarea>
|
||||
<button
|
||||
type="submit"
|
||||
class="
|
||||
btn btn-lg
|
||||
m-1
|
||||
preset-tonal-warning
|
||||
hover:preset-tonal-success
|
||||
preset-outlined-warning-600-400
|
||||
transition-all
|
||||
{btn_class}
|
||||
"
|
||||
title={btn_title}
|
||||
>
|
||||
{#if !hide_icon}
|
||||
<!-- <BadgeQuestionMark class="inline-block mr-2" /> -->
|
||||
<LifeBuoy class="inline-block m-1" />
|
||||
{/if}
|
||||
|
||||
{#if !help_tech_text}
|
||||
Notify Without Description
|
||||
{:else}
|
||||
Send Notification
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
</form>
|
||||
|
||||
<div
|
||||
class="
|
||||
text-sm text-gray-500 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.
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="border border-gray-300 rounded p-2">
|
||||
<div
|
||||
class="
|
||||
d-flex align-items-center justify-content-between
|
||||
flex flex-row gap-1 items-center justify-between
|
||||
w-full
|
||||
"
|
||||
>
|
||||
<h4
|
||||
class="
|
||||
|
||||
text-base font-semibold text-gray-800
|
||||
flex flex-row gap-1 items-center justify-center
|
||||
"
|
||||
>
|
||||
Additional Information Included
|
||||
|
||||
|
||||
</h4>
|
||||
<!-- Button to expand and show additional information -->
|
||||
<button
|
||||
class="
|
||||
btn btn-sm preset-tonal-tertiary
|
||||
{btn_class}
|
||||
"
|
||||
onclick={() => (hide_additional_info = !hide_additional_info)}
|
||||
title="Toggle additional information"
|
||||
>
|
||||
<span>
|
||||
{#if hide_additional_info}
|
||||
<span class="fas fa-caret-right"></span>
|
||||
Show
|
||||
{:else}
|
||||
<span class="fas fa-caret-down"></span>
|
||||
Hide
|
||||
{/if}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<ul
|
||||
class="list-disc list-inside text-gray-800 text-sm"
|
||||
class:hidden={hide_additional_info}
|
||||
>
|
||||
<li><span class="text-sm text-gray-500">Datetime =</span> {new Date().toISOString()}</li>
|
||||
<li><span class="text-sm text-gray-500">URL =</span> {window.location.href}</li>
|
||||
<li><span class="text-sm text-gray-500">Browser =</span> {navigator.userAgent}</li>
|
||||
<li><span class="text-sm text-gray-500">Viewport Size =</span> {window.innerWidth} x {window.innerHeight}</li>
|
||||
<li><span class="text-sm text-gray-500">Screen Resolution =</span> {window.screen.width} x {window.screen.height}</li>
|
||||
<li><span class="text-sm text-gray-500">In iframe =</span> {$ae_loc?.iframe}</li>
|
||||
<li><span class="text-sm text-gray-500">Theme Mode =</span> {$ae_loc?.theme_mode}</li>
|
||||
<li><span class="text-sm text-gray-500">Theme Name =</span> {$ae_loc?.theme_name}</li>
|
||||
<li><span class="text-sm text-gray-500">Account ID =</span> {$slct.account_id}</li>
|
||||
<li><span class="text-sm text-gray-500">Access Type =</span> {$ae_loc?.access_type}</li>
|
||||
{#if $ae_loc?.person_id}
|
||||
<li><span class="text-sm text-gray-500">person_id =</span> {$ae_loc?.person_id}</li>
|
||||
<li><span class="text-sm text-gray-500">full_name =</span> {$ae_loc?.full_name}</li>
|
||||
{/if}
|
||||
{#if $ae_loc?.user_id}
|
||||
<li><span class="text-sm text-gray-500">user_id =</span> {$ae_loc?.user_id}</li>
|
||||
<li><span class="text-sm text-gray-500">username =</span> {$ae_loc?.username}</li>
|
||||
<li><span class="text-sm text-gray-500">email =</span> {$ae_loc?.email}</li>
|
||||
{/if}
|
||||
<li><span class="text-sm text-gray-500">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>
|
||||
<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">{key} =</span> {value ?? '-- not set --'}</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
|
||||
{#if additional_kv && Object.keys(additional_kv).length > 0}
|
||||
<h2 class="text-lg font-semibold text-gray-800">Additional Component Info:</h2>
|
||||
<ul class="list-disc list-inside text-gray-800 text-sm">
|
||||
{#each Object.entries(additional_kv) as [key, value]}
|
||||
<li>{key} = {value}</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
<div class="text-sm text-gray-500 text-center italic">
|
||||
This information will be included in the help request to assist technical support in diagnosing the issue.
|
||||
</div>
|
||||
|
||||
</ul>
|
||||
<p class="text-gray-600 text-sm mt-2">
|
||||
This information will be included in the help request to assist technical support in diagnosing the issue.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Cancel button -->
|
||||
<button
|
||||
onclick={() => ($ae_sess.show_help_tech = false)}
|
||||
class="
|
||||
btn btn-sm preset-tonal-tertiary
|
||||
m-1
|
||||
{btn_class}
|
||||
"
|
||||
title="Close Help Request Form"
|
||||
>
|
||||
<span class="fas fa-times"></span>
|
||||
<span class="">Cancel</span>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
{:else}
|
||||
|
||||
@@ -259,7 +356,6 @@ function send_help_tech_email() {
|
||||
onclick={() => ($ae_sess.show_help_tech = true)}
|
||||
class="
|
||||
btn btn-sm
|
||||
m-1
|
||||
preset-outlined-warning-600-400
|
||||
transition-all
|
||||
{btn_class}
|
||||
@@ -267,9 +363,11 @@ function send_help_tech_email() {
|
||||
title={btn_title}
|
||||
>
|
||||
{#if !hide_icon}
|
||||
<BadgeQuestionMark class="inline-block mr-2" />
|
||||
<BadgeQuestionMark class="inline-block m-0.5" />
|
||||
{/if}
|
||||
<span class="hidden">
|
||||
{btn_text}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
{/if}
|
||||
|
||||
@@ -194,8 +194,10 @@ if (browser) {
|
||||
|
||||
{#if (browser && ($ae_loc.trusted_access || ($ae_loc.authenticated_access && $idaa_loc.novi_uuid)))}
|
||||
|
||||
<!-- e_class="w-xl" -->
|
||||
<!-- e_class="float-right" -->
|
||||
<Help_tech
|
||||
e_class="w-xl"
|
||||
|
||||
btn_class="novi_btn"
|
||||
additional_kv={{
|
||||
'novi_uuid': $idaa_loc.novi_uuid,
|
||||
|
||||
Reference in New Issue
Block a user