From 121da9eefd7416c4c084e060271960e422d36e13 Mon Sep 17 00:00:00 2001
From: Gu1llaum-3 <archambault.guillaume06@gmail.com>
Date: Sat, 31 Dec 2022 20:12:05 +0100
Subject: [PATCH] =?UTF-8?q?Nombreuses=20modifications=20au=20niveau=20du?=
 =?UTF-8?q?=20CSS=20ainsi=20que=20sur=20app.py=20c=C3=B4t=C3=A9=20chemins?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app.py                           | 16 ++++--
 static/css/style.css             | 85 ++++++++++++++++++++++++++++++++
 templates/download_complete.html |  6 +--
 templates/test.html              | 53 ++++++++++++++++++++
 templates/upload.html            | 22 ++++++---
 5 files changed, 168 insertions(+), 14 deletions(-)
 create mode 100644 templates/test.html

diff --git a/app.py b/app.py
index f2a6d76..0c79fe0 100644
--- a/app.py
+++ b/app.py
@@ -12,10 +12,10 @@ def process_file(urls):
     # path = os.path.expanduser('~/musics/downloads')
     #path = '/home/gu1ll4um3/github/SpotDL_Web/downloads'
     #path = 'downloads/'
-    download_param_album = 'downloads/{artist}/{album}/{artist} - {title}'
+    download_param_album = '{artist}/{album}/{artist} - {title}'
     download_param_playlist = '{playlist}/{artists}/{album} - {title} {artist}'
 
-    #os.chdir(f"{path}")
+    os.chdir('downloads')
     #os.system(f'rm -rf *')
 
     for url in urls:
@@ -27,7 +27,8 @@ def process_file(urls):
                 os.system(f'python3 -m spotdl {url} --output "{download_param_playlist}"')
             
     
-    os.system(f'zip -r musics.zip ./')
+    # os.system(f'zip -r musics.zip ./downloads')
+    run(['zip', '-r', 'musics.zip', '.'])
 
 @app.route('/', methods=['GET', 'POST'])
 def index():
@@ -47,14 +48,15 @@ def index():
         process_file(urls)
         #print(resultProcessFile)
         
-        with open('/home/gu1ll4um3/github/SpotDL_Web/erreurs.txt', 'r') as f:
+        with open('/home/gu1ll4um3/github/SpotDL_Web/logs/erreurs.log', 'r') as f:
             result2 = f.readlines()
     return render_template('download_complete.html', result2=result2)
 
 @app.route('/download', methods=['GET'])
 def download():
     # PATH='/home/gu1ll4um3/musics/downloads/musics.zip'
-    PATH='./downloads/musics.zip'
+    #os.chdir('downloads')
+    PATH='downloads/musics.zip'
     return send_file(PATH,as_attachment=True)
 
 # @app.route('/errors')
@@ -63,6 +65,10 @@ def download():
 #       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)
diff --git a/static/css/style.css b/static/css/style.css
index 5e1e174..935bc98 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -53,3 +53,88 @@ button {
     margin: 10px auto;
   }
 
+/* .urlbox{
+    font-size: 13px;
+    padding-left: 7px;
+    padding-right: 7px;
+    border-radius: 9px;
+    width:100%;
+    height:30px;
+} */
+
+/* .urlbox:empty {
+    border: 2px solid #999999;
+    font-size: 13px;
+    padding-left: 7px;
+    padding-right: 7px;
+    border-radius: 9px;
+    width:100%;
+    height:30px;
+}
+
+.urlbox:valid:not(:placeholder-shown){
+    border:rgb(24,216,96) 2px;
+    font-size: 13px;
+    padding-left: 7px;
+    padding-right: 7px;
+    border-radius: 9px;
+    width:100%;
+    height:30px;
+}
+.urlbox:invalid{
+    border: red solid 2px;
+    font-size: 13px;
+    padding-left: 7px;
+    padding-right: 7px;
+    border-radius: 9px;
+    width:100%;
+    height:30px;
+} */
+
+.urlbox:empty {
+    border: 2px solid grey;
+    font-size: 13px;
+    padding-left: 7px;
+    padding-right: 7px;
+    border-radius: 9px;
+    width:100%;
+    height:30px;
+  
+
+}
+.urlbox:valid:not(:placeholder-shown) {
+    border: 2px solid rgb(24,216,96);
+    font-size: 13px;
+    padding-left: 7px;
+    padding-right: 7px;
+    border-radius: 9px;
+    width:100%;
+    height:30px;
+  }
+.urlbox:invalid {
+    border: 2px solid red;
+    font-size: 13px;
+    padding-left: 7px;
+    padding-right: 7px;
+    border-radius: 9px;
+    width:100%;
+    height:30px;
+}
+
+
+
+button{
+    /* margin-right: 0px; */
+    height: 30px;
+    width:130px;
+    border-radius: 5px ;
+    border: none; 
+    /* float: right; */
+    background-color: #ddd;
+    font-weight: bold;
+}
+
+button:hover{
+    background-color: rgb(24,216,96);
+    color: white;
+}
\ No newline at end of file
diff --git a/templates/download_complete.html b/templates/download_complete.html
index e5beb0b..f03fc5d 100644
--- a/templates/download_complete.html
+++ b/templates/download_complete.html
@@ -13,11 +13,11 @@
     <form class="logs">
         <div><h1>Fichier de texte</h1></div>
         <div>
