Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
AURA
dashboard
Commits
05409b63
Commit
05409b63
authored
Oct 12, 2020
by
Richard Blechinger
Browse files
Extract 'add playlist' modal to a custom page
parent
83d3a0d2
Changes
5
Hide whitespace changes
Inline
Side-by-side
src/Pages/EditPlaylist.vue
→
src/Pages/
AddOr
EditPlaylist.vue
View file @
05409b63
<
style
></
style
>
<
template
>
<b-container
class=
"tw-mb-8"
>
<h1>
Playliste
{{
playlistEditor
.
id
}}
für Sendung '
{{
this
.
selectedShow
.
name
}}
' bearbeiten
</h1>
<b-row
class=
"tw-my-8 tw-items-center"
>
<b-col
cols=
"2"
>
Beschreibung:
</b-col>
<b-col>
<b-form-input
v-model=
"playlistEditor.description"
type=
"text"
placeholder=
"Beschreibung eingeben..."
/>
</b-col>
</b-row>
<!-- If no entries are here (i.e. we add a new playlist), only show
<div
v-if=
"!selectedShow"
class=
"tw-text-center tw-my-8"
>
Lädt...
</div>
<b-container
v-else
class=
"tw-mb-8"
>
<h1>
<template
v-if=
"id"
>
Playliste
{{
playlistEditor
.
id
}}
für Sendung '
{{
selectedShow
.
name
}}
' bearbeiten
</
template
>
<
template
v-else
>
Neue Playliste für Sendung '
{{
selectedShow
.
name
}}
' hinzufügen
</
template
>
</h1>
<b-row
class=
"tw-my-8 tw-items-center"
>
<b-col
cols=
"2"
>
Beschreibung:
</b-col>
<b-col>
<b-form-input
v-model=
"playlistEditor.description"
type=
"text"
placeholder=
"Beschreibung eingeben..."
/>
</b-col>
</b-row>
<!-- If no entries are here (i.e. we add a new playlist), only show
a hint that there's nothing here yet. -->
<div
v-if=
"playlistEditor.entries.length === 0"
align=
"center"
>
Noch keine Einträge vorhanden. Füge doch welche hinzu!
</div>
<!-- As soon as we have at least one entry in our temporary playlist
<div
v-if=
"playlistEditor.entries.length === 0"
align=
"center"
>
Noch keine Einträge vorhanden. Füge doch welche hinzu!
</div>
<!-- As soon as we have at least one entry in our temporary playlist
we can display a table with all the info and action buttons -->
<div
v-else
>
<b-table
ref=
"playlistEditTable"
striped
:items=
"playlistEditor.entries"
:fields=
"playlistEditTableFields"
>
<!-- Column: Index
<div
v-else
>
<b-table
ref=
"playlistEditTable"
striped
:items=
"playlistEditor.entries"
:fields=
"playlistEditTableFields"
>
<!-- Column: Index
Here we just use the array index, because the playlist entries
are ordered as an array, without the need for an extra id field
-->
<template
v-slot:cell(id)=
"data"
>
{{
data
.
index
+
1
}}
.
</
template
>
<
template
v-slot:cell(id)=
"data"
>
{{
data
.
index
+
1
}}
.
</
template
>
<!-- Column: Type
<!-- Column: Type
Based on the entry content (either file or uri), we display
a small badge indicating which type of source this is
-->
<
template
v-slot:cell(type)=
"data"
>
<b-badge
v-if=
"data.item.file"
variant=
"success"
>
Datei
</b-badge>
<b-badge
v-else-if=
"data.item.uri.startsWith('line://')"
variant=
"info"
>
Line-in
</b-badge>
<b-badge
v-else-if=
"data.item.uri.startsWith('http://') || data.item.uri.startsWith('https://')"
variant=
"light"
>
Stream
</b-badge>
<b-badge
v-else
variant=
"dark"
>
Andere
</b-badge>
</
template
>
<!-- Column: Source
<
template
v-slot:cell(type)=
"data"
>
<b-badge
v-if=
"data.item.file"
variant=
"success"
>
Datei
</b-badge>
<b-badge
v-else-if=
"data.item.uri.startsWith('line://')"
variant=
"info"
>
Line-in
</b-badge>
<b-badge
v-else-if=
"data.item.uri.startsWith('http://') || data.item.uri.startsWith('https://')"
variant=
"light"
>
Stream
</b-badge>
<b-badge
v-else
variant=
"dark"
>
Andere
</b-badge>
</
template
>
<!-- Column: Source
Here we display where this playlist entry is coming from
-->
<
template
v-slot:cell(source)=
"data"
>
<span
v-if=
"data.item.file"
>
<span
class=
"tw-font-bold"
>
{{
getFileTitleForPlaylist
(
data
.
item
.
file
.
show
,
data
.
item
.
file
.
id
)
}}
</span><br>
<span
class=
"tw-text-gray-700"
>
(file://
{{
data
.
item
.
file
.
show
}}
/
{{
data
.
item
.
file
.
id
}}
)
</span>
</span>
<span
v-else
>
{{
data
.
item
.
uri
}}
</span>
</
template
>
<!-- Column: Duration
<
template
v-slot:cell(source)=
"data"
>
<span
v-if=
"data.item.file"
>
<span
class=
"tw-font-bold"
>
{{
getFileTitleForPlaylist
(
data
.
item
.
file
.
show
,
data
.
item
.
file
.
id
)
}}
</span><br>
<span
class=
"tw-text-gray-700"
>
(file://
{{
data
.
item
.
file
.
show
}}
/
{{
data
.
item
.
file
.
id
}}
)
</span>
</span>
<span
v-else
>
{{
data
.
item
.
uri
}}
</span>
</
template
>
<!-- Column: Duration
Here we give the user the ability to edit the duration of an entry.
-->
<
template
v-slot:cell(duration)=
"data"
>
<span
v-if=
"playlistEditor.durationField === data.index"
>
<input
ref=
"durationField"
v-model=
"playlistEditor.newDuration"
type=
"text"
class=
"tw-w-24"
placeholder=
"hh:mm:ss"
pattern=
"\d
{2}:\d{2}(:\d{2})?"
@blur="checkAndUpdateDuration"
>
</span>
<span
v-else-if=
"data.item.file"
>
{{
prettyNanoseconds
(
getFileById
(
data
.
item
.
file
.
id
).
duration
)
}}
</span>
<span
v-
b-tooltip=
"'Klicken um zu bearbeiten'
"
class=
"tw-underline hover:tw-no-underline tw-cursor-pointer
"
v-else-if=
"data.item.duration
"
@
click=
"toggleDurationField(data.index)"
>
{{
prettyNanoseconds
(
data
.
item
.
duration
)
}}
</span>
<span
v-else
>
<span
v-b-tooltip=
"'Klicken um zu bearbeiten'"
class=
"tw-text-gray-700 tw-underline hover:tw-no-underline tw-cursor-pointer"
@
click=
"toggleDurationField(data.index)"
>
(Unbekannt)
</span>
</span>
</
template
>
<!-- Column: Actions
<
template
v-slot:cell(duration)=
"data"
>
<span
v-if=
"playlistEditor.durationField === data.index"
>
<input
ref=
"durationField"
v-model=
"playlistEditor.newDuration"
type=
"text"
class=
"tw-w-24"
placeholder=
"hh:mm:ss"
pattern=
"\d
{2}:\d{2}(:\d{2})?"
@blur="checkAndUpdateDuration"
>
</span>
<span
v-else-if=
"data.item.file"
>
{{
prettyNanoseconds
(
getFileById
(
data
.
item
.
file
.
id
).
duration
)
}}
</span>
<span
v-
else-if=
"data.item.duration
"
v-b-tooltip=
"'Klicken um zu bearbeiten'
"
class=
"tw-underline hover:tw-no-underline tw-cursor-pointer
"
@
click=
"toggleDurationField(data.index)"
>
{{
prettyNanoseconds
(
data
.
item
.
duration
)
}}
</span>
<span
v-else
>
<span
v-b-tooltip=
"'Klicken um zu bearbeiten'"
class=
"tw-text-gray-700 tw-underline hover:tw-no-underline tw-cursor-pointer"
@
click=
"toggleDurationField(data.index)"
>
(Unbekannt)
</span>
</span>
</
template
>
<!-- Column: Actions
Finally some buttons to reorder or delete playlist entries
-->
<
template
v-slot:cell(actions)=
"data"
>
<b-button-group
size=
"sm"
>
<b-button
:disabled=
"data.index === 0"
@
click=
"movePlaylistItemUp(data.index)"
>
<b
class=
"upDownArrows"
>
↑
</b>
</b-button>
<b-button
:disabled=
"data.index === playlistEditor.entries.length - 1"
@
click=
"movePlaylistItemDown(data.index)"
>
<b
class=
"upDownArrows"
>
↓
</b>
</b-button>
<b-button
variant=
"danger"
@
click=
"deletePlaylistItem(data.index)"
>
Delete
</b-button>
</b-button-group>
</
template
>
</b-table>
<hr>
<p
class=
"d-flex justify-content-between border-t"
>
<span
class=
"font-weight-bold"
>
Playlisteinträge
</span>
<span>
Dauer: {{ playlistDuration }}
</span>
</p>
<hr>
<div
v-if=
"playlistExceedsAllowedUnknowns"
class=
"tw-text-red-600 tw-my-4"
<
template
v-slot:cell(actions)=
"data"
>
<b-button-group
size=
"sm"
>
<b-button
:disabled=
"data.index === 0"
@
click=
"movePlaylistItemUp(data.index)"
>
Es gibt 2 oder mehr Einträge die eine unbekannte Dauer haben. Bitte korrigiere das, indem du auf die Dauer
in der Tabelle klickst und manuell eine einträgst. Es darf maximal ein Eintrag mit unbekannter Dauer vorhanden
sein.
</div>
</div>
<b
class=
"upDownArrows"
>
↑
</b>
</b-button>
<b-button
:disabled=
"data.index === playlistEditor.entries.length - 1"
@
click=
"movePlaylistItemDown(data.index)"
>
<b
class=
"upDownArrows"
>
↓
</b>
</b-button>
<!-- Below the table with the playlists entry we display buttons to
<b-button
variant=
"danger"
@
click=
"deletePlaylistItem(data.index)"
>
Delete
</b-button>
</b-button-group>
</
template
>
</b-table>
<hr>
<p
class=
"d-flex justify-content-between border-t"
>
<span
class=
"font-weight-bold"
>
Playlisteinträge
</span>
<span>
Dauer: {{ playlistDuration }}
</span>
</p>
<hr>
<div
v-if=
"playlistExceedsAllowedUnknowns"
class=
"tw-text-red-600 tw-my-4"
>
Es gibt 2 oder mehr Einträge die eine unbekannte Dauer haben. Bitte korrigiere das, indem du auf die Dauer
in der Tabelle klickst und manuell eine einträgst. Es darf maximal ein Eintrag mit unbekannter Dauer vorhanden
sein.
</div>
</div>
<!-- Below the table with the playlists entry we display buttons to
add new entries to the table - these can either be files from our
uploaded/imported files, or one of the preconfigured inputs, or a
stream.
TODO: should we disable choosing files that are still being imported?
TODO: make the inputs configurable
-->
<b-modal
id=
"modal-edit-playlist-add-stream"
title=
"Add stream to the playlist"
@
ok=
"addPlaylistItemStream('save')"
<b-modal
id=
"modal-edit-playlist-add-stream"
title=
"Add stream to the playlist"
@
ok=
"addPlaylistItemStream('save')"
>
<b-input
v-model=
"playlistEditor.newStreamURL"
type=
"url"
>
...
</b-input>
</b-modal>
<div
class=
"tw-flex tw-justify-between"
>
<b-button-group>
<b-dropdown
text=
"Datei"
>
<b-dropdown-item
v-for=
"(file, index) in files"
:key=
"index"
@
click=
"addPlaylistItemFile(file.show, file.id)"
>
{{ file.id }}: {{ file.metadata.title ? file.metadata.title : "" }} ({{
prettyNanoseconds(file.duration) }}, {{ prettyFileSize(file.size) }}, {{ file.source.uri }})
</b-dropdown-item>
</b-dropdown>
<b-dropdown
text=
"Line-in"
>
<b-dropdown-item
@
click=
"addPlaylistItemLine('0')"
>
Studio 1
</b-dropdown-item>
<b-dropdown-item
@
click=
"addPlaylistItemLine('1')"
>
Preprod
</b-dropdown-item>
<b-dropdown-item
@
click=
"addPlaylistItemLine('2')"
>
Line 2
</b-dropdown-item>
</b-dropdown>
<b-button
@
click=
"addPlaylistItemStream('openModal')"
>
<b-input
v-model=
"playlistEditor.newStreamURL"
type=
"url"
>
...
</b-input>
</b-modal>
<div
class=
"tw-flex tw-justify-between"
>
<b-button-group>
<b-dropdown
text=
"Datei"
>
<b-dropdown-item
v-for=
"(file, index) in files"
:key=
"index"
@
click=
"addPlaylistItemFile(file.show, file.id)"
>
{{ file.id }}: {{ file.metadata.title ? file.metadata.title : "" }} ({{
prettyNanoseconds(file.duration) }}, {{ prettyFileSize(file.size) }}, {{ file.source.uri }})
</b-dropdown-item>
</b-dropdown>
<b-dropdown
text=
"Line-in"
>
<b-dropdown-item
@
click=
"addPlaylistItemLine('0')"
>
Studio 1
</b-dropdown-item>
<b-dropdown-item
@
click=
"addPlaylistItemLine('1')"
>
Preprod
</b-dropdown-item>
<b-dropdown-item
@
click=
"addPlaylistItemLine('2')"
>
Line 2
</b-dropdown-item>
</b-dropdown>
<b-button
@
click=
"addPlaylistItemStream('openModal')"
>
Stream
</b-button>
</b-button-group>
<b-button
variant=
"success"
:disabled=
"playlistExceedsAllowedUnknowns"
@
click=
"storePlaylist"
>
Speichern
</b-button>
</div>
</b-container>
Stream
</b-button>
</b-button-group>
<b-button
variant=
"success"
:disabled=
"playlistExceedsAllowedUnknowns"
@
click=
"storePlaylist"
>
Speichern
</b-button>
</div>
</b-container>
</template>
<
script
>
...
...
@@ -248,7 +265,12 @@
export
default
{
mixins
:
[
prettyDate
],
props
:
[
'
id
'
],
props
:
{
id
:
{
type
:
[
Number
,
Boolean
],
default
:
false
,
},
},
// include the modal for displaying file import logs
data
()
{
...
...
@@ -327,7 +349,10 @@
},
created
()
{
this
.
editPlaylist
(
this
.
id
);
this
.
$store
.
dispatch
(
'
shows/fetchShows
'
);
this
.
id
?
this
.
editPlaylist
()
:
this
.
addPlaylist
()
},
methods
:
{
...
...
@@ -397,10 +422,6 @@
}
},
editPlaylistItemDuration
(
index
)
{
console
.
log
(
this
.
playlistEditor
.
entries
,
index
);
},
movePlaylistItemUp
(
index
)
{
if
(
index
>
0
&&
index
<
this
.
playlistEditor
.
entries
.
length
)
{
let
temp
=
this
.
playlistEditor
.
entries
[
index
-
1
]
...
...
@@ -465,12 +486,20 @@
this
.
$bvModal
.
show
(
'
modal-edit-playlist
'
)
},
editPlaylist
(
id
)
{
editPlaylist
()
{
let
playlist
=
this
.
getPlaylistById
(
this
.
id
);
console
.
log
(
"
AAAAA
"
,
playlist
);
if
(
!
playlist
)
{
this
.
$router
.
push
({
name
:
'
addPlaylist
'
})
return
;
}
this
.
playlistEditor
.
mode
=
'
edit
'
this
.
playlistEditor
.
entries
=
[]
this
.
playlistEditor
.
id
=
id
let
playlist
=
this
.
getPlaylistById
(
id
)
this
.
playlistEditor
.
id
=
this
.
id
this
.
playlistEditor
.
description
=
playlist
.
description
for
(
let
i
in
playlist
.
entries
)
{
let
entry
=
{}
if
(
playlist
.
entries
[
i
].
file
)
{
...
...
src/components/emissions/ModalEdit.vue
View file @
05409b63
...
...
@@ -99,15 +99,17 @@
<b-form-select
v-model=
"repetitionRule"
:options=
"repetitionOptions"
>
</b-form-select>
/>
</label>
<b-checkbox
v-model=
"useSameTime"
>
Use same start and end time
</b-checkbox>
</b-col>
<b-col
cols=
"6"
v-if=
"!useSameTime"
>
<b-col
v-if=
"!useSameTime"
cols=
"6"
>
<label
class=
"tw-leading-loose"
>
Repeat at
<b-form-input
type=
"time"
/>
...
...
src/components/filemanager/EditPlaylistModal.vue
deleted
100644 → 0
View file @
83d3a0d2
<
template
>
<b-modal
id=
"modal-edit-playlist"
size=
"lg"
:title=
"playlistEditor.mode === 'edit' ? 'Edit playlist' : 'Add new playlist'"
@
ok=
"storePlaylist"
>
<b-row
v-if=
"playlistEditor.mode === 'edit'"
style=
"padding-bottom: 1em;"
>
<b-col
cols=
"3"
>
Playlist index:
</b-col>
<b-col>
{{
playlistEditor
.
id
}}
</b-col>
</b-row>
<b-row>
<b-col
cols=
"3"
>
Description:
</b-col>
<b-col>
<b-form-input
v-model=
"playlistEditor.description"
type=
"text"
/>
</b-col>
</b-row>
<hr>
<p
class=
"d-flex justify-content-between"
>
<span
class=
"font-weight-bold"
>
Playlist entries
</span>
<span>
Duration:
{{
playlistDuration
}}
</span>
</p>
<!-- If no entries are here (i.e. we add a new playlist), only show
a hint that there's nothing here yet. -->
<div
v-if=
"playlistEditor.entries.length === 0"
align=
"center"
>
No entries yet. Add some.
</div>
<!-- As soon as we have at least one entry in our temporary playlist
we can display a table with all the info and action buttons -->
<div
v-else
>
<b-table
ref=
"playlistEditTable"
striped
:items=
"playlistEditor.entries"
:fields=
"playlistEditTableFields"
>
<!-- Column: Index
Here we just use the array index, because the playlist entries
are ordered as an array, without the need for an extra id field
-->
<template
v-slot:cell(id)=
"data"
>
{{
data
.
index
+
1
}}
.
</
template
>
<!-- Column: Type
Based on the entry content (either file or uri), we display
a small badge indicating which type of source this is
-->
<
template
v-slot:cell(type)=
"data"
>
<b-badge