Created the template for accessing all the api functionalities via web ui

This commit is contained in:
2023-12-16 21:28:45 +01:00
parent 59fcb3335e
commit 9009e55d4f

View File

@@ -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 += " &nbsp;<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 += " &nbsp;<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 += " &nbsp;<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 += " &nbsp;<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 += " &nbsp;<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 += " &nbsp;<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 += " &nbsp;<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 += " &nbsp;<span class='badge text-bg-warning'>/api/v1/system/restore_state/</span>";
html += " &nbsp;<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 += " &nbsp;<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>";