From 09cda1e88888ff2cc7e168e18f2d5afcfa423c39 Mon Sep 17 00:00:00 2001
From: nkoexe <niccolo.rag@gmail.com>
Date: Thu, 29 Aug 2024 23:32:55 +0200
Subject: [PATCH] stile upload file docenti

---
 .../scripts/gestione_impostazioni/docenti.js  | 12 ++--
 .../view/static/style/impostazioni.css        | 67 ++++++++++++++++---
 .../gestione_impostazioni/docenti.html        | 16 ++---
 3 files changed, 71 insertions(+), 24 deletions(-)

diff --git a/sostituzioni/view/static/scripts/gestione_impostazioni/docenti.js b/sostituzioni/view/static/scripts/gestione_impostazioni/docenti.js
index c409c4f..5142c49 100644
--- a/sostituzioni/view/static/scripts/gestione_impostazioni/docenti.js
+++ b/sostituzioni/view/static/scripts/gestione_impostazioni/docenti.js
@@ -225,25 +225,27 @@ socket.on("elimina tutti docenti annulla successo", () => {
 
 //----------------------------------
 
+
+const import_docenti_dropzone = document.querySelector("#import-docenti-dropzone")
 const docenti_filepicker = document.querySelector("#import-docenti-filepicker")
-const docenti_selected_file_label = document.querySelector("#import-docenti-selected-file-label")
+const docenti_selected_file_label = document.querySelector("#import-docenti-selected-file-name")
 
 docenti_filepicker.onchange = () => {
   if (docenti_filepicker.value == "") {
-    docenti_selected_file_label.innerHTML = ""
+    docenti_filepicker.classList.remove("fileselected")
   } else {
+    docenti_filepicker.classList.add("fileselected")
     docenti_selected_file_label.innerHTML = docenti_filepicker.files[0].name
   }
 }
-const import_docenti_dropzone = document.querySelector("#import-docenti-dropzone")
 
 import_docenti_dropzone.ondrop = (e) => {
+  console.log(e.dataTransfer.files)
   e.preventDefault();
   import_docenti_dropzone.classList.remove("filehover")
 
-  let file = e.dataTransfer.files[0]
   docenti_filepicker.files = e.dataTransfer.files
-
+  docenti_filepicker.onchange()
 }
 
 import_docenti_dropzone.ondragover = (e) => {
diff --git a/sostituzioni/view/static/style/impostazioni.css b/sostituzioni/view/static/style/impostazioni.css
index 0f07919..aad05b3 100644
--- a/sostituzioni/view/static/style/impostazioni.css
+++ b/sostituzioni/view/static/style/impostazioni.css
@@ -326,7 +326,7 @@ input[type="file"] {
     display: none;
 }
 
-input[type="file"]+label {
+/* input[type="file"]+label {
     padding: 15px;
     margin-left: 15px;
     color: var(--color-text-opzione);
@@ -336,16 +336,16 @@ input[type="file"]+label {
     font-size: 25px;
     cursor: pointer;
     box-shadow: none;
-}
+} */
 
-input[type="file"]+label:hover {
+/* input[type="file"]+label:hover {
     background-color: #ececec;
     box-shadow: none !important;
-}
+} */
 
-#import-docenti-selected-file-label {
+/* #import-docenti-selected-file-label {
     margin: auto 10px;
-}
+} */
 
 
 /* SELEZIONE */
@@ -389,12 +389,61 @@ input[type="file"]+label:hover {
 
 .opzione-file-dropzone {
     width: 100%;
-    background-color: var(--color-background-opzione);
+    height: 150px;
+    padding: 20px;
+    color: #00000099;
+    background-color: var(--color-opzioni);
     border: var(--border-opzione);
+    border-style: dashed;
+    border-width: 2px;
     border-radius: 5px;
-    font-size: 25px;
+    font-size: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: all 0.2s;
+}
+
+.opzione-file-dropzone:has(.fileselected) {
+    display: none;
+}
+
+.opzione-file-dropzone label {
+    padding: 20px;
     cursor: pointer;
-    box-shadow: none;
+}
+
+.opzione-file-dropzone label:hover {
+    text-decoration: underline;
+}
+
+.opzione-file-dropzone.filehover {
+    background-color: #00000015;
+    border-color: #00000062;
+    box-shadow: 0 0 10px #00000043;
+}
+
+.opzione-file-dropzone.filehover label {
+    pointer-events: none;
+}
+
+.import-selected-file {
+    display: none;
+    padding: 5px 0 5px 15px;
+    border: var(--border-opzione);
+    border-radius: 10px;
+}
+
+.import-selected-file-name {
+    /* font-family: monospace; */
+    padding: 5px 10px;
+    margin-left: 5px;
+    border-radius: 10px;
+    background-color: var(--color-gestionedati-modificato);
+}
+
+.opzione-file:has(.fileselected) .import-selected-file {
+    display: block;
 }
 
 /* Selezione unità del numero */
diff --git a/sostituzioni/view/templates/gestione_impostazioni/docenti.html b/sostituzioni/view/templates/gestione_impostazioni/docenti.html
index ce224ca..caa4c18 100644
--- a/sostituzioni/view/templates/gestione_impostazioni/docenti.html
+++ b/sostituzioni/view/templates/gestione_impostazioni/docenti.html
@@ -11,18 +11,15 @@
   <div id="main-container">
     <div class="opzione">
       <h5 class="opzione-titolo">Importa docenti da file</h5>
-      <p class="opzione-descrizione">Usare preferibilmente file esportati dai gruppi Google. Accettati formati XSLX e CSV, con l'email nella colonna 'Member Email'. Il nome del file dovrebbe assomigliare a questo: 'Members_xxxxxxxxxxxxxxxx_01012023_000000.csv.xlsx'</p>
+      <p class="opzione-descrizione">Usare file esportati dai gruppi Google. Accettati formati XSLX e CSV.</p>
+      <!-- <p class="opzione-descrizione">Usare file esportati dai gruppi Google. Accettati formati XSLX e CSV, con l'email nella colonna 'Member Email'. Il nome del file dovrebbe assomigliare a questo: 'Members_xxxxxxxxxxxxxxxx_01012023_000000.csv.xlsx'</p> -->
       <div class="opzione-file">
         <div id="import-docenti-dropzone" class="opzione-file-dropzone">
-          <div class="opzione-file-dropzone-content">
-            <span class="material-symbols-rounded icon">upload_file</span>
-            <span class="opzione-file-dropzone-text">Trascina qui il file da importare</span>
-          </div>
+          <input type="file" id="import-docenti-filepicker" accept=".csv,.xlsx">
+          <label for="import-docenti-filepicker"><span>Selezione un file o trascinalo qui</span></label>
         </div>
-        <input type="file" id="import-docenti-filepicker" accept=".csv,.xlsx">
-        <label for="import-docenti-filepicker" class="material-symbols-rounded pulsante">upload_file</label>
-        <button onclick="importa_docenti()" class="pulsante">Importa</button>
-        <span id="import-docenti-selected-file-label"></span>
+        <!-- todo pulsante conferma e pulsante cancella file -->
+        <span id="import-docenti-selected-file" class="import-selected-file">File selezionato: <span id="import-docenti-selected-file-name" class="import-selected-file-name"></span></span>
       </div>
     </div>
     <div id="container-docenti" class="opzione gestione-dati-container">
@@ -31,7 +28,6 @@ <h5 class="opzione-titolo">Importa docenti da file</h5>
           <button class="pulsante gestione-dati-pulsante-nuovo" onclick="nuovo_docente()"><span class="icon material-symbols-rounded">add</span><span class="text">Nuovo Docente</span></button>
         </div>
         <div id="cerca-docente-container" class="gestione-dati-cerca-container">
-          <!-- <span class="icon material-symbols-rounded">search</span> -->
           <input type="text" id="cerca-docente-input" placeholder="Cerca" oninput="cerca_docente()">
           <button class="gestione-dati-pulsante-cerca" onclick="cerca_docente()"><span class="icon material-symbols-rounded">search</span></button>
         </div>