Add icons, electron ipcMain, electron notification, toggle card with …

…title, fix href and config colspan

.github/workflows/create-release.yaml

@@ -46,16 +46,16 @@ jobs:
       matrix:
         include:
           - os: ubuntu-latest
-            artifact_name: "thumder-v${{ needs.Make_GitHub_Release.outputs.version }}.AppImage"
-            asset_name: "thumder-v${{ needs.Make_GitHub_Release.outputs.version }}.AppImage"
+            artifact_name: "THUMDER-v${{ needs.Make_GitHub_Release.outputs.version }}.AppImage"
+            asset_name: "THUMDER-v${{ needs.Make_GitHub_Release.outputs.version }}.AppImage"
             asset_content_type: application/zip
           - os: windows-latest
-            artifact_name: "thumder-v${{ needs.Make_GitHub_Release.outputs.version }}.exe"
-            asset_name: "thumder-v${{ needs.Make_GitHub_Release.outputs.version }}.exe"
+            artifact_name: "THUMDER-v${{ needs.Make_GitHub_Release.outputs.version }}.exe"
+            asset_name: "THUMDER-v${{ needs.Make_GitHub_Release.outputs.version }}.exe"
             asset_content_type: application/exe
           - os: macos-latest
-            artifact_name: "thumder-v${{ needs.Make_GitHub_Release.outputs.version }}.dmg"
-            asset_name: "thumder-v${{ needs.Make_GitHub_Release.outputs.version }}.dmg"
+            artifact_name: "THUMDER-v${{ needs.Make_GitHub_Release.outputs.version }}.dmg"
+            asset_name: "THUMDER-v${{ needs.Make_GitHub_Release.outputs.version }}.dmg"
             asset_content_type: application/x-apple-diskimage
 
     steps:
@@ -76,7 +76,7 @@ jobs:
           fileName: 'environment.production.ts'
           fileDir: './src/environments/'
           encodedString: ${{ secrets.ANGULAR_ENVIROTMENT_PRODUCTION }}
-        
+
       - name: Context
         env:
           RUNNER_CONTEXT: ${{ toJson( needs.Make_GitHub_Release ) }}

electron-builder.json

