Commit 8f05e337 authored by 范雪寒's avatar 范雪寒

feat: 表单页完成

parent 9f3a2900
......@@ -128,5 +128,8 @@
}
}
},
"defaultProject": "ng-template-generator"
}
"defaultProject": "ng-template-generator",
"cli": {
"analytics": false
}
}
\ No newline at end of file
This diff is collapsed.
......@@ -33,9 +33,8 @@
<div *ngIf="audioUrl && needRemove; then truthyTemplate else falsyTemplate"></div>
<ng-template #truthyTemplate >
<div class="btn-delete" (click)="onBtnDeleteAudio()">
<fa-icon icon="close"></fa-icon>
<fa-icon icon="times"></fa-icon>
</div>
</ng-template>
......@@ -58,4 +57,5 @@
<fa-icon [icon]="playIcon"></fa-icon>
</div>
</div>
</div>
......@@ -26,7 +26,7 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
uploadData;
@Input()
needRemove = false;
needRemove = true;
@Input()
audioItem: any = null;
......
......@@ -6,3 +6,10 @@
height: 100%;
}
.border {
border-radius: 20px;
border-style: dashed;
padding: 20px;
margin: 20px;
}
\ No newline at end of file
<div class="model-content">
<div style="position: absolute; left: 200px; top: 100px; width: 800px;">
<input type="text" nz-input [(ngModel)]="item.text" (blur)="save()">
<app-upload-image-with-preview
[picUrl]="item.pic_url"
(imageUploaded)="onImageUploadSuccess($event, 'pic_url')"
></app-upload-image-with-preview>
<app-audio-recorder
[audioUrl]="item.audio_url"
(audioUploaded)="onAudioUploadSuccess($event, 'audio_url')"
></app-audio-recorder>
<app-custom-hot-zone></app-custom-hot-zone>
<app-upload-video></app-upload-video>
<app-lesson-title-config></app-lesson-title-config>
<div class="border" style="width: 750px; height: 190px;">
<span style="float: left; height: 30px; font-size: 18px;">标题字母:</span>
<input style="float: left; width: 50px;" type="text" nz-input [(ngModel)]="item.titleLetter" (blur)="save()">
<span style="float: left;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
<span style="float: left; height: 30px; font-size: 18px;">字母音频:</span>
<app-audio-recorder style="float: left;" [audioUrl]="item.titleLetterAudio"
(audioUploaded)="onTitleLetterAudioUploadSuccess($event)">
</app-audio-recorder>
<br><br>
<span style="float: left; height: 30px; font-size: 18px;">标题:</span>
<input style="float: left; width: 250px;" type="text" nz-input [(ngModel)]="item.title" (blur)="save()">
<span style="float: left;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
<span style="float: left; height: 30px; font-size: 18px;">标题音频:</span>
<app-audio-recorder style="float: left;" [audioUrl]="item.titleAudio"
(audioUploaded)="onTitleAudioUploadSuccess($event)">
</app-audio-recorder>
<br><br>
<span style="float: left; height: 30px; font-size: 18px;">整体音频:</span>
<app-audio-recorder style="float: left;" [audioUrl]="item.totalAudio"
(audioUploaded)="onTotalAudioUploadSuccess($event)">
</app-audio-recorder>
</div>
<div class="border" style="width: 750px; height: 190px;">
<span style="float: left; height: 30px; font-size: 18px;">中间音频:</span>
<app-audio-recorder style="float: left;" [audioUrl]="item.middleImgAudio"
(audioUploaded)="onMiddleAudioUploadSuccess($event)">
</app-audio-recorder>
<br><br>
<span style="float: left; height: 30px; font-size: 18px;">中间图片:</span>
<app-upload-image-with-preview style="float: left; width: 200px; height: 140px;" [picUrl]="item.middleImg"
(imageUploaded)="onMiddleImageUploadSuccess($event)">
</app-upload-image-with-preview>
</div>
<div *ngFor="let group of item.group; let i = index">
<div class="border" style="width: 750px;">
<span style="float: left; height: 30px; font-size: 18px;">{{sideByIndex[i]}}:</span>
<br><br>
<div *ngFor="let line of group; let j = index">
<div style="width: 660px; float: left;" class="border">
<div style="float: left;">
<span style="float: left; height: 30px; font-size: 18px;">图片:</span>
<div style="float: left; width: 200px">
<app-upload-image-with-preview style="width: 200px;" [picUrl]="line.img"
(imageUploaded)="onWordImgUploadSuccess($event, i, j)">
</app-upload-image-with-preview>
</div>
<br><br>
<span style="float: left; height: 30px; font-size: 18px;">音频:</span>
<app-audio-recorder style="float: left;" [audioUrl]="line.audio"
(audioUploaded)="onMiddleAudioUploadSuccess($event)">
</app-audio-recorder>
</div>
<span style="float: none;">&nbsp;</span>
<button nz-button class="" style="float: right; color: red;" (click)="removeLine(i, j)">删除</button>
<span style="float: left; height: 30px; font-size: 18px;">单词:</span>
<input style="float: left; width: 150px;" type="text" nz-input [(ngModel)]="line.word"
(blur)="onWordTyped(i, j)">
<br><br>
<div style="float: left; margin-left: 20px;">&nbsp;</div>
<div *ngFor="let group of line.groups; let g = index"
style="float: left; border-style: dotted; border-width: 1px; border-color: black;">
<div *ngFor="let letterData of line.letterDataList; let k = index" style="float: left;">
<div *ngIf="letterData.group==g">
<div style="float: left;">
<div>
<a *ngIf="letterData.line && letterData.point"
[style]="'float: left; font-size: 42px; font-family: FuturaBT-Bold; color:'+letterData.color+'; border-bottom-width: 3px; border-bottom-color: '+letterData.color+'; border-bottom-style: solid;'">'</a>
<a *ngIf="!letterData.line && letterData.point"
[style]="'float: left; font-size: 42px; font-family: FuturaBT-Bold; color:'+letterData.color+';'">'</a>
<a *ngIf="letterData.line"
[style]="'float: left; font-size: 42px; font-family: FuturaBT-Bold; color:'+letterData.color+'; border-bottom-width: 3px; border-bottom-color: '+letterData.color+'; border-bottom-style: solid;'"
(click)="onLetterClicked(i, j, k)">{{letterData.letter}}</a>
<a *ngIf="!letterData.line"
[style]="'float: left; font-size: 42px; font-family: FuturaBT-Bold; color:'+letterData.color+';'"
(click)="onLetterClicked(i, j, k)">{{letterData.letter}}</a>
</div>
</div>
<br><br><br><br>
<div style="text-align: center;">
<a *ngIf="letterData.line"
[style]="'float: left; margin-top: -15px; font-size: 16px; font-family: FuturaBT-Bold; color:'+letterData.color+';'">
{{letterData.number == 0 ? '' : letterData.number}}
</a>
<span style="float: none;">&nbsp;</span>
</div>
<span style="float: none;">&nbsp;</span>
<div>
<span *ngIf="letterData.showOptions">
<button style="float: left; color: black;" (click)="changeLetterBlack(i, j, k)">黑色</button>
<button style="float: left; color: red;" (click)="changeLetterRed(i, j, k)">红色</button>
<button style="float: left; color: grey;" (click)="changeLetterGrey(i, j, k)">灰色</button>
<br>
<button style="float: left; " (click)="changeLetterLine(i, j, k)">下划线</button>
<button style="float: left; " (click)="changeLetterLineNumber(i, j, k, 1)">1</button>
<button style="float: left; " (click)="changeLetterLineNumber(i, j, k, 2)">2</button>
<button style="float: left; " (click)="changeLetterLineNumber(i, j, k, 3)">3</button>
<br>
<button style="float: left; " (click)="changeLetterPoint(i, j, k)">重音</button>
<button style="float: left; " (click)="changeLetterGroup(i, j, k)">分组</button>
</span>
</div>
</div>
</div>
</div>
<span style="float: none;">&nbsp;</span>
</div>
</div>
</div>
\ No newline at end of file
<button style="width: 660px; height: 50px; margin: 20px;" nz-button nzType="dashed" class="add-btn"
(click)="createLine(i)">
Add Word
</button>
<span style="float: none;">&nbsp;</span>
</div>
</div>
</div>
\ No newline at end of file
import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef, ChangeDetectorRef} from '@angular/core';
import { Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef, ChangeDetectorRef } from '@angular/core';
......@@ -10,22 +10,47 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap
export class FormComponent implements OnInit, OnChanges, OnDestroy {
// 储存数据用
saveKey = "test_0011";
saveKey = "test_00111";
// 储存对象
item;
sideByIndex = ['左上', '右上', '左下', '右下'];
constructor(private appRef: ApplicationRef,private changeDetectorRef: ChangeDetectorRef) {
constructor(private appRef: ApplicationRef, private changeDetectorRef: ChangeDetectorRef) {
}
createLine(groupIdx) {
this.item.group[groupIdx].push({
word: '',
img: '',
audio: '',
groups: [0],
letterDataList: []
});
this.save();
}
removeLine(groupIdx, lineIdx) {
this.item.group[groupIdx].splice(lineIdx, 1);
this.save();
}
ngOnInit() {
this.item = {};
this.item = {
title: '',
titleAudio: '',
titleLetter: '',
titleLetterAudio: '',
middleImg: '',
middleImgAudio: '',
totalAudio: '',
group: [[], [], [], []]
};
// 获取存储的数据
(<any> window).courseware.getData((data) => {
(<any>window).courseware.getData((data) => {
if (data) {
this.item = data;
......@@ -47,21 +72,143 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
ngOnDestroy() {
}
onTitleLetterAudioUploadSuccess(event) {
this.item.titleLetterAudio = event.url;
this.save();
}
onTitleAudioUploadSuccess(event) {
this.item.titleAudio = event.url;
this.save();
}
onTotalAudioUploadSuccess(event) {
this.item.totalAudio = event.url;
this.save();
}
onMiddleAudioUploadSuccess(event) {
this.item.middleImgAudio = event.url;
this.save();
}
init() {
}
onWordTyped(groupIdx, lineIdx) {
const lineData = this.item.group[groupIdx][lineIdx];
if (lineData.word == lineData.letterDataList.map(data => data.letter).join('')) {
return;
}
lineData.letterDataList = lineData.word.split('').map(letter => {
return {
letter: letter,
color: '#000000', // 颜色
line: false, // 下划线
number: 0, // 下划线下方的数字
group: 0, // 分组
point: false // 重音符号
}
});
this.save();
}
onLetterClicked(groupIdx, lineIdx, letterIdx) {
const data = this.item.group[groupIdx][lineIdx].letterDataList[letterIdx];
if (data.showOptions) {
data.showOptions = false;
} else {
this.item.group.forEach(group => {
group.forEach(line => {
line.letterDataList.forEach(letterData => {
letterData.showOptions = false;
});
});
});
data.showOptions = true;
}
this.save();
}
changeLetterBlack(groupIdx, lineIdx, letterIdx) {
this.item.group[groupIdx][lineIdx].letterDataList[letterIdx].color = '#000000';
this.save();
}
changeLetterRed(groupIdx, lineIdx, letterIdx) {
this.item.group[groupIdx][lineIdx].letterDataList[letterIdx].color = '#FF0000';
this.save();
}
changeLetterGrey(groupIdx, lineIdx, letterIdx) {
this.item.group[groupIdx][lineIdx].letterDataList[letterIdx].color = '#888888';
this.save();
}
changeLetterLine(groupIdx, lineIdx, letterIdx) {
const data = this.item.group[groupIdx][lineIdx].letterDataList[letterIdx];
data.line = !data.line;
data.number = 0;
this.save();
}
changeLetterLineNumber(groupIdx, lineIdx, letterIdx, number) {
const data = this.item.group[groupIdx][lineIdx].letterDataList[letterIdx];
data.line = true;
data.number = number;
this.save();
}
changeLetterPoint(groupIdx, lineIdx, letterIdx) {
const data = this.item.group[groupIdx][lineIdx].letterDataList[letterIdx];
data.point = !data.point;
this.save();
}
changeLetterGroup(groupIdx, lineIdx, letterIdx) {
if (letterIdx == 0) {
return;
}
const letterDataList = this.item.group[groupIdx][lineIdx].letterDataList;
const data = letterDataList[letterIdx];
const dataBefore = letterDataList[letterIdx - 1];
let step = 1;
if (dataBefore.group != data.group) {
step = -1;
}
let maxGroup = 0;
for (let i = letterIdx; i < letterDataList.length; i++) {
letterDataList[i].group += step;
maxGroup = Math.max(letterDataList[i].group, maxGroup)
}
this.item.group[groupIdx][lineIdx].groups = new Array(maxGroup + 1).fill('0');
console.log('汪汪汪')
this.save();
}
/**
* 储存图片数据
* @param e
*/
onImageUploadSuccess(e, key) {
this.item[key] = e.url;
this.save();
}
onMiddleImageUploadSuccess(e) {
this.item.middleImg = e.url;
this.save();
}
this.item[key] = e.url;
this.save();
onWordImgUploadSuccess(e, groupIdx, lineIdx) {
this.item.group[groupIdx][lineIdx].img = e.url;
this.save();
}
/**
......@@ -80,7 +227,8 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
* 储存数据
*/
save() {
(<any> window).courseware.setData(this.item, null, this.saveKey);
(<any>window).courseware.setData(this.item, null, this.saveKey);
console.log(JSON.stringify(this.item));
this.refresh();
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment