Done for the day
This commit is contained in:
Scott Idem
@@ -346,6 +346,38 @@ async function handle_load_ae_obj_li__exhibit({api_cfg, event_id, params={}, try
|
||||
// }
|
||||
|
||||
|
||||
async function handle_load_ae_obj_id__exhibit_tracking({api_cfg, exhibit_tracking_id, try_cache=false}) {
|
||||
console.log(`*** handle_load_ae_obj_id__exhibit_tracking() *** exhibit_tracking_id=${exhibit_tracking_id}`);
|
||||
|
||||
let params = {};
|
||||
|
||||
// $events_sess.exhibits.status_load__exhibit_tracking_obj = 'loading';
|
||||
ae_promises.load__event_exhibit_tracking_obj = await api.get_ae_obj_id_crud({
|
||||
api_cfg: api_cfg,
|
||||
obj_type: 'event_exhibit_tracking',
|
||||
obj_id: exhibit_tracking_id, // NOTE: This is the FQDN, not normally the ID.
|
||||
use_alt_table: false, // NOTE: This will use the table_name_alt value instead of the table_name value in the API config.
|
||||
use_alt_base: false, // NOTE: This will use the base_name_alt value instead of the base_name value in the API config.
|
||||
params: params,
|
||||
log_lvl: 0
|
||||
})
|
||||
.then(function (exhibit_tracking_obj_get_result) {
|
||||
if (exhibit_tracking_obj_get_result) {
|
||||
// This is expecting a list
|
||||
handle_db_save_ae_obj_li__exhibitor_tracking({obj_type: 'event_exhibit_tracking', obj_li: [exhibit_tracking_obj_get_result]});
|
||||
return exhibit_tracking_obj_get_result;
|
||||
} else {
|
||||
console.log('No results returned.');
|
||||
return null;
|
||||
}
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.log('No results returned or failed.', error);
|
||||
});
|
||||
|
||||
return ae_promises.load__event_exhibit_tracking_obj;
|
||||
}
|
||||
|
||||
|
||||
// Updated 2024-03-19
|
||||
async function handle_load_ae_obj_li__exhibit_tracking({api_cfg, exhibit_id, params={}, try_cache=true}: {api_cfg: any, exhibit_id: any, params: any, try_cache?: boolean}) {
|
||||
@@ -655,6 +687,7 @@ let export_obj = {
|
||||
handle_search__event_badge: handle_search__event_badge,
|
||||
handle_load_ae_obj_id__exhibit: handle_load_ae_obj_id__exhibit,
|
||||
handle_load_ae_obj_li__exhibit: handle_load_ae_obj_li__exhibit,
|
||||
handle_load_ae_obj_id__exhibit_tracking: handle_load_ae_obj_id__exhibit_tracking,
|
||||
handle_load_ae_obj_li__exhibit_tracking: handle_load_ae_obj_li__exhibit_tracking,
|
||||
handle_create_ae_obj__exhibit_tracking: handle_create_ae_obj__exhibit_tracking,
|
||||
};
|
||||
|
||||
366
src/lib/element_ae_crud.svelte
Normal file
366
src/lib/element_ae_crud.svelte
Normal file
@@ -0,0 +1,366 @@
|
||||
<script lang="ts">
|
||||
// *** Import Svelte core
|
||||
import { createEventDispatcher, onMount } from 'svelte';
|
||||
|
||||
// *** Import Aether core variables and functions
|
||||
import type { key_val } from '$lib/ae_stores';
|
||||
import { api } from '$lib/api';
|
||||
// import { ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
|
||||
|
||||
// *** Import Aether core components
|
||||
// *** Import Aether module variables and functions
|
||||
// *** Import Aether module components
|
||||
|
||||
// *** Export/Exposed variables and functions for component
|
||||
export let log_lvl: number = 0;
|
||||
export let trigger_patch: any = null;
|
||||
export let api_cfg: object = {'api_crud_super_key': null};
|
||||
export let api_crud_super_key: null|string = api_cfg.api_crud_super_key;
|
||||
export let object_type: string;
|
||||
export let object_id: string;
|
||||
export let field_name: string;
|
||||
export let field_type: string = 'text'; // text, textarea, template (older method)
|
||||
export let field_value: any;
|
||||
export let allow_null: boolean = false;
|
||||
export let display_inline: boolean = false;
|
||||
|
||||
export let textarea_cols: number = 80;
|
||||
export let textarea_rows: number = 5;
|
||||
|
||||
// export let input_field_template: null|object = null;
|
||||
|
||||
export let hide_edit_btn = false;
|
||||
export let outline_element = false;
|
||||
export let show_crud = false;
|
||||
export let btn_label = '<span class="fas fa-check"></span> Save'; // PATCH
|
||||
export let show_field_name = true;
|
||||
export let show_original_value = true;
|
||||
export let trim_string = false;
|
||||
export let remove_breaks = false;
|
||||
|
||||
export let class_li: string = '';
|
||||
|
||||
// *** Set initial variables
|
||||
let ae_promises: key_val = {}; // Promise<any>;
|
||||
let patch_result: Promise<any>|key_val;
|
||||
|
||||
let original_field_value = field_value;
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
|
||||
onMount(() => {
|
||||
// console.log('** Element Mounted: ** Element AE CRUD');
|
||||
if (log_lvl) {
|
||||
console.log(`Element AE CRUD: Object Type: ${object_type}; Object ID: ${object_id}; Field Name: ${field_name}; Field Value: ${field_value}`); // ; Super Key: ${api_crud_super_key}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
$: if (trigger_patch) {
|
||||
console.log('AE CRUD: Patch triggered!');
|
||||
// console.log(trigger_patch);
|
||||
trigger_patch = null;
|
||||
handle_obj_field_patch(field_value);
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Updated 2024-03-22
|
||||
async function handle_obj_field_patch(new_field_value: any) {
|
||||
console.log('*** handle_obj_field_patch() ***');
|
||||
|
||||
patch_result = null;
|
||||
|
||||
// NOTE: Is this needed? The field_name, field_value, and fields parameters for update_ae_obj_id_crud() already take care of the data portion. They are added to data_list object as part of the JSON request.
|
||||
// NOTE: Currently this only handles one field and value at a time. This may need to be changed in the future to use the "fields" parameter as well.
|
||||
// let patch_data = {}
|
||||
|
||||
// if (remove_breaks) {
|
||||
// patch_data['field_value'] = field_value.replace(/(\r\n|\n|\r)/gm, "");
|
||||
// } else {
|
||||
// patch_data['field_value'] = field_value;
|
||||
// }
|
||||
|
||||
// patch_data[field_name] = field_value;
|
||||
// console.log(patch_data);
|
||||
|
||||
// let params = {};
|
||||
|
||||
ae_promises.api_update__ae_obj = api.update_ae_obj_id_crud({
|
||||
api_cfg: api_cfg,
|
||||
obj_type: object_type,
|
||||
obj_id: object_id,
|
||||
field_name: field_name,
|
||||
field_value: new_field_value,
|
||||
// fields: data,
|
||||
key: api_crud_super_key,
|
||||
// jwt: null,
|
||||
// params: params,
|
||||
// data: patch_data,
|
||||
log_lvl: 2
|
||||
})
|
||||
.then(function (results) {
|
||||
console.log('PATCH Promise', results);
|
||||
|
||||
if (results) {
|
||||
console.log(`Patched - Field Name: ${field_name} with new Field Value: ${new_field_value}; Original Field Value: ${original_field_value}`);
|
||||
patch_result = 'PATCH complete';
|
||||
} else {
|
||||
console.log(`Not Patched - Field Name: ${field_name} with new Field Value: ${new_field_value}; Original Field Value: ${original_field_value}`);
|
||||
patch_result = 'PATCH failed';
|
||||
return false;
|
||||
}
|
||||
|
||||
dispatch(
|
||||
'ae_crud_updated',
|
||||
{
|
||||
'type': object_type,
|
||||
'id': object_id,
|
||||
'field_name': field_name,
|
||||
'field_value': new_field_value,
|
||||
'original_value': original_field_value,
|
||||
}
|
||||
);
|
||||
return true;
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.log('Something went wrong patching the record.');
|
||||
console.log(error);
|
||||
return false;
|
||||
})
|
||||
.finally(function () {
|
||||
console.log('PATCH Promise finally');
|
||||
});
|
||||
|
||||
return ae_promises.api_update__ae_obj;
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<div class="{class_li} ae_crud" class:show_crud class:display_inline class:outline_element>
|
||||
<span class="field_viewing_wrapper">
|
||||
<slot></slot>
|
||||
|
||||
<button
|
||||
class="btn btn-sm field_show_btn"
|
||||
class:hide_edit_btn
|
||||
class:show_crud
|
||||
on:dblclick={() => {
|
||||
show_crud = true;
|
||||
}}
|
||||
title="Double click to edit"
|
||||
>
|
||||
<span class="fas fa-edit"></span>
|
||||
</button>
|
||||
</span>
|
||||
|
||||
<span class="field_editing_wrapper">
|
||||
<button
|
||||
class="btn btn-sm btn_default field_hide_btn"
|
||||
class:show_crud
|
||||
on:click={() => {
|
||||
show_crud = false;
|
||||
}}
|
||||
title="Close field editing"
|
||||
>
|
||||
<span class="fas fa-window-close"></span>
|
||||
</button>
|
||||
|
||||
<span class="field_value" class:show_crud>
|
||||
{#if field_type == 'template'}
|
||||
<!-- <Element_input_v2 {...input_field_template} bind:value={field_value} /> -->
|
||||
{:else if field_type == 'button'}
|
||||
<!-- <input type="button" bind:value={field_value}> -->
|
||||
{field_value}
|
||||
{:else if field_type == 'text'}
|
||||
<input bind:value={field_value}>
|
||||
{:else if field_type == 'textarea'}
|
||||
<textarea bind:value={field_value} cols={textarea_cols} rows={textarea_rows}></textarea>
|
||||
{:else}
|
||||
<input bind:value={field_value}>
|
||||
{/if}
|
||||
{#if allow_null}
|
||||
<button
|
||||
class="btn btn-sm btn_warning null_value_btn"
|
||||
on:click={async () => {
|
||||
field_value = null;
|
||||
}}
|
||||
title="Set value to NULL"
|
||||
>
|
||||
{@html '�'} NULL
|
||||
</button>
|
||||
{/if}
|
||||
</span>
|
||||
|
||||
<button
|
||||
class="btn btn-md btn_primary field_patch_btn"
|
||||
class:show_crud
|
||||
on:click={async () => {
|
||||
handle_obj_field_patch(field_value);
|
||||
}}
|
||||
title="Save new field value"
|
||||
>
|
||||
{@html btn_label}
|
||||
</button>
|
||||
|
||||
<div class="field_patch_result" class:show_crud>
|
||||
{#await ae_promises.api_update__ae_obj}
|
||||
<div>Processing...</div>
|
||||
{:then}
|
||||
{#if patch_result}
|
||||
<div>{patch_result}</div>
|
||||
{:else}
|
||||
<!-- <div>Nothing to show yet...</div> -->
|
||||
{/if}
|
||||
{/await}
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
.ae_crud .field_editing_wrapper {
|
||||
font-size: em;
|
||||
}
|
||||
|
||||
|
||||
/* BEGIN: Svelte CRUD (update) component */
|
||||
.ae_crud {
|
||||
/* margin: 0; */
|
||||
/* padding: 0; */
|
||||
}
|
||||
|
||||
.ae_crud.display_inline {
|
||||
/* outline: solid thin red; */
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.ae_crud.show_crud .field_viewing_wrapper .field_show_btn {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ae_crud.outline_element .field_viewing_wrapper {
|
||||
outline: dotted thin hsla(0,50%,50%,0);
|
||||
transition: outline 3s 1s;
|
||||
}
|
||||
.ae_crud.outline_element .field_viewing_wrapper:hover {
|
||||
outline: dashed thin hsla(0,50%,50%,.9);
|
||||
transition: outline 1s .5s;
|
||||
}
|
||||
|
||||
.ae_crud .field_viewing_wrapper .field_show_btn.hide_edit_btn {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ae_crud .field_viewing_wrapper .field_show_btn {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
color: hsla(0,0%,50%,.8);
|
||||
|
||||
/* NOTE: transition when hover ends */
|
||||
transition-property: background-color, border-color, color, height, width;
|
||||
transition-delay: 1.00s; /* no delay */
|
||||
transition-duration: .55s;
|
||||
transition-timing-function: linear;
|
||||
}
|
||||
|
||||
.ae_crud .field_viewing_wrapper:hover .field_show_btn {
|
||||
/* outline: solid thin hsla(0,50%,50%,.9); */
|
||||
color: hsla(0,50%,50%,.9);
|
||||
|
||||
/* NOTE: transition when hover starts */
|
||||
transition-property: background-color, border-color, color, height, width;
|
||||
transition-delay: .25s; /* no delay */
|
||||
transition-duration: .50s;
|
||||
transition-timing-function: linear;
|
||||
}
|
||||
|
||||
.ae_crud .field_editing_wrapper {
|
||||
/* outline: dashed thin pink; */
|
||||
|
||||
display: none;
|
||||
/* position: relative; */
|
||||
|
||||
/* contain: layout; */
|
||||
/* contain: size; */
|
||||
/* contain: none; */
|
||||
contain: content;
|
||||
|
||||
box-shadow: .5em .5em .75em .75em hsla(0,0%,0%,0.5);
|
||||
|
||||
/* color: hsla(0,0%,50%,.8); */
|
||||
background-color: hsla(0,0%,50%,.5);
|
||||
border: dashed thin transparent;
|
||||
|
||||
/* font-size: 1em; */
|
||||
/* line-height: 1em; */
|
||||
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
|
||||
/* NOTE: transition when hover ends */
|
||||
transition-property: background-color, border-color, color, height, width;
|
||||
transition-delay: .75s; /* short delay */
|
||||
transition-duration: .50s;
|
||||
transition-timing-function: linear;
|
||||
|
||||
}
|
||||
|
||||
.ae_crud.show_crud .field_editing_wrapper {
|
||||
display: block;
|
||||
contain: content;
|
||||
|
||||
/* background-color: yellow; */
|
||||
background-color: hsla(60,50%,80%,.95);
|
||||
border: solid thin hsla(0,50%,50%,.50);
|
||||
border-radius: .5em;
|
||||
|
||||
height: auto;
|
||||
/* height: 100%; */
|
||||
max-height: 100%;
|
||||
|
||||
width: auto;
|
||||
/* width: 100%; */
|
||||
max-width: 100%;
|
||||
|
||||
/* NOTE: transition when hover starts */
|
||||
transition-property: background-color, border-color, height, width;
|
||||
transition-delay: .25s; /* no delay */
|
||||
transition-duration: .25s;
|
||||
transition-timing-function: linear;
|
||||
|
||||
position: absolute;
|
||||
/* position: fixed; */
|
||||
/* position: relative; */
|
||||
/* top: 1em; */
|
||||
/* left: 1em; */
|
||||
/* right: 1em; */
|
||||
/* bottom: 1em; */
|
||||
|
||||
z-index: 1;
|
||||
|
||||
padding: .5em;
|
||||
}
|
||||
|
||||
.ae_crud.show_crud.display_inline .field_editing_wrapper {
|
||||
/* display: block; */
|
||||
display: inline-block;
|
||||
/* display: inline; */
|
||||
|
||||
box-shadow: initial;
|
||||
background-color: hsla(60,50%,80%,.3);
|
||||
|
||||
padding: .25em;
|
||||
|
||||
position: initial;
|
||||
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.ae_crud textarea {
|
||||
height: auto;
|
||||
}
|
||||
/* END: Svelte CRUD (update) component */
|
||||
</style>
|
||||
574
src/lib/element_input_v2.svelte
Normal file
574
src/lib/element_input_v2.svelte
Normal file
@@ -0,0 +1,574 @@
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher, onMount } from 'svelte';
|
||||
|
||||
import util from './utilities.js';
|
||||
|
||||
// import Select_element_lu from './element_select_lu.svelte';
|
||||
|
||||
|
||||
/* *** BEGIN *** Core input settings */
|
||||
|
||||
export let id_random: string = ''; // OSIT Aether specific
|
||||
export let obj_type: string = ''; // OSIT Aether specific
|
||||
export let obj_prop_name: string = ''; // OSIT Aether specific
|
||||
|
||||
|
||||
export let use_name_prefix: boolean = false;
|
||||
export let name: string = (use_name_prefix ? `${obj_type}__${obj_prop_name}` : obj_prop_name);
|
||||
// console.log(name);
|
||||
export let id: string = `${obj_type}__${obj_prop_name}--${id_random}`; // Same as the value for "for"
|
||||
// console.log(id);
|
||||
|
||||
export let value: null|boolean|number|string = null; // The current value of the property
|
||||
console.log(`Input name=${name} value=${value}`);
|
||||
export let default_value: null|boolean|number|string = null; // The default value for when value is ''
|
||||
// console.log('Default Value:', default_value);
|
||||
export let original_value: null|boolean|number|string = value; // The original value
|
||||
console.log('Original Value', original_value);
|
||||
export let data_type: string = typeof value; // boolean, number, string, json
|
||||
console.log('Data Type:', data_type);
|
||||
|
||||
// hidden, text, email, date, number, select, checkbox, radio, textarea, etc
|
||||
export let type: string = 'text'; // Input type
|
||||
|
||||
let set_input_type = (node) => {
|
||||
node.type = 'text';
|
||||
};
|
||||
let input_element_type_list = ['checkbox', 'date', 'email', 'hidden', 'number', 'text'];
|
||||
if (input_element_type_list.includes(type)) {
|
||||
set_input_type = (node) => {
|
||||
node.type = type;
|
||||
};
|
||||
} else {
|
||||
|
||||
}
|
||||
|
||||
console.log(`Input name=${name} value=${value} type=${type}`);
|
||||
|
||||
export let disabled: boolean = false; // attribute format: disabled
|
||||
export let readonly: boolean = false; // attribute format: readonly="readonly"
|
||||
export let required: boolean = false; // attribute format: required="required"
|
||||
export let pattern: null|string = null;
|
||||
export let focus: boolean = false;
|
||||
|
||||
/* *** END *** Core input settings */
|
||||
|
||||
|
||||
/* *** BEGIN *** Container content, layout, and behavior */
|
||||
|
||||
// Input element specific label and placeholder
|
||||
export let label: string = '';
|
||||
export let label_date: string = 'Date';
|
||||
export let label_time: string = 'Time';
|
||||
|
||||
export let placeholder: string = label;
|
||||
|
||||
// Input description for container
|
||||
export let description: string = ''; // Description
|
||||
|
||||
// Layout and style
|
||||
export let content_layout: string = ''; // Default empty is label wrap first, label_start, label_end, floating_input
|
||||
|
||||
export let class_li: string[] = []; // Classes for the input element
|
||||
export let style: string = ''; // Style for the input element
|
||||
export let display: string = ''; // Default empty is inline. inline, block, inline-block, break (break after)
|
||||
|
||||
export let label_class_li: string[] = [];
|
||||
export let label_style: string = '';
|
||||
export let label_display: string = ''; // Default empty is inline. inline, block, inline-block, break (break after)
|
||||
export let label_location: string = 'start'; // start, end
|
||||
|
||||
export let description_location: string = 'end'; // start, end
|
||||
|
||||
export let container_class_li: string[] = []; // Classes for the container element
|
||||
export let container_style: string = '';
|
||||
export let container_display: string = ''; // Default empty is div block. inline, block, inline-block, break (break after)
|
||||
|
||||
export let multipart_class_li: string[] = [];
|
||||
|
||||
export let input_mode: null|string = null; // This is for special/custom modes like a rich text editor or search.
|
||||
console.log(`Input input_mode=${input_mode}`);
|
||||
|
||||
/* *** END *** Container content, layout, and behavior */
|
||||
|
||||
|
||||
/* *** BEGIN *** Input type specific */
|
||||
|
||||
// For checkbox, radio, and select option
|
||||
export let option_li: any[] = []; // For checkbox, radio, and select inputs. Not specific to select options. List of key value pairs.
|
||||
export let option_none: boolean = false; // If set to true then it will add an option using the select_option_none_text value
|
||||
export let option_none_text: string = '-- Not Selected --'; // If set to true then it will add an option using the select_option_none_text value
|
||||
|
||||
// For textarea
|
||||
export let size: number = null;
|
||||
export let rows: number = 3;
|
||||
export let cols: number = 80;
|
||||
if (type == 'textarea') {
|
||||
console.log(`Input textarea size=${size} rows=${rows} cols=${cols}`);
|
||||
}
|
||||
|
||||
// For custom date_time. Not "date" or "time" input type only.
|
||||
export let date_time_tz: null|string = null;
|
||||
let value_datetime = null;
|
||||
let value_date = null;
|
||||
let value_time = null;
|
||||
|
||||
if (type == 'date_time' && value) {
|
||||
console.log(`date_time value: ${value}`);
|
||||
value_datetime = new Date(value+'Z'); // Append the Z so it knows it is UTC (YYY-MM-DDTHH:mm:ssZ)
|
||||
console.log(value_datetime);
|
||||
|
||||
value_datetime = util.iso_datetime_formatter(value_datetime,'datetime_iso');
|
||||
value_date = util.iso_datetime_formatter(value_datetime,'date_iso');
|
||||
value_time = util.iso_datetime_formatter(value_datetime,'time_iso');
|
||||
// value_date = value_datetime.toLocaleDateString();
|
||||
// value_date = value_datetime.toISOString();
|
||||
// value_time = value_datetime.toLocaleTimeString();
|
||||
// value_time = value_datetime.toISOString();
|
||||
} else if (type == 'date_time') {
|
||||
console.log('No datetime value passed');
|
||||
}
|
||||
if (type == 'date_time') {
|
||||
console.log(`Input date_time value_datetime=${value_datetime} value_date=${value_date} value_time=${value_time} date_time_tz=${date_time_tz}`);
|
||||
}
|
||||
|
||||
/* *** END *** Input type specific */
|
||||
|
||||
|
||||
/* THIS NEEDS TO BE CLEANED UP */
|
||||
let multipart_style;
|
||||
let label_begin;
|
||||
let checkbox_none;
|
||||
let checked;
|
||||
let checkbox_none_text;
|
||||
let checkbox_li;
|
||||
let radio_option_class_li;
|
||||
let radio_none;
|
||||
let radio_none_text;
|
||||
let radio_li;
|
||||
let value_new_line;
|
||||
let select_option_none;
|
||||
let select_option_li_lu_name;
|
||||
let select_option_li;
|
||||
let select_option_none_text;
|
||||
/* ^^^ THIS NEEDS TO BE CLEANED UP ^^^ */
|
||||
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
// type Input = {
|
||||
// name: string;
|
||||
// value: number;
|
||||
// };
|
||||
// let input: Input;
|
||||
|
||||
/*
|
||||
* container_element: span, div, section
|
||||
* container_class_li: []
|
||||
* content_layout: inline, break, bs_floating
|
||||
* content_order: label_value_description, value_label_description, label_description_value
|
||||
* label_class_li: []
|
||||
* class_li: []
|
||||
* start_desc: string
|
||||
* end_desc: string
|
||||
*
|
||||
*/
|
||||
|
||||
onMount(() => {
|
||||
console.log(`** Element Mounted: ** Element Input v2: ${obj_type} ${obj_prop_name}; type=${data_type}; value=${value}`);
|
||||
|
||||
if (input_mode == 'editor_basic_200') {
|
||||
rich_editor();
|
||||
}
|
||||
});
|
||||
|
||||
// $: if (value) {
|
||||
// console.log(`input name=${name} value=${value}`);
|
||||
// console.log(typeof value);
|
||||
// } else if (typeof value === 'undefined') {
|
||||
// console.log(`input name=${name} value=undefined; resetting to ''`);
|
||||
// value = '';
|
||||
// }
|
||||
|
||||
$: if (disabled) { disabled=true; } // else { disabled=false; }
|
||||
$: if (readonly) { readonly=true; } // else { readonly=false; }
|
||||
$: if (required) { required=true; } // else { required=true; }
|
||||
|
||||
$: if (data_type) {
|
||||
console.log(`Input value data_type=${data_type}`);
|
||||
} else if (data_type == 'json') {
|
||||
console.log(`Need to convert JSON object to string.`);
|
||||
if (typeof value === 'object') {
|
||||
value = JSON.stringify(value);
|
||||
console.log(`Value as data type (${data_type}): ${value}`);
|
||||
} else {
|
||||
console.log('Value is not an object type')
|
||||
console.log(typeof value);
|
||||
}
|
||||
}
|
||||
|
||||
// // input_mode options: null or '' assume 'text', 'none', 'text', 'tel', 'url', 'email', 'numeric', 'decimal', and 'search'
|
||||
// $: if (input_mode === null || input_mode == '') {
|
||||
// input_mode = 'text';
|
||||
// } else if (input_mode == 'json') {
|
||||
// } else if (input_mode == 'editor_basic_200') {
|
||||
// }
|
||||
// console.log(`input_mode=${input_mode}`);
|
||||
|
||||
$: if (container_display == '' || container_display == 'block') {
|
||||
console.log(`input name=${name} container_display=${container_display}`);
|
||||
// NOTE: Using a div will be displayed as block by default
|
||||
} else if (container_display == 'inline') {
|
||||
console.log(`input name=${name} container_display=${container_display}`);
|
||||
container_class_li.push('container_inline');
|
||||
container_style = 'display: inline;'
|
||||
} else if (container_display == 'inline-block') {
|
||||
console.log(`input name=${name} container_display=${container_display}`);
|
||||
container_class_li.push('container_inline_block');
|
||||
container_style = 'display: inline-block;'
|
||||
} else if (typeof container_display === 'undefined') {
|
||||
console.log(`input name=${name} container_display=${container_display}`);
|
||||
}
|
||||
|
||||
$: if (content_layout == '' || content_layout == 'label_begin') {
|
||||
console.log(`input name=${name} content_layout=${content_layout}`);
|
||||
// label_begin = true;
|
||||
} else if (content_layout == 'label_end') {
|
||||
console.log(`input name=${name} content_layout=${content_layout}`);
|
||||
// label_begin = false;
|
||||
} else if (content_layout == 'floating_input') {
|
||||
console.log(`input name=${name} content_layout=${content_layout}`);
|
||||
// label_begin = false;
|
||||
|
||||
if (type != 'date_time') {
|
||||
container_class_li.push('form-floating'); // set the container class list
|
||||
} else {
|
||||
multipart_class_li.push('form-floating'); // set the container with multi input parts class list
|
||||
}
|
||||
|
||||
if (type === 'select') {
|
||||
class_li.push('form-select'); // set the select class list
|
||||
} else {
|
||||
console.log('Make form-control???');
|
||||
class_li.push('form-control'); // set the input, select, textarea class list
|
||||
}
|
||||
|
||||
if (type === 'textarea') {
|
||||
let estimate_row_rem = rows + 5.5;
|
||||
style = `height: calc(2px + ${estimate_row_rem}rem);`;
|
||||
}
|
||||
} else if (typeof content_layout === 'undefined') {
|
||||
console.log(`input name=${name} content_layout=${content_layout}`);
|
||||
}
|
||||
|
||||
// function handle_oninput_dispatch() {
|
||||
// console.log(input);
|
||||
// dispatch('oninput', {
|
||||
// name: input.name,
|
||||
// value: input.value,
|
||||
// });
|
||||
// }
|
||||
|
||||
function handle_oninput_dispatch(event) {
|
||||
console.log(event.target);
|
||||
console.log(value);
|
||||
dispatch('oninput', {
|
||||
name: event.target.name,
|
||||
value: event.target.value,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function rich_editor() {
|
||||
console.log('*** rich_editor() ***');
|
||||
|
||||
|
||||
// let test_element = $('.editor_basic_200');
|
||||
// console.log(test_element);
|
||||
|
||||
// let textarea_element = document.querySelector('.editor_basic_200');
|
||||
|
||||
// let toolbar_element = document.querySelector('.quilljs_toolbar');
|
||||
// console.log(toolbar_element);
|
||||
|
||||
let editor_element = document.querySelector('.quilljs_editor');
|
||||
console.log(editor_element);
|
||||
|
||||
// var editor = new Quill(editor_element, {
|
||||
// modules: {
|
||||
// 'multi-cursor': true,
|
||||
// 'toolbar': { container: '#quilljs_toolbar' },
|
||||
// // 'link-tooltip': true,
|
||||
// },
|
||||
// placeholder: 'Text goes here',
|
||||
// theme: 'snow'
|
||||
// });
|
||||
|
||||
var editor = new Quill(editor_element, {
|
||||
modules: {
|
||||
'multi-cursor': true,
|
||||
toolbar: [
|
||||
[{
|
||||
header: [1, 2, false]
|
||||
}],
|
||||
['bold', 'italic', 'underline'],
|
||||
['image', 'code-block']
|
||||
]
|
||||
// 'link-tooltip': true,
|
||||
},
|
||||
placeholder: 'Text goes here',
|
||||
theme: 'snow'
|
||||
});
|
||||
|
||||
|
||||
|
||||
/*
|
||||
textarea_element.summernote(
|
||||
{
|
||||
tabsize: 4,
|
||||
height: 200,
|
||||
toolbar: [
|
||||
['cleaner',['cleaner']], // The Button
|
||||
['edit', ['undo', 'redo']],
|
||||
['font', ['bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'clear']],
|
||||
['color', ['forecolor']],
|
||||
['para', ['ul', 'ol', 'paragraph']],
|
||||
['insert', ['link']],
|
||||
['view', ['codeview', 'help']]
|
||||
],
|
||||
cleaner:{
|
||||
action: 'both', // both|button|paste 'button' only cleans via toolbar button, 'paste' only clean when pasting content, both does both options.
|
||||
newline: '<br>', // Summernote's default is to use '<p><br></p>'
|
||||
notStyle: '', // Position of Notification
|
||||
icon: '<i class="fas fa-paste"></i>',
|
||||
keepHtml: true, // Remove all Html formats
|
||||
keepOnlyTags: ['<p>', '<br>', '<ul>', '<li>', '<b>', '<strong>','<i>', '<a>'], // If keepHtml is true, remove all tags except these
|
||||
keepClasses: false, // Remove Classes
|
||||
badTags: ['style', 'script', 'applet', 'embed', 'noframes', 'noscript', 'html'], // Remove full tags with contents
|
||||
badAttributes: ['style', 'start'], // Remove attributes from remaining tags
|
||||
limitChars: false, // 0/false|# 0/false disables option
|
||||
limitDisplay: 'none', // none|text|html|both
|
||||
limitStop: false // true/false
|
||||
}
|
||||
});
|
||||
*/
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="element element_input {container_class_li.join(' ')}" style={container_style}>
|
||||
|
||||
{#if type === 'email' || type === 'date' || type === 'number' || type === 'tel' || type === 'text' || type === 'time' || type === 'url' }
|
||||
{#if (content_layout == 'label_start' && label)}
|
||||
<label for={id} class={label_class_li.join(' ')} style={label_style}>{label}</label>
|
||||
{/if}
|
||||
|
||||
<input {id} {name} class={class_li.join(' ')} {style} use:set_input_type {placeholder} {size} {pattern} {readonly} {disabled} {required} inputmode={input_mode} data-id_random={id_random} data-obj_type={obj_type} data-obj_prop_name={obj_prop_name} use:util.set_focus={focus} on:input={handle_oninput_dispatch} bind:value={value} />
|
||||
|
||||
{#if (content_layout != 'label_start' && label)}
|
||||
<label for={id} class={label_class_li.join(' ')} style={label_style}>{label}</label>
|
||||
{/if}
|
||||
|
||||
<span>{description}</span>
|
||||
|
||||
{:else if type === 'date_time' }
|
||||
{#if (content_layout == 'label_start' && label)}
|
||||
<span class={label_class_li.join(' ')} style={label_style}>{label}</span>
|
||||
<!-- <label for={id} class={label_class_li.join(' ')} style={label_style}>{label}</label> -->
|
||||
{/if}
|
||||
|
||||
<div class="element_input multipart {multipart_class_li.join(' ')}" style={multipart_style}>
|
||||
{#if label_begin}
|
||||
<label for={`${id}_date`} class={label_class_li.join(' ')} style={label_style}>{label_date}</label>
|
||||
{/if}
|
||||
|
||||
<input id={id+'_date'} name={name+'_date'} {style} class={class_li.join(' ')} type="date" value={value_date} {placeholder} {readonly} {disabled} {required} data-id_random={id_random} data-obj_type={obj_type} data-obj_prop_name={obj_prop_name} on:input={handle_oninput_dispatch} />
|
||||
|
||||
{#if !label_begin}
|
||||
<label for={`${id}_date`} class={label_class_li.join(' ')} style={label_style}>{label_date}</label>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="element_input multipart {multipart_class_li.join(' ')}" style={multipart_style}>
|
||||
{#if label_begin}
|
||||
<label for={`${id}_time`} class={label_class_li.join(' ')} style={label_style}>{label_time}</label>
|
||||
{/if}
|
||||
|
||||
<input id={id+'_time'} name={name+'_time'} {style} class={class_li.join(' ')} type="time" value={value_time} {placeholder} {readonly} {disabled} {required} data-id_random={id_random} data-obj_type={obj_type} data-obj_prop_name={obj_prop_name} on:input={handle_oninput_dispatch} />
|
||||
|
||||
{#if !label_begin}
|
||||
<label for={`${id}_time`} class={label_class_li.join(' ')} style={label_style}>{label_time}</label>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
|
||||
{#if (content_layout != 'label_start' && label)}
|
||||
<span class={label_class_li.join(' ')} style={label_style}>{label}</span>
|
||||
<!-- <label for={id} class={label_class_li.join(' ')} style={label_style}>{label}</label> -->
|
||||
{/if}
|
||||
|
||||
<span>{description}</span>
|
||||
|
||||
{:else if type === 'checkbox' }
|
||||
{#if checkbox_none}
|
||||
{#if !value}
|
||||
{checked='checked'}
|
||||
{/if}
|
||||
<label>{checkbox_none_text}
|
||||
<input {name} type="checkbox" value="" {readonly} {disabled} {required} {checked} on:input={handle_oninput_dispatch} />
|
||||
</label>
|
||||
{/if}
|
||||
{#if checkbox_li.length}
|
||||
{#if (content_layout == 'label_start' && label)}
|
||||
<span class="input_container_label label_begin">{label}</span>
|
||||
{/if}
|
||||
|
||||
{#each Object.entries(checkbox_li) as [li_key, li_value]}
|
||||
{#if li_key.toString() === value.toString() }
|
||||
<label>{li_value}
|
||||
<input {name} type="checkbox" value="{li_key}" checked on:input={handle_oninput_dispatch}>
|
||||
</label>
|
||||
{:else}
|
||||
<label>{li_value}
|
||||
<input {name} type="checkbox" value="{li_key}" on:input={handle_oninput_dispatch}>
|
||||
</label>
|
||||
{/if}
|
||||
{/each}
|
||||
|
||||
{#if (content_layout != 'label_start' && label)}
|
||||
<span class="input_container_label label_end">{label}</span>
|
||||
{/if}
|
||||
{:else}
|
||||
{#if label_begin}
|
||||
<label for={id} class={label_class_li.join(' ')} style={label_style}>{label}</label>
|
||||
{/if}
|
||||
|
||||
<input {id} {name} class={class_li.join(' ')} {style} type="checkbox" {value} {placeholder} {readonly} {disabled} {required} data-id_random={id_random} data-obj_type={obj_type} data-obj_prop_name={obj_prop_name} {checked} on:input={handle_oninput_dispatch} />
|
||||
{/if}
|
||||
|
||||
<span>{description}</span>
|
||||
|
||||
{:else if type === 'radio' }
|
||||
{#if radio_none}
|
||||
{#if !value}
|
||||
{checked='checked'}
|
||||
{/if}
|
||||
<label class={radio_option_class_li.join(' ')}>{@html radio_none_text}
|
||||
<input {name} type="radio" value="" {readonly} {disabled} {required} {checked} on:input={handle_oninput_dispatch} />
|
||||
</label>
|
||||
{/if}
|
||||
{#if radio_li}
|
||||
{#if (content_layout == 'label_start' && label)}
|
||||
<span class="input_container_label label_begin">{label}:</span>
|
||||
{/if}
|
||||
|
||||
<span class="input_container_radio_options">
|
||||
{#each Object.entries(radio_li) as [li_key, li_value]}
|
||||
{#if value === null} <!-- If null then no option should be selected. -->
|
||||
<label>{@html li_value}
|
||||
<input {name} type="radio" bind:group={value} value="{li_key}" on:input={handle_oninput_dispatch}>
|
||||
</label>
|
||||
{:else if ( li_key.toString() === value.toString() || (li_key == 'true' && value == true) || (li_key == 'false' && value == false) ) }
|
||||
<label>{@html li_value}
|
||||
<input {name} type="radio" bind:group={value} value="{li_key}" checked on:input={handle_oninput_dispatch}> Z
|
||||
</label>
|
||||
{:else}
|
||||
<label>{@html li_value}
|
||||
<input {name} type="radio" bind:group={value} value="{li_key}" on:input={handle_oninput_dispatch}>
|
||||
</label>
|
||||
{/if}
|
||||
|
||||
<!-- <label>{@html li_value}
|
||||
<input {name} type="radio" bind:group={value} value="{li_key}" on:input={handle_oninput_dispatch}>
|
||||
</label> -->
|
||||
{/each}
|
||||
</span>
|
||||
|
||||
{#if !label_begin}
|
||||
<span class="input_container_label label_end">{label}:</span>
|
||||
{/if}
|
||||
{:else}
|
||||
{#if label_begin}
|
||||
<label for={id} class={label_class_li.join(' ')} style={label_style}>{@html label}</label>
|
||||
{/if}
|
||||
|
||||
<input {id} {name} class={class_li.join(' ')} {style} type="radio" {value} {placeholder} {readonly} {disabled} {required} data-id_random={id_random} data-obj_type={obj_type} data-obj_prop_name={obj_prop_name} {checked} on:input={handle_oninput_dispatch} />
|
||||
|
||||
{#if !label_begin}
|
||||
<label for={id} class={label_class_li.join(' ')} style={label_style}>{@html label}</label>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
<span>{description}</span>
|
||||
|
||||
{:else if type === 'textarea'}
|
||||
{#if label_begin}
|
||||
<label for={id} class={label_class_li.join(' ')} style={label_style}>{label}</label>
|
||||
{/if}
|
||||
|
||||
{#if value_new_line}<br>{/if}
|
||||
<textarea {id} {name} class={class_li.join(' ')} {style} bind:value={value} {placeholder} {readonly} {disabled} {required} {rows} {cols} data-id_random={id_random} data-obj_type={obj_type} data-obj_prop_name={obj_prop_name} on:input={handle_oninput_dispatch}></textarea>
|
||||
<!-- rows="" cols="" maxlength="" -->
|
||||
|
||||
{#if !label_begin}
|
||||
<label for={id} class={label_class_li.join(' ')} style={label_style}>{label}</label>
|
||||
{/if}
|
||||
|
||||
<span>{description}</span>
|
||||
|
||||
{:else if type === 'hidden'}
|
||||
<input {id} {name} class={class_li.join(' ')} type="hidden" bind:value={value} {placeholder} {readonly} {disabled} {required} data-id_random={id_random} data-obj_type={obj_type} data-obj_prop_name={obj_prop_name} />
|
||||
|
||||
{:else if type === 'select'}
|
||||
{#if label_begin}
|
||||
<label for={id} class={label_class_li.join(' ')} style={label_style}>
|
||||
{label}
|
||||
<!-- {#if value} <span class="label_select_value">{value}</span>{/if} -->
|
||||
</label>
|
||||
{/if}
|
||||
|
||||
<select {id} {name} class={class_li.join(' ')} {style} {readonly} {disabled} {required} data-id_random={id_random} data-obj_type={obj_type} data-obj_prop_name={obj_prop_name} on:input={handle_oninput_dispatch}>
|
||||
{#if select_option_none}
|
||||
<option value="">{select_option_none_text}</option>
|
||||
{/if}
|
||||
{#if select_option_li_lu_name}
|
||||
<!-- <Select_element_lu lu_list_name={select_option_li_lu_name} params={select_option_li_lu_params} value_field_name={select_option_lu_value_field_name} text_field_name={select_option_lu_text_field_name} slct_value={value} /> -->
|
||||
{:else}
|
||||
{#each Object.entries(select_option_li) as [li_key, li_value]}
|
||||
{#if value === null} <!-- If null then no option should be selected. -->
|
||||
<option value="{li_key}">
|
||||
{li_value}
|
||||
</option>
|
||||
{:else if li_key.toString() === value.toString() }
|
||||
<option value="{li_key}" selected>
|
||||
{li_value}
|
||||
</option>
|
||||
{:else}
|
||||
<option value="{li_key}">
|
||||
{li_value}
|
||||
</option>
|
||||
{/if}
|
||||
{/each}
|
||||
{/if}
|
||||
</select>
|
||||
|
||||
{#if !label_begin}
|
||||
<label for={id} class={label_class_li.join(' ')} style={label_style}>
|
||||
{label}
|
||||
{#if value} <span class="label_select_value">{value}</span>{/if}
|
||||
</label>
|
||||
{/if}
|
||||
|
||||
<span>{description}</span>
|
||||
{/if}
|
||||
|
||||
<slot name="more_html">
|
||||
</slot>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
.container_inline {
|
||||
display: inline;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user