sanic/static/index.html

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
  <meta charset="UTF-8" />
  <title>Sanic</title>
  <link rel="stylesheet" href="style.css" />
  <link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48 64x64" type="image/png" />
</head>
<body>

<dialog id="save-playlist">
  <h1>Save Playlist</h1>
  <button class="close">&times;</button>
  <form method="dialog">
    <label for="control-playlist-name">Name</label>
    <input type="text" id="control-playlist-name" name="playlist-name" autofocus />
    <button>Save</button>
  </form>
</dialog>

<main>
  <div id="nav">
    <div id="control-admin">
      <button id="connection-state">&#x274C; Disconnected</button> <!-- ❌ Cross Mark -->
      <button>Config</button>
      <button id="control-update-db" disabled="disabled"><span class="loader"></span> Update DB</button>
    </div><!--/#control-admin-->
    <div>
      <div class="spaced">
        <button id="control-previous">&#x23EE;&#xFE0E;</button> <!-- ⏮️ Last Track Button -->
        <button id="control-stop">&#x23F9;&#xFE0E;</button> <!-- ⏹️ Stop Button -->
        <button id="control-play-pause">&#x23F5;&#xFE0E;</button> <!-- ▶️ Play or ⏸️ Pause Button -->
        <button id="control-next">&#x23ED;&#xFE0E;</button> <!-- ⏭️ Next Track Button -->
      </div><!--/.spaced-->
      <div class="spaced">
        <label for="control-progress"></label>
        <input type="range" id="control-progress" name="progress" min="0" step="1" />
      </div>
    </div>
    <div>
      <div class="spaced">
        <button id="control-repeat" data-state="off">&#x1F518; repeat</button> <!-- 🔘 Radio Button -->
        <button id="control-shuffle" data-state="off">&#x1F518; shuffle</button> <!-- 🔘 Radio Button -->
      </div><!--/.spaced-->
      <div class="spaced">
        <label for="control-xfade">xfade</label>
        <div>
          <button id="control-xfade-minus">&#x2796;</button> <!-- ➖ Minus -->
          <input type="number" id="control-xfade" name="xfade" value="00" />
          <button id="control-xfade-plus">&#x2795;</button> <!-- ➕ Plus -->
        </div>
      </div><!--/.spaced-->
      <div class="spaced">
        <button id="control-volume-down">&#x1F509;</button> <!-- 🔉 Speaker with sound wave -->
        <input id="control-volume" name="volume" type="range" min="0" max="100" value="50" />
        <button id="control-volume-up">&#x1F50A;</button> <!-- 🔊 Speaker with sound waves -->
      </div><!--/.spaced-->
    </div>
    <div class="wide">
      <div>
        <label for="control-track">Now playing:</label>
        <!--<input type="text" id="control-track" name="track" disabled="disabled" />-->
        <div class="marquee" id="control-track">
          <span>Fall On Your Sword - Shatner Of The Mount by Fall On Your Sword</span>
        </div>
      </div>
      <div>
        <label for="control-time">Time:</label>
        <input type="text" id="control-time" name="time" value="00:00:00/00:00:00" disabled="disabled" />
      </div>
    </div>
    <div id="sanic-logo">
      <div><!-- TODO: try to remove this div -->
        <img alt="sanic logo" src="/img/sanic-logo.webp" />
        Sanic &copy; 2023
      </div>
    </div><!--/#sanic-logo-->
  </div>
  <div id="queue">
    <table>
      <thead>
      <tr>
        <th>Pos</th>
        <th>Artists</th>
        <th>Track</th>
        <th>Album</th>
        <th>Length</th>
        <th>Actions</th>
      </tr>
      </thead>
      <tbody></tbody>
    </table>
  </div><!--/#queue-->
  <div id="browser">
    <div id="tabs">
      <a id="tab-browser" class="active" href="#">File Browser</a>
      <a id="tab-search" href="#">Search</a>
      <a id="tab-playlists" href="#">Playlists</a>
    </div><!--/#tabs-->
    <div id="file-browser">
      <div>
        file browser
      </div>
      <div>
        actions
      </div>
    </div><!--/#file-browser-->
    <div id="search" style="display: none">
      <div>
        <label for="control-search"></label>
        <input type="text" id="control-search" name="search" />
        <button>Search</button>
      </div>
      <div>
        actions
      </div>
    </div><!--/#search-->
    <div id="playlist-browser" style="display: none">
      <label for="control-playlist-list"></label>
      <select id="control-playlist-list" size="15">
        <option value="1">basedrive</option><!-- TODO: Remove this line -->
      </select><!--/#control-playlist-list-->
      <div>
        <button id="control-replace-playlist">&#x1F504; Replace</button><!-- 🔄 Counterclockwise Arrows Button -->
        <button id="control-attach-playlist">&#x2B06; Attach</button><!-- ⬆️ Up Arrow -->
        <button id="control-save-playlist">&#x1F4BE; Save</button><!-- 💾 Floppy Disk -->
        <button id="control-delete-playlist">&#x1F5D1;&#xFE0F; Delete</button><!-- 🗑️ Wastebasket -->
      </div>
    </div><!--/#playlist-browser-->
  </div><!--/#browser-->
  <div id="result">
    <table>
      <thead>
      <tr>
        <th>Artist</th>
        <th>Title</th>
        <th>Album</th>
        <th>Genre</th>
        <th>Time</th>
      </tr>
      </thead>
      <tbody></tbody>
    </table>
  </div><!--/#result-->
  <footer>
    <a href="https://git.berlin.ccc.de/cccb/sanic"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 92 92"><defs><clipPath id="a"><path d="M0 .113h91.887V92H0Zm0 0"/></clipPath></defs><g clip-path="url(#a)"><path style="stroke:none;fill-rule:nonzero;fill:#ffffff;fill-opacity:1" d="M90.156 41.965 50.036 1.848a5.913 5.913 0 0 0-8.368 0l-8.332 8.332 10.566 10.566a7.03 7.03 0 0 1 7.23 1.684 7.043 7.043 0 0 1 1.673 7.277l10.183 10.184a7.026 7.026 0 0 1 7.278 1.672 7.04 7.04 0 0 1 0 9.957 7.045 7.045 0 0 1-9.961 0 7.038 7.038 0 0 1-1.532-7.66l-9.5-9.497V59.36a7.04 7.04 0 0 1 1.86 11.29 7.04 7.04 0 0 1-9.957 0 7.04 7.04 0 0 1 0-9.958 7.034 7.034 0 0 1 2.308-1.539V33.926a7.001 7.001 0 0 1-2.308-1.535 7.049 7.049 0 0 1-1.516-7.7L29.242 14.273 1.734 41.777a5.918 5.918 0 0 0 0 8.371L41.855 90.27a5.92 5.92 0 0 0 8.368 0l39.933-39.934a5.925 5.925 0 0 0 0-8.371"/></g></svg></a> Sanic MPD Web UI 0.1.0 - by XenGi and coon &copy; 2023
  </footer>
</main>
<script src="controls.js"></script>
<script>
const table = document.querySelector("#queue > table > tbody");
for (let i = 1; i <= 100; i++) {
  const tr = document.createElement("tr");
  if (i === 1) {
    tr.classList.add("playing");
  }
  const pos = document.createElement("td");
  pos.innerText = i.toString();
  const artist = document.createElement("td");
  artist.innerText = `Artist ${i.toString()} with a super long name that should finally bring the length to a maximum`;
  const track = document.createElement("td");
  track.innerText = `Track ${i.toString()} with super long name that could potentially expand the table by a lot!`;
  const album = document.createElement("td");
  album.innerText = `Album ${i.toString()}`;
  const length = document.createElement("td");
  length.innerText = "01:00:00";
  const actions = document.createElement("td");
  actions.classList.add("actions");
  // TODO: maybe use a instead of button?
  const moveUp = document.createElement("button");
  moveUp.classList.add("borderless");
  moveUp.innerHTML = "&#x1F53A;"; // 🔺 Red Triangle Pointed Down
  moveUp.addEventListener("click", event => {
    console.log(`DEBUG: move song ${i} up`);
  });
  // TODO: maybe use a instead of button?
  const moveDown = document.createElement("button");
  moveDown.classList.add("borderless");
  moveDown.innerHTML = "&#x1F53B;"; // 🔻 Red Triangle Pointed Up
  moveDown.addEventListener("click", event => {
    console.log(`DEBUG: move song ${i} down`);
  });
  // TODO: maybe use a instead of button?
  const remove = document.createElement("button");
  remove.classList.add("borderless");
  remove.innerHTML = "&#x274C;"; // ❌ Cross mark
  remove.addEventListener("click", event => {
    console.log(`DEBUG: remove song ${i} from queue`);
  });
  actions.appendChild(moveUp);
  actions.appendChild(moveDown);
  actions.appendChild(remove);
  tr.appendChild(pos);
  tr.appendChild(artist);
  tr.appendChild(track);
  tr.appendChild(album);
  tr.appendChild(length);
  tr.appendChild(actions);
  table.appendChild(tr);
}
</script>
</body>
</html>
-												final design

											
										
										
											2023-12-28 04:55:06 +01:00
+								<!DOCTYPE html>
-												gui functions nearly done

											
										
										
											2023-12-30 15:02:13 +01:00
+								<html lang="en" xmlns="http://www.w3.org/1999/html">
-												final design

											
										
										
											2023-12-28 04:55:06 +01:00
+								<head>
 								  <meta charset="UTF-8" />
 								  <title>Sanic</title>
 								  <link rel="stylesheet" href="style.css" />
-												add js controls

											
										
										
											2023-12-29 16:55:51 +01:00
+								  <link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48 64x64" type="image/png" />
-												final design

											
										
										
											2023-12-28 04:55:06 +01:00
+								</head>
 								<body>
-												add save playlist modal and other things

											
										
										
											2024-01-21 20:29:00 +01:00
 								<dialog id="save-playlist">
 								  <h1>Save Playlist</h1>
 								  <button class="close">&times;</button>
 								  <form method="dialog">
 								    <label for="control-playlist-name">Name</label>
 								    <input type="text" id="control-playlist-name" name="playlist-name" autofocus />
 								    <button>Save</button>
 								  </form>
 								</dialog>
-												final design

											
										
										
											2023-12-28 04:55:06 +01:00
+								<main>
 								  <div id="nav">
-												gui functions nearly done

											
										
										
											2023-12-30 15:02:13 +01:00
+								    <div id="control-admin">
 								      <button id="connection-state">&#x274C; Disconnected</button> <!-- ❌ Cross Mark -->
-												final design

											
										
										
											2023-12-28 04:55:06 +01:00
+								      <button>Config</button>
-												update js code

											
										
										
											2024-01-21 14:55:31 +01:00
+								      <button id="control-update-db" disabled="disabled"><span class="loader"></span> Update DB</button>
-												moving design to final files

											
										
										
											2024-01-20 11:40:13 +01:00
+								    </div><!--/#control-admin-->
-												final design

											
										
										
											2023-12-28 04:55:06 +01:00
+								    <div>
-												gui functions nearly done

											
										
										
											2023-12-30 15:02:13 +01:00
+								      <div class="spaced">
-												add js controls

											
										
										
											2023-12-29 16:55:51 +01:00
+								        <button id="control-previous">&#x23EE;&#xFE0E;</button> <!-- ⏮️ Last Track Button -->
 								        <button id="control-stop">&#x23F9;&#xFE0E;</button> <!-- ⏹️ Stop Button -->
 								        <button id="control-play-pause">&#x23F5;&#xFE0E;</button> <!-- ▶️ Play or ⏸️ Pause Button -->
 								        <button id="control-next">&#x23ED;&#xFE0E;</button> <!-- ⏭️ Next Track Button -->
-												moving design to final files

											
										
										
											2024-01-20 11:40:13 +01:00
+								      </div><!--/.spaced-->
-												update js code

											
										
										
											2024-01-21 14:55:31 +01:00
+								      <div class="spaced">
-												add js controls

											
										
										
											2023-12-29 16:55:51 +01:00
+								        <label for="control-progress"></label>
 								        <input type="range" id="control-progress" name="progress" min="0" step="1" />
-												final design

											
										
										
											2023-12-28 04:55:06 +01:00
+								      </div>
 								    </div>
 								    <div>
-												gui functions nearly done

											
										
										
											2023-12-30 15:02:13 +01:00
+								      <div class="spaced">
-												update js code

											
										
										
											2024-01-21 14:55:31 +01:00
+								        <button id="control-repeat" data-state="off">&#x1F518; repeat</button> <!-- 🔘 Radio Button -->
 								        <button id="control-shuffle" data-state="off">&#x1F518; shuffle</button> <!-- 🔘 Radio Button -->
-												moving design to final files

											
										
										
											2024-01-20 11:40:13 +01:00
+								      </div><!--/.spaced-->
-												gui functions nearly done

											
										
										
											2023-12-30 15:02:13 +01:00
+								      <div class="spaced">
 								        <label for="control-xfade">xfade</label>
-												add js controls

											
										
										
											2023-12-29 16:55:51 +01:00
+								        <div>
-												more html foo

											
										
										
											2024-01-20 21:52:03 +01:00
+								          <button id="control-xfade-minus">&#x2796;</button> <!-- ➖ Minus -->
-												add js controls

											
										
										
											2023-12-29 16:55:51 +01:00
+								          <input type="number" id="control-xfade" name="xfade" value="00" />
-												more html foo

											
										
										
											2024-01-20 21:52:03 +01:00
+								          <button id="control-xfade-plus">&#x2795;</button> <!-- ➕ Plus -->
-												add js controls

											
										
										
											2023-12-29 16:55:51 +01:00
+								        </div>
-												moving design to final files

											
										
										
											2024-01-20 11:40:13 +01:00
+								      </div><!--/.spaced-->
-												gui functions nearly done

											
										
										
											2023-12-30 15:02:13 +01:00
+								      <div class="spaced">
 								        <button id="control-volume-down">&#x1F509;</button> <!-- 🔉 Speaker with sound wave -->
 								        <input id="control-volume" name="volume" type="range" min="0" max="100" value="50" />
 								        <button id="control-volume-up">&#x1F50A;</button> <!-- 🔊 Speaker with sound waves -->
-												moving design to final files

											
										
										
											2024-01-20 11:40:13 +01:00
+								      </div><!--/.spaced-->
-												gui functions nearly done

											
										
										
											2023-12-30 15:02:13 +01:00
+								    </div>
-												update js code

											
										
										
											2024-01-21 14:55:31 +01:00
+								    <div class="wide">
-												gui functions nearly done

											
										
										
											2023-12-30 15:02:13 +01:00
+								      <div>
-												update js code

											
										
										
											2024-01-21 14:55:31 +01:00
+								        <label for="control-track">Now playing:</label>
-												add save playlist modal and other things

											
										
										
											2024-01-21 20:29:00 +01:00
+								        <!--<input type="text" id="control-track" name="track" disabled="disabled" />-->
 								        <div class="marquee" id="control-track">
 								          <span>Fall On Your Sword - Shatner Of The Mount by Fall On Your Sword</span>
 								        </div>
-												gui functions nearly done

											
										
										
											2023-12-30 15:02:13 +01:00
+								      </div>
 								      <div>
 								        <label for="control-time">Time:</label>
 								        <input type="text" id="control-time" name="time" value="00:00:00/00:00:00" disabled="disabled" />
 								      </div>
 								    </div>
-												moving design to final files

											
										
										
											2024-01-20 11:40:13 +01:00
+								    <div id="sanic-logo">
-												more html foo

											
										
										
											2024-01-20 21:52:03 +01:00
+								      <div><!-- TODO: try to remove this div -->
-												moving design to final files

											
										
										
											2024-01-20 11:40:13 +01:00
+								        <img alt="sanic logo" src="/img/sanic-logo.webp" />
 								        Sanic &copy; 2023
 								      </div>
-												more html foo

											
										
										
											2024-01-20 21:52:03 +01:00
+								    </div><!--/#sanic-logo-->
-												final design

											
										
										
											2023-12-28 04:55:06 +01:00
+								  </div>
 								  <div id="queue">
 								    <table>
 								      <thead>
 								      <tr>
-												moving design to final files

											
										
										
											2024-01-20 11:40:13 +01:00
+								        <th>Pos</th>
 								        <th>Artists</th>
 								        <th>Track</th>
 								        <th>Album</th>
 								        <th>Length</th>
 								        <th>Actions</th>
-												final design

											
										
										
											2023-12-28 04:55:06 +01:00
+								      </tr>
 								      </thead>
-												add js controls

											
										
										
											2023-12-29 16:55:51 +01:00
+								      <tbody></tbody>
-												final design

											
										
										
											2023-12-28 04:55:06 +01:00
+								    </table>
-												more html foo

											
										
										
											2024-01-20 21:52:03 +01:00
+								  </div><!--/#queue-->
-												add tabs

											
										
										
											2024-01-20 13:48:03 +01:00
+								  <div id="browser">
 								    <div id="tabs">
 								      <a id="tab-browser" class="active" href="#">File Browser</a>
 								      <a id="tab-search" href="#">Search</a>
 								      <a id="tab-playlists" href="#">Playlists</a>
-												more html foo

											
										
										
											2024-01-20 21:52:03 +01:00
+								    </div><!--/#tabs-->
-												add tabs

											
										
										
											2024-01-20 13:48:03 +01:00
+								    <div id="file-browser">
 								      <div>
 								        file browser
 								      </div>
 								      <div>
 								        actions
 								      </div>
-												more html foo

											
										
										
											2024-01-20 21:52:03 +01:00
+								    </div><!--/#file-browser-->
-												add tabs

											
										
										
											2024-01-20 13:48:03 +01:00
+								    <div id="search" style="display: none">
 								      <div>
 								        <label for="control-search"></label>
 								        <input type="text" id="control-search" name="search" />
 								        <button>Search</button>
 								      </div>
 								      <div>
 								        actions
 								      </div>
-												more html foo

											
										
										
											2024-01-20 21:52:03 +01:00
+								    </div><!--/#search-->
-												add tabs

											
										
										
											2024-01-20 13:48:03 +01:00
+								    <div id="playlist-browser" style="display: none">
-												more html foo

											
										
										
											2024-01-20 21:52:03 +01:00
+								      <label for="control-playlist-list"></label>
 								      <select id="control-playlist-list" size="15">
 								        <option value="1">basedrive</option><!-- TODO: Remove this line -->
 								      </select><!--/#control-playlist-list-->
-												add tabs

											
										
										
											2024-01-20 13:48:03 +01:00
+								      <div>
-												add save playlist modal and other things

											
										
										
											2024-01-21 20:29:00 +01:00
+								        <button id="control-replace-playlist">&#x1F504; Replace</button><!-- 🔄 Counterclockwise Arrows Button -->
 								        <button id="control-attach-playlist">&#x2B06; Attach</button><!-- ⬆️ Up Arrow -->
 								        <button id="control-save-playlist">&#x1F4BE; Save</button><!-- 💾 Floppy Disk -->
 								        <button id="control-delete-playlist">&#x1F5D1;&#xFE0F; Delete</button><!-- 🗑️ Wastebasket -->
-												add tabs

											
										
										
											2024-01-20 13:48:03 +01:00
+								      </div>
-												more html foo

											
										
										
											2024-01-20 21:52:03 +01:00
+								    </div><!--/#playlist-browser-->
 								  </div><!--/#browser-->
-												add tabs

											
										
										
											2024-01-20 13:48:03 +01:00
+								  <div id="result">
 								    <table>
 								      <thead>
 								      <tr>
 								        <th>Artist</th>
 								        <th>Title</th>
 								        <th>Album</th>
 								        <th>Genre</th>
 								        <th>Time</th>
 								      </tr>
 								      </thead>
 								      <tbody></tbody>
 								    </table>
-												more html foo

											
										
										
											2024-01-20 21:52:03 +01:00
+								  </div><!--/#result-->
-												moving design to final files

											
										
										
											2024-01-20 11:40:13 +01:00
+								  <footer>
 								    <a href="https://git.berlin.ccc.de/cccb/sanic"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 92 92"><defs><clipPath id="a"><path d="M0 .113h91.887V92H0Zm0 0"/></clipPath></defs><g clip-path="url(#a)"><path style="stroke:none;fill-rule:nonzero;fill:#ffffff;fill-opacity:1" d="M90.156 41.965 50.036 1.848a5.913 5.913 0 0 0-8.368 0l-8.332 8.332 10.566 10.566a7.03 7.03 0 0 1 7.23 1.684 7.043 7.043 0 0 1 1.673 7.277l10.183 10.184a7.026 7.026 0 0 1 7.278 1.672 7.04 7.04 0 0 1 0 9.957 7.045 7.045 0 0 1-9.961 0 7.038 7.038 0 0 1-1.532-7.66l-9.5-9.497V59.36a7.04 7.04 0 0 1 1.86 11.29 7.04 7.04 0 0 1-9.957 0 7.04 7.04 0 0 1 0-9.958 7.034 7.034 0 0 1 2.308-1.539V33.926a7.001 7.001 0 0 1-2.308-1.535 7.049 7.049 0 0 1-1.516-7.7L29.242 14.273 1.734 41.777a5.918 5.918 0 0 0 0 8.371L41.855 90.27a5.92 5.92 0 0 0 8.368 0l39.933-39.934a5.925 5.925 0 0 0 0-8.371"/></g></svg></a> Sanic MPD Web UI 0.1.0 - by XenGi and coon &copy; 2023
 								  </footer>
-												final design

											
										
										
											2023-12-28 04:55:06 +01:00
+								</main>
-												add js controls

											
										
										
											2023-12-29 16:55:51 +01:00
+								<script src="controls.js"></script>
-												final design

											
										
										
											2023-12-28 04:55:06 +01:00
+								<script>
-												moving design to final files

											
										
										
											2024-01-20 11:40:13 +01:00
+								const table = document.querySelector("#queue > table > tbody");
 								for (let i = 1; i <= 100; i++) {
 								  const tr = document.createElement("tr");
 								  if (i === 1) {
 								    tr.classList.add("playing");
-												final design

											
										
										
											2023-12-28 04:55:06 +01:00
+								  }
-												moving design to final files

											
										
										
											2024-01-20 11:40:13 +01:00
+								  const pos = document.createElement("td");
 								  pos.innerText = i.toString();
 								  const artist = document.createElement("td");
 								  artist.innerText = `Artist ${i.toString()} with a super long name that should finally bring the length to a maximum`;
 								  const track = document.createElement("td");
 								  track.innerText = `Track ${i.toString()} with super long name that could potentially expand the table by a lot!`;
 								  const album = document.createElement("td");
 								  album.innerText = `Album ${i.toString()}`;
 								  const length = document.createElement("td");
 								  length.innerText = "01:00:00";
 								  const actions = document.createElement("td");
 								  actions.classList.add("actions");
 								  // TODO: maybe use a instead of button?
 								  const moveUp = document.createElement("button");
 								  moveUp.classList.add("borderless");
 								  moveUp.innerHTML = "&#x1F53A;"; // 🔺 Red Triangle Pointed Down
 								  moveUp.addEventListener("click", event => {
 								    console.log(`DEBUG: move song ${i} up`);
 								  });
 								  // TODO: maybe use a instead of button?
 								  const moveDown = document.createElement("button");
 								  moveDown.classList.add("borderless");
 								  moveDown.innerHTML = "&#x1F53B;"; // 🔻 Red Triangle Pointed Up
 								  moveDown.addEventListener("click", event => {
 								    console.log(`DEBUG: move song ${i} down`);
 								  });
 								  // TODO: maybe use a instead of button?
 								  const remove = document.createElement("button");
 								  remove.classList.add("borderless");
-												more html foo

											
										
										
											2024-01-20 21:52:03 +01:00
+								  remove.innerHTML = "&#x274C;"; // ❌ Cross mark
-												moving design to final files

											
										
										
											2024-01-20 11:40:13 +01:00
+								  remove.addEventListener("click", event => {
 								    console.log(`DEBUG: remove song ${i} from queue`);
 								  });
 								  actions.appendChild(moveUp);
 								  actions.appendChild(moveDown);
 								  actions.appendChild(remove);
 								  tr.appendChild(pos);
 								  tr.appendChild(artist);
 								  tr.appendChild(track);
 								  tr.appendChild(album);
 								  tr.appendChild(length);
 								  tr.appendChild(actions);
 								  table.appendChild(tr);
 								}
-												final design

											
										
										
											2023-12-28 04:55:06 +01:00
+								</script>
 								</body>
 								</html>