Convert userParentalControlPage to react

src/components/dashboard/users/AccessScheduleList.tsx

@@ -0,0 +1,60 @@
+import React, { FunctionComponent } from 'react';
+import datetime from '../../../scripts/datetime';
+import globalize from '../../../scripts/globalize';
+
+const createButtonElement = ({index}) => ({
+    __html: `<button
+        type='button'
+        is='paper-icon-button-light'
+        class='btnDelete listItemButton'
+        data-index='${index}'
+    >
+        <span class='material-icons delete' />
+    </button>`
+});
+
+type IProps = {
+    index: number;
+    Id: number;
+    DayOfWeek?: string;
+    StartHour?: number ;
+    EndHour?: number;
+}
+
+function getDisplayTime(hours) {
+    let minutes = 0;
+    const pct = hours % 1;
+
+    if (pct) {
+        minutes = Math.floor(60 * pct);
+    }
+
+    return datetime.getDisplayTime(new Date(2000, 1, 1, hours, minutes, 0, 0));
+}
+
+const AccessScheduleList: FunctionComponent<IProps> = ({index, DayOfWeek, StartHour, EndHour}: IProps) => {
+    return (
+        <div
+            className='liSchedule listItem'
+            data-day={ DayOfWeek}
+            data-start={ StartHour}
+            data-end={ EndHour}
+        >
+            <div className='listItemBody two-line'>
+                <h3 className='listItemBodyText'>
+                    {globalize.translate(DayOfWeek)}
+                </h3>
+                <div className='listItemBodyText secondary'>
+                    {getDisplayTime(StartHour) + ' - ' + getDisplayTime(EndHour)}
+                </div>
+            </div>
+            <div
+                dangerouslySetInnerHTML={createButtonElement({
+                    index: index
+                })}
+            />
+        </div>
+    );
+};
+
+export default AccessScheduleList;

src/components/dashboard/users/BlockedTagList.tsx

@@ -0,0 +1,38 @@
+import React, { FunctionComponent } from 'react';
+
+const createButtonElement = ({tag}) => ({
+    __html: `<button
+        type='button'
+        is='paper-icon-button-light'
+        class='blockedTag btnDeleteTag listItemButton'
+        data-tag='${tag}'
+    >
+        <span class='material-icons delete' />
+    </button>`
+});
+
+type IProps = {
+    tag: any;
+}
+
+const BlockedTagList: FunctionComponent<IProps> = ({tag}: IProps) => {
+    return (
+        <div className='paperList'>
+            <div className='listItem'>
+                <div className='listItemBody'>
+                    <h3 className='listItemBodyText'>
+                        {tag}
+                    </h3>
+                </div>
+                <div
+                    dangerouslySetInnerHTML={createButtonElement({
+                        tag: tag
+                    })}
+                />
+            </div>
+
+        </div>
+    );
+};
+
+export default BlockedTagList;

src/components/dashboard/users/SectionTitleButtonElement.tsx

@@ -1,23 +1,24 @@
 import React, { FunctionComponent } from 'react';
 import globalize from '../../../scripts/globalize';
 
+type IProps = {
+    title: string;
+    className?: string;
+    icon: string,
+}
+
 const createButtonElement = ({ className, title, icon }) => ({
     __html: `<button
         is="emby-button"
         type="button"
         class="${className}"
         style="margin-left:1em;"
-        title="${title}">
+        title="${title}"
+    >
         <span class="material-icons ${icon}"></span>
     </button>`
 });
 
