fontastic 0.1.3

package/src/app/shared/components/settings/general/general.component.html

@@ -0,0 +1,170 @@
+<div class="page">
+
+  <div class="page__header border-bottom">
+    <div class="page__header-title">
+      <h1>General Settings</h1>
+    </div>
+  </div>
+
+  <div class="page__body">
+
+    <fieldset>
+      <legend><span>Personalize</span></legend>
+      <form class="form" #generalForm="ngForm" (ngSubmit)="onSubmit(generalForm)">
+        <div class="form-group">
+          <label form="name">User name</label>
+          <input type="text" class="form-control" name="name" id="name" [(ngModel)]="user.name" #selectedName="ngModel"
+            required />
+          <span class="form-text text-muted">Enter your user name.</span>
+        </div>
+        <div class="form-group">
+          <label for="email">Email address</label>
+          <input type="email" class="form-control" name="email" id="email" [(ngModel)]="user.email"
+            #selectedEmail="ngModel" required />
+          <span class="form-text text-muted">Enter your email address.</span>
+        </div>
+        <div class="form__actions">
+          <app-button [type]="'submit'" [title]="'Submit'" [ngClass]="'app-button__xl app-button__rounded'"
+            (handleButtonClick)="onSubmitButtonClick($event)" [attr.disabled]="!generalForm.form.valid">Submit
+          </app-button>
+          <app-button [type]="'reset'" [title]="'Reset'"
+            [ngClass]="'app-button__xl app-button__rounded app-button__success'">Reset
+          </app-button>
+        </div>
+      </form>
+    </fieldset>
+
+    <fieldset>
+      <legend><span>Miscellaneous</span></legend>
+
+      <form class="form">
+
+        <div class="form-group">
+          <label for="import">Import options</label>
+          <select class="form-control" name="import" id="import" [(ngModel)]="importType.type" #type="ngModel"
+            (change)="onImportOptionsChange($event)">
+            <option *ngFor="let item of importOptions;" [value]="item.key">{{item.title}}</option>
+          </select>
+          <span class="form-text">Choose whether fonts are added to catalog or in place.</span>
+        </div>
+
+      </form>
+
+    </fieldset>
+
+    <fieldset>
+      <legend><span>Quick actions</span></legend>
+
+      <form>
+        <dl>
+          <dt>
+            <label>Reset favorited fonts</label>
+            <span>Resets fonts that have been favorited.</span>
+          </dt>
+          <dd>
+            <app-button [type]="'submit'" [title]="'Submit'" [ngClass]="'app-button__md'"
+              (handleButtonClick)="onResetFavoritedFonts($event)">Submit</app-button>
+          </dd>
+        </dl>
+      </form>
+
+      <form>
+        <dl>
+          <dt>
+            <label>Synchronize system fonts</label>
+            <span>Imports fonts from system fonts folder.</span>
+          </dt>
+          <dd>
+            <app-button [type]="'submit'" [title]="'Submit'" [ngClass]="'app-button__md'"
+              (handleButtonClick)="onSystemScan($event)">Submit</app-button>
+          </dd>
+        </dl>
+      </form>
+
+      <form>
+        <dl>
+          <dt>
+            <label>Synchronize activated fonts</label>
+            <span>Marks catalog fonts activated if installed.</span>
+          </dt>
+          <dd>
+            <app-button [type]="'submit'" [title]="'Submit'" [ngClass]="'app-button__md'"
+              (handleButtonClick)="onSyncActivated($event)">Submit</app-button>
+          </dd>
+        </dl>
+      </form>
+
+      <form *ngIf="hasNewsApiKey">
+        <dl>
+          <dt>
+            <label>Fetch latest news</label>
+            <span>Updates latest news from selected sources.</span>
+          </dt>
+          <dd>
+            <app-button [type]="'submit'" [title]="'Submit'" [ngClass]="'app-button__md'"
+              (handleButtonClick)="onRefreshLatestNews($event)">Submit</app-button>
+          </dd>
+        </dl>
+      </form>
+
+      <form>
+        <dl>
+          <dt>
+            <label>Restart application</label>
+            <span>Restarts the application.</span>
+          </dt>
+          <dd>
+            <app-button [type]="'submit'" [title]="'Submit'" [ngClass]="'app-button__md'"
+              (handleButtonClick)="onRestartApplication($event)">Submit</app-button>
+          </dd>
+        </dl>
+      </form>
+
+      <form>
+        <dl>
+          <dt>
+            <label>Exit application</label>
+            <span>Exits the application.</span>
+          </dt>
+          <dd>
+            <app-button [type]="'submit'" [title]="'Submit'" [ngClass]="'app-button__md'"
+              (handleButtonClick)="onExitApplication($event)">Submit</app-button>
+          </dd>
+        </dl>
+      </form>
+
+    </fieldset>
+
+    <fieldset>
+      <legend><span>Danger zone</span></legend>
+
+      <form>
+        <dl>
+          <dt>
+            <label>Drop active database</label>
+            <span>Drops the database and all its data.</span>
+          </dt>
+          <dd>
+            <app-button [type]="'submit'" [title]="'Submit'" [ngClass]="'app-button__md'"
+              (handleButtonClick)="onDropDatabase($event)">Submit</app-button>
+          </dd>
+        </dl>
+      </form>
+
+      <form>
+        <dl>
+          <dt>
+            <label>Clear system storage</label>
+            <span>Removes all settings from system store.</span>
+          </dt>
+          <dd>
+            <app-button [type]="'submit'" [title]="'Submit'" [ngClass]="'app-button__md'"
+              (handleButtonClick)="onClearStore($event)">Submit</app-button>
+          </dd>
+        </dl>
+      </form>
+
+    </fieldset>
+
+  </div>
+</div>

