Linh 06 api2

farmdata2/farmdata2_modules/fd2_school/api/api.html

@@ -0,0 +1,113 @@
+<div id="farm-report">
+    <h3>Harvest Report</h3>
+    <p>This page is a <i>mockup</i> of a simplified harvest report.</p>
+    <label for=”title”>Title:</label> 
+    <input type=”text” id=”title” v-model="reportTitle"/>
+    <br>
+    <label for="crop">Crop:</label>
+    <select id="crop" name="crop">
+        <option v-for="crop in cropNames">{{ crop }}</option>
+    </select>
+    <br>
+    <label for="area">Area:</label>
+    <select id="area" name="area">
+        <option v-for="area in reportAreaList">{{ area }}</option>
+    </select>
+    <br>
+    <label for="start">Start:</label>
+    <input type="date" id="start" name="start" min="2014-01-01" max="2022-01-01" :max="reportEnd" v-model="reportStart" />
+    <label for="end">End:</label>
+    <input type="date" id="end" name="end" min="2020-05-05" max="2022-01-01" :min="reportStart"v-model="reportEnd" />
+    <br>
+    <button type="button" @click='addReportLog'>Generate Report</button>
+
+
+<hr>
+
+    <div>
+        <h3>{{ reportTitle === '' ? 'Mock Harvest Report' : reportTitle }}</h3>
+        <p>Details:</p>
+        <ul>
+            <li><strong>Farm:</strong>{{ reportFarm }}</li>
+            <li><strong>User:</strong>{{ reportUser }}</li>
+            <li><strong>Language:</strong>{{ reportLanguage }}</li>
+            <br>
+            <li><strong>Start:</strong>{{ reportStart }}</li>
+            <li><strong>End:</strong>{{ reportEnd }}</li>
+            <li><strong>Crop:</strong>{{ reportCrop }}</li>
+        </ul>
+        <div v-if="reportTable.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="(item, index) in reportTable">
+                    <td>{{ index + 1 }}</td>
+                    <td>{{ item.date }}</td>
+                    <td>{{ item.area }}</td>
+                    <td>{{ item.crop }}</td>
+                    <td>{{ item.yield }}</td>
+                    <td>{{ item.units }}</td>
+                </tr>
+            </table>
+        </div>
+        <div v-else><p>There no matching records</p></div>
+    </div>
+
+    <script>
+        var farmReport = new Vue ({
+            el: "#farm-report",
+            data: {
+                reportTitle: "My Sample Harvest Report",
+                reportFarm: "",
+                reportUser: "",
+                reportLanguage: "",
+                reportStart: "05/01/2018",
+                reportEnd: "05/15/2018",
+                reportCrop: "Kale",
+                //reportCropList: ["Broccoli", "Kale", "Peas"],
+                reportAreaList: ["All", "Chuau-1", "SQ7"],
+                reportTable: [],
+                idToCropMap: new Map (),
+            },
+            computed: {
+                cropNames () {
+                    return Array.from(this.idToCropMap.values());
+                }
+            },
+            methods: {
+                addReportLog: function() {
+                    axios.get('/farm.json')
+
+                    .then((response) => { 
+                        this.reportFarm = response.data.name;
+                        this.reportUser = response.data.user.name;
+                        this.reportLanguage = response.data.languages.en.name;
+                        console.log(response)
+                    }) 
+                    .catch((error) => { 
+                        console.log("Error Occurred")
+                        console.log(error)
+                    }) 
+                    this.reportTable.push({date:"2018-05-01", area:"Orion-3", crop: "Kale", yield: 12, units: "Bunches"});
+                }
+            },
+            created() { 
+                console.log("HarvestReport Vue instance created!") 
+                getIDToCropMap()
+                    .then((theMap) => {
+                        this.idToCropMap = theMap;
+                    })
+                    .catch((err) => {
+                        console.log("Error Occurred")
+                    })
+            }, 
+        });
+        Vue.config.devtools = true;
+    </script>
+</div>

farmdata2/farmdata2_modules/fd2_school/api2/api2.html

