jellyfin-smart-playlist/Jellyfin.Plugin.SmartPlaylist/configPage.html

201 lines
11 KiB
HTML
Raw Normal View History

2024-06-27 01:47:44 +02:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>SmartPlaylist</title>
2024-06-27 01:47:44 +02:00
</head>
<body>
<div id="SmartPlaylistConfigPage" data-role="page" class="page type-interior pluginConfigurationPage" data-require="emby-input,emby-button,emby-select,emby-checkbox">
2024-06-27 01:47:44 +02:00
<div data-role="content">
<div class="content-primary">
<form id="SmartPlaylistConfigForm">
2024-06-27 01:47:44 +02:00
<div class="inputContainer">
<label class="inputLabel inputLabelUnfocused" for="InitialProgram">Initial Program</label>
<div class="fieldDescription">A program which can set up the environment</div>
<textarea id="InitialProgram" class="emby-input smartplaylist-monospace" name="InitialProgram" rows="16" cols="120"></textarea>
2024-06-27 01:47:44 +02:00
</div>
2024-12-21 01:09:41 +01:00
<div>
<label class="inputLabel inputLabelUnfocused" for="SmartplaylistSelection">Choose a playlist to edit</label>
<select id="SmartplaylistSelection" class="emby-select">
</select>
</div>
<div>
<label class="inputLabel inputLabelUnfocused" for="SmartplaylistEditName">Name</label>
<input id="SmartplaylistEditName" type="text" class="emby-input"/>
</div>
<div class="inputContainer">
<label class="inputLabel inputLabelUnfocused" for="SmartplaylistEditProgram">Program</label>
<div class="fieldDescription">A program which should return <code>t</code> or <code>nil</code> to include or exclude the provided <code>item</code>.</div>
<textarea id="SmartplaylistEditProgram" class="emby-input smartplaylist-monospace" name="Program" rows="16" cols="120"></textarea>
</div>
<div class="inputContainer">
<label class="inputLabel inputLabelUnfocused" for="SmartplaylistEditSortProgram">Sort Program</label>
<div class="fieldDescription">A program which should return a list of items to include in the playlist, sorted however you like.</div>
<textarea id="SmartplaylistEditSortProgram" class="emby-input smartplaylist-monospace" name="SortProgram" rows="16" cols="120"></textarea>
</div>
<div class="inputContainer">
<label class="inputLabel inputLabelUnfocused" for="SmartplaylistEditUsers">Users</label>
<div class="fieldDescription">Which users should get access to the playlist.</div>
<select multiple id="SmartplaylistEditUsers" class="emby-select">
</select>
</div>
<div class="inputContainer">
<label class="inputLabel inputLabelUnfocused" for="SmartPlaylistEditEnabled">Enabled</label>
<div class="fieldDescription">Is the playlist enabled.</div>
<input id="SmartplaylistEditEnabled" type="checkbox" class="emby-input"/>
</div>
2024-06-27 01:47:44 +02:00
<div>
<button is="emby-button" type="submit" class="raised button-submit block emby-button">
<span>Save</span>
</button>
</div>
</form>
</div>
</div>
<style>
.smartplaylist-monospace {
font-family: monospace;
}
</style>
2024-06-27 01:47:44 +02:00
<script type="text/javascript">
var SmartPlaylistConfig = {
2024-06-27 01:47:44 +02:00
pluginUniqueId: 'dd2326e3-4d3e-4bfc-80e6-28502c1131df'
};
2024-12-21 01:09:41 +01:00
function changeEditBox(config, id) {
const selection = document.querySelector('#SmartplaylistSelection');
const editName = document.querySelector('#SmartplaylistEditName');
const editProgram = document.querySelector('#SmartplaylistEditProgram');
const editSortProgram = document.querySelector('#SmartplaylistEditSortProgram');
const editUsers = document.querySelector('#SmartplaylistEditUsers');
const editEnabled = document.querySelector('#SmartplaylistEditEnabled');
if (id === null) {
selection.selectedIndex = 0;
editName.value = '';
editProgram.value = '';
editSortProgram.value = '';
editUsers.innerHTML = '';
for (const u of config.Users) {
var o = document.createElement('option');
o.value = u[0];
o.innerHTML = u[1];
editUsers.appendChild(o);
}
editEnabled.checked = false;
return;
}
function matchId(p) {
return p.Id == id;
}
const index = config.Playlists.map(function (x) { return x.Id }).indexOf(id);
selection.selectedIndex = index + 1;
const p = config.Playlists[index];
editName.value = p.Name;
editProgram.value = p.Program;
editSortProgram.value = p.SortProgram;
editUsers.innerHTML = '';
for (const u of config.Users) {
var o = document.createElement('option');
o.value = u[0];
o.innerHTML = u[1];
if (p.Playlists.map((x) => x.UserId).includes(u[0])) {
o.setAttribute('selected', 'selected');
}
editUsers.appendChild(o);
}
editEnabled.checked = p.Enabled;
}
function fillPlaylistSelect(config) {
const selection = document.querySelector('#SmartplaylistSelection');
selection.innerHTML = '';
var o = document.createElement('option');
o.value = null;
o.innerHTML = 'Create new playlist ...';
selection.appendChild(o);
for (const i of config.Playlists) {
var o = document.createElement('option');
o.value = i.Id;
o.innerHTML = i.Name;
selection.appendChild(o);
}
}
document.querySelector('#SmartPlaylistConfigPage')
2024-06-27 01:47:44 +02:00
.addEventListener('pageshow', function() {
Dashboard.showLoadingMsg();
ApiClient.getPluginConfiguration(SmartPlaylistConfig.pluginUniqueId).then(function (config) {
document.querySelector('#InitialProgram').value = config.InitialProgram;
2024-12-21 01:09:41 +01:00
fillPlaylistSelect(config);
changeEditBox(config, (config.Playlists.length > 0) ? config.Playlists[0].Id : null);
Dashboard.hideLoadingMsg();
});
});
document.querySelector('#SmartplaylistSelection')
.addEventListener('change', function() {
Dashboard.showLoadingMsg();
ApiClient.getPluginConfiguration(SmartPlaylistConfig.pluginUniqueId).then(function (config) {
const selection = document.querySelector('#SmartplaylistSelection');
changeEditBox(config, (selection.selectedIndex > 0) ? config.Playlists[selection.selectedIndex - 1].Id : null);
2024-06-27 01:47:44 +02:00
Dashboard.hideLoadingMsg();
});
});
document.querySelector('#SmartPlaylistConfigForm')
2024-06-27 01:47:44 +02:00
.addEventListener('submit', function(e) {
Dashboard.showLoadingMsg();
ApiClient.getPluginConfiguration(SmartPlaylistConfig.pluginUniqueId).then(function (config) {
config.InitialProgram = document.querySelector('#InitialProgram').value;
2024-12-21 01:09:41 +01:00
const selection = document.querySelector('#SmartplaylistSelection');
const editName = document.querySelector('#SmartplaylistEditName');
const editProgram = document.querySelector('#SmartplaylistEditProgram');
const editSortProgram = document.querySelector('#SmartplaylistEditSortProgram');
const editUsers = document.querySelector('#SmartplaylistEditUsers');
const editEnabled = document.querySelector('#SmartplaylistEditEnabled');
var index = selection.selectedIndex;
if (index === 0) {
const o = {
Id: editName.value,
Name: editName.value,
Program: editProgram.value,
SortProgram: editSortProgram.value,
Playlists: Array.from(editUsers.options).filter((x) => x.selected).map((x) => {
const m = {UserId: x.value, PlaylistId: "00000000-0000-0000-0000-000000000000"};
return m;
}),
Enabled: editEnabled.checked,
};
config.Playlists.push(o);
} else {
config.Playlists[index-1].Id = editName.value;
config.Playlists[index-1].Name = editName.value;
config.Playlists[index-1].Program = editProgram.value;
config.Playlists[index-1].SortProgram = editSortProgram.value;
config.Playlists[index-1].Playlists = Array.from(editUsers.options).filter((x) => x.selected).map((x) => {
const existing = config.Playlists[index-1].Playlists.filter((x_) => x_.UserId === x.value).map((x_) => x_.PlaylistId);
const m = {UserId: x.value, PlaylistId: ((existing.length > 0) ? existing[0] : "00000000-0000-0000-0000-000000000000")};
return m;
}),
config.Playlists[index-1].Enabled = editEnabled.checked;
}
ApiClient.updatePluginConfiguration(SmartPlaylistConfig.pluginUniqueId, config).then(function (result) {
2024-06-27 01:47:44 +02:00
Dashboard.processPluginConfigurationUpdateResult(result);
2024-12-21 01:09:41 +01:00
ApiClient.getPluginConfiguration(SmartPlaylistConfig.pluginUniqueId).then(function (config) {
document.querySelector('#InitialProgram').value = config.InitialProgram;
fillPlaylistSelect(config);
changeEditBox(config, (config.Playlists.length > 0) ? config.Playlists[0].Id : null);
Dashboard.hideLoadingMsg();
});
2024-06-27 01:47:44 +02:00
});
2024-12-21 01:09:41 +01:00
2024-06-27 01:47:44 +02:00
});
e.preventDefault();
return false;
});
</script>
</div>
</body>
</html>