Updating angular to 12, removing indexed db

angular.json

@@ -28,7 +28,6 @@
 							"classnames",
 							"stylenames"
 						],
-						"aot": true,
 						"outputPath": "dist",
 						"index": "src/index.html",
 						"main": "src/main.ts",
@@ -45,7 +44,13 @@
 							"src/styles.scss",
 							"src/theme.scss"
 						],
-						"scripts": []
+						"scripts": [],
+						"vendorChunk": true,
+						"extractLicenses": false,
+						"buildOptimizer": false,
+						"sourceMap": true,
+						"optimization": false,
+						"namedChunks": true
 					},
 					"configurations": {
 						"production": {
@@ -63,7 +68,6 @@
 								"styles": false
 							},
 							"namedChunks": false,
-							"aot": true,
 							"extractLicenses": true,
 							"vendorChunk": false,
 							"buildOptimizer": true,
@@ -85,7 +89,6 @@
 							"outputHashing": "all",
 							"sourceMap": false,
 							"namedChunks": false,
-							"aot": true,
 							"extractLicenses": true,
 							"vendorChunk": false,
 							"buildOptimizer": true,
@@ -121,7 +124,6 @@
 							"outputHashing": "all",
 							"sourceMap": false,
 							"namedChunks": false,
-							"aot": true,
 							"extractLicenses": true,
 							"vendorChunk": false,
 							"buildOptimizer": true,

package.json

@@ -41,16 +41,16 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^11.2.13",
+    "@angular/animations": "^12.0.2",
     "@angular/cdk": "^11.2.12",
-    "@angular/common": "^11.2.13",
+    "@angular/common": "^12.0.2",
-    "@angular/compiler": "^11.2.13",
+    "@angular/compiler": "^12.0.2",
-    "@angular/core": "^11.2.13",
+    "@angular/core": "^12.0.2",
-    "@angular/forms": "^11.2.13",
+    "@angular/forms": "^12.0.2",
     "@angular/material": "^11.2.12",
-    "@angular/platform-browser": "^11.2.13",
+    "@angular/platform-browser": "^12.0.2",
-    "@angular/platform-browser-dynamic": "^11.2.13",
+    "@angular/platform-browser-dynamic": "^12.0.2",
-    "@angular/router": "^11.2.13",
+    "@angular/router": "^12.0.2",
     "@sentry/browser": "^6.3.6",
     "@types/jest": "^26.0.23",
     "@types/mocha": "^8.2.2",
@@ -58,7 +58,6 @@
     "@types/react-dom": "^17.0.3",
     "angular-draggable-droppable": "^4.6.0",
     "angular-resizable-element": "^3.3.5",
-    "angular2-indexeddb": "^1.2.3",
     "bootstrap": "^5.0.0",
     "command-exists": "^1.2.9",
     "core-js": "^3.12.1",
@@ -88,13 +87,13 @@
     "xterm-addon-attach": "^0.6.0",
     "xterm-addon-fit": "^0.5.0",
     "yargs": "^17.0.1",
-    "zone.js": "^0.11.4"
+    "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.1102.12",
+    "@angular-devkit/build-angular": "^12.0.2",
-    "@angular/cli": "^11.2.12",
+    "@angular/cli": "^12.0.2",
-    "@angular/compiler-cli": "^11.2.13",
+    "@angular/compiler-cli": "^12.0.2",
-    "@angular/language-service": "^11.2.13",
+    "@angular/language-service": "^12.0.2",
     "@sentry/cli": "^1.64.2",
     "@sentry/electron": "^2.4.1",
     "@types/jasmine": "^3.7.1",
@@ -123,7 +122,7 @@
     "ts-node": "~9.1.1",
     "tslint": "^6.1.3",
     "tslint-config-prettier": "^1.18.0",
-    "typescript": "4.0.2",
+    "typescript": "4.2.4",
     "webpack": "5.36.2",
     "yarn-upgrade-all": "^0.5.4"
   },

src/app/app.module.ts

