Commit bcaa0446 authored by jackie / Andrea Ida Malkah Klaura's avatar jackie / Andrea Ida Malkah Klaura
Browse files

META: switching to vue/recommended linting

Our linting config in package.json was:
```
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
```

Now switching to "plugin:vue/recommended" and apply all auto-fixes
parent 34b66db6
......@@ -32,7 +32,7 @@
"node": true
},
"extends": [
"plugin:vue/essential",
"plugin:vue/recommended",
"eslint:recommended"
],
"rules": {
......
<template>
<div id="app">
<app-header v-bind:modules="modules" v-bind:user="user"></app-header>
<router-view/>
<app-footer></app-footer>
<app-header
:modules="modules"
:user="user"
/>
<router-view />
<app-footer />
</div>
</template>
......@@ -15,7 +18,7 @@ import footer from './components/Footer.vue'
import axios from 'axios'
export default {
name: 'app',
name: 'App',
components: {
'app-header': header,
'app-footer': footer
......@@ -66,6 +69,27 @@ export default {
else return this.modules_logged_out
}
},
mounted () {
// TODO: remove oidc logging after thorough testing
oidc.Log.logger = console
let self = this
this.oidcmgr.events.addAccessTokenExpiring(function () {
console.log('starting silent access_token renewal')
self.oidcmgr.signinSilent().then(function (user) {
self.user.access_token = user.access_token
console.log(self.user.access_token)
}).catch(function (err) {
console.log(err)
alert('Your OpenID access token could not be renewed automatically.\n' +
'You will be logged out in ' + process.env.VUE_APP_API_STEERING_OIDC_EXPIRE_NOTIFICATION + ' seconds.')
})
})
this.oidcmgr.events.addAccessTokenExpired(function () {
console.log('expired!')
self.signOut()
})
this.getOIDCUser()
},
methods: {
signIn () {
this.oidcmgr.signinRedirect().catch(function (err) {
......@@ -133,27 +157,6 @@ export default {
console.log(new Date(user.expires_at * 1000).toUTCString())
console.log(user.access_token)
}
},
mounted () {
// TODO: remove oidc logging after thorough testing
oidc.Log.logger = console
let self = this
this.oidcmgr.events.addAccessTokenExpiring(function () {
console.log('starting silent access_token renewal')
self.oidcmgr.signinSilent().then(function (user) {
self.user.access_token = user.access_token
console.log(self.user.access_token)
}).catch(function (err) {
console.log(err)
alert('Your OpenID access token could not be renewed automatically.\n' +
'You will be logged out in ' + process.env.VUE_APP_API_STEERING_OIDC_EXPIRE_NOTIFICATION + ' seconds.')
})
})
this.oidcmgr.events.addAccessTokenExpired(function () {
console.log('expired!')
self.signOut()
})
this.getOIDCUser()
}
}
</script>
......
......@@ -2,15 +2,15 @@
<b-container>
<h1>Credits</h1>
<p>
autoradio/<b>dashboard</b><br />
... developed under the GNU General Public License, by<br />
autoradio/<b>dashboard</b><br>
... developed under the GNU General Public License, by<br>
<ul>
<li>Andrea Ida Malkah Klaura <a href="mailto:jackie@o94.at">jackie@o94.at</a></li>
<li>...</li>
</ul>
</p>
<p>
<b>Graphics &amp; Icons</b><br />
<b>Graphics &amp; Icons</b><br>
<ul>
<li>animated loading icon: <a href="https://loading.io/spinner">spinner by loading.io</a>, CC-BY License</li>
<li>all other Icons: <a href="http://tango.freedesktop.org/">Tango Project</a>, Public Domain</li>
......
......@@ -6,13 +6,19 @@
a productive version.
</p>
<p>
Here we go: <b-button size="lg" variant="warning" @click="debug()">Debug now!</b-button>
Here we go: <b-button
size="lg"
variant="warning"
@click="debug()"
>
Debug now!
</b-button>
</p>
Response headers: <br />
Response headers: <br>
<div style="border: 1px dotted #aaa">
{{ response.headers }}
</div>
Response data: <br />
Response data: <br>
<div style="border: 1px dotted #aaa">
{{ response.data }}
</div>
......
......@@ -5,12 +5,22 @@
<h3>Dateien und Playlists</h3>
</b-col>
<b-col align="right">
<b-dropdown id="ddshows" text="Sendereihe auswählen" variant="info">
<b-dropdown-item v-for="(show, index) in this.shows" :key="show.id" v-on:click="switchShow(index)">{{ show.name }}</b-dropdown-item>
<b-dropdown
id="ddshows"
text="Sendereihe auswählen"
variant="info"
>
<b-dropdown-item
v-for="(show, index) in this.shows"
:key="show.id"
@click="switchShow(index)"
>
{{ show.name }}
</b-dropdown-item>
</b-dropdown>
</b-col>
</b-row>
<hr />
<hr>
<b-jumbotron>
<template slot="header">
<span v-if="loaded.shows">
......@@ -21,11 +31,23 @@
<template slot="lead">
<span v-if="loaded.shows">{{ shows[currentShow].short_description }}</span>
</template>
<hr />
<hr>
<div align="center">
<b-button-group>
<b-button size="lg" :variant="button.files" @click="switchMode('files')">Files</b-button>
<b-button size="lg" :variant="button.playlists" @click="switchMode('playlists')">Playlists</b-button>
<b-button
size="lg"
:variant="button.files"
@click="switchMode('files')"
>
Files
</b-button>
<b-button
size="lg"
:variant="button.playlists"
@click="switchMode('playlists')"
>
Playlists
</b-button>
</b-button-group>
</div>
</b-jumbotron>
......@@ -34,86 +56,200 @@
<div v-if="!loaded.files">
<b-row>
<b-col align="center">
<img src="../assets/radio.gif" alt="loading data" />
<img
src="../assets/radio.gif"
alt="loading data"
>
</b-col>
</b-row>
</div>
<div v-else>
<b-modal id="modal-add-file" title="Add new file" @ok="addFile">
<b-modal
id="modal-add-file"
title="Add new file"
@ok="addFile"
>
<div v-if="addNewFileURI">
<b-row>
<b-col md="2">
<b>Link:</b>
</b-col>
<b-col>
<b-form-input type="url" v-model="uploadSourceURI" placeholder="Insert a HTTP(S) link here"></b-form-input>
<b-form-input
v-model="uploadSourceURI"
type="url"
placeholder="Insert a HTTP(S) link here"
/>
</b-col>
</b-row>
</div>
<div v-else>
<b-form-file v-model="uploadSourceFile" accept="audio/*" placeholder="Choose a file..." drop-placeholder="Drop file here..."></b-form-file>
<b-form-file
v-model="uploadSourceFile"
accept="audio/*"
placeholder="Choose a file..."
drop-placeholder="Drop file here..."
/>
</div>
<hr>
<div align="center">
<b-form-checkbox v-model="addNewFileURI" value="true" unchecked_value="false">
<b-form-checkbox
v-model="addNewFileURI"
value="true"
unchecked_value="false"
>
Download from remote source instead of uploading a file
</b-form-checkbox>
</div>
</b-modal>
<b-modal id="modal-edit-file" title="Edit meta information" size="lg" @ok="saveFile">
<b-modal
id="modal-edit-file"
title="Edit meta information"
size="lg"
@ok="saveFile"
>
<b-row>
<b-col md="2">Artist:</b-col>
<b-col><b-form-input v-model="temp.artist" type="text"></b-form-input></b-col>
<b-col md="2">
Artist:
</b-col>
<b-col>
<b-form-input
v-model="temp.artist"
type="text"
/>
</b-col>
</b-row>
<b-row>
<b-col md="2">Album:</b-col>
<b-col><b-form-input v-model="temp.album" type="text"></b-form-input></b-col>
<b-col md="2">
Album:
</b-col>
<b-col>
<b-form-input
v-model="temp.album"
type="text"
/>
</b-col>
</b-row>
<b-row>
<b-col md="2">Title:</b-col>
<b-col><b-form-input v-model="temp.title" type="text"></b-form-input></b-col>
<b-col md="2">
Title:
</b-col>
<b-col>
<b-form-input
v-model="temp.title"
type="text"
/>
</b-col>
</b-row>
<hr />
<hr>
<b-row>
<b-col md="2">Sourced from:</b-col>
<b-col md="2">
Sourced from:
</b-col>
<b-col>{{ temp.uri }}</b-col>
</b-row>
</b-modal>
<div v-if="files.length === 0" align="center">
<b-alert show variant="warning">There are no files for this show yet.</b-alert>
<b-button variant="success" v-b-modal.modal-add-file>Upload or add a file</b-button>
<div
v-if="files.length === 0"
align="center"
>
<b-alert
show
variant="warning"
>
There are no files for this show yet.
</b-alert>
<b-button
v-b-modal.modal-add-file
variant="success"
>
Upload or add a file
</b-button>
</div>
<div v-else>
<div align="center" style="padding-bottom: 1.5em;">
<b-button variant="success" v-b-modal.modal-add-file>Upload or add a file</b-button>
<div
align="center"
style="padding-bottom: 1.5em;"
>
<b-button
v-b-modal.modal-add-file
variant="success"
>
Upload or add a file
</b-button>
</div>
<b-table ref="filesTable" striped :fields="filesTableFields" :items="files">
<template slot="metadata.album" slot-scope="data">
<span v-if="data.item.source.import.state !== 'done'"><img src="../assets/radio.gif" width="24" alt="loading data" /></span>
<b-table
ref="filesTable"
striped
:fields="filesTableFields"
:items="files"
>
<template
slot="metadata.album"
slot-scope="data"
>
<span v-if="data.item.source.import.state !== 'done'"><img
src="../assets/radio.gif"
width="24"
alt="loading data"
></span>
<span v-else>{{ data.value }}</span>
</template>
<template slot="metadata.title" slot-scope="data">
<template
slot="metadata.title"
slot-scope="data"
>
<span v-if="data.item.source.import.state === 'done'">{{ data.value }}</span>
<span v-else-if="data.item.source.import.progress !== undefined">{{ data.item.source.import.progress.step }} :</span>
</template>
<template slot="duration" slot-scope="data">
<div v-if="data.item.source.import.state === 'done'">{{ prettyNanoseconds(data.value) }}</div>
<template
slot="duration"
slot-scope="data"
>
<div v-if="data.item.source.import.state === 'done'">
{{ prettyNanoseconds(data.value) }}
</div>
<div v-else-if="data.item.source.import.progress !== undefined">
<div v-if="data.item.source.import.progress.step === 'fetching'">
<b-progress :value="data.item.source.import.progress.progress" :max="1" show-progress variant="info" animated></b-progress>
<b-progress
:value="data.item.source.import.progress.progress"
:max="1"
show-progress
variant="info"
animated
/>
</div>
<div v-else>
<b-progress :value="data.item.source.import.progress.progress" :max="1" show-progress variant="success" animated></b-progress>
<b-progress
:value="data.item.source.import.progress.progress"
:max="1"
show-progress
variant="success"
animated
/>
</div>
</div>
</template>
<template slot="size" slot-scope="data">
<template
slot="size"
slot-scope="data"
>
<span v-if="data.item.source.import.state === 'done'">{{ prettyFileSize(data.value) }}</span>
</template>
<template slot="actions" slot-scope="data">
<template
slot="actions"
slot-scope="data"
>
<b-button-group size="sm">
<b-button @click="editFile(data.item.id)">Edit</b-button>
<b-button variant="danger" @click="deleteFile(data.item.id)">Delete</b-button>
<b-button @click="editFile(data.item.id)">
Edit
</b-button>
<b-button
variant="danger"
@click="deleteFile(data.item.id)"
>
Delete
</b-button>
</b-button-group>
</template>
</b-table>
......@@ -125,17 +261,36 @@
<div v-if="!loaded.playlists">
<b-row>
<b-col align="center">
<img src="../assets/radio.gif" alt="loading data" />
<img
src="../assets/radio.gif"
alt="loading data"
>
</b-col>
</b-row>
</div>
<div v-else>
<div v-if="playlists.length === 0" align="center">
<b-alert show variant="warning">There are no playlists for this show yet.</b-alert>
<b-button variant="success" @click="notYetImplemented">Create a playlist</b-button>
<div
v-if="playlists.length === 0"
align="center"
>
<b-alert
show
variant="warning"
>
There are no playlists for this show yet.
</b-alert>
<b-button
variant="success"
@click="notYetImplemented"
>
Create a playlist
</b-button>
</div>
<div v-else>
<b-table striped :items="playlistsTable" />
<b-table
striped
:items="playlistsTable"
/>
</div>
</div>
</div>
......@@ -148,6 +303,7 @@ import filesize from 'filesize'
import prettyDate from '../mixins/prettyDate'
export default {
mixins: [ prettyDate ],
data () {
return {
shows: [], // an array of objects describing our shows (empty at load, will be populated on created())
......@@ -186,7 +342,6 @@ export default {
]
}
},
mixins: [ prettyDate ],
computed: {
playlistsTable: function (){
var arr = []
......@@ -201,6 +356,33 @@ export default {
return arr
}
},
created () {
// when we enter this module, we want to load all shows of the current user
// before we search for corresponding shows in the tank
var uri = process.env.VUE_APP_API_STEERING_SHOWS
// only the superuser should see all shows and therefore files and playlists
// normal users should only see their own shows
if (!this.$parent.user.steeringUser.is_superuser) {
uri += '?owner=' + this.$parent.user.steeringUser.id
}
// now make the API call to fetch the shows
axios.get(uri, {
withCredentials: true,
headers: { 'Authorization': 'Bearer ' + this.$parent.user.access_token }
}).then(response => {
if (response.data.length === 0) {
alert('There are now shows associated with your account!')
return
}
this.shows = response.data
this.currentShowID = this.shows[0].id
this.currentShow = 0
this.loaded.shows = true
this.switchShow(this.currentShow)
}).catch(error => {
alert('There was an error fetching shows from steering: ' + error)
})
},
methods: {
notYetImplemented: function () {
alert('By the mighty witchcraftry of the mother of time!\n\nThis feature is not implemented yet.')
......@@ -439,33 +621,6 @@ export default {
alert('There was an error fetching playlists from tank: ' + error)
})
}
},
created () {
// when we enter this module, we want to load all shows of the current user
// before we search for corresponding shows in the tank
var uri = process.env.VUE_APP_API_STEERING_SHOWS
// only the superuser should see all shows and therefore files and playlists
// normal users should only see their own shows
if (!this.$parent.user.steeringUser.is_superuser) {
uri += '?owner=' + this.$parent.user.steeringUser.id
}
// now make the API call to fetch the shows
axios.get(uri, {
withCredentials: true,
headers: { 'Authorization': 'Bearer ' + this.$parent.user.access_token }
}).then(response => {
if (response.data.length === 0) {
alert('There are now shows associated with your account!')
return
}
this.shows = response.data
this.currentShowID = this.shows[0].id
this.currentShow = 0
this.loaded.shows = true
this.switchShow(this.currentShow)
}).catch(error => {
alert('There was an error fetching shows from steering: ' + error)
})
}
}
</script>
......
......@@ -5,7 +5,10 @@
<b-col sm="8">
autoradio/<b>dashboard v0.0.23</b>
</b-col>
<b-col sm="4" align="right">
<b-col
sm="4"
align="right"
>
... bla ... bla ... hear the music?
</b-col>
</b-row>
......
......@@ -6,40 +6,95 @@
<b-col md="10">
<span class="header-title"><router-link to="home"><span class="d-none d-sm-inline">autoradio/</span><b>dashboard</b></router-link></span>
</b-col>
<b-col md="2" class="d-none d-sm-none d-md-block" align="right">
<a href="http://o94.at" target="new"><img class="header-logo" src="../assets/logo.jpg" /></a>
<b-col
md="2"
class="d-none d-sm-none d-md-block"
align="right"
>
<a
href="http://o94.at"
target="new"
><img
class="header-logo"
src="../assets/logo.jpg"
></a>
</b-col>
</b-row>
</b-container>
</div>
<div>
<b-container>
<b-navbar toggleable="lg" type="dark" variant="dark">
<b-navbar
toggleable="lg"
type="dark"
variant="dark"
>
<span class="d-none d-sm-inline d-lg-none menu-context-info">For more options tap the menu button on the right:</span>
<span class="d-sm-none menu-context-info">Hit menu button for more:</span>
<b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
<b-collapse is-nav id="nav_collapse">
<b-navbar-toggle target="nav_collapse" />
<b-collapse
id="nav_collapse"
is-nav
>
<b-navbar-nav>
<b-nav-item v-for="mod in modules" :key="mod.slug" :to="mod.slug">{{ mod.title }}</b-nav-item>
<b-nav-item
v-for="mod in modules"
:key="mod.slug"
:to="mod.slug"
>
{{ mod.title }}
</b-nav-item>
</b-navbar-nav>
<b-navbar-nav class="ml-auto">
<b-nav-item-dropdown text="EN" right>
<b-dropdown-item href="#">EN</b-dropdown-item>
<b-dropdown-item href="#">DE</b-dropdown-item>
<b-nav-item-dropdown
text="EN"
right
>
<b-dropdown-item href="#">
EN
</b-dropdown-item>
<b-dropdown-item href="#">
DE
</b-dropdown-item>
</b-nav-item-dropdown>
<b-nav-item-dropdown v-if="user.logged_in" right>
<b-nav-item-dropdown
v-if="user.logged_in"
right
>
<!-- Using button-content slot -->
<template slot="button-content">
<em>{{ user.name }}&l