package/src/app/shared/components/settings/general/general.component.ts

@@ -0,0 +1,150 @@
+import { Component, OnInit } from '@angular/core';
+import { NgForm } from '@angular/forms';
+import { AuthService, AlertService, ConfigService, NewsService, MessageService, DatabaseService, PresentationService } from '@app/core/services';
+import { AuthUserModel, ImportOptionsModel } from '@app/core/model';
+import { SystemConfig, AuthUser, ImportOptions, NewsType } from '@main/types';
+import { importUserOptions } from '@main/config/system';
+import { StorageType } from '@main/enums';
+
+@Component({
+  selector: 'app-settings-general',
+  templateUrl: './general.component.html',
+  styleUrls: ['./general.component.scss']
+})
+export class GeneralComponent implements OnInit {
+
+  config: SystemConfig;
+
+  hasNewsApiKey = false;
+
+  user: AuthUser = new AuthUserModel('', '', '');
+
+  importOptions = importUserOptions;
+  importType: ImportOptions = new ImportOptionsModel('ask');
+
+  constructor(
+    private authService: AuthService,
+    private alertService: AlertService,
+    private newsService: NewsService,
+    private configService: ConfigService,
+    private messageService: MessageService,
+    private databaseService: DatabaseService,
+    private presentationService: PresentationService
+  ) { }
+
+  ngOnInit(): void {
+    if (this.authService.authUserValue) {
+      this.user = this.authService.getAuthUser();
+    }
+
+    if (this.configService.has(StorageType.Import)) {
+      const importType = this.configService.get(StorageType.Import);
+      if (importType) {
+        this.importType = new ImportOptionsModel(importType);
+      }
+    }
+
+    this.newsService.watchLatestNews$.subscribe((result: NewsType) => {
+      if (result?.apiKey) {
+        this.hasNewsApiKey = true;
+      }
+    });
+  }
+
+  onImportOptionsChange(event: Event): void {
+    const target = event.target as HTMLInputElement;
+    const value = target.value;
+    this.configService.set(StorageType.Import, value);
+    this.messageService.set(StorageType.Import, value);
+  }
+
+  onResetFavoritedFonts(_event: Event): void {
+    this.messageService.resetFavorites().then(() => {
+      this.alertService.info('Successfully reset system favorites.');
+      this.databaseService.fetchSystemStats();
+    });
+  }
+
+  onSystemScan(_event: Event): void {
+    this.alertService.info('Searching system fonts..');
+    this.presentationService.setLoadingSpinner(true);
+    this.messageService.syncSystemFonts().then((result: any) => {
+      const message = `Found #${result.systemCount} system fonts.`;
+      this.alertService.info(message);
+      this.messageService.log(message, 1);
+      this.presentationService.setLoadingSpinner(false);
+      this.databaseService.setSystemStats(result);
+    }).catch((_err) => { });
+  }
+
+  onSyncActivated(_event: Event): void {
+    this.alertService.info('Searching activated fonts..');
+    this.presentationService.setLoadingSpinner(true);
+    this.messageService.syncActivatedFonts().then((result: any) => {
+      const message = `Found #${result.activatedCount} activated fonts.`;
+      this.alertService.info(message);
+      this.messageService.log(message, 1);
+      this.presentationService.setLoadingSpinner(false);
+    }).catch((_err) => { });
+  }
+
+  onRefreshLatestNews(_event: Event): void {
+    this.newsService.fetchLatestNews(true);
+  }
+
+  onRestartApplication(_event: Event): void {
+    this.messageService.beep();
+    this.messageService.reloadWindow();
+  }
+
+  onExitApplication(_event: Event): void {
+    this.messageService.beep();
+    this.messageService.quitApplication();
+  }
+
+  onDropDatabase(_event: Event): void {
+    const options = {
+      type: 'question',
+      buttons: ['Yes', 'No'],
+      title: 'Confirm',
+      message: 'Are you sure you want to drop the database?'
+    };
+
+    this.messageService.showMessageBox(options).then((response: any) => {
+      if (response.response === 0) {
+        this.messageService.dropDatabase().then(() => this.messageService.reloadWindow());
+      }
+    });
+  }
+
+  onClearStore(_event: Event): void {
+    const options = {
+      type: 'question',
+      buttons: ['Yes', 'No'],
+      title: 'Confirm',
+      message: 'Are you sure you want to delete the application store?'
+    };
+
+    this.messageService.showMessageBox(options).then((response: any) => {
+      if (response.response === 0) {
+        this.messageService.clearStore().then(() => this.messageService.reloadWindow());
+      }
+    });
+  }
+
+  onSubmitButtonClick(_event: Event): void {
+    this.alertService.info('Applying changes please wait..');
+  }
+
+  onSubmit(form: NgForm): void {
+    if (form.valid) {
+      this.messageService.systemAuthenticate(form.value).then((response: AuthUser) => {
+        if (response.status === 'ok') {
+          this.authService.setAuthUser(response);
+        }
+        this.alertService.info('Account settings have been updated successfully.');
+      });
+    }
+  }
+
+}

