Manage Volumes

assets/main.js

@@ -529,3 +529,106 @@ async function logout() {
 		buttonLoading(logoutButton, false, "Logout")
 	}
 }
+
+async function deleteVolume(block_name) {
+	const deleteButton = document.getElementById(`delete-block-button-${block_name}`);
+	const molly_csrf = document.getElementById("molly-csrf").value;
+	const formAlert = document.getElementById("form-alert");
+	try {
+		buttonLoading(deleteButton, true, "Deleting...")
+		const response = await fetch("/api/volume/delete", {
+			method: 'POST',
+			headers: {
+				"Content-Type": "application/json",
+			},
+			body: JSON.stringify(
+				{
+					"block_name": block_name,
+					"molly_csrf": molly_csrf
+				})
+		})
+		const data = await response.json();
+		if (data.status === 200) {
+			formAlert.classList.remove("hidden", "text-secondary-500");
+			formAlert.classList.add("text-primary-500");
+			formAlert.textContent = "Successfully deleted";
+			postAlert("bg-primary-300", "Volume deleted succesfully");
+			setTimeout(() => window.location.reload(), 1000);
+			buttonLoading(deleteButton, false, "Delete")
+		} else {
+			formAlert.classList.remove("hidden", "text-primary-500");
+			formAlert.classList.add("text-secondary-500");
+			formAlert.textContent = data.data
+			buttonLoading(deleteButton, false, "Delete")
+		}
+	} catch (error) {
+		formAlert.classList.remove("hidden", "text-primary-500");
+		formAlert.classList.add("text-secondary-500");
+		formAlert.textContent = error
+		buttonLoading(deleteButton, false, "Delete")
+	}
+}
+
+async function createVolume() {
+	const createButton = document.getElementById("create-block-button");
+	const block_name = document.getElementById("block_name").value;
+	const block_size = document.getElementById("block_size").innerText;
+	const data_toggle = document.getElementById("dataToggle").checked;
+	const molly_csrf = document.getElementById("molly-csrf").value;
+	const formAlert = document.getElementById("form-alert");
+	const block_compressed = document.getElementById("block_compressed").checked;
+	const block_data = document.getElementById("block_data").files[0];
+	try {
+		if (block_name === "") {
+			formAlert.classList.remove("hidden", "text-primary-500");
+			formAlert.classList.add("text-secondary-500");
+			formAlert.textContent = "Please enter a name for this volume"
+			buttonLoading(createButton, false, "Create volume")
+		}
+		else if (Number(block_size) < 1) {
+			formAlert.classList.remove("hidden", "text-primary-500");
+			formAlert.classList.add("text-secondary-500");
+			formAlert.textContent = "Volume size must be 1MB or greater."
+			buttonLoading(createButton, false, "Create volume")
+		}
+		else {
+			buttonLoading(createButton, true, "Creating...")
+			let formData = new FormData();
+			formData.append("block_name", block_name);
+			formData.append("block_size", Number(block_size))
+			if (data_toggle && !block_data) {
+				formAlert.classList.remove("hidden", "text-primary-500");
+				formAlert.classList.add("text-secondary-500");
+				formAlert.textContent = "You must upload a file else switch 'Dumb data to this volume' off"
+				buttonLoading(createButton, false, "Create volume")
+				return;
+			}
+			formData.append("block_compressed", block_compressed)
+			formData.append("block_data", block_data)
+			formData.append("molly_csrf", molly_csrf)
+			const response = await fetch("/api/volume/create", {
+				method: 'POST',
+				body: formData
+			})
+			const data = await response.json();
+			if (data.status === 200) {
+				formAlert.classList.remove("hidden", "text-secondary-500");
+				formAlert.classList.add("text-primary-500");
+				formAlert.textContent = "Succesfully deleted";
+				postAlert("bg-primary-300", "Volume created succesfully");
+				setTimeout(() => window.location.reload(), 000);
+				buttonLoading(createButton, false, "Create volume")
+			} else {
+				formAlert.classList.remove("hidden", "text-primary-500");
+				formAlert.classList.add("text-secondary-500");
+				formAlert.textContent = data.data
+				buttonLoading(createButton, false, "Create volume")
+			}
+		}
+	} catch (error) {
+		formAlert.classList.remove("hidden", "text-primary-500");
+		formAlert.classList.add("text-secondary-500");
+		formAlert.textContent = error
+		buttonLoading(createButton, false, "Create volume")
+	}
+}

header_layout.ml

@@ -32,4 +32,6 @@ let header ?(page_title = "Mollymawk") ~icon () =
                 "https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js";
             ]
           (txt "");
+        (* chart.js is used for chart elements like pie charts. We use this to visualize usage data of policies*)
+        script ~a:[ a_src "https://cdn.jsdelivr.net/npm/chart.js" ] (txt "");
       ])