From 065cd6dec9c6d9441af6a45e4edfe911a7765c08 Mon Sep 17 00:00:00 2001 From: root Date: Wed, 21 Feb 2024 02:40:14 -0500 Subject: [PATCH] Nicer format for Auto Run rules. --- .../javascript/ui/panel/AutoRunModuleForm.js | 53 ++++++++++-------- .../javascript/ui/panel/AutoRunRuleForm.js | 18 ++++--- .../media/javascript/ui/panel/AutoRunTab.js | 54 +++++++++++++------ 3 files changed, 79 insertions(+), 46 deletions(-) diff --git a/extensions/admin_ui/media/javascript/ui/panel/AutoRunModuleForm.js b/extensions/admin_ui/media/javascript/ui/panel/AutoRunModuleForm.js index a72272a58..002f0a232 100644 --- a/extensions/admin_ui/media/javascript/ui/panel/AutoRunModuleForm.js +++ b/extensions/admin_ui/media/javascript/ui/panel/AutoRunModuleForm.js @@ -10,9 +10,35 @@ AutoRunModuleForm = function(moduleData, deleteFn, moveUp, moveDown, ruleId, ind const moduleTextAreaId = `rule-${ruleId}-module-textarea-${index}`; const chainModeComboId = `rule-${ruleId}-module-combo-${index}`; + const buttonContainer = new Ext.Container({ + layout: { + type: 'hbox', + pack: 'end', + }, + items: [ + { + xtype: 'button', + text: 'Delete', + handler: deleteFn, + },{ + xtype: 'button', + text: 'Move Forward', + handler: moveUp, + disabled: moveUp == undefined, + },{ + xtype: 'button', + text: 'Move Back', + handler: moveDown, + disabled: moveDown == undefined, + } + ] + }); + AutoRunModuleForm.superclass.constructor.call(this, { - padding:'10 10 10 10', - items: [/*{ + padding: '10 10 10 10', + closable: false, + items: [ + /*{ xtype: 'combo', id: chainModeComboId, fieldLabel: 'Chain Mode', @@ -31,25 +57,8 @@ AutoRunModuleForm = function(moduleData, deleteFn, moveUp, moveDown, ruleId, ind grow: true, width: '80%' }, - { - xtype: 'button', - text: 'Delete', - handler: deleteFn, - },{ - xtype: 'button', - text: 'Move Forward', - handler: moveUp, - disabled: moveUp == undefined - },{ - xtype: 'button', - text: 'Move Back', - handler: moveDown, - disabled: moveDown == undefined - } - ], - border: false, - closable: false - }); + buttonContainer + ]}); }; -Ext.extend(AutoRunModuleForm, Ext.Container, {}); \ No newline at end of file +Ext.extend(AutoRunModuleForm, Ext.Panel, {}); \ No newline at end of file diff --git a/extensions/admin_ui/media/javascript/ui/panel/AutoRunRuleForm.js b/extensions/admin_ui/media/javascript/ui/panel/AutoRunRuleForm.js index c67f8ebf7..be540d8d7 100644 --- a/extensions/admin_ui/media/javascript/ui/panel/AutoRunRuleForm.js +++ b/extensions/admin_ui/media/javascript/ui/panel/AutoRunRuleForm.js @@ -21,12 +21,17 @@ const areNotificationUpdateTest = { * deleteFn: callback function to delete this rule. * updateFn: callback function to update this rule. */ -AutoRunRuleForm = function(rule, deleteFn, updateFn, addFn) { +AutoRunRuleForm = function(rule, deleteFn, updateFn) { const self = this; const ruleTextFieldId = `rule-name-${rule.id}`; const chainModeComboId = `rule-chain-mode-${rule.id}`; const modules = JSON.parse(rule['modules']); - const moduleContainer = new Ext.Container(); + const execution_order = rule['modules']; + const moduleContainer = new Ext.Container({ + style: { + padding: '10 10 10 10', + } + }); function reorderModule(index, direction) { // Rearrange modules into new order. @@ -41,13 +46,15 @@ AutoRunRuleForm = function(rule, deleteFn, updateFn, addFn) { } function setupModuleForms() { + console.log(execution_order); moduleContainer.removeAll(true); + // I think execution order should always be sequential. + // The actual order comed from the modules array. for (let i = 0; i < modules.length; ++i) { const isFirstModule = i === 0; const isLastModule = i >= modules.length - 1; - // TODO: Push them in execution order. moduleContainer.add(new AutoRunModuleForm( modules[i], function() {console.log("delete this module")}, @@ -79,6 +86,7 @@ AutoRunRuleForm = function(rule, deleteFn, updateFn, addFn) { AutoRunRuleForm.superclass.constructor.call(this, { padding:'10 10 10 10', + title: `Rule ${rule.id}`, items: [{ xtype: 'textfield', id: ruleTextFieldId, @@ -133,10 +141,6 @@ AutoRunRuleForm = function(rule, deleteFn, updateFn, addFn) { }, { text: 'Save', handler: handleUpdateRule - }, - { - text: 'Add New', - handler: addFn }], border: false, closable: false diff --git a/extensions/admin_ui/media/javascript/ui/panel/AutoRunTab.js b/extensions/admin_ui/media/javascript/ui/panel/AutoRunTab.js index 516967ff0..742486356 100644 --- a/extensions/admin_ui/media/javascript/ui/panel/AutoRunTab.js +++ b/extensions/admin_ui/media/javascript/ui/panel/AutoRunTab.js @@ -23,7 +23,6 @@ const areNotification = { * null if there was an error. */ getCurrentRules = async function(token) { - console.log(`token = ${token}`); try { var res = await fetch(`/api/autorun/rules?token=${token}`); @@ -54,13 +53,37 @@ AutoRunTab = function() { // RESTful API token. var token = BeefWUI.get_rest_token(); - // Setup container element. - var container = new Ext.Panel({ - style: { - font: '11px tahoma,arial,helvetica,sans-serif', - width: '500px' - }, + // Heading container to describe general Auto Run state. + var ruleLoadingState = new Ext.Container({ html: "

Loading Auto Run rules...

", + }) + var headingContainer = new Ext.Panel({ + style: { + font: '11px tahoma,arial,helvetica,sans-serif' + }, + padding:'10 10 10 10', + border: false, + items: [{ + xtype: 'container', + html: '\ +
\ +

Auto Run Rules

\ +

These determine what commands run automatically when a browser is hooked.

\ +
' + }, + ruleLoadingState, + { + xtype: 'button', + text: 'Add New Rule', + handler: addRule + }], + listeners: { + afterrender: loadRules + } + }); + // Contains all of the rules and inputs to change each rule. + var ruleContainer = new Ext.Panel({ + border: false, listeners: { afterrender: loadRules } @@ -85,7 +108,6 @@ AutoRunTab = function() { } async function updateRule(id, newRuleData) { - // TODO: Check if this API endpoint even exists. const res = await fetch(`/api/autorun/rule/${id}?token=${token}`, { method: 'PATCH', headers: {'Content-Type': 'application/json'}, @@ -99,28 +121,26 @@ AutoRunTab = function() { async function loadRules() { const rules = await getCurrentRules(token); if (rules !== null) { - console.log(`

Number of Auto Run rules enabled: ${rules.length}.

`); - container.update(`

Number of Auto Run rules enabled: ${rules.length}.

`); + ruleLoadingState.update(`

Loaded ${rules.length} Auto Run rules.

`); + ruleContainer.removeAll(); for (let i = 0; i < rules.length; i++) { ruleForm = new AutoRunRuleForm( rules[i], function() {deleteRule(rules[i].id)}, - function(newRuleData) {updateRule(rules[i].id, newRuleData)}, - addRule + function(newRuleData) {updateRule(rules[i].id, newRuleData)} ); - container.add(ruleForm); + ruleContainer.add(ruleForm); } - container.doLayout(); + ruleContainer.doLayout(); } else { - container.update("

Failed to load Auto Run rules.

"); + ruleLoadingState.update("

Failed to load Auto Run rules.

"); } } AutoRunTab.superclass.constructor.call(this, { region: 'center', - padding:'10 10 10 10', - items: [container], + items: [headingContainer, ruleContainer], autoScroll: true, border: false, closable: false