Andrew 08 fd2

farmdata2/farmdata2_modules/fd2_school/Vue1/vue1.html

@@ -0,0 +1,86 @@
+<h1>Harvest Report</h1>
+<p>This page is a <i>mockup</i> of a simplified harvest report.</p>
+<div id="report-title" v-cloak>
+    <p>Title: <input type="text" size="21" v-model="header" /></p>
+    <br />
+    <label>
+        Start:
+        <input type="date" v-model="startDate" name="start_date" min="2014-01-01" max="2022-01-1" />
+    </label>
+    <label>
+        End:
+        <input type="date" v-model="endDate" name="end_date" min="2020-05-05" max="2022-01-1" />
+    </label>
+    <br />
+    <br />
+    <label>
+        Crop:
+        <select id="crop" name="crop">
+            <option v-for="crop in crops">{{ crop }}</option>
+        </select>
+    </label>
+    <label>
+        Area:
+        <select id="area" name="area">
+            <option v-for="area in areas">{{ area }}</option>
+        </select>
+    </label>
+    <br />
+    <br />
+    <button type="button">Generate Report</button>
+    <hr />
+    <h1>{{ header == "" ? "Mock Harvest Report" : header }}</h1>
+    <p>Details:</p>
+    <ul>
+        <li><strong>Farm:</strong>Sample Farm</li>
+        <li><strong>User:</strong>manager1</li>
+        <li><strong>Language:</strong>English</li>
+    </ul>
+    <br />
+    <ul>
+        <li><strong>Start:</strong>05/01/2018</li>
+        <li><strong>End:</strong>05/15/2018</li>
+        <li><strong>Crop:</strong>Kale</li>
+    </ul>
+    <table border="1">
+        <tr>
+            <th>Date</th>
+            <th>Area</th>
+            <th>Crop</th>
+            <th>Yield</th>
+            <th>Units</th>
+        </tr>
+        <tr v-for="log in logs">
+            <td>{{ log.date }}</td>
+            <td>{{ log.area }}</td>
+            <td>{{ log.crop }}</td>
+            <td>{{ log.yield }}</td>
+            <td>{{ log.units }}</td>
+        </tr>
+    </table>
+</div>
+<script>
+    var reportTitle = new Vue({
+        el: "#report-title",
+        data: {
+            header: "My Sample Harvest Report",
+            startDate: "2020-05-05",
+            endDate: "2020-05-15",
+            crops: [
+                "Broccoli",
+                "Kale",
+                "Peas",
+            ],
+            areas: [
+                "All",
+                "Chuau-1",
+                "SQ7",
+            ],
+            logs: [
+
+                { date: "2018-05-02", area: "Chuau-1", crop: "Kale", yield: 10, units: "Bunches" },
+                { date: "2018-05-05", area: "SQ7", crop: "Kale", yield: 7, units: "Bunches" }],
+        }
+    })
+    Vue.config.devtools = true;
+</script>

farmdata2/farmdata2_modules/fd2_school/Vue2/vue2.html

@@ -0,0 +1,98 @@
+<h1>Harvest Report</h1>
+<p>This page is a <i>mockup</i> of a simplified harvest report.</p>
+<div id="report-title" v-cloak>
+    <p>Title: <input type="text" size="21" v-model="header" /></p>
+    <br />
+    <label>
+        Start:
+        <input type="date" id="start_date" v-model="startDate" name="start_date" v-bind:max="endDate" value="2020-05-05"  />
+    </label>
+    <label>
+        End:
+        <input type="date" id='end_date' v-model="endDate" name="end_date" v-bind:min="startDate" value="2020-05-15" />
+    </label>
+    <br />
+    <br />
+    <label>
+        Crop:
+        <select id="crop" name="crop">
+            <option v-for="crop in crops">{{ crop }}</option>
+        </select>
+    </label>
+    <label>
+        Area:
+        <select id="area" name="area">
+            <option v-for="area in areas">{{ area }}</option>
+        </select>
+    </label>
+    <br />
+    <br />
+    <button type="button" @click="addReport">Generate Report</button>
+    <hr />
+    <h1>{{ header == "" ? "Mock Harvest Report" : header }}</h1>
+    <p>Details:</p>
+    <ul>
+        <li><strong>Farm:</strong>Sample Farm</li>
+        <li><strong>User:</strong>manager1</li>
+        <li><strong>Language:</strong>English</li>
+    </ul>
+    <br />
+    <ul>
+        <li><strong>Start:</strong>05/01/2018</li>
+        <li><strong>End:</strong>05/15/2018</li>
+        <li><strong>Crop:</strong>Kale</li>
+    </ul>
+    <div v-if="logs.length > 0">
+    <table border="1">
+        <tr>
+            <th>Date</th>
+            <th>Area</th>
+            <th>Crop</th>
+            <th>Yield</th>
+            <th>Units</th>
+            <th>Row</th>
+        </tr>
+        <tr v-for="(log, index) in logs">
+            <td>{{ index  }}</td>
+            <td>{{ log.date }}</td>
+            <td>{{ log.area }}</td>
+            <td>{{ log.crop }}</td>
+            <td>{{ log.yield }}</td>
+            <td>{{ log.units }}</td>
+        </tr>
+    </table>
+</div>
+<p v-else>There are no matching records found.</p>
+</div>
+<script>
+    var reportTitle = new Vue({
+        el: "#report-title",
+        data: {
+            header: "My Sample Harvest Report",
+            startDate: "2020-05-05",
+            endDate: "2020-05-15",
+            crops: [
+                "Broccoli",
+                "Kale",
+                "Peas",
+            ],
+            areas: [
+                "All",
+                "Chuau-1",
+                "SQ7",
+            ],
+            logs: [
+
+                {}
+            ],
+        } ,
+
+        methods: {
+            addReport: function() {
+                this.logs.push({date: "2018-05-01", area: "Orion-3", crop: "Kale", yield: "12", units: "Bunches"});
+            }
+        }
+
+    })
+    Vue.config.devtools = true;
+</script>

