Merge pull request #283 from frg-fossee/develop

Merge develop into master

ArduinoFrontend/src/app/Libs/Workspace.ts

@@ -477,8 +477,8 @@ export class Workspace {
     if (window.isCodeEditorOpened) {
       return;
     }
-    // console.log([event.ctrlKey, event.key]);
-    if (event.key === 'Delete' || event.key === 'Backspace') {
+    if ((event.key === 'Delete' || event.key === 'Backspace')
+      && !(event['target']['localName'] === 'input' || event['target']['localName'] === 'textarea')) {
       // Backspace or Delete
       Workspace.DeleteComponent();
     }
@@ -1050,4 +1050,76 @@ export class Workspace {
     // Hide Loading animation
     window.hideLoading();
   }
+
+
+  /**
+   * Function generates a JSON object containing all details of the workspace and downloads it
+   * @param name string
+   * @param description string
+   */
+  static SaveJson(name: string = '', description: string = '') {
+
+    const id = Date.now();
+
+    // Default Save object
+    const saveObj = {
+      id,
+      canvas: {
+        x: Workspace.translateX,
+        y: Workspace.translateY,
+        scale: Workspace.scale
+      },
+      project: {
+        name,
+        description,
+        created_at: Date.now(),
+      }
+    };
+
+    // For each item in the scope
+    for (const key in window.scope) {
+      // if atleast one component is present
+      if (window.scope[key] && window.scope[key].length > 0) {
+        saveObj[key] = [];
+        // Add the component to the save object
+        for (const item of window.scope[key]) {
+          if (item.save) {
+            saveObj[key].push(item.save());
+          }
+        }
+      }
+    }
+
+    // Export JSON File & Download it
+    const filename = `${name}.json`;
+    const jsonStr = JSON.stringify(saveObj);
+
+    const element = document.createElement('a');
+    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(jsonStr));
+    element.setAttribute('download', filename);
+
+    element.style.display = 'none';
+    document.body.appendChild(element);
+
+    element.click();
+
+    document.body.removeChild(element);
+
+    return true;
+
+  }
+
+  /**
+   * Function to return if workspace is empty or not
+   * @returns 'False' if workspace is not empty & 'True' if workspace is empty
+   */
+  static checkIfWorkspaceEmpty() {
+    for (const key in window.scope) {
+      if (window.scope[key].length > 0) {
+        return false;
+      }
+    }
+    return true;
+  }
+
 }

ArduinoFrontend/src/app/app.module.ts

@@ -35,6 +35,8 @@ import { HeaderComponent } from './header/header.component';
 import { ViewProjectComponent } from './view-project/view-project.component';
 import { AlertModalComponent } from './alert/alert-modal/alert-modal.component';
 import { ConfirmModalComponent } from './alert/confirm-modal/confirm-modal.component';
