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

Ha nguyen 08 fd2 #182

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

Ha nguyen 08 fd2 #182

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
24 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
a935478
create my first E2E test
HaNguyen03 May 5, 2024
55b8f51
create E2E subtab
HaNguyen03 May 5, 2024
5d83ccc
finish HW7, complete E2E test
HaNguyen03 May 5, 2024
ac23013
fix E2E test such that it can test the start date and end date correctly
HaNguyen03 May 5, 2024
e2cdf70
finish Hw8 with all the spike
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>
59 changes: 59 additions & 0 deletions farmdata2/farmdata2_modules/fd2_school/E2E/e2e.button.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
describe("Test the behavior of the Generate Report button", () => {
beforeEach(() => {
cy.login("manager1", "farmdata2")
cy.visit("/farm/fd2-school/e2e")
})

it("Check the Generate Report button", () => {
cy.get("[data-cy=report-title]").should("not.exist")
cy.get("[data-cy=details]").should("not.exist")
cy.get("[data-cy=harvest-report-table]").should("not.exist")
cy.get("[data-cy=generate-report-button]").click()
cy.get("[data-cy=report-title]").should("be.visible")
cy.get("[data-cy=details]").should("be.visible")
cy.get("[data-cy=harvest-report-table]").should("be.visible")
})

it("Check the information about the farm", () => {
cy.get("[data-cy=generate-report-button]").click()
cy.get("[data-cy=farm-name]").should("have.text", "Farm:Sample Farm")
cy.get("[data-cy=username]").should("contain.text", "manager1")
cy.get("[data-cy=language]").should("have.text", "English")
})

it("should update harvest report when start date, end date and crop inputs change", () => {
cy.get("[data-cy=start-date]").should("have.value", "2020-05-05") // check the default start date
cy.get("[data-cy=end-date]").should("have.value", "2020-05-15") // check the default end date
cy.get("[data-cy=crop]").should("have.text", "All") // check the default crop

cy.get("[data-cy=start-date]").type("2020-05-10") // enter a new start date
cy.get("[data-cy=end-date]").type("2020-05-30") // enter a new end date
cy.get("[data-cy=crop]").select("KALE") // enter a new crop

cy.get("[data-cy=generate-report-button]").click()

cy.get("[data-cy=report-start-date]").should("have.text", "2020-05-10")
cy.get("[data-cy=report-end-date]").should("have.text", "2020-05-30")
cy.get("[data-cy=report-crop]").should("have.text", "KALE")

})

it("Check the title of the report when the input is changed", () => {
cy.get("[data-cy=title]").clear() // clear the input field before entering new title

cy.get("[data-cy=title]").type("Harvest Report") // enter a new title

cy.get("[data-cy=generate-report-button]").click()

cy.get("[data-cy=report-title]").should("have.text", "Harvest Report")
})

it("Check that a message is displayed if no logs are available", () => {
cy.get("[data-cy=start-date]").clear() // clear the start date input
cy.get("[data-cy=end-date]").clear() // clear the end date input

cy.get("[data-cy=generate-report-button]").click()

cy.get("[data-cy=no-record-message]").should("have.text", "There are no matching records!")
})
})
Loading