From 9eaeb02efce8b0e50deaaa719a9a9ec38f732d58 Mon Sep 17 00:00:00 2001
From: gaazzopa <gabriella.azzopardi@cern.ch>
Date: Tue, 13 Jul 2021 22:19:33 +0200
Subject: [PATCH] Added foundations for location selection

---
 cara/apps/calculator/static/js/form.js        | 114 ++++++++++++++++++
 .../templates/calculator.form.html.j2         |   9 ++
 2 files changed, 123 insertions(+)

diff --git a/cara/apps/calculator/static/js/form.js b/cara/apps/calculator/static/js/form.js
index b15f2fc6..e51edafd 100644
--- a/cara/apps/calculator/static/js/form.js
+++ b/cara/apps/calculator/static/js/form.js
@@ -531,8 +531,122 @@ $(document).ready(function () {
   $(".start_time[data-lunch-for]").each(function() {validateLunchBreak($(this).data('time-group'))});
   $("[data-lunch-for]").change(function() {validateLunchBreak($(this).data('time-group'))});
   $("[data-lunch-break]").change(function() {validateLunchBreak($(this).data('lunch-break'))});
+
+  $("#location_select").select2({
+    ajax: {
+      url: "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/findAddressCandidates",
+      dataType: 'json',
+      delay: 250,
+      data: function (params) {
+        return {
+          SingleLine: params.term, // search term
+          f: 'json',
+          page: params.page,
+        };
+      },
+      processResults: function (data, params) {
+        // parse the results into the format expected by Select2
+        // since we are using custom formatting functions we do not need to
+        // alter the remote JSON data, except to indicate that infinite
+        // scrolling can be used
+        params.page = params.page || 1;
+
+        return {
+          results: data.candidates,
+          pagination: {
+            more: (params.page * 30) < data.total_count
+          }
+        };
+      },
+      cache: true
+    },
+    placeholder: 'Search for a location',
+    minimumInputLength: 1,
+    templateResult: formatlocation,
+    templateSelection: formatLocationSelection
+  });
+
+  //TODO: remove
+  // $("#location_select").select2({
+  //   ajax: {
+  //     url: "https://api.github.com/search/repositories",
+  //     dataType: 'json',
+  //     delay: 250,
+  //     data: function (params) {
+  //       return {
+  //         q: params.term, // search term
+  //         page: params.page
+  //       };
+  //     },
+  //     processResults: function (data, params) {
+  //       // parse the results into the format expected by Select2
+  //       // since we are using custom formatting functions we do not need to
+  //       // alter the remote JSON data, except to indicate that infinite
+  //       // scrolling can be used
+  //       params.page = params.page || 1;
+
+  //       return {
+  //         results: data.items,
+  //         pagination: {
+  //           more: (params.page * 30) < data.total_count
+  //         }
+  //       };
+  //     },
+  //     cache: true
+  //   },
+  //   placeholder: 'Search for a repository',
+  //   minimumInputLength: 1,
+  //   templateResult: formatRepo,
+  //   templateSelection: formatRepoSelection
+  // });
 });
 
+function formatlocation (location) {
+  if (location.loading) {
+    return location.text;
+  }
+
+  var $container = $(
+    "<div class='select2-result-location clearfix'>" +
+      "<div class='select2-result-location__meta'>" +
+        "<div class='select2-result-location__title'></div>" +
+      "</div>" +
+    "</div>"
+  );
+
+  $container.find(".select2-result-location__title").text(location.address);
+
+  return $container;
+}
+
+function formatLocationSelection (location) {
+  return location.address || location.text;
+}
+
+//TODO: remove
+function formatRepo (repo) {
+  if (repo.loading) {
+    return repo.text;
+  }
+
+  var $container = $(
+    "<div class='select2-result-location clearfix'>" +
+      "<div class='select2-result-location__meta'>" +
+        "<div class='select2-result-location__title'></div>" +
+      "</div>" +
+    "</div>"
+  );
+
+  $container.find(".select2-result-location__title").text(repo.full_name);
+
+  return $container;
+}
+
+//TODO: remove
+function formatRepoSelection (repo) {
+  return repo.full_name || repo.text;
+}
+
 /* -------Debugging------- */
 function debug_submit(form) {
 
diff --git a/cara/apps/calculator/templates/calculator.form.html.j2 b/cara/apps/calculator/templates/calculator.form.html.j2
index 712432fb..51e4a238 100644
--- a/cara/apps/calculator/templates/calculator.form.html.j2
+++ b/cara/apps/calculator/templates/calculator.form.html.j2
@@ -6,11 +6,13 @@
 {% block extra_headers %}
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ==" crossorigin="anonymous">
     <link rel="stylesheet" href="{{ calculator_prefix }}/static/css/form.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css"/>
 {% endblock extra_headers %}
 
 {% block body_scripts %}
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous"></script>
     <script src="{{ calculator_prefix }}/static/js/form.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
 {% endblock body_scripts %}
 
 
@@ -102,6 +104,13 @@ v{{ calculator_version }} <span style="float:right; font-weight:bold">Please sen
       <label for="heating_no">No</label>&nbsp;&nbsp;
     <input type="radio" id="heating_yes" name="room_heating_option" value=1>
       <label for="heating_yes">Yes</label>&nbsp;&nbsp;
+    
+    <div class="row">
+      <label class="col-xl-3 col-lg-4 col-sm-3 col-form-label">Location:</label>
+        <select id="location_select" class="col-xl-5 col-lg-7 col-sm-7 col-7" name="location" required>
+          <!-- <option value="Geneva" selected="selected">Geneva</option>   -->
+        </select>
+    </div>
 
     <hr width="80%">