+import { ExportJSONDialogComponent } from './export-jsondialog/export-jsondialog.component';
+import { ExitConfirmDialogComponent } from './exit-confirm-dialog/exit-confirm-dialog.component';
 
 /**
  * Monaco OnLoad Function
@@ -67,6 +69,8 @@ const monacoConfig: NgxMonacoEditorConfig = {
     HeaderComponent,
     AlertModalComponent,
     ConfirmModalComponent,
+    ExportJSONDialogComponent,
+    ExitConfirmDialogComponent,
   ],
   imports: [
     BrowserModule,
@@ -89,7 +93,15 @@ const monacoConfig: NgxMonacoEditorConfig = {
   // providers: [{provide: LocationStrategy, useClass: PathLocationStrategy}],
   providers: [{ provide: LocationStrategy, useClass: HashLocationStrategy }],
   bootstrap: [AppComponent],
-  entryComponents: [ViewComponentInfoComponent, ExportfileComponent, ComponentlistComponent, AlertModalComponent, ConfirmModalComponent],
+  entryComponents: [
+    ViewComponentInfoComponent,
+    ExportfileComponent,
+    ComponentlistComponent,
+    AlertModalComponent,
+    ConfirmModalComponent,
+    ExportJSONDialogComponent,
+    ExitConfirmDialogComponent,
+  ],
   schemas: [
     CUSTOM_ELEMENTS_SCHEMA
   ],

ArduinoFrontend/src/app/exit-confirm-dialog/exit-confirm-dialog.component.css

@@ -0,0 +1,4 @@
+.action-div{
+    display: flex;
+    justify-content: space-around;
+}

ArduinoFrontend/src/app/exit-confirm-dialog/exit-confirm-dialog.component.html

@@ -0,0 +1,5 @@
+<h2 mat-dialog-title>Do you want to exit?</h2>
+<div mat-dialog-actions class="action-div">
+  <button mat-raised-button color="warn" (click)="yesClick()">Yes</button>
+  <button mat-raised-button color="primary" mat-dialog-close>No</button>
+</div>

ArduinoFrontend/src/app/exit-confirm-dialog/exit-confirm-dialog.component.spec.ts

@@ -0,0 +1,30 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { MatDialogModule, MatDialogRef } from '@angular/material';
+
+import { ExitConfirmDialogComponent } from './exit-confirm-dialog.component';
+
+describe('ExitConfirmDialogComponent', () => {
+  let component: ExitConfirmDialogComponent;
+  let fixture: ComponentFixture<ExitConfirmDialogComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [MatDialogModule],
+      declarations: [ExitConfirmDialogComponent],
+      providers: [
+        { provide: MatDialogRef, useValue: {} },
+      ]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ExitConfirmDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

ArduinoFrontend/src/app/exit-confirm-dialog/exit-confirm-dialog.component.ts

@@ -0,0 +1,21 @@
+import { Component, OnInit } from '@angular/core';
+import { MatDialogRef } from '@angular/material';
+
+@Component({
+  selector: 'app-exit-confirm-dialog',
+  templateUrl: './exit-confirm-dialog.component.html',
+  styleUrls: ['./exit-confirm-dialog.component.css']
+})
+export class ExitConfirmDialogComponent implements OnInit {
+
+  constructor(public dialogRef: MatDialogRef<ExitConfirmDialogComponent>) { }
+
+  ngOnInit() {
+  }
+
+  // Function to handle if user want to exit
+  yesClick() {
+    this.dialogRef.close(true);
+  }
+
+}

ArduinoFrontend/src/app/export-jsondialog/export-jsondialog.component.css

@@ -0,0 +1,3 @@
+.full-width{
+    width: 100%;
+}

ArduinoFrontend/src/app/export-jsondialog/export-jsondialog.component.html

@@ -0,0 +1,17 @@
+<div mat-dialog-title>
+  Enter the name of File to be Saved
+</div>
+<mat-dialog-content>
+  <br>
+  <mat-form-field class="full-width">
+    <mat-label>File Name</mat-label>
+    <input matInput [(ngModel)]="fileName">
+  </mat-form-field>
+
+</mat-dialog-content>
+<mat-dialog-actions>
+
+  <button mat-raised-button (click)="saveProject()" color="primary">Download Project</button>
+  <button mat-raised-button mat-dialog-close color="warn">Close</button>
+
+</mat-dialog-actions>

ArduinoFrontend/src/app/export-jsondialog/export-jsondialog.component.spec.ts

@@ -0,0 +1,70 @@
+import { TestBed, async, ComponentFixture } from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
+import { MatDialogModule, MatDialogRef, MatFormFieldModule, MAT_DIALOG_DATA } from '@angular/material';
+import { RouterTestingModule } from '@angular/router/testing';
+import { Workspace } from '../Libs/Workspace';
+import { ExportJSONDialogComponent } from './export-jsondialog.component';
+
+describe('ExportJSONDialogComponent', () => {
+
+    let component: ExportJSONDialogComponent;
+    let fixture: ComponentFixture<ExportJSONDialogComponent>;
+
+    beforeEach(async () => {
+        TestBed.configureTestingModule({
+            imports: [
+                RouterTestingModule,
+                MatFormFieldModule,
+                FormsModule,
+                MatDialogModule,
+            ],
+            declarations: [
+                ExportJSONDialogComponent
+            ],
+            providers: [
+                { provide: MatDialogRef, useValue: {} },
+                { provide: MAT_DIALOG_DATA, useValue: { description: 'this is a desc', title: 'title' } },
+            ]
+        }).compileComponents();
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(ExportJSONDialogComponent);
+        component = fixture.componentInstance;
+    });
+
+    it('should create the app', () => {
+        expect(component).toBeTruthy();
+    });
+
+    it('Value of fileName variable should be given string', () => {
+        expect(component.fileName).toBe('title');
+    });
+
+    it('Value of Description variable should be given string', () => {
+        expect(component.description).toBe('this is a desc');
+    });
+
+    it('should return truthy as workspace is empty', () => {
+        expect(Workspace.checkIfWorkspaceEmpty()).toBeTruthy();
+    });
+
+    it('should return falsey as workspace is not empty', () => {
+        component.ngOnInit();
+        window['scope'] = {
+            id: 1620892078891,
+            canvas: { x: 0, y: 0, scale: 1 },
+            project: {
+                name: 'Untitled',
+                description: '',
+                created_at: 1620892078891
+            },
+            Resistor: [{ x: 483, y: 209, tx: 68, ty: 100, id: 1620892071196, data: { value: 1000, tolerance: 10 } }]
+        };
+        expect(Workspace.checkIfWorkspaceEmpty()).toBeFalsy();
+    });
+
+    it('should return truthy after downloading json file', () => {
+        expect(Workspace.SaveJson()).toBeTruthy();
+    });
+});

ArduinoFrontend/src/app/export-jsondialog/export-jsondialog.component.ts

@@ -0,0 +1,33 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+import { Workspace } from '../Libs/Workspace';
+
+@Component({
+  selector: 'app-export-jsondialog',
+  templateUrl: './export-jsondialog.component.html',
+  styleUrls: ['./export-jsondialog.component.css']
+})
+export class ExportJSONDialogComponent implements OnInit {
+
+  description: string;
+  fileName = '';
+
+  constructor(
+    public dialogRef: MatDialogRef<ExportJSONDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data) {
+    this.description = data.description;
+    this.fileName = data.title;
+  }
+
+  ngOnInit() {
+  }
+
+  /**
+   * Save Project function, Calls Workspace.SaveJson with edited fileName and then closes project
+   */
+  saveProject() {
+    Workspace.SaveJson(this.fileName, this.description);
+    this.dialogRef.close();
+  }
+
+}

