|
|
@@ -0,0 +1,80 @@
|
|
|
+import React from 'react';
|
|
|
+import { Link } from 'react-router-dom';
|
|
|
+
|
|
|
+function camelize(str) {
|
|
|
+ return str.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); });
|
|
|
+}
|
|
|
+
|
|
|
+class Settings extends React.Component {
|
|
|
+ constructor(props) {
|
|
|
+ super(props);
|
|
|
+ this.state = {
|
|
|
+ iframeSrc: ''
|
|
|
+ };
|
|
|
+ this.onChange = this.onChange.bind(this);
|
|
|
+ this.onSubmit = this.onSubmit.bind(this);
|
|
|
+ }
|
|
|
+
|
|
|
+ componentDidMount() {
|
|
|
+ this.restoreFromLS();
|
|
|
+ }
|
|
|
+
|
|
|
+ restoreFromLS() {
|
|
|
+ const savedSettings = localStorage.getItem('rpywSettings');
|
|
|
+ if(savedSettings) {
|
|
|
+ try {
|
|
|
+ const settings = JSON.parse(savedSettings);
|
|
|
+ console.log('restore settings', settings);
|
|
|
+ this.setState(settings);
|
|
|
+ }
|
|
|
+ catch(e) {
|
|
|
+ console.error('Error while trying to restore settings from localStorage', e);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ saveToLS() {
|
|
|
+ const settingsJson = JSON.stringify(this.state);
|
|
|
+ console.log('saving', settingsJson);
|
|
|
+ localStorage.setItem('rpywSettings', settingsJson);
|
|
|
+ }
|
|
|
+
|
|
|
+ onChange(e) {
|
|
|
+ const { state } = this;
|
|
|
+ const { name, value } = e.target;
|
|
|
+ const camelName = camelize(name);
|
|
|
+ console.log(name, camelName, value);
|
|
|
+ this.setState(
|
|
|
+ Object.assign({ ...state }, { [camelName]: value })
|
|
|
+ );
|
|
|
+ // console.log(camelize(e.target.name));
|
|
|
+ }
|
|
|
+
|
|
|
+ onSubmit(e) {
|
|
|
+ e.preventDefault();
|
|
|
+ const { iframeSrc } = this.state;
|
|
|
+ console.log('iframe src', iframeSrc);
|
|
|
+ $('#iframe').attr('src', iframeSrc);
|
|
|
+ this.saveToLS();
|
|
|
+ }
|
|
|
+
|
|
|
+ render() {
|
|
|
+ const { iframeSrc } = this.state;
|
|
|
+ console.log(this.state, iframeSrc);
|
|
|
+ return (
|
|
|
+ <div className="row">
|
|
|
+ <form className="col s12" onSubmit={this.onSubmit}>
|
|
|
+
|
|
|
+ <div className="input-field">
|
|
|
+ <input name="iframe-src" type="text" className="validate" value={iframeSrc} onChange={this.onChange} />
|
|
|
+ <label htmlFor="iframe-src">Iframe source URL</label>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <a type="submit" className="waves-effect waves-light btn">Save</a>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+export default Settings;
|