fontastic 0.1.7 → 0.2.0

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

@@ -1,150 +0,0 @@
-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

@@ -1,44 +0,0 @@
-<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

@@ -1,37 +0,0 @@
-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

@@ -1,41 +0,0 @@
-<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

@@ -1,52 +0,0 @@
-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

@@ -1,46 +0,0 @@
-<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

@@ -1,23 +0,0 @@
-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

@@ -1,30 +0,0 @@
-<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

@@ -1,43 +0,0 @@
-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

@@ -1,22 +0,0 @@
-<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>

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

@@ -1,50 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { NgForm } from '@angular/forms';
-import { PresentationService } from '@app/core/services';
-import { CustomThemeModel } from '@app/core/model';
-
-@Component({
-  selector: 'app-settings-theme',
-  templateUrl: './theme.component.html',
-  styleUrls: ['./theme.component.scss']
-})
-export class ThemeComponent implements OnInit {
-
-  themes: any[];
-  theme: CustomThemeModel;
-
-  constructor(
-    private presentationService: PresentationService,
-  ) {
-    this.themes = presentationService.getThemes();
-
-    this.presentationService._defaultTheme.subscribe((x) => {
-      const idx = this.themes.map(item => item.key).indexOf(x);
-      if (this.themes[idx]) {
-        const theme = this.themes[idx];
-        this.theme = new CustomThemeModel(theme.key, theme.title, theme.description);
-      }
-    });
-  }
-
-  ngOnInit(): void {
-    const body = document.querySelector('body');
-    const attr = body.getAttribute('data-theme');
-    const idx = this.themes.map(item => item.key).indexOf(attr);
-    if (this.themes[idx]) {
-      const theme = this.themes[idx];
-      this.theme = new CustomThemeModel(theme.key, theme.title, theme.description);
-    }
-  }
-
-  onChange(event: Event): void {
-    const target = event.target as HTMLInputElement;
-    const theme: string = target.value;
-    this.presentationService.setTheme(theme);
-    this.presentationService.setThemeVars(theme);
-  }
-
-  onSubmit(form: NgForm): void {
-    if (form.valid) { }
-  }
-}

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

@@ -1 +0,0 @@
-<div [className]="isActivated ? 'app-spinner is-animating' : 'app-spinner'"></div>

package/src/app/shared/components/splash-screen/splash-screen.component.html

@@ -1,5 +0,0 @@
-<div class="splash-screen" *ngIf="showSplash">
-  <span class="d">.</span>
-  <span class="d d-2">.</span>
-  <span class="d d-3">.</span>
-</div>

package/src/app/shared/components/splash-screen/splash-screen.component.scss

@@ -1,31 +0,0 @@
-.splash-screen {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: #fff;
-    .d {
-        font-size: 28px;
-        animation: dots 1.5s ease-out infinite;
-    }
-    .d-2 {
-        animation-delay: .5s;
-    }
-    .d-3 {
-        animation-delay: 1s;
-    }
-}
-
-@keyframes dots {
-    50% {
-        transform: translateY(-.4rem);
-    }
-
-    100% {
-        transform: translateY(0);
-    }
-}

package/src/app/shared/components/splash-screen/splash-screen.component.ts

@@ -1,17 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-splash-screen',
-  templateUrl: './splash-screen.component.html',
-  styleUrls: ['./splash-screen.component.scss']
-})
-export class SplashScreenComponent implements OnInit {
-  showSplash = true;
-
-  constructor() { }
-
-  ngOnInit(): void {
-    setTimeout(() => this.showSplash = !this.showSplash, 1e3);
-  }
-
-}

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

@@ -1,22 +0,0 @@
-<figure class="border-bottom" [class.collapsed]="openTabs.includes('store')">
-  <figcaption class="border-bottom">
-    <span class="material-icons">arrow_drop_down</span>
-    <span class="grow whitespace-nowrap">Font Store</span>
-    <span class="flex items-center justify-end material-icons-rounded">
-      <span title="Collapse" class="material-icons" (click)="onComponentSwitch();">more_horiz</span>
-    </span>
-  </figcaption>
-  <div class="hover-scrollbox-y">
-    <div class="table-data flex flex-col justify-start items-start w-full">
-      <ng-container *ngFor="let item of results;">
-        <div
-          class="table-data__item flex flex-col justify-start items-start border-bottom-dashed py-2 px-2 w-full cursor-text">
-          <div class="flex items-center justify-between w-full mb-1">
-            <h2 class="text-sm font-bold uppercase select-auto" [attr.title]="item.name">{{ item.name }}</h2>
-          </div>
-          <p class="mb-1 select-all">{{ item.value }}</p>
-        </div>
-      </ng-container>
-    </div>
-  </div>
-</figure>

package/src/app/shared/components/store/store.component.scss

@@ -1,10 +0,0 @@
-:host {
-    position: relative;
-    display: flex;
-    height: 100%;
-    width: 100%;
-    flex-direction: column;
-    flex-wrap: nowrap;
-    justify-content: flex-start;
-    overflow: hidden;
-}