Created the template for accessing all the api functionalities via web ui
This commit is contained in:
@@ -50,9 +50,174 @@ void api_root() {
|
||||
html += "<title>Web UI | " + version + "</title>";
|
||||
html += "<link href='https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN' crossorigin='anonymous'>";
|
||||
html += "</head><body data-bs-theme='dark'>";
|
||||
html += "<div class='text-center container-sm' style='padding: 4em 0em'>";
|
||||
|
||||
html += "<div style='text-align:center;'><br><br><p>Web Interface of your</p><h3>NetSpeaker</h3><br><hr><br><p>Work in progress!</p></div>";
|
||||
html += "<p>Welcome to</p>";
|
||||
html += "<h1>" + configuration.getString(PREFERENCES_KEY_FRIENDLY_NAME, "NetSpeaker") + "</h1>";
|
||||
html += "<code>" + version + "</code>";
|
||||
|
||||
html += "<hr style='margin: 3em 0em;'>";
|
||||
|
||||
// informations accordion
|
||||
html += "<div class='accordion text-start' id='accordion-info'>";
|
||||
html += " <div class='accordion-item'>";
|
||||
html += " <h2 class='accordion-header'>";
|
||||
html += " <button class='accordion-button collapsed' type='button' data-bs-toggle='collapse' data-bs-target='#accordion-info-general' aria-expanded='true' aria-controls='accordion-info-general'>";
|
||||
html += " General information";
|
||||
html += " </button>";
|
||||
html += " </h2>";
|
||||
html += " <div id='accordion-info-general' class='accordion-collapse collapse' data-bs-parent='#accordion-info'>";
|
||||
html += " <div class='accordion-body'>";
|
||||
html += " <strong>Work in progress</strong>";
|
||||
html += " </div>";
|
||||
html += " </div>";
|
||||
html += " </div>";
|
||||
html += " <div class='accordion-item'>";
|
||||
html += " <h2 class='accordion-header'>";
|
||||
html += " <button class='accordion-button collapsed' type='button' data-bs-toggle='collapse' data-bs-target='#accordion-info-playback' aria-expanded='true' aria-controls='accordion-info-playback'>";
|
||||
html += " Playback information";
|
||||
html += " </button>";
|
||||
html += " </h2>";
|
||||
html += " <div id='accordion-info-playback' class='accordion-collapse collapse' data-bs-parent='#accordion-info'>";
|
||||
html += " <div class='accordion-body'>";
|
||||
html += " <strong>Work in progress</strong>";
|
||||
html += " </div>";
|
||||
html += " </div>";
|
||||
html += " </div>";
|
||||
html += "</div>";
|
||||
|
||||
html += "<hr style='margin: 3em 0em;'>";
|
||||
|
||||
// api functions accordion
|
||||
html += "<div class='accordion text-start' id='accordion'>";
|
||||
html += " <div class='accordion-item'>";
|
||||
html += " <h2 class='accordion-header'>";
|
||||
html += " <button class='accordion-button collapsed' type='button' data-bs-toggle='collapse' data-bs-target='#accordion-collapse-playback' aria-expanded='true' aria-controls='accordion-collapse-playback'>";
|
||||
html += " Playback";
|
||||
html += " <span class='badge text-bg-success'>/api/v1/playback/</span>";
|
||||
html += " </button>";
|
||||
html += " </h2>";
|
||||
html += " <div id='accordion-collapse-playback' class='accordion-collapse collapse' data-bs-parent='#accordion'>";
|
||||
html += " <div class='accordion-body'>";
|
||||
html += " <strong>Work in progress</strong>";
|
||||
html += " </div>";
|
||||
html += " </div>";
|
||||
html += " </div>";
|
||||
|
||||
html += " <div class='accordion-item'>";
|
||||
html += " <h2 class='accordion-header'>";
|
||||
html += " <button class='accordion-button collapsed' type='button' data-bs-toggle='collapse' data-bs-target='#accordion-collapse-volume' aria-expanded='true' aria-controls='accordion-collapse-volume'>";
|
||||
html += " Volume";
|
||||
html += " <span class='badge text-bg-info'>/api/v1/volume/</span>";
|
||||
html += " </button>";
|
||||
html += " </h2>";
|
||||
html += " <div id='accordion-collapse-volume' class='accordion-collapse collapse' data-bs-parent='#accordion'>";
|
||||
html += " <div class='accordion-body'>";
|
||||
html += " <strong>Work in progress</strong>";
|
||||
html += " </div>";
|
||||
html += " </div>";
|
||||
html += " </div>";
|
||||
|
||||
html += " <div class='accordion-item'>";
|
||||
html += " <h2 class='accordion-header'>";
|
||||
html += " <button class='accordion-button collapsed' type='button' data-bs-toggle='collapse' data-bs-target='#accordion-collapse-playlist' aria-expanded='true' aria-controls='accordion-collapse-playlist'>";
|
||||
html += " Playlist";
|
||||
html += " <span class='badge text-bg-success'>/api/v1/playlist/</span>";
|
||||
html += " </button>";
|
||||
html += " </h2>";
|
||||
html += " <div id='accordion-collapse-playlist' class='accordion-collapse collapse' data-bs-parent='#accordion'>";
|
||||
html += " <div class='accordion-body'>";
|
||||
html += " <strong>Work in progress</strong>";
|
||||
html += " </div>";
|
||||
html += " </div>";
|
||||
html += " </div>";
|
||||
|
||||
html += " <div class='accordion-item'>";
|
||||
html += " <h2 class='accordion-header'>";
|
||||
html += " <button class='accordion-button collapsed' type='button' data-bs-toggle='collapse' data-bs-target='#accordion-collapse-balance' aria-expanded='true' aria-controls='accordion-collapse-balance'>";
|
||||
html += " Balance";
|
||||
html += " <span class='badge text-bg-info'>/api/v1/balance/</span>";
|
||||
html += " </button>";
|
||||
html += " </h2>";
|
||||
html += " <div id='accordion-collapse-balance' class='accordion-collapse collapse' data-bs-parent='#accordion'>";
|
||||
html += " <div class='accordion-body'>";
|
||||
html += " <strong>Work in progress</strong>";
|
||||
html += " </div>";
|
||||
html += " </div>";
|
||||
html += " </div>";
|
||||
|
||||
html += " <div class='accordion-item'>";
|
||||
html += " <h2 class='accordion-header'>";
|
||||
html += " <button class='accordion-button collapsed' type='button' data-bs-toggle='collapse' data-bs-target='#accordion-collapse-eq' aria-expanded='true' aria-controls='accordion-collapse-eq'>";
|
||||
html += " Equalizer";
|
||||
html += " <span class='badge text-bg-info'>/api/v1/eq/</span>";
|
||||
html += " </button>";
|
||||
html += " </h2>";
|
||||
html += " <div id='accordion-collapse-eq' class='accordion-collapse collapse' data-bs-parent='#accordion'>";
|
||||
html += " <div class='accordion-body'>";
|
||||
html += " <strong>Work in progress</strong>";
|
||||
html += " </div>";
|
||||
html += " </div>";
|
||||
html += " </div>";
|
||||
|
||||
html += " <div class='accordion-item'>";
|
||||
html += " <h2 class='accordion-header'>";
|
||||
html += " <button class='accordion-button collapsed' type='button' data-bs-toggle='collapse' data-bs-target='#accordion-collapse-frname' aria-expanded='true' aria-controls='accordion-collapse-frname'>";
|
||||
html += " Friendly name";
|
||||
html += " <span class='badge text-bg-warning'>/api/v1/system/name</span>"; // explicitly no trailing / as there are the two endpoints /name and /name/change
|
||||
html += " </button>";
|
||||
html += " </h2>";
|
||||
html += " <div id='accordion-collapse-frname' class='accordion-collapse collapse' data-bs-parent='#accordion'>";
|
||||
html += " <div class='accordion-body'>";
|
||||
html += " <strong>Work in progress</strong>";
|
||||
html += " </div>";
|
||||
html += " </div>";
|
||||
html += " </div>";
|
||||
|
||||
html += " <div class='accordion-item'>";
|
||||
html += " <h2 class='accordion-header'>";
|
||||
html += " <button class='accordion-button collapsed' type='button' data-bs-toggle='collapse' data-bs-target='#accordion-collapse-wifi' aria-expanded='true' aria-controls='accordion-collapse-wifi'>";
|
||||
html += " WiFi configuration";
|
||||
html += " <span class='badge text-bg-warning'>/api/v1/system/wifi/</span>";
|
||||
html += " </button>";
|
||||
html += " </h2>";
|
||||
html += " <div id='accordion-collapse-wifi' class='accordion-collapse collapse' data-bs-parent='#accordion'>";
|
||||
html += " <div class='accordion-body'>";
|
||||
html += " <strong>Work in progress</strong>";
|
||||
html += " </div>";
|
||||
html += " </div>";
|
||||
html += " </div>";
|
||||
|
||||
html += " <div class='accordion-item'>";
|
||||
html += " <h2 class='accordion-header'>";
|
||||
html += " <button class='accordion-button collapsed' type='button' data-bs-toggle='collapse' data-bs-target='#accordion-collapse-restore' aria-expanded='true' aria-controls='accordion-collapse-restore'>";
|
||||
html += " Save & Restore";
|
||||
html += " <span class='badge text-bg-warning'>/api/v1/system/restore_state/</span>";
|
||||
html += " <span class='badge text-bg-warning'>/api/v1/system/restore_playing/</span>";
|
||||
html += " </button>";
|
||||
html += " </h2>";
|
||||
html += " <div id='accordion-collapse-restore' class='accordion-collapse collapse' data-bs-parent='#accordion'>";
|
||||
html += " <div class='accordion-body'>";
|
||||
html += " <strong>Work in progress</strong>";
|
||||
html += " </div>";
|
||||
html += " </div>";
|
||||
html += " </div>";
|
||||
|
||||
html += " <div class='accordion-item'>";
|
||||
html += " <h2 class='accordion-header'>";
|
||||
html += " <button class='accordion-button collapsed' type='button' data-bs-toggle='collapse' data-bs-target='#accordion-collapse-restart' aria-expanded='true' aria-controls='accordion-collapse-restart'>";
|
||||
html += " Restart";
|
||||
html += " <span class='badge text-bg-danger'>/api/v1/system/restart</span>";
|
||||
html += " </button>";
|
||||
html += " </h2>";
|
||||
html += " <div id='accordion-collapse-restart' class='accordion-collapse collapse' data-bs-parent='#accordion'>";
|
||||
html += " <div class='accordion-body'>";
|
||||
html += " <strong>Work in progress</strong>";
|
||||
html += " </div>";
|
||||
html += " </div>";
|
||||
html += " </div>";
|
||||
|
||||
html += "</div></div>";
|
||||
html += "<script src='https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js' integrity='sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL' crossorigin='anonymous'></script>";
|
||||
html += "</body></html>";
|
||||
|
||||
@@ -542,31 +707,31 @@ void setupWeb() {
|
||||
Serial.println("[HTTP] [API] 404: Not Found");
|
||||
api_server.send(404, "application/json", "{\"code\": 404, \"message\": \"Resource not found.\"}");
|
||||
});
|
||||
api_server.on("/api/v1/playback/toggle", api_v1_playback_toggle);
|
||||
api_server.on("/api/v1/playback/play", api_v1_playback_play);
|
||||
api_server.on("/api/v1/playback/pause", api_v1_playback_pause);
|
||||
api_server.on("/api/v1/playback/next", api_v1_playback_next);
|
||||
api_server.on("/api/v1/playback/previous", api_v1_playback_previous);
|
||||
api_server.on("/api/v1/playback/info", api_v1_playback_info);
|
||||
api_server.on(UriBraces("/api/v1/playback/{}"), api_v1_playback_byindex);
|
||||
api_server.on("/api/v1/playlist/get", api_v1_playlist_get);
|
||||
api_server.on("/api/v1/playlist/create", api_v1_playlist_create);
|
||||
api_server.on("/api/v1/playlist/play", api_v1_playlist_play);
|
||||
api_server.on(UriBraces("/api/v1/volume/{}"), api_v1_volume);
|
||||
api_server.on(UriBraces("/api/v1/balance/{}"), api_v1_balance);
|
||||
api_server.on("/api/v1/eq/get", api_v1_eq_get);
|
||||
api_server.on(UriBraces("/api/v1/eq/reset"), api_v1_eq_reset);
|
||||
api_server.on(UriBraces("/api/v1/eq/low/{}"), api_v1_eq_low);
|
||||
api_server.on(UriBraces("/api/v1/eq/mid/{}"), api_v1_eq_mid);
|
||||
api_server.on(UriBraces("/api/v1/eq/high/{}"), api_v1_eq_high);
|
||||
api_server.on("/api/v1/system/restart", api_v1_system_restart);
|
||||
api_server.on("/api/v1/system/name", api_v1_system_friendlyname_get);
|
||||
api_server.on("/api/v1/system/name/change", api_v1_system_friendlyname_change);
|
||||
api_server.on(UriBraces("/api/v1/system/restore_state/{}"), api_v1_system_restore_state);
|
||||
api_server.on("/api/v1/playback/toggle", api_v1_playback_toggle);
|
||||
api_server.on("/api/v1/playback/play", api_v1_playback_play);
|
||||
api_server.on("/api/v1/playback/pause", api_v1_playback_pause);
|
||||
api_server.on("/api/v1/playback/next", api_v1_playback_next);
|
||||
api_server.on("/api/v1/playback/previous", api_v1_playback_previous);
|
||||
api_server.on("/api/v1/playback/info", api_v1_playback_info);
|
||||
api_server.on(UriBraces("/api/v1/playback/{}"), api_v1_playback_byindex);
|
||||
api_server.on("/api/v1/playlist/get", api_v1_playlist_get);
|
||||
api_server.on("/api/v1/playlist/create", api_v1_playlist_create);
|
||||
api_server.on("/api/v1/playlist/play", api_v1_playlist_play);
|
||||
api_server.on(UriBraces("/api/v1/volume/{}"), api_v1_volume);
|
||||
api_server.on(UriBraces("/api/v1/balance/{}"), api_v1_balance);
|
||||
api_server.on("/api/v1/eq/get", api_v1_eq_get);
|
||||
api_server.on(UriBraces("/api/v1/eq/reset"), api_v1_eq_reset);
|
||||
api_server.on(UriBraces("/api/v1/eq/low/{}"), api_v1_eq_low);
|
||||
api_server.on(UriBraces("/api/v1/eq/mid/{}"), api_v1_eq_mid);
|
||||
api_server.on(UriBraces("/api/v1/eq/high/{}"), api_v1_eq_high);
|
||||
api_server.on("/api/v1/system/restart", api_v1_system_restart);
|
||||
api_server.on("/api/v1/system/name", api_v1_system_friendlyname_get);
|
||||
api_server.on("/api/v1/system/name/change", api_v1_system_friendlyname_change);
|
||||
api_server.on(UriBraces("/api/v1/system/restore_state/{}"), api_v1_system_restore_state);
|
||||
api_server.on(UriBraces("/api/v1/system/restore_playing/{}"), api_v1_system_restore_playing);
|
||||
api_server.on("/api/v1/system/version", api_v1_system_version);
|
||||
api_server.on("/api/v1/system/wifi/change", api_v1_system_wifi_change);
|
||||
api_server.on("/api/v1/system/wifi/get_ssid", api_v1_system_wifi_getssid);
|
||||
api_server.on("/api/v1/system/version", api_v1_system_version);
|
||||
api_server.on("/api/v1/system/wifi/change", api_v1_system_wifi_change);
|
||||
api_server.on("/api/v1/system/wifi/get_ssid", api_v1_system_wifi_getssid);
|
||||
|
||||
Serial.println("[HTTP] [API] Starting API server (http) on port " + String(webport_api));
|
||||
api_server.begin();
|
||||
|
||||
Reference in New Issue
Block a user