-type IProps = {
-    title?: string;
-    className?: string;
-    icon?: string,
-}
-
 const SectionTitleButtonElement: FunctionComponent<IProps> = ({ className, title, icon }: IProps) => {
     return (
         <div

src/components/dashboard/users/SelectMaxParentalRating.tsx

@@ -0,0 +1,41 @@
+import React, { FunctionComponent } from 'react';
+import globalize from '../../../scripts/globalize';
+
+const createSelectElement = ({ className, label, option }) => ({
+    __html: `<select
+        class="${className}"
+        is="emby-select"
+        label="${label}"
+    >
+        <option value=''></option>
+        ${option}
+    </select>`
+});
+
+type IProps = {
+    className?: string;
+    label?: string;
+    parentalRatings: any
+}
+
+const SelectMaxParentalRating: FunctionComponent<IProps> = ({ className, label, parentalRatings }: IProps) => {
+    const renderOption = ratings => {
+        let content = '';
+        for (const rating of ratings) {
+            content += `<option value='${rating.Value}'>${rating.Name}</option>`;
+        }
+        return content;
+    };
+
+    return (
+        <div
+            dangerouslySetInnerHTML={createSelectElement({
+                className: className,
+                label: globalize.translate(label),
+                option: renderOption(parentalRatings)
+            })}
+        />
+    );
+};
+
+export default SelectMaxParentalRating;

src/components/pages/UserParentalControl.tsx

@@ -0,0 +1,379 @@
+import React, { FunctionComponent, useCallback, useEffect, useState, useRef } from 'react';
+import globalize from '../../scripts/globalize';
+import LibraryMenu from '../../scripts/libraryMenu';
+import { appRouter } from '../appRouter';
+import AccessScheduleList from '../dashboard/users/AccessScheduleList';
+import BlockedTagList from '../dashboard/users/BlockedTagList';
+import ButtonElement from '../dashboard/users/ButtonElement';
+import CheckBoxListItem from '../dashboard/users/CheckBoxListItem';
+import SectionTitleButtonElement from '../dashboard/users/SectionTitleButtonElement';
+import SectionTitleLinkElement from '../dashboard/users/SectionTitleLinkElement';
+import SelectMaxParentalRating from '../dashboard/users/SelectMaxParentalRating';
+import SectionTabs from '../dashboard/users/SectionTabs';
+import loading from '../loading/loading';
+import toast from '../toast/toast';
+
+type Ratings = {
+    Name: string;
+    Value: string;
+}
+
+type ItemsArr = {
+    name: string;
+    value: string;
+    checkedAttribute: string
+}
+
+const UserParentalControl: FunctionComponent = () => {
+    const [ userName, setUserName ] = useState('');
+    const [ parentalRatings, setParentalRatings ] = useState([]);
+    const [ unratedItems, setUnratedItems ] = useState([]);
+    const [ accessSchedules, setAccessSchedules ] = useState([]);
+    const [ blockedTags, setBlockedTags ] = useState([]);
+
+    const element = useRef(null);
+
+    const populateRatings = useCallback((allParentalRatings) => {
+        let rating;
+        const ratings: Ratings[] = [];
+
+        for (let i = 0, length = allParentalRatings.length; i < length; i++) {
+            rating = allParentalRatings[i];
+
+            if (ratings.length) {
+                const lastRating = ratings[ratings.length - 1];
+
+                if (lastRating.Value === rating.Value) {
+                    lastRating.Name += '/' + rating.Name;
+                    continue;
+                }
+            }
+
+            ratings.push({
+                Name: rating.Name,
+                Value: rating.Value
+            });
+        }
+
+        setParentalRatings(ratings);
+    }, []);
+
+    const loadUnratedItems = useCallback((user) => {
+        const items = [{
+            name: globalize.translate('Books'),
+            value: 'Book'
+        }, {
+            name: globalize.translate('Channels'),
+            value: 'ChannelContent'
+        }, {
+            name: globalize.translate('LiveTV'),
+            value: 'LiveTvChannel'
+        }, {
+            name: globalize.translate('Movies'),
+            value: 'Movie'
+        }, {
+            name: globalize.translate('Music'),
+            value: 'Music'
+        }, {
+            name: globalize.translate('Trailers'),
+            value: 'Trailer'
+        }, {
+            name: globalize.translate('Shows'),
+            value: 'Series'
+        }];
+
+        const itemsArr: ItemsArr[] = [];
+
+        for (const item of items) {
+            const isChecked = user.Policy.BlockUnratedItems.indexOf(item.value) != -1;
+            const checkedAttribute = isChecked ? ' checked="checked"' : '';
+            itemsArr.push({
+                value: item.value,
+                name: item.name,
+                checkedAttribute: checkedAttribute
+            });
+        }
+
+        setUnratedItems(itemsArr);
+
+        const blockUnratedItems = element?.current?.querySelector('.blockUnratedItems');
+        blockUnratedItems.dispatchEvent(new CustomEvent('create'));
+    }, []);
+
+    const loadBlockedTags = useCallback((tags) => {
+        setBlockedTags(tags);
+
+        const blockedTagsElem = element?.current?.querySelector('.blockedTags');
+
+        for (const btnDeleteTag of blockedTagsElem.querySelectorAll('.btnDeleteTag')) {
+            btnDeleteTag.addEventListener('click', function () {
+                const tag = btnDeleteTag.getAttribute('data-tag');
+                const newTags = tags.filter(function (t) {
+                    return t != tag;
+                });
+                loadBlockedTags(newTags);
+            });
+        }
+    }, []);
+
+    const renderAccessSchedule = useCallback((schedules) => {
+        setAccessSchedules(schedules);
+
+        const accessScheduleList = element?.current?.querySelector('.accessScheduleList');
+
+        for (const btnDelete of accessScheduleList.querySelectorAll('.btnDelete')) {
+            btnDelete.addEventListener('click', function () {
+                const index = parseInt(btnDelete.getAttribute('data-index'));
+                schedules.splice(index, 1);
+                const newindex = schedules.filter(function (i) {
+                    return i != index;
+                });
+                renderAccessSchedule(newindex);
+            });
+        }
+    }, []);
+
+    const loadUser = useCallback((user, allParentalRatings) => {
+        setUserName(user.Name);
+        LibraryMenu.setTitle(user.Name);
+        loadUnratedItems(user);
+
+        loadBlockedTags(user.Policy.BlockedTags);
+        populateRatings(allParentalRatings);
+        let ratingValue = '';
+
+        if (user.Policy.MaxParentalRating) {
+            for (let i = 0, length = allParentalRatings.length; i < length; i++) {
+                const rating = allParentalRatings[i];
+
+                if (user.Policy.MaxParentalRating >= rating.Value) {
+                    ratingValue = rating.Value;
+                }
+            }
+        }
+
+        element.current.querySelector('.selectMaxParentalRating').value = ratingValue;
+
+        if (user.Policy.IsAdministrator) {
+            element?.current?.querySelector('.accessScheduleSection').classList.add('hide');
+        } else {
+            element?.current?.querySelector('.accessScheduleSection').classList.remove('hide');
+        }
+        renderAccessSchedule(user.Policy.AccessSchedules || []);
+        loading.hide();
+    }, [loadBlockedTags, loadUnratedItems, populateRatings, renderAccessSchedule]);
+
+    const loadData = useCallback(() => {
+        loading.show();
+        const userId = appRouter.param('userId');
+        const promise1 = window.ApiClient.getUser(userId);
+        const promise2 = window.ApiClient.getParentalRatings();
+        // eslint-disable-next-line compat/compat
+        Promise.all([promise1, promise2]).then(function (responses) {
+            loadUser(responses[0], responses[1]);
+        });
+    }, [loadUser]);
+
+    useEffect(() => {
+        loadData();
+
+        const onSaveComplete = () => {
+            loading.hide();
+            toast(globalize.translate('SettingsSaved'));
+        };
+
+        const saveUser = (user) => {
+            user.Policy.MaxParentalRating = element?.current?.querySelector('.selectMaxParentalRating').value || null;
+            user.Policy.BlockUnratedItems = Array.prototype.filter.call(element?.current?.querySelectorAll('.chkUnratedItem'), function (i) {
+                return i.checked;
+            }).map(function (i) {
+                return i.getAttribute('data-id');
+            });
+            user.Policy.AccessSchedules = getSchedulesFromPage();
+            user.Policy.BlockedTags = getBlockedTagsFromPage();
+            window.ApiClient.updateUserPolicy(user.Id, user.Policy).then(function () {
+                onSaveComplete();
+            });
+        };
+
+        const showSchedulePopup = (schedule, index) => {
+            schedule = schedule || {};
+            import('../../components/accessSchedule/accessSchedule').then(({default: accessschedule}) => {
+                accessschedule.show({
+                    schedule: schedule
+                }).then(function (updatedSchedule) {
+                    const schedules = getSchedulesFromPage();
+
+                    if (index == -1) {
+                        index = schedules.length;
+                    }
+
+                    schedules[index] = updatedSchedule;
+                    renderAccessSchedule(schedules);
+                });
+            });
+        };
+
+        const getSchedulesFromPage = () => {
+            return Array.prototype.map.call(element?.current?.querySelectorAll('.liSchedule'), function (elem) {
+                return {
+                    DayOfWeek: elem.getAttribute('data-day'),
+                    StartHour: elem.getAttribute('data-start'),
+                    EndHour: elem.getAttribute('data-end')
+                };
+            });
+        };
+
+        const getBlockedTagsFromPage = () => {
+            return Array.prototype.map.call(element?.current?.querySelectorAll('.blockedTag'), function (elem) {
+                return elem.getAttribute('data-tag');
+            });
+        };
+
+        const showBlockedTagPopup = () => {
+            import('../../components/prompt/prompt').then(({default: prompt}) => {
+                prompt({
+                    label: globalize.translate('LabelTag')
+                }).then(function (value) {
+                    const tags = getBlockedTagsFromPage();
+
+                    if (tags.indexOf(value) == -1) {
+                        tags.push(value);
+                        loadBlockedTags(tags);
+                    }
+                });
+            });
+        };
+
+        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;
+        };
+
+        element?.current?.querySelector('.btnAddSchedule').addEventListener('click', function () {
+            showSchedulePopup({}, -1);
+        });
+
+        element?.current?.querySelector('.btnAddBlockedTag').addEventListener('click', function () {
+            showBlockedTagPopup();
+        });
+
+        element?.current?.querySelector('.userParentalControlForm').addEventListener('submit', onSubmit);
+    }, [loadBlockedTags, loadData, renderAccessSchedule]);
+
+    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>
+                <SectionTabs activeTab='userparentalcontrol'/>
+                <form className='userParentalControlForm'>
+                    <div className='selectContainer'>
+                        <SelectMaxParentalRating
+                            className= 'selectMaxParentalRating'
+                            label= 'LabelMaxParentalRating'
+                            parentalRatings={parentalRatings}
+                        />
+                        <div className='fieldDescription'>
+                            {globalize.translate('MaxParentalRatingHelp')}
+                        </div>
+                    </div>
+                    <div>
+                        <div className='blockUnratedItems'>
+                            <h3 className='checkboxListLabel'>
+                                {globalize.translate('HeaderBlockItemsWithNoRating')}
+                            </h3>
+                            <div className='checkboxList paperList' style={{ padding: '.5em 1em' }}>
+                                {unratedItems.map(Item => {
+                                    return <CheckBoxListItem
+                                        key={Item.value}
+                                        className='chkUnratedItem'
+                                        Id={Item.value}
+                                        Name={Item.name}
+                                        checkedAttribute={Item.checkedAttribute}
+                                    />;
+                                })}
+                            </div>
+                        </div>
+                    </div>
+                    <br />
+                    <div className='verticalSection' style={{marginBottom: '2em'}}>
+                        <div
+                            className='detailSectionHeader sectionTitleContainer'
+                            style={{display: 'flex', alignItems: 'center', paddingBottom: '1em'}}
+                        >
+                            <h2 className='sectionTitle'>
+                                {globalize.translate('LabelBlockContentWithTags')}
+                            </h2>
+                            <SectionTitleButtonElement
+                                className='fab btnAddBlockedTag submit'
+                                title='Add'
+                                icon='add'
+                            />
+                        </div>
+                        <div className='blockedTags' style={{marginTop: '.5em'}}>
+                            {blockedTags.map((tag, index) => {
+                                return <BlockedTagList
+                                    key={index}
+                                    tag={tag}
+                                />;
+                            })}
+                        </div>
+                    </div>
+                    <div className='accessScheduleSection verticalSection' style={{marginBottom: '2em'}}>
+                        <div
+                            className='sectionTitleContainer'
+                            style={{display: 'flex', alignItems: 'center', paddingBottom: '1em'}}
+                        >
+                            <h2 className='sectionTitle'>
+                                {globalize.translate('HeaderAccessSchedule')}
+                            </h2>
+                            <SectionTitleButtonElement
+                                className='fab btnAddSchedule submit'
+                                title='Add'
+                                icon='add'
+                            />
+                        </div>
+                        <p>{globalize.translate('HeaderAccessScheduleHelp')}</p>
+                        <div className='accessScheduleList paperList'>
+                            {accessSchedules.map((accessSchedule, index) => {
+                                return <AccessScheduleList
+                                    key={index}
+                                    index={index}
+                                    DayOfWeek={accessSchedule.DayOfWeek}
+                                    StartHour={accessSchedule.StartHour}
+                                    EndHour={accessSchedule.EndHour}
+                                />;
+                            })}
+                        </div>
+                    </div>
+                    <div>
+                        <ButtonElement
+                            type='submit'
+                            className='raised button-submit block'
+                            title='Save'
+                        />
+                    </div>
+                </form>
+            </div>
+        </div>
+    );
+};
+
+export default UserParentalControl;

