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

Added API2 sub-tab to FD2 School #103

Draft
wants to merge 32 commits into
base: main
Choose a base branch
from
Draft

Added API2 sub-tab to FD2 School #103

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
32 commits
Select commit Hold shift + click to select a range
183995b
Added HTML sub-tab to FD2 School sub-tab
MaxiSanc37 Feb 9, 2024
1fdec3d
Created the Harvest Report and My Sample Harvest Report sections in h…
MaxiSanc37 Feb 9, 2024
f0e2d68
Edited the html.html from fd2_school to make it more stylish using ht…
MaxiSanc37 Feb 9, 2024
492b2df
Added Title input textbox and Generate Report button to html.html in …
MaxiSanc37 Feb 9, 2024
e6aba6a
Moved up the title input text box and added the start and end date bo…
MaxiSanc37 Feb 9, 2024
408eb85
Added the crop selection box to html.html in fd2_school
MaxiSanc37 Feb 10, 2024
a22c275
Added the field selection box to html.html in fd2_school
MaxiSanc37 Feb 10, 2024
8e48f13
Added table with information about crops at the end of html.html in f…
MaxiSanc37 Feb 10, 2024
c3b4f08
Added Vue1 sub-tab to the FD2 School tab
MaxiSanc37 Feb 18, 2024
116d08f
Added Vue elements to vue1.html, now you can change the title of the …
MaxiSanc37 Feb 18, 2024
33f5c17
Bounded the start date, end date, and crop elements to the vue object…
MaxiSanc37 Feb 18, 2024
3b33868
Added ternary condition to the title of the report so that 'Mock Harv…
MaxiSanc37 Feb 18, 2024
d1767b1
Added array objects areas and crops so that the select boxes don't ha…
MaxiSanc37 Feb 18, 2024
a24010c
Added reports array of objects so that the table can be built from th…
MaxiSanc37 Feb 19, 2024
d7deac8
Added Vue dev tools to vue1.html
MaxiSanc37 Feb 19, 2024
d8ac318
Created A04 sub-tab in the FD2 School tab adding a04.html to the new …
MaxiSanc37 Feb 23, 2024
6256d6b
The generate report button now creates a row in the table at the bott…
MaxiSanc37 Feb 25, 2024
7a0b8a4
fixed the date not passing the current selected date and passed the b…
MaxiSanc37 Feb 26, 2024
90d662a
Added delete column to the table at the bottom of the page
MaxiSanc37 Feb 26, 2024
f231da5
Table at the bottom of the page is only displayed when there are avai…
MaxiSanc37 Feb 26, 2024
37fbad1
The report section of the page now only shows up when the generate re…
MaxiSanc37 Feb 26, 2024
a985e95
Now the start date cannot be chosen if it's greater than the end data…
MaxiSanc37 Feb 26, 2024
4920167
Total Yield is now computed and displayed at the bottom of the page
MaxiSanc37 Feb 26, 2024
8603782
Added API sub-tab to FD2 School tab and added api directory with api.…
MaxiSanc37 Mar 3, 2024
1fdac6d
Bounded the Farm, User, and Language details from the harvest report …
MaxiSanc37 Mar 3, 2024
ed9b795
The generate report button now sets the values of the Farm, User, and…
MaxiSanc37 Mar 3, 2024
895a525
Added axios API call to retrieve the values for the Farm, User, and L…
MaxiSanc37 Mar 3, 2024
3425008
Crop dropdown now retrieves the values from the FarmOS API
MaxiSanc37 Mar 4, 2024
6c9b1c3
Added API2 sub-tab to FD2 School tab creating api2.html on /fd2_schoo…
MaxiSanc37 Mar 5, 2024
4d76b60
The @click generateReport handler now retrieves from the API all of t…
MaxiSanc37 Mar 5, 2024
9390396
The @click generateReport handler now also retrieves and parses the h…
MaxiSanc37 Mar 6, 2024
0998d1a
The @click generateReport handler now will only show reports in the t…
MaxiSanc37 Mar 6, 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
138 changes: 138 additions & 0 deletions farmdata2/farmdata2_modules/fd2_school/a04/a04.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,138 @@
<!DOCTYPE html>
<html>
<body>
<h1>Harvest Report</h1>
<p>This page is a <i>mockup</i> of a simplified harvest report.</p>
<div id="harvest-report" v-cloak>
<label for="title">Title: </label>
<input id="title" type="text" placeholder="Enter title" v-model ="header" size="25"/>
<br />
<p>
<label for="start">Start:</label>
<input type="date" id="start" name="start" :disabled="startDate >= endDate" v-model="startDate"
min="2014-01-01" max="2022-01-01" />
<label for="end">End:</label>
<input type="date" id="end" name="end" v-model="endDate"
min="2020-05-05" max="2022-01-01" />
</p>
<br />
<p>
<label for="crop">Crop:</label>
<select id="crop" name="crop" v-model="newCrop">
<option v-for="crop in crops"> {{ crop }}</option>
</select>
<label for="area">Area:</label>
<select id="area" name="area" v-model="newArea">
<option v-for="area in areas">{{ area }}</option>
</select>
</p>
<br />
<input type="button" value="Generate Report" @click="generateReport('show')">
<hr />
<div v-if="state === 'show'">
<h1>{{ header == '' ? 'Mock Harvest Report':header }}</h1>
<p>Details:</p>
<ul>
<li><strong>Farm</strong>:Sample Farm</li>
<li><strong>User</strong>:manager1</li>
<li><strong>Language</strong>:English</li>
</ul>
<br />
<ul>
<li><strong>Start</strong>:{{ startDate }}</li>
<li><strong>End</strong>:{{ endDate }}</li>
<li><strong>Crop</strong>:{{ newCrop }}</li>
</ul>
<div v-if="reports.length > 0">
<table border="1">