package/src/app/shared/components/settings/logs/logs.component.html

@@ -0,0 +1,44 @@
+<div class="page">
+
+  <div class="page__header border-bottom">
+    <div class="page__header-title">
+      <h1>System Logs</h1>
+    </div>
+    <div class="flex items-center justify-end p-0 text-right">
+      <div>
+        <app-button [type]="'button'" [title]="'Truncate Table'" [ngClass]="'app-button__xl'" (click)="handleTruncate($event)">Empty Table</app-button>
+      </div>
+    </div>
+  </div>
+
+  <div class="page__body">
+    <div class="flex flex-col p-5">
+      <table class="table table-auto striped">
+        <thead>
+          <tr>
+            <th class="uppercase sort_input">ID</th>
+            <th class="text-left">Message</th>
+            <th class="text-center">Status</th>
+            <th class="text-center">Created</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr *ngFor="let item of resultSet; let i = index;" title="{{item.message}}">
+            <td class="text-center">
+              <i class="material-icons" (click)="handleDelete(item.id)" title="Delete Item">delete</i>
+            </td>
+            <td class="text-left">
+              <div class="flex flex-col items-start justify-center w-full">
+                <strong>{{filterMessageType(item.type)}}</strong>
+                <span>{{item.message.substring(0, 100)}}</span>
+              </div>
+            </td>
+            <td class="text-center">{{filterMessageStatus(item.status)}}</td>
+            <td class="text-center">{{item.created | date :'medium'}}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+
+</div>

package/src/app/shared/components/settings/logs/logs.component.ts

@@ -0,0 +1,37 @@
+import { Component, OnInit } from '@angular/core';
+import { MessageService } from '@app/core/services';
+import { Logger } from '@main/database/entity/Logger.schema';
+
+@Component({
+  selector: 'app-settings-logs',
+  templateUrl: './logs.component.html',
+  styleUrls: ['./logs.component.scss']
+})
+export class LogsComponent implements OnInit {
+
+  resultSet: Logger[] = [];
+
+  constructor(
+    private messageService: MessageService,
+  ) { }
+
+  ngOnInit(): void {
+    this.messageService.loggerFind({ order: { id: 'DESC' }}).then((result: Logger[]) => this.resultSet = result);
+  }
+
+  filterMessageType(type: number): string {
+    return (type === 1) ? 'System Action' : 'User Action';
+  }
+
+  filterMessageStatus(type: number): string {
+    return (type === 1) ? 'Error' : 'Success';
+  }
+
+  handleDelete(id: number): void {
+    this.messageService.loggerDelete(id).then(() => this.ngOnInit());
+  }
+
+  handleTruncate(_event: Event): void {
+    this.messageService.loggerTruncate().then(() => this.ngOnInit());
+  }
+}

