save watch based on current filter

src/components/FilterTags.svelte

@@ -5,6 +5,7 @@ import { createEventDispatcher } from 'svelte'
 import { flip } from 'svelte/animate';
 import { quintInOut } from 'svelte/easing';
 import { crossfade } from 'svelte/transition';
+import { create } from '../data/watch'
 
 export let filter = {}
 
@@ -26,6 +27,10 @@ const [send, receive] = crossfade({
   }
 });
 
+function createAlert() {
+  create(filter)
+}
+
 $: filterKeys = Object.keys(filter)
 $: activeFilterKeys = filterKeys.filter(key => filter[key].active)
 $: filtersAreActive = Object.values(filter).some(isActive)
@@ -39,6 +44,7 @@ div {
 
 {#if filtersAreActive }
   <div class="row d-flex align-items-center">
+    <button class="btn btn-secondary btn-sm" on:click={createAlert}>Create Alert</button>
     <div class="col-auto">
       Results filtered for:
     </div>

src/components/RequestFilters.svelte

@@ -48,18 +48,18 @@ function onEventChange(domEvent) {
 }
 
 function onDestinationInput(event) {
-  const query = event.detail.description
+  const query = event.detail
   setFilters({
-    destination: query,
+    destination: JSON.stringify(query),
     event: false,
   })
 
   filteredRequestsByDestination(query)
 }
 
 function onOriginInput(event) {
-  const query = event.detail.description
-  setFilters({ origin: query })
+  const query = event.detail
+  setFilters({ origin: JSON.stringify(query) })
 
   filteredRequestsByOrigin(query)
 }

src/data/filtering.js

@@ -89,3 +89,41 @@ export function setFilters(updates) {
 export function stringIsIn(needle, haystack) {
   return (haystack || '').toLowerCase().indexOf(String(needle).toLowerCase()) >= 0
 }
+
+/**
+ * Whether two locations are near each other.
+ * Near is defined as in the same country or within a predefined distance of each other.
+ * The distance of 1000 km should always be the same as the number defined in wecarry-api.
+ * 
+ * @param {Object} loc1
+ * @param {Object} loc2
+ * @return {boolean}
+ */
+export function near(loc1, loc2) {
+  if (loc1.country === loc2.country) {
+    return true
+  }
+  if (distance(loc1.latitude, loc1.longitude, loc2.latitude, loc2.longitude) < 1000) {
+    return true
+  }
+  return false
+}
+
+/**
+ * Haversine formula implementation derived from Stack Overflow answer:
+ * https://stackoverflow.com/a/21623206
+
+ * @param {number} lat1 
+ * @param {number} lon1 
+ * @param {number} lat2 
+ * @param {number} lon2 
+ */
+function distance(lat1, lon1, lat2, lon2) {
+  var p = 0.017453292519943295;    // Math.PI / 180
+  var c = Math.cos;
+  var a = 0.5 - c((lat2 - lat1) * p)/2 + 
+          c(lat1 * p) * c(lat2 * p) * 
+          (1 - c((lon2 - lon1) * p))/2;
+
+  return 12742 * Math.asin(Math.sqrt(a)); // 2 * R; R = 6371 km
+}

src/data/gqlQueries.js

@@ -195,6 +195,26 @@ export async function joinEvent(eventId) {
   return response.createMeetingParticipant.meeting
 }
 
+export async function createWatch(filters) {
+  console.log(filters)
+  const response = await gql(`
+    mutation {
+      watch:createWatch(input: {
+        name: "",
+        location: ${formatLocationForGql(filters.destination.obj)},
+        meetingID: ${json(defaultFor(filters.event.value, null))},
+        searchText: ${json(defaultFor(filters.search.value, null))},
+        size: ${defaultFor(filters.size.value && filters.size.value.toUpperCase(),"XLARGE")},
+      })
+      {
+        id
+      }
+    }
+  `)
+
+  return response.watch.id
+}
+
 
 const defaultFor = function(value, defaultValue) {
   return (value === undefined) ? defaultValue : value

src/data/requestFiltering.js

@@ -1,4 +1,4 @@
-import { stringIsIn } from './filtering'
+import { stringIsIn, near } from './filtering'
 import { includedInSizeSelection } from './sizes'
 import { updateQueryString } from './url'
 
@@ -17,6 +17,9 @@ export function clearRequestFilter() {
 
 /** NOTE: All values used here should be cleared by `clearRequestFilter()` */
 export function populateRequestFilterFrom(queryStringData, me, events) {
+  let dest = queryStringData.destination && JSON.parse(queryStringData.destination)
+  let orig = queryStringData.origin && JSON.parse(queryStringData.origin)
+
   return {
     creator: {
       active: !! queryStringData.creator,
@@ -26,9 +29,10 @@ export function populateRequestFilterFrom(queryStringData, me, events) {
     },
     destination: {
       active: !! queryStringData.destination,
-      label: 'To: ' + queryStringData.destination,
-      isMatch: request => stringIsIn(queryStringData.destination, request.destination.description),
-      value: queryStringData.destination,
+      label: dest && 'To: ' + dest.description,
+      isMatch: request => near(dest, request.destination),
+      value: dest && dest.description,
+      obj: dest
     },
     event: {
       active: !! queryStringData.event,
@@ -38,9 +42,9 @@ export function populateRequestFilterFrom(queryStringData, me, events) {
     },
     origin: {
       active: !! queryStringData.origin,
-      label: 'From: ' + queryStringData.origin,
-      isMatch: request => !request.origin || stringIsIn(queryStringData.origin, request.origin.description),
-      value: queryStringData.origin,
+      label: orig && 'From: ' + orig.description,
+      isMatch: request => !request.origin || near(orig, request.origin),
+      value: orig && orig.description,
     },
     search: {
       active: !! queryStringData.search,

src/data/watch.js

@@ -0,0 +1,5 @@
+import { createWatch } from './gqlQueries'
+
+export function create(filters) {
+    createWatch(filters)
+}