<tr>
<th>Date</th>
<th>Area</th>
<th>Crop</th>
<th>Yield</th>
<th>Units</th>
<th>Delete</th>
</tr>

<tr v-for="(r, index) in reports" :key="r.date">
<td>{{ r.date }}</td>
<td>{{ r.area }}</td>
<td>{{ r.crop }}</td>
<td>{{ r.yield }}</td>
<td>{{ r.units }}</td>
<td><button type='button' @click='deleteReport(index)'>Delete</button></td>
</tr>
</table>
<p>Total Yield: {{ totalYield }}</p>
</div>
<p v-if="reports.length === 0">No matching records.</p>
</div>
</div>

<script>
Vue.config.devtools = true;
/*The var allows to change the Vue object
from the console to see the change in real time*/
var harvestReport = new Vue({
el: '#harvest-report',
data: {
header: 'My Sample Harvest Report',
state: 'default',
startDate: '2020-05-05',
endDate: '2020-05-15',
newCrop: 'Kale',
crops:[
'Kale',
'Broccoli',
'Peas',
],
areas:[
'All',
'Chuau-1',
'SQ7',
],
newArea: '',
reports:[
{date:'2018-05-02', area:'Chuau-1', crop:'Kale', yield:10, units:'Bunches'},
]
},
computed:{
totalYield(){
totYield = 0;
for(let i = 0; i < this.reports.length; i++){
totYield = totYield + this.reports[i].yield
}
return totYield;
}
},
methods: {
generateReport: function(newState){
const newReport = {date:'', area:'', crop:'', yield:10, units:'bunches'};
const newDate=this.startDate;
newReport.area = this.newArea;
newReport.crop = this.newCrop;
newReport.date=newDate;
let newR = JSON.stringify(newReport);
let same = 0;
console.log(newR);
for(const report in this.reports){
let r = JSON.stringify(this.reports[report]);
console.log(r);
if(r == newR){
same = 1;
}
}
if(same == 0){
this.reports.push(newReport);
}
this.state = newState;
},
deleteReport: function(reportIndex){
this.reports.splice(reportIndex, 1)
}
}
});
</script>
</body>
</html>
164 changes: 164 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,164 @@
<!DOCTYPE html>
<html>
<body>
<h1>Harvest Report</h1>
<p>This page is a <i>mockup</i> of a simplified harvest report.</p>
<div id="harvest-report" v-cloak>
<label for="title">Title: </label>
<input id="title" type="text" placeholder="Enter title" v-model ="header" size="25"/>
<br />
<p>
<label for="start">Start:</label>
<input type="date" id="start" name="start" :disabled="startDate >= endDate" v-model="startDate"
min="2014-01-01" max="2022-01-01" />
<label for="end">End:</label>
<input type="date" id="end" name="end" v-model="endDate"
min="2020-05-05" max="2022-01-01" />
</p>
<br />
<p>
<label for="crop">Crop:</label>
<select id="crop" name="crop" v-model="newCrop">
<option v-for="crop in cropNamesArr"> {{ crop }}</option>
</select>
<label for="area">Area:</label>
<select id="area" name="area" v-model="newArea">
<option v-for="area in areas">{{ area }}</option>
</select>
</p>
<br />
<input type="button" value="Generate Report" @click="generateReport('show')">
<hr />
<div v-if="state === 'show'">
<h1>{{ header == '' ? 'Mock Harvest Report':header }}</h1>
<p>Details:</p>
<ul>
<li><strong>Farm</strong>:{{ farm }}</li>
<li><strong>User</strong>:{{ user }}</li>
<li><strong>Language</strong>:{{ language }}</li>
</ul>
<br />
<ul>
<li><strong>Start</strong>:{{ startDate }}</li>
<li><strong>End</strong>:{{ endDate }}</li>
<li><strong>Crop</strong>:{{ newCrop }}</li>
</ul>
<div v-if="reports.length > 0">
<table border="1">