package/src/app/shared/components/settings/news/news.component.html

@@ -0,0 +1,41 @@
+<div class="page">
+
+  <div class="page__header border-bottom">
+    <div class="page__header-title">
+      <h1>Latest News Articles</h1>
+    </div>
+    <ng-container *ngIf="apiKey">
+      <div class="text-right">
+        <app-button [type]="'button'" [title]="'Submit'" [ngClass]="'app-button__2xl app-button__rounded'"
+          (handleButtonClick)="onRefreshLatestNews($event)">Fetch Articles</app-button>
+      </div>
+    </ng-container>
+  </div>
+
+  <form class="form" #newsApiForm="ngForm" (ngSubmit)="onSubmit(newsApiForm)">
+
+    <div class="page__body">
+      <div class="form-group">
+        <label for="apiKey">Api Key</label>
+        <input type="text" class="form-control" name="apiKey" id="apiKey" [(ngModel)]="apiKey"
+          #selectedApiKey="ngModel">
+        <span class="form-text text-muted">Please visit <a href="https://newsapi.org">newsapi.org</a> to
+          obtain
+          your free key.</span>
+      </div>
+    </div>
+
+    <div class="page__footer border-top">
+      <div>
+        <app-button [type]="'submit'" [title]="'Submit'" [ngClass]="'app-button__md app-button__rounded'"
+          [attr.disabled]="!newsApiForm.form.valid">Submit</app-button>
+        <app-button [type]="'reset'" [title]="'Reset'"
+          [ngClass]="'app-button__md app-button__rounded app-button__success'" (click)="newsApiForm.reset();">
+          Reset
+        </app-button>
+      </div>
+    </div>
+
+  </form>
+
+</div>

package/src/app/shared/components/settings/news/news.component.ts

