Refonte complète

.old/app.py

@@ -0,0 +1,82 @@
+from flask import Flask, request, redirect, url_for, send_file, render_template
+from subprocess import run
+import os
+import logging
+
+app = Flask(__name__)
+
+@app.route('/')
+def upload_form():
+    return render_template('upload.html')
+
+def process_file(urls):
+    # path = os.path.expanduser('~/musics/downloads')
+    #path = '/home/gu1ll4um3/github/SpotDL_Web/downloads'
+    #path = 'downloads/'
+    download_param_album = '{artist}/{album}/{artist} - {title}'
+    download_param_playlist = '{playlist}/{artists}/{album} - {title} {artist}'
+
+    os.chdir('downloads')
+    #os.system(f'rm -rf *')
+
+    logs = []  # Créer une liste vide pour stocker les logs
+    for url in urls:
+        if url:
+            if "album" in url:
+                #os.system(f'python3 -m spotdl {url} --output "{download_param_album}"')
+                run(['python3', '-m', 'spotdl', url, '--output', download_param_album])
+                logs.append(f'Téléchargement de l album à l\'adresse {url}')
+            elif "playlist" in url:
+                os.system(f'python3 -m spotdl {url} --output "{download_param_playlist}"')
+                logs.append(f'Téléchargement de la playlist à l\'adresse {url}')
+    
+    # os.system(f'zip -r musics.zip ./downloads')
+    run(['zip', '-r', 'musics.zip', '.'])
+    logs.append(f'Création du fichier ZIP musics.zip')
+    
+    return logs  # Retourner la liste des logs
+
+@app.route('/', methods=['GET', 'POST'])
+def index():
+    message = None
+    if request.method == 'POST':
+        url1 = request.form['url1']
+        url2 = request.form['url2']
+        url3 = request.form['url3']
+        url4 = request.form['url4']
+        url5 = request.form['url5']
+
+        # Vérifier si au moins un champ est vide
+        if not url1 and not url2 and not url3 and not url4 and not url5:
+            return render_template('erreur.html')
+
+        urls = [url1, url2, url3, url4, url5]
+        logs = process_file(urls)
+        #process_file(urls)
+        #print(resultProcessFile)
+        
+        with open('/home/gu1ll4um3/github/SpotDL_Web/logs/erreurs.log', 'r') as f:
+            result2 = f.readlines()
+    return render_template('download_complete.html', logs=logs)
+    #return render_template('download_complete.html', result2=result2)
+
+@app.route('/download', methods=['GET'])
+def download():
+    # PATH='/home/gu1ll4um3/musics/downloads/musics.zip'
+    #os.chdir('downloads')
+    PATH='downloads/musics.zip'
+    return send_file(PATH,as_attachment=True)
+
+# @app.route('/errors')
+# def errors():
+#    with open('erreurs.txt', 'r') as f:
+#       lines = f.readlines()
+#    return render_template('logs.html', lines=lines)
+
+@app.route('/test')
+def test():
+    return render_template('test.html')
+
+
+if __name__ == '__main__':
+    app.run(debug=True, port=3000)

.old/static/css/style.css

@@ -0,0 +1,72 @@
+body{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    background-color: black;
+}
+
+.erreur {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+}
+
+.download_complete {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+}
+
+.all {
+    align-items: center;
+    flex-direction: column;
+}
+
+.titre{
+    display: flex;
+    justify-content: center;
+    color: rgb(24,216,96);
+    /* align-items: center; */
+}
+
+.procedure {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    text-align: center;
+}
+
+h2, a {
+    color: white;
+}
+
+.url {
+    display: block;
+    justify-content:center;
+    width: auto;
+    flex: 1 1 0;
+    /* align-items: center; */
+}
+
+.urlbox {
+    display: block;
+    /* align-items: flex-start; */
+    flex: 1 1 0;
+    width: 225;
+}
+
+form {
+    display: flex ;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    width : auto ;
+}
+
+button {
+    display: block;
+    margin: 10px auto;
+  }

app.py

@@ -1,44 +1,47 @@
-from flask import Flask, request, redirect, url_for, send_file, render_template
+from flask import Flask, request, redirect, url_for, send_file, render_template, send_from_directory
 from subprocess import run
+from datetime import datetime
 import os
 import logging
 
 app = Flask(__name__)
 
-@app.route('/')
-def upload_form():
-    return render_template('upload.html')
-
 def process_file(urls):
-    # path = os.path.expanduser('~/musics/downloads')
-    #path = '/home/gu1ll4um3/github/SpotDL_Web/downloads'
-    #path = 'downloads/'
     download_param_album = '{artist}/{album}/{artist} - {title}'
     download_param_playlist = '{playlist}/{artists}/{album} - {title} {artist}'
 
     os.chdir('downloads')
-    #os.system(f'rm -rf *')
+    os.system(f'rm -rf *')
+    #run(['rm', '-rf', '*']) ne fonctionne pas ... ??
 
-    logs = []  # Créer une liste vide pour stocker les logs
     for url in urls:
         if url:
             if "album" in url:
-                #os.system(f'python3 -m spotdl {url} --output "{download_param_album}"')
                 run(['python3', '-m', 'spotdl', url, '--output', download_param_album])
-                logs.append(f'Téléchargement de l album à l\'adresse {url}')
             elif "playlist" in url:
-                os.system(f'python3 -m spotdl {url} --output "{download_param_playlist}"')
+                run(['python3', '-m', 'spotdl', url, '--output', download_param_playlist])
-                logs.append(f'Téléchargement de la playlist à l\'adresse {url}')
     
     #os.system(f'zip -r musics.zip ./downloads')
     run(['zip', '-r', 'musics.zip', '.'])
-    logs.append(f'Création du fichier ZIP musics.zip')
+    os.chdir('../')
-    
-    return logs  # Retourner la liste des logs
 
 @app.route('/', methods=['GET', 'POST'])
-def index():
+def upload_form():
-    message = None
+    return render_template('index.html')
+
+#Fonctionne
+# @app.route('/download/<filename>')
+# def download_file(filename):
+#   PATH='file.txt'
+#   return send_file(PATH, as_attachment=True)
+
+@app.route('/download', methods=['POST'])
+def download_file():
+  # votre code de téléchargement ici
+#   now = datetime.now()
+#   date_time = now.strftime("%Y-%m-%d %H-%M-%S")
+#   with open(f"file.txt", "w") as file:
+#     file.write(date_time)
   if request.method == 'POST':
         url1 = request.form['url1']
         url2 = request.form['url2']
@@ -51,32 +54,10 @@ def index():
             return render_template('erreur.html')
 
         urls = [url1, url2, url3, url4, url5]
-        logs = process_file(urls)
+  process_file(urls)
-        #process_file(urls)
+  PATH = "downloads/musics.zip"
-        #print(resultProcessFile)
-        
-        with open('/home/gu1ll4um3/github/SpotDL_Web/logs/erreurs.log', 'r') as f:
-            result2 = f.readlines()
-    return render_template('download_complete.html', logs=logs)
-    #return render_template('download_complete.html', result2=result2)
-
-@app.route('/download', methods=['GET'])
-def download():
-    # PATH='/home/gu1ll4um3/musics/downloads/musics.zip'
-    #os.chdir('downloads')
-    PATH='downloads/musics.zip'
   return send_file(PATH, as_attachment=True)
 
-# @app.route('/errors')
-# def errors():
-#    with open('erreurs.txt', 'r') as f:
-#       lines = f.readlines()
-#    return render_template('logs.html', lines=lines)
-
-@app.route('/test')
-def test():
-    return render_template('test.html')
-
 
 if __name__ == '__main__':
     app.run(debug=True, port=3000)

static/css/style.css

@@ -1,72 +1,85 @@
 body {
-    display: flex;
+    margin: 0;
-    justify-content: center;
+    font-family: Arial, Helvetica, sans-serif;
-    align-items: center;
+    background-color: #131313;
-
+    color: #ffffff;
-    background-color: black;
   }
 
