Matthew Buss 04 Vue2

farmdata2/farmdata2_modules/fd2_school/fd2_school.module

@@ -61,6 +61,36 @@ function fd2_school_menu() {
   );
 
   // Add items blocks for new sub-tabs here.
+
+  // Add a sub-tab named HTML with content in ./html/html.html.
+        $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,
+        );
+
+  // Add a sub-tab named Vue1 with content in ./vue1/vue1.html.
+        $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,
+        );
+
+  // Add a sub-tab named Vue2 with content in ./vue2/vue2.html.
+        $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,
+        );
 
   return $items;
 };

farmdata2/farmdata2_modules/fd2_school/html/html.html

@@ -0,0 +1,82 @@
+<h1>Harvest Report</h1>
+<p>This page is a <i>mockup</i> of a simplified harvest report.</p>
+
+<label for=”title”>Title:</label>
+<input type="text" id="title" name="title"
+ value="My Sample Harvest Report"/>
+<br><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><br>
+
+<label for="crop"> Crop: </label>
+<select id="crop" name="crop">
+    <option>Broccoli</option>
+    <option selected>Kale</option>
+    <option>Peas</option>
+</select>
+
+<label for="field"> Area: </label>
+<select id="field" name="field">
+    <option selected>All</option>
+    <option>Chuau-1</option>
+    <option>SQ7</option>
+</select>
+
+<br><br>
+<input type="button" value="Generate Report" />
+
+<hr>
+
+<h1>My Sample Harvest Report</h1>
+<p>Details:
+    <ul>
+        <li><b>Farm:</b>Sample Farm</li>
+        <li><b>User:</b>manager1</li>
+        <li><b>Language:</b>English</li>
+        <br>
+        <li><b>Start:</b>05/01/2018</li>
+        <li><b>End:</b>05/15/2018</li>
+        <li><b>Crop:</b>Kale</li>
+    </ul>
+</p>
+
+<table border="1">
+    <tr>
+        <th>Date</th>
+        <th>Area</th>
+        <th>Crop</th>
+        <th>Yield</th>
+        <th>Units</th>
+    </tr>
+    <tr>
+        <td>05/02/2011</td>
+        <td>Chuau-1</td>
+        <td>Kale</td>
+        <td>10</td>
+        <td>Bunches</td>
+    </tr>
+    <tr>
+        <td>05/05/2011</td>
+        <td>SQ7</td>
+        <td>Kale</td>
+        <td>7</td>
+        <td>Bunches</td>
+    </tr>
+</table>

farmdata2/farmdata2_modules/fd2_school/vue1/vue1.html

