Add delete files and dockerize application

assets/static/js/data-delete.js

@@ -0,0 +1,38 @@
+const deleteForms = document.querySelectorAll('.delete-form');
+
+const deleteData = async (form) => {
+  const fileIdInput = form.querySelector('.file-id');
+  const fileId = fileIdInput.value;
+  if (!fileId) {
+    console.warn('No file selected');
+    return;
+  }
+
+  try {
+    const response = await fetch(`/api/data/id/${fileId}`, {
+      method: 'DELETE',
+    });
+
+    if (response.ok) {
+      alert('Data deleted successfully');
+      window.location.reload();
+      fileIdInput.value = '';
+    } else {
+      console.error(
+        'Failed to delete data ',
+        response.status,
+        response.statusText
+      );
+    }
+  } catch (error) {
+    console.error('Error deleting data ', error);
+  }
+};
+
+deleteForms.forEach((form) => {
+  const deleteButton = form.querySelector('.delete-button');
+  deleteButton.addEventListener('click', (event) => {
+    event.preventDefault();
+    deleteData(form);
+  });
+});

assets/static/js/data-upload.js

@@ -1,6 +1,7 @@
 const form = document.getElementById('data-upload');
 const fileInput = document.getElementById('file-input');
-const protectedInput = document.getElementById('protected-input');
+const protectedInput = document.getElementById('protected');
+const uniqueNameInput = document.getElementById('unique_name');
 
 const uploadData = async () => {
   if (!fileInput.files.length) {
@@ -11,6 +12,7 @@ const uploadData = async () => {
   const formData = new FormData();
   formData.append('file', fileInput.files[0]);
   formData.append('protected', protectedInput.checked ? 'true' : 'false');
+  formData.append('unique_name', uniqueNameInput.checked ? 'true' : 'false');
 
   try {
     const response = await fetch('/api/data/upload', {

assets/views/website/data-upload.html

@@ -6,7 +6,11 @@
   <input id="file-input" type="file" id="file" name="file" required />
   <div>
     <label class="text-white" for="protected">Protected:</label>
-    <input id="protected-input" type="checkbox" id="protected" name="protected" />
+    <input type="checkbox" id="protected" name="protected" />
+    </div>
+    <div>
+      <label class="text-white" for="unique_name">Unique name:</label>
+      <input type="checkbox" id="unique_name" name="unique_name" />
   </div>
   <button class="p-2 text-gray-900 bg-yellow-500 rounded-sm shadow hover:bg-yellow-600" type="submit">Upload</button>
 </form>

assets/views/website/data.html

@@ -1,4 +1,5 @@
 {% extends "website/base.html" %} {% block content %}
+<script src="/static/js/data-delete.js" defer></script>
 <span class="mt-8"></span>
 <a class="p-2 text-gray-900 bg-yellow-500 rounded-sm shadow hover:bg-yellow-600" href="/upload">Add new file</a>
 <table class="table-fixed">
@@ -18,6 +19,12 @@
             <td>{{ file.protected }}</td>
             <td><a class="p-2 text-gray-900 bg-yellow-500 rounded-sm shadow hover:bg-yellow-600"
                     href="/api/data/{{ file.file_name }}">Download</a></td>
+            <td>
+                <form class="delete-form">
+                    <input class="file-id" id="file_id" type="hidden" name="file_id" value="{{ file.id }}" />
+                    <button class="p-2 text-gray-900 bg-red-500 rounded-sm shadow hover:bg-red-600 delete-button">Delete</button>
+                </form>
+            </td>
         </tr>
         {% endfor %}
     </tbody>