Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
W
ww_cc_image_player
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
template admin
ww_cc_image_player
Commits
92fd1434
Commit
92fd1434
authored
May 20, 2021
by
Li MingZhe
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat: 首次提交
parent
cb1367da
Changes
5
Expand all
Hide whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
10237 additions
and
115 deletions
+10237
-115
form.component.css
form/src/app/form/form.component.css
+0
-35
form.component.html
form/src/app/form/form.component.html
+239
-27
form.component.scss
form/src/app/form/form.component.scss
+54
-0
form.component.ts
form/src/app/form/form.component.ts
+98
-53
yarn.lock
form/yarn.lock
+9846
-0
No files found.
form/src/app/form/form.component.css
deleted
100644 → 0
View file @
cb1367da
@import
'../style/common_mixin.css'
;
.model-content
{
width
:
100%
;
height
:
100%
;
}
.radioPaire
{
float
:
left
;
margin
:
3px
;
border-style
:
dashed
;
border-color
:
#000
;
border-width
:
1px
;
}
.border
{
border-radius
:
20px
;
border-style
:
dashed
;
padding
:
20px
;
margin
:
20px
;
/*width: 500px; */
/*//border-radius: 20px;*/
/*//border-width: 2px;*/
/*//border-color: #000000;*/
}
.border-lite
{
border
:
2px
dashed
#ddd
;
border-radius
:
0.5rem
;
padding
:
10px
;
margin
:
10px
;
}
form/src/app/form/form.component.html
View file @
92fd1434
<div
class=
"model-content"
>
<div
class=
"model-content"
>
<div
style=
"padding: 10px;"
>
<!-- <div style="margin-top: 1vw; margin-left: 2vw; margin-bottom: 3vw;">
<label nz-checkbox nzValue="autoPlayBgAudio" [(ngModel)]="autoPlayBgAudio"
<div
style=
"width: 300px;"
align=
'center'
>
(ngModelChange)="clickCheckBox()">默认自动播放音频</label>
<span>
图1:
</span>
</div> -->
<app-upload-image-with-preview
[
picUrl
]="
item
.
pic_url
"
(
imageUploaded
)="
onImageUploadSuccess
($
event
,
'
pic_url
')"
>
<div
*
ngFor=
"let it of picArr; let i = index"
</app-upload-image-with-preview>
nz-col
nzSpan=
"8"
>
</div>
<div
style=
"width: 300px; margin-top: 5px;"
align=
'center'
>
<span>
图2:
</span>
<div
class=
"item-box"
>
<app-upload-image-with-preview
<app-upload-image-with-preview
[
picUrl
]="
item
.
pic_url_2
"
style=
"width: 100%
"
(
imageUploaded
)="
onImageUploadSuccess
($
event
,
'
pic_url_2
')"
>
[
picUrl
]="
it
.
pic_url
"
</app-upload-image-with-preview>
(
imageUploaded
)="
onImageUploadSuccessByItem
($
event
,
it
)"
</div
>
></app-upload-image-with-preview
>
<div
style=
"width: 300px; margin-top: 15px;"
>
<span>
文本:
</span>
<input
type=
"text"
nz-input
[(
ngModel
)]="
item
.
text
"
(
blur
)="
save
()"
>
</div>
<div
style=
"margin-top: 5px"
>
<span>
音频:
</span>
<div
style=
"display: flex; justify-items: center; padding-top: 10px"
>
<app-audio-recorder
<app-audio-recorder
[
audioUrl
]="
item
.
audio_url
"
[
audioUrl
]="
it
.
audio_url
"
(
audioUploaded
)="
onAudioUploadSuccess
($
event
,
'
audio_url
')"
(
audioUploaded
)="
onAudioUploadSuccessByItem
($
event
,
it
)"
>
></app-audio-recorder>
</app-audio-recorder>
<button
style=
"margin-left: 10px;"
nz-button
nzType=
"danger"
(
click
)="
deleteItem
(
it
)"
>
<i
nz-icon
type=
"close"
></i>
</button>
</div>
</div>
</div>
<!--<h5> id-{{i+1}} </h5>-->
<!--<div style="display: flex; align-items: center; justify-content: center; padding-bottom: 5px">-->
<!--<input type="text" nz-input placeholder="" [(ngModel)]="it.text" (blur)="saveItem()">-->
<!--<button style="margin-left: 10px;" nz-button nzType="danger" (click)="deleteItem(it)">-->
<!--<i nz-icon type="close"></i>-->
<!--</button>-->
<!--</div>-->
<!--<app-upload-image-with-preview-->
<!--style="width: 100%"-->
<!--[picUrl]="it.pic_url"-->
<!--(imageUploaded)="onImageUploadSuccessByItem($event, it)"-->
<!--></app-upload-image-with-preview>-->
<!--<div style="display: flex; align-items: center; justify-content: center">-->
<!--<span style="width: 80px;">-->
<!--question:-->
<!--</span>-->
<!--<app-audio-recorder-->
<!--[audioUrl]="it['q_audio_url']"-->
<!--(audioUploaded)="onAudioUploadSuccessByItem($event, it, 'q')">-->
<!--</app-audio-recorder>-->
<!--</div>-->
<!--<div style="display: flex; align-items: center; justify-content: center">-->
<!--<span style="width: 80px;">-->
<!--answer:-->
<!--</span>-->
<!--<app-audio-recorder-->
<!--[audioUrl]="it['a_audio_url']"-->
<!--(audioUploaded)="onAudioUploadSuccessByItem($event, it, 'a')">-->
<!--</app-audio-recorder>-->
<!--</div>-->
<!--<nz-radio-group [(ngModel)]="it.radioValue" >-->
<!--<label nz-radio nzValue="A" (click)="radioClick(it, 'A')"> <i nz-icon nzType="check" nzTheme="outline"></i> </label>-->
<!--<label nz-radio nzValue="B" (click)="radioClick(it, 'B')"> <i nz-icon nzType="close" nzTheme="outline"></i> </label>-->
<!--</nz-radio-group>-->
</div>
<div
nz-col
nzSpan=
"8"
class=
"add-btn-box"
>
<!--<div style="width: 100%; height: 100%;">-->
<button
style=
" margin: auto; width: 60%; height: 60%;"
nz-button
nzType=
"dashed"
class=
"add-btn"
(
click
)="
addPic
()"
>
<i
nz-icon
nzType=
"plus-circle"
nzTheme=
"outline"
></i>
Add
</button>
<!--</div>-->
</div>
</div>
<!--<div style="padding-bottom: 30px;">-->
<!--<h5> title-sound: </h5>-->
<!--<app-audio-recorder-->
<!--[audioUrl]="item.contentObj.title_audio_url"-->
<!--(audioUploaded)="onAudioUploadSuccessByItem($event, item.contentObj, 'title')">-->
<!--</app-audio-recorder>-->
<!--</div>-->
<!--<div style="padding-bottom: 30px;">-->
<!--<h5> bg-sound: </h5>-->
<!--<app-audio-recorder-->
<!--[audioUrl]="item.contentObj.bg_audio_url"-->
<!--(audioUploaded)="onAudioUploadSuccessByItem($event, item.contentObj, 'bg')">-->
<!--</app-audio-recorder>-->
<!--</div>-->
<!--<span style="margin-bottom: 20px"> 10 : 23 </span>-->
<!--<div *ngFor="let it of picArr; let i = index">-->
<!--<span> pic-{{i + 1}}: </span>-->
<!--<div style="display: flex; align-items: center; padding-bottom: 20px">-->
<!--<div style="width: 40%; padding-right: 20px">-->
<!--<app-upload-image-with-preview-->
<!--[picUrl]="it.pic_url"-->
<!--(imageUploaded)="onImageUploadSuccessByItem($event, it)"-->
<!--></app-upload-image-with-preview>-->
<!--</div>-->
<!--<div class="pic-sound-box">-->
<!--<div nz-row style="width: 50%; padding-bottom: 20px;">-->
<!--<div *ngFor="let it2 of it.soundArr; let i2 = index" nz-col nzSpan="8">-->
<!--<label nz-checkbox nzValue="{{'answer_' + (i2 + 1)}}" [(ngModel)]="it2.answer" (ngModelChange)="clickCheckBox()" >{{i2 + 1}}</label>-->
<!--</div>-->
<!--</div>-->
<!--<div *ngFor="let it2 of it.soundArr; let i2 = index" style="display: flex; align-items: center; padding-bottom: 5px">-->
<!--<span style="padding-right: 10px">sound-{{i2 + 1}}:</span>-->
<!--<app-audio-recorder-->
<!--[audioUrl]="it2.audio_url"-->
<!--(audioUploaded)="onAudioUploadSuccessByItem($event, it2)">-->
<!--</app-audio-recorder>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--<div style="margin: auto; width: 95%;" nz-row nzType="flex" nzJustify="start" nzAlign="middle">-->
<!--<div *ngFor="let it of picArr; let i = index"-->
<!--nz-col nzSpan="8" >-->
<!--<div class="item-box">-->
<!--<h5> id-{{i+1}} </h5>-->
<!--<div style="display: flex; align-items: center; justify-content: center; padding-bottom: 5px">-->
<!--<input type="text" nz-input placeholder="" [(ngModel)]="it.text" (blur)="saveItem()">-->
<!--<button style="margin-left: 10px;" nz-button nzType="danger" (click)="deleteItem(it)">-->
<!--<i nz-icon type="close"></i>-->
<!--</button>-->
<!--</div>-->
<!--<app-upload-image-with-preview-->
<!--style="width: 100%"-->
<!--[picUrl]="it.pic_url"-->
<!--(imageUploaded)="onImageUploadSuccessByItem($event, it)"-->
<!--></app-upload-image-with-preview>-->
<!--<div style="display: flex; align-items: center; justify-content: center">-->
<!--<span style="width: 80px;">-->
<!--question:-->
<!--</span>-->
<!--<app-audio-recorder-->
<!--[audioUrl]="it['q_audio_url']"-->
<!--(audioUploaded)="onAudioUploadSuccessByItem($event, it, 'q')">-->
<!--</app-audio-recorder>-->
<!--</div>-->
<!--<div style="display: flex; align-items: center; justify-content: center">-->
<!--<span style="width: 80px;">-->
<!--answer:-->
<!--</span>-->
<!--<app-audio-recorder-->
<!--[audioUrl]="it['a_audio_url']"-->
<!--(audioUploaded)="onAudioUploadSuccessByItem($event, it, 'a')">-->
<!--</app-audio-recorder>-->
<!--</div>-->
<!--<nz-radio-group [(ngModel)]="it.radioValue" >-->
<!--<label nz-radio nzValue="A" (click)="radioClick(it, 'A')"> <i nz-icon nzType="check" nzTheme="outline"></i> </label>-->
<!--<label nz-radio nzValue="B" (click)="radioClick(it, 'B')"> <i nz-icon nzType="close" nzTheme="outline"></i> </label>-->
<!--</nz-radio-group>-->
<!--</div>-->
<!--</div>-->
</div>
</div>
form/src/app/form/form.component.scss
0 → 100644
View file @
92fd1434
@import
'../style/common_mixin'
;
.model-content
{
width
:
100%
;
height
:
100%
;
.item-box
{
width
:
100%
;
display
:
flex
;
align-items
:
center
;
justify-content
:
center
;
flex-direction
:
column
;
padding
:
10px
;
padding-bottom
:
5vw
;
padding-top
:
5vw
;
}
.pic-sound-box
{
width
:
50%
;
display
:
flex
;
//align-items: center;
flex-direction
:
column
}
.add-btn-box
{
display
:
flex
;
align-items
:
center
;
justify-content
:
center
;
//width: 180px;
height
:
20vw
;
//background: #FFDC00;
padding
:
10px
;
padding-top
:
5vw
;
}
}
form/src/app/form/form.component.ts
View file @
92fd1434
import
{
Component
,
EventEmitter
,
Input
,
OnDestroy
,
OnChanges
,
OnInit
,
Output
,
ApplicationRef
,
ChangeDetectorRef
}
from
'
@angular/core
'
;
import
{
import
{
JsonPipe
}
from
'
@angular/common
'
;
Component
,
EventEmitter
,
OnDestroy
,
OnChanges
,
OnInit
,
Output
,
ApplicationRef
,
ChangeDetectorRef
}
from
'
@angular/core
'
;
@
Component
({
@
Component
({
selector
:
'
app-form
'
,
selector
:
'
app-form
'
,
templateUrl
:
'
./form.component.html
'
,
templateUrl
:
'
./form.component.html
'
,
styleUrls
:
[
'
./form.component.css
'
]
styleUrls
:
[
'
./form.component.
s
css
'
]
})
})
export
class
FormComponent
implements
OnInit
,
OnChanges
,
OnDestroy
{
export
class
FormComponent
implements
OnInit
,
OnChanges
,
OnDestroy
{
// 储存数据用
picArr
=
[];
saveKey
=
"
test_001
"
;
// 储存对象
item
;
constructor
(
private
appRef
:
ApplicationRef
,
private
changeDetectorRef
:
ChangeDetectorRef
)
{
_item
:
any
;
}
KEY
=
'
hw_007
'
;
createShell
()
{
// @Input()
this
.
item
.
wordList
.
push
({
set
item
(
item
)
{
word
:
''
,
this
.
_item
=
item
;
audio
:
''
,
}
backWord
:
''
,
get
item
()
{
backWordAudio
:
''
,
return
this
.
_item
;
});
this
.
save
();
}
}
removeShell
(
idx
)
{
@
Output
()
this
.
item
.
wordList
.
splice
(
idx
,
1
);
update
=
new
EventEmitter
();
this
.
save
();
constructor
(
private
appRef
:
ApplicationRef
,
public
changeDetectorRef
:
ChangeDetectorRef
)
{
}
}
ngOnInit
()
{
ngOnInit
()
{
this
.
item
=
{};
this
.
item
=
{};
this
.
item
.
contentObj
=
{};
// 获取存储的数据
const
getData
=
(
<
any
>
window
).
courseware
.
getData
;
(
<
any
>
window
).
courseware
.
getData
((
data
)
=>
{
getData
((
data
)
=>
{
if
(
data
)
{
if
(
data
)
{
this
.
item
=
data
;
this
.
item
=
data
;
}
else
{
this
.
item
=
{};
}
}
if
(
!
this
.
item
.
contentObj
)
{
this
.
item
.
contentObj
=
{};
}
console
.
log
(
'
~data:
'
,
data
);
console
.
log
(
'
~data str:
'
,
JSON
.
stringify
(
data
));
this
.
init
();
this
.
init
();
this
.
changeDetectorRef
.
markForCheck
();
this
.
changeDetectorRef
.
markForCheck
();
this
.
changeDetectorRef
.
detectChanges
();
this
.
changeDetectorRef
.
detectChanges
();
this
.
refresh
();
},
this
.
saveKey
);
this
.
refresh
();
},
this
.
KEY
);
}
}
ngOnChanges
()
{
ngOnChanges
()
{
}
}
ngOnDestroy
()
{
ngOnDestroy
()
{
}
}
autoPlayBgAudio
;
init
()
{
init
()
{
if
(
this
.
item
.
contentObj
.
picArr
)
{
this
.
picArr
=
this
.
item
.
contentObj
.
picArr
;
}
else
{
this
.
picArr
=
this
.
getDefaultPicArr
();
this
.
item
.
contentObj
.
picArr
=
this
.
picArr
;
}
this
.
autoPlayBgAudio
=
!
this
.
item
.
contentObj
.
stopPlayBgAudio
;
}
getDefaultPicArr
()
{
return
[];
}
}
initData
()
{
}
/**
deleteItem
(
data
)
{
* 储存图片数据
const
index
=
this
.
picArr
.
indexOf
(
data
);
* @param e
if
(
index
!==
-
1
)
{
*/
this
.
picArr
.
splice
(
index
,
1
);
onImageUploadSuccess
(
e
,
key
)
{
}
this
.
item
[
key
]
=
e
.
url
;
this
.
save
();
this
.
save
();
}
}
/**
onImageUploadSuccessByItem
(
e
,
item
,
id
=
null
)
{
* 储存音频数据
if
(
id
!=
null
)
{
* @param e
item
[
id
+
'
_pic_url
'
]
=
e
.
url
;
*/
}
else
{
onAudioUploadSuccess
(
e
,
key
)
{
item
.
pic_url
=
e
.
url
;
this
.
item
[
key
]
=
e
.
url
;
}
this
.
save
();
this
.
save
();
}
}
onWordAudioUploadSuccess
(
e
,
idx
)
{
onAudioUploadSuccessByItem
(
e
,
item
,
id
=
null
)
{
this
.
item
.
wordList
[
idx
].
audio
=
e
.
url
;
if
(
id
!=
null
)
{
item
[
id
+
'
_audio_url
'
]
=
e
.
url
;
}
else
{
item
.
audio_url
=
e
.
url
;
}
this
.
save
();
this
.
save
();
}
}
onBackWordAudioUploadSuccess
(
e
,
idx
)
{
addPic
()
{
this
.
item
.
wordList
[
idx
].
backWordAudio
=
e
.
url
;
this
.
picArr
.
push
({
pic_url
:
''
,
audio_url
:
''
,
// text: '',
// radioValue: 'A'
});
this
.
saveItem
();
}
radioClick
(
it
,
radioValue
)
{
it
.
radioValue
=
radioValue
;
this
.
saveItem
();
}
clickCheckBox
()
{
this
.
item
.
contentObj
.
stopPlayBgAudio
=
!
this
.
autoPlayBgAudio
;
this
.
saveItem
();
}
saveItem
()
{
this
.
save
();
this
.
save
();
}
}
/**
* 储存数据
*/
save
()
{
save
()
{
(
<
any
>
window
).
courseware
.
setData
(
this
.
item
,
null
,
this
.
saveKey
);
(
<
any
>
window
).
courseware
.
setData
(
this
.
item
,
null
,
this
.
KEY
);
this
.
refresh
();
this
.
refresh
();
console
.
log
(
'
this.item =
'
+
JSON
.
stringify
(
this
.
item
));
}
}
/**
* 刷新 渲染页面
*/
refresh
()
{
refresh
()
{
setTimeout
(()
=>
{
setTimeout
(()
=>
{
this
.
appRef
.
tick
();
this
.
appRef
.
tick
();
},
1
);
},
1
);
}
}
}
}
\ No newline at end of file
form/yarn.lock
0 → 100644
View file @
92fd1434
This diff is collapsed.
Click to expand it.
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment