MyFavMirrors/owntone-server
1
0
Fork 0
mirror of https://github.com/owntone/owntone-server.git synced 2025-03-28 00:10:59 -04:00
Code Issues Packages Projects Releases Wiki Activity

[htdocs] List outputs in web interface and support device verification

Browse Source
This commit is contained in:
chme 2017-10-29 09:12:57 +01:00 committed by ejurgensen
parent eece4ce768
commit 24782f5d45
2 changed files with 65 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
htdocs/admin.html
View File

@ -122,6 +122,38 @@
</div>
</div>
<!-- Outputs -->
<div class="columns is-centered fd-section-content">
<div class="column is-3">
<h2 class="title is-5">
<span class="icon"><i class="fa fa-volume-up"></i></span>
Outputs
</h2>
</div>
<div class="column is-7 content">
<div v-for="output in outputs">
<div class="field">
<div class="control">
<label class="checkbox">
<input type="checkbox" v-model="output.selected" v-on:change="selectOutputs"> {{ output.name }}
</label>
</div>
</div>
<form v-on:submit.prevent="kickoffVerification" style="margin-bottom:24px;" v-show="output.needs_auth_key">
<div class="field has-addons">
<div class="control">
<input class="input" type="text" placeholder="Enter verification code" v-model="verification_req.pin">
</div>
<div class="control">
<button class="button is-primary" type="submit">Send</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</section>

34
htdocs/js/forked-daapd.js
View File

@ -5,6 +5,8 @@ var app = new Vue({
data: {
config: {},
library: {},
outputs: [],
verification_req: { pin: '' },
spotify: {},
pairing: {},
pairing_req: { pin: '' },
@ -16,6 +18,7 @@ var app = new Vue({
created: function () {
this.loadConfig();
this.loadLibrary();
this.loadOutputs();
this.loadSpotify();
this.loadPairing();
this.loadLastfm();
@ -32,6 +35,10 @@ var app = new Vue({
axios.get('/api/library').then(response => this.library = response.data);
},
loadOutputs: function() {
axios.get('/api/outputs').then(response => this.outputs = response.data.outputs);
},
loadSpotify: function() {
axios.get('/api/spotify').then(response => this.spotify = response.data);
},
@ -58,6 +65,28 @@ var app = new Vue({
});
},
kickoffVerification: function() {
axios.post('/api/verification', this.verification_req).then(response => {
console.log('Kicked off verification');
this.verification_req.pin = '';
});
},
selectOutputs: function() {
var selected_outputs = [];
for (var i = 0; i < this.outputs.length; i++) {
if (this.outputs[i].selected) {
selected_outputs.push(this.outputs[i].id);
}
}
axios.post('/api/select-outputs', { outputs: selected_outputs }).then(response => {
if (!this.config.websocket_port) {
this.loadOutputs();
}
});
},
loginLibspotify: function() {
axios.post('/api/spotify-login', this.libspotify).then(response => {
this.libspotify.user = '';
@ -104,7 +133,7 @@ var app = new Vue({
var socket = new WebSocket('ws://' + document.domain + ':' + this.config.websocket_port, 'notify');
const vm = this;
socket.onopen = function() {
socket.send(JSON.stringify({ notify: ['update', 'pairing', 'spotify', 'lastfm']}));
socket.send(JSON.stringify({ notify: ['update', 'pairing', 'spotify', 'lastfm', 'outputs']}));
socket.onmessage = function(response) {
console.log(response.data); // upon message
var data = JSON.parse(response.data);
@ -120,6 +149,9 @@ var app = new Vue({
if (data.notify.includes('lastfm')) {
vm.loadLastfm();
}
if (data.notify.includes('outputs')) {
vm.loadOutputs();
}
};
};
}