import and export zipped projects

Author: MathMan05

src/webpage/index.ts

@@ -7,7 +7,9 @@ import {instructions} from "./fetches.js";
 import {I18n} from "./i18n.js";
 import {Project} from "./projects/project.js";
 import {ProjFiles} from "./projects/projectFiles.js";
+import {getUserUpload} from "./utils/utils.js";
 import "./ziputils/zip.js";
+import {CentDir, Zip} from "./ziputils/zip.js";
 const actionRow = document.getElementById("actionRow");
 if (!actionRow) throw Error("action row not in document");
 const cons = new Console();
@@ -32,12 +34,14 @@ fileMenu.addButton(
 		focusedEditor.save();
 	},
 );
+
 fileMenu.addButton(
 	() => I18n.file.saveAll(),
 	() => {
 		editors.map((_) => _.save());
 	},
 );
+
 fileMenu.addButton(
 	() => I18n.file.saveAs(),
 	() => {
@@ -80,6 +84,57 @@ fileButton.textContent = I18n.file.file();
 actionRow.append(fileButton);
 fileMenu.bindContextmenu(fileButton, undefined, undefined, true);
 
+const projectMenu = new Contextmenu("Project");
+projectMenu.addButton(
+	() => I18n.file.download(),
+	() => {
+		projFile?.pro.downloadProject();
+	},
+	{
+		visable: () => !!projFile,
+	},
+);
+projectMenu.addButton(
+	() => I18n.file.deleteProject(),
+	async () => {
+		if (curProject) {
+			if (!confirm(I18n.confirmDeleteProject(curProject.name))) {
+				return;
+			}
+
+			await curProject.deleteProject();
+			openProject(undefined);
+		}
+	},
+	{
+		visable: () => !!projFile,
+	},
+);
+projectMenu.addButton(
+	() => I18n.file.import(),
+	async () => {
+		const user = await getUserUpload("application/zip");
+		if (!user) return;
+		const zip = new Zip(await user.arrayBuffer());
+		let fs = zip.fileStructure;
+		let entries = Object.entries(fs);
+		let name = user.name.split(".")[0];
+		while (entries.length === 1 && !(entries[0][1] instanceof CentDir)) {
+			fs = entries[0][1];
+			name = entries[0][0];
+			entries = Object.entries(fs);
+		}
+		const project = await Project.new(name);
+		await zip.writeIntoDir(project.dir.handle, fs);
+		openProject(project);
+	},
+);
+
+const projectButton = document.createElement("button");
+projectButton.textContent = I18n.file.project();
+actionRow.append(projectButton);
+projectMenu.bindContextmenu(projectButton, undefined, undefined, true);
+
 const menu = new Contextmenu("run");
 
 const assemble = document.getElementById("assemble") as HTMLElement;
@@ -656,8 +711,16 @@ function downloadEditor(editor: Editor) {
 }
 let curProject: Project | undefined;
 let projFile: ProjFiles | undefined;
-async function openProject(proj: Project) {
+async function openProject(proj?: Project) {
+	if (!proj) {
+		curProject = undefined;
+		projFile = undefined;
+		editors = [];
+		editArea();
+		return;
+	}
 	curProject = proj;
+
 	projFile = new ProjFiles(proj);
 	projFile.addEventListener("open", async (e) => {
 		const editor = Editor.editMap.get(`${proj.name}:${e.fileName}`);

src/webpage/projects/project.ts

@@ -1,4 +1,5 @@
-import {Directory} from "../utils/utils.js";
+import {Directory, downloadBuffer} from "../utils/utils.js";
+import {Zip} from "../ziputils/zip.js";
 
 class Project {
 	name: string;
@@ -117,5 +118,13 @@ main:
 			console.error("internal error, please fix me sometime :P");
 		}
 	}
+	async deleteProject() {
+		const home = await Directory.home;
+		await home.handle.removeEntry(this.name, {recursive: true});
+	}
+	async downloadProject() {
+		const buff = await Zip.zip(this.dir.handle);
+		downloadBuffer(buff, this.name + ".zip");
+	}
 }
 export {Project};

src/webpage/utils/utils.ts

@@ -78,6 +78,20 @@ class Directory {
 		return new Directory(await this.handle.getDirectoryHandle(name, {create: true}));
 	}
 }
+export function getUserUpload(mimeType = "") {
+	return new Promise<null | File>((res) => {
+		const input = document.createElement("input");
+		input.type = "file";
+		input.accept = mimeType;
+		input.multiple = false;
+		input.onchange = () => {
+			if (input.files) {
+				res(input.files.item(0));
+			}
+		};
+		input.click();
+	});
+}
 export function downloadBuffer(buff: ArrayBuffer, name: string) {
 	const blob = new Blob([buff], {type: "text/plain"});
 	const objectURL = URL.createObjectURL(blob);

src/webpage/ziputils/zip.ts

@@ -1,5 +1,4 @@
 import {I18n} from "../i18n";
-import {downloadBuffer} from "../utils/utils";
 
 const enum compMethod {
 	none = 0,
@@ -107,7 +106,7 @@ function guessText(buff: Uint8Array) {
 	const newBuff = new Uint8Array([...buff]);
 	return new TextDecoder().decode(newBuff.buffer) || "";
 }
-class CentDir {
+export class CentDir {
 	verMade: number;
 	verExt: number;
 	flags: number;
@@ -371,6 +370,7 @@ export class Zip {
 				});
 				const write = await fileH.createWritable({keepExistingData: false});
 				write.write(await file.file.getFile());
+				await write.close();
 			} else {
 				const dirH = await dir.getDirectoryHandle(name, {
 					create: true,

translations/en.json

@@ -98,6 +98,7 @@
 	"startProject": "Start a new project",
 	"openFile": "Open a file!",
 	"confirmDelete": "Are you sure you want to delete $1?",
+	"confirmDeleteProject":"Are you sure you want to delete $1? (this deletes all files in the project)",
 	"memPlaces":{
 		"data":"$1 (.data)",
 		"text":"$1 (.text)",
@@ -120,12 +121,16 @@
 	"unsaved": "There are unsaved changes, are you sure you want to close this file?",
 	"file": {
 		"file": "File",
+		"project":"Project",
 		"open": "Open",
 		"new": "New",
 		"save": "Save file",
 		"saveAs": "Save file as",
 		"saveAll": "Save All",
-		"delete": "Delete File"
+		"delete": "Delete File",
+		"download":"Download Project",
+		"deleteProject":"Delete Project",
+		"import":"Import Project"
 	},
 	"submit": "Submit",
 	"instructions":{