Files
jellyfin-plugin-skin-manager/Jellyfin.Plugin.SkinManager/Configuration/configurationpage.html
2020-11-08 17:33:15 +01:00

132 lines
4.2 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>Css</title>
</head>
<body>
<div data-role="page" class="page type-interior pluginConfigurationPage tbsConfigurationPage"
data-require="emby-input,emby-button">
<div data-role="content">
<div class="content-primary">
<form class="tbsConfigurationPage">
<div class="sectionTitleContainer flex align-items-center">
<h2 class="sectionTitle">Theme Songs</h2>
<a is="emby-linkbutton" class="raised button-alt headerHelpButton emby-button" target="_blank"
href="https://github.com/danieladov/jellyfin-plugin-themesongs">Help</a>
</div>
<div class="verticalSection">
<p>
Select the skin you want to install and press Set Skin
</p>
<br />
</div>
<div class="selectContainer">
<label for="css">css</label>
<select is="emby-select" id="cssOptions">
</select>
<br />
<button is="emby-button" type="button" class="raised block" id="refresh-library"
onclick=setSkin()>
<span>Set Skin</span>
</button>
</form>
</div>
</div>
<script type="text/javascript">
function loadSkins(){
$.getJSON('https://raw.githubusercontent.com/danieladov/jellyfin-plugin-skin-manager/master/skins.json', function(data) {
var cssOptions = document.getElementById("cssOptions");
data.forEach(element => {
var opt = document.createElement("option");
opt.appendChild(document.createTextNode(element.name));
opt.value=element.css;
cssOptions.appendChild(opt);
});
});
}
loadSkins();
function setSkin() {
var request = {
url: ApiClient.getUrl('/Css/Set'),
type: 'POST'
};
ApiClient.getPluginConfiguration(plugin.guid).then(function (config) {
config.selectedCss = $('#cssOptions').val();
ApiClient.updatePluginConfiguration(plugin.guid, config).then(function (result) {
Dashboard.processPluginConfigurationUpdateResult(result);
Dashboard.alert("Changing skin...");
ApiClient.fetch(request).then(function () {
window.location.reload(true);
}).catch(function () {
Dashboard.alert({
message: "Unexpected error occurred!"
});
});
});
});
}
</script>
<script type="text/javascript">
var plugin = {
guid: 'e9ca8b8e-ca6d-40e7-85dc-58e536df8eb3'
};
$('#configPage').on('pageshow', function () {
Dashboard.showLoadingMsg();
loadSavedConfig();
ApiClient.getPluginConfiguration(plugin.guid).then(function (config) {
$('#cssOptions').val(config.selectedCss).change();
Dashboard.hideLoadingMsg();
});
});
$('#configForm').on('submit', function () {
Dashboard.showLoadingMsg();
ApiClient.getPluginConfiguration(plugin.guid).then(function (config) {
config.selectedCss = $('#cssOptions').val();
ApiClient.updatePluginConfiguration(plugin.guid, config).then(function (result) {
Dashboard.processPluginConfigurationUpdateResult(result);
});
});
return false;
});
</script>
</div>
</body>
</html>