@@ -225,7 +225,6 @@ import { ExternalSoftwareDefinitionService } from './services/external-software-
 import { Gns3vmService } from './services/gns3vm.service';
 import { GoogleAnalyticsService } from './services/google-analytics.service';
 import { HttpServer, ServerErrorHandler } from './services/http-server.service';
-import { IndexedDbService } from './services/indexed-db.service';
 import { InfoService } from './services/info.service';
 import { InstalledSoftwareService } from './services/installed-software.service';
 import { IosConfigurationService } from './services/ios-configuration.service';
@@ -488,7 +487,6 @@ import { RotationValidator } from './validators/rotation-validator';
     NodeService,
     LinkService,
     DrawingService,
-    IndexedDbService,
     HttpServer,
     SnapshotService,
     ProgressDialogService,

src/app/services/indexed-db.service.spec.ts

@@ -1,20 +0,0 @@
-import { inject, TestBed } from '@angular/core/testing';
-import { IndexedDbService } from './indexed-db.service';
-
-describe('IndexedDbService', () => {
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      providers: [IndexedDbService],
-    });
-  });
-
-  it('should be created', inject([IndexedDbService], (service: IndexedDbService) => {
-    expect(service).toBeTruthy();
-  }));
-
-  it('should get AngularIndexedDB', inject([IndexedDbService], (service: IndexedDbService) => {
-    const indexeddb = service.get();
-    expect(indexeddb.dbWrapper.dbName).toEqual(IndexedDbService.DATABASE);
-    expect(indexeddb.dbWrapper.dbVersion).toEqual(IndexedDbService.VERSION);
-  }));
-});

src/app/services/indexed-db.service.ts

@@ -1,18 +0,0 @@
-import { Injectable } from '@angular/core';
-import { AngularIndexedDB } from 'angular2-indexeddb';
-
-@Injectable()
-export class IndexedDbService {
-  static VERSION = 1;
-  static DATABASE = 'gns3-web-ui';
-
-  private db: AngularIndexedDB;
-
-  constructor() {
-    this.db = new AngularIndexedDB(IndexedDbService.DATABASE, IndexedDbService.VERSION);
-  }
-
-  public get() {
-    return this.db;
-  }
-}

src/app/services/server.service.spec.ts

