From bb0c9c0c1d871f3f274017db753d3d8c980f8719 Mon Sep 17 00:00:00 2001
From: stephtzhang <stephtzhang@gmail.com>
Date: Sun, 22 Nov 2015 15:13:19 -0500
Subject: [PATCH] Make record form components

---
 frickfeed/static/js/src/.DS_Store     | Bin 0 -> 6148 bytes
 frickfeed/static/js/src/recordForm.js | 255 ++++++++++++++++++++++++++
 frickfeed/templates/base.html         |   5 +
 frickfeed/templates/index.html        |   2 +-
 4 files changed, 261 insertions(+), 1 deletion(-)
 create mode 100644 frickfeed/static/js/src/.DS_Store
 create mode 100644 frickfeed/static/js/src/recordForm.js

diff --git a/frickfeed/static/js/src/.DS_Store b/frickfeed/static/js/src/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..5008ddfcf53c02e82d7eee2e57c38e5672ef89f6
GIT binary patch
literal 6148
zcmeH~Jr2S!425mzP>H1@V-^m;4Wg<&0T*E43hX&L&p$$qDprKhvt+--jT7}7np#A3
zem<@ulZcFPQ@L2!n>{z**<q8>++&mCkOWA81W14cNZ<zv;LbK1Poaz?KmsK2CSc!(
z0ynLxE!0092;Krf2c+FF_Fe*7ECH>lEfg7;MkzE(HCqgga^y>{tEnwC%0;vJ&^%eQ
zLs35+`xjp>T0<F0fCPF1$Cyrb|F7^5{eNG?83~ZUUlGt@xh*qZDeu<Z%US-OSsOPv
j)R!Z4KLME7ReXlK;d!wEw5GODWMKRea10D2@KpjYNUI8I

literal 0
HcmV?d00001

diff --git a/frickfeed/static/js/src/recordForm.js b/frickfeed/static/js/src/recordForm.js
new file mode 100644
index 0000000..5702710
--- /dev/null
+++ b/frickfeed/static/js/src/recordForm.js
@@ -0,0 +1,255 @@
+// TODO: separate modules into different file
+
+///////// Record /////////
+var RecordForm = React.createClass({
+  getInitialState: function() {
+    // TODO: make resetState a constant
+    var resetState = {
+        collector_name_first: '',
+        collector_name_last: '',
+        location: '',
+        box: '',
+        date_recorded: '',
+        date: '',
+        season_at: '',
+        shipping_point: '',
+        specimens: []
+    }
+    return resetState;
+  },
+  handleFirstNameChange: function(e) {
+    this.setState({collector_name_first: e.target.value});
+  },
+  handleLastNameChange: function(e) {
+    this.setState({collector_name_last: e.target.value});
+  },
+  handleLocationChange: function(e) {
+    this.setState({location: e.target.value});
+  },
+  handleBoxChange: function(e) {
+    this.setState({box: e.target.value});
+  },
+  handleShippingPointChange: function(e) {
+    this.setState({shipping_point: e.target.value});
+  },
+  handleDateRecordedChange: function(e) {
+    this.setState({date_recorded: e.target.value});
+  },
+  handleDateChange: function(e) {
+    this.setState({date: e.target.value});
+  },
+  handleSeasonAtChange: function(e) {
+    this.setState({season_at: e.target.value});
+  },
+  handleSpecimenChange: function(specimenState) {
+    // specimens are uniquely identified by client_identifier
+    for(var i=0; i < this.state.specimens.length; i++) {
+        if ( this.state.specimens[i].client_identifier === specimenState.client_identifier ) {
+            this.state.specimens[i] = specimenState;
+            return;
+        }
+    }
+    this.state.specimens.push(specimenState);
+  },
+  handleSubmit: function(e) {
+    e.preventDefault();
+    // validate fields are filled
+    var collector_name_first = this.state.collector_name_first.trim();
+    var collector_name_last = this.state.collector_name_last.trim();
+    var location = this.state.location.trim();
+    var box = this.state.box.trim();
+    var date_recorded = this.state.date_recorded.trim();
+    var date = this.state.date.trim();
+    var season_at = this.state.season_at.trim();
+    var shipping_point = this.state.shipping_point.trim();
+
+    // TODO: validate by iterating through these and calling a validate function
+    if (!collector_name_first || !collector_name_last || !location || !box || !date_recorded || !date || !season_at || !shipping_point ) {
+      // TODO: handle validation appropriately
+      return;
+    }
+
+    // TODO: fire dispatcher event to delete specimens
+
+    // reset input fields on submit
+    var resetState = {
+        collector_name_first: '',
+        collector_name_last: '',
+        location: '',
+        box: '',
+        date_recorded: '',
+        date: '',
+        season_at: '',
+        shipping_point: '',
+        specimens: []
+    }
+    this.setState(resetState);
+    this.props.onRecordSubmit(this.state);
+  },
+  render: function() {
+    var specimenProps = {
+        onChange: this.handleSpecimenChange
+    }
+    return (
+      <form className="recordForm" onSubmit={this.handleSubmit}>
+        <h2>Record Details</h2>
+        <input
+          type="text"
+          placeholder="First name"
+          value={this.state.collector_name_first}
+          onChange={this.handleFirstNameChange}
+        />
+        <input
+          type="text"
+          placeholder="Last name"
+          value={this.state.collector_name_last}
+          onChange={this.handleLastNameChange}
+        />
+        <input
+          type="text"
+          placeholder="Location"
+          value={this.state.location}
+          onChange={this.handleLocationChange}
+        />
+        <input
+          type="number"
+          placeholder="Box no."
+          value={this.state.box}
+          onChange={this.handleBoxChange}
+        />
+        <input
+          type="text"
+          placeholder="Shipping point"
+          value={this.state.shipping_point}
+          onChange={this.handleShippingPointChange}
+        />
+        <input
+          type="date"
+          placeholder="Date recorded"
+          value={this.state.date_recorded}
+          onChange={this.handleDateRecordedChange}
+        />
+        <input
+          type="date"
+          placeholder="Date"
+          value={this.state.date}
+          onChange={this.handleDateChange}
+        />
+        <input
+          type="string"
+          placeholder="Season at"
+          value={this.state.season_at}
+          onChange={this.handleSeasonAtChange}
+        />
+        <SpecimenInputFields {...specimenProps} />
+        <input type="submit" value="Save" />
+      </form>
+    );
+  }
+});
+
+///////// SpecimenInputFields /////////
+// TODO: add ability to append multiple specimen input fields
+var SpecimenInputFields = React.createClass({
+  getInitialState: function() {
+    var resetState = {
+        client_identifier: (Math.random() * 1000000).toString(),
+        amnh_catalog_a: '',
+        amnh_catalog_b: '',
+        field_no: '',
+        description: '',
+        location: '',
+    };
+    return resetState;
+  },
+  handleAmnhCatalogAChange: function(e) {
+    debugger;
+    this.setState({amnh_catalog_a: e.target.value});
+    this.props.onChange(this.state);
+  },
+  handleAmnhCatalogBChange: function(e) {
+    this.setState({amnh_catalog_b: e.target.value});
+    this.props.onChange(this.state);
+  },
+  handleFieldNoChange: function(e) {
+    this.setState({field_no: e.target.value});
+    this.props.onChange(this.state);
+  },
+  handleDescriptionChange: function(e) {
+    this.setState({description: e.target.value});
+    this.props.onChange(this.state);
+  },
+  handleLocationChange: function(e) {
+    this.setState({location: e.target.value});
+    this.props.onChange(this.state);
+  },
+  render: function() {
+    return (
+    <section>
+        <h3>Specimen Details</h3>
+        <input
+          type="text"
+          placeholder="AMNH Catalog A"
+          value={this.state.amnh_catalog_a}
+          onChange={this.handleAmnhCatalogAChange}
+        />
+        <input
+          type="text"
+          placeholder="AMNH Catalog B"
+          value={this.state.amnh_catalog_b}
+          onChange={this.handleAmnhCatalogBChange}
+        />
+        <input
+          type="number"
+          placeholder="Field No."
+          value={this.state.field_no}
+          onChange={this.handleFieldNoChange}
+        />
+        <input
+          type="text"
+          placeholder="Description"
+          value={this.state.description}
+          onChange={this.handleDescriptionChange}
+        />
+        <input
+          type="text"
+          placeholder="Location"
+          value={this.state.location}
+          onChange={this.handleLocationChange}
+        />
+    </section>
+    );
+  }
+});
+
+///////// RecordBox /////////
+var RecordBox = React.createClass({
+  handleRecordSubmit: function(record) {
+    // TODO: optimistically append record here
+    $.ajax({
+      url: this.props.url,
+      dataType: 'json',
+      type: 'POST',
+      data: record,
+      success: function(data) {
+        // TODO: handle successful record post req appropriately
+      }.bind(this),
+      error: function(xhr, status, err) {
+        console.error(this.props.url, status, err.toString());
+      }.bind(this)
+    });
+  },
+  render: function() {
+    return (
+      <div className="recordBox">
+        <RecordForm onRecordSubmit={this.handleRecordSubmit} />
+      </div>
+    );
+  }
+});
+
+///////// render RecordBox /////////
+ReactDOM.render(
+  <RecordBox url="/v1/records/" />,
+  document.getElementById('content')
+);
\ No newline at end of file
diff --git a/frickfeed/templates/base.html b/frickfeed/templates/base.html
index 2771cc1..b1f11ee 100644
--- a/frickfeed/templates/base.html
+++ b/frickfeed/templates/base.html
@@ -41,5 +41,10 @@
 
     <!-- Scripts -->
     <script src="static/js/image_viewer.js"></script>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.js"></script>
+    <script src="https://fb.me/react-dom-0.14.3.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
+    <script src="static/js/build/recordForm.js"></script>
   </body>
 </html>
diff --git a/frickfeed/templates/index.html b/frickfeed/templates/index.html
index 732cfae..9bc0e61 100644
--- a/frickfeed/templates/index.html
+++ b/frickfeed/templates/index.html
@@ -1,5 +1,5 @@
 {% extends 'base.html' %}
 
 {% block content %}
-  <h1>Home</h1>
+  <section id="content"></section>
 {% endblock %}