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