added btns and new form. still work in progress. #12

This commit is contained in:
mic 2024-05-10 23:21:40 +02:00
parent 5c2e7a63f6
commit f459cf72e8
4 changed files with 154 additions and 29 deletions

View file

@ -45,3 +45,11 @@ table td {
table td.properties{
white-space: nowrap;
}
.hiddendata{
display: none;
}
#formNew{
display: none;
}

View file

@ -10,14 +10,60 @@
<h1>Manage Prompts</h1>
<p>Manage your custom prompts.</p>
</div>
<div>
<button id="btnSave" disabled>__MSG_customPrompts_btnSave__</button>
<button id="btnNew">__MSG_customPrompts_btnNew__</button>
</div>
<div id="formNew">
<label for="txtNameNew">Name:</label>
<input type="text" id="txtNameNew" name="name">
<br>
<label for="txtTextNew">Text:</label>
<textarea id="txtTextNew" name="text"></textarea>
<br>
<label for="selectTypeNew">Type:</label>
<select id="selectTypeNew" name="type">
<option value="0">Always show</option>
<option value="1">When reading an email</option>
<option value="2">When composing a mail</option>
</select>
<br>
<label for="selectActionNew">Action:</label>
<select id="selectActionNew" name="action">
<option value="0">Close button</option>
<option value="1">Do reply</option>
<option value="2">Substitute text</option>
</select>
<br>
<label for="selectNeedSelectedNew">Need selection:</label>
<select id="selectNeedSelectedNew" name="need_selected">
<option value="0">No selection needed</option>
<option value="1">Need a selection</option>
</select>
<br>
<label for="selectNeedSignatureNew">Need signature:</label>
<select id="selectNeedSignatureNew" name="need_signature">
<option value="0">No signature needed</option>
<option value="1">Signature needed</option>
</select>
<br>
<label for="selectNeedCustomTextNew">Need custom text:</label>
<select id="selectNeedCustomTextNew" name="need_custom_text">
<option value="0">No custom text needed</option>
<option value="1">Custom text needed</option>
</select>
<br>
<button id="btnAddNew">__MSG_customPrompts_btnAddNewCommit__</button>
</div>
<div id="all_prompts">
<table>
<thead>
<tr>
<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>ID</th>
<th>Name</th>
<th>Text</th>
<th>Properties</th>
<th>Action</th>
</tr>
</thead>
<tbody class="list">

View file

@ -16,31 +16,55 @@
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import { defaultPrompts } from "../js/mzta-prompts.js";
import { getPrompts } from "../js/mzta-prompts.js";
var somethingChanged = false;
document.addEventListener('DOMContentLoaded', async () => {
let options = {
valueNames: [ 'id', 'name', 'text', 'type', 'action', { 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: 'enabled_val'} ],
item: `<tr>
<td class="id"></td>
<td class="name"></td>
<td class="text"></td>
<td class="properties">
<input type="checkbox" class="need_selected"> Need Select
<br>
<input type="checkbox" class="need_signature"> Need Signature
<br>
<input type="checkbox" class="need_custom_text"> Need Custom Text
<br>
<span class="is_default">Is Default</span>
<br>
<span class="enabled">Enabled</span>
</td>
</tr>`
valueNames: [ { data: ['idnum'] }, 'id', 'name', 'text', 'type', 'action', { 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'} ],
// item: `<tr>
// <td class="id"></td>
// <td class="name"></td>
// <td class="text"></td>
// <td class="properties">
// <input type="checkbox" class="need_selected"> Need Select
// <br>
// <input type="checkbox" class="need_signature"> Need Signature
// <br>
// <input type="checkbox" class="need_custom_text"> Need Custom Text
// <br>
// <span class="is_default">Is Default</span>
// <br>
// <input type="checkbox" class="enabled"> Enabled
// </td>
// </tr>`
item: function(values) {
let output = `<tr ` + ((values.is_default == 1) ? 'class="is_default"':'') + `>
<td class="id"></td>
<td class="name"></td>
<td class="text"></td>
<td class="properties">
<input type="checkbox" class="need_selected"` + ((values.is_default == 1) ? 'disabled':'') + `> Need Select
<br>
<input type="checkbox" class="need_signature" ` + ((values.is_default == 1) ? 'disabled':'') + `> Need Signature
<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>
</td>
<td>
` + ((values.is_default == 0) ? '<button class="btnEdit">Edit</button>':'') + `
</td>
</tr>`;
//console.log('>>>>>>>> values.name: ' + JSON.stringify(values.name));
return output;
}
};
let values = defaultPrompts; // test in browser
//let values = await getPrompts(); // production
//let values = getDefaultPrompts_withProps; // test in browser
let values = await getPrompts(); // production
console.log('>>>>>>>>>>>>>>>> values: ' + JSON.stringify(values));
@ -48,16 +72,52 @@ document.addEventListener('DOMContentLoaded', async () => {
checkSelectedBoxes();
//i18n.updateDocument(); // production
const btnSave = document.getElementById('btnSave');
btnSave.disabled = true;
btnSave.addEventListener('click', (e) => { //TODO
e.preventDefault();
});
const btnNew = document.getElementById('btnNew');
btnNew.addEventListener('click', (e) => {
e.preventDefault();
document.getElementById('formNew').style.display = 'block';
});
const btnAddNew = document.getElementById('btnNew');
btnAddNew.addEventListener('click', (e) => { //TODO
e.preventDefault();
});
document.querySelectorAll('input').forEach(element => {
element.addEventListener('change', (e) => {
e.preventDefault();
btnSave.disabled = false;
somethingChanged = true;
});
})
let btnEdit_elements = document.querySelectorAll(".btnEdit")
if(btnEdit_elements) {
btnEdit_elements.forEach(element => {
element.addEventListener('click', (e) => {
e.preventDefault();
const tr = e.target.parentNode.parentNode; //TODO
console.log('>>>>>>>> tr: ' + tr.getAttribute('data-idnum'));
});
});
}
i18n.updateDocument();
}, { once: true });
function checkSelectedBoxes() {
// Get all elements with the class 'need_selected' that are checkboxes
const checkboxes = [
...document.querySelectorAll('.need_selected[type="checkbox"]'),
...document.querySelectorAll('.need_signature[type="checkbox"]'),
...document.querySelectorAll('.need_custom_text[type="checkbox"]'),
...document.querySelectorAll('.enabled[type="checkbox"]'),
];
// Iterate through the checkboxes
@ -70,4 +130,11 @@ function checkSelectedBoxes() {
checkbox.checked = true;
}
});
}
}
window.addEventListener('beforeunload', function (event) {
// Check if any changes have been made
if (somethingChanged) {
event.preventDefault();
}
});

View file

@ -54,8 +54,7 @@
*/
export const defaultPrompts = [ // test in browser
//const defaultPrompts = [ // production
const defaultPrompts = [
{
id: 'prompt_reply',
name: "__MSG_prompt_reply__",
@ -141,13 +140,18 @@ export async function getPrompts(){
const customPrompts = await getCustomPrompts();
let output = defaultPrompts.concat(customPrompts);
output.sort((a, b) => a.position - b.position);
for(let i=1; i<=output.length; i++){
output[i-1].idnum = i;
}
return output;
}
async function getDefaultPrompts_withProps() {
let prefs = await browser.storage.sync.get({_default_prompts_properties: null});
// 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) => {