[WIP] Provide an easy way for user to import a project..

client/src/hub/index.jade

@@ -17,9 +17,13 @@ html
     .projects-header
       .projects-buttons.button-strip
         button(disabled).new-project= t("hub:newProject.title")
+        button(disabled).import-project= t("hub:importProject.title")
         button(disabled).open-project= t("hub:openProject")
         button(disabled).edit-project= t("hub:editDetails.title")
 
+        form(hidden)
+          input.project-archive-select(type="file", accept="application/zip")
+
       .language-container
         span= t("hub:language")
         select.language

client/src/hub/index.ts

@@ -23,6 +23,9 @@ function start() {
   document.querySelector(".projects-buttons .new-project").addEventListener("click", onNewProjectClick);
   document.querySelector(".projects-buttons .open-project").addEventListener("click", onProjectActivate);
   document.querySelector(".projects-buttons .edit-project").addEventListener("click", onEditProjectClick);
+  const importedFile = document.querySelector("input.project-archive-select") as HTMLInputElement;
+  importedFile.addEventListener("change", onImportProjectClick);
+  document.querySelector(".projects-buttons .import-project").addEventListener("click", () => { importedFile.click(); });
 
   const selectLanguageElt = document.querySelector("select.language") as HTMLSelectElement;
   const languageIds = Object.keys(languageNamesById);
@@ -102,8 +105,9 @@ function onConnected() {
 
   const buttons = document.querySelectorAll(".projects-buttons button") as NodeListOf<HTMLButtonElement>;
   buttons[0].disabled = false;
+  buttons[1].disabled = false;
   const noSelection = ui.projectsTreeView.selectedNodes.length === 0;
-  for (let i = 1; i < buttons.length; i++) buttons[i].disabled = noSelection;
+  for (let i = 2; i < buttons.length; i++) buttons[i].disabled = noSelection;
 }
 
 function onHubWelcome(config: { serverName: string; }) {
@@ -243,3 +247,15 @@ function onEditProjectClick() {
     });
   });
 }
+
+function onImportProjectClick(event: Event) {
+  const target = event.target as HTMLInputElement;
+  if (target.files.length === 0) return;
+
+  const reader = new FileReader();
+
+  reader.onload = function(evnt) {
+    socket.emit("import:projects", { name: target.files[0].name.split(".")[0], data: (evnt.target as any).result });
+  };
+  reader.readAsArrayBuffer(target.files[0]);
+}

package.json

@@ -39,6 +39,7 @@
     "async-lock": "^0.3.8",
     "body-parser": "^1.15.2",
     "cookie-parser": "^1.4.1",
+    "copy-dir": "^0.3.0",
     "dnd-tree-view": "^3.1.2",
     "express": "^4.13.3",
     "express-session": "^1.13.0",
@@ -55,6 +56,7 @@
     "rimraf": "^2.5.0",
     "socket.io": "^1.4.4",
     "tab-strip": "^2.3.0",
+    "temp": "^0.8.3",
     "tv4": "^1.2.7",
     "yargs": "^3.32.0",
     "yauzl": "^2.4.1"

public/locales/en/hub.json

@@ -21,5 +21,9 @@
     "prompt": "Edit the project's details."
   },
   "openProject": "Open project",
+  "importProject": {
+    "title": "Import project",
+    "prompt": "Import a project from a ZIP archive"
+  },
   "language": "Language"
 }

public/locales/fr/hub.json

@@ -20,5 +20,9 @@
     "prompt": "Éditez les informations du projet."
   },
   "openProject": "Ouvrir le projet",
+  "importProject": {
+    "title": "Importez un projet",
+    "prompt": "Importez un projet en archive ZIP"
+  },
   "language": "Langue"
 }

server/ProjectHub.ts

@@ -61,7 +61,7 @@ export default class ProjectHub {
     }, callback);
   }
 
