Allow selecting a different file

data/www/index.html

@@ -19,8 +19,8 @@
     </div>
 
     <div class="w3-margin w3-center w3-card w3-padding-24">
-        <h3 class="w3-padding">Fichier sélectionné</h3>
+        <h3 class="w3-padding">Fichiers disponibles</h3>
-        <p class="w3-xxlarge" id="selected-file">Aucun</p>
+        <div id="available-files"></div>
     </div>
 </body>
 

data/www/script.js

@@ -4,3 +4,34 @@ function play() {
     xhttp.open("GET", "play", true);
     xhttp.send();
 }
+
+function loadAvailableFiles() {
+    console.log("Available files...");
+    fetch("/available-files")
+        .then(response => response.json())
+        .then(data => {
+            console.log("data", data);
+            let dom = "";
+            data.files.forEach(element => {
+                if (element === data.selectedFile) {
+                    dom += `<button class="w3-button w3-green" onclick="selectFile('${element}')">${element}</button>`;
+                }
+                else {
+                    dom += `<button class="w3-button w3-blue" onclick="selectFile('${element}')">${element}</button>`;
+                }
+            });
+            document.getElementById("available-files").innerHTML = dom;
+        });
+}
+
+function selectFile(name) {
+    console.log("Select file");
+    const body = new FormData();
+    body.set("fileName", name);
+    fetch("/select-file", {method: "POST", body: body})
+        .then(res => loadAvailableFiles());
+}
+
+(() => {
+    loadAvailableFiles();
+})();

platformio.ini

@@ -17,3 +17,4 @@ monitor_speed = 115200
 lib_deps =
     https://github.com/me-no-dev/ESPAsyncWebServer.git
     AsyncTCP
+    bblanchon/ArduinoJson

src/main.cpp

@@ -1,12 +1,14 @@
 #include <Arduino.h>
 #include <ESPAsyncWebServer.h>
 #include <SPIFFS.h>
+#include <AsyncJson.h>
 #include "creds.h"
 
 // #define B_WIFI_AP
 
 const byte led = 2;
 bool ledOn = false;
+String selectedFile = "";
 
 AsyncWebServer server(80);
 
@@ -26,6 +28,42 @@ void onPlay(AsyncWebServerRequest *request)
   request->send(200);
 }
 
+void onAvailableFiles(AsyncWebServerRequest *request)
+{
+  Serial.println("Available files");
+  AsyncResponseStream *response = request->beginResponseStream("application/json");
+  
+  DynamicJsonDocument root(256);
+  root["selectedFile"] = selectedFile;
+  JsonArray files = root.createNestedArray("files");
+  File music = SPIFFS.open("/music");
+  File file = music.openNextFile();
+  while (file)
+  {
+    Serial.print("File: ");
+    String fileName = file.name();
+    Serial.println(fileName);
+    files.add(fileName);
+    file.close();
+    file = music.openNextFile();
+  }
+  serializeJson(root, *response);
+  
+  request->send(response);
+}
+
+void onSelectFile(AsyncWebServerRequest *request)
+{
+  Serial.print("Select file: ");
+  if (request->hasParam("fileName", true))
+  {
+    selectedFile = request->getParam("fileName", true)->value();
+    Serial.print(selectedFile);
+  }
+  Serial.println();
+  request->send(200);
+}
+
 void setup()
 {
   // Setup serial
@@ -71,6 +109,8 @@ void setup()
 
   // Server
   server.on("/play", HTTP_GET, onPlay);
+  server.on("/available-files", HTTP_GET, onAvailableFiles);
+  server.on("/select-file", HTTP_POST, onSelectFile);
   server.serveStatic("/", SPIFFS, "/www/").setDefaultFile("index.html");
   server.begin();
   Serial.println("Server ready!");