milas/jellyfish-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix null reference TypeScript errors - ref.current

Browse source
This commit is contained in:
Dmitry Lyzo 2022-02-16 00:37:06 +03:00
parent 4952fc0119
commit 109fe6056a
5 changed files with 241 additions and 108 deletions
Download patch file Download diff file Expand all files Collapse all files

66
src/components/pages/NewUserPage.tsx
View file

@ -36,33 +36,54 @@ const NewUserPage: FunctionComponent = () => {
}; };
const loadMediaFolders = useCallback((result) => { const loadMediaFolders = useCallback((result) => {
const page = element.current;
if (!page) {
console.error('Unexpected null reference');
return;
}
const mediaFolders = getItemsResult(result); const mediaFolders = getItemsResult(result);
setMediaFoldersItems(mediaFolders); setMediaFoldersItems(mediaFolders);
const folderAccess = element?.current?.querySelector('.folderAccess'); const folderAccess = page.querySelector('.folderAccess');
folderAccess.dispatchEvent(new CustomEvent('create')); folderAccess.dispatchEvent(new CustomEvent('create'));
element.current.querySelector('.chkEnableAllFolders').checked = false; page.querySelector('.chkEnableAllFolders').checked = false;
}, []); }, []);
const loadChannels = useCallback((result) => { const loadChannels = useCallback((result) => {
const page = element.current;
if (!page) {
console.error('Unexpected null reference');
return;
}
const channels = getItemsResult(result); const channels = getItemsResult(result);
setChannelsItems(channels); setChannelsItems(channels);
const channelAccess = element?.current?.querySelector('.channelAccess'); const channelAccess = page.querySelector('.channelAccess');
channelAccess.dispatchEvent(new CustomEvent('create')); channelAccess.dispatchEvent(new CustomEvent('create'));
const channelAccessContainer = element?.current?.querySelector('.channelAccessContainer'); const channelAccessContainer = page.querySelector('.channelAccessContainer');
channels.length ? channelAccessContainer.classList.remove('hide') : channelAccessContainer.classList.add('hide'); channels.length ? channelAccessContainer.classList.remove('hide') : channelAccessContainer.classList.add('hide');
element.current.querySelector('.chkEnableAllChannels').checked = false; page.querySelector('.chkEnableAllChannels').checked = false;
}, []); }, []);
const loadUser = useCallback(() => { const loadUser = useCallback(() => {
element.current.querySelector('#txtUsername').value = ''; const page = element.current;
element.current.querySelector('#txtPassword').value = '';
if (!page) {
console.error('Unexpected null reference');
return;
}
page.querySelector('#txtUsername').value = '';
page.querySelector('#txtPassword').value = '';
loading.show(); loading.show();
const promiseFolders = window.ApiClient.getJSON(window.ApiClient.getUrl('Library/MediaFolders', { const promiseFolders = window.ApiClient.getJSON(window.ApiClient.getUrl('Library/MediaFolders', {
IsHidden: false IsHidden: false
@ -76,29 +97,36 @@ const NewUserPage: FunctionComponent = () => {
}, [loadChannels, loadMediaFolders]); }, [loadChannels, loadMediaFolders]);
useEffect(() => { useEffect(() => {
const page = element.current;
if (!page) {
console.error('Unexpected null reference');
return;
}
loadUser(); loadUser();
const saveUser = () => { const saveUser = () => {
const userInput: userInput = {}; const userInput: userInput = {};
userInput.Name = element?.current?.querySelector('#txtUsername').value; userInput.Name = page.querySelector('#txtUsername').value;
userInput.Password = element?.current?.querySelector('#txtPassword').value; userInput.Password = page.querySelector('#txtPassword').value;
window.ApiClient.createUser(userInput).then(function (user) { window.ApiClient.createUser(userInput).then(function (user) {
user.Policy.EnableAllFolders = element?.current?.querySelector('.chkEnableAllFolders').checked; user.Policy.EnableAllFolders = page.querySelector('.chkEnableAllFolders').checked;
user.Policy.EnabledFolders = []; user.Policy.EnabledFolders = [];
if (!user.Policy.EnableAllFolders) { if (!user.Policy.EnableAllFolders) {
user.Policy.EnabledFolders = Array.prototype.filter.call(element?.current?.querySelectorAll('.chkFolder'), function (i) { user.Policy.EnabledFolders = Array.prototype.filter.call(page.querySelectorAll('.chkFolder'), function (i) {
return i.checked; return i.checked;
}).map(function (i) { }).map(function (i) {
return i.getAttribute('data-id'); return i.getAttribute('data-id');
}); });
} }
user.Policy.EnableAllChannels = element?.current?.querySelector('.chkEnableAllChannels').checked; user.Policy.EnableAllChannels = page.querySelector('.chkEnableAllChannels').checked;
user.Policy.EnabledChannels = []; user.Policy.EnabledChannels = [];
if (!user.Policy.EnableAllChannels) { if (!user.Policy.EnableAllChannels) {
user.Policy.EnabledChannels = Array.prototype.filter.call(element?.current?.querySelectorAll('.chkChannel'), function (i) { user.Policy.EnabledChannels = Array.prototype.filter.call(page.querySelectorAll('.chkChannel'), function (i) {
return i.checked; return i.checked;
}).map(function (i) { }).map(function (i) {
return i.getAttribute('data-id'); return i.getAttribute('data-id');
@ -122,19 +150,19 @@ const NewUserPage: FunctionComponent = () => {
return false; return false;
}; };
element?.current?.querySelector('.chkEnableAllChannels').addEventListener('change', function (this: HTMLInputElement) { page.querySelector('.chkEnableAllChannels').addEventListener('change', function (this: HTMLInputElement) {
const channelAccessListContainer = element?.current?.querySelector('.channelAccessListContainer'); const channelAccessListContainer = page.querySelector('.channelAccessListContainer');
this.checked ? channelAccessListContainer.classList.add('hide') : channelAccessListContainer.classList.remove('hide'); this.checked ? channelAccessListContainer.classList.add('hide') : channelAccessListContainer.classList.remove('hide');
}); });
element?.current?.querySelector('.chkEnableAllFolders').addEventListener('change', function (this: HTMLInputElement) { page.querySelector('.chkEnableAllFolders').addEventListener('change', function (this: HTMLInputElement) {
const folderAccessListContainer = element?.current?.querySelector('.folderAccessListContainer'); const folderAccessListContainer = page.querySelector('.folderAccessListContainer');
this.checked ? folderAccessListContainer.classList.add('hide') : folderAccessListContainer.classList.remove('hide'); this.checked ? folderAccessListContainer.classList.add('hide') : folderAccessListContainer.classList.remove('hide');
}); });
element?.current?.querySelector('.newUserProfileForm').addEventListener('submit', onSubmit); page.querySelector('.newUserProfileForm').addEventListener('submit', onSubmit);
element?.current?.querySelector('.button-cancel').addEventListener('click', function() { page.querySelector('.button-cancel').addEventListener('click', function() {
window.history.back(); window.history.back();
}); });
}, [loadUser]); }, [loadUser]);

143
src/components/pages/UserEditPage.tsx
View file

@ -45,7 +45,14 @@ const UserEditPage: FunctionComponent = () => {
}; };
const loadAuthProviders = useCallback((user, providers) => { const loadAuthProviders = useCallback((user, providers) => {
const fldSelectLoginProvider = element?.current?.querySelector('.fldSelectLoginProvider'); const page = element.current;
if (!page) {
console.error('Unexpected null reference');
return;
}
const fldSelectLoginProvider = page.querySelector('.fldSelectLoginProvider');
providers.length > 1 ? fldSelectLoginProvider.classList.remove('hide') : fldSelectLoginProvider.classList.add('hide'); providers.length > 1 ? fldSelectLoginProvider.classList.remove('hide') : fldSelectLoginProvider.classList.add('hide');
setAuthProviders(providers); setAuthProviders(providers);
@ -55,7 +62,14 @@ const UserEditPage: FunctionComponent = () => {
}, []); }, []);
const loadPasswordResetProviders = useCallback((user, providers) => { const loadPasswordResetProviders = useCallback((user, providers) => {
const fldSelectPasswordResetProvider = element?.current?.querySelector('.fldSelectPasswordResetProvider'); const page = element.current;
if (!page) {
console.error('Unexpected null reference');
return;
}
const fldSelectPasswordResetProvider = page.querySelector('.fldSelectPasswordResetProvider');
providers.length > 1 ? fldSelectPasswordResetProvider.classList.remove('hide') : fldSelectPasswordResetProvider.classList.add('hide'); providers.length > 1 ? fldSelectPasswordResetProvider.classList.remove('hide') : fldSelectPasswordResetProvider.classList.add('hide');
setPasswordResetProviders(providers); setPasswordResetProviders(providers);
@ -65,6 +79,13 @@ const UserEditPage: FunctionComponent = () => {
}, []); }, []);
const loadDeleteFolders = useCallback((user, mediaFolders) => { const loadDeleteFolders = useCallback((user, mediaFolders) => {
const page = element.current;
if (!page) {
console.error('Unexpected null reference');
return;
}
window.ApiClient.getJSON(window.ApiClient.getUrl('Channels', { window.ApiClient.getJSON(window.ApiClient.getUrl('Channels', {
SupportsMediaDeletion: true SupportsMediaDeletion: true
})).then(function (channelsResult) { })).then(function (channelsResult) {
@ -94,13 +115,20 @@ const UserEditPage: FunctionComponent = () => {
setDeleteFoldersAccess(itemsArr); setDeleteFoldersAccess(itemsArr);
const chkEnableDeleteAllFolders = element.current.querySelector('.chkEnableDeleteAllFolders'); const chkEnableDeleteAllFolders = page.querySelector('.chkEnableDeleteAllFolders');
chkEnableDeleteAllFolders.checked = user.Policy.EnableContentDeletion; chkEnableDeleteAllFolders.checked = user.Policy.EnableContentDeletion;
triggerChange(chkEnableDeleteAllFolders); triggerChange(chkEnableDeleteAllFolders);
}); });
}, []); }, []);
const loadUser = useCallback((user) => { const loadUser = useCallback((user) => {
const page = element.current;
if (!page) {
console.error('Unexpected null reference');
return;
}
window.ApiClient.getJSON(window.ApiClient.getUrl('Auth/Providers')).then(function (providers) { window.ApiClient.getJSON(window.ApiClient.getUrl('Auth/Providers')).then(function (providers) {
loadAuthProviders(user, providers); loadAuthProviders(user, providers);
}); });
@ -113,37 +141,37 @@ const UserEditPage: FunctionComponent = () => {
loadDeleteFolders(user, folders.Items); loadDeleteFolders(user, folders.Items);
}); });
const disabledUserBanner = element?.current?.querySelector('.disabledUserBanner'); const disabledUserBanner = page.querySelector('.disabledUserBanner');
user.Policy.IsDisabled ? disabledUserBanner.classList.remove('hide') : disabledUserBanner.classList.add('hide'); user.Policy.IsDisabled ? disabledUserBanner.classList.remove('hide') : disabledUserBanner.classList.add('hide');
const txtUserName = element?.current?.querySelector('#txtUserName'); const txtUserName = page.querySelector('#txtUserName');
txtUserName.disabled = ''; txtUserName.disabled = '';
txtUserName.removeAttribute('disabled'); txtUserName.removeAttribute('disabled');
const lnkEditUserPreferences = element?.current?.querySelector('.lnkEditUserPreferences'); const lnkEditUserPreferences = page.querySelector('.lnkEditUserPreferences');
lnkEditUserPreferences.setAttribute('href', 'mypreferencesmenu.html?userId=' + user.Id); lnkEditUserPreferences.setAttribute('href', 'mypreferencesmenu.html?userId=' + user.Id);
LibraryMenu.setTitle(user.Name); LibraryMenu.setTitle(user.Name);
setUserName(user.Name); setUserName(user.Name);
element.current.querySelector('#txtUserName').value = user.Name; page.querySelector('#txtUserName').value = user.Name;
element.current.querySelector('.chkIsAdmin').checked = user.Policy.IsAdministrator; page.querySelector('.chkIsAdmin').checked = user.Policy.IsAdministrator;
element.current.querySelector('.chkDisabled').checked = user.Policy.IsDisabled; page.querySelector('.chkDisabled').checked = user.Policy.IsDisabled;
element.current.querySelector('.chkIsHidden').checked = user.Policy.IsHidden; page.querySelector('.chkIsHidden').checked = user.Policy.IsHidden;
element.current.querySelector('.chkRemoteControlSharedDevices').checked = user.Policy.EnableSharedDeviceControl; page.querySelector('.chkRemoteControlSharedDevices').checked = user.Policy.EnableSharedDeviceControl;
element.current.querySelector('.chkEnableRemoteControlOtherUsers').checked = user.Policy.EnableRemoteControlOfOtherUsers; page.querySelector('.chkEnableRemoteControlOtherUsers').checked = user.Policy.EnableRemoteControlOfOtherUsers;
element.current.querySelector('.chkEnableDownloading').checked = user.Policy.EnableContentDownloading; page.querySelector('.chkEnableDownloading').checked = user.Policy.EnableContentDownloading;
element.current.querySelector('.chkManageLiveTv').checked = user.Policy.EnableLiveTvManagement; page.querySelector('.chkManageLiveTv').checked = user.Policy.EnableLiveTvManagement;
element.current.querySelector('.chkEnableLiveTvAccess').checked = user.Policy.EnableLiveTvAccess; page.querySelector('.chkEnableLiveTvAccess').checked = user.Policy.EnableLiveTvAccess;
element.current.querySelector('.chkEnableMediaPlayback').checked = user.Policy.EnableMediaPlayback; page.querySelector('.chkEnableMediaPlayback').checked = user.Policy.EnableMediaPlayback;
element.current.querySelector('.chkEnableAudioPlaybackTranscoding').checked = user.Policy.EnableAudioPlaybackTranscoding; page.querySelector('.chkEnableAudioPlaybackTranscoding').checked = user.Policy.EnableAudioPlaybackTranscoding;
element.current.querySelector('.chkEnableVideoPlaybackTranscoding').checked = user.Policy.EnableVideoPlaybackTranscoding; page.querySelector('.chkEnableVideoPlaybackTranscoding').checked = user.Policy.EnableVideoPlaybackTranscoding;
element.current.querySelector('.chkEnableVideoPlaybackRemuxing').checked = user.Policy.EnablePlaybackRemuxing; page.querySelector('.chkEnableVideoPlaybackRemuxing').checked = user.Policy.EnablePlaybackRemuxing;
element.current.querySelector('.chkForceRemoteSourceTranscoding').checked = user.Policy.ForceRemoteSourceTranscoding; page.querySelector('.chkForceRemoteSourceTranscoding').checked = user.Policy.ForceRemoteSourceTranscoding;
element.current.querySelector('.chkRemoteAccess').checked = user.Policy.EnableRemoteAccess == null || user.Policy.EnableRemoteAccess; page.querySelector('.chkRemoteAccess').checked = user.Policy.EnableRemoteAccess == null || user.Policy.EnableRemoteAccess;
element.current.querySelector('#txtRemoteClientBitrateLimit').value = user.Policy.RemoteClientBitrateLimit / 1e6 || ''; page.querySelector('#txtRemoteClientBitrateLimit').value = user.Policy.RemoteClientBitrateLimit / 1e6 || '';
element.current.querySelector('#txtLoginAttemptsBeforeLockout').value = user.Policy.LoginAttemptsBeforeLockout || '0'; page.querySelector('#txtLoginAttemptsBeforeLockout').value = user.Policy.LoginAttemptsBeforeLockout || '0';
element.current.querySelector('#txtMaxActiveSessions').value = user.Policy.MaxActiveSessions || '0'; page.querySelector('#txtMaxActiveSessions').value = user.Policy.MaxActiveSessions || '0';
if (window.ApiClient.isMinServerVersion('10.6.0')) { if (window.ApiClient.isMinServerVersion('10.6.0')) {
element.current.querySelector('#selectSyncPlayAccess').value = user.Policy.SyncPlayAccess; page.querySelector('#selectSyncPlayAccess').value = user.Policy.SyncPlayAccess;
} }
loading.hide(); loading.hide();
}, [loadAuthProviders, loadPasswordResetProviders, loadDeleteFolders ]); }, [loadAuthProviders, loadPasswordResetProviders, loadDeleteFolders ]);
@ -156,6 +184,13 @@ const UserEditPage: FunctionComponent = () => {
}, [loadUser]); }, [loadUser]);
useEffect(() => { useEffect(() => {
const page = element.current;
if (!page) {
console.error('Unexpected null reference');
return;
}
loadData(); loadData();
function onSaveComplete() { function onSaveComplete() {
@ -173,34 +208,34 @@ const UserEditPage: FunctionComponent = () => {
throw new Error('Unexpected null user.Policy'); throw new Error('Unexpected null user.Policy');
} }
user.Name = element?.current?.querySelector('#txtUserName').value; user.Name = page.querySelector('#txtUserName').value;
user.Policy.IsAdministrator = element?.current?.querySelector('.chkIsAdmin').checked; user.Policy.IsAdministrator = page.querySelector('.chkIsAdmin').checked;
user.Policy.IsHidden = element?.current?.querySelector('.chkIsHidden').checked; user.Policy.IsHidden = page.querySelector('.chkIsHidden').checked;
user.Policy.IsDisabled = element?.current?.querySelector('.chkDisabled').checked; user.Policy.IsDisabled = page.querySelector('.chkDisabled').checked;
user.Policy.EnableRemoteControlOfOtherUsers = element?.current?.querySelector('.chkEnableRemoteControlOtherUsers').checked; user.Policy.EnableRemoteControlOfOtherUsers = page.querySelector('.chkEnableRemoteControlOtherUsers').checked;
user.Policy.EnableLiveTvManagement = element?.current?.querySelector('.chkManageLiveTv').checked; user.Policy.EnableLiveTvManagement = page.querySelector('.chkManageLiveTv').checked;
user.Policy.EnableLiveTvAccess = element?.current?.querySelector('.chkEnableLiveTvAccess').checked; user.Policy.EnableLiveTvAccess = page.querySelector('.chkEnableLiveTvAccess').checked;
user.Policy.EnableSharedDeviceControl = element?.current?.querySelector('.chkRemoteControlSharedDevices').checked; user.Policy.EnableSharedDeviceControl = page.querySelector('.chkRemoteControlSharedDevices').checked;
user.Policy.EnableMediaPlayback = element?.current?.querySelector('.chkEnableMediaPlayback').checked; user.Policy.EnableMediaPlayback = page.querySelector('.chkEnableMediaPlayback').checked;
user.Policy.EnableAudioPlaybackTranscoding = element?.current?.querySelector('.chkEnableAudioPlaybackTranscoding').checked; user.Policy.EnableAudioPlaybackTranscoding = page.querySelector('.chkEnableAudioPlaybackTranscoding').checked;
user.Policy.EnableVideoPlaybackTranscoding = element?.current?.querySelector('.chkEnableVideoPlaybackTranscoding').checked; user.Policy.EnableVideoPlaybackTranscoding = page.querySelector('.chkEnableVideoPlaybackTranscoding').checked;
user.Policy.EnablePlaybackRemuxing = element?.current?.querySelector('.chkEnableVideoPlaybackRemuxing').checked; user.Policy.EnablePlaybackRemuxing = page.querySelector('.chkEnableVideoPlaybackRemuxing').checked;
user.Policy.ForceRemoteSourceTranscoding = element?.current?.querySelector('.chkForceRemoteSourceTranscoding').checked; user.Policy.ForceRemoteSourceTranscoding = page.querySelector('.chkForceRemoteSourceTranscoding').checked;
user.Policy.EnableContentDownloading = element?.current?.querySelector('.chkEnableDownloading').checked; user.Policy.EnableContentDownloading = page.querySelector('.chkEnableDownloading').checked;
user.Policy.EnableRemoteAccess = element?.current?.querySelector('.chkRemoteAccess').checked; user.Policy.EnableRemoteAccess = page.querySelector('.chkRemoteAccess').checked;
user.Policy.RemoteClientBitrateLimit = Math.floor(1e6 * parseFloat(element?.current?.querySelector('#txtRemoteClientBitrateLimit').value || '0')); user.Policy.RemoteClientBitrateLimit = Math.floor(1e6 * parseFloat(page.querySelector('#txtRemoteClientBitrateLimit').value || '0'));
user.Policy.LoginAttemptsBeforeLockout = parseInt(element?.current?.querySelector('#txtLoginAttemptsBeforeLockout').value || '0'); user.Policy.LoginAttemptsBeforeLockout = parseInt(page.querySelector('#txtLoginAttemptsBeforeLockout').value || '0');
user.Policy.MaxActiveSessions = parseInt(element?.current?.querySelector('#txtMaxActiveSessions').value || '0'); user.Policy.MaxActiveSessions = parseInt(page.querySelector('#txtMaxActiveSessions').value || '0');
user.Policy.AuthenticationProviderId = element?.current?.querySelector('.selectLoginProvider').value; user.Policy.AuthenticationProviderId = page.querySelector('.selectLoginProvider').value;
user.Policy.PasswordResetProviderId = element?.current?.querySelector('.selectPasswordResetProvider').value; user.Policy.PasswordResetProviderId = page.querySelector('.selectPasswordResetProvider').value;
user.Policy.EnableContentDeletion = element?.current?.querySelector('.chkEnableDeleteAllFolders').checked; user.Policy.EnableContentDeletion = page.querySelector('.chkEnableDeleteAllFolders').checked;
user.Policy.EnableContentDeletionFromFolders = user.Policy.EnableContentDeletion ? [] : Array.prototype.filter.call(element?.current?.querySelectorAll('.chkFolder'), function (c) { user.Policy.EnableContentDeletionFromFolders = user.Policy.EnableContentDeletion ? [] : Array.prototype.filter.call(page.querySelectorAll('.chkFolder'), function (c) {
return c.checked; return c.checked;
}).map(function (c) { }).map(function (c) {
return c.getAttribute('data-id'); return c.getAttribute('data-id');
}); });
if (window.ApiClient.isMinServerVersion('10.6.0')) { if (window.ApiClient.isMinServerVersion('10.6.0')) {
user.Policy.SyncPlayAccess = element?.current?.querySelector('#selectSyncPlayAccess').value; user.Policy.SyncPlayAccess = page.querySelector('#selectSyncPlayAccess').value;
} }
window.ApiClient.updateUser(user).then(function () { window.ApiClient.updateUser(user).then(function () {
window.ApiClient.updateUserPolicy(user.Id, user.Policy).then(function () { window.ApiClient.updateUserPolicy(user.Id, user.Policy).then(function () {
@ -219,22 +254,22 @@ const UserEditPage: FunctionComponent = () => {
return false; return false;
}; };
element?.current?.querySelector('.chkEnableDeleteAllFolders').addEventListener('change', function (this: HTMLInputElement) { page.querySelector('.chkEnableDeleteAllFolders').addEventListener('change', function (this: HTMLInputElement) {
if (this.checked) { if (this.checked) {
element?.current?.querySelector('.deleteAccess').classList.add('hide'); page.querySelector('.deleteAccess').classList.add('hide');
} else { } else {
element?.current?.querySelector('.deleteAccess').classList.remove('hide'); page.querySelector('.deleteAccess').classList.remove('hide');
} }
}); });
window.ApiClient.getServerConfiguration().then(function (config) { window.ApiClient.getServerConfiguration().then(function (config) {
const fldRemoteAccess = element?.current?.querySelector('.fldRemoteAccess'); const fldRemoteAccess = page.querySelector('.fldRemoteAccess');
config.EnableRemoteAccess ? fldRemoteAccess.classList.remove('hide') : fldRemoteAccess.classList.add('hide'); config.EnableRemoteAccess ? fldRemoteAccess.classList.remove('hide') : fldRemoteAccess.classList.add('hide');
}); });
element?.current?.querySelector('.editUserProfileForm').addEventListener('submit', onSubmit); page.querySelector('.editUserProfileForm').addEventListener('submit', onSubmit);
element?.current?.querySelector('.button-cancel').addEventListener('click', function() { page.querySelector('.button-cancel').addEventListener('click', function() {
window.history.back(); window.history.back();
}); });
}, [loadData]); }, [loadData]);

68
src/components/pages/UserLibraryAccessPage.tsx
View file

@ -34,6 +34,13 @@ const UserLibraryAccessPage: FunctionComponent = () => {
}; };
const loadMediaFolders = useCallback((user, mediaFolders) => { const loadMediaFolders = useCallback((user, mediaFolders) => {
const page = element.current;
if (!page) {
console.error('Unexpected null reference');
return;
}
const itemsArr: ItemsArr[] = []; const itemsArr: ItemsArr[] = [];
for (const folder of mediaFolders) { for (const folder of mediaFolders) {
@ -48,12 +55,19 @@ const UserLibraryAccessPage: FunctionComponent = () => {
setMediaFoldersItems(itemsArr); setMediaFoldersItems(itemsArr);
const chkEnableAllFolders = element.current.querySelector('.chkEnableAllFolders'); const chkEnableAllFolders = page.querySelector('.chkEnableAllFolders');
chkEnableAllFolders.checked = user.Policy.EnableAllFolders; chkEnableAllFolders.checked = user.Policy.EnableAllFolders;
triggerChange(chkEnableAllFolders); triggerChange(chkEnableAllFolders);
}, []); }, []);
const loadChannels = useCallback((user, channels) => { const loadChannels = useCallback((user, channels) => {
const page = element.current;
if (!page) {
console.error('Unexpected null reference');
return;
}
const itemsArr: ItemsArr[] = []; const itemsArr: ItemsArr[] = [];
for (const folder of channels) { for (const folder of channels) {
@ -69,17 +83,24 @@ const UserLibraryAccessPage: FunctionComponent = () => {
setChannelsItems(itemsArr); setChannelsItems(itemsArr);
if (channels.length) { if (channels.length) {
element?.current?.querySelector('.channelAccessContainer').classList.remove('hide'); page.querySelector('.channelAccessContainer').classList.remove('hide');
} else { } else {
element?.current?.querySelector('.channelAccessContainer').classList.add('hide'); page.querySelector('.channelAccessContainer').classList.add('hide');
} }
const chkEnableAllChannels = element.current.querySelector('.chkEnableAllChannels'); const chkEnableAllChannels = page.querySelector('.chkEnableAllChannels');
chkEnableAllChannels.checked = user.Policy.EnableAllChannels; chkEnableAllChannels.checked = user.Policy.EnableAllChannels;
triggerChange(chkEnableAllChannels); triggerChange(chkEnableAllChannels);
}, []); }, []);
const loadDevices = useCallback((user, devices) => { const loadDevices = useCallback((user, devices) => {
const page = element.current;
if (!page) {
console.error('Unexpected null reference');
return;
}
const itemsArr: ItemsArr[] = []; const itemsArr: ItemsArr[] = [];
for (const device of devices) { for (const device of devices) {
@ -95,14 +116,14 @@ const UserLibraryAccessPage: FunctionComponent = () => {
setDevicesItems(itemsArr); setDevicesItems(itemsArr);
const chkEnableAllDevices = element.current.querySelector('.chkEnableAllDevices'); const chkEnableAllDevices = page.querySelector('.chkEnableAllDevices');
chkEnableAllDevices.checked = user.Policy.EnableAllDevices; chkEnableAllDevices.checked = user.Policy.EnableAllDevices;
triggerChange(chkEnableAllDevices); triggerChange(chkEnableAllDevices);
if (user.Policy.IsAdministrator) { if (user.Policy.IsAdministrator) {
element?.current?.querySelector('.deviceAccessContainer').classList.add('hide'); page.querySelector('.deviceAccessContainer').classList.add('hide');
} else { } else {
element?.current?.querySelector('.deviceAccessContainer').classList.remove('hide'); page.querySelector('.deviceAccessContainer').classList.remove('hide');
} }
}, []); }, []);
@ -130,6 +151,13 @@ const UserLibraryAccessPage: FunctionComponent = () => {
}, [loadUser]); }, [loadUser]);
useEffect(() => { useEffect(() => {
const page = element.current;
if (!page) {
console.error('Unexpected null reference');
return;
}
loadData(); loadData();
const onSubmit = (e: Event) => { const onSubmit = (e: Event) => {
@ -152,20 +180,20 @@ const UserLibraryAccessPage: FunctionComponent = () => {
throw new Error('Unexpected null user.Policy'); throw new Error('Unexpected null user.Policy');
} }
user.Policy.EnableAllFolders = element?.current?.querySelector('.chkEnableAllFolders').checked; user.Policy.EnableAllFolders = page.querySelector('.chkEnableAllFolders').checked;
user.Policy.EnabledFolders = user.Policy.EnableAllFolders ? [] : Array.prototype.filter.call(element?.current?.querySelectorAll('.chkFolder'), function (c) { user.Policy.EnabledFolders = user.Policy.EnableAllFolders ? [] : Array.prototype.filter.call(page.querySelectorAll('.chkFolder'), function (c) {
return c.checked; return c.checked;
}).map(function (c) { }).map(function (c) {
return c.getAttribute('data-id'); return c.getAttribute('data-id');
}); });
user.Policy.EnableAllChannels = element?.current?.querySelector('.chkEnableAllChannels').checked; user.Policy.EnableAllChannels = page.querySelector('.chkEnableAllChannels').checked;
user.Policy.EnabledChannels = user.Policy.EnableAllChannels ? [] : Array.prototype.filter.call(element?.current?.querySelectorAll('.chkChannel'), function (c) { user.Policy.EnabledChannels = user.Policy.EnableAllChannels ? [] : Array.prototype.filter.call(page.querySelectorAll('.chkChannel'), function (c) {
return c.checked; return c.checked;
}).map(function (c) { }).map(function (c) {
return c.getAttribute('data-id'); return c.getAttribute('data-id');
}); });
user.Policy.EnableAllDevices = element?.current?.querySelector('.chkEnableAllDevices').checked; user.Policy.EnableAllDevices = page.querySelector('.chkEnableAllDevices').checked;
user.Policy.EnabledDevices = user.Policy.EnableAllDevices ? [] : Array.prototype.filter.call(element?.current?.querySelectorAll('.chkDevice'), function (c) { user.Policy.EnabledDevices = user.Policy.EnableAllDevices ? [] : Array.prototype.filter.call(page.querySelectorAll('.chkDevice'), function (c) {
return c.checked; return c.checked;
}).map(function (c) { }).map(function (c) {
return c.getAttribute('data-id'); return c.getAttribute('data-id');
@ -182,19 +210,19 @@ const UserLibraryAccessPage: FunctionComponent = () => {
toast(globalize.translate('SettingsSaved')); toast(globalize.translate('SettingsSaved'));
}; };
element?.current?.querySelector('.chkEnableAllDevices').addEventListener('change', function (this: HTMLInputElement) { page.querySelector('.chkEnableAllDevices').addEventListener('change', function (this: HTMLInputElement) {
element?.current?.querySelector('.deviceAccessListContainer').classList.toggle('hide', this.checked); page.querySelector('.deviceAccessListContainer').classList.toggle('hide', this.checked);
}); });
element?.current?.querySelector('.chkEnableAllChannels').addEventListener('change', function (this: HTMLInputElement) { page.querySelector('.chkEnableAllChannels').addEventListener('change', function (this: HTMLInputElement) {
element?.current?.querySelector('.channelAccessListContainer').classList.toggle('hide', this.checked); page.querySelector('.channelAccessListContainer').classList.toggle('hide', this.checked);
}); });
element?.current?.querySelector('.chkEnableAllFolders').addEventListener('change', function (this: HTMLInputElement) { page.querySelector('.chkEnableAllFolders').addEventListener('change', function (this: HTMLInputElement) {
element?.current?.querySelector('.folderAccessListContainer').classList.toggle('hide', this.checked); page.querySelector('.folderAccessListContainer').classList.toggle('hide', this.checked);
}); });
element?.current?.querySelector('.userLibraryAccessForm').addEventListener('submit', onSubmit); page.querySelector('.userLibraryAccessForm').addEventListener('submit', onSubmit);
}, [loadData]); }, [loadData]);
return ( return (

61
src/components/pages/UserParentalControl.tsx
View file

@ -60,6 +60,13 @@ const UserParentalControl: FunctionComponent = () => {
}, []); }, []);
const loadUnratedItems = useCallback((user) => { const loadUnratedItems = useCallback((user) => {
const page = element.current;
if (!page) {
console.error('Unexpected null reference');
return;
}
const items = [{ const items = [{
name: globalize.translate('Books'), name: globalize.translate('Books'),
value: 'Book' value: 'Book'
@ -97,14 +104,21 @@ const UserParentalControl: FunctionComponent = () => {
setUnratedItems(itemsArr); setUnratedItems(itemsArr);
const blockUnratedItems = element?.current?.querySelector('.blockUnratedItems'); const blockUnratedItems = page.querySelector('.blockUnratedItems');
blockUnratedItems.dispatchEvent(new CustomEvent('create')); blockUnratedItems.dispatchEvent(new CustomEvent('create'));
}, []); }, []);
const loadBlockedTags = useCallback((tags) => { const loadBlockedTags = useCallback((tags) => {
const page = element.current;
if (!page) {
console.error('Unexpected null reference');
return;
}
setBlockedTags(tags); setBlockedTags(tags);
const blockedTagsElem = element?.current?.querySelector('.blockedTags'); const blockedTagsElem = page.querySelector('.blockedTags');
for (const btnDeleteTag of blockedTagsElem.querySelectorAll('.btnDeleteTag')) { for (const btnDeleteTag of blockedTagsElem.querySelectorAll('.btnDeleteTag')) {
btnDeleteTag.addEventListener('click', function () { btnDeleteTag.addEventListener('click', function () {
@ -118,9 +132,16 @@ const UserParentalControl: FunctionComponent = () => {
}, []); }, []);
const renderAccessSchedule = useCallback((schedules) => { const renderAccessSchedule = useCallback((schedules) => {
const page = element.current;
if (!page) {
console.error('Unexpected null reference');
return;
}
setAccessSchedules(schedules); setAccessSchedules(schedules);
const accessScheduleList = element?.current?.querySelector('.accessScheduleList'); const accessScheduleList = page.querySelector('.accessScheduleList');
for (const btnDelete of accessScheduleList.querySelectorAll('.btnDelete')) { for (const btnDelete of accessScheduleList.querySelectorAll('.btnDelete')) {
btnDelete.addEventListener('click', function () { btnDelete.addEventListener('click', function () {
@ -135,6 +156,13 @@ const UserParentalControl: FunctionComponent = () => {
}, []); }, []);
const loadUser = useCallback((user, allParentalRatings) => { const loadUser = useCallback((user, allParentalRatings) => {
const page = element.current;
if (!page) {
console.error('Unexpected null reference');
return;
}
setUserName(user.Name); setUserName(user.Name);
LibraryMenu.setTitle(user.Name); LibraryMenu.setTitle(user.Name);
loadUnratedItems(user); loadUnratedItems(user);
@ -153,12 +181,12 @@ const UserParentalControl: FunctionComponent = () => {
} }
} }
element.current.querySelector('.selectMaxParentalRating').value = ratingValue; page.querySelector('.selectMaxParentalRating').value = ratingValue;
if (user.Policy.IsAdministrator) { if (user.Policy.IsAdministrator) {
element?.current?.querySelector('.accessScheduleSection').classList.add('hide'); page.querySelector('.accessScheduleSection').classList.add('hide');
} else { } else {
element?.current?.querySelector('.accessScheduleSection').classList.remove('hide'); page.querySelector('.accessScheduleSection').classList.remove('hide');
} }
renderAccessSchedule(user.Policy.AccessSchedules || []); renderAccessSchedule(user.Policy.AccessSchedules || []);
loading.hide(); loading.hide();
@ -175,6 +203,13 @@ const UserParentalControl: FunctionComponent = () => {
}, [loadUser]); }, [loadUser]);
useEffect(() => { useEffect(() => {
const page = element.current;
if (!page) {
console.error('Unexpected null reference');
return;
}
loadData(); loadData();
const onSaveComplete = () => { const onSaveComplete = () => {
@ -191,8 +226,8 @@ const UserParentalControl: FunctionComponent = () => {
throw new Error('Unexpected null user.Policy'); throw new Error('Unexpected null user.Policy');
} }
user.Policy.MaxParentalRating = element?.current?.querySelector('.selectMaxParentalRating').value || null; user.Policy.MaxParentalRating = page.querySelector('.selectMaxParentalRating').value || null;
user.Policy.BlockUnratedItems = Array.prototype.filter.call(element?.current?.querySelectorAll('.chkUnratedItem'), function (i) { user.Policy.BlockUnratedItems = Array.prototype.filter.call(page.querySelectorAll('.chkUnratedItem'), function (i) {
return i.checked; return i.checked;
}).map(function (i) { }).map(function (i) {
return i.getAttribute('data-itemtype'); return i.getAttribute('data-itemtype');
@ -223,7 +258,7 @@ const UserParentalControl: FunctionComponent = () => {
}; };
const getSchedulesFromPage = () => { const getSchedulesFromPage = () => {
return Array.prototype.map.call(element?.current?.querySelectorAll('.liSchedule'), function (elem) { return Array.prototype.map.call(page.querySelectorAll('.liSchedule'), function (elem) {
return { return {
DayOfWeek: elem.getAttribute('data-day'), DayOfWeek: elem.getAttribute('data-day'),
StartHour: elem.getAttribute('data-start'), StartHour: elem.getAttribute('data-start'),
@ -233,7 +268,7 @@ const UserParentalControl: FunctionComponent = () => {
}; };
const getBlockedTagsFromPage = () => { const getBlockedTagsFromPage = () => {
return Array.prototype.map.call(element?.current?.querySelectorAll('.blockedTag'), function (elem) { return Array.prototype.map.call(page.querySelectorAll('.blockedTag'), function (elem) {
return elem.getAttribute('data-tag'); return elem.getAttribute('data-tag');
}); });
}; };
@ -264,15 +299,15 @@ const UserParentalControl: FunctionComponent = () => {
return false; return false;
}; };
element?.current?.querySelector('.btnAddSchedule').addEventListener('click', function () { page.querySelector('.btnAddSchedule').addEventListener('click', function () {
showSchedulePopup({}, -1); showSchedulePopup({}, -1);
}); });
element?.current?.querySelector('.btnAddBlockedTag').addEventListener('click', function () { page.querySelector('.btnAddBlockedTag').addEventListener('click', function () {
showBlockedTagPopup(); showBlockedTagPopup();
}); });
element?.current?.querySelector('.userParentalControlForm').addEventListener('submit', onSubmit); page.querySelector('.userParentalControlForm').addEventListener('submit', onSubmit);
}, [loadBlockedTags, loadData, renderAccessSchedule]); }, [loadBlockedTags, loadData, renderAccessSchedule]);
return ( return (

11
src/components/pages/UserProfilesPage.tsx
View file

@ -34,6 +34,13 @@ const UserProfilesPage: FunctionComponent = () => {
}; };
useEffect(() => { useEffect(() => {
const page = element.current;
if (!page) {
console.error('Unexpected null reference');
return;
}
loadData(); loadData();
const showUserMenu = (elem: HTMLElement) => { const showUserMenu = (elem: HTMLElement) => {
@ -105,7 +112,7 @@ const UserProfilesPage: FunctionComponent = () => {
}); });
}; };
element?.current?.addEventListener('click', function (e) { page.addEventListener('click', function (e) {
const btnUserMenu = dom.parentWithClass(e.target, 'btnUserMenu'); const btnUserMenu = dom.parentWithClass(e.target, 'btnUserMenu');
if (btnUserMenu) { if (btnUserMenu) {
@ -113,7 +120,7 @@ const UserProfilesPage: FunctionComponent = () => {
} }
}); });
element?.current?.querySelector('.btnAddUser').addEventListener('click', function() { page.querySelector('.btnAddUser').addEventListener('click', function() {
Dashboard.navigate('usernew.html'); Dashboard.navigate('usernew.html');
}); });
}, []); }, []);