-            <ul>
+            <a>
             {% for line in result2 %}
-                <li>{{ line }}</li>
+                <p>{{ line }}<br></p>
             {% endfor %}
-            </ul>    
+            </a>    
         </div>
         
     </form>  
diff --git a/templates/test.html b/templates/test.html
new file mode 100644
index 0000000..7693af7
--- /dev/null
+++ b/templates/test.html
@@ -0,0 +1,53 @@
+<style>
+
+    button:hover {
+        background-color: blue;
+        color: white;
+    }
+
+    button:active::before {
+        content: "Bouton cliqué";
+      }
+
+    input:empty {
+        border: 2px solid grey;
+        font-size: 13px;
+        padding-left: 7px;
+        padding-right: 7px;
+        border-radius: 9px;
+        width:100%;
+        height:30px;
+    }
+    input:valid:not(:placeholder-shown) {
+        border: 2px solid green;
+        font-size: 13px;
+        padding-left: 7px;
+        padding-right: 7px;
+        border-radius: 9px;
+        width:100%;
+        height:30px;
+      }
+    input:invalid {
+        border: 2px solid red;
+        font-size: 13px;
+        padding-left: 7px;
+        padding-right: 7px;
+        border-radius: 9px;
+        width:100%;
+        height:30px;
+    }
+  </style>
+  
+  <!-- L'élément input suivant aura une bordure grise s'il est vide, verte s'il contient une valeur valide, ou rouge s'il contient une valeur qui ne respecte pas le format défini par la regex -->
+  <input type="text" pattern="^https://open\.spotify\.com/(?:album|playlist)/[\w-]+(?:\?si=[\w-]+)$" placeholder="url"/>
+  <button id="mon-bouton">Mon bouton</button>
+  <script>
+    // Récupère l'élément bouton grâce à son ID
+    const bouton = document.getElementById('mon-bouton');
+  
+    // Ajoute un écouteur d'événement 'click' au bouton
+    bouton.addEventListener('click', function() {
+      // Met à jour la valeur de l'attribut innerHTML du bouton
+      this.innerHTML = "Bouton cliqué";
+    });
+  </script>
\ No newline at end of file
diff --git a/templates/upload.html b/templates/upload.html
index e671f03..72f8be8 100644
--- a/templates/upload.html
+++ b/templates/upload.html
@@ -15,31 +15,41 @@
 
         <div style="margin-top: 10px;">
             <!-- <label for="url1">URL 1:</label> -->
-            <input type="text" name="url1" id="url1" placeholder="URL" value="https://open.spotify.com/album/3QgFzksD4J43TnGIJOOrRV?si=X6q4QeJ_TtCi9q9fu25Aww">
+            <input type="text" name="url1" id="url1" class="urlbox" pattern="^https://open\.spotify\.com/(?:album|playlist)/[\w-]+(?:\?si=[\w-]+)$" placeholder="Copier un lien d'album ou de playlist">
         </div>
             
         <div style="margin-top: 10px;">
             <!-- <label for="url2">URL 2:</label> -->
-            <input type="text" name="url2" id="url2" placeholder="URL">
+            <input type="text" name="url2" id="url2" class="urlbox" pattern="^https://open\.spotify\.com/(?:album|playlist)/[\w-]+(?:\?si=[\w-]+)$" placeholder="Copier un lien d'album ou de playlist">
         </div>
 
         <div style="margin-top: 10px;">
             <!-- <label for="url3">URL 3:</label> -->
-            <input type="text" name="url3" id="url3" placeholder="URL">
+            <input type="text" name="url3" id="url3" class="urlbox" pattern="^https://open\.spotify\.com/(?:album|playlist)/[\w-]+(?:\?si=[\w-]+)$" placeholder="Copier un lien d'album ou de playlist">
         </div>
 
         <div style="margin-top: 10px;">
             <!-- <label for="url4">URL 4:</label> -->
-            <input type="text" name="url4" id="url4" placeholder="URL">
+            <input type="text" name="url4" id="url4" class="urlbox" pattern="^https://open\.spotify\.com/(?:album|playlist)/[\w-]+(?:\?si=[\w-]+)$" placeholder="Copier un lien d'album ou de playlist">
         </div>
 
         <div style="margin-top: 10px;">
             <!-- <label for="url5">URL 5:</label> -->
-            <input type="text" name="url5" id="url5" placeholder="URL">
+            <input type="text" name="url5" id="url5" class="urlbox" pattern="^https://open\.spotify\.com/(?:album|playlist)/[\w-]+(?:\?si=[\w-]+)$" placeholder="Copier un lien d'album ou de playlist">
         </div>
 
         <div style="margin-top: 10px;">
-            <input type="submit" value="Téléchargement">
+            <button type="submit" id="btn" class="btn" value="Téléchargement">Téléchargement</button>
+            <script>
+                // Récupère l'élément bouton grâce à son ID
+                const bouton = document.getElementById('btn');
+              
+                // Ajoute un écouteur d'événement 'click' au bouton
+                bouton.addEventListener('click', function() {
+                  // Met à jour la valeur de l'attribut innerHTML du bouton
+                  this.innerHTML = "Téléchargement en cours ...";
+                });
+              </script>
         </div>
 
     </form>