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 >
<!--
############# 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 >