src/controllers/dashboard/users/userparentalcontrol.html

@@ -1,60 +1,3 @@
 <div id="userParentalControlPage" 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);">${TabAccess}</a>
-                <a is="emby-linkbutton" href="#" data-role="button" onclick="Dashboard.navigate('userparentalcontrol.html', true);" class="ui-btn-active">${TabParentalControl}</a>
-                <a is="emby-linkbutton" href="#" data-role="button" onclick="Dashboard.navigate('userpassword.html', true);">${HeaderPassword}</a>
-            </div>
-
-            <form class="userParentalControlForm">
-                <div class="selectContainer">
-                    <select is="emby-select" id="selectMaxParentalRating" label="${LabelMaxParentalRating}"></select>
-                    <div class="fieldDescription">${MaxParentalRatingHelp}</div>
-                </div>
-
-                <div>
-                    <div class="blockUnratedItems"></div>
-                </div>
-
-                <br />
-
-                <div class="verticalSection" style="margin-bottom:2em;">
-                    <div class="detailSectionHeader sectionTitleContainer">
-                        <h2 class="sectionTitle">${LabelBlockContentWithTags}</h2>
-                        <button is="emby-button" type="button" class="fab btnAddBlockedTag submit" style="margin-left:1em;" title="${Add}">
-                            <span class="material-icons add"></span>
-                        </button>
-                    </div>
-                    <div class="blockedTags" style="margin-top:.5em;"></div>
-                </div>
-
-                <div class="accessScheduleSection verticalSection" style="margin-bottom:2em;">
-                    <div class="sectionTitleContainer">
-                        <h2 class="sectionTitle">${HeaderAccessSchedule}</h2>
-                        <button is="emby-button" type="button" class="fab btnAddSchedule submit" style="margin-left:1em;" title="${Add}">
-                            <span class="material-icons add"></span>
-                        </button>
-                    </div>
-
-                    <p>${HeaderAccessScheduleHelp}</p>
-                    <div class="accessScheduleList paperList"></div>
-                </div>
-
-                <div>
-                    <button is="emby-button" type="submit" class="raised button-submit block">
-                        <span>${Save}</span>
-                    </button>
-                </div>
-            </form>
-        </div>
-    </div>
 </div>

