Wrap web app into electron.

src-backend/main.ts

@@ -0,0 +1,139 @@
+import { BrowserWindow, Menu, Tray, app, ipcMain } from 'electron';
+import * as path from 'path';
+import * as url from 'url';
+import * as fs from 'fs';
+
+let mainWindow: BrowserWindow;
+
+async function createWindow(): Promise<void> {
+  // Create the browser window.
+  mainWindow = new BrowserWindow({
+    fullscreen: false,
+    width: 1000,
+    height: 800,
+    icon: path.join(__dirname, '/cic-staff-client/assets/icons/manifest-icon-512.png'),
+    // Allows IPC and other APIs
+    webPreferences: {
+      nodeIntegration: true,
+      enableRemoteModule: true,
+      nodeIntegrationInWorker: true,
+    }
+  });
+  // load the dist folder from Angular
+  await mainWindow.loadURL(
+    url.format({
+      pathname: path.join(__dirname, '/cic-staff-client/index.html'),
+      protocol: 'file',
+      slashes: true
+    })
+  );
+
+  // Open the DevTools.
+  // mainWindow.webContents.openDevTools();
+
+  mainWindow.on('closed', () => {
+    mainWindow = null;
+  });
+}
+
+async function openModal(): Promise<void> {
+  const modal = new BrowserWindow({
+    parent: mainWindow,
+    modal: true,
+    show: false,
+  });
+  await modal.loadURL('https://dashboard.sarafu.network/');
+  modal.once('ready-to-show', () => {
+    modal.show();
+  });
+}
+
+function isRoot(): boolean {
+  return path.parse(process.cwd()).root === process.cwd();
+}
+
+function getImages(): void {
+  // const cwd = process.cwd();
+  // fs.readdir('.', { withFileTypes: true }, ((err, files) => {
+  //   if (!err) {
+  //     const re = /(?:\.([^.]+))?$/;
+  //     const images = files.filter(file => file.isFile() && ['jpg', 'png'].includes(re.exec(file.name)[1])).map(file => `file://${cwd}/${file.name}`);
+  //     mainWindow.webContents.send('getImagesResponse', images);
+  //   }
+  // }));
+}
+
+function getDirectory(): void {
+  // fs.readdir('.', { withFileTypes: true }, (err, files) => {
+  //   if (!err) {
+  //     const directories = files.filter(file =>  file.isDirectory()).map(file => file.name);
+  //     if (!isRoot()) {
+  //       directories.unshift('..');
+  //     }
+  //     mainWindow.webContents.send('getDirectoryResponse', directories);
+  //   }
+  // });
+}
+
+// This method will be called when Electron has finished
+// initialization and is ready to create browser windows.
+// Some APIs can only be used after this event occurs.
+app.on('ready', async () => {
+  let tray = null;
+  tray = new Tray(path.join(__dirname, '/cic-staff-client/assets/icons/manifest-icon-512.png'));
+  const contextMenu = Menu.buildFromTemplate([
+    { label: 'Item1', type: 'radio' },
+    { label: 'Item2', type: 'radio' },
+    { label: 'Item3', type: 'radio', checked: true },
+    { label: 'Exit', type: 'normal', click: () => { app.quit(); } },
+  ]);
+  tray.setToolTip('CIC Administration Dashboard.');
+  // Overrides 'right-click' event.
+  tray.setContextMenu(contextMenu);
+  tray.on('click', (event, arg) => {
+    console.log('Systray was left-clicked.', event, arg);
+  });
+  tray.on('double-click', (event, arg) => {
+    console.log('Systray was double-clicked.', event, arg);
+  });
+  await createWindow();
+});
+
+app.on('activate', async () => {
+  // On macOS it's common to re-create a window in the app when the
+  // dock icon is clicked and there are no other windows open.
+  if (BrowserWindow.getAllWindows().length === 0) {
+    await createWindow();
+  }
+});
+
+// Quit when all windows are closed, except on macOS. There, it's common
+// for applications and their menu bar to stay active until the user quits
+// explicitly with Cmd + Q.
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    app.quit();
+  }
+});
+
+ipcMain.on('my-custom-signal', (event, arg) => {
+  console.log('Print to the main process terminal (STDOUT) when signal received from renderer process.');
+  console.log(event);
+  console.log(arg);
+  mainWindow.webContents.send('other-custom-signal', 'message from the backend process');
+});
+
+ipcMain.on('navigateDirectory', (event, arg) => {
+  process.chdir(arg);
+  getImages();
+  getDirectory();
+});
+
+ipcMain.on('getFiles', (event, arg) => {
+  const files = fs.readdirSync(__dirname);
+  mainWindow.webContents.send('getFilesResponse', files);
+});
+
+ipcMain.on('openModal', async (event, arg) => {
+  await openModal();
+});

src-backend/tsconfig.json

@@ -0,0 +1,9 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../dist",
+    "module": "commonjs",
+    "skipLibCheck": true
+  }
+}