garrettmills
4 years ago
parent
b5d2f64fd3
commit
f4c86a06e2
@ -0,0 +1,24 @@
|
||||
<div class="code-wrapper" style="width: 100%; height: 600px; margin-top: 10px;">
|
||||
<ion-toolbar>
|
||||
<ion-item>
|
||||
<ion-label position="floating">Language</ion-label>
|
||||
<ion-select style="min-width: 40px;" [(ngModel)]="editorOptions.language" (ionChange)="onSelectChange()">
|
||||
<ion-select-option *ngFor="let lang of languageOptions" [value]="lang.toLowerCase()">{{lang}}</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
</ion-toolbar>
|
||||
<div class="ed-wrapper" style="width: 100%; height: 480px;">
|
||||
<ngx-monaco-editor style="width: 100%; height: 100%;"
|
||||
[options]="editorOptions"
|
||||
[(ngModel)]="editorValue"
|
||||
(ngModelChange)="onEditorModelChange($event)"
|
||||
#theEditor
|
||||
></ngx-monaco-editor>
|
||||
</div>
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="end">
|
||||
<ion-button (click)="onDropClick()"><ion-icon name="alert" color="danger"></ion-icon> Drop Editor</ion-button>
|
||||
<ion-button (click)="onSaveClick()"><ion-icon name="save" [color]="dirty ? 'warning' : 'success'"></ion-icon> Save Changes</ion-button>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
</div>
|
||||
@ -0,0 +1,4 @@
|
||||
div.code-wrapper {
|
||||
border: 2px solid #8c8c8c;
|
||||
border-radius: 3px;
|
||||
}
|
||||
@ -0,0 +1,198 @@
|
||||
import {Component, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
|
||||
import {v4} from 'uuid';
|
||||
import HostRecord from '../../../structures/HostRecord';
|
||||
import {Observable} from 'rxjs';
|
||||
import {ApiService} from '../../../service/api.service';
|
||||
import {AlertController, LoadingController} from '@ionic/angular';
|
||||
|
||||
@Component({
|
||||
selector: 'editor-code',
|
||||
templateUrl: './code.component.html',
|
||||
styleUrls: ['./code.component.scss'],
|
||||
})
|
||||
export class CodeComponent implements OnInit {
|
||||
@Input() hostRecord: HostRecord;
|
||||
@Output() hostRecordChange = new EventEmitter<HostRecord>();
|
||||
@Output() requestParentSave = new EventEmitter<CodeComponent>();
|
||||
@Output() requestParentDelete = new EventEmitter<CodeComponent>();
|
||||
@ViewChild('theEditor', {static: false}) theEditor;
|
||||
|
||||
public dirty = false;
|
||||
public pendingSetup = true;
|
||||
protected dbRecord: any = {};
|
||||
|
||||
public languageOptions: Array<string> = [
|
||||
'ABAP',
|
||||
'AES',
|
||||
'Apex',
|
||||
'AZCLI',
|
||||
'Bat',
|
||||
'C',
|
||||
'Cameligo',
|
||||
'Clojure',
|
||||
'CoffeeScript',
|
||||
'Cpp',
|
||||
'Csharp',
|
||||
'CSP',
|
||||
'CSS',
|
||||
'Dockerfile',
|
||||
'Fsharp',
|
||||
'Go',
|
||||
'GraphQL',
|
||||
'Handlebars',
|
||||
'HTML',
|
||||
'INI',
|
||||
'Java',
|
||||
'JavaScript',
|
||||
'JSON',
|
||||
'Kotlin',
|
||||
'LeSS',
|
||||
'Lua',
|
||||
'Markdown',
|
||||
'MiPS',
|
||||
'MSDAX',
|
||||
'MySQL',
|
||||
'Objective-C',
|
||||
'Pascal',
|
||||
'Pascaligo',
|
||||
'Perl',
|
||||
'pgSQL',
|
||||
'PHP',
|
||||
'Plaintext',
|
||||
'Postiats',
|
||||
'PowerQuery',
|
||||
'PowerShell',
|
||||
'Pug',
|
||||
'Python',
|
||||
'R',
|
||||
'Razor',
|
||||
'Redis',
|
||||
'RedShift',
|
||||
'RestructuredText',
|
||||
'Ruby',
|
||||
'Rust',
|
||||
'SB',
|
||||
'Scheme',
|
||||
'SCSS',
|
||||
'Shell',
|
||||
'SOL',
|
||||
'SQL',
|
||||
'St',
|
||||
'Swift',
|
||||
'TCL',
|
||||
'Twig',
|
||||
'TypeScript',
|
||||
'VB',
|
||||
'XML',
|
||||
'YAML',
|
||||
];
|
||||
|
||||
public editorOptions = {
|
||||
language: 'javascript',
|
||||
uri: v4(),
|
||||
};
|
||||
public editorValue = '';
|
||||
|
||||
constructor(
|
||||
protected api: ApiService,
|
||||
protected loader: LoadingController,
|
||||
protected alerts: AlertController,
|
||||
) { }
|
||||
|
||||
ngOnInit() {
|
||||
this.loader.create({message: 'Loading code...'}).then(loader => {
|
||||
loader.present().then(() => {
|
||||
this.getInitObservable().subscribe(() => {
|
||||
this.editorOptions.language = this.dbRecord.language;
|
||||
this.onSelectChange(false);
|
||||
loader.dismiss();
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
getInitObservable(): Observable<any> {
|
||||
return new Observable<any>(sub => {
|
||||
if ( this.hostRecord && this.pendingSetup ) {
|
||||
if ( !this.hostRecord.Value ) {
|
||||
this.hostRecord.Value = {};
|
||||
}
|
||||
|
||||
if ( !this.hostRecord.Value.Value ) {
|
||||
this.api.post(`/code/${this.hostRecord.PageId}/${this.hostRecord.UUID}/create`).subscribe(res => {
|
||||
this.dbRecord = res.data;
|
||||
this.hostRecord.Value.Mode = 'code';
|
||||
this.hostRecord.Value.Value = res.data.UUID;
|
||||
this.hostRecord.value = res.data.UUID;
|
||||
this.hostRecordChange.emit(this.hostRecord);
|
||||
this.pendingSetup = false;
|
||||
sub.next(true);
|
||||
sub.complete();
|
||||
});
|
||||
} else {
|
||||
this.api.get(`/code/${this.hostRecord.PageId}/${this.hostRecord.UUID}/get/${this.hostRecord.Value.Value}`).subscribe(res => {
|
||||
this.dbRecord = res.data;
|
||||
this.editorValue = this.dbRecord.code;
|
||||
this.editorOptions.language = this.dbRecord.language;
|
||||
this.pendingSetup = false;
|
||||
sub.next(true);
|
||||
sub.complete();
|
||||
});
|
||||
}
|
||||
} else {
|
||||
this.pendingSetup = true;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
onSaveClick() {
|
||||
this.dbRecord.code = this.editorValue;
|
||||
this.dbRecord.language = this.editorOptions.language;
|
||||
this.api.post(`/code/${this.hostRecord.PageId}/${this.hostRecord.UUID}/set/${this.hostRecord.Value.Value}`, this.dbRecord)
|
||||
.subscribe(res => {
|
||||
this.dbRecord = res.data;
|
||||
this.editorOptions.language = this.dbRecord.language;
|
||||
this.editorValue = this.dbRecord.code;
|
||||
this.dirty = false;
|
||||
});
|
||||
}
|
||||
|
||||
async onDropClick() {
|
||||
const alert = await this.alerts.create({
|
||||
header: 'Are you sure?',
|
||||
message: `You are about to delete this code. This action cannot be undone.`,
|
||||
buttons: [
|
||||
{
|
||||
text: 'Keep It',
|
||||
role: 'cancel',
|
||||
},
|
||||
{
|
||||
text: 'Delete It',
|
||||
handler: async () => {
|
||||
this.api.post(`/code/${this.hostRecord.PageId}/${this.hostRecord.UUID}/delete/${this.hostRecord.Value.Value}`)
|
||||
.subscribe(res => {
|
||||
this.requestParentDelete.emit(this);
|
||||
});
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
await alert.present();
|
||||
}
|
||||
|
||||
public onEditorModelChange($event) {
|
||||
if ( this.editorValue !== this.dbRecord.code ) {
|
||||
this.dirty = true;
|
||||
}
|
||||
}
|
||||
|
||||
onSelectChange(updateDbRecord = true) {
|
||||
if ( updateDbRecord ) {
|
||||
this.dbRecord.language = this.editorOptions.language;
|
||||
}
|
||||
|
||||
this.editorOptions = {...this.editorOptions};
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Reference in new issue