Working on adding/updating licenses

src/routes/events_leads/exhibit/[slug]/+page.svelte

@@ -152,12 +152,54 @@ async function handle_submit_form(event) {
     // Data out
     let exhibit_do: key_val = {};
 
-    let exhibit_do__license_li_json: key_val = {};
+    // let exhibit_do__license_li_json: key_val = {};
     // example: {"scott.idem@oneskyit.com": {"passcode": "12345", "updated_on": "2024-03-04T15:29:59"}, "test+holly@oneskyit.com": {"passcode": "12345", "updated_on": "2024-03-13T15:20:59"}}
-    if (typeof exhibit_di.passcode !== 'undefined') {
+
-        exhibit_do__license_li_json['passcode'] = exhibit_di.passcode;
+    let exhibit_do__license_li_json: key_val[] = [];
+    if (typeof exhibit_di.license_max !== 'undefined') {
+        exhibit_do['license_max'] = exhibit_di.license_max;
+
+        // Loop through the form data licenses up to the license max and create the license list JSON object. The license related fields are prefixed with "license_". This should be pushed to the exhibit_do__license_li_json list.
+        // for (let i = 0; i < exhibit_di.license_max; i++) {
+        for (let i = 0; i < (exhibit_di.license_max && 10); i++) {
+            // let license_key = exhibit_di[`license_${i}`];
+            let license_email = exhibit_di[`license_${i}_email`];
+            let license_full_name = exhibit_di[`license_${i}_full_name`];
+            let license_passcode = exhibit_di[`license_${i}_passcode`];
+            if (!license_passcode) {
+                // Generate a random 8 character passcode using a mix of lowercase letters and numbers.
+                license_passcode = Math.random().toString(36).substring(2, 10);
             }
 
+            // if (license_key && license_email && license_full_name && license_passcode) {
+            //     exhibit_do__license_li_json.push({
+            //         [license_key]: {
+            //             "email": license_email,
+            //             "full_name": license_full_name,
+            //             "passcode": license_passcode,
+            //             'updated_on': new Date().toISOString()
+            //         }
+            //     });
+            // }
+
+            if (license_email && license_full_name && license_passcode) {
+                exhibit_do__license_li_json.push({
+                    "email": license_email,
+                    "full_name": license_full_name,
+                    "passcode": license_passcode,
+                    "session_count": 0, // Max 3 browser sessions?
+                    'updated_on': new Date().toISOString()
+                });
+            }
+        }
+
+
+    }
+
+    // if (typeof exhibit_di.license_1 !== 'undefined' && typeof exhibit_di.license_1_passcode !== 'undefined') {
+    //     exhibit_do__license_li_json['passcode'] = exhibit_di.passcode;
+    // }
+
     exhibit_do['license_li_json'] = exhibit_do__license_li_json;
 
     console.log('exhibit_do:', exhibit_do);
@@ -284,8 +326,24 @@ function send_init_confirm_email({to_email}) {
 
 <!-- {$event_exhibit_obj?.license_li_json} -->
 
-{#if $event_exhibit_obj?.license_li_json}
+{#if $event_exhibit_obj?.license_li_json.length < $event_exhibit_obj?.license_max}
+<button
+    class="btn variant-soft-primary w-96"
+    on:click={() => {
+        let tmp_obj = $event_exhibit_obj;
+        tmp_obj.license_li_json.push({});
+        console.log('Add License:', tmp_obj);
+        db_events.exhibits.put(tmp_obj);
+    }}
+    >
+    <span class="fas fa-edit mx-1"></span>
+    Add License
+</button>
+{:else}
+No more!
+{/if}
 <!-- Loop through the key value pairs. Each license key has a passcode, updated_on, etc -->
+{#if $event_exhibit_obj?.license_max }
 <h2 class="h3">License List (max {$event_exhibit_obj?.license_max})</h2>
 <section class="ae_license_list">
 <form
@@ -295,6 +353,9 @@ function send_init_confirm_email({to_email}) {
     }}
     class="flex flex-row items-center space-x-2 border border-ae-3 p-2 m-2"
     >
+
+<input type="hidden" name="license_max" value={$event_exhibit_obj?.license_max} />
+
 <table class="">
     <thead>
         <tr>
@@ -319,10 +380,23 @@ function send_init_confirm_email({to_email}) {
 <!-- example: {"scott.idem@oneskyit.com": {"passcode": "12345", "updated_on": "2024-03-04T15:29:59"}, "test+holly@oneskyit.com": {"passcode": "12345", "updated_on": "2024-03-13T15:20:59"}} -->
 <!-- example: {} -->
 
-{#each Object.keys($event_exhibit_obj?.license_li_json || {}).slice(0, $event_exhibit_obj?.license_max) as license_key}
+<!-- {#each Object.keys($event_exhibit_obj?.license_li_json || {}).slice(0, $event_exhibit_obj?.license_max) as key} -->
+{#each $event_exhibit_obj?.license_li_json as license, key}
     <tr>
         <!-- Show the current license list information. -->
         <td>
+
+            <input
+                type="hidden"
+                name={`license_${key}`}
+                required
+                value={key}
+                placeholder="Key"
+                min="1"
+                class="input text-sm max-w-20 font-mono"
+                />
+
+            {#if key < $event_exhibit_obj?.license_max}
             <!-- Edit the values and save the new license list information. -->
             <!-- Button to send an email with the login link -->
             <div class="btn-group text-sm">
@@ -331,7 +405,7 @@ function send_init_confirm_email({to_email}) {
                     on:click={() => {
                         console.log('Send Email');
                         // Send an email with the login link
-                        send_init_confirm_email({ to_email: license_key });
+                        send_init_confirm_email({ to_email: license.email });
                     }}
                     class="btn btn-sm text-sm variant-soft-primary"
                 >
@@ -348,18 +422,54 @@ function send_init_confirm_email({to_email}) {
                     Copy
                 </button>
             </div>
+            {:else}
+            <div class="variant-soft-warning">
+                <span class="fas fa-lock mx-1"></span>
+                Disabled license
+            </div>
+            {/if}
         </td>
         <td>
-            <input type="email" value={license_key ?? ''} name="license_key" placeholder="Valid email" required class="input text-sm max-w-xs" />
+            <!-- <input type="email" value={key ?? ''} name="license_key" placeholder="Valid email" required class="input text-sm max-w-xs" /> -->
+            <input
+                type="text"
+                name={`license_${key}_email`}
+                required
+                value={license.email ?? ''}
+                placeholder="Valid email"
+                minlength="5"
+                class="input text-sm max-w-xs font-mono"
+                />
+        </td>
+
+        <td>
+            <input
+                type="text"
+                name={`license_${key}_full_name`}
+                value={license.full_name ?? ''}
+                placeholder="Full Name"
+                required
+                class="input text-sm max-w-40 font-mono"
+                minlength="2"
+            />
         </td>
         <td>
-            <input type="text" value={$event_exhibit_obj.license_li_json[license_key].full_name ?? ''} name="full_name" placeholder="Full Name" required class="input text-sm max-w-40" minlength="2" />
+            <input
+                type="text"
+                name={`license_${key}_passcode`}
+                value={license.passcode ?? '987654'}
+                placeholder="Passcode"
+                disabled={key >= $event_exhibit_obj?.license_max}
+                required
+                class="input text-sm max-w-20 font-mono"
+                minlength="5"
+            />
         </td>
         <td>
-            <input type="text" value={$event_exhibit_obj.license_li_json[license_key].passcode ?? '123456'} name={`passcode`} placeholder="Passcode" required class="input text-sm max-w-20 font-mono" minlength="5" />
+            <button
-        </td>
+                type="submit"
-        <td>
+                disabled={key >= $event_exhibit_obj?.license_max}
-            <button type="submit" class="btn btn-sm variant-soft-warning">
+                class="btn btn-sm variant-soft-warning">
                 <span class="fas fa-save mx-1"></span>
                 Save
             </button>
@@ -369,15 +479,15 @@ function send_init_confirm_email({to_email}) {
                 <div class="flex flex-col wrap gap-1 text-xs">
                     <div class="flex flex-row items-center space-x-2">
                         <span class="ae_label">Updated On:</span>
-                        <span class="ae_value">{$event_exhibit_obj.license_li_json[license_key].updated_on}</span>
+                        <span class="ae_value">{license.updated_on}</span>
                     </div>
                     <div class="flex flex-row items-center space-x-2">
                         <span class="ae_label">Created On:</span>
-                        <span class="ae_value">{$event_exhibit_obj.license_li_json[license_key].created_on}</span>
+                        <span class="ae_value">{license.created_on}</span>
                     </div>
                     <div class="flex flex-row items-center space-x-2">
                         <span class="ae_label">Expires On:</span>
-                        <span class="ae_value">{$event_exhibit_obj.license_li_json[license_key].expires_on}</span>
+                        <span class="ae_value">{license.expires_on}</span>
                     </div>
                 </div>
             </td>