Skip to content
This repository has been archived by the owner on Aug 26, 2024. It is now read-only.

Ha nguyen 05 api #179

Open
wants to merge 17 commits into
base: main
Choose a base branch
from
Open

Ha nguyen 05 api #179

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
08068c1
create my first sub-tab
HaNguyen03 Feb 18, 2024
9a47729
create a Mock Harvest Report
HaNguyen03 Feb 18, 2024
e797542
create date, crop field with drop down element
HaNguyen03 Feb 20, 2024
998f77b
Create a table in the mock Harvest Report
HaNguyen03 Feb 20, 2024
c0690be
create sub-tab Vue1 with the same content as HTML sub-tab
HaNguyen03 Feb 27, 2024
c3db579
add VueJs
HaNguyen03 Mar 5, 2024
144f8fb
modified the start date, end date, crop elemtn
HaNguyen03 Mar 5, 2024
c350c18
add crop and area so that it have array in side
HaNguyen03 Mar 5, 2024
afd3c15
create table
HaNguyen03 Mar 5, 2024
a6983df
create Vue2 sub-tab
HaNguyen03 Mar 6, 2024
a1ef0be
create botton event handler
HaNguyen03 Mar 17, 2024
d7b220f
create generate report function
HaNguyen03 Mar 17, 2024
74611d9
create column for number of report
HaNguyen03 Mar 17, 2024
86c7ca3
create state elment such that when the state is at defualt the table …
HaNguyen03 Mar 17, 2024
d15aa52
bind start date and end date
HaNguyen03 Mar 17, 2024
1a1f5f3
create API subtab
HaNguyen03 May 5, 2024
e4326c4
finish HW5
HaNguyen03 May 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
167 changes: 167 additions & 0 deletions farmdata2/farmdata2_modules/fd2_school/API/api.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,167 @@
<!DOCTYPE html>
<html>
<hr>

<body>
<div id="report" >
<h1>
{{(header!="") ? header : "Mock Harvest Report"}}
</h1>
<p>
This page is a <i>mockup</i> of a simplified harvest report.
<ul>
<li>
<label for="report">Title:</label>
<input type="text" v-model="header"/>
</li>

<li>
<label for="start">Start:</label>
<input type="date" id="startDate" :min="start" :max="end" v-model="start"/>

<label for="end">End:</label>
<input type="date" id="endDate" :min="start" :max="end" v-model="end"/>
</li>

<li>
<label for="crop">Crop:</label>
<select id="crop" v-model="crop" >
<option v-for="crop in cropNames">{{ crop }}</option>
</select>
</li>

<li><label for="area">Area:</label>
<select id="area" name="fields">
<option v-for="area in areaNames">{{ area }}</option>
</select>
</li>
</ul>
<button v-on:click="saveLog" @click="changeState('edit')">Generate Report</button>

</p>


<hr>

<h1>
<h1>{{(header!="") ? header : "Mock Harvest Report"}}</h1>
</h1>
<p>
Detail:
<dd>
<ul>
<li v-model="farm"><strong>Farm:</strong>{{farm}}</li>
<li v-model="user"><strong>User:</strong>{{user}}</li>
<li v-model="language"><strong>Language:</strong>{{language}}</li> <br>
</ul>
<ul>
<li><strong>Start:</strong>{{start}}</li>
<li><strong>End:</strong>{{end}}</li>
<li><strong>Crop:</strong>{{crop}}</li>
</ul>
</dd>
</p>
</body>

<table border="1" v-if="state !== 'defualt'">
<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 harvestLog">
<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>
<script src="https://unpkg.com/vue@2"></script>
<script>
var harvest_report = new Vue({
el: "#report",


data: {
farm:"",
user:"",
language:"",
state: 'defualt',
header: "My Sample Harvest Report",
start: "05/05/2020",
end: "05/15/2020",
crop: "kale",
harvestLog: [],
idToCropMap: new Map(),
idToAreaMap: new Map(),

},
computed:{
cropNames() {
return Array.from(this.idToCropMap.values());
},
areaNames() {
return Array.from(this.idToAreaMap.values());
},
},
methods:{
saveLog: function(){

axios.get('http://fd2_farmdata2/farm.json')
.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.farm = "Sample Farm";
this.user = "manager2";
this.language = "English";
},

changeState: function(newState){
this.state = newState;
}
},
created() {
getIDToCropMap()
.then((cropMap) =>{
console.log(cropMap);
this.idToCropMap=cropMap;
})
.catch((err) => {
console.log("Error Occurred")
console.log(error)

});
getIDToAreaMap()
.then((areaMap) => {
console.log(areaMap);
this.idToAreaMap = areaMap;
})
.catch((error) => {
console.log("Error Occurred");
console.log(error);
});
},
});
Vue.config.devtools = true;
</script>
</body>
<hr>

