DickinsonCollege · anemervontage · Sep 15, 2023 · Sep 15, 2023 · Sep 15, 2023 · Sep 15, 2023
diff --git a/farmdata2/farmdata2_modules/fd2_school/API/api.html b/farmdata2/farmdata2_modules/fd2_school/API/api.html
@@ -0,0 +1,152 @@
+<html>
+
+<div id="vue_spike2" v-cloak>
+    <body>
+        <p>
+        <h1>Harvest Report</h1>
+        <p>This page is a <i>mockup</i> of a simplified harvest report.</p>
+
+
+        <label for="title">Title:</label>
+        <input v-model="title" type="text" id="title" name="title"/>
+
+        <br>
+
+        <div>
+        <label for="startdate">Start:</label>
+        <input type="date" id="startdate" name="start_date" 
+            v-model ="startDate" min="2014-01-01" :max="endDate"/>
+        <label for="enddate">End:</label>
+        <input type="date" id="enddate" name="end_date" 
+            v-model ="endDate"  :min="startDate" max="2022-01-01"/>
+        </div>
+
+        <br>
+
+        <div>
+        <label for="crops">Crop:</label>
+        <select v-model="crops" id="crops" name="crops">
+            <option v-for="crops in cropNames">{{ crops }}</option>
+        </select>
+
+        <label for="area">Area:</label>
+        <select v-model="areas" id ="area" name="area">
+            <option v-for="area in areas">{{ area }}</option>
+          </select>
+        </div>
+
+        <br>
+
+        <button type="button" v-on:click="saveReport" @click='changeState("activeReport")'>Generate Report</button>
+
+        <hr>
+
+
+        <v-cloak><h1>{{ title ? title : "Mock Harvest Report" }}</h1></v-cloak>
+
+
+        <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> {{ startDate }}</li>
+            <li><strong>End:</strong> {{ endDate }}</li>
+            <li><strong>Crop:</strong> {{ crops }}</li>
+            </ul>
+
+        <p v-if='state === "nullReport" || harvestLogs.length === 0'>There are no matching records</p>
+        <div v-if='state === "activeReport" && !(harvestLogs.length === 0)' >
+            <table border=1>
+                <tr>
+                  <th>Row</th>
+                  <th>Date</th>
+                  <th>Area</th>
+                  <th>Crop</th>
+                  <th>Yield</th>
+                  <th>Units</th>
+                </tr>
+               <tr v-for="(cell,index) in harvestLogs"> 
+                <td>{{ index + 1 }}</td> 
+                <td>{{ cell.date }}</td> 
+                <td>{{ cell.area }}</td> 
+                <td>{{ cell.crop }}</td> 
+                <td>{{ cell.yield }}</td> 
+                <td>{{ cell.units }}</td>
+              </tr>
+              </table>
+
+
+        </div>
+    </body>
+</div>
+
+<script>
+    var vueSpike = new Vue({
+      el: "#vue_spike2",
+      data: {
+          farm: "",
+          user: "",
+          language: "",
+          state: "nullReport",
+          title: "My Sample Harvest Report",
+          startDate: "2020-05-05",
+          endDate: "2020-05-15",
+          crops: ["Kale", "Peas", "Broccoli"],
+          areas: ["All", "Chuau-1", "SQ7"],
+          harvestLogs: [
+        ],
+          idToCropMap: new Map()
+      },
+      methods: {
+            saveReport: function(){
+                axios.get('/farm.json')  // this line sends the request.
+                .then((response) => {
+                    this.language = response.data.languages.en.name;
+                    this.user = response.data.user.name;
+                    this.farm = response.data.name;
+
+                })
+                .catch((error) => {
+                    console.log("Error Occurred")
+                    console.log(error)
+
+                })
+
+                this.harvestLogs.push({date:"2018-05-01", area:"Orion-3", crop:"Kale", yield:12, units:"Bunches"});
+
+            },
+            changeState: function(newState){
+                this.state = newState;
+            }
+
+
+        },
+
+        computed: {
+            cropNames(){
+                return Array.from(this.idToCropMap.values());
+            }
+        },
+
+      created() {
+      getIDToCropMap()
+            .then((theMap) => {
+                this.idToCropMap = theMap;
+            })
+
+            .catch((err) => {
+                console.log("error getting ID to CropMap")
+            })
+      },
+    })
+    Vue.config.devtools = true
+  </script>
+
+  </html>
diff --git a/farmdata2/farmdata2_modules/fd2_school/API2/api2.html b/farmdata2/farmdata2_modules/fd2_school/API2/api2.html
@@ -0,0 +1,191 @@
+<html>
+
+<div id="vue_spike2" v-cloak>
+    <body>
+        <p>
+        <h1>Harvest Report</h1>
+        <p>This page is a <i>mockup</i> of a simplified harvest report.</p>
+
+
+        <label for="title">Title:</label>
+        <input v-model="title" type="text" id="title" name="title"/>
+
+        <br>
+
+        <div>
+        <label for="startdate">Start:</label>
+        <input type="date" id="startdate" name="start_date" 
+            v-model ="startDate" min="2014-01-01" :max="endDate"/>
+        <label for="enddate">End:</label>
+        <input type="date" id="enddate" name="end_date" 
+            v-model ="endDate"  :min="startDate" max="2022-01-01"/>
+        </div>
+
+        <br>
+
+        <div>
+        <label for="crops">Crop:</label>
+        <select v-model="crops" id="crops" name="crops">
+            <option v-for="crops in cropNames">{{ crops }}</option>
+        </select>
+
+        <label for="area">Area:</label>
+        <select v-model="areas" id ="area" name="area">
+            <option v-for="area in areas">{{ area }}</option>
+          </select>
+        </div>
+
+        <br>
+
+        <button type="button" v-on:click="saveReport" @click='changeState("activeReport")'>Generate Report</button>
+
+        <hr>
+
+
+        <v-cloak><h1>{{ title ? title : "Mock Harvest Report" }}</h1></v-cloak>
+
+
+        <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> {{ startDate }}</li>
+            <li><strong>End:</strong> {{ endDate }}</li>
+            <li><strong>Crop:</strong> {{ crops }}</li>
+            </ul>
+
+        <p v-if='state === "nullReport" || harvestLogs.length === 0'>There are no matching records</p>
+        <div v-if='state === "activeReport" && !(harvestLogs.length === 0)' >
+            <table border=1>
+                <tr>
+                  <th>Row</th>
+                  <th>Date</th>
+                  <th>Area</th>
+                  <th>Crop</th>
+                  <th>Yield</th>
+                  <th>Units</th>
+                </tr>
+               <tr v-for="(cell,index) in harvestReportRows"> 
+                <td>{{ index + 1 }}</td> 
+                <td>{{ cell.date }}</td> 
+                <td>{{ cell.area }}</td> 
+                <td>{{ cell.crop }}</td> 
+                <td>{{ cell.yield }}</td> 
+                <td>{{ cell.units }}</td>
+              </tr>
+              </table>
+
+
+        </div>
+    </body>
+</div>
+
+<script>
+    var vueSpike = new Vue({
+      el: "#vue_spike2",
+      data: {
+          harvestPages: [],
+          harvestRequest: "",
+          endTimestamp: "",
+          startTimestamp: "",
+          farm: "",
+          user: "",
+          language: "",
+          state: "nullReport",
+          title: "My Sample Harvest Report",
+          startDate: "2020-05-05",
+          endDate: "2020-05-15",
+          crops: ["Kale", "Peas", "Broccoli"],
+          areas: ["All", "Chuau-1", "SQ7"],
+          harvestLogs: [
+        ],
+          idToCropMap: new Map()
+      },
+      methods: {
+            saveReport: function(){
+                axios.get('/farm.json')  // this line sends the request.
+                .then((response) => {
+                    this.language = response.data.languages.en.name;
+                    this.user = response.data.user.name;
+                    this.farm = response.data.name;
+
+                })
+                .catch((error) => {
+                    console.log("Error Occurred")
+                    console.log(error)
+
+                })
+
+               let startTimestamp = dayjs(this.startDate).unix();
+               let endTimestamp = dayjs(this.endDate).unix();
+                console.log(startTimestamp)
+                console.log(endTimestamp)
+               let harvestRequest = "/log.json?type=farm_harvest&timestamp[ge]=" + startTimestamp 
+                            + "&timestamp[le]=" + endTimestamp;
+               console.log(harvestRequest)
+
+               getAllPages(harvestRequest)
+                .then((res) => {
+                    this.harvestPages = res
+                })
+                .catch((err) => {
+                    console.log("Error Occurred Getting Pages")
+                    console.log(error)
+                })
+
+
+
+                this.harvestLogs.push({date:"", area:"", crop:"", yield:"", units:""});
+
+            },
+            changeState: function(newState){
+                this.state = newState;
+            }
+
+
+        },
+
+        computed: {
+            cropNames(){
+                return Array.from(this.idToCropMap.values());
+            },
+
+            harvestReportRows() {
+                let tableRows = []
+                for(let log of this.harvestPages) {
+                    let tableRow = {
+                        date: dayjs.unix(log.timestamp).format('MM/DD/YYYY'),
+                        area: log.area[0].name,
+                        yield: log.quantity[0].value,
+                        units: log.quantity[0].unit.name,
+                        crop: this.idToCropMap.get(log.data.crop_tid)
+                    }
+                    tableRows.push(tableRow)
+                }
+                return tableRows
+            }                  
+
+        },
+
+      created() {
+      getIDToCropMap()
+            .then((theMap) => {
+                this.idToCropMap = theMap;
+            })
+
+            .catch((err) => {
+                console.log("error getting ID to CropMap")
+            })
+      },
+    })
+    Vue.config.devtools = true
+  </script>
+
+  </html>
diff --git a/farmdata2/farmdata2_modules/fd2_school/E2E/e2e.defaults.spec.js b/farmdata2/farmdata2_modules/fd2_school/E2E/e2e.defaults.spec.js
@@ -0,0 +1,40 @@
+describe("Test the harvest report default values", () => {
+    beforeEach(() => {
+        cy.login("manager1", "farmdata2")
+        cy.visit("/farm/fd2-school/e2e")
+    })
+
+    it("Check the page header", () => {
+
+        cy.get("[data-cy=page-header]")
+            .should("have.text","Harvest Report")
+
+
+    })
+
+    it("Check the default start and end dates", () => {
+
+        cy.get("[data-cy=start-date]")
+            .should("have.value", "2020-05-05")
+
+        cy.get("[data-cy=end-date]")
+            .should("have.value", "2020-05-15")
+    })
+
+
+    it("Check the crops in crop dropdown", () => {
+
+        cy.get("[data-cy=crop-drop]").children().eq(0)
+            .should("have.text", "ARUGULA")
+
+        cy.get("[data-cy=crop-drop]").children().eq(4)
+            .should("have.text", "BEAN-FAVA")
+
+        cy.get("[data-cy=crop-drop]").children().eq(110)
+            .should("have.text", "ZUCCHINI")
+
+        cy.get("[data-cy=crop-drop]").children()
+            .should("have.length", "111")
+    })
+
+})