<tr>
<th>Date</th>
<th>Area</th>
<th>Crop</th>
<th>Yield</th>
<th>Units</th>
<th>Delete</th>
</tr>

<tr v-for="(r, index) in reports" :key="r.date">
<td>{{ r.date }}</td>
<td>{{ r.area }}</td>
<td>{{ r.crop }}</td>
<td>{{ r.yield }}</td>
<td>{{ r.units }}</td>
<td><button type='button' @click='deleteReport(index)'>Delete</button></td>
</tr>
</table>
<p>Total Yield: {{ totalYield }}</p>
</div>
<p v-if="reports.length === 0">No matching records.</p>
</div>
</div>

<script>
Vue.config.devtools = true;
/*The var allows to change the Vue object
from the console to see the change in real time*/
var harvestReport = new Vue({
el: '#harvest-report',
created() {
getIDToCropMap()
.then((theMap) => {
console.log('Map retrieved successfully!');
console.log(theMap);
this.idToCropMap = theMap;
})
.catch((err) => {
console.log('Error Occurred');
console.log(err);
})
},
data: {
header: 'My Sample Harvest Report',
state: 'default',
startDate: '2020-05-05',
endDate: '2020-05-15',
newCrop: 'Kale',
areas:[
'All',
'Chuau-1',
'SQ7',
],
newArea: '',
reports:[
{date:'2018-05-02', area:'Chuau-1', crop:'Kale', yield:10, units:'Bunches'},
],
farm:'',
user:'',
language:'',
idToCropMap: new Map()

},
computed:{
totalYield(){
totYield = 0;
for(let i = 0; i < this.reports.length; i++){
totYield = totYield + this.reports[i].yield
}
return totYield;
},
cropNamesArr(){
cropNames = Array.from(this.idToCropMap.values());
return cropNames;
}
},
methods: {
generateReport: function(newState){
axios.get('/farm.json') // this line sends the request.
.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);
})
const newReport = {date:'', area:'', crop:'', yield:10, units:'bunches'};
const newDate = this.startDate;
newReport.area = this.newArea;
newReport.crop = this.newCrop;
newReport.date = newDate;
let newR = JSON.stringify(newReport);
let same = 0;
console.log(newR);
for(const report in this.reports){
let r = JSON.stringify(this.reports[report]);
console.log(r);
if(r == newR){
same = 1;
}
}
if(same == 0){
this.reports.push(newReport);
}
this.state = newState;
},
deleteReport: function(reportIndex){
this.reports.splice(reportIndex, 1)
}
}
});
</script>
</body>
</html>
Loading