Qstick
7 years ago
parent
77f1d2e64c
commit
22d9c5e666
@ -0,0 +1,18 @@
|
|||||||
|
.link {
|
||||||
|
composes: link from 'Components/Link/Link.css';
|
||||||
|
|
||||||
|
border-bottom: 1px solid #e5e5e5;
|
||||||
|
color: #3a3f51;
|
||||||
|
font-size: 21px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #616573;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary {
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
color: $dimColor;
|
||||||
|
}
|
||||||
@ -0,0 +1,122 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import Link from 'Components/Link/Link';
|
||||||
|
import PageContent from 'Components/Page/PageContent';
|
||||||
|
import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
|
||||||
|
import SettingsToolbarConnector from './SettingsToolbarConnector';
|
||||||
|
import styles from './Settings.css';
|
||||||
|
|
||||||
|
function Settings() {
|
||||||
|
return (
|
||||||
|
<PageContent title="Settings">
|
||||||
|
<SettingsToolbarConnector
|
||||||
|
hasPendingChanges={false}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<PageContentBodyConnector>
|
||||||
|
<Link
|
||||||
|
className={styles.link}
|
||||||
|
to="/settings/mediamanagement"
|
||||||
|
>
|
||||||
|
Media Management
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<div className={styles.summary}>
|
||||||
|
Naming and file management settings
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Link
|
||||||
|
className={styles.link}
|
||||||
|
to="/settings/profiles"
|
||||||
|
>
|
||||||
|
Profiles
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<div className={styles.summary}>
|
||||||
|
Quality, Language and Delay profiles
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Link
|
||||||
|
className={styles.link}
|
||||||
|
to="/settings/quality"
|
||||||
|
>
|
||||||
|
Quality
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<div className={styles.summary}>
|
||||||
|
Quality sizes and naming
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Link
|
||||||
|
className={styles.link}
|
||||||
|
to="/settings/indexers"
|
||||||
|
>
|
||||||
|
Indexers
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<div className={styles.summary}>
|
||||||
|
Indexers and release restrictions
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Link
|
||||||
|
className={styles.link}
|
||||||
|
to="/settings/downloadclients"
|
||||||
|
>
|
||||||
|
Download Clients
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<div className={styles.summary}>
|
||||||
|
Download clients, download handling and remote path mappings
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Link
|
||||||
|
className={styles.link}
|
||||||
|
to="/settings/connect"
|
||||||
|
>
|
||||||
|
Connect
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<div className={styles.summary}>
|
||||||
|
Notifications, connections to media servers/players and custom scripts
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Link
|
||||||
|
className={styles.link}
|
||||||
|
to="/settings/metadata"
|
||||||
|
>
|
||||||
|
Metadata
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<div className={styles.summary}>
|
||||||
|
Create metadata files when episodes are imported or series are refreshed
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Link
|
||||||
|
className={styles.link}
|
||||||
|
to="/settings/general"
|
||||||
|
>
|
||||||
|
General
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<div className={styles.summary}>
|
||||||
|
Port, SSL, username/password, proxy, analytics and updates
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Link
|
||||||
|
className={styles.link}
|
||||||
|
to="/settings/ui"
|
||||||
|
>
|
||||||
|
UI
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<div className={styles.summary}>
|
||||||
|
Calendar, date and color impaired options
|
||||||
|
</div>
|
||||||
|
</PageContentBodyConnector>
|
||||||
|
</PageContent>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
Settings.propTypes = {
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Settings;
|
||||||
@ -0,0 +1,197 @@
|
|||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import React, { Component } from 'react';
|
||||||
|
import { inputTypes } from 'Helpers/Props';
|
||||||
|
import LoadingIndicator from 'Components/Loading/LoadingIndicator';
|
||||||
|
import FieldSet from 'Components/FieldSet';
|
||||||
|
import PageContent from 'Components/Page/PageContent';
|
||||||
|
import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
|
||||||
|
import SettingsToolbarConnector from 'Settings/SettingsToolbarConnector';
|
||||||
|
import Form from 'Components/Form/Form';
|
||||||
|
import FormGroup from 'Components/Form/FormGroup';
|
||||||
|
import FormLabel from 'Components/Form/FormLabel';
|
||||||
|
import FormInputGroup from 'Components/Form/FormInputGroup';
|
||||||
|
|
||||||
|
class UISettings extends Component {
|
||||||
|
|
||||||
|
//
|
||||||
|
// Render
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const {
|
||||||
|
isFetching,
|
||||||
|
error,
|
||||||
|
settings,
|
||||||
|
hasSettings,
|
||||||
|
onInputChange,
|
||||||
|
onSavePress,
|
||||||
|
...otherProps
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
|
const firstDayOfWeekOptions = [
|
||||||
|
{ key: 0, value: 'Sunday' },
|
||||||
|
{ key: 1, value: 'Monday' }
|
||||||
|
];
|
||||||
|
|
||||||
|
const weekColumnOptions = [
|
||||||
|
{ key: 'ddd M/D', value: 'Tue 3/5' },
|
||||||
|
{ key: 'ddd MM/DD', value: 'Tue 03/05' },
|
||||||
|
{ key: 'ddd D/M', value: 'Tue 5/3' },
|
||||||
|
{ key: 'ddd DD/MM', value: 'Tue 05/03' }
|
||||||
|
];
|
||||||
|
|
||||||
|
const shortDateFormatOptions = [
|
||||||
|
{ key: 'MMM D YYYY', value: 'Mar 5 2014' },
|
||||||
|
{ key: 'DD MMM YYYY', value: '5 Mar 2014' },
|
||||||
|
{ key: 'MM/D/YYYY', value: '03/5/2014' },
|
||||||
|
{ key: 'MM/DD/YYYY', value: '03/05/2014' },
|
||||||
|
{ key: 'DD/MM/YYYY', value: '05/03/2014' },
|
||||||
|
{ key: 'YYYY-MM-DD', value: '2014-03-05' }
|
||||||
|
];
|
||||||
|
|
||||||
|
const longDateFormatOptions = [
|
||||||
|
{ key: 'dddd, MMMM D YYYY', value: 'Tuesday, March 5, 2014' },
|
||||||
|
{ key: 'dddd, D MMMM YYYY', value: 'Tuesday, 5 March, 2014' }
|
||||||
|
];
|
||||||
|
|
||||||
|
const timeFormatOptions = [
|
||||||
|
{ key: 'h(:mm)a', value: '5pm/5:30pm' },
|
||||||
|
{ key: 'HH:mm', value: '17:00/17:30' }
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<PageContent title="UI Settings">
|
||||||
|
<SettingsToolbarConnector
|
||||||
|
{...otherProps}
|
||||||
|
onSavePress={onSavePress}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<PageContentBodyConnector>
|
||||||
|
{
|
||||||
|
isFetching &&
|
||||||
|
<LoadingIndicator />
|
||||||
|
}
|
||||||
|
|
||||||
|
{
|
||||||
|
!isFetching && error &&
|
||||||
|
<div>Unable to load UI settings</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
{
|
||||||
|
hasSettings && !isFetching && !error &&
|
||||||
|
<Form
|
||||||
|
id="uiSettings"
|
||||||
|
{...otherProps}
|
||||||
|
>
|
||||||
|
<FieldSet
|
||||||
|
legend="Calendar"
|
||||||
|
>
|
||||||
|
<FormGroup>
|
||||||
|
<FormLabel>First Day of Week</FormLabel>
|
||||||
|
|
||||||
|
<FormInputGroup
|
||||||
|
type={inputTypes.SELECT}
|
||||||
|
name="firstDayOfWeek"
|
||||||
|
values={firstDayOfWeekOptions}
|
||||||
|
onChange={onInputChange}
|
||||||
|
{...settings.firstDayOfWeek}
|
||||||
|
/>
|
||||||
|
</FormGroup>
|
||||||
|
|
||||||
|
<FormGroup>
|
||||||
|
<FormLabel>Week Column Header</FormLabel>
|
||||||
|
|
||||||
|
<FormInputGroup
|
||||||
|
type={inputTypes.SELECT}
|
||||||
|
name="calendarWeekColumnHeader"
|
||||||
|
values={weekColumnOptions}
|
||||||
|
onChange={onInputChange}
|
||||||
|
helpText="Shown above each column when week is the active view"
|
||||||
|
{...settings.calendarWeekColumnHeader}
|
||||||
|
/>
|
||||||
|
</FormGroup>
|
||||||
|
</FieldSet>
|
||||||
|
|
||||||
|
<FieldSet
|
||||||
|
legend="Dates"
|
||||||
|
>
|
||||||
|
<FormGroup>
|
||||||
|
<FormLabel>Short Date Format</FormLabel>
|
||||||
|
|
||||||
|
<FormInputGroup
|
||||||
|
type={inputTypes.SELECT}
|
||||||
|
name="shortDateFormat"
|
||||||
|
values={shortDateFormatOptions}
|
||||||
|
onChange={onInputChange}
|
||||||
|
{...settings.shortDateFormat}
|
||||||
|
/>
|
||||||
|
</FormGroup>
|
||||||
|
|
||||||
|
<FormGroup>
|
||||||
|
<FormLabel>Long Date Format</FormLabel>
|
||||||
|
|
||||||
|
<FormInputGroup
|
||||||
|
type={inputTypes.SELECT}
|
||||||
|
name="longDateFormat"
|
||||||
|
values={longDateFormatOptions}
|
||||||
|
onChange={onInputChange}
|
||||||
|
{...settings.longDateFormat}
|
||||||
|
/>
|
||||||
|
</FormGroup>
|
||||||
|
|
||||||
|
<FormGroup>
|
||||||
|
<FormLabel>Time Format</FormLabel>
|
||||||
|
|
||||||
|
<FormInputGroup
|
||||||
|
type={inputTypes.SELECT}
|
||||||
|
name="timeFormat"
|
||||||
|
values={timeFormatOptions}
|
||||||
|
onChange={onInputChange}
|
||||||
|
{...settings.timeFormat}
|
||||||
|
/>
|
||||||
|
</FormGroup>
|
||||||
|
|
||||||
|
<FormGroup>
|
||||||
|
<FormLabel>Show Relative Dates</FormLabel>
|
||||||
|
<FormInputGroup
|
||||||
|
type={inputTypes.CHECK}
|
||||||
|
name="showRelativeDates"
|
||||||
|
helpText="Show relative (Today/Yesterday/etc) or absolute dates"
|
||||||
|
onChange={onInputChange}
|
||||||
|
{...settings.showRelativeDates}
|
||||||
|
/>
|
||||||
|
</FormGroup>
|
||||||
|
</FieldSet>
|
||||||
|
|
||||||
|
<FieldSet
|
||||||
|
legend="Style"
|
||||||
|
>
|
||||||
|
<FormGroup>
|
||||||
|
<FormLabel>Enable Color-Impaired mode</FormLabel>
|
||||||
|
<FormInputGroup
|
||||||
|
type={inputTypes.CHECK}
|
||||||
|
name="enableColorImpairedMode"
|
||||||
|
helpText="Altered style to allow color-impaired users to better distinguish color coded information"
|
||||||
|
onChange={onInputChange}
|
||||||
|
{...settings.enableColorImpairedMode}
|
||||||
|
/>
|
||||||
|
</FormGroup>
|
||||||
|
</FieldSet>
|
||||||
|
</Form>
|
||||||
|
}
|
||||||
|
</PageContentBodyConnector>
|
||||||
|
</PageContent>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
UISettings.propTypes = {
|
||||||
|
isFetching: PropTypes.bool.isRequired,
|
||||||
|
error: PropTypes.object,
|
||||||
|
settings: PropTypes.object.isRequired,
|
||||||
|
hasSettings: PropTypes.bool.isRequired,
|
||||||
|
onSavePress: PropTypes.func.isRequired,
|
||||||
|
onInputChange: PropTypes.func.isRequired
|
||||||
|
};
|
||||||
|
|
||||||
|
export default UISettings;
|
||||||
@ -0,0 +1,82 @@
|
|||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import React, { Component } from 'react';
|
||||||
|
import { createSelector } from 'reselect';
|
||||||
|
import createSettingsSectionSelector from 'Store/Selectors/createSettingsSectionSelector';
|
||||||
|
import { setUISettingsValue, saveUISettings, fetchUISettings } from 'Store/Actions/settingsActions';
|
||||||
|
import { clearPendingChanges } from 'Store/Actions/baseActions';
|
||||||
|
import connectSection from 'Store/connectSection';
|
||||||
|
import UISettings from './UISettings';
|
||||||
|
|
||||||
|
function createMapStateToProps() {
|
||||||
|
return createSelector(
|
||||||
|
(state) => state.settings.advancedSettings,
|
||||||
|
createSettingsSectionSelector(),
|
||||||
|
(advancedSettings, sectionSettings) => {
|
||||||
|
return {
|
||||||
|
advancedSettings,
|
||||||
|
...sectionSettings
|
||||||
|
};
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const mapDispatchToProps = {
|
||||||
|
setUISettingsValue,
|
||||||
|
saveUISettings,
|
||||||
|
fetchUISettings,
|
||||||
|
clearPendingChanges
|
||||||
|
};
|
||||||
|
|
||||||
|
class UISettingsConnector extends Component {
|
||||||
|
|
||||||
|
//
|
||||||
|
// Lifecycle
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
this.props.fetchUISettings();
|
||||||
|
}
|
||||||
|
|
||||||
|
componentWillUnmount() {
|
||||||
|
this.props.clearPendingChanges({ section: this.props.section });
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Listeners
|
||||||
|
|
||||||
|
onInputChange = ({ name, value }) => {
|
||||||
|
this.props.setUISettingsValue({ name, value });
|
||||||
|
}
|
||||||
|
|
||||||
|
onSavePress = () => {
|
||||||
|
this.props.saveUISettings();
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Render
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<UISettings
|
||||||
|
onInputChange={this.onInputChange}
|
||||||
|
onSavePress={this.onSavePress}
|
||||||
|
{...this.props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
UISettingsConnector.propTypes = {
|
||||||
|
section: PropTypes.string.isRequired,
|
||||||
|
setUISettingsValue: PropTypes.func.isRequired,
|
||||||
|
saveUISettings: PropTypes.func.isRequired,
|
||||||
|
fetchUISettings: PropTypes.func.isRequired,
|
||||||
|
clearPendingChanges: PropTypes.func.isRequired
|
||||||
|
};
|
||||||
|
|
||||||
|
export default connectSection(
|
||||||
|
createMapStateToProps,
|
||||||
|
mapDispatchToProps,
|
||||||
|
undefined,
|
||||||
|
undefined,
|
||||||
|
{ section: 'ui' }
|
||||||
|
)(UISettingsConnector);
|
||||||
@ -0,0 +1,33 @@
|
|||||||
|
import $ from 'jquery';
|
||||||
|
|
||||||
|
export default function createAjaxRequest() {
|
||||||
|
return function(ajaxOptions) {
|
||||||
|
const requestXHR = new window.XMLHttpRequest();
|
||||||
|
let aborted = false;
|
||||||
|
let complete = false;
|
||||||
|
|
||||||
|
function abortRequest() {
|
||||||
|
if (!complete) {
|
||||||
|
aborted = true;
|
||||||
|
requestXHR.abort();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const request = $.ajax({
|
||||||
|
xhr: () => requestXHR,
|
||||||
|
...ajaxOptions
|
||||||
|
}).then(null, (xhr, textStatus, errorThrown) => {
|
||||||
|
xhr.aborted = aborted;
|
||||||
|
|
||||||
|
return $.Deferred().reject(xhr, textStatus, errorThrown).promise();
|
||||||
|
})
|
||||||
|
.always(() => {
|
||||||
|
complete = true;
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
request,
|
||||||
|
abortRequest
|
||||||
|
};
|
||||||
|
};
|
||||||
|
}
|
||||||
Loading…
Reference in new issue