luniebox/application/templates/index.html
2022-02-06 10:19:03 +01:00

134 lines
4.6 KiB
HTML

{% extends "template.html" %}
{% block content %}
<h1>luniebox</h1>
<p>Welcome to luniebox web-interface. This is for configuring and control your luniebox device.</p>
<div class="row">
<div class="col col-xs-12 col-md-6 col-lg-6 col-xl-6 mt-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">Daemon</h5>
<p class="card-text">
{% if daemon_error: %}
<div class="my-3 alert alert-danger">
{{ daemon_error }}
<a href="{{ url_for('api.daemon_start') }}" class="btn btn-secondary">Start daemon</a>
</div>
{% endif %}
{% if daemon_status: %}
<div class="my-3 alert alert-success">
{{ daemon_status }}
</div>
{% endif %}
</p>
</div>
</div>
<div class="card mt-3">
<div class="card-body">
<h5 class="card-title">Spotify Integration</h5>
<p class="card-text">
{% if spotify['errors']['setup']: %}
<div class="alert alert-danger" role="alert">
No luniebox device found! Please setup spotifyd propertly (device name must match name from setup, default is 'luniebox')!
</div>
{% endif %}
{% if spotify['errors']['not_running']: %}
<div class="alert alert-warning" role="alert">
Spotifyd is not running. Please start spotifyd service on your luniebox!
<a href="{{ url_for('api.restart_spotifyd') }}" class="btn btn-primary">Restart spotifyd</a>
</div>
{% endif %}
{% if spotify['status']['not_active']: %}
<div class="alert alert-success" role="alert">
Spotify is available but currently inactive.
</div>
{% endif %}
<table class="table">
<tbody>
{% if spotify['status']['device']: %}
<tr class="{{ 'table-success' if spotify['status']['device']['id'] == spotify['device_id'] else '' }}">
<th scope="row">Current Device</th>
<td>{{ spotify['status']['device']['name'] }}</td>
</tr>
{% endif %}
{% if spotify['status']['item']: %}
{% with item = spotify['status']['item'] %}
<tr class="{{ '' if spotify['status']['is_playing'] else 'table-active' }}">
<th>{{ 'Currently playing' if spotify['status']['is_playing'] else 'Last played' }}</th>
<td class="d-flex w-100">
{% include "spotify/items/track.html" %}
</td>
</tr>
{% endwith %}
{% endif %}
</tbody>
</table>
</p>
</div>
</div>
<div class="card mt-3">
<div class="card-body">
<h5 class="card-title">Music Player Daemon Integration</h5>
<p class="card-text">
{% if not mpd: %}
<div class="my-3 alert alert-danger">
Music Player Daemon not connected
<a href="{{ url_for('api.restart_mpd') }}" class="btn btn-primary">Restart mpd</a>
</div>
{% endif %}
{% if mpd: %}
<table class="table">
<tbody>
<tr class="table-success">
<th scope="row">Current state</th>
<td>{{ mpd['state'] }}</td>
</tr>
{% if mpd['song']: %}
{% with item = mpd['song'] %}
<tr class="{{ '' if mpd['state'] == 'play' else 'table-active' }}">
<th>{{ 'Currently playing' if mpd['state'] == 'play' else 'Last played' }}</th>
<td class="d-flex w-100">
<div class="d-flex flex-column flex-grow-1">
<h5 class="mb-1">{{ item['title'] }}</h5>
<p class="mb-1">
{{ item['artist'] }}
</p>
<small class="text-muted">{{ item['album'] }}</small>
</div>
</td>
</tr>
{% endwith %}
{% endif %}
</tbody>
</table>
{% endif %}
</p>
</div>
</div>
</div>
<div class="col col-xs-12 col-md-6 col-lg-6 col-xl-6 mt-3">
<div class="card">
<div class="card-body">
<p class="alert alert-warning">This will stop daemon. You need to restart daemon afterwards!</p>
<a href="{{ url_for('api.rfid_read') }}" class="btn btn-primary">Read card</a>
<a href="{{ url_for('api.rfid_play') }}" class="btn btn-secondary">Play card</a>
</div>
</div>
</div>
</div>
{% endblock %}