added btns and new form. still work in progress. #12
This commit is contained in:
parent
5c2e7a63f6
commit
f459cf72e8
4 changed files with 154 additions and 29 deletions
|
|
@ -45,3 +45,11 @@ table td {
|
|||
table td.properties{
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.hiddendata{
|
||||
display: none;
|
||||
}
|
||||
|
||||
#formNew{
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
});
|
||||
|
|
@ -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) => {
|
||||
|
|
|
|||
Loading…
Reference in a new issue