saving and loasding defaultPrompts user properties
This commit is contained in:
mic
parent
2cab415dc9
commit
6136e0a056
4 changed files with 185 additions and 44 deletions
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -15,14 +15,14 @@
|
|||
<button id="btnNew">__MSG_customPrompts_btnNew__</button>
|
||||
</div>
|
||||
<div id="formNew">
|
||||
<label for="txtIdNew">ID:</label>
|
||||
<input type="text" id="txtIdNew" name="id"> [Must be unique and without spaces]
|
||||
<label for="txtIdNew">*ID:</label>
|
||||
<input type="text" id="txtIdNew" name="id" class="input_new"> [Must be unique and without spaces]
|
||||
<br>
|
||||
<label for="txtNameNew">Name:</label>
|
||||
<input type="text" id="txtNameNew" name="name">
|
||||
<label for="txtNameNew">*Name:</label>
|
||||
<input type="text" id="txtNameNew" name="name" class="input_new">
|
||||
<br>
|
||||
<label for="txtTextNew">Text:</label>
|
||||
<textarea id="txtTextNew" name="text"></textarea>
|
||||
<label for="txtTextNew">*Text:</label>
|
||||
<textarea id="txtTextNew" name="text" class="input_new"></textarea>
|
||||
<br>
|
||||
<label for="selectTypeNew">__MSG_customPrompts_add_to_menu__:</label>
|
||||
<select id="selectTypeNew" name="type">
|
||||
|
|
@ -56,15 +56,18 @@
|
|||
<option value="1">Custom text needed</option>
|
||||
</select>
|
||||
<br>
|
||||
<button id="btnAddNew">__MSG_customPrompts_btnAddNewCommit__</button>
|
||||
* Required fields.
|
||||
<br>
|
||||
<button id="btnAddNew" disabled>__MSG_customPrompts_btnAddNewCommit__</button>
|
||||
</div>
|
||||
<div id="all_prompts">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Name</th>
|
||||
<th>Text</th>
|
||||
<th class="sort" data-sort="id">ID</th>
|
||||
<th class="sort" data-sort="name">Name</th>
|
||||
<th class="sort" data-sort="text">Text</th>
|
||||
<th class="sort" data-sort="type">__MSG_customPrompts_add_to_menu__</th>
|
||||
<th>Properties</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
|
|
|
|||
|
|
@ -16,14 +16,16 @@
|
|||
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
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: `<tr>
|
||||
// <td class="id"></td>
|
||||
// <td class="name"></td>
|
||||
|
|
@ -40,41 +42,69 @@ document.addEventListener('DOMContentLoaded', async () => {
|
|||
// <input type="checkbox" class="enabled"> Enabled
|
||||
// </td>
|
||||
// </tr>`
|
||||
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 = `<span>__MSG_customPrompts_add_to_menu_always__</span>`;
|
||||
break;
|
||||
case 1:
|
||||
type_output = `<span>__MSG_customPrompts_add_to_menu_reading__</span>`;
|
||||
break;
|
||||
case 2:
|
||||
type_output = `<span>__MSG_customPrompts_add_to_menu_composing__</span>`;
|
||||
break;
|
||||
}
|
||||
|
||||
let output = `<tr ` + ((values.is_default == 1) ? 'class="is_default"':'') + `>
|
||||
<td class="id"></td>
|
||||
<td class="name"></td>
|
||||
<td class="text"></td>
|
||||
<td>` + ((values.is_default == 1) ? type_output :
|
||||
`<select class="input_mod">
|
||||
<option value="0"` + ((values.type == 0) ? ' selected':'') + `>__MSG_customPrompts_add_to_menu_always__</option>
|
||||
<option value="1"` + ((values.type == 1) ? ' selected':'') + `>__MSG_customPrompts_add_to_menu_reading__</option>
|
||||
<option value="2"` + ((values.type == 2) ? ' selected':'') + `>__MSG_customPrompts_add_to_menu_composing__</option>
|
||||
</select>`) +
|
||||
`<span class="type hiddendata">type</span>
|
||||
</td>
|
||||
<td class="properties">
|
||||
Type: ` + values.type + `
|
||||
Action: <select class="input_mod"` + ((values.is_default == 1) ? ' disabled':'') + `>
|
||||
<option value="0"` + ((values.action == 0) ? ' selected':'') + `>Close button</option>
|
||||
<option value="1"` + ((values.action == 1) ? ' selected':'') + `>Do reply</option>
|
||||
<option value="2"` + ((values.action == 2) ? ' selected':'') + `>Substitute text</option>
|
||||
</select>
|
||||
<span class="action hiddendata">action</span>
|
||||
<br>
|
||||
Action: ` + values.action + `
|
||||
<input type="checkbox" class="need_selected input_mod"` + ((values.is_default == 1) ? ' disabled':'') + `> Need Select
|
||||
<br>
|
||||
<input type="checkbox" class="need_selected"` + ((values.is_default == 1) ? 'disabled':'') + `> Need Select
|
||||
<input type="checkbox" class="need_signature input_mod" ` + ((values.is_default == 1) ? ' disabled':'') + `> Need Signature
|
||||
<br>
|
||||
<input type="checkbox" class="need_signature" ` + ((values.is_default == 1) ? 'disabled':'') + `> Need Signature
|
||||
<input type="checkbox" class="need_custom_text input_mod"` + ((values.is_default == 1) ? ' disabled':'') + `> Need Custom Text
|
||||
<br>
|
||||
<input type="checkbox" class="need_custom_text"` + ((values.is_default == 1) ? 'disabled':'') + `> Need Custom Text
|
||||
<br>
|
||||
<input type="checkbox" class="enabled"> Enabled
|
||||
<span class="is_default hiddendata">is_default</span>
|
||||
<input type="checkbox" class="enabled input_mod"> Enabled
|
||||
<span class="is_default hiddendata"></span>
|
||||
<span class="position_compose hiddendata"></span>
|
||||
<span class="position_display hiddendata"></span>
|
||||
</td>
|
||||
<td>
|
||||
` + ((values.is_default == 0) ? '<button class="btnEdit">Edit</button>':'') + `
|
||||
<button class="btnEditItem"` + ((values.is_default == 1) ? ' disabled':'') + `>Edit</button>
|
||||
<br>
|
||||
<button class="btnDeleteItem"` + ((values.is_default == 1) ? ' disabled':'') + `>Delete</button>
|
||||
</td>
|
||||
</tr>`;
|
||||
//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) {
|
||||
|
|
|
|||
|
|
@ -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});
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue