diff --git a/VIPSWeb/static/js/util.js b/VIPSWeb/static/js/util.js index 70a51b9df778d6ce2f90c2fa0c18a5a9e98b3f78..db71bdd8b1ad1c0144b30126bfb789592e4aab10 100644 --- a/VIPSWeb/static/js/util.js +++ b/VIPSWeb/static/js/util.js @@ -60,6 +60,11 @@ function getStandardFormattedTimestamp(timestamp) return moment(timestamp).format(); } +function getSimpleFormattedTimestamp(timestamp) +{ + return moment(timestamp).format("YYYY-MM-DD HH:mm"); +} + function getStandardFormattedDate(timestamp) { return moment(timestamp).format("YYYY-MM-DD"); diff --git a/observations/templates/observations/index.html b/observations/templates/observations/index.html index 6031e3b2145bfe49835577a3a4313c749531172d..5076b6fdfa821ed23e51558fb5c2b25103f81bb9 100644 --- a/observations/templates/observations/index.html +++ b/observations/templates/observations/index.html @@ -26,7 +26,17 @@ {% block content %} <h1>{% trans "Observations" %}</h1> - + <div class="row"> + <div class="col-xs-3"> + <div class="form-group"> + <select id="pestFilterList" class="form-control" onchange="filterOnPest(this)"> + <option value="-1">{% trans "All pests" %}</option> + </select> + </div> + </div> + <div class="col-xs-9"> + </div> + </div> <table class="table"> <thead> <tr> @@ -47,26 +57,73 @@ <script type="text/javascript" src="{% static "js/util.js" %}"></script> <script type="text/javascript"> var allObservations = []; + var allPests = {}; $(document).ready(function() { $.getJSON("/vipslogicproxy/rest/observation/broadcast/list/" + settings.vipsOrganizationId, function( json ) { allObservations = json; allObservations.sort(sortObservationMessages).reverse(); - var tableHTML = ""; - for(var i in allObservations){ - var observation = allObservations[i]; - tableHTML += [ - "<tr>", - "<td>",getStandardFormattedTimestamp(observation.timeOfObservation),"</td>", - "<td>", getLocalizedOrganismName(observation.organism)," <i>(", observation.organism.latinName, ")</i></td>", - "<td>", getLocalizedOrganismName(observation.cropOrganism) ," <i>(", observation.cropOrganism.latinName, ")</i></td>", - "<td>", observation.observationHeading, "</td>", - "<td><a href='/observations/", observation.observationId, "'>{% trans "View details" %}</a></td>", - "</tr>" - ].join(""); + for(var i in allObservations) + { + allPests[allObservations[i].organism.organismId] = allObservations[i].organism; } - document.getElementById("observationList").innerHTML = tableHTML; + renderPestFilterList(); + renderObservations(allObservations); }); - }); + + + function renderObservations(observations) + { + var tableHTML = ""; + for(var i in observations){ + var observation = observations[i]; + tableHTML += [ + "<tr>", + "<td>",getSimpleFormattedTimestamp(observation.timeOfObservation),"</td>", + "<td>", getLocalizedOrganismName(observation.organism)," <i>(", observation.organism.latinName, ")</i></td>", + "<td>", getLocalizedOrganismName(observation.cropOrganism) ," <i>(", observation.cropOrganism.latinName, ")</i></td>", + "<td>", observation.observationHeading, "</td>", + "<td><a href='/observations/", observation.observationId, "'>{% trans "View details" %}</a></td>", + "</tr>" + ].join(""); + } + document.getElementById("observationList").innerHTML = tableHTML; + } + + function renderPestFilterList() + { + var pestFilterList = document.getElementById("pestFilterList"); + pestFilterList.options.length = 1; + for(var i in allPests) + { + var pestOpt = new Option(getLocalizedOrganismName(allPests[i]), allPests[i].organismId); + pestFilterList.options[pestFilterList.options.length] = pestOpt; + } + + } + + function filterOnPest(pestFilterList) + { + var selectedPestOrganismId = parseInt(pestFilterList.options[pestFilterList.options.selectedIndex].value); + + + var filteredObservations = []; + if(selectedPestOrganismId == -1) + { + filteredObservations = allObservations; + } + else + { + for(var i in allObservations) + { + var obs = allObservations[i]; + if(obs.organism.organismId == selectedPestOrganismId) + { + filteredObservations.push(obs); + } + } + } + renderObservations(filteredObservations); + } </script> {% endblock %} \ No newline at end of file