ArduinoFrontend/src/app/header/header.component.html

@@ -12,7 +12,10 @@
   <!--<div style="flex-basis: 200px; line-height: 60px; text-align: right; padding-right: 10px;font-size: 18px;">Gallery
   </div>-->
   <div style="display: flex; padding: 10px;" *ngIf="!username">
+    <a mat-stroked-button [href]="window.location.protocol + '//' + window.location.hostname" style="margin-right: 10px;">Home</a>
+    <a mat-stroked-button [routerLink]="['/dashboard']" style="margin-right: 10px;">Dashboard</a>
     <a mat-stroked-button [routerLink]="['/gallery']" style="margin-right: 10px;">Gallery</a>
+    <a mat-stroked-button [routerLink]="['/simulator']" style="margin-right: 10px">Editor</a>
     <a mat-stroked-button (click)="Login()">Login</a>
   </div>
   <div class="dropdown my-dropdown" *ngIf="username">

ArduinoFrontend/src/app/header/header.component.ts

@@ -19,6 +19,10 @@ export class HeaderComponent implements OnInit {
    * Username
    */
   username: string;
+  /**
+   * window
+   */
+  window: any;
   /**
    * Header Title
    */
@@ -55,7 +59,8 @@ export class HeaderComponent implements OnInit {
         // }
       });
     }
-
+    // Initializing window
+    this.window = window;
   }
   /**
    * Redirect to login

ArduinoFrontend/src/app/simulator/simulator.component.html

@@ -1,6 +1,6 @@
 <!-- As a heading -->
 <nav class="navbar navbar-expand-lg navbar-light text-white" style="background-color: whitesmoke;height: 50px;">
-  <a [routerLink]="['/']">
+  <a (click)="exitProject()">
     <img src="./assets/icon.png" style="height: 40px;display: none;margin-top:10px;margin-right: 1em;"
       class="d-md-block" alt="AOC">
   </a>
@@ -46,7 +46,10 @@
     </ul>
 
     <div class="navbar-nav ml-auto" *ngIf="!token">
+      <a mat-raised-button [href]="window.location.protocol + '//' + window.location.hostname" style="margin-right: 10px;">Home</a>
       <a mat-raised-button [routerLink]="['/dashboard']" style="margin-right: 10px;">Dashboard</a>
+      <a mat-raised-button [routerLink]="['/gallery']" style="margin-right: 10px;">Gallery</a>
+      <a mat-raised-button [routerLink]="['/simulator']" style="margin-right: 10px;">Editor</a>
       <a mat-raised-button (click)="Login()">Login</a>
     </div>
 
@@ -135,7 +138,21 @@
   </div>
   <!--/simulation loading svg-->
 
+  <!-- Import export -->
   <span class="pipe">|</span>
+  <button mat-icon-button matTooltip="Download JSON file" (click)="exportJson()" id="importBtn"
+    style="align-items: center;background: transparent; margin: auto;" class="mt-1">
+    <i style="font-size: 20px;color: black;" class="fa fa-download" id="download_icon"></i>
+  </button>
+
+  <button mat-icon-button matTooltip="Import JSON file"
+    style="align-items: center;background: transparent; margin: auto;" class="mt-1">
+    <label style="font-size: 20px;color: black; cursor: pointer; width: 100%;" class="fa fa-upload">
+    <input type="file" style="display: none;" #jsonFile id="jsonFile" (change)="importJson(jsonFile.files[0])">
+    </label>
+  </button>
+  <span class="pipe">|</span>
+  <!-- Import export -->
 
   <a href="../#/simulator" target="_blank">
     <button mat-icon-button matTooltip="New Project" style="align-items: center;background: transparent;" class="mt-1">