Enable replication on upload cards

AlertaDengue · Dec 20, 2024 · 7d9cc83 · 7d9cc83
1 parent 9485075
commit 7d9cc83
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 28 deletions.
diff --git a/AlertaDengue/static/css/upload/index.css b/AlertaDengue/static/css/upload/index.css
@@ -16,30 +16,40 @@
   padding: 4px;
 }
 
-#dropzone {
-  border: 2px dashed #007bff;
-  border-radius: 5px;
-  padding: 20px;
-  text-align: center;
-  background-color: #f9f9f9;
-  cursor: pointer;
-}
-
-#dropzone:hover {
-  background-color: #eef6ff;
+.card-body {
+  margin: -15px;
+  margin-bottom: -30px;
 }
 
 #upload-files {
   display: flex;
-  justify-content:center;
+  flex-wrap: wrap;
+  justify-content: center;
+  min-height: 300px;
   align-items: center;
+  padding-left: 15px;
+  background: #fff;
+  border-radius: 8px;
+  border: 1px solid #e0e0e0;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1), 0 2px 5px rgba(0, 0, 0, 0.06);
+  transition: box-shadow 0.3s ease-in-out;
+}
 
+label[for^="upload_"] {
+  margin-botton: 0;
 }
 
-[id^="upload_"] {
-  display: none;
+#upload-files {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 20px;
 }
 
-label[for^="upload_"] {
-  margin-botton: 0;
+#upload-icon {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
 }
diff --git a/AlertaDengue/static/js/upload/index.js b/AlertaDengue/static/js/upload/index.js
@@ -86,18 +86,35 @@ function upload_card(element_id, action, filename, formData) {
 }
 
 function chunked_upload(element_id) {
-  const id_parts = element_id.split('_').map((part, index) => index === 1 ? parseInt(part) : part);
+  const id_parts = element_id.split('_').map((part, index) => (index === 1 ? parseInt(part) : part));
+  const input_id = element_id.replace('#', '');
 
-  if ($(element_id).length === 0) {
-    $('#upload-files').append(`
-      <label for="${element_id.replace('#', '')}" style="cursor: pointer; display: inline-block;" alt="Upload file">
-        <i class="fa fa-plus-circle" style="font-size: 50px; color: #2ff96c;"></i>
-      </label>
+  if (!$('#upload-icon label').length) {
+    $('#upload-files').prepend(`
+      <div id="upload-icon">
+        <label for="${input_id}" style="cursor: pointer; display: inline-block;" alt="Upload file">
+          <i class="fa fa-plus-circle" style="font-size: 50px; color: #2ff96c;"></i>
+        </label>
+        <input
+          id="${input_id}"
+          type="file"
+          name="file"
+          accept=".csv,.dbf,.parquet,.csv.gz,.csv.zip,.dbf.gz,.dbf.zip,.parquet.gz,.parquet.zip"
+          style="display: none;"
+        >
+      </div>
+    `);
+  } else {
+    $('#upload-icon label').attr('for', input_id);
+
+    $('#upload-icon input').remove();
+    $('#upload-icon').append(`
       <input
-        id="${element_id.replace('#', '')}"
+        id="${input_id}"
         type="file"
         name="file"
         accept=".csv,.dbf,.parquet,.csv.gz,.csv.zip,.dbf.gz,.dbf.zip,.parquet.gz,.parquet.zip"
+        style="display: none;"
       >
     `);
   }
@@ -109,9 +126,8 @@ function chunked_upload(element_id) {
     headers: { 'X-CSRFToken': csrf },
 
     add: function(e, data) {
-      $(`label[for="${element_id.replace('#', '')}"]`).hide();
       chunked_upload([id_parts[0], `${id_parts[1] + 1}`].join('_'));
-      upload_card("card_1", "get", data.files[0].name);
+      upload_card(`${id_parts[1]}`, "get", data.files[0].name);
 
       calculate_md5(data).then(() => {
         data.formData = [

diff --git a/AlertaDengue/upload/templates/sinan/card.html b/AlertaDengue/upload/templates/sinan/card.html
@@ -16,7 +16,8 @@ <h3 class="card-title text-truncate" title="{{ filename }}">{{ filename }}</h3>
 
 <style>
   .card {
-    width: 300px;
+    flex: 0 1 calc(30% - 10px);
+    width: 240px;
     max-width: 100%;
     margin: 10px;
   }

diff --git a/AlertaDengue/upload/templates/sinan/index.html b/AlertaDengue/upload/templates/sinan/index.html
@@ -93,8 +93,7 @@
               <div class="content">
                 <div class="panel panel-default col-xs-6">
                   <div class="panel-body">
-                    <div id="upload-files">
-                    </div>
+                    <div id="upload-files"></div>
                   </div>
                 </div>
               </div>

diff --git a/AlertaDengue/upload/views.py b/AlertaDengue/upload/views.py
@@ -1,3 +1,5 @@
+from pathlib import Path
+
 from django.contrib.auth import get_user_model
 from django.contrib import messages
 from django.http import JsonResponse
@@ -11,6 +13,7 @@
 from chunked_upload.views import ChunkedUploadView, ChunkedUploadCompleteView
 
 from . import models, forms
+from upload.sinan.utils import UF_CODES
 
 from loguru import logger
 
@@ -56,6 +59,12 @@ def form_valid(self, form):
     def get_context_data(self, **kwargs):
         context = super().get_context_data(**kwargs)
         filename = self.request.GET.get("filename", "")
+
+        for uf in UF_CODES:
+            if uf in str(Path(filename).with_suffix("")).upper():
+                context["form"] = self.get_form(self.get_form_class())
+                context["form"].fields["uf"].initial = uf
+
         context["filename"] = filename
         return context