mirror of
https://github.com/owntone/owntone-server.git
synced 2025-04-23 20:15:41 -04:00
[htdocs] Add admin web interface
This commit is contained in:
chme
parent
2c51c6571a
commit
b678542ad6
@ -8,7 +8,7 @@ sysconf_DATA = $(CONF_FILE)
|
|||||||
|
|
||||||
BUILT_SOURCES = $(CONF_FILE) $(SYSTEMD_SERVICE_FILE)
|
BUILT_SOURCES = $(CONF_FILE) $(SYSTEMD_SERVICE_FILE)
|
||||||
|
|
||||||
SUBDIRS = sqlext src
|
SUBDIRS = sqlext src htdocs
|
||||||
|
|
||||||
dist_man_MANS = forked-daapd.8
|
dist_man_MANS = forked-daapd.8
|
||||||
|
|
||||||
|
|||||||
@ -390,6 +390,7 @@ dnl --- End options ---
|
|||||||
AC_CONFIG_FILES([
|
AC_CONFIG_FILES([
|
||||||
src/Makefile
|
src/Makefile
|
||||||
sqlext/Makefile
|
sqlext/Makefile
|
||||||
|
htdocs/Makefile
|
||||||
Makefile
|
Makefile
|
||||||
forked-daapd.spec
|
forked-daapd.spec
|
||||||
])
|
])
|
||||||
|
|||||||
32
htdocs/Makefile.am
Normal file
32
htdocs/Makefile.am
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
htdocsdir = $(datadir)/forked-daapd/htdocs
|
||||||
|
|
||||||
|
htdocs_DATA = \
|
||||||
|
admin.html
|
||||||
|
|
||||||
|
htdocscssdir = $(datadir)/forked-daapd/htdocs/css
|
||||||
|
|
||||||
|
htdocscss_DATA = \
|
||||||
|
css/bulma.min.css \
|
||||||
|
css/font-awesome.min.css \
|
||||||
|
css/forked-daapd.css
|
||||||
|
|
||||||
|
htdocsfontsdir = $(datadir)/forked-daapd/htdocs/fonts
|
||||||
|
|
||||||
|
htdocsfonts_DATA = \
|
||||||
|
fonts/FontAwesome.otf\
|
||||||
|
fonts/fontawesome-webfont.eot \
|
||||||
|
fonts/fontawesome-webfont.svg \
|
||||||
|
fonts/fontawesome-webfont.ttf \
|
||||||
|
fonts/fontawesome-webfont.woff \
|
||||||
|
fonts/fontawesome-webfont.woff2
|
||||||
|
|
||||||
|
htdocsjsdir = $(datadir)/forked-daapd/htdocs/js
|
||||||
|
|
||||||
|
htdocsjs_DATA = \
|
||||||
|
js/axios.js \
|
||||||
|
js/axios.map \
|
||||||
|
js/axios.min.js \
|
||||||
|
js/axios.min.map \
|
||||||
|
js/forked-daapd.js \
|
||||||
|
js/vue.js \
|
||||||
|
js/vue.min.js
|
||||||
198
htdocs/admin.html
Normal file
198
htdocs/admin.html
Normal file
@ -0,0 +1,198 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>forked-daapd</title>
|
||||||
|
<link rel="stylesheet" href="/css/font-awesome.min.css">
|
||||||
|
<link rel="stylesheet" href="/css/bulma.min.css">
|
||||||
|
<link rel="stylesheet" href="/css/forked-daapd.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="root" v-cloak>
|
||||||
|
|
||||||
|
|
||||||
|
<!--
|
||||||
|
############# Navbar #############
|
||||||
|
-->
|
||||||
|
<nav class="navbar">
|
||||||
|
<div class="navbar-brand">
|
||||||
|
<b class="navbar-item">forked-daapd</b>
|
||||||
|
<a class="navbar-item" href="https://github.com/ejurgensen/forked-daapd" title="GitHub"><i class="fa fa-github"></i></a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
|
||||||
|
<!--
|
||||||
|
############# Hero section #############
|
||||||
|
-->
|
||||||
|
<section class="hero is-dark is-bold">
|
||||||
|
<div class="hero-body">
|
||||||
|
<div class="container">
|
||||||
|
<div class="columns">
|
||||||
|
|
||||||
|
<div class="column">
|
||||||
|
<nav class="level is-mobile">
|
||||||
|
<div class="level-item has-text-centered">
|
||||||
|
<div>
|
||||||
|
<p class="heading">Artists</p>
|
||||||
|
<p class="title">{{ library.artists }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="level-item has-text-centered">
|
||||||
|
<div>
|
||||||
|
<p class="heading">Albums</p>
|
||||||
|
<p class="title">{{ library.albums }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="level-item has-text-centered">
|
||||||
|
<div>
|
||||||
|
<p class="heading">Songs</p>
|
||||||
|
<p class="title">{{ library.songs }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="level-item has-text-centered">
|
||||||
|
<div>
|
||||||
|
<p class="heading">Total playtime</p>
|
||||||
|
<p class="title">{{ library.db_playtime | duration }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div> <!-- columns -->
|
||||||
|
</div><!-- container -->
|
||||||
|
</div><!-- hero -->
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
<!--
|
||||||
|
############# Content section #############
|
||||||
|
-->
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="columns">
|
||||||
|
|
||||||
|
<div class="column">
|
||||||
|
<div class="card">
|
||||||
|
<header class="card-header">
|
||||||
|
<p class="card-header-title">
|
||||||
|
<span class="icon" v-show="library.updating"><i class="fa fa-refresh fa-spin"></i></span>
|
||||||
|
<span class="icon" v-show="!library.updating"><i class="fa fa-refresh"></i></span>
|
||||||
|
Update library
|
||||||
|
</p>
|
||||||
|
</header>
|
||||||
|
<div class="card-content">
|
||||||
|
<div class="content">
|
||||||
|
Scan new and modified items into your library.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<footer class="card-footer">
|
||||||
|
<a class="card-footer-item is-primary" v-on:click="update" v-show="!library.updating">Update</a>
|
||||||
|
<span class="card-footer-item" v-show="library.updating">Update in progress ...</span>
|
||||||
|
</footer>
|
||||||
|
</div> <!-- card update library -->
|
||||||
|
</div> <!-- column -->
|
||||||
|
|
||||||
|
|
||||||
|
<div class="column">
|
||||||
|
<div class="card">
|
||||||
|
<header class="card-header">
|
||||||
|
<p class="card-header-title">
|
||||||
|
<span class="icon"><i class="fa fa-mobile"></i></span> Remote pairing
|
||||||
|
</p>
|
||||||
|
</header>
|
||||||
|
<div class="card-content">
|
||||||
|
<div class="content" v-show="pairing.active">
|
||||||
|
<p>Remote pairing request from <b>{{pairing.remote}}</b></p>
|
||||||
|
<form v-on:submit.prevent="kickoffPairing">
|
||||||
|
<div class="field has-addons">
|
||||||
|
<div class="control">
|
||||||
|
<input class="input" type="text" placeholder="Enter pairing code" v-model="pairing_req.pin">
|
||||||
|
</div>
|
||||||
|
<div class="control">
|
||||||
|
<button class="button is-primary" type="submit">Send</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="content" v-show="!pairing.active">
|
||||||
|
<p>No active pairing request.</p>
|
||||||
|
<a class="button" v-on:click="loadPairing" v-show="!config.websocket_port">Refresh</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div> <!-- card remote pairing -->
|
||||||
|
</div> <!-- column -->
|
||||||
|
|
||||||
|
|
||||||
|
<div class="column">
|
||||||
|
<div class="card" v-show="spotify.enabled">
|
||||||
|
<header class="card-header">
|
||||||
|
<p class="card-header-title">
|
||||||
|
<span class="icon"><i class="fa fa-spotify"></i></span> Spotify
|
||||||
|
</p>
|
||||||
|
</header>
|
||||||
|
<div class="card-content">
|
||||||
|
<div class="content" v-show="!spotify.libspotify_installed">
|
||||||
|
<p><b>libspotify</b> is not installed (required for playing spotify tracks)</p>
|
||||||
|
</div>
|
||||||
|
<div class="content" v-show="spotify.libspotify_installed">
|
||||||
|
<div v-show="!spotify.libspotify_logged_in"><p><b>libspotify</b> (requires Spotify premium account, enables playback of Spotify songs):</p>
|
||||||
|
<form v-on:submit.prevent="loginLibspotify">
|
||||||
|
<div class="field has-addons">
|
||||||
|
<div class="control">
|
||||||
|
<input class="input" type="text" placeholder="Username" v-model="libspotify.user">
|
||||||
|
<p class="help is-danger">{{ libspotify.errors.user }}</p>
|
||||||
|
</div>
|
||||||
|
<div class="control">
|
||||||
|
<input class="input" type="password" placeholder="Password" v-model="libspotify.password">
|
||||||
|
<p class="help is-danger">{{ libspotify.errors.password }}</p>
|
||||||
|
</div>
|
||||||
|
<div class="control">
|
||||||
|
<button class="button" type="submit">Login</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="help is-danger">{{ libspotify.errors.error }}</p>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<p v-show="spotify.libspotify_logged_in"><b>libspotify</b> (requires Spotify premium account, enables playback of Spotify songs): logged in as <b>{{ spotify.libspotify_user }}</b></p>
|
||||||
|
<hr>
|
||||||
|
<div v-show="!spotify.webapi_token_valid">
|
||||||
|
<p><b>Spotify Web API</b> access is required to add saved albums and playlists to your library.</p>
|
||||||
|
<a class="button" v-bind:href="spotify.oauth_uri">Authorize Web API access</a>
|
||||||
|
</div>
|
||||||
|
<div v-show="spotify.webapi_token_valid">
|
||||||
|
<p><b>Spotify Web API</b>: access authorized for <b>{{ spotify.webapi_user }}</b></p>
|
||||||
|
<a class="button" v-bind:href="spotify.oauth_uri">Reauthorize Web API access</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div> <!-- card spotify -->
|
||||||
|
</div> <!-- column -->
|
||||||
|
|
||||||
|
</div> <!-- columns -->
|
||||||
|
</div> <!-- container -->
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="container">
|
||||||
|
<div class="content has-text-centered">
|
||||||
|
<p>
|
||||||
|
<strong>forked-daapd</strong> - version {{ config.version }}
|
||||||
|
</p>
|
||||||
|
<p class="is-size-7">Compiled with support for {{ config.buildoptions | join }}.</p>
|
||||||
|
<p class="is-size-7">Web interface built with <a href="http://bulma.io">Bulma</a>, <a href="http://fontawesome.io/">Font Awesome</a>, <a href="https://vuejs.org/">Vue.js</a>, <a href="https://github.com/mzabriskie/axios">axios</a>.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
|
||||||
|
</div> <!-- #root -->
|
||||||
|
|
||||||
|
<script src="/js/vue.min.js"></script>
|
||||||
|
<script src="/js/axios.min.js"></script>
|
||||||
|
<script src="/js/forked-daapd.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
2
htdocs/css/bulma.min.css
vendored
Normal file
2
htdocs/css/bulma.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
4
htdocs/css/font-awesome.min.css
vendored
Normal file
4
htdocs/css/font-awesome.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
3
htdocs/css/forked-daapd.css
Normal file
3
htdocs/css/forked-daapd.css
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
[v-cloak] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
BIN
htdocs/fonts/FontAwesome.otf
Normal file
BIN
htdocs/fonts/FontAwesome.otf
Normal file
Binary file not shown.
BIN
htdocs/fonts/fontawesome-webfont.eot
Normal file
BIN
htdocs/fonts/fontawesome-webfont.eot
Normal file
Binary file not shown.
2671
htdocs/fonts/fontawesome-webfont.svg
Normal file
2671
htdocs/fonts/fontawesome-webfont.svg
Normal file
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 434 KiB |
BIN
htdocs/fonts/fontawesome-webfont.ttf
Normal file
BIN
htdocs/fonts/fontawesome-webfont.ttf
Normal file
Binary file not shown.
BIN
htdocs/fonts/fontawesome-webfont.woff
Normal file
BIN
htdocs/fonts/fontawesome-webfont.woff
Normal file
Binary file not shown.
BIN
htdocs/fonts/fontawesome-webfont.woff2
Normal file
BIN
htdocs/fonts/fontawesome-webfont.woff2
Normal file
Binary file not shown.
1585
htdocs/js/axios.js
Normal file
1585
htdocs/js/axios.js
Normal file
File diff suppressed because it is too large
Load Diff
1
htdocs/js/axios.map
Normal file
1
htdocs/js/axios.map
Normal file
File diff suppressed because one or more lines are too long
9
htdocs/js/axios.min.js
vendored
Normal file
9
htdocs/js/axios.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
htdocs/js/axios.min.map
Normal file
1
htdocs/js/axios.min.map
Normal file
File diff suppressed because one or more lines are too long
111
htdocs/js/forked-daapd.js
Normal file
111
htdocs/js/forked-daapd.js
Normal file
@ -0,0 +1,111 @@
|
|||||||
|
|
||||||
|
|
||||||
|
var app = new Vue({
|
||||||
|
el: '#root',
|
||||||
|
data: {
|
||||||
|
config: {},
|
||||||
|
library: {},
|
||||||
|
spotify: {},
|
||||||
|
pairing: {},
|
||||||
|
pairing_req: { pin: '' },
|
||||||
|
libspotify: { user: '', password: '', errors: { user: '', password: '', error: '' } }
|
||||||
|
},
|
||||||
|
|
||||||
|
created: function () {
|
||||||
|
this.loadConfig();
|
||||||
|
this.loadLibrary();
|
||||||
|
this.loadSpotify();
|
||||||
|
this.loadPairing();
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
loadConfig: function() {
|
||||||
|
axios.get('/api/config').then(response => {
|
||||||
|
this.config = response.data;
|
||||||
|
this.connect()});
|
||||||
|
},
|
||||||
|
|
||||||
|
loadLibrary: function() {
|
||||||
|
axios.get('/api/library').then(response => this.library = response.data);
|
||||||
|
},
|
||||||
|
|
||||||
|
loadSpotify: function() {
|
||||||
|
axios.get('/api/spotify').then(response => this.spotify = response.data);
|
||||||
|
},
|
||||||
|
|
||||||
|
loadPairing: function() {
|
||||||
|
axios.get('/api/pairing').then(response => this.pairing = response.data);
|
||||||
|
},
|
||||||
|
|
||||||
|
update: function() {
|
||||||
|
this.library.updating = true;
|
||||||
|
axios.get('/api/update').then(console.log('Library is updating'));
|
||||||
|
},
|
||||||
|
|
||||||
|
kickoffPairing: function() {
|
||||||
|
axios.post('/api/pairing', this.pairing_req).then(response => {
|
||||||
|
console.log('Kicked off pairing');
|
||||||
|
if (!this.config.websocket_port) {
|
||||||
|
this.pairing = {};
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
loginLibspotify: function() {
|
||||||
|
axios.post('/api/spotify-login', this.libspotify).then(response => {
|
||||||
|
this.libspotify.user = '';
|
||||||
|
this.libspotify.password = '';
|
||||||
|
this.libspotify.errors.user = '';
|
||||||
|
this.libspotify.errors.password = '';
|
||||||
|
this.libspotify.errors.error = '';
|
||||||
|
if (!response.data.success) {
|
||||||
|
this.libspotify.errors.user = response.data.errors.user;
|
||||||
|
this.libspotify.errors.password = response.data.errors.password;
|
||||||
|
this.libspotify.errors.error = response.data.errors.error;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
connect: function() {
|
||||||
|
if (this.config.websocket_port <= 0) {
|
||||||
|
console.log('Websocket disabled');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
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']}));
|
||||||
|
socket.onmessage = function(response) {
|
||||||
|
console.log(response.data); // upon message
|
||||||
|
var data = JSON.parse(response.data);
|
||||||
|
if (data.notify.includes('update')) {
|
||||||
|
vm.loadLibrary();
|
||||||
|
}
|
||||||
|
if (data.notify.includes('pairing')) {
|
||||||
|
vm.loadPairing();
|
||||||
|
}
|
||||||
|
if (data.notify.includes('spotify')) {
|
||||||
|
vm.loadSpotify();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
};
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
filters: {
|
||||||
|
duration: function(seconds) {
|
||||||
|
// Display seconds as hours:minutes:seconds
|
||||||
|
|
||||||
|
var h = Math.floor(seconds / 3600);
|
||||||
|
var m = Math.floor(seconds % 3600 / 60);
|
||||||
|
var s = Math.floor(seconds % 3600 % 60);
|
||||||
|
|
||||||
|
return h + ":" + ('0' + m).slice(-2) + ":" + ('0' + s).slice(-2);
|
||||||
|
},
|
||||||
|
|
||||||
|
join: function(array) {
|
||||||
|
return array.join(', ');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
9175
htdocs/js/vue.js
Normal file
9175
htdocs/js/vue.js
Normal file
File diff suppressed because it is too large
Load Diff
8
htdocs/js/vue.min.js
vendored
Normal file
8
htdocs/js/vue.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
Loading…
x
Reference in New Issue
Block a user