2017-08-12 13:43:10 -04:00
<!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 >
2017-09-16 01:20:08 -04:00
< p class = "title is-size-6-mobile" > {{ library.artists }}< / p >
2017-08-12 13:43:10 -04:00
< / div >
< / div >
< div class = "level-item has-text-centered" >
< div >
< p class = "heading" > Albums< / p >
2017-09-16 01:20:08 -04:00
< p class = "title is-size-6-mobile" > {{ library.albums }}< / p >
2017-08-12 13:43:10 -04:00
< / div >
< / div >
< div class = "level-item has-text-centered" >
< div >
< p class = "heading" > Songs< / p >
2017-09-16 01:20:08 -04:00
< p class = "title is-size-6-mobile" > {{ library.songs }}< / p >
2017-08-12 13:43:10 -04:00
< / div >
< / div >
< div class = "level-item has-text-centered" >
< div >
< p class = "heading" > Total playtime< / p >
2017-09-16 01:20:08 -04:00
< p class = "title is-size-6-mobile" > {{ library.db_playtime | duration }}< / p >
2017-08-12 13:43:10 -04:00
< / div >
< / div >
< / nav >
< / div >
< / div > <!-- columns -->
< / div > <!-- container -->
< / div > <!-- hero -->
< / section >
<!--
2017-10-01 02:16:46 -04:00
############# Status section #############
2017-08-12 13:43:10 -04:00
-->
< section class = "section" >
< div class = "container" >
2017-10-01 02:16:46 -04:00
<!-- Section - heading -->
< div class = "columns is-centered fd-section-heading" >
< div class = "column is-10" > < h1 class = "is-uppercase is-size-7" > Status< / h1 > < / div >
< / div >
<!-- Library update -->
< div class = "columns is-centered fd-section-content" >
< div class = "column is-3" >
< h2 class = "title is-5" >
< 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-music" > < / i > < / span >
Library
< / h2 >
< / div >
< div class = "column is-7 content" >
< a class = "button" v-on:click = "update" v-show = "!library.updating" > Update library< / a >
< p v-show = "library.updating" > Update in progress ...< / p >
< / div >
< / div >
<!-- Pairing -->
< 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-mobile" > < / i > < / span > Remote Pairing< / h2 >
< / div >
< div class = "column is-7 content" >
<!-- Paring request active -->
< 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 >
2017-08-12 13:43:10 -04:00
< / div >
2017-10-01 02:16:46 -04:00
< / form >
< / div >
<!-- No pairing requests -->
< 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 >
< / div >
< / section >
<!--
############# Online accounts & services section #############
-->
< section class = "section" >
< div class = "container" >
<!-- Section - heading -->
< div class = "columns is-centered fd-section-heading" >
< div class = "column is-10" > < h1 class = "is-uppercase is-size-7" > Online accounts & services< / h1 > < / div >
< / div >
<!-- Spotify -->
< div class = "columns is-centered fd-section-content" v-show = "spotify.enabled" >
< div class = "column is-3" >
< h2 class = "title is-5" > < span class = "icon" > < i class = "fa fa-spotify" > < / i > < / span > Spotify< / h2 >
< / div >
< div class = "column is-7 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" >
<!-- libspotify -->
< 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 >
2017-08-12 13:43:10 -04:00
< / div >
2017-10-01 02:16:46 -04:00
< 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 >
2017-08-12 13:43:10 -04:00
< / div >
2017-10-01 02:16:46 -04:00
< 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 >
<!-- Spotify web api -->
< 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 >
<!-- Last.fm -->
< div class = "columns is-centered fd-section-content" v-show = "lastfm.enabled" >
< div class = "column is-3" >
< h2 class = "title is-5" > < span class = "icon" > < i class = "fa fa-lastfm" > < / i > < / span > Last.fm< / h2 >
< / div >
< div class = "column is-7 content" >
<!-- Scrobbling enabled -->
< div class = "content" v-show = "lastfm.scrobbling_enabled" >
< a class = "button" v-on:click = "logoutLastfm" > Stop scrobbling< / a >
< / div >
<!-- Scrobbling NOT enabled -->
< div class = "content" v-show = "!lastfm.scrobbling_enabled" >
< p > < b > Last.fm< / b > (enable scrobbling)< / p >
< form v-on:submit . prevent = "loginLastfm" >
< div class = "field has-addons" >
< div class = "control" >
< input class = "input" type = "text" placeholder = "Username" v-model = "lastfm_login.user" >
< p class = "help is-danger" > {{ lastfm_login.errors.user }}< / p >
2017-08-12 13:43:10 -04:00
< / div >
2017-10-01 02:16:46 -04:00
< div class = "control" >
< input class = "input" type = "password" placeholder = "Password" v-model = "lastfm_login.password" >
< p class = "help is-danger" > {{ lastfm_login.errors.password }}< / p >
2017-08-12 13:43:10 -04:00
< / div >
2017-10-01 02:16:46 -04:00
< div class = "control" >
< button class = "button" type = "submit" > Login< / button >
2017-08-12 13:43:10 -04:00
< / div >
< / div >
2017-10-01 02:16:46 -04:00
< p class = "help is-danger" > {{ lastfm_login.errors.error }}< / p >
< / form >
< / div >
< / div >
< / div >
2017-08-12 13:43:10 -04:00
2017-10-01 02:16:46 -04:00
< / div >
2017-08-12 13:43:10 -04:00
< / section >
2017-10-01 02:16:46 -04:00
<!--
############# Footer #############
-->
2017-08-12 13:43:10 -04:00
< 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 -->
2017-10-01 02:16:46 -04:00
< script src = "/js/vue.js" > < / script >
2017-08-12 13:43:10 -04:00
< script src = "/js/axios.min.js" > < / script >
< script src = "/js/forked-daapd.js" > < / script >
< / body >
< / html >
