initial upload

ui/components/modals.njk

@@ -0,0 +1,50 @@
+
+{% macro insertCreateDirectoryModal() %}
+<!-- Modal -->
+<div class="modal fade" id="createDirectoryModal" tabindex="-1" data-bs-backdrop="static">
+  <div class="modal-dialog modal-dialog-centered">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h1 class="modal-title fs-5" id="exampleModalLabel">Create New Directory</h1>
+      </div>
+      <div class="modal-body">
+        <form id="createDirectoryForm">
+            <div class="flex-fill">
+                <label class="form-label">Directory Name:</label>
+                <input type="text" class="form-control" name="name" placeholder="New Directory">
+            </div>
+        </form>
+      </div>
+      <div class="modal-footer">
+        <button id="buttonCancelCreateDirectory" class="btn btn-sm btn-outline-warning px-2" title="save directory" data-bs-toggle="modal" data-bs-target="#createDirectoryModal">
+            <i class="ti ti-x me-2"></i>Cancel
+        </button>
+        <button id="buttonSaveCreateDirectory" class="btn btn-sm btn-outline-primary px-2" title="save directory">
+            <i class="ti ti-device-floppy me-2"></i>Save
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+<script>
+    $('#buttonSaveCreateDirectory').on('click', async () => {
+        console.log("click");
+        var Response = await fetch(window.location.pathname,
+        {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(
+                Object.fromEntries(
+                    new FormData(document.querySelector('#createDirectoryForm'))
+                )
+            ),
+        }).then(() => {
+            $('#createDirectoryModal').modal('hide');
+        });
+
+        console.log(Response);
+    })
+</script>
+{% endmacro %}