1
0
mirror of https://github.com/SuperBFG7/ympd synced 2025-10-29 21:03:00 +00:00

add settings modal dialog

This commit is contained in:
Andrew Karpow
2014-02-04 17:58:10 +01:00
parent 88abc57a6e
commit 43035bb6f7
7 changed files with 88 additions and 9 deletions

View File

@@ -40,6 +40,7 @@
<li id="playlist"><a href="#/">Playlist</a></li>
<li id="browse"><a href="#/browse/">Browse database</a></li>
<li><a href="#" data-toggle="modal" data-target="#about" onclick="getVersion();">About</a></li>
<li><a href="#" data-toggle="modal" data-target="#settings" onclick="getHost();">Settings</a></li>
</ul>
<div class="btn-toolbar navbar-btn navbar-right" role="toolbar">
@@ -185,6 +186,37 @@
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- Modal -->
<div class="modal fade" id="settings" tabindex="-1" role="dialog" aria-labelledby="settingsLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h2 class="modal-title" id="settingsLabel"><span class="glyphicon glyphicon-wrench"></span> Settings</h2>
</div>
<div class="modal-body">
<form class="form-inline" role="form">
<div class="form-group row">
<div class="col-xs-9">
<label class="control-label" for="mpdhost">MPD Host / IP</label>
<input type="text" class="form-control" id="mpdhost">
</div>
<div class="col-xs-3">
<label class="control-label" for="mpdport">MPD Port</label>
<input type="text" class="form-control" id="mpdport">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-default" data-dismiss="modal" onclick="setHost();">Save</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- Bootstrap core JavaScript
================================================== -->

View File

@@ -311,6 +311,10 @@ function webSocketConnect() {
type: "info",
}).show();
break;
case "mpdhost":
$('#mpdhost').val(obj.data.host);
$('#mpdport').val(obj.data.port);
break;
case "error":
$('.top-right').notify({
@@ -452,6 +456,23 @@ function getVersion()
});
}
function getHost() {
socket.send('MPD_API_GET_MPDHOST');
function onEnter(event) {
if ( event.which == 13 )
setHost();
$('#settings').modal('hide');
}
$('#mpdhost').keypress(onEnter);
$('#mpdport').keypress(onEnter);
}
function setHost() {
socket.send('MPD_API_SET_MPDHOST,'+$('#mpdport').val()+','+$('#mpdhost').val());
}
function notificationsSupported() {
return "webkitNotifications" in window;
}