farmdata2/farmdata2_modules/fd2_school/api/api.html

@@ -0,0 +1,132 @@
+<h1>Harvest Report</h1>
+<p>This page is a <i>mockup</i> of a simplified harvest report.</p>
+<div id="report-title" v-cloak>
+    <p>Title: <input type="text" size="21" v-model="header" /></p>
+    <br />
+    <label>
+        Start:
+        <input type="date" id="start_date" v-model="startDate" name="start_date" v-bind:max="endDate"
+            value="2020-05-05" />
+    </label>
+    <label>
+        End:
+        <input type="date" id='end_date' v-model="endDate" name="end_date" v-bind:min="startDate" value="2020-05-15" />
+    </label>
+    <br />
+    <br />
+    <label>
+        Crop:
+        <select id="crop" name="crop">
+            <option v-for="crop in cropNames">{{ crop }}</option>
+        </select>
+    </label>
+    <label>
+        Area:
+        <select id="area" name="area">
+            <option v-for="area in areas">{{ area }}</option>
+        </select>
+    </label>
+    <br />
+    <br />
+    <button type="button" @click="addReport">Generate Report</button>
+    <hr />
+    <h1>{{ header == "" ? "Mock Harvest Report" : header }}</h1>
+    <p>Details:</p>
+    <ul>
+        <li><strong>Farm:</strong>{{ farm }}</li>
+        <li><strong>User:</strong>{{ user }}</li>
+        <li><strong>Language:</strong>{{ language }}</li>
+    </ul>
+    <br />
+    <ul>
+        <li><strong>Start:</strong>05/01/2018</li>
+        <li><strong>End:</strong>05/15/2018</li>
+        <li><strong>Crop:</strong>Kale</li>
+    </ul>
+    <div v-if="logs.length > 0">
+        <table border="1">
+            <tr>
+                <th>Date</th>
+                <th>Area</th>
+                <th>Crop</th>
+                <th>Yield</th>
+                <th>Units</th>
+                <th>Row</th>
+            </tr>
+            <tr v-for="(log, index) in logs">
+                <td>{{ index }}</td>
+                <td>{{ log.date }}</td>
+                <td>{{ log.area }}</td>
+                <td>{{ log.crop }}</td>
+                <td>{{ log.yield }}</td>
+                <td>{{ log.units }}</td>
+            </tr>
+        </table>
+    </div>
+    <p v-else>There are no matching records found.</p>
+</div>
+<script>
+    var reportTitle = new Vue({
+        el: "#report-title",
+        created() {
+            console.log("HarvestReport Vue instance created!")
+            getIDToCropMap()
+                .then((theMap) => {
+                    console.log("Map received")
+                    this.idToCropMap = theMap
+                })
+
+                .catch((err) => {
+                    console.log("Error Occurred")
+                    console.log(error)
+                })
+
+
+        },
+
+        computed: {
+            cropNames() {
+                return Array.from(this.idToCropMap.values());
+            }
+        } ,
+
+        data: {
+            header: "My Sample Harvest Report",
+            startDate: "2020-05-05",
+            endDate: "2020-05-15",
+            farm: "",
+            user: "",
+            language: "",
+            idToCropMap: new Map(),
+
+            areas: [
+                "All",
+                "Chuau-1",
+                "SQ7",
+            ],
+            logs: [
+
+                {}
+            ],
+        },
+
+        methods: {
+            addReport: function () {
+                axios.get('/farm.json')  // this line sends the request.
+                    .then((response) => {
+                        this.farm = response.data.name;
+                        this.user = response.data.user.name;
+                        this.language = response.data.languages.en.name;
+                    })
+                    .catch((error) => {
+                        console.log("Error Occurred")
+                        console.log(error);
+                    })
+                this.logs.push({ date: "2018-05-01", area: "Orion-3", crop: "Kale", yield: "12", units: "Bunches" });
+
+            }
+        }
+
+    })
+    Vue.config.devtools = true;
+</script>