@@ -0,0 +1,52 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { NgForm } from '@angular/forms';
+import { ConfigService, MessageService, AlertService, NewsService } from '@app/core/services';
+import { NewsType, SystemConfig } from '@main/types';
+import { StorageType } from '@main/enums';
+
+@Component({
+  selector: 'app-settings-news',
+  templateUrl: './news.component.html',
+  styleUrls: ['./news.component.scss']
+})
+export class NewsComponent implements OnInit, OnDestroy {
+
+  apiKey = '';
+
+  constructor(
+    private alertService: AlertService,
+    private configService: ConfigService,
+    private newsService: NewsService,
+    private messageService: MessageService
+  ) { }
+
+  ngOnInit(): void {
+    this.configService._systemConfig.subscribe((result: SystemConfig) => {
+      if (result?.news?.apiKey) {
+        this.apiKey = result.news.apiKey;
+      }
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.apiKey = '';
+  }
+
+  onRefreshLatestNews(_event: Event): void {
+    this.newsService.fetchLatestNews(true).then((result: NewsType) => {
+      if (result?.articles?.length) {
+        this.alertService.success(`Successfully fetched ${result.articles.length} latest news articles!`);
+      }
+    });
+  }
+
+  onSubmit(form: NgForm) {
+    if (form.valid) {
+      this.messageService.set(StorageType.News, { apiKey: form.value.apiKey }).then((result: NewsType) => {
+        this.configService.set(StorageType.News, result);
+        this.messageService.log('Saved News Service API Key.', 1);
+        this.alertService.success('Saved News Service API Key.');
+      });
+    }
+  }
+}

package/src/app/shared/components/settings/settings.component.html

@@ -0,0 +1,46 @@
+<app-modal id="system-settings" title="System Settings" size="xl" rounded="rounded-md">
+
+  <!-- Flex columns -->
+  <div class="flex justify-start p-0 m-0 h-full">
+
+    <!-- Navigation -->
+    <div class="w-[240px] min-w-[240px] border-right hover-scrollbox-x hover-scrollbox-y">
+      <div class="p-5">
+        <ul>
+          <li class="my-2">
+            <a href="#" (click)="onComponentSwitch('general')">General</a>
+          </li>
+          <li class="my-2">
+            <a href="#" (click)="onComponentSwitch('database')">Database</a>
+          </li>
+          <li class="my-2">
+            <a href="#" (click)="onComponentSwitch('theme')">Theme</a>
+          </li>
+          <li class="my-2">
+            <a href="#" (click)="onComponentSwitch('news')">News</a>
+          </li>
+          <li class="my-2">
+            <a href="#" (click)="onComponentSwitch('logs')">Logs</a>
+          </li>
+          <li class="my-2">
+            <a href="#" (click)="onComponentSwitch('system')">System</a>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <!-- Body -->
+    <div class="relative w-full hover-scrollbox-y">
+      <ng-container [ngSwitch]="componentName">
+        <app-settings-general *ngSwitchCase="'general'"></app-settings-general>
+        <app-settings-database *ngSwitchCase="'database'"></app-settings-database>
+        <app-settings-theme *ngSwitchCase="'theme'"></app-settings-theme>
+        <app-settings-news *ngSwitchCase="'news'"></app-settings-news>
+        <app-settings-logs *ngSwitchCase="'logs'"></app-settings-logs>
+        <app-settings-system *ngSwitchCase="'system'"></app-settings-system>
+      </ng-container>
+    </div>
+
+  </div>
+
+</app-modal>

package/src/app/shared/components/settings/settings.component.ts

@@ -0,0 +1,23 @@
+import { Component, OnInit } from '@angular/core';
+import { ModalService } from '@app/core/services';
+
+@Component({
+  selector: 'app-settings',
+  templateUrl: './settings.component.html',
+  styleUrls: ['./settings.component.scss']
+})
+export class SettingsComponent implements OnInit {
+
+  componentName = 'general';
+
+  constructor(
+    private modalService: ModalService,
+  ) { }
+
+  ngOnInit(): void { }
+
+  onComponentSwitch(componentName: string): void {
+    this.componentName = componentName;
+  }
+
+}

package/src/app/shared/components/settings/system/system.component.html

@@ -0,0 +1,30 @@
+<div class="page">
+
+  <div class="page__header border-bottom">
+    <div class="page__header-title">
+      <h1>System Settings</h1>
+    </div>
+  </div>
+
+  <div class="page__body">
+    <div class="flex flex-col p-5">
+      <table class="table table-settings">
+        <thead>
+          <tr>
+            <th class="text-left uppercase w-2/6">Key</th>
+            <th class="text-left uppercase w-4/6">Value</th>
+          </tr>
+        </thead>
+        <tbody>
+          <ng-container *ngFor="let item of systemSettings; let i = index;">
+            <tr>
+              <td class="text-left">{{item.key}}</td>
+              <td class="text-left">{{item.value}}</td>
+            </tr>
+          </ng-container>
+        </tbody>
+      </table>
+    </div>
+  </div>
+
+</div>

package/src/app/shared/components/settings/system/system.component.ts

@@ -0,0 +1,43 @@
+import { Component, OnInit } from '@angular/core';
+import { ConfigService } from '@app/core/services';
+
+@Component({
+  selector: 'app-settings-system',
+  templateUrl: './system.component.html',
+  styleUrls: ['./system.component.scss']
+})
+export class SystemComponent implements OnInit {
+
+  systemConfig: any;
+  systemSettings: any[] = [];
+
+  constructor(
+    private configService: ConfigService
+  ) {
+    this.systemConfig = this.configService.getConfig();
+  }
+
+  ngOnInit(): void {
+    const systemConfig = (this.systemConfig) ? this.systemConfig.system : {};
+
+    this.systemSettings = Object.entries(systemConfig).reduce((arr, k) => {
+
+      const key: any = k[0];
+      let value: any = k[1];
+
+      if (key === 'uptime') {
+        value = `Hours: ${value.hours} Minutes: ${value.minutes} Seconds: ${value.seconds}`;
+      }
+
+      const item = key.toUpperCase();
+
+      if (value === true || value === false) {
+        value = (value === true) ? 'Yes' : 'No';
+      }
+
+      arr.push({ key: item, value });
+
+      return arr;
+    }, []);
+  }
+}

package/src/app/shared/components/settings/theme/theme.component.html

@@ -0,0 +1,22 @@
+<div class="page">
+
+  <div class="page__header border-bottom">
+    <div class="page__header-title">
+      <h1>Theme Settings</h1>
+    </div>
+  </div>
+
+  <div class="page__body">
+    <form class="form" #generalForm="ngForm" (ngSubmit)="onSubmit(generalForm)">
+      <div class="form-group">
+        <label for="key">Selected theme</label>
+        <select class="form-control" name="key" id="key" [(ngModel)]="theme.key" #key="ngModel"
+          (change)="onChange($event)">
+          <option *ngFor="let item of themes;" [value]="item.key">{{item.title}}</option>
+        </select>
+        <span class="form-text">{{ theme.description }}</span>
+      </div>
+    </form>
+  </div>
+
+</div>