src/controllers/dashboard/users/userparentalcontrol.js

@@ -1,274 +0,0 @@
-import 'jquery';
-import datetime from '../../../scripts/datetime';
-import loading from '../../../components/loading/loading';
-import libraryMenu from '../../../scripts/libraryMenu';
-import globalize from '../../../scripts/globalize';
-import '../../../components/listview/listview.scss';
-import '../../../elements/emby-button/paper-icon-button-light';
-import toast from '../../../components/toast/toast';
-
-/* eslint-disable indent */
-
-    function populateRatings(allParentalRatings, page) {
-        let html = '';
-        html += "<option value=''></option>";
-        let rating;
-        const ratings = [];
-
-        for (let i = 0, length = allParentalRatings.length; i < length; i++) {
-            if (rating = allParentalRatings[i], ratings.length) {
-                const lastRating = ratings[ratings.length - 1];
-
-                if (lastRating.Value === rating.Value) {
-                    lastRating.Name += '/' + rating.Name;
-                    continue;
-                }
-            }
-
-            ratings.push({
-                Name: rating.Name,
-                Value: rating.Value
-            });
-        }
-
-        for (let i = 0, length = ratings.length; i < length; i++) {
-            rating = ratings[i];
-            html += "<option value='" + rating.Value + "'>" + rating.Name + '</option>';
-        }
-
-        $('#selectMaxParentalRating', page).html(html);
-    }
-
-    function loadUnratedItems(page, user) {
-        const items = [{
-            name: globalize.translate('Books'),
-            value: 'Book'
-        }, {
-            name: globalize.translate('Channels'),
-            value: 'ChannelContent'
-        }, {
-            name: globalize.translate('LiveTV'),
-            value: 'LiveTvChannel'
-        }, {
-            name: globalize.translate('Movies'),
-            value: 'Movie'
-        }, {
-            name: globalize.translate('Music'),
-            value: 'Music'
-        }, {
-            name: globalize.translate('Trailers'),
-            value: 'Trailer'
-        }, {
-            name: globalize.translate('Shows'),
-            value: 'Series'
-        }];
-        let html = '';
-        html += '<h3 class="checkboxListLabel">' + globalize.translate('HeaderBlockItemsWithNoRating') + '</h3>';
-        html += '<div class="checkboxList paperList checkboxList-paperList">';
-
-        for (let i = 0, length = items.length; i < length; i++) {
-            const item = items[i];
-            const checkedAttribute = user.Policy.BlockUnratedItems.indexOf(item.value) != -1 ? ' checked="checked"' : '';
-            html += '<label><input type="checkbox" is="emby-checkbox" class="chkUnratedItem" data-itemtype="' + item.value + '" type="checkbox"' + checkedAttribute + '><span>' + item.name + '</span></label>';
-        }
-
-        html += '</div>';
-        $('.blockUnratedItems', page).html(html).trigger('create');
-    }
-
-    function loadUser(page, user, allParentalRatings) {
-        page.querySelector('.username').innerHTML = user.Name;
-        libraryMenu.setTitle(user.Name);
-        loadUnratedItems(page, user);
-        loadBlockedTags(page, user.Policy.BlockedTags);
-        populateRatings(allParentalRatings, page);
-        let ratingValue = '';
-
-        if (user.Policy.MaxParentalRating) {
-            for (let i = 0, length = allParentalRatings.length; i < length; i++) {
-                const rating = allParentalRatings[i];
-
-                if (user.Policy.MaxParentalRating >= rating.Value) {
-                    ratingValue = rating.Value;
-                }
-            }
-        }
-
-        $('#selectMaxParentalRating', page).val(ratingValue);
-
-        if (user.Policy.IsAdministrator) {
-            $('.accessScheduleSection', page).hide();
-        } else {
-            $('.accessScheduleSection', page).show();
-        }
-
-        renderAccessSchedule(page, user.Policy.AccessSchedules || []);
-        loading.hide();
-    }
-
-    function loadBlockedTags(page, tags) {
-        let html = tags.map(function (h) {
-            let li = '<div class="listItem">';
-            li += '<div class="listItemBody">';
-            li += '<h3 class="listItemBodyText">';
-            li += h;
-            li += '</h3>';
-            li += '</div>';
-            li += '<button type="button" is="paper-icon-button-light" class="blockedTag btnDeleteTag listItemButton" data-tag="' + h + '"><span class="material-icons delete"></span></button>';
-            return li += '</div>';
-        }).join('');
-
-        if (html) {
-            html = '<div class="paperList">' + html + '</div>';
-        }
-
-        const elem = $('.blockedTags', page).html(html).trigger('create');
-        $('.btnDeleteTag', elem).on('click', function () {
-            const tag = this.getAttribute('data-tag');
-            const newTags = tags.filter(function (t) {
-                return t != tag;
-            });
-            loadBlockedTags(page, newTags);
-        });
-    }
-
-    function deleteAccessSchedule(page, schedules, index) {
-        schedules.splice(index, 1);
-        renderAccessSchedule(page, schedules);
-    }
-
-    function renderAccessSchedule(page, schedules) {
-        let html = '';
-        let index = 0;
-        html += schedules.map(function (a) {
-            let itemHtml = '';
-            itemHtml += '<div class="liSchedule listItem" data-day="' + a.DayOfWeek + '" data-start="' + a.StartHour + '" data-end="' + a.EndHour + '">';
-            itemHtml += '<div class="listItemBody two-line">';
-            itemHtml += '<h3 class="listItemBodyText">';
-            itemHtml += globalize.translate('Option' + a.DayOfWeek);
-            itemHtml += '</h3>';
-            itemHtml += '<div class="listItemBodyText secondary">' + getDisplayTime(a.StartHour) + ' - ' + getDisplayTime(a.EndHour) + '</div>';
-            itemHtml += '</div>';
-            itemHtml += '<button type="button" is="paper-icon-button-light" class="btnDelete listItemButton" data-index="' + index + '"><span class="material-icons delete"></span></button>';
-            itemHtml += '</div>';
-            index++;
-            return itemHtml;
-        }).join('');
-        const accessScheduleList = page.querySelector('.accessScheduleList');
-        accessScheduleList.innerHTML = html;
-        $('.btnDelete', accessScheduleList).on('click', function () {
-            deleteAccessSchedule(page, schedules, parseInt(this.getAttribute('data-index')));
-        });
-    }
-
-    function onSaveComplete() {
-        loading.hide();
-        toast(globalize.translate('SettingsSaved'));
-    }
-
-    function saveUser(user, page) {
-        user.Policy.MaxParentalRating = $('#selectMaxParentalRating', page).val() || null;
-        user.Policy.BlockUnratedItems = $('.chkUnratedItem', page).get().filter(function (i) {
-            return i.checked;
-        }).map(function (i) {
-            return i.getAttribute('data-itemtype');
-        });
-        user.Policy.AccessSchedules = getSchedulesFromPage(page);
-        user.Policy.BlockedTags = getBlockedTagsFromPage(page);
-        ApiClient.updateUserPolicy(user.Id, user.Policy).then(function () {
-            onSaveComplete();
-        });
-    }
-
-    function getDisplayTime(hours) {
-        let minutes = 0;
-        const pct = hours % 1;
-
-        if (pct) {
-            minutes = parseInt(60 * pct);
-        }
-
-        return datetime.getDisplayTime(new Date(2000, 1, 1, hours, minutes, 0, 0));
-    }
-
-    function showSchedulePopup(page, schedule, index) {
-        schedule = schedule || {};
-        import('../../../components/accessSchedule/accessSchedule').then(({default: accessschedule}) => {
-            accessschedule.show({
-                schedule: schedule
-            }).then(function (updatedSchedule) {
-                const schedules = getSchedulesFromPage(page);
-
-                if (index == -1) {
-                    index = schedules.length;
-                }
-
-                schedules[index] = updatedSchedule;
-                renderAccessSchedule(page, schedules);
-            });
-        });
-    }
-
-    function getSchedulesFromPage(page) {
-        return $('.liSchedule', page).map(function () {
-            return {
-                DayOfWeek: this.getAttribute('data-day'),
-                StartHour: this.getAttribute('data-start'),
-                EndHour: this.getAttribute('data-end')
-            };
-        }).get();
-    }
-
-    function getBlockedTagsFromPage(page) {
-        return $('.blockedTag', page).map(function () {
-            return this.getAttribute('data-tag');
-        }).get();
-    }
-
-    function showBlockedTagPopup(page) {
-        import('../../../components/prompt/prompt').then(({default: prompt}) => {
-            prompt({
-                label: globalize.translate('LabelTag')
-            }).then(function (value) {
-                const tags = getBlockedTagsFromPage(page);
-
-                if (tags.indexOf(value) == -1) {
-                    tags.push(value);
-                    loadBlockedTags(page, tags);
-                }
-            });
-        });
-    }
-
-    window.UserParentalControlPage = {
-        onSubmit: function () {
-            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', '#userParentalControlPage', function () {
-        const page = this;
-        $('.btnAddSchedule', page).on('click', function () {
-            showSchedulePopup(page, {}, -1);
-        });
-        $('.btnAddBlockedTag', page).on('click', function () {
-            showBlockedTagPopup(page);
-        });
-        $('.userParentalControlForm').off('submit', UserParentalControlPage.onSubmit).on('submit', UserParentalControlPage.onSubmit);
-    }).on('pageshow', '#userParentalControlPage', function () {
-        const page = this;
-        loading.show();
-        const userId = getParameterByName('userId');
-        const promise1 = ApiClient.getUser(userId);
-        const promise2 = ApiClient.getParentalRatings();
-        Promise.all([promise1, promise2]).then(function (responses) {
-            loadUser(page, responses[0], responses[1]);
-        });
-    });
-
-/* eslint-enable indent */

src/scripts/routes.js

@@ -464,7 +464,7 @@ import { appRouter } from '../components/appRouter';
         path: 'dashboard/users/userparentalcontrol.html',
         autoFocus: false,
         roles: 'admin',
-        controller: 'dashboard/users/userparentalcontrol'
+        pageComponent: 'UserParentalControl'
     });
 
     defineRoute({