1 files changed, 62 insertions, 0 deletions
diff --git a/pyenc/static/js-source/script.js b/pyenc/static/js-source/script.js
new file mode 100644
index 0000000..1f5c6d6
--- /dev/null
+++ b/pyenc/static/js-source/script.js
@@ -0,0 +1,62 @@
+let React    = require('react')
+let ReactDOM = require('react-dom')
+
+// npx babel --watch src --out-dir . --presets react-app/prod
+
+class ClassListForm extends React.Component {
+
+	constructor(props) {
+		super(props);
+		this.state = {
+			selected: [],
+			classList: [],
+		}
+	}
+
+	onChange = (e) => {
+		fetch('/list-classes?q=' + e.target.value)
+		.then(resp => resp.json())
+		.then((data) => {
+			this.setState({classList: data})
+		})
+	}
+
+	render() {
+		return (<form>
+			<input type="text"
+			placeholder="class name"
+			onInput={this.onChange}/>
+			<PuppetClassList onChange={this.onClassChange} nodes={this.state.selected}/>
+			<hr/>
+			<PuppetClassList onChange={this.onClassChange} nodes={this.state.classList}/>
+			<input type="submit" value="Add Selected"/>
+			</form>)
+	}
+
+	onClassChange = (e) => {
+		if (e.target.checked) {
+			this.setState((state, props) => ({
+				selected: state.selected.concat(e.target.value)
+			}))
+		} else {
+		}
+	}
+}
+
+class PuppetClassList extends React.Component {
+
+	render() {
+		return (<ul>
+			{this.props.nodes.map(node => <li key={node}>
+				<input checked value={node} onChange={this.props.onChange} type="checkbox"/>
+				<label>{node}</label>
+				</li>)}
+			</ul>)
+	}
+}
+
+window.onload = function() {
+	for (let el of document.getElementsByClassName('class-search')) {
+		ReactDOM.render((<ClassListForm/>), el)
+	}
+}