</html>
85 changes: 85 additions & 0 deletions farmdata2/farmdata2_modules/fd2_school/HTML/HTML.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
<html>
<hr>

<body>
<h1>
Harvest Report
</h1>
<p>
This page is a <i>mockup</i> of a simplified harvest report.
<ul>
<li>
<label for="tile">Title:</label>
<input type="text" id="title" name="title" value="My Sample Harvest Report"/>
</li>

<li><label for="start">Start:</label>
<input type="date" id="start" name="date-start" value="2020-05-05" min="2014-01-01" max="2022-01-01"/>

<label for="end">End:</label>
<input type="date" id="end" name="date-end" value="2020-05-15" min="2020-05-05" max="2022-01-01"/>
</li>
<li><label for="crop">Crop:</label>
<select id="crop" name="crops" >
<option>Broccoli</option>
<option selected>Kale</option>
<option>Peas</option>
</select>
</li>
<li><label for="area">Area:</label>
<select id="area" name="fields">
<option selected>All</option>
<option>Chuau-1</option>
<option>SQ7</option>
</select>
</li>
</ul>
</p>

</body>
<hr>
<body>
<h1>
My Sample Harvest Report
</h1>
<p>
Detail:
<dd>
<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>
</dd>
</p>
</body>
<table border="1">
<tr>
<td><strong>Date</strong></td>
<td><strong>Area</strong></td>
<td><strong>Crop</strong></td>
<td><strong>Yield</strong></td>
<td><strong>Units</strong></td>
</tr>
<tr>
<td>05/02/2018</td>
<td>Chuau-1</td>
<td>Kale</td>
<td>10</td>
<td>Bunches</td>
</tr>
<tr>
<td>05/05/2018</td>
<td>SQ7</td>
<td>Kale</td>
<td>7</td>
<td>Bunches</td>
</tr>
</table>
<hr>
</html>
102 changes: 102 additions & 0 deletions farmdata2/farmdata2_modules/fd2_school/Vue1/Vue1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
<html>
<hr>

<body>
<div id="report" >
<h1>
{{(header!="") ? header : "Mock Harvest Report"}}
</h1>
<p>
This page is a <i>mockup</i> of a simplified harvest report.
<ul>
<li>
<label for="report">Title:</label>
<input type="text" v-model="header"/>
</li>

<li>
<label for="start">Start:</label>
<input type="date" id="startDate" min="2014-01-01" max="2022-01-01" v-model="start"/>

<label for="end">End:</label>
<input type="date" id="endDate" value="2020-05-15" min="2020-05-05" v-model="end"/>
</li>

<li>
<label for="crop">Crop:</label>
<select id="crop" v-model="crop" >
<option v-for="item in plant">{{item}}</option>
</select>
</li>

<li><label for="area">Area:</label>
<select id="area" name="fields">
<option v-for="item in area">{{item}}</option>
</select>
</li>
</ul>
</p>
<input type="button" value="Generate Report"/>

</body>
<hr>
<body>
<h1>
<h1>{{(header!="") ? header : "Mock Harvest Report"}}</h1>
</h1>
<p>
Detail:
<dd>
<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>{{start}}</li>
<li><strong>End:</strong>{{end}}</li>
<li><strong>Crop:</strong>{{crop}}</li>
</ul>
</dd>
</p>
</body>
<table border="1">
<tr><td v-for="item in table">{{item.row1}}</td></tr>
<tr><td v-for="item in table">{{item.row2}}</td></tr>
<tr><td v-for="item in table">{{item.row3}}</td></tr>
</table>
</div>
<script>
var harvest_report = new Vue({
el: "#report",

data: {
header: "My Sample Harvest Report",
start: "",
end: "",
crop: "",
plant: [
"Broccoli",
"Kale",
"Peas",
],
area: [
"All",
"Chuau-1",
"SQ7",
],

table:[
{row1: "Date", row2: "05/05/2020", row3: "05/08/2020"},
{row1: "Area", row2: "SQ7", row3: "Chuau-1"},
{row1: "Crop", row2: "Kale", row3: "Kale"},
{row1: "Yield", row2: "10", row3: "10"},
{row1: "Units", row2: "Bunches", row3: "Bunches"},
]

}
})
Vue.config.devtools = true;
</script>
<hr>
</html>
Loading