Přidání písně

Proboha, to se dva roky řeší přidání funkce "přidat skladbu"? Dejte mi přístup do zdroje a já to udělám, je to primitivní zápis do databáze!

Jako dnes nemít možnost přidávat záznam je dost divný, leda by si zakladatel zakládal na tom, že je extrémně důležitý a jeho práci nikdo jiný nezvládne :-)

#1175 od pmarik
Poděkovali: toni

Prosím Přihlásit se nebo Vytvořit účet připojte se ke konverzaci.

Dobrý den,

velmi bych se přimlouval za přidání možnosti přidávat nové písničky. Chápu obavu před zaplevelením nekvalitním obsahem, ale zavést něco jako že přidaný obsah uživatelem by byl vidět jen pro něj dokud se neschválí?

Díky

#1210 od a.j.rimmer.bdzp
Poděkovali: Bubli

Prosím Přihlásit se nebo Vytvořit účet připojte se ke konverzaci.

Také bych to uvítal. Popřípadě možnost vytvořit si úpravy viditelné jen pro mě...

#1216 od jan.opravil@jopr.cz

Prosím Přihlásit se nebo Vytvořit účet připojte se ke konverzaci.

Forntend:
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Písničky a Akordy</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Písničky a Akordy</h1>
<nav>
<a href="index.html">Domů</a>
<a href="login.html">Přihlásit se</a>
<a href="add-song.html">Přidat píseň</a>
</nav>
</header>
<main>
<h2>Seznam Písní</h2>
<div id="song-list">
<!-- Dynamicky načtený seznam písní -->
</div>
</main>
<script src="script.js"></script>
</body>
</html>


styl.css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}

header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}

header nav a {
color: #fff;
margin: 0 10px;
text-decoration: none;
}

main {
padding: 20px;
}


app.py
from flask import Flask, request, jsonify, render_template
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)
app.config = 'sqlite:///songs.db'
app.config = False
db = SQLAlchemy(app)

# Model pro databázi
class Song(db.Model):
id = db.Column(db.Integer, primary_key=True)
title = db.Column(db.String(100), nullable=False)
artist = db.Column(db.String(100), nullable=False)
chords = db.Column(db.Text, nullable=False)

# Inicializace databáze
@app.before_first_request
def create_tables():
db.create_all()

# API pro získání seznamu písní
@app.route('/api/songs', methods=)
def get_songs():
songs = Song.query.all()
return jsonify([{"id": song.id, "title": song.title, "artist": song.artist} for song in songs])

# API pro přidání nové písně
@app.route('/api/songs', methods=)
def add_song():
data = request.json
new_song = Song(title=data, artist=data, chords=data)
db.session.add(new_song)
db.session.commit()
return jsonify({"message": "Píseň přidána!"}), 201

if __name__ == '__main__':
app.run(debug=True)

Databáze se vytvoří automaticky při spuštění aplikace Flask díky db.create_all()

script.js
document.addEventListener("DOMContentLoaded", () => {
const songList = document.getElementById("song-list");

// Načtení seznamu písní z API
fetch("/api/songs")
.then(response => response.json())
.then(data => {
data.forEach(song => {
const songDiv = document.createElement("div");
songDiv.textContent = `${song.title} - ${song.artist}`;
songList.appendChild(songDiv);
});
})
.catch(error => console.error("Chyba při načítání písní:", error));
});


Formular:
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Přidat Píseň</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Přidat Novou Píseň</h1>
</header>
<main>
<form id="add-song-form">
<label for="title">Název:</label><br>
<input type="text" id="title" required><br><br>
<label for="artist">Interpret:</label><br>
<input type="text" id="artist" required><br><br>
<label for="chords">Akordy/Text:</label><br>
<textarea id="chords" rows="5" required></textarea><br><br>
<button type="submit">Přidat píseň</button>
</form>
</main>
<script>
document.getElementById("add-song-form").addEventListener("submit", function(event) {
event.preventDefault();
const title = document.getElementById("title").value;
const artist = document.getElementById("artist").value;
const chords = document.getElementById("chords").value;

fetch("/api/songs", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({ title, artist, chords })
})
.then(response => response.json())
.then(data => {
alert(data.message);
this.reset();
})
.catch(error => console.error("Chyba při přidávání písně:", error));
});
</script>
</body>
</html>

#1217 od pmarik

Prosím Přihlásit se nebo Vytvořit účet připojte se ke konverzaci.