@@ -1,179 +0,0 @@
-import { HttpClient } from '@angular/common/http';
-import { TestBed } from '@angular/core/testing';
-import { AngularIndexedDB } from 'angular2-indexeddb';
-import { Server } from '../models/server';
-import { HttpServer, ServerErrorHandler } from '../services/http-server.service';
-import { IndexedDbService } from './indexed-db.service';
-import { ServerService } from './server.service';
-
-import Spy = jasmine.Spy;
-
-export class MockedServerService {
-  public servers: Server[] = [];
-
-  public create(server: Server) {
-    return new Promise((resolve, reject) => {
-      this.servers.push(server);
-      resolve(server);
-    });
-  }
-
-  public get(server_id: number) {
-    const server = new Server();
-    server.id = server_id;
-    return Promise.resolve(server);
-  }
-
-  public getLocalServer(hostname: string, port: number) {
-    return new Promise((resolve, reject) => {
-      const server = new Server();
-      server.id = 99;
-      resolve(server);
-    });
-  }
-
-  public findAll() {
-    return new Promise((resolve, reject) => {
-      resolve(this.servers);
-    });
-  }
-
-  public getServerUrl(server: Server) {
-    return `${server.host}:${server.port}`;
-  }
-}
-
-describe('ServerService', () => {
-  let indexedDbService: IndexedDbService;
-  let db: AngularIndexedDB;
-  let service: ServerService;
-  let openDatabaseSpy: Spy;
-  let httpServer = new HttpServer({} as HttpClient, {} as ServerErrorHandler);
-
-  beforeEach(() => {
-    indexedDbService = new IndexedDbService();
-
-    db = indexedDbService.get();
-
-    openDatabaseSpy = spyOn(db, 'openDatabase').and.returnValue(Promise.resolve(true));
-
-    TestBed.configureTestingModule({
-      providers: [
-        ServerService,
-        { provide: IndexedDbService, useValue: indexedDbService },
-        { provide: HttpServer, useValue: httpServer },
-      ],
-    });
-
-    service = TestBed.get(ServerService);
-  });
-
-  it('should be created and create database', () => {
-    expect(service).toBeTruthy();
-    expect(db.openDatabase).toHaveBeenCalled();
-    expect(openDatabaseSpy.calls.first().args[0]).toEqual(1);
-
-    const evnt = {
-      currentTarget: {
-        result: {
-          createObjectStore: function () {},
-        },
-      },
-    };
-
-    spyOn(evnt.currentTarget.result, 'createObjectStore');
-
-    const upgradeCallback = openDatabaseSpy.calls.first().args[1];
-    upgradeCallback(evnt);
-
-    expect(evnt.currentTarget.result.createObjectStore).toHaveBeenCalled();
-  });
-
-  describe('operations on records', () => {
-    let record: any;
-
-    beforeEach(() => {
-      record = new Server();
-      record.name = 'test';
-    });
-
-    it('should create an object', (done) => {
-      const created = new Server();
-      created.id = 22;
-
-      spyOn(db, 'add').and.returnValue(Promise.resolve(created));
-
-      service.create(record).then((result) => {
-        expect(db.add).toHaveBeenCalledWith('servers', record);
-        done();
-      });
-    });
-
-    it('should update an object', (done) => {
-      spyOn(db, 'update').and.returnValue(Promise.resolve(record));
-
-      service.update(record).then((result) => {
-        expect(db.update).toHaveBeenCalledWith('servers', record);
-        expect(result).toEqual(record);
-        done();
-      });
-    });
-
-    it('should delete an object', (done) => {
-      record.id = 88;
-
-      spyOn(db, 'delete').and.returnValue(Promise.resolve());
-
-      service.delete(record).then(() => {
-        expect(db.delete).toHaveBeenCalledWith('servers', record.id);
-        done();
-      });
-    });
-  });
-
-  it('should call findAll', (done) => {
-    spyOn(db, 'getAll').and.returnValue(Promise.resolve([]));
-
-    service.findAll().then((result) => {
-      expect(result).toEqual([]);
-      expect(db.getAll).toHaveBeenCalledWith('servers');
-      done();
-    });
-  });
-
-  it('should create local server when missing', (done) => {
-    spyOn(db, 'getAll').and.returnValue(Promise.resolve([]));
-    spyOn(service, 'create').and.returnValue(Promise.resolve(new Server()));
-
-    const expectedServer = new Server();
-    expectedServer.name = 'local';
-    expectedServer.host = 'hostname';
-    expectedServer.port = 9999;
-    expectedServer.location = 'bundled';
-    expectedServer.protocol = 'http:';
-
-    service.getLocalServer('hostname', 9999).then(() => {
-      expect(service.create).toHaveBeenCalledWith(expectedServer);
-      done();
-    });
-  });
-
-  it('should update local server when found', (done) => {
-    const server = new Server();
-    server.name = 'local';
-    server.host = 'hostname';
-    server.port = 9999;
-    server.location = 'bundled';
-
-    spyOn(db, 'getAll').and.returnValue(Promise.resolve([server]));
-    spyOn(service, 'update').and.returnValue(Promise.resolve(new Server()));
-
-    service.getLocalServer('hostname-2', 11111).then(() => {
-      server.host = 'hostname-2';
-      server.port = 11111;
-
-      expect(service.update).toHaveBeenCalledWith(server);
-      done();
-    });
-  });
-});

src/app/services/server.service.ts

@@ -2,146 +2,88 @@ import { Injectable } from '@angular/core';
 import { Observable, Subject } from 'rxjs';
 import { Server, ServerProtocol } from '../models/server';
 import { HttpServer } from './http-server.service';