-  loadProject(folderName: string, callback: (err: Error) => any) {
+  loadProject(folderName: string, callback: (err: Error, manifest?: SupCore.Data.ProjectManifest) => any) {
     const server = new ProjectServer(this.globalIO, `${this.projectsPath}/${folderName}`, this.buildsPath, (err) => {
       if (err != null) { callback(err); return; }
 
@@ -72,7 +72,7 @@ export default class ProjectHub {
       }
 
       this.serversById[server.data.manifest.pub.id] = server;
-      callback(null);
+      callback(null, server.data.manifest);
     });
   }
 

server/RemoteHubClient.ts

@@ -1,11 +1,18 @@
 import * as async from "async";
 import * as fs from "fs";
 import * as path from "path";
+import * as mkdirp from "mkdirp";
 
 import { server as serverConfig } from "./config";
 import ProjectHub from "./ProjectHub";
 import BaseRemoteClient from "./BaseRemoteClient";
 
+/* tslint:disable */
+const yauzl = require("yauzl");
+const temp = require("temp").track();
+const copydir = require("copy-dir");
+/* tslint:enable */
+
 interface ProjectDetails {
   name: string;
   description: string;
@@ -14,6 +21,10 @@ interface ProjectDetails {
   icon: Buffer;
 }
 interface AddProjectCallback { (err: string, projectId?: string): any; };
+interface ImportProjectData {
+  name: string;
+  data: string;
+};
 
 export default class RemoteHubClient extends BaseRemoteClient {
   constructor(public server: ProjectHub, socket: SocketIO.Socket) {
@@ -24,6 +35,7 @@ export default class RemoteHubClient extends BaseRemoteClient {
     // Projects
     this.socket.on("add:projects", this.onAddProject);
     this.socket.on("edit:projects", this.onEditProject);
+    this.socket.on("import:projects", this.onImportProject);
   }
 
   // TODO: Implement roles and capabilities
@@ -190,4 +202,60 @@ export default class RemoteHubClient extends BaseRemoteClient {
       else callback(null);
     });
   };
+
+  private onImportProject = (data: ImportProjectData) => {
+    // Import a project with a zip archive
+    // 1] Extract the content of the zip file in a temporary folder
+    // 2] Move the extracted content into the projects' folder
+
+    // Extract the content of the zip file in a temporary folder
+    temp.mkdir("project", (err: Error, dirPath: any) => {
+      const inputPath = path.join(dirPath, "project.zip");
+      let rootFolderName: string = null;
+      fs.writeFile(inputPath, data.data, (err) => {
+        if (err) throw err;
+
+        yauzl.open(inputPath, { lazyEntries: true }, (err: Error, zipFile: any) => {
+          if (err != null) throw err;
+
+          zipFile.readEntry();
+          zipFile.on("entry", (entry: any) => {
+            if (rootFolderName === null) {
+              rootFolderName = entry.fileName;
+            }
+
+            if (/\/$/.test(entry.fileName)) {
+              mkdirp(path.join(dirPath, entry.fileName), (err: Error) => {
+                if (err != null) throw err;
+                zipFile.readEntry();
+              });
+            }
+            else {
+              zipFile.openReadStream(entry, (err: Error, readStream: NodeJS.ReadableStream) => {
+                if (err != null) throw err;
+
+                mkdirp(path.dirname(path.join(dirPath, entry.fileName)), (err: Error) => {
+                  if (err != null) throw err;
+
+                  readStream.pipe(fs.createWriteStream(path.join(dirPath, entry.fileName)));
+                  readStream.on("end", () => {
+                    zipFile.readEntry();
+                  });
+                });
+              });
+            }
+          });
+          zipFile.on("end", () => {
+            // move the extracted content into the projects' folder
+            copydir(path.join(dirPath, rootFolderName), path.join(this.server.projectsPath, rootFolderName), (err: Error) => {
+              if (err != null) throw err;
+              this.server.loadProject(rootFolderName, (err: Error, manifest: SupCore.Data.ProjectManifest) => {
+                if (err != null) throw err;
+              });
+            });
+          });
+        });
+      });
+    });
+  }
 }