Commit 63509f87 authored by 李维's avatar 李维

更新Form表单

parent 104e7e3b
No preview for this file type
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
......@@ -3023,7 +3023,7 @@ __webpack_require__.r(__webpack_exports__);
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
module.exports = __webpack_require__(/*! /Users/liwei/Documents/GitHub/Courseware/L5R1_bingo/form/src/polyfills.ts */"./src/polyfills.ts");
module.exports = __webpack_require__(/*! /Users/liwei/Documents/GitHub/Courseware/L5R3_GuessingGame/form_angular/src/polyfills.ts */"./src/polyfills.ts");
/***/ })
......
......@@ -19078,7 +19078,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
/***/
function _(module, exports, __webpack_require__) {
__webpack_require__(
/*! /Users/liwei/Documents/GitHub/Courseware/L5R1_bingo/form/node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/es5-polyfills.js */
/*! /Users/liwei/Documents/GitHub/Courseware/L5R3_GuessingGame/form_angular/node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/es5-polyfills.js */
"./node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/es5-polyfills.js");
__webpack_require__(
......@@ -19086,7 +19086,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
"./node_modules/zone.js/dist/zone-legacy.js");
module.exports = __webpack_require__(
/*! /Users/liwei/Documents/GitHub/Courseware/L5R1_bingo/form/src/polyfills.ts */
/*! /Users/liwei/Documents/GitHub/Courseware/L5R3_GuessingGame/form_angular/src/polyfills.ts */
"./src/polyfills.ts");
/***/
}
......
......@@ -376,8 +376,8 @@ if (content.locals) {
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
__webpack_require__(/*! /Users/liwei/Documents/GitHub/Courseware/L5R1_bingo/form/node_modules/ng-zorro-antd/ng-zorro-antd.min.css */"./node_modules/ng-zorro-antd/ng-zorro-antd.min.css");
module.exports = __webpack_require__(/*! /Users/liwei/Documents/GitHub/Courseware/L5R1_bingo/form/src/styles.css */"./src/styles.css");
__webpack_require__(/*! /Users/liwei/Documents/GitHub/Courseware/L5R3_GuessingGame/form_angular/node_modules/ng-zorro-antd/ng-zorro-antd.min.css */"./node_modules/ng-zorro-antd/ng-zorro-antd.min.css");
module.exports = __webpack_require__(/*! /Users/liwei/Documents/GitHub/Courseware/L5R3_GuessingGame/form_angular/src/styles.css */"./src/styles.css");
/***/ })
......@@ -400,11 +400,11 @@
/***/
function _(module, exports, __webpack_require__) {
__webpack_require__(
/*! /Users/liwei/Documents/GitHub/Courseware/L5R1_bingo/form/node_modules/ng-zorro-antd/ng-zorro-antd.min.css */
/*! /Users/liwei/Documents/GitHub/Courseware/L5R3_GuessingGame/form_angular/node_modules/ng-zorro-antd/ng-zorro-antd.min.css */
"./node_modules/ng-zorro-antd/ng-zorro-antd.min.css");
module.exports = __webpack_require__(
/*! /Users/liwei/Documents/GitHub/Courseware/L5R1_bingo/form/src/styles.css */
/*! /Users/liwei/Documents/GitHub/Courseware/L5R3_GuessingGame/form_angular/src/styles.css */
"./src/styles.css");
/***/
}
File mode changed from 100644 to 100755
......@@ -130,6 +130,6 @@
},
"defaultProject": "ng-template-generator",
"cli": {
"analytics": "5f501d82-8f25-4817-a608-9ac70d1f1f70"
"analytics": false
}
}
\ No newline at end of file
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
This diff is collapsed.
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
......@@ -45,19 +45,17 @@
<fa-icon icon="cog"></fa-icon>
</div>
</ng-template>
</div>
<div class="p-progress ml-2" (click)="onBtnPlay()" *ngIf="audioUrl || audioBlob"
style="background-color: #70B603; width: 35px; height: 35px; border-radius: 35px; margin-left: 10px;margin-top:-1px">
<nz-progress [nzPercent]="percent" [nzWidth]="35" [nzFormat]="progressText"
nzType="circle">
</nz-progress>
<div class="p-btn-play"
style="color: white;margin-left: 2px;margin-top: 1px;"
[style.left]="isPlaying?'8px':''">
<div class="p-progress ml-2" (click)="onBtnPlay()" *ngIf="audioUrl || audioBlob">
<nz-progress [nzPercent]="percent" [nzWidth]="30" [nzFormat]="progressText"
nzType="circle"></nz-progress>
<div class="p-btn-play" [style.left]="isPlaying?'8px':''">
<fa-icon [icon]="playIcon"></fa-icon>
</div>
</div>
<div class="audio-name">{{_audioName}}</div>
</div>
......@@ -90,26 +90,17 @@
}
.p-progress {
margin-top: 3.5px;
margin-top: 2px;
position: relative;
background-color: #27b43f;
border-radius: 15px;
line-height: 26px;
.p-btn-play {
position: absolute;
left: 11px;
left: 10px;
top: 3px;
color: #ffffff;
color: #555;
}
}
.audio-name{
margin-top: 3.5px;
position: relative;
margin-left: 7px;;
line-height: 26px;
}
:host ::ng-deep nz-upload {
line-height: 33px;
}
......
......@@ -31,21 +31,12 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
@Input()
audioItem: any = null;
@Input()
_audioName: any = null;
@Input()
set audioUrl(url) {
this._audioUrl = url;
if (url) {
this.httpHeadCall(this._audioUrl, flag => {
if (flag) {
this.audio.src = this._audioUrl;
} else {
this.audio.src = this._audioUrl.replace("_l.", ".");
}
this.audio.load();
});
}
this.init();
}
......@@ -57,7 +48,6 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
@Output() audioUploaded = new EventEmitter();
@Output() audioUploadFailure = new EventEmitter();
@Output() audioRemoved = new EventEmitter();
@Output() audioName = new EventEmitter();
percent = 0;
progress = 0;
recorder: any;
......@@ -74,41 +64,6 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
};
}
httpHeadCall(requsetUrl: string, callback) {
let xhr = new XMLHttpRequest();
console.log("Status: Send Post Request to " + requsetUrl);
try {
xhr.onreadystatechange = () => {
try {
console.log('xhr.readyState: ', xhr.readyState);
if (xhr.readyState == 4) {
if ((xhr.status >= 200 && xhr.status < 400)) {
callback(true);
} else {
callback(false);
}
}
} catch (e) {
console.log(e)
}
};
xhr.open("HEAD", requsetUrl, true);
xhr.send();
xhr.timeout = 15000;
xhr.onerror = (e) => {
console.log("汪汪汪 posterror", e);
callback(false);
};
xhr.ontimeout = (e) => {
console.log("汪汪汪 ontimeout", e);
callback(false);
};
} catch (e) {
console.log("Send Get Request error: ", e)
}
}
init() {
this.playIcon = 'play';
this.isPlaying = false;
......@@ -213,12 +168,8 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
break;
case 'success':
this.isUploading = false;
let url = info.file.response.url;
url = url.substring(0, url.lastIndexOf(".")) + "_l.mp3";
info.file.response.url = url;
this.uploadSuccess(info.file.response);
this.audioUploaded.emit(info.file.response);
this.audioName.emit(info.file.name);
break;
case 'progress':
this.progress = parseInt(info.event.percent, 10);
......
File mode changed from 100644 to 100755
......@@ -80,62 +80,43 @@ export class UploadVideoComponent implements OnChanges, OnDestroy {
URL.revokeObjectURL(this.videoUrl);
}
httpHeadCall(requsetUrl: string, callback) {
let xhr = new XMLHttpRequest();
console.log("Status: Send Post Request to " + requsetUrl);
try {
xhr.onreadystatechange = () => {
try {
console.log('xhr.readyState: ', xhr.readyState);
if (xhr.readyState == 4) {
if ((xhr.status >= 200 && xhr.status < 400)) {
callback(true);
} else {
callback(false);
}
}
} catch (e) {
console.log(e)
}
};
xhr.open("HEAD", requsetUrl, true);
xhr.send();
xhr.timeout = 15000;
xhr.onerror = (e) => {
callback(false);
};
xhr.ontimeout = (e) => {
callback(false);
};
} catch (e) {
console.log("Send Get Request error: ", e)
}
}
safeVideoUrl(url) {
const _url = url.replace("_l.", ".");
return this.sanitization.bypassSecurityTrustResourceUrl(_url); // `${url}`;
console.log(url);
return this.sanitization.bypassSecurityTrustResourceUrl(url); // `${url}`;
}
videoLoadedMetaData() {
}
handleChange(info: UploadChangeParam): void {
handleChange(info: UploadChangeParam/* { type: string, file: UploadFile, event: any }*/): void {
console.log('info:' , info);
switch (info.type) {
case 'start':
// this.beforeUpload(info.file);
if (!this.checkSelectFile(info.file)) {
return;
}
this.uploading = true;
this.progress = 0;
break;
case 'success':
let url = info.file.response.url;
url = url.substring(0, url.lastIndexOf(".")) + "_l.mp4";
info.file.response.url = url;
this.uploadSuccess(info.file);
// this.beforeUpload(info.file);
// this.uploadSuccess(info.file);
break;
case 'progress':
this.progress = info.event.percent;
......@@ -144,6 +125,7 @@ export class UploadVideoComponent implements OnChanges, OnDestroy {
}
}
checkSelectFile(file) {
if (!file.lastModified) {
return false;
......
import { ApplicationRef, ChangeDetectorRef, ElementRef, ViewChild } from "@angular/core";
export class ComponentBase {
// 储存数据用
saveKey = "";
// 储存对象
item: any = {};
ngOnChanges() { }
ngOnDestroy() { }
constructor(private appRef: ApplicationRef, private changeDetectorRef: ChangeDetectorRef) { }
ngOnInit() {
// 获取存储的数据
(<any>window).courseware.getData((data) => {
if (data) {
this.item = data;
this.itemStr = JSON.stringify(this.item, null, 4).trim();
}
this.init();
this.changeDetectorRef.markForCheck();
this.changeDetectorRef.detectChanges();
this.refresh();
}, this.saveKey);
}
@ViewChild("itemTextarea", { static: true }) itemTextarea: ElementRef;
copyData() {
this.itemTextarea.nativeElement.select();
document.execCommand("copy");
}
/**
* 储存图片数据
* @param e
*/
onAssetUploadSuccess(e: any, ...key: Array<string>) {
let item = this.item;
for (let i = 0; i < key.length; i++) {
if (i + 1 == key.length) {
item[key[i]] = e.url;
this.save();
return;
}
item = item[key[i]];
}
}
save() {
(<any>window).courseware.setData(this.item, null, this.saveKey);
this.itemStr = JSON.stringify(this.item, null, 4).trim();
this.refresh();
console.log('this.item = ' + JSON.stringify(this.item));
}
itemStr = "";
load() {
this.itemStr = this.itemTextarea.nativeElement.value;
if (this.isJSON(this.itemStr)) {
this.item = JSON.parse(this.itemStr);
this.init();
this.changeDetectorRef.markForCheck();
this.changeDetectorRef.detectChanges();
this.refresh();
}
}
isJSON(str) {
if (typeof str == 'string') {
try {
var obj = JSON.parse(str);
if (typeof obj == 'object' && obj) {
return true;
}
return false;
} catch (e) {
return false;
}
}
return false;
}
/**
* 刷新 渲染页面
*/
refresh() {
setTimeout(() => {
this.appRef.tick();
}, 1);
}
init() { }
}
......@@ -20,10 +20,10 @@
border-style: dashed;
padding: 20px;
margin: 20px;
/*width: 500px; */
/*//border-radius: 20px;*/
/*//border-width: 2px;*/
/*//border-color: #000000;*/
width: 800px;
border-radius: 20px;
border-width: 2px;
border-color: #000000;
}
......@@ -33,30 +33,3 @@
padding: 10px;
margin: 10px;
}
.button-right {
border-style: dotted;
border-color: rgb(42, 142, 72);
width: 100px;
height: 50px;
color: rgb(42, 142, 72);
background-color: white;
}
.button-wrong {
border-style: dotted;
border-color: rgb(180, 0, 0);
width: 100px;
height: 50px;
color: rgb(180, 0, 0);
background-color: white;
}
.button-disable {
border-style: dotted;
border-color: black;
width: 100px;
height: 50px;
color: black;
background-color: white;
}
\ No newline at end of file
<div class="model-content">
<div style="padding: 10px;">
<div class="border" style="width: 1000px;">
<textarea style="width: 955px; height: 300px;" (blur)="load()" #itemTextarea>{{itemStr}}</textarea>
<button (click)="copyData();">Copy</button>
<div class="border" style="padding: 50px;">
<div style="margin-bottom: 20px;">
<span style="font-size: 20px;">加载音频: </span>
<app-audio-recorder [audioUrl]="item.audioUrl_loading" (audioUploaded)="onAudioUploadSuccess($event, 'audioUrl_loading')">
</app-audio-recorder>
</div>
<div class="border" style="width: 1000px;">
<span style="font-size: 20px;">标题: </span>
<input type="text" nz-input [(ngModel)]="item.title" (blur)="save()">
<span style="font-size: 20px;">题目说明: </span>
<input type="text" nz-input [(ngModel)]="item.questionText" (blur)="save()">
<span style="font-size: 20px;">题目说明音频: </span>
<app-audio-recorder
[audioUrl]="item.questionTextAudio"
(audioUploaded)="onAssetUploadSuccess($event, 'questionTextAudio')"
[_audioName]="item.audioFileName"
(audioName)="saveAudioFileName($event)"
></app-audio-recorder>
<div style="margin-bottom: 20px;">
<span style="font-size: 20px;">开始选牌音频: </span>
<app-audio-recorder [audioUrl]="item.audioUrl_start" (audioUploaded)="onAudioUploadSuccess($event, 'audioUrl_start')">
</app-audio-recorder>
</div>
<div class="border" style="width: 1000px;">
<div *ngFor="let question of item.questions; let i = index">
<div class="border" style="width: 950px;">
<span style="font-size: 20px;">选项类型: </span>
<div *ngIf="question.type=='img'">
<button class="button-right">图片</button>
&nbsp;
<button class="button-disable" (click)="question.type='txt'; save();">文字</button>
<div style="margin-bottom: 20px;">
<span style="font-size: 20px;">开始猜词音频: </span>
<app-audio-recorder [audioUrl]="item.audioUrl_start_guessing" (audioUploaded)="onAudioUploadSuccess($event, 'audioUrl_start_guessing')">
</app-audio-recorder>
</div>
<div *ngIf="question.type=='txt'">
<button class="button-disable" (click)="question.type='img'; save();">图片</button>
&nbsp;
<button class="button-right">文字</button>
<div style="margin-bottom: 20px;">
<span style="font-size: 20px;">猜词待机音频: </span>
<app-audio-recorder [audioUrl]="item.audioUrl_waiting_guessing" (audioUploaded)="onAudioUploadSuccess($event, 'audioUrl_waiting_guessing')">
</app-audio-recorder>
</div>
<div *ngIf="question.type=='img'">
图片:
<div style="width: 300px;">
<app-upload-image-with-preview [picUrl]="question.image"
(imageUploaded)="onAssetUploadSuccess($event, 'questions', i, 'image')">
</app-upload-image-with-preview>
<div style="margin-bottom: 20px;">
<span style="font-size: 20px;">15秒自动提示1: </span>
<app-audio-recorder [audioUrl]="item.audioUrl_tip1" (audioUploaded)="onAudioUploadSuccess($event, 'audioUrl_tip1')">
</app-audio-recorder>
</div>
<div style="margin-bottom: 20px;">
<span style="font-size: 20px;">15秒自动提示2: </span>
<app-audio-recorder [audioUrl]="item.audioUrl_tip2" (audioUploaded)="onAudioUploadSuccess($event, 'audioUrl_tip2')">
</app-audio-recorder>
</div>
<span>音频: </span>
<app-audio-recorder [audioUrl]="question.audio"
(audioUploaded)="onAssetUploadSuccess($event, 'questions', i, 'audio')">
<div style="margin-bottom: 20px;">
<span style="font-size: 20px;">15秒自动提示3: </span>
<app-audio-recorder [audioUrl]="item.audioUrl_tip3" (audioUploaded)="onAudioUploadSuccess($event, 'audioUrl_tip3')">
</app-audio-recorder>
<div *ngIf="question.type=='txt'">
<span>文本: </span>
<input type="text" nz-input [(ngModel)]="question.text" (blur)="save()">
</div>
<br>
<button style="width: 900px; height: 30px; color: red;" (click)="removeQuestion(i)">删除题目</button>
<div style="margin-bottom: 20px;">
<span style="font-size: 20px;">第一次答错提示: </span>
<app-audio-recorder [audioUrl]="item.audioUrl_tip_wrong1" (audioUploaded)="onAudioUploadSuccess($event, 'audioUrl_tip_wrong1')">
</app-audio-recorder>
</div>
<div style="margin-bottom: 20px;">
<span style="font-size: 20px;">第二次答错提示: </span>
<app-audio-recorder [audioUrl]="item.audioUrl_tip_wrong2" (audioUploaded)="onAudioUploadSuccess($event, 'audioUrl_tip_wrong2')">
</app-audio-recorder>
</div>
<div class="border" style="width: 950px;">
<button style="width: 900px; height: 100px;" (click)="addQuestion()">增加题目</button>
<div style="margin-bottom: 20px;">
<span style="font-size: 20px;">失败音频: </span>
<app-audio-recorder [audioUrl]="item.audioUrl_lose" (audioUploaded)="onAudioUploadSuccess($event, 'audioUrl_lose')">
</app-audio-recorder>
</div>
<div style="margin-bottom: 20px;">
<span style="font-size: 20px;">胜利音频: </span>
<app-audio-recorder [audioUrl]="item.audioUrl_win" (audioUploaded)="onAudioUploadSuccess($event, 'audioUrl_win')">
</app-audio-recorder>
</div>
</div>
</div>
\ No newline at end of file
import { Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef, ChangeDetectorRef } from '@angular/core';
import { JsonPipe } from '@angular/common';
import { ComponentBase } from './ComponentBase';
@Component({
......@@ -8,36 +7,105 @@ import { ComponentBase } from './ComponentBase';
templateUrl: './form.component.html',
styleUrls: ['./form.component.css']
})
export class FormComponent extends ComponentBase implements OnInit, OnChanges, OnDestroy {
export class FormComponent implements OnInit, OnChanges, OnDestroy {
// 储存数据用
saveKey = "card_machine";
saveKey = "test_001";
// 储存对象
item: any = {
title: '',
questionText: '',
questionTextAudio: '',
audioFileName: '',
questions: [],
item;
constructor(private appRef: ApplicationRef, private changeDetectorRef: ChangeDetectorRef) {
}
ngOnInit() {
this.item = {
audioUrl_loading: '',
audioUrl_start: '',
audioUrl_start_guessing: '',
audioUrl_waiting_guessing: '',
audioUrl_tip1: '',
audioUrl_tip2: '',
audioUrl_tip3: '',
audioUrl_tip_wrong1: '',
audioUrl_tip_wrong2: '',
audioUrl_lose: '',
audioUrl_win: '',
};
addQuestion() {
this.item.questions.push({
type: 'img',
audio: '',
text: '',
image: ''
});
// 获取存储的数据
(<any>window).courseware.getData((data) => {
if (data) {
this.item = data;
}
this.init();
this.changeDetectorRef.markForCheck();
this.changeDetectorRef.detectChanges();
this.refresh();
}, this.saveKey);
}
ngOnChanges() {
}
ngOnDestroy() {
}
init() {
}
/**
* 储存图片数据
* @param e
*/
onImageUploadSuccess(e, key) {
this.item[key] = e.url;
this.save();
}
/**
* 储存音频数据
* @param e
*/
onAudioUploadSuccess(e, key) {
this.item[key] = e.url;
this.save();
}
removeQuestion(idx) {
this.item.questions.splice(idx, 1);
onWordAudioUploadSuccess(e, idx) {
this.item.wordList[idx].audio = e.url;
this.save();
}
saveAudioFileName(name) {
this.item.audioFileName=name;
onBackWordAudioUploadSuccess(e, idx) {
this.item.wordList[idx].backWordAudio = e.url;
this.save();
}
/**
* 储存数据
*/
save() {
(<any>window).courseware.setData(this.item, null, this.saveKey);
this.refresh();
console.log('this.item = ' + JSON.stringify(this.item));
}
/**
* 刷新 渲染页面
*/
refresh() {
setTimeout(() => {
this.appRef.tick();
}, 1);
}
}
\ No newline at end of file
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
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