94 lines
3.3 KiB
HTML
94 lines
3.3 KiB
HTML
<mat-card appearance="outlined">
|
|
<mat-card-header>
|
|
<mat-card-title>Add tutorial</mat-card-title>
|
|
</mat-card-header>
|
|
<mat-card-content >
|
|
<mat-form-field class="example-full-width">
|
|
<mat-label>Title</mat-label>
|
|
|
|
<input matInput required
|
|
[(ngModel)]="tutorial.title">
|
|
</mat-form-field>
|
|
<mat-form-field class="example-full-width">
|
|
<mat-label>Use title image</mat-label>
|
|
<img style="width: 120px; height: 120px" src="{{tutorial.titleimage}}" alt="">
|
|
<input matInput
|
|
[(ngModel)]="tutorial.titleimage">
|
|
</mat-form-field>
|
|
<button mat-raised-button color="primary" (click)="openSelectImageDialog('100ms', '5ms')">Select image</button>
|
|
<button mat-raised-button color="primary" (click)="openUploadImageDialog('100ms', '5ms')">Upload image</button>
|
|
<div class="example-full-width">
|
|
<mat-label>Description</mat-label>
|
|
<mat-tab-group>
|
|
<mat-tab label="Markdown text">
|
|
<div class="markdown-editor-container">
|
|
<div class="markdown-editor">
|
|
<form novalidate>
|
|
<angular-markdown-editor
|
|
textareaId="editor1"
|
|
[options]="editorOptions"
|
|
name="markdownText"
|
|
[(ngModel)]="tutorial.description"
|
|
(onFullscreenExit)="hidePreview()"
|
|
>
|
|
</angular-markdown-editor>
|
|
</form>
|
|
|
|
</div>
|
|
<markdown class="variable-binding" [data]="tutorial.description"></markdown>
|
|
</div>
|
|
</mat-tab>
|
|
<mat-tab label="Result">
|
|
<markdown class="preview" [data]="tutorial.description"></markdown>
|
|
</mat-tab>
|
|
<mat-tab label="Example">
|
|
<textarea class="variable-textarea" [(ngModel)]="markdown"></textarea>
|
|
<markdown class="variable-binding" [data]="markdown"></markdown>
|
|
</mat-tab>
|
|
</mat-tab-group>
|
|
</div>
|
|
<div class="example-full-width">
|
|
<mat-label>Body</mat-label>
|
|
<mat-tab-group>
|
|
<mat-tab label="Markdown text">
|
|
<div class="markdown-editor-container">
|
|
<div class="markdown-editor">
|
|
<form novalidate>
|
|
<angular-markdown-editor
|
|
textareaId="editor2"
|
|
[options]="editorOptions"
|
|
name="markdownText"
|
|
[(ngModel)]="tutorial.body"
|
|
(onFullscreenExit)="hidePreview()"
|
|
>
|
|
</angular-markdown-editor>
|
|
</form>
|
|
</div>
|
|
<markdown class="variable-binding" [data]="tutorial.body"></markdown>
|
|
</div>
|
|
|
|
</mat-tab>
|
|
<mat-tab label="Result">
|
|
<markdown class="preview" [data]="tutorial.body"></markdown>
|
|
</mat-tab>
|
|
<mat-tab label="Example">
|
|
<textarea class="variable-textarea" [(ngModel)]="markdown"></textarea>
|
|
<markdown class="variable-binding" [data]="markdown"></markdown>
|
|
</mat-tab>
|
|
</mat-tab-group>
|
|
</div>
|
|
|
|
</mat-card-content>
|
|
<mat-card-actions>
|
|
@if (submitted){
|
|
<div >
|
|
<h4>Tutorial was submitted successfully!</h4>
|
|
<button matButton (click)="newTutorial()">Add new tutorial</button>
|
|
</div>
|
|
} @else {
|
|
<button matButton (click)="saveTutorial()" >Save</button>
|
|
}
|
|
</mat-card-actions>
|
|
</mat-card>
|
|
|