Commit 38200a85 authored by Chen Jiping's avatar Chen Jiping

feat:完成配置页面开发

parent 9f3a2900
...@@ -128,5 +128,8 @@ ...@@ -128,5 +128,8 @@
} }
} }
}, },
"defaultProject": "ng-template-generator" "defaultProject": "ng-template-generator",
} "cli": {
"analytics": "1a48a602-7be0-487b-a3bc-eb9ad1dc4a2f"
}
}
\ No newline at end of file
import { Obj } from "./ObjBean";
export class ExercisesBean extends Obj{
leftAnswer : AnswerBean;
rightAnswer : AnswerBean;
card : Obj;
}
export function getDefaultExercises(){
let exercises = new ExercisesBean();
exercises.leftAnswer = new AnswerBean();
exercises.rightAnswer = new AnswerBean();
exercises.card = new Obj();
return exercises;
}
export class LetterBean extends Obj{
backgroud:String;
isFill = '0';
}
export function getDefaultLetter(){
let letter = new LetterBean();
return letter;
}
export class AnswerBean extends Obj{
letterArr = [];
}
export class Obj{
/**音频材料 */
audioUrl: String;
/**图片材料 */
picUrl:String;
val : String;
}
\ No newline at end of file
import { Obj } from "./ObjBean";
export class TitleBean extends Obj{
part1 : String;
part2: String;
}
export function getDefaultTile(){
let title = new TitleBean();
title.part1 = "C";
title.part2 = "Read and point";
return title;
}
\ No newline at end of file
...@@ -6,3 +6,6 @@ ...@@ -6,3 +6,6 @@
height: 100%; height: 100%;
} }
.gridStyle {
width: '50%'
}
\ No newline at end of file
<div class="model-content"> <div class="model-content">
<div nz-row>
<div nz-col [nzSpan]="24">
<nz-form-item>
<nz-form-label [nzSpan]="2" nzFor="part1">标题1</nz-form-label>
<nz-form-control [nzSpan]="4">
<nz-input-group nzAddOnBefore="Part">
<input type="text" id="part1" nz-input [(ngModel)]="item.title.part1" (blur)="save()">
</nz-input-group>
</nz-form-control>
<nz-form-label [nzSpan]="2" nzFor="part2">标题2</nz-form-label>
<nz-form-control [nzSpan]="4">
<input nz-input type="text" id="part2" [(ngModel)]="item.title.part2" (blur)="save()">
</nz-form-control>
<nz-form-label [nzSpan]="2" nzFor="audioUrl">发音</nz-form-label>
<nz-form-control [nzSpan]="4">
<app-audio-recorder [audioUrl]="item.title.audioUrl" id="audioUrl"
(audioUploaded)="onAudioUploadSuccess($event, item.title, 'audioUrl')">
</app-audio-recorder>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="2" nzFor="audioUrl">听力材料</nz-form-label>
<nz-form-control [nzSpan]="4">
<app-audio-recorder id="item.audioUrl" [audioUrl]="item.audioUrl"
(audioUploaded)="onAudioUploadSuccess($event, item, 'audioUrl')">
</app-audio-recorder>
</nz-form-control>
</nz-form-item>
<nz-divider nzText="顶部字母" nzOrientation="left"></nz-divider>
<nz-form-item>
<nz-form-label [nzSpan]="2" nzFor="exercises">操作</nz-form-label>
<nz-form-control [nzSpan]="4">
<button nz-button nzType="dashed" [disabled]="item.letterArr.length == 4 ? true : false" class="add-btn"
id="add-btn" (click)="addLetterItem(item)">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>添加
</button>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-control [nzOffset]="2" [nzSpan]="15">
<nz-table #lettersTable nzBordered [nzData]="item.letterArr" [nzShowPagination]=false>
<thead>
<tr>
<th>序号</th>
<th>字母组合</th>
<th>音频</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of lettersTable.data;let j = index">
<td>{{ j+1 }}</td>
<td><input type="text" nz-input placeholder="max length is 5" [(ngModel)]="row.val" (blur)="save()"
maxlength="5"></td>
<td>
<app-audio-recorder [audioUrl]="row.audioUrl"
(audioUploaded)="onAudioUploadSuccess($event, row, 'audioUrl')">
</app-audio-recorder>
</td>
<td>
<a (click)="delLetter(item, j)">delete</a>
</td>
</tr>
</tbody>
</nz-table>
</nz-form-control>
</nz-form-item>
</div>
</div>
<!--练习题-->
<div nz-row>
<div nz-col [nzSpan]="24">
<div *ngFor="let exercises of item.exercisesArr; let i = index" style="padding: 0.5vw;">
<nz-divider nzText="卡片-{{i + 1}}" nzOrientation="left"></nz-divider>
<nz-form-item>
<nz-form-label [nzSpan]="2">图片</nz-form-label>
<nz-form-control [nzSpan]="4">
<app-upload-image-with-preview style="width: 100%" [picUrl]="exercises.picUrl"
(imageUploaded)="onImageUploadSuccess($event, exercises, 'picUrl')">
</app-upload-image-with-preview>
</nz-form-control>
</nz-form-item>
<nz-card nzTitle="卡片配置">
<div nz-card-grid [ngStyle]="gridStyle">
<nz-divider nzText="左边卡片"></nz-divider>
<nz-form-item>
<nz-form-label [nzSpan]="4">图片</nz-form-label>
<nz-form-control [nzSpan]="8">
<app-upload-image-with-preview style="width: 100%" [picUrl]="exercises.leftAnswer.picUrl"
(imageUploaded)="onImageUploadSuccess($event, exercises.leftAnswer, 'picUrl')">
</app-upload-image-with-preview>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="4">音频</nz-form-label>
<nz-form-control [nzSpan]="8">
<app-audio-recorder [audioUrl]="exercises.leftAnswer.audioUrl"
(audioUploaded)="onAudioUploadSuccess($event, exercises.leftAnswer, 'audioUrl')">
</app-audio-recorder>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="4">单词拆分</nz-form-label>
<nz-form-control [nzSpan]="8">
<button nz-button nzType="dashed" class="add-btn" (click)="addLetterItem(exercises.leftAnswer)">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>添加
</button>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="4">单词预览</nz-form-label>
<nz-form-control [nzSpan]="8">
<span nz-text>
<label *ngFor="let letter of exercises.leftAnswer.letterArr;let j = index"
[ngStyle]="{'color':letter.isFill=='1'?'#c8161d':'#000000','font-size':'40px'}">{{letter.val}}</label>
</span>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-control [nzOffset]="4" [nzSpan]="20">
<nz-table #lettersTable nzBordered nzTitle="按照单词着色需要进行拆分填写" [nzData]="exercises.leftAnswer.letterArr"
[nzShowPagination]=false>
<thead>
<tr>
<th>序号</th>
<th>字母组合</th>
<th>是否着色</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of lettersTable.data;let j = index">
<td>{{ j+1 }}</td>
<td><input type="text" nz-input placeholder="请录入字母(组合)" [(ngModel)]="row.val" (blur)="save()">
</td>
<td>
<nz-radio-group [(ngModel)]="row.isFill" (ngModelChange)="save()">
<label nz-radio nzValue="1"></label>
<label nz-radio nzValue="0"></label>
</nz-radio-group>
</td>
<td>
<a (click)="delLetter(exercises.leftAnswer,j)">delete</a>
</td>
</tr>
</tbody>
</nz-table>
</nz-form-control>
</nz-form-item>
</div>
<div style="position: absolute; left: 200px; top: 100px; width: 800px;"> <div nz-card-grid [ngStyle]="gridStyle">
<nz-divider nzText="右边卡片"></nz-divider>
<input type="text" nz-input [(ngModel)]="item.text" (blur)="save()"> <nz-form-item>
<nz-form-label [nzSpan]="4">图片</nz-form-label>
<app-upload-image-with-preview <nz-form-control [nzSpan]="8">
[picUrl]="item.pic_url" <app-upload-image-with-preview style="width: 100%" [picUrl]="exercises.rightAnswer.picUrl"
(imageUploaded)="onImageUploadSuccess($event, 'pic_url')" (imageUploaded)="onImageUploadSuccess($event, exercises.rightAnswer, 'picUrl')">
></app-upload-image-with-preview> </app-upload-image-with-preview>
</nz-form-control>
<app-audio-recorder </nz-form-item>
[audioUrl]="item.audio_url" <nz-form-item>
(audioUploaded)="onAudioUploadSuccess($event, 'audio_url')" <nz-form-label [nzSpan]="4">音频</nz-form-label>
></app-audio-recorder> <nz-form-control [nzSpan]="8">
<app-custom-hot-zone></app-custom-hot-zone> <app-audio-recorder [audioUrl]="exercises.rightAnswer.audioUrl"
<app-upload-video></app-upload-video> (audioUploaded)="onAudioUploadSuccess($event, exercises.rightAnswer, 'audioUrl')">
<app-lesson-title-config></app-lesson-title-config> </app-audio-recorder>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="4">单词拆分</nz-form-label>
<nz-form-control [nzSpan]="8">
<button nz-button nzType="dashed" class="add-btn" (click)="addLetterItem(exercises.rightAnswer)">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>添加
</button>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="4">单词预览</nz-form-label>
<nz-form-control [nzSpan]="8">
<span nz-text>
<label *ngFor="let letter of exercises.rightAnswer.letterArr;let j = index"
[ngStyle]="{'color':letter.isFill=='1'?'#c8161d':'#000000','font-size':'40px'}">{{letter.val}}</label>
</span>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-control [nzOffset]="4" [nzSpan]="20">
<nz-table #letters2Table nzBordered nzTitle="按照单词填空需要进行拆分填写" [nzData]="exercises.rightAnswer.letterArr"
[nzShowPagination]=false>
<thead>
<tr>
<th>序号</th>
<th>字母组合</th>
<th>是否着色</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of letters2Table.data;let j = index">
<td>{{ j+1 }}</td>
<td><input type="text" nz-input placeholder="请录入字母(组合)" [(ngModel)]="row.val" (blur)="save()">
</td>
<td>
<nz-radio-group [(ngModel)]="row.isFill" (ngModelChange)="save()">
<label nz-radio nzValue="1"></label>
<label nz-radio nzValue="0"></label>
</nz-radio-group>
</td>
<td>
<a (click)="delLetter(exercises.rightAnswer, j)">delete</a>
</td>
</tr>
</tbody>
</nz-table>
</nz-form-control>
</nz-form-item>
</div>
<div nz-card-grid [ngStyle]="gridStyle">
<nz-divider nzText="卡片背部"></nz-divider>
<nz-form-item>
<nz-form-label [nzSpan]="4">图片</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-upload-image-with-preview style="width: 100%" [picUrl]="exercises.card.picUrl"
(imageUploaded)="onImageUploadSuccess($event, exercises.card, 'picUrl')">
</app-upload-image-with-preview>
</nz-form-control>
<nz-form-label [nzSpan]="4">音频</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-audio-recorder [audioUrl]="exercises.card.audioUrl"
(audioUploaded)="onAudioUploadSuccess($event, exercises.card, 'audioUrl')">
</app-audio-recorder>
</nz-form-control>
</nz-form-item>
</div>
</nz-card>
</div>
</div>
</div> </div>
</div>
\ No newline at end of file
</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';
import { getDefaultExercises, getDefaultLetter } from '../bean/Exercises';
import { getDefaultTile } from '../bean/TitleBean';
...@@ -10,10 +12,13 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap ...@@ -10,10 +12,13 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap
export class FormComponent implements OnInit, OnChanges, OnDestroy { export class FormComponent implements OnInit, OnChanges, OnDestroy {
// 储存数据用 // 储存数据用
saveKey = "test_0011"; saveKey = "YM5-10";
// 储存对象 // 储存对象
item; item;
gridStyle = {
width: '50%'
};
constructor(private appRef: ApplicationRef,private changeDetectorRef: ChangeDetectorRef) { constructor(private appRef: ApplicationRef,private changeDetectorRef: ChangeDetectorRef) {
...@@ -24,6 +29,10 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -24,6 +29,10 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.item = {}; this.item = {};
this.item.title = getDefaultTile();
this.item.letterArr = [];
// 获取存储的数据 // 获取存储的数据
(<any> window).courseware.getData((data) => { (<any> window).courseware.getData((data) => {
...@@ -50,27 +59,44 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -50,27 +59,44 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
init() { init() {
if (!this.item.title) {
this.item.title = getDefaultTile();
}
if (!this.item.letterArr) {
this.item.letterArr = [];
}
if (!this.item.exercisesArr) {
this.item.exercisesArr = [];
}
for (let i = this.item.exercisesArr.length; i < 4; ++i) {
let exercises = getDefaultExercises();
this.item.exercisesArr.push(exercises);
}
} }
/** /**
* 储存图片数据 * 储存图片数据
* @param e * @param e
*/ */
onImageUploadSuccess(e, key) { onImageUploadSuccess(e, item, key) {
this.item[key] = e.url; item[key] = e.url;
this.save(); this.save();
} }
/** /**
* 储存音频数据 * 储存音频数据
* @param e * @param e
*/ */
onAudioUploadSuccess(e, key) { onAudioUploadSuccess(e, item, key) {
this.item[key] = e.url; item[key] = e.url;
this.save(); this.save();
} }
...@@ -93,5 +119,22 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -93,5 +119,22 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}, 1); }, 1);
} }
addLetterItem(item) {
let letter = getDefaultLetter();
item.letterArr.push(letter);
item.letterArr = [...item.letterArr];
this.save();
}
delLetter(item, index) {
if (index !== -1) {
item.letterArr.splice(index, 1);
item.letterArr = [...item.letterArr];
this.save();
}
}
} }
...@@ -17,3 +17,20 @@ ...@@ -17,3 +17,20 @@
src: url("../../assets/font/BRLNSDB.TTF") ; src: url("../../assets/font/BRLNSDB.TTF") ;
} }
@font-face
{
font-family: 'tt0142m';
src: url("../../assets/font/tt0142m.ttf") ;
}
@font-face
{
font-family: 'GOTHICB';
src: url("../../assets/font/GOTHICB.TTF") ;
}
@font-face
{
font-family: 'MMB';
src: url("../../assets/font/MMTextBook-Bold.otf") ;
}
\ No newline at end of file
...@@ -57,17 +57,10 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -57,17 +57,10 @@ export class PlayComponent implements OnInit, OnDestroy {
canvasLeft; canvasLeft;
canvasTop; canvasTop;
saveKey = 'test_0011'; saveKey = 'YM5-10';
btnLeft;
btnRight;
pic1;
pic2;
canTouch = true; canTouch = true;
curPic;
@HostListener('window:resize', ['$event']) @HostListener('window:resize', ['$event'])
onResize(event) { onResize(event) {
...@@ -341,7 +334,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -341,7 +334,7 @@ export class PlayComponent implements OnInit, OnDestroy {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const audio = new Audio(); const audio = new Audio();
audio.oncanplay = (a) => { audio.oncanplay = (a) => {
resolve(); resolve(a);
}; };
audio.onerror = () => { audio.onerror = () => {
reject(); reject();
...@@ -443,10 +436,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -443,10 +436,7 @@ export class PlayComponent implements OnInit, OnDestroy {
*/ */
initDefaultData() { initDefaultData() {
if (!this.data.pic_url) {
this.data.pic_url = 'assets/play/default/pic.jpg';
this.data.pic_url_2 = 'assets/play/default/pic.jpg';
}
} }
...@@ -455,8 +445,6 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -455,8 +445,6 @@ export class PlayComponent implements OnInit, OnDestroy {
*/ */
initImg() { initImg() {
this.addUrlToImages(this.data.pic_url);
this.addUrlToImages(this.data.pic_url_2);
} }
...@@ -465,13 +453,15 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -465,13 +453,15 @@ export class PlayComponent implements OnInit, OnDestroy {
*/ */
initAudio() { initAudio() {
// 音频资源
this.addUrlToAudioObj(this.data.audio_url);
this.addUrlToAudioObj(this.data.audio_url_2);
// 音效 // 音效
this.addUrlToAudioObj('click', this.rawAudios.get('click'), 0.3); this.addUrlToAudioObj('click', this.rawAudios.get('click'), 0.3);
this.addUrlToAudioObj('open', this.rawAudios.get('open'));
this.addUrlToAudioObj('turn', this.rawAudios.get('turn'));
} }
...@@ -504,127 +494,13 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -504,127 +494,13 @@ export class PlayComponent implements OnInit, OnDestroy {
initView() { initView() {
this.initPic();
this.initBottomPart();
}
initBottomPart() {
const btnLeft = new MySprite();
btnLeft.init(this.images.get('btn_left'));
btnLeft.x = this.canvasWidth - 150 * this.mapScale;
btnLeft.y = this.canvasHeight - 100 * this.mapScale;
btnLeft.setScaleXY(this.mapScale);
this.renderArr.push(btnLeft);
this.btnLeft = btnLeft;
const btnRight = new MySprite();
btnRight.init(this.images.get('btn_right'));
btnRight.x = this.canvasWidth - 50 * this.mapScale;
btnRight.y = this.canvasHeight - 100 * this.mapScale;
btnRight.setScaleXY(this.mapScale);
this.renderArr.push(btnRight);
this.btnRight = btnRight;
} }
initPic() {
const maxW = this.canvasWidth * 0.7;
const pic1 = new MySprite();
pic1.init(this.images.get(this.data.pic_url));
pic1.x = this.canvasWidth / 2;
pic1.y = this.canvasHeight / 2;
pic1.setScaleXY(maxW / pic1.width);
this.renderArr.push(pic1);
this.pic1 = pic1;
const label1 = new Label();
label1.text = this.data.text;
label1.textAlign = 'center';
label1.fontSize = 50;
label1.fontName = 'BRLNSDB';
label1.fontColor = '#ffffff';
pic1.addChild(label1);
const pic2 = new MySprite();
pic2.init(this.images.get(this.data.pic_url_2));
pic2.x = this.canvasWidth / 2 + this.canvasWidth;
pic2.y = this.canvasHeight / 2;
pic2.setScaleXY(maxW / pic2.width);
this.renderArr.push(pic2);
this.pic2 = pic2;
this.curPic = pic1;
}
btnLeftClicked() {
this.lastPage();
}
btnRightClicked() {
this.nextPage();
}
lastPage() {
if (this.curPic == this.pic1) {
return;
}
this.canTouch = false;
const moveLen = this.canvasWidth;
tweenChange(this.pic1, {x: this.pic1.x + moveLen}, 1);
tweenChange(this.pic2, {x: this.pic2.x + moveLen}, 1, () => {
this.canTouch = true;
this.curPic = this.pic1;
});
}
nextPage() {
if (this.curPic == this.pic2) {
return;
}
this.canTouch = false;
const moveLen = this.canvasWidth;
tweenChange(this.pic1, {x: this.pic1.x - moveLen}, 1);
tweenChange(this.pic2, {x: this.pic2.x - moveLen}, 1, () => {
this.canTouch = true;
this.curPic = this.pic2;
});
}
pic1Clicked() {
this.playAudio(this.data.audio_url);
}
pic2Clicked() {
this.playAudio(this.data.audio_url_2);
}
...@@ -636,26 +512,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -636,26 +512,7 @@ export class PlayComponent implements OnInit, OnDestroy {
return; return;
} }
if ( this.checkClickTarget(this.btnLeft) ) {
this.btnLeftClicked();
return;
}
if ( this.checkClickTarget(this.btnRight) ) {
this.btnRightClicked();
return;
}
if ( this.checkClickTarget(this.pic1) ) {
this.pic1Clicked();
return;
}
if ( this.checkClickTarget(this.pic2) ) {
this.pic2Clicked();
return;
}
} }
mapMove(event) { mapMove(event) {
......
const res = [ const res = [
// ['bg', "assets/play/bg.jpg"], ['play', "assets/play/play.png"],
['btn_left', "assets/play/btn_left.png"], ['stop', "assets/play/stop.png"],
['btn_right', "assets/play/btn_right.png"],
// ['text_bg', "assets/play/text_bg.png"],
]; ];
...@@ -12,7 +10,8 @@ const res = [ ...@@ -12,7 +10,8 @@ const res = [
const resAudio = [ const resAudio = [
['click', "assets/play/music/click.mp3"], ['click', "assets/play/music/click.mp3"],
['open', "assets/play/music/open.mp3"],
['turn', "assets/play/music/turn.mp3"],
]; ];
export {res, resAudio}; export {res, resAudio};
This source diff could not be displayed because it is too large. You can view the blob instead.
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