domoboard/templates/settings.html

215 lines
9.9 KiB
HTML

<link href="static/css/settings.css" rel="stylesheet" type="text/css"/>
<ul class="tab">
<li><a href="javascript:void(0)" id="defaultOpen" class="tablinks"
onclick="openCat(event, 'updates')">Updates</a>
</li>
<li><a href="javascript:void(0)" id="defaultOpen" class="tablinks"
onclick="openCat(event, 'plugins')">Plugins</a>
</li>
<li><a href="javascript:void(0)" class="tablinks"
onclick="openCat(event, 'settings')">Settings</a>
</li>
</ul>
<div id="updates" class="tabcontent">
<div id="updateView_available" class="hide_update">
<h2>A new update is available for Domoboard.</h2><br />
The current version is <b><span id="curver_settings"></span></b><br />
The new version available is: <b><span id="newver_settings"></span></b><br />
<br />
{% if debug == True %}
<p><b>Install the new version by pressing the "Upgrade" button below.</b></p>
{% endif %}
{% if debug == False %}
<p><b>Upgrading through Domoboard is only possible when running in debug mode (pass "-d" parameter to server.py). Manual upgrade is possible by performing a "git pull" command.</b></p>
{% endif %}
{% if debug == True %}
<button type="button" class="btn btn-primary" data-dismiss="modal" onclick="javascript:performUpgrade()">Upgrade</button>
{% endif %}
</div>
<div id="updateView_not_available" class="hide_update">
<h2>Hurray!</h2><br />
There is no update available for Domoboard.<br /><br />
</div>
<div id="updateView_no_git" class="hide_update">
<h2>To bad!</h2><br />
Your Domoboard cannot update itself. Domoboard needs to installed through a git clone in order to support auto-update. Updates are performed using git.<br /><br />
</div>
</div>
<div id="plugins" class="tabcontent">
<div id="pluginView">
</div>
</div>
<div class="tabcontent" id="settings">
<div class="modal fade tabcontent" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Add domoticz device to a page</h4>
</div>
<div class="modal-body">
<form onsubmit="modifyConfig()" role="form" name="modifyConfigForm">
<input type="hidden" class="form-control" name="idx" value="">
<input type="hidden" class="form-control" name="custom" value="modify_config"> Name:
<input type="text" class="form-control" name="description">
<div class="dropdown">
<select id="dropDownPage">
{% for k, v in configValues["navbar"].iteritems() %}
<option>{{ v[0] }}</option>
{% endfor %}
</select>
(Select a page to add the domoticz device to)
</div>
<div class="dropdown">
<select id="dropDownComponent">
<option>top_tiles</option>
</select>
(Select a display component to add the domoticz device to)
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div>
<i>This page requires further development. Please use the config file for advanced changes to the dashboard.</i>
<p id="showdevices"></p>
</div>
</div>
<!-- Install Plugin Modal -->
<div style="min-height: 100px;" class="modal fade" id="pluginModal" tabindex="-1" role="dialog" aria-labelledby="pluginModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title" id="pluginModalLabel">Install Plugin</h2>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
</button>
</div>
<div id="plugin_body" class="modal-body">
<p id='plug_desc'></p>
<p id='plug_sum'></p>
<p id="plug_info"></p>
</div>
<div id="plugModalFooter" class="modal-footer">
</div>
</div>
</div>
</div>
<script>
function openCat(evt, catName) {
// Declare all variables
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the link that opened the tab
document.getElementById(catName).style.display = "block";
evt.currentTarget.className += " active";
}
function getIndexedPlugins(d) {
var result = JSON.parse(d);
$('#pluginView').empty();
for (i in result) {
var buttons = '';
if (result[i].update == 'yes') {
buttons = buttons + "<button onclick='updatePlugin("+ result[i].id + ")' type='button' class='btn updateBtn'>update";
}
buttons = buttons + "<button onclick='" + result[i].status + "Plugin(" + result[i].id + ")' name='"+ result[i].title + "' fol='" + result[i].folder + "' type='button' class='btn " + result[i].status + "Btn'>" + result[i].status + "</button>";
$('#pluginView').append("<div class='pluginItem'><span id='" + result[i].title +"_summary' onclick=setPluginInfo('" + result[i].id + "') >v" + result[i].version + " - " + result[i].title + " </span>"+ buttons + "</div>");
}
}
function installPlugin(plugin_id) {
$('#plugin_body').addClass("loading");
var url = "/api?custom=indexPlugins&action=installPlugin&folid=" + plugin_id;
requestAPI(url, function(d){
automaticIndex();
$('#pluginModal').modal('hide');
});
}
function removePlugin(plugin_id) {
$('#plugin_body').addClass("loading");
var url = "/api?custom=indexPlugins&action=removePlugin&folid=" + plugin_id;
requestAPI(url, function(d){
automaticIndex();
$('#pluginModal').modal('hide');
});
}
function updatePlugin(plugin_id, ob) {
$('#plugin_body').addClass("loading");
var url = "/api?custom=indexPlugins&action=removePlugin&folid=" + plugin_id;
requestAPI(url, function(d) {
var url = "/api?custom=indexPlugins&action=installPlugin&folid=" + plugin_id;
requestAPI(url, function(dd) {
automaticIndex();
$('#pluginModal').modal('hide');
});
});
}
function automaticIndex() {
var url = "/api?custom=indexPlugins";
requestAPI(url, function(d){
getIndexedPlugins(d);
});
}
function clearModal() {
$('#plug_info').empty();
$('#pluginModalLabel').empty();
$('#plug_desc').empty();
$('#plug_sum').empty();
$('#plugModalFooter').empty();
$('#plugModalFooter').append('<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>');
}
function setPluginInfo(id) {
var url = "/api?custom=indexPlugins";
$('#plugin_body').addClass("loading");
$('#pluginModal').modal('show');
clearModal();
requestAPI(url, function(d){
var res = JSON.parse(d);
$('#pluginModalLabel').html('<b>' + res[id].title + '</b> <span style="float: right;">v' + res[id].version + '</b>');
$('#plug_info').html('<b>Author: ' + res[id].author + '</b>');
$('#plug_desc').html('<h4><b>Description</b></h4>' + res[id].description);
$('#plug_sum').html('<h4><b>Summary</b></h4>' + res[id].summary);
if (res[id].update == 'yes') {
$('#plugModalFooter').append("<button onclick='updatePlugin("+ res[id].id + ")' type='button' class='btn updateBtn'>update");
}
$('#plugModalFooter').append("<button onclick='" + res[id].status + "Plugin(" + res[id].id + ", this)' name='"+ res[id].title + "' fol='" + res[id].folder + "' type='button' class='btn " + res[id].status + "Btn'>" + res[id].status + "</button>");
$('#plugin_body').removeClass("loading");
});
}
$(document).ready(function () {
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
setInterval(automaticIndex(), 9000);
checkVersionSettings(branch);
});
retrieveAvailableDevices();
selected_page_settings();
selected_component_settings();
</script>