@@ -0,0 +1,101 @@
+<div v-cloak id="harvest-report">
+    <h1>Harvest Report</h1>
+    <p>This page is a <i>mockup</i> of a simplified harvest report.</p>
+
+    <label for=”title”>Title:</label>
+
+    <input type="text" id="title" name="title"
+    value="My Sample Harvest Report" v-model="reportTitle"/>
+    <br><br>
+    <label for="start"> Start: </label>
+    <input v-model="startDate"
+        type="date"
+        id="start"
+        name="start"
+        min="2014-01-01"
+        max="2022-01-01" />
+
+    <label for="end"> End: </label>
+    <input v-model="endDate"
+        type="date"
+        id="end"
+        name="end"
+        min="2020-05-05"
+        max="2022-01-01" />
+
+    <br><br>
+
+    <label for="crop"> Crop: </label>
+    <select id="crop" name="crop" v-model="crop">
+        <option v-for="cropOption in crops"> {{cropOption}}</option>
+    </select>
+
+    <label for="field"> Area: </label>
+    <select id="field" name="field">
+        <option v-for="area in areas"> {{area}} </option>
+    </select>
+
+    <br><br>
+    <input type="button" value="Generate Report" />
+
+    <hr>
+
+    <h1> {{reportTitle=="" ? "Mock Harvest Report" : reportTitle}} </h1>
+    <p>Details:
+        <ul>
+            <li><b>Farm:</b>Sample Farm</li>
+            <li><b>User:</b>manager1</li>
+            <li><b>Language:</b>English</li>
+            <br>
+            <li><b>Start:</b>{{startDate}}</li>
+            <li><b>End:</b>{{endDate}}</li>
+            <li><b>Crop:</b>{{crop}}</li>
+        </ul>
+    </p>
+
+    <table border="1">
+        <tr>
+            <th>Date</th>
+            <th>Area</th>
+            <th>Crop</th>
+            <th>Yield</th>
+            <th>Units</th>
+        </tr>
+        <tr v-for="report in reports">
+            <td>{{report.date}}</td>
+            <td>{{report.area}}</td>
+            <td>{{report.crop}}</td>
+            <td>{{report.yield}}</td>
+            <td>{{report.units}}</td>
+        </tr>
+    </table>
+</div>
+
+<script>
+    var vue = new Vue({
+        el: "#harvest-report",
+        data: {
+            reportTitle: "My Sample Harvest Report",
+            startDate: "2020-05-05",
+            endDate: "2020-05-15",
+            crop: "Kale",
+            crops: [
+                "Broccoli",
+                "Kale",
+                "Peas",
+            ],
+            areas: [
+                "All",
+                "Chuau-1",
+                "SQ7",
+            ],
+            reports: [
+                {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,114 @@
+<div v-cloak id="harvest-report">
+    <h1>Harvest Report</h1>
+    <p>This page is a <i>mockup</i> of a simplified harvest report.</p>
+
+    <label for=”title”>Title:</label>
+
+    <input type="text" id="title" name="title"
+    value="My Sample Harvest Report" v-model="reportTitle"/>
+    <br><br>
+    <label for="start"> Start: </label>
+    <input v-model="startDate"
+        type="date"
+        id="start"
+        name="start"
+        min="2014-01-01"
+        :max="endDate"/>
+
+    <label for="end"> End: </label>
+    <input v-model="endDate"
+        type="date"
+        id="end"
+        name="end"
+        :min="startDate"
+        max="2022-01-01" />
+
+    <br><br>
+
+    <label for="crop"> Crop: </label>
+    <select id="crop" name="crop" v-model="crop">
+        <option v-for="cropOption in crops"> {{cropOption}}</option>
+    </select>
+
+    <label for="field"> Area: </label>
+    <select id="field" name="field">
+        <option v-for="area in areas"> {{area}} </option>
+    </select>
+
+    <br><br>
+    <input type="button" value="Generate Report" @click="saveReport"/>
+
+    <hr>
+
+    <h1> {{reportTitle=="" ? "Mock Harvest Report" : reportTitle}} </h1>
+    <p>Details:
+        <ul>
+            <li><b>Farm:</b>Sample Farm</li>
+            <li><b>User:</b>manager1</li>
+            <li><b>Language:</b>English</li>
+            <br>
+            <li><b>Start:</b>{{startDate}}</li>
+            <li><b>End:</b>{{endDate}}</li>
+            <li><b>Crop:</b>{{crop}}</li>
+        </ul>
+    </p>
+
+    <table border="1">
+        <tr v-if="reports == ''"> <th>There are no matching records!</th></tr>
+        <tr v-else>
+            <th>Row</th>
+            <th>Date</th>
+            <th>Area</th>
+            <th>Crop</th>
+            <th>Yield</th>
+            <th>Units</th>
+            <th>Delete</th>
+        </tr>
+
+        <tr v-for="(report, index) in reports">
+            <td>{{index + 1}}</td>
+            <td>{{report.date }}</td>
+            <td>{{report.area}}</td>
+            <td>{{report.crop}}</td>
+            <td>{{report.yield}}</td>
+            <td>{{report.units}}</td>
+            <td> <input type="button" value="Delete" @click="deleteReport(index)"/> </td>
+        </tr>
+    </table>
+</div>
+
+<script>
+    var vue = new Vue({
+        el: "#harvest-report",
+        data: {
+            reportTitle: "My Sample Harvest Report",
+            startDate: "2020-05-05",
+            endDate: "2020-05-15",
+            crop: "Kale",
+            crops: [
+                "Broccoli",
+                "Kale",
+                "Peas",
+            ],
+            areas: [
+                "All",
+                "Chuau-1",
+                "SQ7",
+            ],
+            reports: [
+
+            ],
+        },
+        methods: {
+            saveReport: function() {
+                this.reports.push({date: "2018-05-02", area: "Chuau-1", crop: "Kale", yield: 10, units: "Bunches"})
+            },
+            deleteReport: function(index) {
+                this.reports.splice(index, 1)
+            }
+        }
+
+    })
+
+    Vue.config.devtools = true;
+</script>