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

Ha nguyen 06 api2 #180

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

Ha nguyen 06 api2 #180

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 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
fd71ae1
create API2 SubTab
HaNguyen03 May 5, 2024
ba5b185
finish HW6
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>
168 changes: 168 additions & 0 deletions farmdata2/farmdata2_modules/fd2_school/API2/api2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,168 @@
<!DOCTYPE html>
<html>
<head>
<title>Vue1</title>
</head>
<body>
<h1>Harvest Report</h1>
<p>This page is a <i>mockup</i> of a simplified harvest report.</p>

<div id="report" v-cloak>
<label for="title">Title:</label>
<input type="text" id="title" name="title" v-model="reportTitle"/>
<br>

<label for="start-date">Start:</label>
<input type="date" id="start-date" name="start-date" :min="reportStartDate" :max="reportEndDate" v-model="reportStartDate" />
<label for="end-date">End:</label>
<input type="date" id="end-date" name="end-date" :min="reportStartDate" max="reportEndDate" v-model="reportEndDate" />
<br>

<label for="crop">Crop:</label>
<select id="crop" name="crop" v-model="reportCrop">
<option v-for="crop in cropNames">{{ crop }}</option>
</select>
<label for="field">Area:</label>
<select id="field" name="field" v-model="reportArea">
<option v-for="area in areaNames">{{ area }}</option>
</select>
<br>

<button type="button" @click="generateReport">Generate Report</button>
<hr>

<h1>{{ reportTitle ? reportTitle : "Mock Harvest Report" }}</h1>

<p>Details:</p>
<ul>
<li><strong>Farm</strong>:{{ farm }}</li>
<li><strong>User</strong>:{{ user }}</li>
<li><strong>Language</strong>:{{ language }}</li>
<br>
<li><strong>Start</strong>:{{ reportStartDate }}</li>
<li><strong>End</strong>:{{ reportEndDate }}</li>
<li><strong>Crop</strong>:{{ reportCrop }}</li>
</ul>
<br>
<table border="1">
<tr v-if="harvestReportRows.length !== 0">
<th>Row</th>
<th>Date</th>
<th>Area</th>
<th>Crop</th>
<th>Yield</th>
<th>Units</th>

</tr>
<tr v-for="(log,index) in harvestReportRows">
<td>{{ index + 1}}</td>
<td>{{ log.date }}</td>
<td>{{ log.area }}</td>
<td>{{ log.crop }}</td>
<td>{{ log.yield }}</td>
<td>{{ log.units }}</td>
</tr>
</table>
<p v-if="harvestReportRows.length === 0">There are no matching records!</p>
</div>

<script>
var report = new Vue ({
el: "#report",
data: {
reportTitle: "My Sample Harvest Report",
reportStartDate: "05/05/2020",
reportEndDate: "05/15/2020",
reportCrop: "All",
reportArea: "All",
harvestLogs: [],
farm: "",
user: "",
language: "",
idToCropMap: new Map(),
idToAreaMap: new Map(),
result: [],
},
computed: {
cropNames() {
let arr = Array.from(this.idToCropMap.values());
arr.unshift("All");
return arr;
},
areaNames() {
let arr = Array.from(this.idToAreaMap.values());
arr.unshift("All");
return arr;
},
harvestReportRows() {
let tableRows = [];
for (let log of this.result) {
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),
}
if (tableRow.crop === this.reportCrop && tableRow.area === this.reportArea) {
tableRows.push(tableRow);
}
else if (this.reportCrop === "All" && this.reportArea === "All") {
tableRows.push(tableRow);
}
}
return tableRows;
}
},
methods: {
generateReport: function() {
axios.get("/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);
})

let timestampStart = dayjs(this.reportStartDate).unix();
let timestampEnd = dayjs(this.reportEndDate).unix();
let request = "/log.json?type=farm_harvest&timestamp[ge]=" + timestampStart + "&timestamp[le]=" + timestampEnd;

this.result = [];
getAllPages(request, this.result)
.then(() => {})
.catch((error) => {
console.log("Error Occurred");
console.log(error);
})
},
deleteRow: function(rowIndex) {
this.harvestLogs.splice(rowIndex, 1);
},
},
created() {
getIDToCropMap()
.then((cropMap) => {
this.idToCropMap = cropMap;
})
.catch((error) => {
console.log("Error Occurred");
console.log(error);
});
getIDToAreaMap()
.then((areaMap) => {
this.idToAreaMap = areaMap;
})
.catch((error) => {
console.log("Error Occurred");
console.log(error);
});
},
});
Vue.config.devtools = true;
</script>
</body>
</html>
Loading