mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
Convert userLibraryAccessPage to react
This commit is contained in:
grafixeyehero
parent
ffb40c125d
commit
a2e908a4de
4 changed files with 356 additions and 252 deletions
355
src/components/pages/UserLibraryAccessPage.tsx
Normal file
355
src/components/pages/UserLibraryAccessPage.tsx
Normal file
|
|
@ -0,0 +1,355 @@
|
||||||
|
import React, { FunctionComponent, useEffect, useState, useRef } from 'react';
|
||||||
|
|
||||||
|
import loading from '../loading/loading';
|
||||||
|
import libraryMenu from '../../scripts/libraryMenu';
|
||||||
|
import globalize from '../../scripts/globalize';
|
||||||
|
import toast from '../toast/toast';
|
||||||
|
import { appRouter } from '../appRouter';
|
||||||
|
import SectionTitleLinkElement from '../dashboard/users/SectionTitleLinkElement';
|
||||||
|
import TabLinkElement from '../dashboard/users/TabLinkElement';
|
||||||
|
import CheckBoxElement from '../dashboard/users/CheckBoxElement';
|
||||||
|
import CheckBoxListItem from '../dashboard/users/CheckBoxListItem';
|
||||||
|
import ButtonElement from '../dashboard/users/ButtonElement';
|
||||||
|
import Dashboard from '../../scripts/clientUtils';
|
||||||
|
|
||||||
|
type ItemsArr = {
|
||||||
|
Name?: string;
|
||||||
|
Id?: string;
|
||||||
|
AppName?: string;
|
||||||
|
checkedAttribute?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const UserLibraryAccessPage: FunctionComponent = () => {
|
||||||
|
const [ userName, setUserName ] = useState('');
|
||||||
|
const [channelsItems, setChannelsItems] = useState([]);
|
||||||
|
const [mediaFoldersItems, setMediaFoldersItems] = useState([]);
|
||||||
|
const [devicesItems, setDevicesItems] = useState([]);
|
||||||
|
|
||||||
|
const element = useRef(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const loadData = () => {
|
||||||
|
loading.show();
|
||||||
|
const userId = appRouter.param('userId');
|
||||||
|
// eslint-disable-next-line compat/compat
|
||||||
|
const promise1 = userId ? window.ApiClient.getUser(userId) : Promise.resolve({ Configuration: {} });
|
||||||
|
const promise2 = window.ApiClient.getJSON(window.ApiClient.getUrl('Library/MediaFolders', {
|
||||||
|
IsHidden: false
|
||||||
|
}));
|
||||||
|
const promise3 = window.ApiClient.getJSON(window.ApiClient.getUrl('Channels'));
|
||||||
|
const promise4 = window.ApiClient.getJSON(window.ApiClient.getUrl('Devices'));
|
||||||
|
// eslint-disable-next-line compat/compat
|
||||||
|
Promise.all([promise1, promise2, promise3, promise4]).then(function (responses) {
|
||||||
|
loadUser(responses[0], responses[1].Items, responses[2].Items, responses[3].Items);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
loadData();
|
||||||
|
|
||||||
|
const loadUser = (user, mediaFolders, channels, devices) => {
|
||||||
|
setUserName(user.Name);
|
||||||
|
libraryMenu.setTitle(user.Name);
|
||||||
|
loadChannels(user, channels);
|
||||||
|
loadMediaFolders(user, mediaFolders);
|
||||||
|
loadDevices(user, devices);
|
||||||
|
loading.hide();
|
||||||
|
};
|
||||||
|
|
||||||
|
const loadMediaFolders = (user, mediaFolders) => {
|
||||||
|
const itemsArr: ItemsArr[] = [];
|
||||||
|
|
||||||
|
for (const folder of mediaFolders) {
|
||||||
|
console.log('EnableAllFolders', user.Policy.EnableAllFolders);
|
||||||
|
const isChecked = user.Policy.EnableAllFolders || user.Policy.EnabledFolders.indexOf(folder.Id) != -1;
|
||||||
|
const checkedAttribute = isChecked ? ' checked="checked"' : '';
|
||||||
|
itemsArr.push({
|
||||||
|
Id: folder.Id,
|
||||||
|
Name: folder.Name,
|
||||||
|
checkedAttribute: checkedAttribute
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
setMediaFoldersItems(itemsArr);
|
||||||
|
|
||||||
|
const chkEnableAllFolders = element.current.querySelector('.chkEnableAllFolders');
|
||||||
|
chkEnableAllFolders.checked = user.Policy.EnableAllFolders;
|
||||||
|
triggerChange(chkEnableAllFolders);
|
||||||
|
};
|
||||||
|
|
||||||
|
const loadChannels = (user, channels) => {
|
||||||
|
const itemsArr: ItemsArr[] = [];
|
||||||
|
|
||||||
|
for (const folder of channels) {
|
||||||
|
console.log('EnableAllChannels', user.Policy.EnableAllChannels);
|
||||||
|
const isChecked = user.Policy.EnableAllChannels || user.Policy.EnabledChannels.indexOf(folder.Id) != -1;
|
||||||
|
const checkedAttribute = isChecked ? ' checked="checked"' : '';
|
||||||
|
itemsArr.push({
|
||||||
|
Id: folder.Id,
|
||||||
|
Name: folder.Name,
|
||||||
|
checkedAttribute: checkedAttribute
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
setChannelsItems(itemsArr);
|
||||||
|
|
||||||
|
if (channels.length) {
|
||||||
|
element?.current?.querySelector('.channelAccessContainer').classList.remove('hide');
|
||||||
|
} else {
|
||||||
|
element?.current?.querySelector('.channelAccessContainer').classList.add('hide');
|
||||||
|
}
|
||||||
|
|
||||||
|
const chkEnableAllChannels = element.current.querySelector('.chkEnableAllChannels');
|
||||||
|
chkEnableAllChannels.checked = user.Policy.EnableAllChannels;
|
||||||
|
triggerChange(chkEnableAllChannels);
|
||||||
|
};
|
||||||
|
|
||||||
|
const loadDevices = (user, devices) => {
|
||||||
|
const itemsArr: ItemsArr[] = [];
|
||||||
|
|
||||||
|
for (const device of devices) {
|
||||||
|
console.log('EnableAllDevices', user.Policy.EnableAllDevices);
|
||||||
|
const isChecked = user.Policy.EnableAllDevices || user.Policy.EnabledDevices.indexOf(device.Id) != -1;
|
||||||
|
const checkedAttribute = isChecked ? ' checked="checked"' : '';
|
||||||
|
itemsArr.push({
|
||||||
|
Id: device.Id,
|
||||||
|
Name: device.Name,
|
||||||
|
AppName : device.AppName,
|
||||||
|
checkedAttribute: checkedAttribute
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
setDevicesItems(itemsArr);
|
||||||
|
|
||||||
|
const chkEnableAllDevices = element.current.querySelector('.chkEnableAllDevices');
|
||||||
|
chkEnableAllDevices.checked = user.Policy.EnableAllDevices;
|
||||||
|
triggerChange(chkEnableAllDevices);
|
||||||
|
|
||||||
|
if (user.Policy.IsAdministrator) {
|
||||||
|
element?.current?.querySelector('.deviceAccessContainer').classList.add('hide');
|
||||||
|
} else {
|
||||||
|
element?.current?.querySelector('.deviceAccessContainer').classList.remove('hide');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const triggerChange = (select) => {
|
||||||
|
const evt = document.createEvent('HTMLEvents');
|
||||||
|
evt.initEvent('change', false, true);
|
||||||
|
select.dispatchEvent(evt);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onSubmit = (e) => {
|
||||||
|
loading.show();
|
||||||
|
const userId = appRouter.param('userId');
|
||||||
|
window.ApiClient.getUser(userId).then(function (result) {
|
||||||
|
saveUser(result);
|
||||||
|
});
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
return false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const saveUser = (user) => {
|
||||||
|
user.Policy.EnableAllFolders = element?.current?.querySelector('.chkEnableAllFolders').checked;
|
||||||
|
user.Policy.EnabledFolders = user.Policy.EnableAllFolders ? [] : Array.prototype.filter.call(element?.current?.querySelectorAll('.chkFolder'), function (c) {
|
||||||
|
return c.checked;
|
||||||
|
}).map(function (c) {
|
||||||
|
return c.getAttribute('data-id');
|
||||||
|
});
|
||||||
|
user.Policy.EnableAllChannels = element?.current?.querySelector('.chkEnableAllChannels').checked;
|
||||||
|
user.Policy.EnabledChannels = user.Policy.EnableAllChannels ? [] : Array.prototype.filter.call(element?.current?.querySelectorAll('.chkChannel'), function (c) {
|
||||||
|
return c.checked;
|
||||||
|
}).map(function (c) {
|
||||||
|
return c.getAttribute('data-id');
|
||||||
|
});
|
||||||
|
user.Policy.EnableAllDevices = element?.current?.querySelector('.chkEnableAllDevices').checked;
|
||||||
|
user.Policy.EnabledDevices = user.Policy.EnableAllDevices ? [] : Array.prototype.filter.call(element?.current?.querySelectorAll('.chkDevice'), function (c) {
|
||||||
|
return c.checked;
|
||||||
|
}).map(function (c) {
|
||||||
|
return c.getAttribute('data-id');
|
||||||
|
});
|
||||||
|
user.Policy.BlockedChannels = null;
|
||||||
|
user.Policy.BlockedMediaFolders = null;
|
||||||
|
window.ApiClient.updateUserPolicy(user.Id, user.Policy).then(function () {
|
||||||
|
onSaveComplete();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const onSaveComplete = () => {
|
||||||
|
loading.hide();
|
||||||
|
toast(globalize.translate('SettingsSaved'));
|
||||||
|
};
|
||||||
|
|
||||||
|
element?.current?.querySelector('.chkEnableAllDevices').addEventListener('change', function (this: HTMLInputElement) {
|
||||||
|
if (this.checked) {
|
||||||
|
element?.current?.querySelector('.deviceAccessListContainer').classList.add('hide');
|
||||||
|
} else {
|
||||||
|
element?.current?.querySelector('.deviceAccessListContainer').classList.remove('hide');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
element?.current?.querySelector('.chkEnableAllChannels').addEventListener('change', function (this: HTMLInputElement) {
|
||||||
|
if (this.checked) {
|
||||||
|
element?.current?.querySelector('.channelAccessListContainer').classList.add('hide');
|
||||||
|
} else {
|
||||||
|
element?.current?.querySelector('.channelAccessListContainer').classList.remove('hide');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
element?.current?.querySelector('.chkEnableAllFolders').addEventListener('change', function (this: HTMLInputElement) {
|
||||||
|
if (this.checked) {
|
||||||
|
element?.current?.querySelector('.folderAccessListContainer').classList.add('hide');
|
||||||
|
} else {
|
||||||
|
element?.current?.querySelector('.folderAccessListContainer').classList.remove('hide');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
element?.current?.querySelector('.userLibraryAccessForm').addEventListener('submit', onSubmit);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div ref={element}>
|
||||||
|
<div className='content-primary'>
|
||||||
|
<div className='verticalSection'>
|
||||||
|
<div className='sectionTitleContainer flex align-items-center'>
|
||||||
|
<h2 className='sectionTitle username'>
|
||||||
|
{userName}
|
||||||
|
</h2>
|
||||||
|
<SectionTitleLinkElement
|
||||||
|
className='raised button-alt headerHelpButton'
|
||||||
|
title='Help'
|
||||||
|
url='https://docs.jellyfin.org/general/server/users/'
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
data-role='controlgroup'
|
||||||
|
data-type='horizontal'
|
||||||
|
className='localnav'
|
||||||
|
style={{ display: 'flex' }}
|
||||||
|
>
|
||||||
|
<TabLinkElement
|
||||||
|
tabTitle='Profile'
|
||||||
|
onClick={() => Dashboard.navigate('useredit.html', true)}
|
||||||
|
/>
|
||||||
|
<TabLinkElement
|
||||||
|
activeTab={true}
|
||||||
|
tabTitle='TabAccess'
|
||||||
|
onClick={() => Dashboard.navigate('userlibraryaccess.html', true)}
|
||||||
|
/>
|
||||||
|
<TabLinkElement
|
||||||
|
tabTitle='TabParentalControl'
|
||||||
|
onClick={() => Dashboard.navigate('userparentalcontrol.html', true)}
|
||||||
|
/>
|
||||||
|
<TabLinkElement
|
||||||
|
tabTitle='HeaderPassword'
|
||||||
|
onClick={() => Dashboard.navigate('userpassword.html', true)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<form className='userLibraryAccessForm'>
|
||||||
|
<div className='folderAccessContainer'>
|
||||||
|
<h2>{globalize.translate('HeaderLibraryAccess')}</h2>
|
||||||
|
<CheckBoxElement
|
||||||
|
type='checkbox'
|
||||||
|
className='chkEnableAllFolders'
|
||||||
|
title='OptionEnableAccessToAllLibraries'
|
||||||
|
/>
|
||||||
|
<div className='folderAccessListContainer'>
|
||||||
|
<div className='folderAccess'>
|
||||||
|
<h3 className='checkboxListLabel'>
|
||||||
|
{globalize.translate('HeaderLibraries')}
|
||||||
|
</h3>
|
||||||
|
<div className='checkboxList paperList' style={{padding: '.5em 1em'}}>
|
||||||
|
{mediaFoldersItems.map(Item => {
|
||||||
|
return (
|
||||||
|
<CheckBoxListItem
|
||||||
|
key={Item.Id}
|
||||||
|
className='chkFolder'
|
||||||
|
Id={Item.Id}
|
||||||
|
Name={Item.Name}
|
||||||
|
checkedAttribute={Item.checkedAttribute}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='fieldDescription'>
|
||||||
|
{globalize.translate('LibraryAccessHelp')}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='channelAccessContainer hide'>
|
||||||
|
<h2>{globalize.translate('HeaderChannelAccess')}</h2>
|
||||||
|
<CheckBoxElement
|
||||||
|
type='checkbox'
|
||||||
|
className='chkEnableAllChannels'
|
||||||
|
title='OptionEnableAccessToAllChannels'
|
||||||
|
/>
|
||||||
|
<div className='channelAccessListContainer'>
|
||||||
|
<div className='channelAccess'>
|
||||||
|
<h3 className='checkboxListLabel'>
|
||||||
|
{globalize.translate('Channels')}
|
||||||
|
</h3>
|
||||||
|
<div className='checkboxList paperList' style={{padding: '.5em 1em'}}>
|
||||||
|
{channelsItems.map(Item => (
|
||||||
|
<CheckBoxListItem
|
||||||
|
key={Item.Id}
|
||||||
|
className='chkChannel'
|
||||||
|
Id={Item.Id}
|
||||||
|
Name={Item.Name}
|
||||||
|
checkedAttribute={Item.checkedAttribute}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='fieldDescription'>
|
||||||
|
{globalize.translate('ChannelAccessHelp')}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<br />
|
||||||
|
<div className='deviceAccessContainer hide'>
|
||||||
|
<h2>{globalize.translate('HeaderDeviceAccess')}</h2>
|
||||||
|
<CheckBoxElement
|
||||||
|
type='checkbox'
|
||||||
|
className='chkEnableAllDevices'
|
||||||
|
title='OptionEnableAccessFromAllDevices'
|
||||||
|
/>
|
||||||
|
<div className='deviceAccessListContainer'>
|
||||||
|
<div className='deviceAccess'>
|
||||||
|
<h3 className='checkboxListLabel'>
|
||||||
|
{globalize.translate('HeaderDevices')}
|
||||||
|
</h3>
|
||||||
|
<div className='checkboxList paperList' style={{padding: '.5em 1em'}}>
|
||||||
|
{devicesItems.map(Item => (
|
||||||
|
<CheckBoxListItem
|
||||||
|
key={Item.Id}
|
||||||
|
className='chkDevice'
|
||||||
|
Id={Item.Id}
|
||||||
|
Name={Item.Name}
|
||||||
|
AppName={Item.AppName}
|
||||||
|
checkedAttribute={Item.checkedAttribute}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='fieldDescription'>
|
||||||
|
{globalize.translate('DeviceAccessHelp')}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<br />
|
||||||
|
</div>
|
||||||
|
<br />
|
||||||
|
<div>
|
||||||
|
<ButtonElement
|
||||||
|
type='submit'
|
||||||
|
className='raised button-submit block'
|
||||||
|
title='Save'
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default UserLibraryAccessPage;
|
||||||
|
|
@ -1,68 +1,3 @@
|
||||||
<div id="userLibraryAccessPage" data-role="page" class="page type-interior">
|
<div id="userLibraryAccessPage" data-role="page" class="page type-interior">
|
||||||
|
|
||||||
<div>
|
|
||||||
<div class="content-primary">
|
|
||||||
|
|
||||||
<div class="verticalSection">
|
|
||||||
<div class="sectionTitleContainer flex align-items-center">
|
|
||||||
<h2 class="sectionTitle username"></h2>
|
|
||||||
<a is="emby-linkbutton" rel="noopener noreferrer" class="raised button-alt headerHelpButton" target="_blank" href="https://docs.jellyfin.org/general/server/users/">${Help}</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
|
|
||||||
<a is="emby-linkbutton" href="#" data-role="button" onclick="Dashboard.navigate('useredit.html', true);">${Profile}</a>
|
|
||||||
<a is="emby-linkbutton" href="#" data-role="button" onclick="Dashboard.navigate('userlibraryaccess.html', true);" class="ui-btn-active">${TabAccess}</a>
|
|
||||||
<a is="emby-linkbutton" href="#" data-role="button" onclick="Dashboard.navigate('userparentalcontrol.html', true);">${TabParentalControl}</a>
|
|
||||||
<a is="emby-linkbutton" href="#" data-role="button" onclick="Dashboard.navigate('userpassword.html', true);">${HeaderPassword}</a>
|
|
||||||
</div>
|
|
||||||
<form class="userLibraryAccessForm">
|
|
||||||
|
|
||||||
<div class="folderAccessContainer">
|
|
||||||
<h2>${HeaderLibraryAccess}</h2>
|
|
||||||
<label class="checkboxContainer">
|
|
||||||
<input type="checkbox" is="emby-checkbox" id="chkEnableAllFolders" />
|
|
||||||
<span>${OptionEnableAccessToAllLibraries}</span>
|
|
||||||
</label>
|
|
||||||
<div class="folderAccessListContainer">
|
|
||||||
<div class="folderAccess">
|
|
||||||
</div>
|
|
||||||
<div class="fieldDescription">${LibraryAccessHelp}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="channelAccessContainer" style="display:none;">
|
|
||||||
<h2>${HeaderChannelAccess}</h2>
|
|
||||||
<label class="checkboxContainer">
|
|
||||||
<input type="checkbox" is="emby-checkbox" id="chkEnableAllChannels" />
|
|
||||||
<span>${OptionEnableAccessToAllChannels}</span>
|
|
||||||
</label>
|
|
||||||
<div class="channelAccessListContainer">
|
|
||||||
<div class="channelAccess">
|
|
||||||
</div>
|
|
||||||
<div class="fieldDescription">${ChannelAccessHelp}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<br />
|
|
||||||
<div class="deviceAccessContainer hide">
|
|
||||||
<h2>${HeaderDeviceAccess}</h2>
|
|
||||||
<label class="checkboxContainer">
|
|
||||||
<input type="checkbox" is="emby-checkbox" id="chkEnableAllDevices" />
|
|
||||||
<span>${OptionEnableAccessFromAllDevices}</span>
|
|
||||||
</label>
|
|
||||||
<div class="deviceAccessListContainer">
|
|
||||||
<div class="deviceAccess">
|
|
||||||
</div>
|
|
||||||
<div class="fieldDescription">${DeviceAccessHelp}</div>
|
|
||||||
</div>
|
|
||||||
<br />
|
|
||||||
</div>
|
|
||||||
<br />
|
|
||||||
<div>
|
|
||||||
<button is="emby-button" type="submit" class="raised button-submit block">
|
|
||||||
<span>${Save}</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,186 +0,0 @@
|
||||||
import 'jquery';
|
|
||||||
import loading from '../../../components/loading/loading';
|
|
||||||
import libraryMenu from '../../../scripts/libraryMenu';
|
|
||||||
import globalize from '../../../scripts/globalize';
|
|
||||||
import Dashboard from '../../../scripts/clientUtils';
|
|
||||||
import toast from '../../../components/toast/toast';
|
|
||||||
|
|
||||||
/* eslint-disable indent */
|
|
||||||
|
|
||||||
function triggerChange(select) {
|
|
||||||
const evt = document.createEvent('HTMLEvents');
|
|
||||||
evt.initEvent('change', false, true);
|
|
||||||
select.dispatchEvent(evt);
|
|
||||||
}
|
|
||||||
|
|
||||||
function loadMediaFolders(page, user, mediaFolders) {
|
|
||||||
let html = '';
|
|
||||||
html += '<h3 class="checkboxListLabel">' + globalize.translate('HeaderLibraries') + '</h3>';
|
|
||||||
html += '<div class="checkboxList paperList checkboxList-paperList">';
|
|
||||||
|
|
||||||
for (let i = 0, length = mediaFolders.length; i < length; i++) {
|
|
||||||
const folder = mediaFolders[i];
|
|
||||||
const isChecked = user.Policy.EnableAllFolders || user.Policy.EnabledFolders.indexOf(folder.Id) != -1;
|
|
||||||
const checkedAttribute = isChecked ? ' checked="checked"' : '';
|
|
||||||
html += '<label><input type="checkbox" is="emby-checkbox" class="chkFolder" data-id="' + folder.Id + '" ' + checkedAttribute + '><span>' + folder.Name + '</span></label>';
|
|
||||||
}
|
|
||||||
|
|
||||||
html += '</div>';
|
|
||||||
page.querySelector('.folderAccess').innerHTML = html;
|
|
||||||
const chkEnableAllFolders = page.querySelector('#chkEnableAllFolders');
|
|
||||||
chkEnableAllFolders.checked = user.Policy.EnableAllFolders;
|
|
||||||
triggerChange(chkEnableAllFolders);
|
|
||||||
}
|
|
||||||
|
|
||||||
function loadChannels(page, user, channels) {
|
|
||||||
let html = '';
|
|
||||||
html += '<h3 class="checkboxListLabel">' + globalize.translate('Channels') + '</h3>';
|
|
||||||
html += '<div class="checkboxList paperList checkboxList-paperList">';
|
|
||||||
|
|
||||||
for (let i = 0, length = channels.length; i < length; i++) {
|
|
||||||
const folder = channels[i];
|
|
||||||
const isChecked = user.Policy.EnableAllChannels || user.Policy.EnabledChannels.indexOf(folder.Id) != -1;
|
|
||||||
const checkedAttribute = isChecked ? ' checked="checked"' : '';
|
|
||||||
html += '<label><input type="checkbox" is="emby-checkbox" class="chkChannel" data-id="' + folder.Id + '" ' + checkedAttribute + '><span>' + folder.Name + '</span></label>';
|
|
||||||
}
|
|
||||||
|
|
||||||
html += '</div>';
|
|
||||||
$('.channelAccess', page).show().html(html);
|
|
||||||
|
|
||||||
if (channels.length) {
|
|
||||||
$('.channelAccessContainer', page).show();
|
|
||||||
} else {
|
|
||||||
$('.channelAccessContainer', page).hide();
|
|
||||||
}
|
|
||||||
|
|
||||||
const chkEnableAllChannels = page.querySelector('#chkEnableAllChannels');
|
|
||||||
chkEnableAllChannels.checked = user.Policy.EnableAllChannels;
|
|
||||||
triggerChange(chkEnableAllChannels);
|
|
||||||
}
|
|
||||||
|
|
||||||
function loadDevices(page, user, devices) {
|
|
||||||
let html = '';
|
|
||||||
html += '<h3 class="checkboxListLabel">' + globalize.translate('HeaderDevices') + '</h3>';
|
|
||||||
html += '<div class="checkboxList paperList checkboxList-paperList">';
|
|
||||||
|
|
||||||
for (let i = 0, length = devices.length; i < length; i++) {
|
|
||||||
const device = devices[i];
|
|
||||||
const checkedAttribute = user.Policy.EnableAllDevices || user.Policy.EnabledDevices.indexOf(device.Id) != -1 ? ' checked="checked"' : '';
|
|
||||||
html += '<label><input type="checkbox" is="emby-checkbox" class="chkDevice" data-id="' + device.Id + '" ' + checkedAttribute + '><span>' + device.Name + ' - ' + device.AppName + '</span></label>';
|
|
||||||
}
|
|
||||||
|
|
||||||
html += '</div>';
|
|
||||||
$('.deviceAccess', page).show().html(html);
|
|
||||||
const chkEnableAllDevices = page.querySelector('#chkEnableAllDevices');
|
|
||||||
chkEnableAllDevices.checked = user.Policy.EnableAllDevices;
|
|
||||||
triggerChange(chkEnableAllDevices);
|
|
||||||
|
|
||||||
if (user.Policy.IsAdministrator) {
|
|
||||||
page.querySelector('.deviceAccessContainer').classList.add('hide');
|
|
||||||
} else {
|
|
||||||
page.querySelector('.deviceAccessContainer').classList.remove('hide');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function loadUser(page, user, loggedInUser, mediaFolders, channels, devices) {
|
|
||||||
page.querySelector('.username').innerHTML = user.Name;
|
|
||||||
libraryMenu.setTitle(user.Name);
|
|
||||||
loadChannels(page, user, channels);
|
|
||||||
loadMediaFolders(page, user, mediaFolders);
|
|
||||||
loadDevices(page, user, devices);
|
|
||||||
loading.hide();
|
|
||||||
}
|
|
||||||
|
|
||||||
function onSaveComplete() {
|
|
||||||
loading.hide();
|
|
||||||
toast(globalize.translate('SettingsSaved'));
|
|
||||||
}
|
|
||||||
|
|
||||||
function saveUser(user, page) {
|
|
||||||
user.Policy.EnableAllFolders = $('#chkEnableAllFolders', page).is(':checked');
|
|
||||||
user.Policy.EnabledFolders = user.Policy.EnableAllFolders ? [] : $('.chkFolder', page).get().filter(function (c) {
|
|
||||||
return c.checked;
|
|
||||||
}).map(function (c) {
|
|
||||||
return c.getAttribute('data-id');
|
|
||||||
});
|
|
||||||
user.Policy.EnableAllChannels = $('#chkEnableAllChannels', page).is(':checked');
|
|
||||||
user.Policy.EnabledChannels = user.Policy.EnableAllChannels ? [] : $('.chkChannel', page).get().filter(function (c) {
|
|
||||||
return c.checked;
|
|
||||||
}).map(function (c) {
|
|
||||||
return c.getAttribute('data-id');
|
|
||||||
});
|
|
||||||
user.Policy.EnableAllDevices = $('#chkEnableAllDevices', page).is(':checked');
|
|
||||||
user.Policy.EnabledDevices = user.Policy.EnableAllDevices ? [] : $('.chkDevice', page).get().filter(function (c) {
|
|
||||||
return c.checked;
|
|
||||||
}).map(function (c) {
|
|
||||||
return c.getAttribute('data-id');
|
|
||||||
});
|
|
||||||
user.Policy.BlockedChannels = null;
|
|
||||||
user.Policy.BlockedMediaFolders = null;
|
|
||||||
ApiClient.updateUserPolicy(user.Id, user.Policy).then(function () {
|
|
||||||
onSaveComplete();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function onSubmit() {
|
|
||||||
const page = $(this).parents('.page');
|
|
||||||
loading.show();
|
|
||||||
const userId = getParameterByName('userId');
|
|
||||||
ApiClient.getUser(userId).then(function (result) {
|
|
||||||
saveUser(result, page);
|
|
||||||
});
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
$(document).on('pageinit', '#userLibraryAccessPage', function () {
|
|
||||||
const page = this;
|
|
||||||
$('#chkEnableAllDevices', page).on('change', function () {
|
|
||||||
if (this.checked) {
|
|
||||||
$('.deviceAccessListContainer', page).hide();
|
|
||||||
} else {
|
|
||||||
$('.deviceAccessListContainer', page).show();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
$('#chkEnableAllChannels', page).on('change', function () {
|
|
||||||
if (this.checked) {
|
|
||||||
$('.channelAccessListContainer', page).hide();
|
|
||||||
} else {
|
|
||||||
$('.channelAccessListContainer', page).show();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
page.querySelector('#chkEnableAllFolders').addEventListener('change', function () {
|
|
||||||
if (this.checked) {
|
|
||||||
page.querySelector('.folderAccessListContainer').classList.add('hide');
|
|
||||||
} else {
|
|
||||||
page.querySelector('.folderAccessListContainer').classList.remove('hide');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
$('.userLibraryAccessForm').off('submit', onSubmit).on('submit', onSubmit);
|
|
||||||
}).on('pageshow', '#userLibraryAccessPage', function () {
|
|
||||||
const page = this;
|
|
||||||
loading.show();
|
|
||||||
let promise1;
|
|
||||||
const userId = getParameterByName('userId');
|
|
||||||
|
|
||||||
if (userId) {
|
|
||||||
promise1 = ApiClient.getUser(userId);
|
|
||||||
} else {
|
|
||||||
const deferred = $.Deferred();
|
|
||||||
deferred.resolveWith(null, [{
|
|
||||||
Configuration: {}
|
|
||||||
}]);
|
|
||||||
promise1 = deferred.promise();
|
|
||||||
}
|
|
||||||
|
|
||||||
const promise2 = Dashboard.getCurrentUser();
|
|
||||||
const promise4 = ApiClient.getJSON(ApiClient.getUrl('Library/MediaFolders', {
|
|
||||||
IsHidden: false
|
|
||||||
}));
|
|
||||||
const promise5 = ApiClient.getJSON(ApiClient.getUrl('Channels'));
|
|
||||||
const promise6 = ApiClient.getJSON(ApiClient.getUrl('Devices'));
|
|
||||||
Promise.all([promise1, promise2, promise4, promise5, promise6]).then(function (responses) {
|
|
||||||
loadUser(page, responses[0], responses[1], responses[2].Items, responses[3].Items, responses[4].Items);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
/* eslint-enable indent */
|
|
||||||
|
|
@ -448,7 +448,7 @@ import { appRouter } from '../components/appRouter';
|
||||||
path: 'dashboard/users/userlibraryaccess.html',
|
path: 'dashboard/users/userlibraryaccess.html',
|
||||||
autoFocus: false,
|
autoFocus: false,
|
||||||
roles: 'admin',
|
roles: 'admin',
|
||||||
controller: 'dashboard/users/userlibraryaccess'
|
pageComponent: 'UserLibraryAccessPage'
|
||||||
});
|
});
|
||||||
|
|
||||||
defineRoute({
|
defineRoute({
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue