-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathinats.html
197 lines (176 loc) · 7.3 KB
/
inats.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="css/main.css" rel="stylesheet" />
</head>
<body>
<form id="myForm">
<table>
<tr>
<td colspan="3" align="center">
Main CSV file (iNats format):<br />
<input type="file" id="csvFile" accept=".csv" /><br />
</td>
</tr>
<tr>
<td>
</td>
<td align="center">
CSV file to compare (iNats format):<br />
<input type="file" id="csvFileCompare" accept=".csv" /><br />
</td>
<td align="center">
Checklist CSV file (Checklist format):<br />
<input type="file" id="csvFileChecklist" accept=".csv" /><br />
</td>
</tr>
<tr>
<td>
Show:
<select name="showTime" id="showTime">
<option value="0">observation time</option>
<option value="1">upload time</option>
</select>
</td>
<td align="center">
Filter:
<select name="months" id="monthsSelect">
<option value="-1">all months</option>
<option value="0">Jan</option>
<option value="1">Feb</option>
<option value="2">Mar</option>
<option value="3">Apr</option>
<option value="4">May</option>
<option value="5">Jun</option>
<option value="6">Jul</option>
<option value="7">Aug</option>
<option value="8">Sep</option>
<option value="9">Oct</option>
<option value="10">Nov</option>
<option value="11">Dec</option>
</select>
</td>
<td>
</td>
</tr>
<tr>
<td align="center">
<input type="submit" name="main" value="New species by year report" />
</td>
<td align="center">
<input type="submit" name="compare" value="Comparison report" />
</td>
<td align="center">
<input type="submit" name="checklist" value="Checklist report" /><br />
<span id="checklistDownload"></span>
</td>
</tr>
<tr id="description_tr">
<td>
Species are sorted by first observation and grouped by year of the first observation.<br /><br />
Shows the progress in discovering new species over the years.
</td>
<td>
Species are sorted by number of observations in Main CSV, the last observation from compared CSV is shown (or line is greyed out). Followed by list of species available only in Compared CSV.<br /><br />
Shows whether species from Main CSV were already covered with compared CSV. (e.g. for finding species in the region (Main CSV), which are not yet found by individual (Compared CSV))
</td>
<td>
Species are listed in the order of first appearance in checklist, the last observation from Main CSV is shown (or line is greyed out).<br /><br />
Shows wether species from Compared CSV were already covered with Main CSV. (e.g. for finding species in the project (Checklist CSV), which lacks observations (Main CSV))
</td>
</tr>
</table>
</form>
<div id="instruction">
<h3>Instruction for iNats format:</h3>
Any options here, then press red-circled link.<br />
<img width=600 src="img/first.jpeg" /><br /><br />
Green-circled options are required for parsing (should be checked by default).<br />
<img width=600 src="img/second.png" /><br /><br />
Wait for archive to be available.<br />
Download archive<br />
Unpack it...<br /><br />
Provide results CSV file to the form as Main CSV or Comparison CSV<br /><br />
<h3>Instruction for Checklist format:</h3>
This is any CSV file, with one of the columns headers containing "scientific_name" and values are latin taxa names with iNats compatible names.<br />
iNats CSV files are compatible with Checklist format, but only single column is used from them.
</div>
<div id="detail_div"></div>
<table id="table_years"></table>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script type="text/javascript" src="js/csv_to_array.js"></script>
<script type="text/javascript" src="js/details_overlay.js"></script>
<script type="text/javascript" src="js/lists_parsing.js"></script>
<script type="text/javascript" src="js/storage_indexeddb_queries.js"></script>
<script type="text/javascript" src="js/table_compare_with_checklist.js"></script>
<script type="text/javascript" src="js/table_compare_with_list.js"></script>
<script type="text/javascript" src="js/table_years.js"></script>
<script type="text/javascript" src="js/utils.js"></script>
<script type="text/javascript" src="js/utils_category.js"></script>
<script type="text/javascript" src="js/utils_charts.js"></script>
<script type="text/javascript" src="js/utils_stats.js"></script>
<script type="text/javascript" src="js/utils_tables.js"></script>
<script>
const myForm = document.getElementById("myForm");
const csvFile = document.getElementById("csvFile");
const csvFileCompare = document.getElementById("csvFileCompare");
const monthsFilter = document.getElementById("monthsSelect");
const showTimeSelect = document.getElementById("showTime");
myForm.addEventListener("submit", function (e) {
e.preventDefault();
const button_name = e.submitter.getAttribute("name");
const input = csvFile.files[0];
const compare_input = csvFileCompare.files[0];
const checklist_input = csvFileChecklist.files[0];
const reader = new FileReader();
reader.onload = function (event) {
const string = event.target.result;
const observations = CSV2Observations(string);
const speciesMap = Observations2SpeciesMap(observations);
if( button_name == "main" )
{
generateYearsTable( speciesMap, showTimeSelect.value == 1 );
}
else if( button_name == "compare" )
{
const reader = new FileReader();
reader.onload = function (compare_event) {
const compare_string_csv = compare_event.target.result;
const compare_observations = CSV2Observations(compare_string_csv);
const compare_speciesMap = Observations2SpeciesMap(compare_observations);
let filter = monthsFilter.value;
generateSpeciesSummaryTable( speciesMap, compare_speciesMap, filter );
};
reader.readAsText(compare_input);
}
else if( button_name == "checklist" )
{
const reader = new FileReader();
reader.onload = function (checklist_event) {
const checklist_string_csv = checklist_event.target.result;
const checklistMap = CSV2Checklist(checklist_string_csv);
generateChecklistTable( speciesMap, checklistMap ).then((downloadArray) =>
{
const csvString = ArrayToCSV(downloadArray);
var blob = new Blob([csvString], { type: 'text/csv;charset=utf-8;' });
const downloadSpan = document.getElementById("checklistDownload");
var downloadA = document.createElement("a");
var url = URL.createObjectURL(blob);
downloadA.setAttribute("href", url);
downloadA.setAttribute("download", 'checklist.csv');
downloadA.innerHTML = 'download';
downloadSpan.innerHTML = '';
downloadSpan.appendChild(downloadA);
});
};
reader.readAsText(checklist_input);
}
document.getElementById("instruction").innerHTML = '';
document.getElementById("description_tr").innerHTML = '';
};
reader.readAsText(input);
});
</script>
</body>
</html>