Skip to content

Feature/ace switch error notify #34

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
wilhelmguo merged 3 commits into from
Nov 21, 2018
Merged

Feature/ace switch error notify #34

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
79f6c50
frontend: 必选init修改right时候的报错
BennieMeng Nov 20, 2018
6375da0
frontend: ace模板错误时候切换给出提示
BennieMeng Nov 20, 2018
674ebfb
frontend: 修改ace为内容为空时候可切换，输出结果都是空字符串
BennieMeng Nov 20, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 7 additions & 4 deletions src/frontend/src/app/shared/ace-editor/ace-editor-box/ace-editor-box.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,13 @@
<button style="margin-left: 10px" type="button" (click)="format()">
<clr-icon shape="view-list"></clr-icon>
</button>
<select class="ace-select" [disabled]="!isValid" name="aceMode" (change)="aceModeChange()" [(ngModel)]="aceMode">
<option value="ace/mode/json" selected>JSON</option>
<option value="ace/mode/yaml">YAML</option>
</select>
<div class="select-box">
<select class="ace-select" [disabled]="!isValid" name="aceMode" (change)="aceModeChange()" [(ngModel)]="aceMode">
<option value="ace/mode/json" selected>JSON</option>
<option value="ace/mode/yaml">YAML</option>
</select>
<div class="select-mask" *ngIf="!isValid" (click)="clickEvent()"></div>
</div>
</div>
<div style="position: relative;height: 500px" #editorElement></div>
</div>
12 changes: 12 additions & 0 deletions src/frontend/src/app/shared/ace-editor/ace-editor-box/ace-editor-box.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,3 +31,15 @@ div.aceeditor-menu {
width: 100%;
min-height: 535px;
}
.select-box{
display: inline-block;
position: relative;
.select-mask{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
}
}
27 changes: 19 additions & 8 deletions src/frontend/src/app/shared/ace-editor/ace-editor-box/ace-editor-box.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import * as ace from 'brace';
import 'brace/mode/json';
import 'brace/mode/yaml';
import * as YAML from 'js-yaml';
import {MessageHandlerService} from '../../message-handler/message-handler.service';

@Component({
selector: 'wayne-ace-editor-box',
Expand All @@ -22,7 +23,10 @@ export class AceEditorBoxComponent implements OnInit, OnDestroy {
aceEditorMsgSub: Subscription;
@Output() modalChange = new EventEmitter<any>();

constructor(public el: ElementRef, private aceEditorService: AceEditorService) {
constructor(
public el: ElementRef,
private aceEditorService: AceEditorService,
private messageHandle: MessageHandlerService) {
}

ngOnInit() {
Expand Down Expand Up @@ -85,12 +89,14 @@ export class AceEditorBoxComponent implements OnInit, OnDestroy {

aceModeChange() {
this.editor.getSession().setMode(this.aceMode);
if (this.aceMode == 'ace/mode/json') {
let obj = YAML.load(this.editor.getValue());
this.editor.setValue(JSON.stringify(obj, null, 2));
} else {
let obj = JSON.parse(this.editor.getValue());
this.editor.setValue(YAML.dump(obj));
if (this.editor.getValue().trim() !== '') {
if (this.aceMode == 'ace/mode/json') {
let obj = YAML.load(this.editor.getValue());
this.editor.setValue(JSON.stringify(obj, null, 2));
} else {
let obj = JSON.parse(this.editor.getValue());
this.editor.setValue(YAML.dump(obj));
}
}
localStorage.setItem('aceMode', this.aceMode);
}
Expand All @@ -112,12 +118,17 @@ export class AceEditorBoxComponent implements OnInit, OnDestroy {
if (this.aceMode == 'ace/mode/json') {
return this.editor.getValue();
} else {
return JSON.stringify(YAML.load(this.editor.getValue()));
return JSON.stringify(YAML.load(this.editor.getValue())) || '';
}
}

clickEvent() {
this.messageHandle.showError('请检查文本格式是否正确');
}

get isValid(): boolean {
try {
if (this.editor.getValue().trim() === '') return true;
if (this.aceMode == 'ace/mode/json') {
JSON.parse(this.editor.getValue())
} else {
Expand Down
4 changes: 3 additions & 1 deletion src/frontend/src/app/shared/global-message/message.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,9 @@ export class MessageComponent implements OnInit, OnDestroy {
message => {
const index = this.infoList.length;
message.state = 'show';
this.posiChange();
setTimeout(() => {
this.posiChange();
}, 0);
this.infoList.push(message);
this.timer[index] = setTimeout(() => {
this.close(index);
Expand Down
⚡