settings.html

---
---

<form name="settings">
    <p class="alert alert-warning">Settings take no effect currently</p>
    <fieldset/>
</form>

<script type="text/javascript">
    /* global require */
    require(['react', 'react-dom', 'settings'], function (React, ReactDOM, Settings) {
        var fieldset = document.forms.settings.querySelector('fieldset');
        var $ = React.createElement;

        var settingsItem = React.createClass({
            "propTypes": {
                "setting": React.PropTypes.object.isRequired
            },
            "getInitialState": function() {
                return { "setting": this.props.setting };
            },
            "onChange": function (event) {
                var setting = this.state.setting;

                "function" === typeof ga && ga('send', 'event', 'setting', setting.getName(), event.target.checked ? "enabled" : "disabled");
                setting.setValue(!!event.target.checked);

                this.setState({"setting": setting});
            },
            render: function () {
                return (
                    $('div', {"className": "checkbox", "key": this.props.setting.getName()},
                        $('label', {},
                            $('input', {
                                "type": "checkbox",
                                "checked": !!this.props.setting.getValue(),
                                "onChange": this.onChange
                            }),
                            this.props.setting.getLabel()
                        )
                    )
                );
            }
        });

        var settingsList = React.createClass({
            "propTypes": {
                "settings": React.PropTypes.arrayOf(React.PropTypes.object).isRequired
            },
            render: function () {
                return $('fieldset', {}, this.props.settings.map(function (setting) {
                    return $(settingsItem, {
                        "setting": setting,
                        "key": setting.getName()
                    })
                }));
            }
        });

        ReactDOM.render(React.createElement(settingsList, {"settings": Settings.all()}), fieldset);
    });
</script>