diff --git a/customprompts/mzta-custom-prompts.css b/customprompts/mzta-custom-prompts.css index ec9f384c..ff3afdc1 100644 --- a/customprompts/mzta-custom-prompts.css +++ b/customprompts/mzta-custom-prompts.css @@ -14,11 +14,16 @@ } table th { - background-color: #23222B; + background-color: #4c4e58; border: 1px solid rgb(251, 251, 254); color: rgb(194, 194, 194); padding: 8px; text-align: left; + cursor: pointer; + } + + table tr:nth-child(even) { + background-color: #2E2F36; } } diff --git a/customprompts/mzta-custom-prompts.html b/customprompts/mzta-custom-prompts.html index a05d9077..47aac058 100644 --- a/customprompts/mzta-custom-prompts.html +++ b/customprompts/mzta-custom-prompts.html @@ -15,14 +15,14 @@
- - [Must be unique and without spaces] + + [Must be unique and without spaces]
- - + +
- - + +

- + * Required fields. +
+
- - - + + + + diff --git a/customprompts/mzta-custom-prompts.js b/customprompts/mzta-custom-prompts.js index 53e9937b..604cb4f5 100644 --- a/customprompts/mzta-custom-prompts.js +++ b/customprompts/mzta-custom-prompts.js @@ -16,14 +16,16 @@ * along with this program. If not, see . */ -import { getPrompts } from "../js/mzta-prompts.js"; +import { getPrompts, setDefaultPromptsProperties, setCustomPrompts } from "../js/mzta-prompts.js"; +var promptsList = null; var somethingChanged = false; -var positionMax = 0; +var positionMax_compose = 0; +var positionMax_display = 0; document.addEventListener('DOMContentLoaded', async () => { let options = { - valueNames: [ { data: ['idnum'] }, 'id', 'name', 'text', 'type', 'action', 'position', { name: 'need_selected', attr: 'checked_val'}, { name: 'need_signature', attr: 'checked_val'}, { name: 'need_custom_text', attr: 'checked_val'}, { name: 'is_default', attr: 'is_default_val'}, { name: 'enabled', attr: 'checked_val'} ], + valueNames: [ { data: ['idnum'] }, 'is_default', 'id', 'name', 'text', 'type', 'action', 'position_compose', 'position_display', { name: 'need_selected', attr: 'checked_val'}, { name: 'need_signature', attr: 'checked_val'}, { name: 'need_custom_text', attr: 'checked_val'}, { name: 'enabled', attr: 'checked_val'} ], // item: ` // // @@ -40,41 +42,69 @@ document.addEventListener('DOMContentLoaded', async () => { // Enabled // // ` - item: function(values) { + item: function(values) { //TODO: manage ACTION and TYPE edit with the select + let type_output = ''; + switch(values.type){ + case 0: + type_output = `__MSG_customPrompts_add_to_menu_always__`; + break; + case 1: + type_output = `__MSG_customPrompts_add_to_menu_reading__`; + break; + case 2: + type_output = `__MSG_customPrompts_add_to_menu_composing__`; + break; + } + let output = ` + `; //console.log('>>>>>>>> values.name: ' + JSON.stringify(values.name)); - positionMax = Math.max(positionMax, values.position); + positionMax_compose = Math.max(positionMax_compose, values.position_compose); + positionMax_display = Math.max(positionMax_display, values.position_display); return output; } }; - //let values = getDefaultPrompts_withProps; // test in browser - let values = await getPrompts(); // production + let values = await getPrompts(); console.log('>>>>>>>>>>>>>>>> values: ' + JSON.stringify(values)); - let promptsList = new List('all_prompts', options, values); + promptsList = new List('all_prompts', options, values); checkSelectedBoxes(); @@ -83,6 +113,8 @@ document.addEventListener('DOMContentLoaded', async () => { btnSave.addEventListener('click', (e) => { e.preventDefault(); saveAll(); + clearFields(); + document.getElementById('btnSave').disabled = true; }); const btnNew = document.getElementById('btnNew'); @@ -91,7 +123,7 @@ document.addEventListener('DOMContentLoaded', async () => { document.getElementById('formNew').style.display = 'block'; }); - document.querySelectorAll('input').forEach(element => { + document.querySelectorAll('.input_mod').forEach(element => { element.addEventListener('change', (e) => { e.preventDefault(); btnSave.disabled = false; @@ -99,9 +131,9 @@ document.addEventListener('DOMContentLoaded', async () => { }); }) - let btnEdit_elements = document.querySelectorAll(".btnEdit") - if(btnEdit_elements) { - btnEdit_elements.forEach(element => { + let btnEditItem_elements = document.querySelectorAll(".btnEditItem"); + if(btnEditItem_elements) { + btnEditItem_elements.forEach(element => { element.addEventListener('click', (e) => { e.preventDefault(); const tr = e.target.parentNode.parentNode; //TODO @@ -110,6 +142,42 @@ document.addEventListener('DOMContentLoaded', async () => { }); } + let btnDeleteItem_elements = document.querySelectorAll(".btnDeleteItem"); + if(btnDeleteItem_elements) { + btnDeleteItem_elements.forEach(element => { + element.addEventListener('click', (e) => { + e.preventDefault(); + const check_confirm = window.confirm("Sei sicuro di voler cancellare questo elemento?"); + if(!check_confirm) { + return; + } + const tr = e.target.parentNode.parentNode; //TODO + console.log('>>>>>>>> tr: ' + tr.getAttribute('data-idnum')); + }); + }); + } + + let btnNew_elements = document.querySelectorAll(".input_new"); + if(btnNew_elements) { + btnNew_elements.forEach(element => { + element.addEventListener('change', (e) => { + e.preventDefault(); + checkFields(); + }); + }); + } + + let checkbox_elements = document.querySelectorAll("input[type='checkbox']"); + if(checkbox_elements) { + checkbox_elements.forEach(element => { + element.addEventListener('change', (e) => { + e.preventDefault(); + element.setAttribute('checked_val', element.checked ? '1' : '0'); + console.log('>>>>>>>> checked_val: ' + element.getAttribute('checked_val')); + }); + }); + } + i18n.updateDocument(); //To add a new item @@ -125,28 +193,71 @@ document.addEventListener('DOMContentLoaded', async () => { const btnAddNew = document.getElementById('btnAddNew'); btnAddNew.addEventListener('click', (e) => { //TODO e.preventDefault(); + if(!checkFields()) { + return; + } //TODO check the id must be unique and without spaces promptsList.add({ - id: txtIdNew.value, - name: txtNameNew.value, - text: txtTextNew.value, + id: txtIdNew.value.trim(), + name: txtNameNew.value.trim(), + text: txtTextNew.value.trim(), type: selectTypeNew.value, action: selectActionNew.value, need_selected: selectNeedSelectedNew.value, need_signature: selectNeedSignatureNew.value, need_custom_text: selectNeedCustomTextNew.value, enabled: 1, - position: positionMax + 1, + position_compose: positionMax_compose + 1, + position_display: positionMax_display + 1, is_default: 0, }); //checkSelectedBoxes([selectTypeNew, selectActionNew, selectNeedSelectedNew, selectNeedSignatureNew, selectNeedCustomTextNew]); checkSelectedBoxes(); clearFields(); + somethingChanged = true; + document.getElementById('btnSave').disabled = false; + i18n.updateDocument(); }); - }, { once: true }); - + + +function checkFields() { + //console.log('>>>>>>>>>>>>> typeof promptsList: ' + typeof promptsList); + //console.log('>>>>>>>>>>>>> Array.isArray(promptsList): ' + Array.isArray(promptsList)); + // the id must be unique and without spaces + let is_error = false; + let id_value = document.getElementById('txtIdNew').value.trim(); + if ((id_value == '')|| + (/\s/.test(id_value))) { + inputSetError('txtIdNew'); + is_error = true; + } else { + let exists = promptsList.get("id", id_value); + //console.log('>>>>>>>>>>>>> exists: ' + JSON.stringify(exists)); + if(exists && exists.length > 0) { + inputSetError('txtIdNew'); + is_error = true; + } else { + inputClearError('txtIdNew'); + } + } + if (document.getElementById('txtNameNew').value.trim() == '') { + inputSetError('txtNameNew'); + is_error = true; + } else { + inputClearError('txtNameNew'); + } + if (document.getElementById('txtTextNew').value.trim() == '') { + inputSetError('txtTextNew'); + is_error = true; + } else { + inputClearError('txtTextNew'); + } + document.getElementById('btnAddNew').disabled = is_error; + return !is_error; +} + function clearFields() { document.getElementById('txtIdNew').value = ''; @@ -160,6 +271,14 @@ function clearFields() { document.getElementById('formNew').style.display = 'none'; } +function inputSetError(input) { + document.getElementById(input).style.borderColor = 'red'; +} + +function inputClearError(input) { + document.getElementById(input).style.borderColor = 'green'; +} + function checkSelectedBoxes(checkboxes = null) { if(checkboxes == null){ checkboxes = [ @@ -183,8 +302,23 @@ function checkSelectedBoxes(checkboxes = null) { } //Save all prompts -function saveAll() { - //TODO +function saveAll() { //TODO + somethingChanged = false; + if(promptsList != null) { + promptsList.reIndex(); + let newPrompts = promptsList.items.map(item => { + // For each item in the array, return only the '_values' part + return item.values(); + }); + // newPrompts.forEach(prompt => { + // console.log('>>>>>>>>>>>>> id: ' + JSON.stringify(prompt)); + // }); + console.log('>>>>>>>>>>>>> saveAll: ' + JSON.stringify(newPrompts)); + let newDefaultPrompts = newPrompts.filter(item => item.is_default == 1); + console.log('>>>>>>>>>>>>> newDefaultPrompts: ' + JSON.stringify(newDefaultPrompts)); + //let newCustomPrompts = newPrompts.filter(item => item.is_default == 0); + setDefaultPromptsProperties(newDefaultPrompts); + } } // window.addEventListener('beforeunload', function (event) { diff --git a/js/mzta-prompts.js b/js/mzta-prompts.js index b26473ff..ee437d60 100644 --- a/js/mzta-prompts.js +++ b/js/mzta-prompts.js @@ -151,10 +151,8 @@ export async function getPrompts(){ async function getDefaultPrompts_withProps() { - // let prefs = await browser.storage.sync.get({_default_prompts_properties: null}); //production + let prefs = await browser.storage.sync.get({_default_prompts_properties: null}); //production let defaultPrompts_prop = [...defaultPrompts]; - let prefs = {}; //test - prefs._default_prompts_properties = null; //test if(prefs._default_prompts_properties === null){ // no default prompts properties saved let pos = 1; defaultPrompts_prop.forEach((prompt) => { @@ -163,7 +161,7 @@ async function getDefaultPrompts_withProps() { prompt.enabled = 1; pos++; }) - } else { // we have saved the default prompts properties + } else { // we have saved default prompts properties defaultPrompts_prop.forEach((prompt) => { prompt.position_compose = prefs._default_prompts_properties[prompt.id].position_compose; prompt.position_display = prefs._default_prompts_properties[prompt.id].position_display; @@ -188,6 +186,7 @@ export async function setDefaultPromptsProperties(prompts) { prompts.forEach((prompt) => { default_prompts_properties[prompt.id] = {position_compose: prompt.position_compose, position_display: prompt.position_display, enabled: prompt.enabled}; }); + console.log('>>>>>>>>>>>>>> default_prompts_properties: ' + JSON.stringify(default_prompts_properties)); await browser.storage.sync.set({_default_prompts_properties: default_prompts_properties}); }
IDNameTextIDNameText__MSG_customPrompts_add_to_menu__ Properties Action
` + ((values.is_default == 1) ? type_output : + ``) + + `type + - Type: ` + values.type + ` + Action: + action
- Action: ` + values.action + ` + Need Select
- Need Select + Need Signature
- Need Signature + Need Custom Text
- Need Custom Text -
- Enabled - is_default + Enabled + + + 		- ` + ((values.is_default == 0) ? '':'') + ` + +
+