-import { IndexedDbService } from './indexed-db.service';
 
 @Injectable()
 export class ServerService {
-  private tablename = 'servers';
+  private serverIds: string[] = [];
-  private ready: Promise<any>;
-  private isIncognitoMode: boolean = false;
-  private serverIdsInIncognitoMode: string[] = [];
   public serviceInitialized: Subject<boolean> = new Subject<boolean>();
   public isServiceInitialized: boolean;
 
-  constructor(private indexedDbService: IndexedDbService, private httpServer: HttpServer) {
+  constructor(private httpServer: HttpServer) {
-    this.ready = this.indexedDbService
+    this.serverIds = this.getServerIds();
-      .get()
+    this.isServiceInitialized = true;
-      .openDatabase(1, (evt) => {
+    this.serviceInitialized.next(this.isServiceInitialized);
-        evt.currentTarget.result.createObjectStore(this.tablename, { keyPath: 'id', autoIncrement: true });
-      })
-      .then(() => {
-        this.indexedDbService
-          .get()
-          .getAll(this.tablename)
-          .then(() => {})
-          .catch(() => {
-            this.isIncognitoMode = true;
-          });
-      })
-      .catch(() => {
-        this.isIncognitoMode = true;
-      })
-      .finally(() => {
-        this.isServiceInitialized = true;
-        this.serviceInitialized.next(true);
-      });
   }
 
-  public tryToCreateDb() {
+  getServerIds() : string[]{
-    let promise = new Promise((resolve) => {
+    let str = localStorage.getItem("serverIds");
-      this.indexedDbService
+    if (str?.length > 0) {
-        .get()
+      return str.split(",");
-        .openDatabase(1, (evt) => {
+    }
-          evt.currentTarget.result.createObjectStore(this.tablename, { keyPath: 'id', autoIncrement: true });
+    return [];
-        })
+  }
-        .then(() => {})
+
-        .catch(() => {
+  updateServerIds() {
-          this.isIncognitoMode = true;
+    localStorage.removeItem("serverIds");
-        });
+    localStorage.setItem("serverIds", this.serverIds.toString());
+  }
+
+  public get(id: number): Promise<Server> {
+    let server: Server = JSON.parse(localStorage.getItem(`server-${id}`));
+    let promise = new Promise<Server>((resolve) => {
+      resolve(server);
     });
     return promise;
   }
 
-  public get(id: number): Promise<Server> {
-    if (this.isIncognitoMode) {
-      let server: Server = JSON.parse(localStorage.getItem(`server-${id}`));
-      let promise = new Promise<Server>((resolve) => {
-        resolve(server);
-      });
-      return promise;
-    }
-
-    return this.onReady(() => this.indexedDbService.get().getByKey(this.tablename, id)) as Promise<Server>;
-  }
-
   public create(server: Server) {
-    if (this.isIncognitoMode) {
+    server.id = this.serverIds.length + 1;
-      server.id = this.serverIdsInIncognitoMode.length + 1;
+    localStorage.setItem(`server-${server.id}`, JSON.stringify(server));
-      localStorage.setItem(`server-${server.id}`, JSON.stringify(server));
-      this.serverIdsInIncognitoMode.push(`server-${server.id}`);
 
-      let promise = new Promise<Server>((resolve) => {
+    this.serverIds.push(`server-${server.id}`);
-        resolve(server);
+    this.updateServerIds();
-      });
-      return promise;
-    }
 
-    return this.onReady(() => {
+    let promise = new Promise<Server>((resolve) => {
-      const promise = new Promise((resolve, reject) => {
+      resolve(server);
-        this.indexedDbService
-          .get()
-          .add(this.tablename, server)
-          .then((added) => {
-            server.id = added.key;
-            resolve(server);
-          }, reject);
-      });
-      return promise;
     });
+    return promise;
   }
 
   public update(server: Server) {
-    if (this.isIncognitoMode) {
+    localStorage.removeItem(`server-${server.id}`);
-      localStorage.removeItem(`server-${server.id}`);
+    localStorage.setItem(`server-${server.id}`, JSON.stringify(server));
-      localStorage.setItem(`server-${server.id}`, JSON.stringify(server));
 
-      let promise = new Promise<Server>((resolve) => {
+    let promise = new Promise<Server>((resolve) => {
-        resolve(server);
+      resolve(server);
-      });
-      return promise;
-    }
-
-    return this.onReady(() => {
-      const promise = new Promise((resolve, reject) => {
-        this.indexedDbService
-          .get()
-          .update(this.tablename, server)
-          .then((updated) => {
-            resolve(server);
-          }, reject);
-      });
-      return promise;
     });
+    return promise;
   }
 
   public findAll() {
-    if (this.isIncognitoMode) {
+    let promise = new Promise<Server[]>((resolve) => {
-      let promise = new Promise<Server[]>((resolve) => {
+      let servers: Server[] = [];
-        let servers: Server[] = [];
+      this.serverIds.forEach((n) => {
-        this.serverIdsInIncognitoMode.forEach((n) => {
+        console.log(n);
-          let server: Server = JSON.parse(localStorage.getItem(n));
-          servers.push(server);
-        });
-        resolve(servers);
-      });
-      return promise;
-    }
 
-    return this.onReady(() => this.indexedDbService.get().getAll(this.tablename)) as Promise<Server[]>;
+        let server: Server = JSON.parse(localStorage.getItem(n));
+        console.log(server);
+
+        servers.push(server);
+      });
+      resolve(servers);
+    });
+    return promise;
   }
 
   public delete(server: Server) {
-    if (this.isIncognitoMode) {
+    localStorage.removeItem(`server-${server.id}`);
-      localStorage.removeItem(`server-${server.id}`);
+    this.serverIds = this.serverIds.filter((n) => n !== `server-${server.id}`);
-      this.serverIdsInIncognitoMode = this.serverIdsInIncognitoMode.filter((n) => n !== `server-${server.id}`);
+    this.updateServerIds();
 
-      let promise = new Promise((resolve) => {
+    let promise = new Promise((resolve) => {
-        resolve(server.id);
+      resolve(server.id);
-      });
+    });
-      return promise;
+    return promise;
-    }
-
-    return this.onReady(() => this.indexedDbService.get().delete(this.tablename, server.id));
   }
 
   public getServerUrl(server: Server) {
@@ -179,25 +121,4 @@ export class ServerService {
 
     return promise;
   }
-
-  protected onReady(query) {
-    const promise = new Promise((resolve, reject) => {
-      this.ready.then(
-        () => {
-          query().then(
-            (result) => {
-              resolve(result);
-            },
-            (error) => {
-              reject(error);
-            }
-          );
-        },
-        (error) => {
-          reject(error);
-        }
-      );
-    });
-    return promise;
-  }
 }

src/environments/environment.ts

@@ -16,4 +16,4 @@ export const environment = {
  * This import should be commented out in production mode because it will have a negative impact
  * on performance if an error is thrown.
  */
-// import 'zone.js/dist/zone-error';  // Included with Angular CLI.
+// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.

src/polyfills.ts

@@ -72,7 +72,7 @@
 /***************************************************************************************************
  * Zone JS is required by default for Angular itself.
  */
-import 'zone.js/dist/zone'; // Included with Angular CLI.
+import 'zone.js'; // Included with Angular CLI.
 
 /***************************************************************************************************
  * APPLICATION IMPORTS

src/test.ts

@@ -1,4 +1,4 @@
-import 'zone.js/dist/zone-testing';
+import 'zone.js/testing';
 import { getTestBed } from '@angular/core/testing';
 import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
 

src/tsconfig.app.json

@@ -17,7 +17,6 @@
     "polyfills.ts"
   ],
   "include": [
-    // "../src/**/*",
+    // "../src/**/*"
-    "../node_modules/angular2-indexeddb/*"
   ]
 }

src/tsconfig.spec.json

@@ -15,7 +15,6 @@
   ],
   "include": [
     "**/*.spec.ts",
-    "**/*.d.ts",
+    "**/*.d.ts"
-    "../node_modules/angular2-indexeddb/*"
   ]
 }

tsconfig.base.json

@@ -8,7 +8,6 @@
     "declaration": false,
     "module": "esnext",
     "moduleResolution": "node",
-    "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "importHelpers": true,
     "target": "es5",