@@ -1,5 +1,5 @@
 {
-  "productName": "thumder",
+  "productName": "THUMDER",
   "artifactName": "${productName}-v${version}.${ext}",
   "directories": {
     "output": "release/"

main.ts

@@ -1,49 +1,49 @@
-import { app, BrowserWindow, screen } from "electron";
+import { app, BrowserWindow, screen, Notification, ipcMain, NotificationConstructorOptions } from "electron";
 import * as path from "path";
 import * as url from "url";
 
 let win: BrowserWindow = null;
 const args = process.argv.slice(1);
-const isServe = args.some(val => val === '--serve');
+const isServe = args.some(val => val === "--serve");
 
 function createWindow(): BrowserWindow {
 
   const size = screen.getPrimaryDisplay().workAreaSize;
 
   // Create the browser window.
   win = new BrowserWindow({
-    x: 0,
-    y: 0,
-    width: size.width,
-    height: size.height,
+    x:              0,
+    y:              0,
+    width:          size.width,
+    height:         size.height,
     webPreferences: {
-      nodeIntegration: true,
-      nativeWindowOpen: true,
+      nodeIntegration:             true,
+      nativeWindowOpen:            true,
       allowRunningInsecureContent: (isServe),
-      contextIsolation: false,  // false if you want to run 2e2 test with Spectron
-      enableRemoteModule: true // true if you want to run 2e2 test  with Spectron or use remote module in renderer context (ie. Angular)
+      contextIsolation:            false,  // false if you want to run 2e2 test with Spectron
+      enableRemoteModule:          true // true if you want to run 2e2 test  with Spectron or use remote module in renderer context (ie. Angular)
     },
   });
 
   if (isServe) {
 
     win.webContents.openDevTools();
 
-    require('electron-reload')(__dirname, {
-      electron: require(`${__dirname}/node_modules/electron`)
+    require("electron-reload")(__dirname, {
+      electron: require(`${ __dirname }/node_modules/electron`)
     });
-    win.loadURL('http://localhost:4200');
+    win.loadURL("http://localhost:4200");
 
   } else {
     win.loadURL(url.format({
-      pathname: path.join(__dirname, 'dist/index.html'),
-      protocol: 'file:',
-      slashes: true
+      pathname: path.join(__dirname, "dist/index.html"),
+      protocol: "file:",
+      slashes:  true
     }));
   }
 
   // Emitted when the window is closed.
-  win.on('closed', () => {
+  win.on("closed", () => {
     // Dereference the window object, usually you would store window
     // in an array if your app supports multi windows, this is the time
     // when you should delete the corresponding element.
@@ -58,25 +58,48 @@ try {
   // initialization and is ready to create browser windows.
   // Some APIs can only be used after this event occurs.
   // Added 400 ms to fix the black background issue while using transparent window. More detais at https://github.com/electron/electron/issues/15947
-  app.on('ready', () => setTimeout(createWindow, 400));
+  app.on("ready", () => setTimeout(createWindow, 400));
 
   // Quit when all windows are closed.
-  app.on('window-all-closed', () => {
+  app.on("window-all-closed", () => {
     // On OS X it is common for applications and their menu bar
     // to stay active until the user quits explicitly with Cmd + Q
-    if (process.platform !== 'darwin') {
+    if (process.platform !== "darwin") {
       app.quit();
     }
   });
 
-  app.on('activate', () => {
+  app.on("activate", () => {
     // On OS X 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 (win === null) {
       createWindow();
     }
   });
 
+  ipcMain.on("thumder-notification", (event, args) => {
+    const options: NotificationConstructorOptions = {
+      title:    "Custom Notification",
+      subtitle: "Subtitle of the Notification",
+      body:     "Body of Custom Notification",
+      silent:   false,
+      // icon:             path.join(__dirname, "./src/assets/image.png"),
+      // sound:            path.join(__dirname, "./src/assets/sound.mp3"),
+      hasReply:         true,
+      timeoutType:      "never",
+      replyPlaceholder: "Reply Here",
+      urgency:          "critical",
+      closeButtonText:  "Close Button",
+      actions:          [ {
+        type: "button",
+        text: "Show Button"
+      } ]
+    };
+    const customNotification = new Notification(options);
+    customNotification.show();
+    // customNotification.close();
+  });
+
 } catch (e) {
   // Catch Error
   // throw e;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "thumder",
-  "version": "1.3.3",
+  "version": "1.3.4",
   "description": "TFG - THUMDER (THe UltiMate Dlx EmulatoR): emulador multiplataforma DLX con fines didácticos",
   "homepage": "https://github.com/nonodev96/THUMDER",
   "author": {

src/app/__core/services/electron/electron.service.ts

@@ -28,6 +28,11 @@ export class ElectronService {
     }
   }
 
+
+  public async openInExternal(url: string): Promise<void> {
+    await this.shell.openExternal(url);
+  }
+
   private get electron(): any {
     if (!this._electron) {
       if (window && window.require) {

src/app/app.module.ts

@@ -107,20 +107,20 @@ const domain = "localhost";
 const cookieConfig: NgcCookieConsentConfig = {
   enabled: isServer,
   // autoOpen: isElectronApp,
-  cookie: {
+  cookie:   {
     domain: domain
   },
-  palette: {
-    popup: {
+  palette:  {
+    popup:  {
       background: "#000"
     },
     button: {
       background: "#f1d600"
     }
   },
-  theme: "edgeless",
-  type: "opt-out",
-  content: {
+  theme:    "edgeless",
+  type:     "opt-out",
+  content:  {
     href: "#"
   },
   elements: {
@@ -143,20 +143,36 @@ export function markedOptionsFactory(): MarkedOptions {
   markedRenderer.heading = (text: string, level: number) => {
     const escapedText = text.toLowerCase().replace(/[^\w]+/g, "-");
     return `
-<h${level}>
-    <a class="anchor" href="#${escapedText}" id="${escapedText}">
+<h${ level }>
+    <a class="anchor" href="#${ escapedText }" id="${ escapedText }">
         <span class="header-link"></span>
-    </a> ${text}
-</h${level}>`;
+    </a> ${ text }
+</h${ level }>`;
+  };
+
+  markedRenderer.link = (href: string, title: string, text: string) => {
+    if (!href) {
+      return markedRenderer.link.call(this, href, title, text);
+    }
+    const isElectron = window && window.process && window.process.type;
+    if (isElectron) {
+      if (href.startsWith("http://") || href.startsWith("https://")) {
+        return `<a href="javascript:;" onclick="window.require('electron').shell.openExternal('${ href }');" title="${ title }">${ text }</a>`;
+      } else if (href.indexOf("#") !== -1) {
+        return `<a href="javascript:;" title="${ title }">${ text }</a>`;
+      }
+    } else {
+      return `<a href="${ href }" title="${ title }">${ text }</a>`;
+    }
   };
 
   return {
-    renderer: markedRenderer,
-    headerIds: true,
-    gfm: true,
-    breaks: false,
-    pedantic: false,
-    smartLists: true,
+    renderer:    markedRenderer,
+    headerIds:   true,
+    gfm:         true,
+    breaks:      false,
+    pedantic:    false,
+    smartLists:  true,
     smartypants: false
   };
 }
@@ -193,7 +209,7 @@ export function markedOptionsFactory(): MarkedOptions {
     RegistersView,
     StatisticsView
   ],
-  imports: [
+  imports:      [
 
     CoreModule,
     SharedModule,
@@ -222,7 +238,7 @@ export function markedOptionsFactory(): MarkedOptions {
       loader: {
         provide:    TranslateLoader,
         useFactory: HttpLoaderFactory,
-        deps:       [HttpClient]
+        deps:       [ HttpClient ]
       }
     }),
     // MonacoEditorModule,
@@ -246,7 +262,7 @@ export function markedOptionsFactory(): MarkedOptions {
     TableVirtualScrollModule,
     DragDropModule
   ],
-  providers: [
+  providers:    [
     // {
     //   provide: MONACO_PATH,
     //   useValue: 'https://unpkg.com/browse/[email protected]/min/vs/'
@@ -266,8 +282,8 @@ export function markedOptionsFactory(): MarkedOptions {
         }
      */
   ],
-  exports: [],
-  bootstrap: [
+  exports:      [],
+  bootstrap:    [
     AppComponent
   ]
 })

src/app/components/aside/aside-left/aside-left.component.html

@@ -18,7 +18,12 @@
              alt="User Image">
       </div>
       <div class="info">
-        <a href="https://github.com/nonodev96" class="d-block">by nonodev96</a>
+        <ng-container *ngIf="electronService.isElectronApp">
+          <a href="#" (click)="electronService.openInExternal('https://github.com/nonodev96')" class="d-block">by nonodev96</a>
+        </ng-container>
+        <ng-container *ngIf="!electronService.isElectronApp">
+          <a href="https://github.com/nonodev96" class="d-block">by nonodev96</a>
+        </ng-container>
       </div>
     </div>
 

src/app/components/aside/aside-left/aside-left.component.ts

@@ -3,6 +3,7 @@ import { Router } from "@angular/router";
 import { PublicRoutes } from "../../../Types";
 import { AuthService } from "../../../__core/auth/auth.service";
 import { AppConfig } from "../../../../environments/_environment";
+import { ElectronService } from "../../../__core/services";
 
 @Component({
   selector:    "app-aside-left",
@@ -14,6 +15,7 @@ export class AsideLeftComponent implements OnInit {
   public readonly isProduction = !AppConfig.production;
 
   constructor(public authService: AuthService,
+              public electronService: ElectronService,
               private router: Router) {
   }
 

src/app/components/footers/footer/footer.component.html

@@ -1,10 +1,15 @@
 <footer class="main-footer">
-  <strong>Copyright &copy; 2020-2021 <a href="https://github.com/nonodev96/THUMDER">THUMDER</a>.</strong>
+  <ng-container *ngIf="electronService.isElectronApp">
+    <strong>Copyright &copy; 2020-2021 <a href="#" (click)="electronService.openInExternal('https://github.com/nonodev96/THUMDER')">THUMDER</a>.</strong>
+  </ng-container>
+  <ng-container *ngIf="!electronService.isElectronApp">
+    <strong>Copyright &copy; 2020-2021 <a href="https://github.com/nonodev96/THUMDER">THUMDER</a>.</strong>
+  </ng-container>
   All rights reserved. |
-  <button type="button" class="btn btn-xs btn-outline-primary" data-toggle="modal" (click)="globals.showDebug=!globals.showDebug">
-    Debug
-    <!--    data-target="#modal-p-bottom" -->
-  </button>
+  <button type="button" class="btn btn-xs btn-outline-primary" data-toggle="modal" (click)="globals.showDebug=!globals.showDebug">Debug</button>
+  <ng-container *ngIf="electronService.isElectronApp">
+    <button type="button" class="btn btn-xs btn-outline-primary" (click)="notification()">Debug notification</button>
+  </ng-container>
   <div class="float-right d-none d-sm-block">
     <b>{{ 'CONFIG.ENVIRONMENT' | translate }}</b> {{environment}} |
     <b>{{ 'CONFIG.LANG' | translate }}</b> {{lang}} |

src/app/components/footers/footer/footer.component.ts

@@ -3,18 +3,20 @@ import { AppConfig } from "../../../../environments/_environment";
 import { NPM_VERSION } from "../../../CONSTANTS";
 import { Globals } from "../../../__core/services/globals/globals.service";
 import { StorageService } from "../../../__core/storage/storage.service";
+import { ElectronService } from "../../../__core/services";
 
 @Component({
   selector:    "app-footer",
   templateUrl: "./footer.component.html"
 })
 export class FooterComponent implements OnInit {
-  date: number = new Date().getFullYear();
-  version: string = NPM_VERSION;
-  environment: string = AppConfig.environment;
-  lang: string = "";
+  public date: number = new Date().getFullYear();
+  public version: string = NPM_VERSION;
+  public environment: string = AppConfig.environment;
+  public lang: string = "";
 
   constructor(private storageService: StorageService,
+              public electronService: ElectronService,
               public globals: Globals) {
   }
 
@@ -26,4 +28,8 @@ export class FooterComponent implements OnInit {
       }
     });
   }
+
+  public async notification() {
+    this.electronService.ipcRenderer.send("thumder-notification");
+  }
 }

src/app/views/_auth/calculator/calculator.view.html

@@ -1,6 +1,6 @@
 <div class="card" >
   <div class="card-header" >
-    <h3 class="card-title">{{'NAVIGATION.CALCULATOR' | translate}}</h3>
+    <h3 class="card-title"><span data-card-widget="collapse">{{'NAVIGATION.CALCULATOR' | translate}}</span></h3>
 
     <div class="card-tools">
       <!-- Drag button -->

src/app/views/_auth/code/code.view.html

@@ -1,6 +1,6 @@
 <div class="card" id="Code-card">
   <div class="card-header">
-    <h3 class="card-title">{{'MACHINE.CODE' | translate}}</h3>
+    <h3 class="card-title"><span data-card-widget="collapse">{{'MACHINE.CODE' | translate}}</span></h3>
     <div class="card-tools">
       <button type="button" class="btn btn-tool" (click)="refresh()">
         <i class="fas fa-sync-alt"></i>