beginning implement add station modal functionality

This commit is contained in:
Jonas Heinrich 2021-03-09 13:04:03 +01:00
parent 318605446b
commit b9b6b39bb8
2 changed files with 24 additions and 13 deletions

View File

@ -103,7 +103,6 @@ export default {
},
mounted() {
this.onRoute()
this.scroll()
},
methods: {
...mapActions([

View File

@ -26,8 +26,8 @@
:station-data="stations" />
<AppContent>
<div class="controls">
<Breadcrumbs @dropped="dropped">
<Breadcrumb title="Home" href="#/" @dropped="droppedOnCrumb" />
<Breadcrumbs>
<Breadcrumb title="Home" href="#/" />
<Breadcrumb title="Favorites" href="#/favorites" />
</Breadcrumbs>
<Actions>
@ -66,21 +66,33 @@
<Modal v-if="modal" @close="closeModal">
<div class="modalContent">
<h2 class="oc-dialog-title">
Add custom station
{{ t('radio', 'Add custom station') }}
</h2>
<form>
<label for="stationName">Name:</label>
<input id="stationName" type="text">
<label for="streamUrl">Stream url:</label>
<input id="streamUrl" type="text">
<label for="faviconUrl">Favicon url:</label>
<input id="faviconUrl" type="text">
<label for="stationName">{{ t('radio', 'Name') }}:</label>
<input
id="stationName"
v-model="station.name"
type="text"
required>
<label for="streamUrl">{{ t('radio', 'Stream url') }}:</label>
<input
id="streamUrl"
v-model="station.streamUrl"
type="url"
required>
<label for="faviconUrl">{{ t('radio', 'Favicon url') }}:</label>
<input
id="faviconUrl"
v-model="station.faviconUrl"
type="url"
required>
</form>
<div class="formControls">
<!-- FIXME: Use nextcloud-vue button component -->
<button class="icon-add-white primary button new-button"
@click="addCustomStation()">
Add station
{{ t('radio', 'Add station') }}
</button>
</div>
</div>
@ -132,6 +144,7 @@ export default {
sidebarStation: {},
tableData: [],
modal: true,
station: {},
}),
computed: {
...mapGetters([
@ -156,7 +169,6 @@ export default {
},
mounted() {
this.onRoute()
this.scroll()
},
methods: {
...mapActions([
@ -230,7 +242,7 @@ export default {
},
addCustomStation() {
console.log('Add custom station')
console.log('Add custom station', this.station.name)
// this.addFavorite(station)
},