browser_config: Add select input for SPIFFS files

components/browser_config/browser_config.c

@@ -20,30 +20,30 @@ extern const uint8_t browser_config_html_end[]   asm("_binary_browser_config_htm
 // List of config options to present
 nvs_handle_t config_nvs_handle;
 config_entry_t config_entries[] = {
-    {.key = "hostname", .dataType = STR, .writeOnly = false},
-    {.key = "sta_ssid", .dataType = STR, .writeOnly = false},
-    {.key = "sta_anon_ident", .dataType = STR, .writeOnly = false},
-    {.key = "sta_ident", .dataType = STR, .writeOnly = false},
-    {.key = "sta_pass", .dataType = STR, .writeOnly = false},
-    {.key = "sta_phase2", .dataType = U8, .writeOnly = false},
-    {.key = "sta_phase2_ttls", .dataType = U8, .writeOnly = false},
-    {.key = "sta_retries", .dataType = U8, .writeOnly = false},
-    {.key = "ap_ssid", .dataType = STR, .writeOnly = false},
-    {.key = "ap_pass", .dataType = STR, .writeOnly = false},
-    {.key = "tg_bot_token", .dataType = STR, .writeOnly = true},
-    {.key = "disp_led_gamma", .dataType = U16, .writeOnly = false},
-    {.key = "sel_conf_file", .dataType = STR, .writeOnly = false},
-    {.key = "wg_private_key", .dataType = STR, .writeOnly = true},
-    {.key = "wg_public_key", .dataType = STR, .writeOnly = true},
-    {.key = "wg_allowed_ip", .dataType = STR, .writeOnly = false},
-    {.key = "wg_allowed_mask", .dataType = STR, .writeOnly = false},
-    {.key = "wg_listen_port", .dataType = U16, .writeOnly = false},
-    {.key = "wg_endpoint", .dataType = STR, .writeOnly = false},
-    {.key = "wg_endpnt_port", .dataType = U16, .writeOnly = false},
-    {.key = "wg_keepalive", .dataType = U16, .writeOnly = false},
-    {.key = "poll_url", .dataType = STR, .writeOnly = false},
-    {.key = "poll_token", .dataType = STR, .writeOnly = false},
-    {.key = "poll_interval", .dataType = U16, .writeOnly = false},
+    {.key = "hostname", .dataType = STR, .flags = CONFIG_FIELD_FLAGS_NONE},
+    {.key = "sta_ssid", .dataType = STR, .flags = CONFIG_FIELD_FLAGS_NONE},
+    {.key = "sta_anon_ident", .dataType = STR, .flags = CONFIG_FIELD_FLAGS_NONE},
+    {.key = "sta_ident", .dataType = STR, .flags = CONFIG_FIELD_FLAGS_NONE},
+    {.key = "sta_pass", .dataType = STR, .flags = CONFIG_FIELD_FLAGS_NONE},
+    {.key = "sta_phase2", .dataType = U8, .flags = CONFIG_FIELD_FLAGS_NONE},
+    {.key = "sta_phase2_ttls", .dataType = U8, .flags = CONFIG_FIELD_FLAGS_NONE},
+    {.key = "sta_retries", .dataType = U8, .flags = CONFIG_FIELD_FLAGS_NONE},
+    {.key = "ap_ssid", .dataType = STR, .flags = CONFIG_FIELD_FLAGS_NONE},
+    {.key = "ap_pass", .dataType = STR, .flags = CONFIG_FIELD_FLAGS_NONE},
+    {.key = "tg_bot_token", .dataType = STR, .flags = CONFIG_FIELD_FLAGS_WRITE_ONLY},
+    {.key = "disp_led_gamma", .dataType = U16, .flags = CONFIG_FIELD_FLAGS_NONE},
+    {.key = "sel_conf_file", .dataType = STR, .flags = CONFIG_FIELD_FLAG_SPIFFS_FILE_SELECT},
+    {.key = "wg_private_key", .dataType = STR, .flags = CONFIG_FIELD_FLAGS_WRITE_ONLY},
+    {.key = "wg_public_key", .dataType = STR, .flags = CONFIG_FIELD_FLAGS_WRITE_ONLY},
+    {.key = "wg_allowed_ip", .dataType = STR, .flags = CONFIG_FIELD_FLAGS_NONE},
+    {.key = "wg_allowed_mask", .dataType = STR, .flags = CONFIG_FIELD_FLAGS_NONE},
+    {.key = "wg_listen_port", .dataType = U16, .flags = CONFIG_FIELD_FLAGS_NONE},
+    {.key = "wg_endpoint", .dataType = STR, .flags = CONFIG_FIELD_FLAGS_NONE},
+    {.key = "wg_endpnt_port", .dataType = U16, .flags = CONFIG_FIELD_FLAGS_NONE},
+    {.key = "wg_keepalive", .dataType = U16, .flags = CONFIG_FIELD_FLAGS_NONE},
+    {.key = "poll_url", .dataType = STR, .flags = CONFIG_FIELD_FLAGS_NONE},
+    {.key = "poll_token", .dataType = STR, .flags = CONFIG_FIELD_FLAGS_WRITE_ONLY},
+    {.key = "poll_interval", .dataType = U16, .flags = CONFIG_FIELD_FLAGS_NONE},
 };
 
 
@@ -77,13 +77,14 @@ static esp_err_t config_get_fields_handler(httpd_req_t *req) {
         cJSON* entry = cJSON_CreateObject();
         cJSON_AddStringToObject(entry, "name", config_entries[i].key);
         cJSON_AddNumberToObject(entry, "type", config_entries[i].dataType);
+        cJSON_AddNumberToObject(entry, "flags", (uint32_t)config_entries[i].flags);
 
         if (config_entries[i].dataType == BLOB) {
             // Not yet implemented
         } else if (config_entries[i].dataType == STR) {
             // Query string length
             size_t valueLength;
-            if (config_entries[i].writeOnly == true) {
+            if (config_entries[i].flags & CONFIG_FIELD_FLAGS_WRITE_ONLY) {
                 // The string "<unchanged>" will also be checked for when receiving field data.
                 // This means that a field can not actually have this value.
                 // This seems acceptable.

components/browser_config/include/browser_config.h

@@ -17,10 +17,16 @@ typedef enum config_data_type {
     BLOB = 19
 } config_data_type_t;
 
+typedef enum config_field_flags {
+    CONFIG_FIELD_FLAGS_NONE = 0,
+    CONFIG_FIELD_FLAGS_WRITE_ONLY = 1, // If set, fields.json will not contain the actual value. Good for things like passwords or access tokens. Only works for strings at the moment.
+    CONFIG_FIELD_FLAG_SPIFFS_FILE_SELECT = 2 // For STR entries, makes the field show a select input populated with filenames from SPIFFS
+} config_field_flags_t;
+
 typedef struct config_entry {
     char* key;
     config_data_type_t dataType;
-    bool writeOnly; // If true, fields.json will not contain the actual value. Good for things like passwords or access tokens. Only works for strings at the moment.
+    config_field_flags_t flags;
 } config_entry_t;
 
 

components/browser_config/static/browser_config.html

@@ -64,6 +64,13 @@
         17: 0xFFFFFFFFFFFFFFFF
       };
 
+      var fieldFlags = {
+        "WRITE_ONLY": 1,
+        "SPIFFS_FILE_SELECT": 2
+      };
+
+      var spiffs_files = [];
+
       function getFields() {
         $.ajax({
           type: "GET",
@@ -74,8 +81,17 @@
         });
       }
 
+      function getFileList() {
+        $.ajax({
+          type: "GET",
+          url: "/spiffs/files.json",
+          success: onGetFileListSuccess,
+          error: onGetFileListError
+        });
+      }
+
       function onGetFieldsSuccess(data, textStatus, jqXHR) {
-        console.log(data);
+        //console.log(data);
         buildForm(data["fields"]);
       }
       
@@ -83,6 +99,17 @@
         console.log("Error getting fields!");
         console.log(errorThrown);
       }
+      
+      function onGetFileListSuccess(data, textStatus, jqXHR) {
+        console.log("Successfully got file list");
+        spiffs_files = data['files'];
+      }
+      
+      function onGetFileListError(jqXHR, textStatus, errorThrown) {
+        console.log("Error getting file list!");
+        console.log(textStatus);
+        console.log(errorThrown);
+      }
 
       function postUpdate() {
         var formData = getConfigData();
@@ -118,7 +145,25 @@
             field_element.val(field["value"]);
           } else if (fieldTypes[field["type"]] == "STR") {
             // String field
-            var field_element = $('<input type="text">');
+            var field_element;
+            if (field["flags"] & fieldFlags["SPIFFS_FILE_SELECT"]) {
+              field_element = $("<select>");
+
+              // Empty option
+              var option = $("<option>");
+              option.attr("value", "");
+              option.text("");
+              field_element.append(option);
+
+              for (const filename of spiffs_files) {
+                var option = $("<option>");
+                option.attr("value", filename);
+                option.text(filename);
+                field_element.append(option);
+              }
+            } else {
+              field_element = $('<input type="text">');
+            }
             field_element.prop("name", field["name"]);
             field_element.val(field["value"]);
           } else if (fieldTypes[field["type"]] == "BLOB") {
@@ -138,7 +183,7 @@
       }
 
       function getConfigData() {
-        var inputs = $("#config-fields input");
+        var inputs = $("#config-fields input, select");
         var field_array = [];
         for (var i = 0; i < inputs.length; i += 2) {
           var field_name = $(inputs[i]).prop("name");
@@ -146,8 +191,10 @@
           if (["I8", "I16", "I32", "I64", "U8", "U16", "U32", "U64"].indexOf(fieldTypes[field_type]) != -1) {
             // Numerical field
             var field_value = parseInt($(inputs[i]).val());
+            if (field_value == null) field_value = 0;
           } else {
             var field_value = $(inputs[i]).val();
+            if (field_value == null) field_value = "";
           }
           var entry = {"name": field_name, "type": field_type, "value": field_value};
           field_array.push(entry);
@@ -191,6 +238,7 @@
 
       function onReady() {
         getDeviceInfo(onGetDeviceInfoSuccess, onGetDeviceInfoError);
+        getFileList();
         getFields();
         $("#btn-save").click(onSave);
         $("#btn-restart").click(restartSystem);