Add a searchable dropdown of clinic names to postcode form

uses select2 for the dropdown and a cobrand call to fetch the list of
report titles as the clinic names.
Relies on a redirect in httpd.conf to make the non JS version work.

Still leaves the postcode search in place as select2 won't accept custom
terms if you base it on a select box, which we want to do so it works if
JavaScript is disabled

Fixes #723

2 files changed, 54 insertions, 0 deletions

diff --git a/templates/web/zerotb/around/postcode_form.html b/templates/web/zerotb/around/postcode_form.html
new file mode 100644
index 000000000..484f41c5c
--- /dev/null
+++ b/templates/web/zerotb/around/postcode_form.html
@@ -0,0 +1,36 @@
+<div id="front-main">
+    <div id="front-main-container">
+        [% INCLUDE 'around/intro.html' %]
+
+        [%
+            question = c.cobrand.enter_postcode_text || loc('Enter a nearby street name and area');
+        %]
+
+        <div id="postcodeForm">
+            <form action="[% c.uri_for('/around') %]" method="get" name="postcodeForm">
+                <label for="pc">[% question %]:</label>
+                <div>
+                    <input type="text" name="pc" value="[% pc | html %]" id="pc" size="10" maxlength="200" placeholder="[% tprintf(loc('e.g. ‘%s’ or ‘%s’'), c.cobrand.example_places) %]">
+                    <input type="submit" value="[% loc('Go') %]" id="sub">
+                </div>
+
+                [% IF partial_token %]
+                    <input type="hidden" name="partial" value="[% partial_token.token %]">
+                [% END %]
+
+            </form>
+            <form action="[% c.uri_for( '/report' ) %]/" method="get" name="clinicForm">
+                <label for="clinic">[% loc('... or select a clinic by name' ) %]</label>
+                <div>
+                    <select id="clinic" name="clinic">
+                        [% FOR clinic IN c.cobrand.get_clinic_list %]
+                        <option value="[% clinic.id %]">[% clinic.title %]</option>
+                        [% END %]
+                    </select>
+                    <input class="green-btn" type="submit" value="[% loc('Go') %]" id="show_report">
+                </div>
+            </form>
+        </div>
+
+    </div>
+</div>
diff --git a/templates/web/zerotb/header_extra.html b/templates/web/zerotb/header_extra.html
new file mode 100644
index 000000000..23f061799
--- /dev/null
+++ b/templates/web/zerotb/header_extra.html
@@ -0,0 +1,18 @@
+<link rel="stylesheet" href="[% start %][% version('/js/select2/select2.css') %]" />
+<script type="text/javascript" src="[% start %][% version('/js/select2/select2.min.js') %]"></script>
+
+<script>
+$(document).ready(function() { 
+    $("#clinic").select2({
+        placeholder: '[% loc('Enter a clinic name') %]',
+        allowClear: true,
+    }); 
+    $('#show_report').click(
+        function() { 
+            var report = $('#clinic').select2('val');
+            document.location = '[% c.uri_for( '/report' ) %]/' + report;
+            return false;
+        }
+    );
+});
+</script>