-.erreur {
+  .container {
+    max-width: 700px;
+    margin: 0 auto;
+    padding: 20px;
+    box-sizing: border-box;
+  }
+
+  .form-group {
     display: flex;
-    justify-content: center;
-    align-items: center;
     flex-direction: column;
+    margin-bottom: 20px;
   }
 
-.download_complete {
+  .form-group label {
-    display: flex;
+    font-weight: bold;
-    justify-content: center;
+    margin-bottom: 5px;
-    align-items: center;
-    flex-direction: column;
   }
 
-.all {
+  .form-control {
-    align-items: center;
+    background-color: #232323;
-    flex-direction: column;
+    border: none;
+    border-radius: 5px;
+    padding: 10px;
+    color: #ffffff;
   }
 
-.titre{
+  /* .form-control:focus {
-    display: flex;
+    outline: none;
-    justify-content: center;
+    box-shadow: 0 0 0 2px rgb(24,216,96);
+  } */
+  .form-control:valid:not(:placeholder-shown) {
+    outline: none;
+    border: 2px solid rgb(24,216,96);
+  }
+  .form-control:invalid {
+    outline: none;
+    border: 2px solid red;
+  }
+
+
+
+  .btn {
+    background-color: rgb(24,216,96);
+    border: none;
+    border-radius: 5px;
+    padding: 10px 20px;
+    color: #131313;
+    font-weight: bold;
+    cursor: pointer;
+    text-decoration:none
+  }
+
+  .btn2 {
+      margin-top: 10px;
+      background-color: rgb(24,216,96);
+      border: none;
+      border-radius: 5px;
+      padding: 10px 20px;
+      color: #131313;
+      font-weight: bold;
+      cursor: pointer;
+      text-decoration:none
+  }
+
+  .btn:hover {
+    background-color: rgb(24,216,96);
+    color: whitesmoke
+  }
+
+  .title {
       color: rgb(24,216,96);
-    /* align-items: center; */
   }
 
-.procedure {
+  @media (max-width: 600px) {
-    display: flex;
+    .container {
-    justify-content: center;
+      padding: 10px;
-    flex-direction: column;
-    text-align: center;
     }
-
-h2, a {
-    color: white;
-}
-
-.url {
-    display: block;
-    justify-content:center;
-    width: auto;
-    flex: 1 1 0;
-    /* align-items: center; */
-}
-
-.urlbox {
-    display: block;
-    /* align-items: flex-start; */
-    flex: 1 1 0;
-    width: 225;
-}
-
-form {
-    display: flex ;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    width : auto ;
-}
-
-button {
-    display: block;
-    margin: 10px auto;
   }

templates/index.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <link rel="stylesheet" href="static/css/style.css", filename= 'style.css'>
+
+  <title>SpotDL Web</title>
+</head>
+
+<body>
+  <div class="container">
+    <h1 class="title">SpotDL Web</h1>
+    <form action="/download" method="POST">
+      <div class="form-group">
+        <input type="text" class="form-control" name="url1" id="url1" pattern="^https://open\.spotify\.com/(?:album|playlist)/[\w-]+(?:\?si=[\w-]+)?$" placeholder="Entrez l'URL d'un Album ou d'une Playlist">
+      </div>
+      <div class="form-group">
+        <input type="text" class="form-control" name="url2" id="url2" pattern="^https://open\.spotify\.com/(?:album|playlist)/[\w-]+(?:\?si=[\w-]+)?$" placeholder="Entrez l'URL d'un Album ou d'une Playlist">
+      </div>
+      <div class="form-group">
+        <input type="text" class="form-control" name="url3" id="url3" pattern="^https://open\.spotify\.com/(?:album|playlist)/[\w-]+(?:\?si=[\w-]+)?$" placeholder="Entrez l'URL d'un Album ou d'une Playlist">
+      </div>
+      <div class="form-group">
+        <input type="text" class="form-control" name="url4" id="url4" pattern="^https://open\.spotify\.com/(?:album|playlist)/[\w-]+(?:\?si=[\w-]+)?$" placeholder="Entrez l'URL d'un Album ou d'une Playlist">
+      </div>
+      <div class="form-group">
+        <input type="text" class="form-control" name="url5" id="url5" pattern="^https://open\.spotify\.com/(?:album|playlist)/[\w-]+(?:\?si=[\w-]+)?$" placeholder="Entrez l'URL d'un Album ou d'une Playlist">
+      </div>
+      <button type="submit" class="btn" id="download-button" onclick="startDownload()">Télécharger</button>
+    </form>
+    <button class="btn2" id="refresh-button" onclick="refreshPage()">Rafraîchir</button>
+  </div>
+<script>
+  function startDownload() {
+    document.getElementById('download-button').innerHTML = 'Téléchargement en cours...';
+  }
+  function refreshPage() {
+    window.location.reload();
+  }
+</script>
+</body>
+</html