Nicer format for Auto Run rules.

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, {}); 
+Ext.extend(AutoRunModuleForm, Ext.Panel, {}); 

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

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: "<p>Loading Auto Run rules...</p>",
+    })
+    var headingContainer = new Ext.Panel({
+        style: {
+            font: '11px tahoma,arial,helvetica,sans-serif'
+        },
+        padding:'10 10 10 10',
+        border: false,
+        items: [{
+            xtype: 'container',
+            html: '\
+                <div>\
+                    <h4>Auto Run Rules</h4>\
+                    <p>These determine what commands run automatically when a browser is hooked.</p>\
+                </div>'
+        },
+            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(`<p>Number of Auto Run rules enabled: ${rules.length}.</p>`);
-            container.update(`<p>Number of Auto Run rules enabled: ${rules.length}.</p>`);
+            ruleLoadingState.update(`<p>Loaded ${rules.length} Auto Run rules.</p>`);
+            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("<p>Failed to load Auto Run rules.</p>");
+            ruleLoadingState.update("<p>Failed to load Auto Run rules.</p>");
         }
     } 
 
     AutoRunTab.superclass.constructor.call(this, {
             region: 'center',
-            padding:'10 10 10 10',
-            items: [container],
+            items: [headingContainer, ruleContainer],
             autoScroll: true,
             border: false,
             closable: false