You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
71 lines
2.5 KiB
71 lines
2.5 KiB
{% extends 'base.html' %}
|
|
|
|
{% block content %}
|
|
<div class="column is-4 is-offset-4">
|
|
<h3>Añadir nueva canción</h3>
|
|
<div class="box">
|
|
<form method="POST" action="/add_song">
|
|
<div class="field">
|
|
<label for="pista">Nº de pista:</label> <!-- Nuevo campo -->
|
|
<div class="control">
|
|
<input type="number" id="pista" name="pista" required>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label for="title">Título:</label>
|
|
<div class="control">
|
|
<input type="text" id="title" name="title" required>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label for="author">Autor:</label>
|
|
<div class="control">
|
|
<input type="text" id="author" name="author" required>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label for="album_id">Álbum:</label>
|
|
<div class="control">
|
|
<div class="select">
|
|
<select id="album_id" name="album_id" required>
|
|
{% for album in albums %}
|
|
<option value="{{ album.id }}" data-artist="{{ album.artist }}">{{ album.name }} by {{ album.artist }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label for="lyrics">Letra:</label>
|
|
<div class="control">
|
|
<textarea id="lyrics" name="lyrics" required></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field is-grouped">
|
|
<div class="control">
|
|
<button type="submit" class="button is-link">Añadir canción</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<script>
|
|
function updateAuthor() {
|
|
var albumSelect = document.getElementById("album_id");
|
|
var selectedAlbum = albumSelect.options[albumSelect.selectedIndex];
|
|
var artist = selectedAlbum.getAttribute("data-artist");
|
|
document.getElementById("author").value = artist;
|
|
}
|
|
|
|
// Initialize the author field with the artist of the first album
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
updateAuthor();
|
|
});
|
|
</script>
|
|
</div>
|
|
{% endblock %}
|