@@ -0,0 +1,127 @@
+<div id="farm-report">
+    <h3>Harvest Report</h3>
+    <p>This page is a <i>mockup</i> of a simplified harvest report.</p>
+    <label for=”title”>Title:</label> 
+    <input type=”text” id=”title” v-model="reportTitle"/>
+    <br>
+    <label for="crop">Crop:</label>
+    <select id="crop" name="crop" v-model="reportCrop">
+        <option v-for="crop in cropNames">{{ crop }}</option>
+    </select>
+    <br>
+    <label for="area">Area:</label>
+    <select id="area" name="area">
+        <option v-for="area in reportAreaList">{{ area }}</option>
+    </select>
+    <br>
+    <label for="start">Start:</label>
+    <input type="date" id="start" name="start" min="2014-01-01" max="2022-01-01" :max="reportEnd" v-model="reportStart" />
+    <label for="end">End:</label>
+    <input type="date" id="end" name="end" min="2020-05-05" max="2022-01-01" :min="reportStart"v-model="reportEnd" />
+    <br>
+    <button type="button" @click='addReportLog'>Generate Report</button>
+
+
+<hr>
+
+    <div>
+        <h3>{{ reportTitle === '' ? 'Mock Harvest Report' : reportTitle }}</h3>
+        <p>Details:</p>
+        <ul>
+            <li><strong>Farm:</strong>{{ reportFarm }}</li>
+            <li><strong>User:</strong>{{ reportUser }}</li>
+            <li><strong>Language:</strong>{{ reportLanguage }}</li>
+            <br>
+            <li><strong>Start:</strong>{{ reportStart }}</li>
+            <li><strong>End:</strong>{{ reportEnd }}</li>
+            <li><strong>Crop:</strong>{{ reportCrop }}</li>
+        </ul>
+        <div v-if="harvestReportRows.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="(item, index) in harvestReportRows">
+                    <td>{{ index + 1 }}</td>
+                    <td>{{ item.date }}</td>
+                    <td>{{ item.area }}</td>
+                    <td>{{ item.crop }}</td>
+                    <td>{{ item.yield }}</td>
+                    <td>{{ item.units }}</td>
+                </tr>
+            </table>
+        </div>
+        <div v-else><p>There no matching records</p></div>
+    </div>
+
+    <script>
+        var farmReport = new Vue ({
+            el: "#farm-report",
+            data: {
+                reportTitle: "My Sample Harvest Report",
+                reportFarm: "",
+                reportUser: "",
+                reportLanguage: "",
+                reportStart: "05/05/2020",
+                reportEnd: "05/10/2020",
+                reportCrop: "",
+                //reportCropList: ["Broccoli", "Kale", "Peas"],
+                reportAreaList: ["All", "Chuau-1", "SQ7"],
+                reportTable: [],
+                idToCropMap: new Map (),
+                results: [],
+            },
+            computed: {
+                cropNames () {
+                    return Array.from(this.idToCropMap.values());
+                },
+                harvestReportRows() { 
+                    let tableRows = [] 
+                    for(let log of this.results) { 
+                        let cropName = this.idToCropMap.get(log.data.crop_tid)
+                        if (cropName === this.reportCrop) {
+                            let tableRow = { 
+                                date: dayjs.unix(log.timestamp).format('MM/DD/YYYY'), 
+                                area: log.area[0].name,
+                                crop: cropName,
+                                yield: log.quantity[0].value,
+                                units: log.quantity[0].unit.name,
+                            }
+                            tableRows.push(tableRow) 
+                        } 
+                    } 
+                    return tableRows 
+                },
+            },
+            methods: {
+                addReportLog: function() {
+                    let timestampStart = dayjs(this.reportStart).unix()
+                    let timestampEnd = dayjs(this.reportEnd).unix()  
+                    let apiStr = `/log.json?type=farm_harvest&timestamp[ge]=${timestampStart}&timestamp[le]=${timestampEnd}`
+                    getAllPages(apiStr, this.results)
+                    .then(() => {}) 
+                    .catch((error) => { 
+                        console.log("Error Occurred")
+                        console.log(error)
+                    }) 
+                }
+            },
+            created() { 
+                console.log("HarvestReport Vue instance created!") 
+                getIDToCropMap()
+                    .then((theMap) => {
+                        this.idToCropMap = theMap;
+                    })
+                    .catch((err) => {
+                        console.log("Error Occurred")
+                    })
+            }, 
+        });
+        Vue.config.devtools = true;
+    </script>
+</div>

