Commit 8e43efc7 authored by liujiangnan's avatar liujiangnan

feat: 迁移完成

parent 8a51c964
...@@ -30,7 +30,10 @@ ...@@ -30,7 +30,10 @@
], ],
"styles": [ "styles": [
"./node_modules/ng-zorro-antd/ng-zorro-antd.min.css", "./node_modules/ng-zorro-antd/ng-zorro-antd.min.css",
"src/styles.css" "./node_modules/font-awesome/css/font-awesome.css",
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"./node_modules/animate.css/animate.min.css",
"src/styles.scss"
], ],
"scripts": [] "scripts": []
}, },
...@@ -128,5 +131,8 @@ ...@@ -128,5 +131,8 @@
} }
} }
}, },
"defaultProject": "ng-template-generator" "defaultProject": "ng-template-generator",
} "cli": {
"analytics": "492245b4-c782-4ff8-9a30-b89188f9b56f"
}
}
\ No newline at end of file
...@@ -24,6 +24,7 @@ import {AudioRecorderComponent} from './common/audio-recorder/audio-recorder.com ...@@ -24,6 +24,7 @@ import {AudioRecorderComponent} from './common/audio-recorder/audio-recorder.com
import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome'; import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
import { fas } from '@fortawesome/free-solid-svg-icons'; import { fas } from '@fortawesome/free-solid-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons'; import { far } from '@fortawesome/free-regular-svg-icons';
import { BrLineBreakerPipe } from './pipes/br-line-breaker.pipe';
registerLocaleData(zh); registerLocaleData(zh);
...@@ -36,6 +37,7 @@ registerLocaleData(zh); ...@@ -36,6 +37,7 @@ registerLocaleData(zh);
AudioRecorderComponent, AudioRecorderComponent,
UploadImageWithPreviewComponent, UploadImageWithPreviewComponent,
BackgroundImagePipe, BackgroundImagePipe,
BrLineBreakerPipe,
ResourcePipe, ResourcePipe,
TimePipe, TimePipe,
UploadVideoComponent, UploadVideoComponent,
......
@import '../style/common_mixin.css';
.model-content {
width: 100%;
height: 100%;
}
<div class="model-content">
<div class="all-courseware-container">
<div class="courseware-container d-flex" style="margin-bottom: 1rem;">
<div class="col-4" *ngFor="let i of [0,1,2]">
<app-upload-image-with-preview
[picUrl]="item.contentObj.pics[i].pic_id"
(imageUploaded)="onImageUploadSuccess($event,i)"
></app-upload-image-with-preview>
<label nz-checkbox [ngModel]="item.contentObj.pics[i].is_right" (ngModelChange)="setRightAnswer($event,i)" class="right-answer">Right</label>
</div>
</div>
<div style="position: absolute; left: 200px; top: 100px; width: 800px;"> <div class="courseware-container d-flex" style="margin-bottom: 1rem;">
<div class="col-12">
<nz-input-group
nzSize="large"
[nzPrefix]="prefixTemplate" >
<input type="text" nz-input placeholder="Enter text"
(blur)="saveText($event)"
[(ngModel)]="item.contentObj.text ">
</nz-input-group>
<ng-template #prefixTemplate>
<i class="anticon anticon-edit" ></i>
</ng-template>
</div>
</div>
<input type="text" nz-input [(ngModel)]="item.text" (blur)="save()"> <div class="courseware-container d-flex">
<div class="col-12">
<app-upload-image-with-preview <app-audio-recorder
[picUrl]="item.pic_url" [audioUrl]="item.contentObj.audio_id"
(imageUploaded)="onImageUploadSuccess($event, 'pic_url')" (audioUploaded)="onAudioUploadSuccess($event)"
></app-upload-image-with-preview> ></app-audio-recorder>
</div>
<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> </div>
</div>
\ No newline at end of file
</div>
\ No newline at end of file
.all-courseware-container{
padding: 2rem;
}
\ No newline at end of file
...@@ -5,33 +5,43 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap ...@@ -5,33 +5,43 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap
@Component({ @Component({
selector: 'app-form', selector: 'app-form',
templateUrl: './form.component.html', templateUrl: './form.component.html',
styleUrls: ['./form.component.css'] styleUrls: ['./form.component.scss']
}) })
export class FormComponent implements OnInit, OnChanges, OnDestroy { export class FormComponent implements OnInit, OnChanges, OnDestroy {
// 储存数据用 _answer = {};
saveKey = "test_0011"; originItemTxt = '';
// 储存对象
item; item;
saveKey = "listen-choose";
picIds: Array<number>;
constructor(private appRef: ApplicationRef,private changeDetectorRef: ChangeDetectorRef) { constructor(private appRef: ApplicationRef,
private changeDetectorRef: ChangeDetectorRef) {
} }
ngOnInit() { ngOnInit() {
this.item = {}; this.item = {
contentObj: {
pics: [
{pic_id: "",is_right: false},
{pic_id: "",is_right: false},
{pic_id: "",is_right: false}
],
text: "",
audio_id: ""
}
};
// 获取存储的数据 // 获取存储的数据
(<any> window).courseware.getData((data) => { (window as any).courseware.getData((data) => {
if (data) { if (data) {
this.item = data; this.item = data;
} }
this.init();
this.changeDetectorRef.markForCheck(); this.changeDetectorRef.markForCheck();
this.changeDetectorRef.detectChanges(); this.changeDetectorRef.detectChanges();
this.refresh(); this.refresh();
...@@ -42,40 +52,55 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -42,40 +52,55 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
ngOnChanges() { ngOnChanges() {
this._answer = {};
} }
ngOnDestroy() { ngOnDestroy() {
} }
saveText(evt) {
// const txt = evt.target.value.trim();
init() { if (!this.item.contentObj.text) {
return;
}
if (this.originItemTxt === this.item.contentObj.text.trim()) {
return;
}
this.originItemTxt = this.item.contentObj.text.trim()
// this.item.contentObj.text = txt;
this.save();
} }
setRightAnswer = (val, i) => {
this._answer[i] = val;
/** if (this.item.contentObj.pics === undefined) {
* 储存图片数据 this.item.contentObj.pics = [];
* @param e }
*/ if (this.item.contentObj.pics[i] && this.item.contentObj.pics[i] instanceof Object) {
onImageUploadSuccess(e, key) { this.item.contentObj.pics[i].is_right = val;
} else {
this.item[key] = e.url; this.item.contentObj.pics[i] = {pic_id: 0, is_right: val};
this.save(); }
this.save();
} }
onImageUploadSuccess(evt, i) {
/** if (this.item.contentObj.pics === undefined) {
* 储存音频数据 this.item.contentObj.pics = [];
* @param e }
*/ if (this.item.contentObj.pics[i] && this.item.contentObj.pics[i] instanceof Object) {
onAudioUploadSuccess(e, key) { this.item.contentObj.pics[i].pic_id = evt.url;
} else {
this.item[key] = e.url; this.item.contentObj.pics[i] = {pic_id: evt.url, is_right: this._answer[i]};
}
this.save();
// console.log('onImageUploadSuccess', evt, this.item);
}
onAudioUploadSuccess (evt) {
// console.log('onAudioUploadSuccess');
this.item.contentObj.audio_id = evt.url;
this.save(); this.save();
} }
/** /**
* 储存数据 * 储存数据
*/ */
......
import {Pipe, PipeTransform} from '@angular/core'; import {Pipe, PipeTransform} from '@angular/core';
// import {ElectronUtil} from '../util/ElectronUtil';
declare const APP_PATH;
// const isInElectron = localStorage.getItem('electron');
@Pipe({ @Pipe({
name: 'backgroundImage' name: 'backgroundImage'
}) })
export class BackgroundImagePipe implements PipeTransform { export class BackgroundImagePipe implements PipeTransform {
transform(value: any, coursewareSid?: string) { transform(value: any) {
// const ret = value ? `url(${value})` : ''; return `url(${value})`;
const ret = value ? `url(${value})` : '';
return ret;
// let ret = value > 0 ? `url(/api/media-resource/${value}/file)` : '';
// if (isInElectron && ElectronUtil.hasCached(coursewareSid, value)) {
// ret = `url(file://${APP_PATH}/courseware_cache/${coursewareSid}/${value})`;
// }
// return ret;
} }
} }
import {Pipe, PipeTransform} from '@angular/core';
@Pipe({
name: 'brLineBreaker'
})
export class BrLineBreakerPipe implements PipeTransform {
transform(value: any, args?: any): any {
return value ? value.replace(/\n/g, '<br />') : '';
}
}
...@@ -2,25 +2,17 @@ import {Pipe, PipeTransform} from '@angular/core'; ...@@ -2,25 +2,17 @@ import {Pipe, PipeTransform} from '@angular/core';
// import {ElectronUtil} from '../util/ElectronUtil'; // import {ElectronUtil} from '../util/ElectronUtil';
declare const APP_PATH; declare const APP_PATH;
// const isInElectron = localStorage.getItem('electron'); const isInElectron = localStorage.getItem('electron');
@Pipe({ @Pipe({
name: 'resource' name: 'resource'
}) })
export class ResourcePipe implements PipeTransform { export class ResourcePipe implements PipeTransform {
transform(pic_url: any, coursewareSid?: string): string { transform(value: any, coursewareSid?: string): string {
// return pic_url; return value ? `/api/media-resource/${value}/file` : '';
if (pic_url && typeof pic_url === 'object') { // if (isInElectron && ElectronUtil.hasCached(coursewareSid, value)) {
return pic_url; // ret = `file://${APP_PATH}/courseware_cache/${coursewareSid}/${value}`;
}
// console.log('resource', pic_url)
return `${pic_url}?t=${Math.random()}`;
// let ret = value ? `/api/resource/${value}/file` : '';
// let ret = res_id ? `/resource/audio/${res_id}` : '';
// if (isInElectron && ElectronUtil.hasCached(coursewareSid, res_id)) {
// ret = `file://${APP_PATH}/courseware_cache/${coursewareSid}/${res_id}`;
// } // }
// return ret; // return ret;
} }
......
.game-container {
width: 100%;
height: 100%;
background: #ffffff;
background-size: cover;
}
#canvas {
}
@font-face
{
font-family: 'BRLNSDB';
src: url("../../assets/font/BRLNSDB.TTF") ;
}
<div class="game-container" #wrap> <div class="question-container">
<canvas id="canvas" #canvas></canvas> <div class="img-bar" nz-row nzType="flex" nzJustify="space-around">
<div
class="img-wrap tip-border"
*ngFor="let item of _data"
nz-col
nzSpan="6"
[@tip-border]="item.state || 'none'"
(click)="handleTap($event, item);$event.preventDefault()"
>
<img *ngIf="item.pic_id" [src]="item.pic_id" alt="" (dragstart)="false;$event.preventDefault();" />
</div>
</div>
<div class="p-tool d-flex">
<div class="p-tool-left d-flex">
<div class="p-tool-btn" (click)="playAudio()">
<i class="anticon anticon-sound"></i>
</div>
<div class="p-tool-btn" (click)="lcDisplayText()">
<i class="anticon anticon-edit"></i>
</div>
</div>
<div class="p-tool-right flex-fill">
<div class="i-text">
{{_lc_text}}
</div>
</div>
</div>
</div> </div>
$my_width: percentage(4/12);
.question-container {
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
padding-top: 1rem;
background: url("./assets/listen_choose_bg.jpg");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
.img-bar {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
.img-wrap {
margin: 1rem;
display: flex;
justify-content: center;
align-items: center;
background: #ffffff;
position: relative;
padding-bottom: 17%;
height: 0;
overflow: hidden;
border: 0.8rem solid #fff;
border-radius: 1rem;
transform: scale(1);
img {
width: 100%;
height: 100%;
object-fit: contain;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
}
}
.p-tool {
width: 80%;
max-height: 15rem;
line-height: 5rem;
margin-top: 1rem;
&-left {
width: 11rem;
padding-left: 2rem;
background-color: white;
border-top-left-radius: 2.5rem;
border-bottom-left-radius: 2.5rem;
align-items: center;
.p-tool-btn {
width: 4rem;
font-size: 2.5rem;
color: #6cc1bb;
}
.p-tool-btn:active {
transform: scale(1.2);
}
}
&-right {
padding: 1rem;
background-color: white;
border-top-right-radius: 2.5rem;
border-bottom-right-radius: 2.5rem;
color: #6cc1bb;
font-size: 2.5rem;
margin-left: 0.2rem;
.i-text {
display: flex;
height: 100%;
justify-content: center;
align-items: center;
line-height: 1.4;
overflow-y: auto;
}
}
}
.input-group {
width: 80%;
margin: 2rem 0;
.ant-btn{
width: 6rem;
height: 6rem;
font-size: 2.5em;
}
.ant-input {
height: 6rem;
line-height: 3rem;
font-size: 2.5em;
outline: none;
text-align: center;
}
}
}
This diff is collapsed.
@mixin hide-overflow-text {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
@mixin k-no-select {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@mixin k-img-bg {
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
@mixin hide-overflow-text {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
@mixin k-no-select {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@mixin k-img-bg {
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
...@@ -3,6 +3,8 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; ...@@ -3,6 +3,8 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module'; import { AppModule } from './app/app.module';
import { environment } from './environments/environment'; import { environment } from './environments/environment';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
if (environment.production) { if (environment.production) {
enableProdMode(); enableProdMode();
......
/* You can add global styles to this file, and also import other style files */
/* You can add global styles to this file, and also import other style files */
@mixin hide-overflow-text {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
@mixin k-no-select {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@mixin k-img-bg {
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
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