generated from maximegris/angular-electron
-
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
10 changed files
with
483 additions
and
17 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| <div role="tablist" class="tabs tabs-boxed rounded-none"> | ||
|
|
||
| @for(tab of tabOrder; track tab.name; let i = $index) { | ||
| <a role="tab" class="tab" [class.tab-active]="activeQueryTab() === i" (click)="changeTab(i)"> | ||
| {{ tab.name }} | ||
| </a> | ||
| } | ||
|
|
||
| <div class="tab flex flex-row justify-end"> | ||
| @switch (activeQueryTab()) { | ||
| @case (0) { | ||
| <button class="btn-sm btn btn-primary mr-3" (click)="updateJSFunction()">Run JS</button> | ||
| } | ||
| @case (1) { | ||
| <button class="btn-sm btn btn-primary mr-3" (click)="updateSQLFunction()">Run SQL</button> | ||
| } | ||
| } | ||
| <button class="btn-sm btn btn-success mr-3" (click)="queryService.toggleQuerying()">Done</button> | ||
| </div> | ||
|
|
||
| </div> | ||
|
|
||
|
|
||
| @switch (activeQueryTab()) { | ||
| @case (0) { | ||
| <div class="flex flex-row gap-2 mb-3"> | ||
| <div class="form-column"> | ||
| <div class="form-row"> | ||
| <ngs-code-editor class="editor-container" [theme]="'vs-dark'" [codeModel]="jsModel" | ||
| [options]="{ contextmenu: true }" (valueChanged)="onJSChanged($event)" | ||
| (keydown.control.s)="$event.preventDefault(); updateJSFunction()"></ngs-code-editor> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="form-column max-w-[50%] max-h-[70vh] overflow-scroll"> | ||
| <div class="form-row"> | ||
| @if(jsError(); as error) { | ||
| <div class="error">{{ error }}</div> | ||
| } | ||
| @if(jsResult(); as result) { | ||
| <pre> | ||
| {{ result | json }} | ||
| </pre> | ||
| } | ||
| <pre></pre> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| } | ||
|
|
||
| @case (1) { | ||
| <div class="flex flex-row gap-2 mb-3"> | ||
| <div class="form-column"> | ||
| <div class="form-row"> | ||
| <ngs-code-editor class="editor-container" [theme]="'vs-dark'" [codeModel]="sqlModel" | ||
| [options]="{ contextmenu: true }" (valueChanged)="onSQLChanged($event)" | ||
| (keydown.control.s)="$event.preventDefault(); updateSQLFunction()"></ngs-code-editor> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="form-column max-w-[50%] max-h-[70vh] overflow-scroll"> | ||
| <div class="form-row"> | ||
| @if(sqlError(); as error) { | ||
| <div class="error">{{ error }}</div> | ||
| } | ||
| @if(sqlResult(); as result) { | ||
| <pre> | ||
| {{ result | json }} | ||
| </pre> | ||
| } | ||
| <pre></pre> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| .editor-container { | ||
| height: 70vh; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,108 @@ | ||
| import { Component, inject, signal } from '@angular/core'; | ||
| import { CodeModel } from '@ngstack/code-editor'; | ||
| import * as alasql from 'alasql'; | ||
| import * as _ from 'lodash'; | ||
| import { LocalStorageService } from 'ngx-webstorage'; | ||
|
|
||
| import { QueryService } from '../services/query.service'; | ||
|
|
||
| @Component({ | ||
| selector: 'app-query', | ||
| templateUrl: './query.component.html', | ||
| styleUrl: './query.component.scss', | ||
| }) | ||
| export class QueryComponent { | ||
| private localStorage = inject(LocalStorageService); | ||
|
|
||
| public queryService = inject(QueryService); | ||
|
|
||
| public activeQueryTab = signal<number>(0); | ||
|
|
||
| public jsResult = signal<any>(undefined); | ||
| public jsError = signal<string>(''); | ||
|
|
||
| public sqlResult = signal<any>(undefined); | ||
| public sqlError = signal<string>(''); | ||
|
|
||
| public tabOrder = [ | ||
| { | ||
| name: 'JavaScript', | ||
| }, | ||
| { | ||
| name: 'SQL', | ||
| }, | ||
| ]; | ||
|
|
||
| public readonly jsModel: CodeModel = { | ||
| language: 'javascript', | ||
| uri: 'query.js', | ||
| value: 'function query(mod) {\n\n}', | ||
| }; | ||
|
|
||
| public readonly sqlModel: CodeModel = { | ||
| language: 'sql', | ||
| uri: 'query.sql', | ||
| value: 'SELECT type, COUNT(type) from ? GROUP BY type;', | ||
| }; | ||
|
|
||
| constructor() { | ||
| (window as any)._ = _; | ||
|
|
||
| const lastQueryTab = | ||
| (this.localStorage.retrieve('lastquerytab') as number) ?? 0; | ||
| this.activeQueryTab.set(lastQueryTab); | ||
|
|
||
| const oldJSString = this.localStorage.retrieve('jsfunc'); | ||
| if (oldJSString) { | ||
| this.jsModel.value = oldJSString; | ||
| } | ||
|
|
||
| const oldSQLString = this.localStorage.retrieve('sqlfunc'); | ||
| if (oldSQLString) { | ||
| this.sqlModel.value = oldSQLString; | ||
| } | ||
| } | ||
|
|
||
| public changeTab(newTab: number) { | ||
| this.activeQueryTab.set(newTab); | ||
| this.localStorage.store('lastquerytab', newTab); | ||
| } | ||
|
|
||
| public onJSChanged($event: string) { | ||
| this.localStorage.store('jsfunc', $event); | ||
| } | ||
|
|
||
| public updateJSFunction() { | ||
| this.jsResult.set(undefined); | ||
| this.jsError.set(''); | ||
|
|
||
| try { | ||
| // eslint-disable-next-line @typescript-eslint/no-implied-eval | ||
| const func = new Function(`return ${this.jsModel.value};`); | ||
| const result = func()(this.queryService.modForJS()); | ||
| this.jsResult.set(result); | ||
| } catch (e: any) { | ||
| // eslint-disable-next-line @typescript-eslint/no-unsafe-argument | ||
| this.jsError.set(e?.message ?? 'JS parsing error'); | ||
| } | ||
| } | ||
|
|
||
| public onSQLChanged($event: string) { | ||
| this.localStorage.store('sqlfunc', $event); | ||
| } | ||
|
|
||
| public updateSQLFunction() { | ||
| this.sqlResult.set(undefined); | ||
| this.sqlError.set(''); | ||
|
|
||
| try { | ||
| const result = alasql(this.sqlModel.value, [ | ||
| this.queryService.modForSQL(), | ||
| ]); | ||
| this.sqlResult.set(result); | ||
| } catch (e: any) { | ||
| // eslint-disable-next-line @typescript-eslint/no-unsafe-argument | ||
| this.sqlError.set(e?.message ?? 'SQL parsing error'); | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| import { computed, inject, Injectable, signal } from '@angular/core'; | ||
| import { ModService } from './mod.service'; | ||
|
|
||
| @Injectable({ | ||
| providedIn: 'root', | ||
| }) | ||
| export class QueryService { | ||
| private modService = inject(ModService); | ||
|
|
||
| public isQuerying = signal<boolean>(false); | ||
|
|
||
| public modForJS = computed(() => structuredClone(this.modService.mod())); | ||
| public modForSQL = computed(() => { | ||
| const mod = structuredClone(this.modService.mod()); | ||
| return [ | ||
| ...mod.cores.map((c) => ({ type: 'core', data: c })), | ||
| ...mod.dialogs.map((c) => ({ type: 'dialog', data: c })), | ||
| ...mod.drops.map((c) => ({ type: 'drop', data: c })), | ||
| ...mod.items.map((c) => ({ type: 'item', data: c })), | ||
| ...mod.maps.map((c) => ({ type: 'map', data: c })), | ||
| ...mod.npcs.map((c) => ({ type: 'npc', data: c })), | ||
| ...mod.quests.map((c) => ({ type: 'quest', data: c })), | ||
| ...mod.recipes.map((c) => ({ type: 'recipe', data: c })), | ||
| ...mod.spawners.map((c) => ({ type: 'spawner', data: c })), | ||
| ...mod.stems.map((c) => ({ type: 'stem', data: c })), | ||
| ...mod.traitTrees.map((c) => ({ type: 'traitTree', data: c })), | ||
| ]; | ||
| }); | ||
|
|
||
| public toggleQuerying(newSetting = !this.isQuerying()) { | ||
| this.isQuerying.set(newSetting); | ||
| } | ||
| } |