Merge pull request #3072 from grafixeyehero/convert-userParentalControlPage-to-react

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?: string;
+}
+
+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/CheckBoxListItem.tsx

@@ -4,30 +4,31 @@ type IProps = {
     className?: string;
     Name?: string;
     Id?: string;
+    ItemType?: string;
     AppName?: string;
     checkedAttribute?: string;
 }
 
-const createCheckBoxElement = ({className, Name, Id, AppName, checkedAttribute}) => ({
+const createCheckBoxElement = ({className, Name, dataAttributes, AppName, checkedAttribute}) => ({
     __html: `<label>
         <input
             type="checkbox"
             is="emby-checkbox"
             class="${className}"
-            data-id="${Id}" ${checkedAttribute}
+            ${dataAttributes} ${checkedAttribute}
         />
         <span>${Name} ${AppName}</span>
     </label>`
 });
 
-const CheckBoxListItem: FunctionComponent<IProps> = ({className, Name, Id, AppName, checkedAttribute}: IProps) => {
+const CheckBoxListItem: FunctionComponent<IProps> = ({className, Name, Id, ItemType, AppName, checkedAttribute}: IProps) => {
     return (
         <div
             className='sectioncheckbox'
             dangerouslySetInnerHTML={createCheckBoxElement({
                 className: className,
                 Name: Name,
-                Id: Id,
+                dataAttributes: ItemType ? `data-itemtype='${ItemType}'` : `data-id='${Id}'`,
                 AppName: AppName ? `- ${AppName}` : '',
                 checkedAttribute: checkedAttribute
             })}

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,46 @@
+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 RatingsArr = {
+    Name: string;
+    Value: number;
+}
+
+type IProps = {
+    className?: string;
+    label?: string;
+    parentalRatings: RatingsArr[];
+}
+
+const SelectMaxParentalRating: FunctionComponent<IProps> = ({ className, label, parentalRatings }: IProps) => {
+    const renderOption = () => {
+        let content = '';
+        for (const rating of parentalRatings) {
+            content += `<option value='${rating.Value}'>${rating.Name}</option>`;
+        }
+        return content;
+    };
+
+    return (
+        <div
+            dangerouslySetInnerHTML={createSelectElement({
+                className: className,
+                label: globalize.translate(label),
+                option: renderOption()
+            })}
+        />
+    );
+};
+
+export default SelectMaxParentalRating;