farmdata2/farmdata2_modules/fd2_school/fd2_school.module

@@ -61,7 +61,50 @@ function fd2_school_menu() {
   );
 
   // Add items blocks for new sub-tabs here.
+  $items['farm/fd2-school/html'] = array(
+        'title' => 'HTML',
+        'type' => MENU_LOCAL_TASK,
+        'page callback' => 'fd2_school_view',
+        'page arguments' => array('html'),
+        'access arguments' => array('view fd2 school'),
+        'weight' => 110,
+  );
+
+  $items['farm/fd2-school/vue1'] = array(
+        'title' => 'Vue1',
+        'type' => MENU_LOCAL_TASK,
+        'page callback' => 'fd2_school_view',
+        'page arguments' => array('vue1'),
+        'access arguments' => array('view fd2 school'),
+        'weight' => 110,
+  );
+
+  $items['farm/fd2-school/vue2'] = array(
+        'title' => 'Vue2',
+        'type' => MENU_LOCAL_TASK,
+        'page callback' => 'fd2_school_view',
+        'page arguments' => array('vue2'),
+        'access arguments' => array('view fd2 school'),
+        'weight' => 110,
+  );
+
+  $items['farm/fd2-school/api2'] = array(
+        'title' => 'API2',
+        'type' => MENU_LOCAL_TASK,
+        'page callback' => 'fd2_school_view',
+        'page arguments' => array('api2'),
+        'access arguments' => array('view fd2 school'),
+        'weight' => 110,
+  );
 
+  $items['farm/fd2-school/api'] = array(
+        'title' => 'API',
+        'type' => MENU_LOCAL_TASK,
+        'page callback' => 'fd2_school_view',
+        'page arguments' => array('api'),
+        'access arguments' => array('view fd2 school'),
+        'weight' => 110,
+  );
   return $items;
 };
 

farmdata2/farmdata2_modules/fd2_school/html/html.html

@@ -0,0 +1,58 @@
+<div>
+    <h3>Harvest Report</h3>
+    <p>This page is a <i>mockup</i> of a simplified harvest report.</p>
+    <label for=”title”>Title:</label> 
+    <input type=”text” id=”title” value="My Sample Harvest Report" />
+    <br>
+    <label for="crop">Crop:</label>
+    <select id="crop" name="crop">
+        <option>Broccoli</option>
+        <option selected>Kale</option>
+        <option>Peas</option>
+    </select>
+    <br>
+    <label for="area">Area:</label>
+    <select id="area" name="area">
+        <option selected>All</option>
+        <option>Chuau-1</option>
+        <option>SQ7</option>
+    </select>
+    <br>
+    <label for="start">Start:</label>
+    <input type="date" id="start" name="start" value="2020-05-05" min="2014-01-01" max="2022-01-01" />
+    <label for="end">End:</label>
+    <input type="date" id="end" name="end" value="2020-05-15" min="2020-05-05" max="2022-01-01" />
+    <br>
+    <button type="button">Generate Report</button>
+</div>
+<hr>
+<div>
+    <h3>My Sample Harvest Report</h3>
+    <p>Details:</p>
+    <ul>
+        <li><strong>Farm:</strong>Sample Farm</li>
+        <li><strong>User:</strong>manager1</li>
+        <li><strong>Language:</strong>English</li>
+        <br>
+        <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>
+            <td>05/02/2020</td>
+            <td>SQ7</td>
+            <td>Kale</td>
+            <td>7</td>
+            <td>Bunches</td>
+        </tr>
+    </table>
+</div>