From 0529a494ae6b541f917522a20de92e3d36615f65 Mon Sep 17 00:00:00 2001 From: =Corey Hulen Date: Mon, 21 Sep 2015 17:34:13 -0700 Subject: Adding image properties --- .../components/admin_console/admin_controller.jsx | 3 + .../components/admin_console/admin_sidebar.jsx | 9 + .../components/admin_console/image_settings.jsx | 417 +++++++++++++++++++++ 3 files changed, 429 insertions(+) create mode 100644 web/react/components/admin_console/image_settings.jsx (limited to 'web') diff --git a/web/react/components/admin_console/admin_controller.jsx b/web/react/components/admin_console/admin_controller.jsx index e82fe1b76..0dc0ec45b 100644 --- a/web/react/components/admin_console/admin_controller.jsx +++ b/web/react/components/admin_console/admin_controller.jsx @@ -9,6 +9,7 @@ var LoadingScreen = require('../loading_screen.jsx'); var EmailSettingsTab = require('./email_settings.jsx'); var LogSettingsTab = require('./log_settings.jsx'); var LogsTab = require('./logs.jsx'); +var ImageSettingsTab = require('./image_settings.jsx'); export default class AdminController extends React.Component { constructor(props) { @@ -53,6 +54,8 @@ export default class AdminController extends React.Component { tab = ; } else if (this.state.selected === 'logs') { tab = ; + } else if (this.state.selected === 'image_settings') { + tab = ; } } diff --git a/web/react/components/admin_console/admin_sidebar.jsx b/web/react/components/admin_console/admin_sidebar.jsx index a6e689490..5544f9c6d 100644 --- a/web/react/components/admin_console/admin_sidebar.jsx +++ b/web/react/components/admin_console/admin_sidebar.jsx @@ -65,6 +65,15 @@ export default class AdminSidebar extends React.Component { {'Logs'} +
  • + + {'Image Settings'} + +
    • diff --git a/web/react/components/admin_console/image_settings.jsx b/web/react/components/admin_console/image_settings.jsx new file mode 100644 index 000000000..9a7de266d --- /dev/null +++ b/web/react/components/admin_console/image_settings.jsx @@ -0,0 +1,417 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +var Client = require('../../utils/client.jsx'); +var AsyncClient = require('../../utils/async_client.jsx'); + +export default class ImageSettings extends React.Component { + constructor(props) { + super(props); + + this.handleChange = this.handleChange.bind(this); + this.handleSubmit = this.handleSubmit.bind(this); + + this.state = { + saveNeeded: false, + serverError: null, + DriverName: this.props.config.ImageSettings.DriverName + }; + } + + handleChange(action) { + var s = {saveNeeded: true, serverError: this.state.serverError}; + + if (action === 'DriverName') { + s.DriverName = React.findDOMNode(this.refs.DriverName).value; + } + + this.setState(s); + } + + handleSubmit(e) { + e.preventDefault(); + $('#save-button').button('loading'); + + var config = this.props.config; + config.ImageSettings.DriverName = React.findDOMNode(this.refs.DriverName).value; + config.ImageSettings.Directory = React.findDOMNode(this.refs.Directory).value; + config.ImageSettings.AmazonS3AccessKeyId = React.findDOMNode(this.refs.AmazonS3AccessKeyId).value; + config.ImageSettings.AmazonS3SecretAccessKey = React.findDOMNode(this.refs.AmazonS3SecretAccessKey).value; + config.ImageSettings.AmazonS3Bucket = React.findDOMNode(this.refs.AmazonS3Bucket).value; + config.ImageSettings.AmazonS3Region = React.findDOMNode(this.refs.AmazonS3Region).value; + + var thumbnailWidth = 120; + if (!isNaN(parseInt(React.findDOMNode(this.refs.ThumbnailWidth).value, 10))) { + thumbnailWidth = parseInt(React.findDOMNode(this.refs.ThumbnailWidth).value, 10); + } + config.ImageSettings.ThumbnailWidth = thumbnailWidth; + React.findDOMNode(this.refs.ThumbnailWidth).value = thumbnailWidth; + + var thumbnailHeight = 100; + if (!isNaN(parseInt(React.findDOMNode(this.refs.ThumbnailHeight).value, 10))) { + thumbnailHeight = parseInt(React.findDOMNode(this.refs.ThumbnailHeight).value, 10); + } + config.ImageSettings.ThumbnailHeight = thumbnailHeight; + React.findDOMNode(this.refs.ThumbnailHeight).value = thumbnailHeight; + + var previewWidth = 1024; + if (!isNaN(parseInt(React.findDOMNode(this.refs.PreviewWidth).value, 10))) { + previewWidth = parseInt(React.findDOMNode(this.refs.PreviewWidth).value, 10); + } + config.ImageSettings.PreviewWidth = previewWidth; + React.findDOMNode(this.refs.PreviewWidth).value = previewWidth; + + var previewHeight = 0; + if (!isNaN(parseInt(React.findDOMNode(this.refs.PreviewHeight).value, 10))) { + previewHeight = parseInt(React.findDOMNode(this.refs.PreviewHeight).value, 10); + } + config.ImageSettings.PreviewHeight = previewHeight; + React.findDOMNode(this.refs.PreviewHeight).value = previewHeight; + + var profileWidth = 128; + if (!isNaN(parseInt(React.findDOMNode(this.refs.ProfileWidth).value, 10))) { + profileWidth = parseInt(React.findDOMNode(this.refs.ProfileWidth).value, 10); + } + config.ImageSettings.ProfileWidth = profileWidth; + React.findDOMNode(this.refs.ProfileWidth).value = profileWidth; + + var profileHeight = 128; + if (!isNaN(parseInt(React.findDOMNode(this.refs.ProfileHeight).value, 10))) { + profileHeight = parseInt(React.findDOMNode(this.refs.ProfileHeight).value, 10); + } + config.ImageSettings.ProfileHeight = profileHeight; + React.findDOMNode(this.refs.ProfileHeight).value = profileHeight; + + Client.saveConfig( + config, + () => { + AsyncClient.getConfig(); + this.setState({ + serverError: null, + saveNeeded: false + }); + $('#save-button').button('reset'); + }, + (err) => { + this.setState({ + serverError: err.message, + saveNeeded: true + }); + $('#save-button').button('reset'); + } + ); + } + + render() { + var serverError = ''; + if (this.state.serverError) { + serverError =
    ; + } + + var saveClass = 'btn'; + if (this.state.saveNeeded) { + saveClass = 'btn btn-primary'; + } + + var enableFile = false; + var enableS3 = false; + + if (this.state.DriverName === 'local') { + enableFile = true; + } + + if (this.state.DriverName === 'amazons3') { + enableS3 = true; + } + + return ( +
    +

    {'Image Settings'}

    +
    + +
    + +
    + +
    +
    + +
    + +
    + +

    {'Directory to which image files are written. If blank, will be set to ./data/.'}

    +
    +
    + +
    + +
    + +

    {'Obtain this credential from your Amazon EC2 administrator.'}

    +
    +
    + +
    + +
    + +

    {'Obtain this credential from your Amazon EC2 administrator.'}

    +
    +
    + +
    + +
    + +

    {'Name you selected for your S3 bucket in AWS.'}

    +
    +
    + +
    + +
    + +

    {'AWS region you selected for creating your S3 bucket.'}

    +
    +
    + +
    + +
    + +

    {'Width of thumbnails generated from uploaded images. Updating this value changes how thumbnail images render in future, but does not change images created in the past.'}

    +
    +
    + +
    + +
    + +

    {'Height of thumbnails generated from uploaded images. Updating this value changes how thumbnail images render in future, but does not change images created in the past.'}

    +
    +
    + +
    + +
    + +

    {'Maximum width of preview image. Updating this value changes how preview images render in future, but does not change images created in the past.'}

    +
    +
    + +
    + +
    + +

    {'Maximum height of preview image ("0": Sets to auto-size). Updating this value changes how preview images render in future, but does not change images created in the past.'}

    +
    +
    + +
    + +
    + +

    {'Width of profile picture.'}

    +
    +
    + +
    + +
    + +

    {'Height of profile picture.'}

    +
    +
    + +
    +
    + {serverError} + +
    +
    + +
    +
    + ); + } +} + +ImageSettings.propTypes = { + config: React.PropTypes.object +}; -- cgit v1.2.3-1-g7c22