Commit e88111f1 authored by Chen Jiping's avatar Chen Jiping

perf:完成配置功能开发

parent 8a51c964
...@@ -128,5 +128,8 @@ ...@@ -128,5 +128,8 @@
} }
} }
}, },
"defaultProject": "ng-template-generator" "defaultProject": "ng-template-generator",
} "cli": {
"analytics": "1b5d43b5-ad03-49bb-856d-827aec6c8103"
}
}
\ No newline at end of file
import { Obj } from './ObjBean';
export class ExercisesBean extends Obj {
/**L-左边答案, R-右边答案 */
right: String;
leftAnswer : AnswerBean;
rightAnswer : AnswerBean;
}
export class AnswerBean extends Obj {
}
export function getDefaultExercises(){
const exercises = new ExercisesBean();
exercises.right = "L";
exercises.leftAnswer = getDefaultAnswer();
exercises.rightAnswer = getDefaultAnswer();
return exercises;
}
export function getDefaultAnswer(){
const answer = new AnswerBean();
return answer;
}
\ No newline at end of file
export class Obj{
/**音频材料 */
audioUrl: String;
/**图片材料 */
picUrl:String;
val : String;
}
\ No newline at end of file
<div class="model-content"> <div class="model-content">
<div nz-row>
<div nz-col nzOffset='4'>
<h1 nz-title>课程练习内容编辑</h1>
</div>
</div>
<div nz-row>
<div nz-col [nzSpan]="20" nzOffset="2">
<div id='listen-anchor'>
<nz-divider nzText="练习题" nzOrientation="left"></nz-divider>
<nz-form-item>
<nz-form-label [nzSpan]="6" nzFor="exercises">操作</nz-form-label>
<nz-form-control [nzSpan]="6">
<button nz-button nzType="dashed" class="add-btn" id="add-btn" (click)="addExercises(item, 'exercisesArr')">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>添加
</button>
</nz-form-control>
</nz-form-item>
</div>
<div>
<div *ngFor="let data of item.exercisesArr;let j = index" class="card-item" style="padding: 0.5vw;">
<div class="border">
<nz-divider nzText="内容-{{j+1}}" nzOrientation="left"></nz-divider>
<nz-form-item>
<button style="margin: 10px;" nz-button nzType="danger"
(click)="deleteExercises(item, 'exercisesArr', j)">
<span>删除</span>
</button>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="6" nzFor="{{j}}.audioUrl">音频</nz-form-label>
<nz-form-control [nzSpan]="12">
<app-audio-recorder id="{{j}}.audioUrl" [audioUrl]="data.audioUrl"
(audioUploaded)="onAudioUploadSuccess($event, data, 'audioUrl')">
</app-audio-recorder>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="3" nzFor="{{j}}.answerIndex">正确答案</nz-form-label>
<nz-form-control [nzSpan]="6">
<nz-radio-group [(ngModel)]="data.right" (ngModelChange)="save()">
<label nz-radio nzValue="L">答案1</label>
<label nz-radio nzValue="R">答案2</label>
</nz-radio-group>
</nz-form-control>
</nz-form-item>
<div nz-col [nzSpan]="12">
<nz-card nzTitle="备选答案1">
<nz-form-item>
<nz-form-label [nzSpan]="6" nzFor="{{j}}.leftAnswer.audioUrl">音频</nz-form-label>
<nz-form-control [nzSpan]="12">
<app-audio-recorder id="{{j}}.leftAnswer.audioUrl" [audioUrl]="data.leftAnswer.audioUrl"
(audioUploaded)="onAudioUploadSuccess($event, data.leftAnswer, 'audioUrl')">
</app-audio-recorder>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="6">图片</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-upload-image-with-preview style="width: 100%" [picUrl]="data.leftAnswer.picUrl"
(imageUploaded)="onImageUploadSuccess($event, data.leftAnswer, 'picUrl')">
</app-upload-image-with-preview>
</nz-form-control>
</nz-form-item>
<div style="position: absolute; left: 200px; top: 100px; width: 800px;"> </nz-card>
</div>
<input type="text" nz-input [(ngModel)]="item.text" (blur)="save()"> <div nz-col [nzSpan]="12">
<nz-card nzTitle="备选答案2">
<app-upload-image-with-preview <nz-form-item>
[picUrl]="item.pic_url" <nz-form-label [nzSpan]="6" nzFor="{{j}}.rightAnswer.audioUrl">音频</nz-form-label>
(imageUploaded)="onImageUploadSuccess($event, 'pic_url')" <nz-form-control [nzSpan]="12">
></app-upload-image-with-preview> <app-audio-recorder id="{{j}}.rightAnswer.audioUrl" [audioUrl]="data.rightAnswer.audioUrl"
(audioUploaded)="onAudioUploadSuccess($event, data.rightAnswer, 'audioUrl')">
<app-audio-recorder </app-audio-recorder>
[audioUrl]="item.audio_url" </nz-form-control>
(audioUploaded)="onAudioUploadSuccess($event, 'audio_url')" </nz-form-item>
></app-audio-recorder> <nz-form-item>
<app-custom-hot-zone></app-custom-hot-zone> <nz-form-label [nzSpan]="6">图片</nz-form-label>
<app-upload-video></app-upload-video> <nz-form-control [nzSpan]="6">
<app-lesson-title-config></app-lesson-title-config> <app-upload-image-with-preview style="width: 100%" [picUrl]="data.rightAnswer.picUrl"
(imageUploaded)="onImageUploadSuccess($event, data.rightAnswer, 'picUrl')">
</app-upload-image-with-preview>
</nz-form-control>
</nz-form-item>
</nz-card>
</div>
</div>
</div>
</div>
</div>
</div> </div>
</div>
</div>
\ No newline at end of file \ 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 } from '../bean/ExercisesBean';
...@@ -10,12 +11,12 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap ...@@ -10,12 +11,12 @@ 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 = "LST-06";
// 储存对象 // 储存对象
item; item;
constructor(private appRef: ApplicationRef,private changeDetectorRef: ChangeDetectorRef) { constructor(private appRef: ApplicationRef, private changeDetectorRef: ChangeDetectorRef) {
} }
...@@ -24,8 +25,10 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -24,8 +25,10 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.item = {}; this.item = {};
this.item.exercisesArr = [];
// 获取存储的数据 // 获取存储的数据
(<any> window).courseware.getData((data) => { (<any>window).courseware.getData((data) => {
if (data) { if (data) {
this.item = data; this.item = data;
...@@ -55,22 +58,22 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -55,22 +58,22 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
/** /**
* 储存图片数据 * 储存图片数据
* @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();
} }
...@@ -80,7 +83,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -80,7 +83,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
* 储存数据 * 储存数据
*/ */
save() { save() {
(<any> window).courseware.setData(this.item, null, this.saveKey); (<any>window).courseware.setData(this.item, null, this.saveKey);
this.refresh(); this.refresh();
} }
...@@ -93,5 +96,20 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -93,5 +96,20 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}, 1); }, 1);
} }
addExercises(item, key) {
let exercises = getDefaultExercises();
item[key] = [...item[key], exercises];
this.save();
}
deleteExercises(item, key, index) {
if (index !== -1) {
item[key].splice(index, 1);
item[key] = [...item[key]];
this.save();
}
}
} }
...@@ -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 = 'LST-06';
btnLeft;
btnRight;
pic1;
pic2;
canTouch = true; canTouch = true;
curPic;
@HostListener('window:resize', ['$event']) @HostListener('window:resize', ['$event'])
onResize(event) { onResize(event) {
...@@ -493,128 +486,10 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -493,128 +486,10 @@ 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);
} }
...@@ -625,25 +500,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -625,25 +500,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;
}
} }
......
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