Allow user to download selected task as GPX (#67)

Co-authored-by: andrewcp54 <[email protected]>
KaartGroup · Jun 16, 2021 · 8dd908e · 8dd908e
1 parent 04c6c57
commit 8dd908e
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 2 deletions.
diff --git a/frontend/src/components/taskSelection/action.js b/frontend/src/components/taskSelection/action.js
@@ -26,6 +26,7 @@ import {
   CompletionTabForValidation,
   SidebarToggle,
   ReopenEditor,
+  DownloadTaskAsGPX,
 } from './actionSidebars';
 import { fetchLocalJSONAPI } from '../../network/genericJSONRequest';
 import { MultipleTaskHistoriesAccordion } from './multipleTaskHistories';
@@ -284,11 +285,12 @@ export function TaskMapAction({ project, projectIsReady, tasks, activeTasks, act
                         editor={activeEditor}
                         callEditor={callEditor}
                       />
+                      <DownloadTaskAsGPX project={project} tasksIds={tasksIds} />
                       {editor === 'ID' && (
                         <Popup
                           modal
                           trigger={(open) => (
-                            <div className="w-50 cf fl tc pt4">
+                            <div className="w-33 cf fl tc pt4">
                               <Button className="blue-dark bg-white dib">
                                 <FormattedMessage {...messages.tasksMap} />
                               </Button>

diff --git a/frontend/src/components/taskSelection/actionSidebars.js b/frontend/src/components/taskSelection/actionSidebars.js
@@ -21,6 +21,7 @@ import {
   PlusIcon,
 } from '../svgIcons';
 import { getEditors } from '../../utils/editorsList';
+import { getTaskGpxUrl } from '../../utils/openEditor';
 import { htmlFromMarkdown } from '../../utils/htmlFromMarkdown';
 import { getTaskContributors } from '../../utils/getTaskContributors';
 import { pushToLocalJSONAPI, fetchLocalJSONAPI } from '../../network/genericJSONRequest';
@@ -568,7 +569,7 @@ export function ReopenEditor({ project, action, editor, callEditor }: Object) {
   );
 
   return (
-    <div className="dib w-50 fl tc pt3 pb2 pr3">
+    <div className="dib w-33 fl tc pt3 pb2 pr3">
       <span className="db pb2 ttu blue-grey f6 fw5">
         <FormattedMessage {...messages.reloadEditor} />
       </span>
@@ -588,6 +589,20 @@ export function ReopenEditor({ project, action, editor, callEditor }: Object) {
   );
 }
 
+export function DownloadTaskAsGPX({ project, tasksIds }: Object) {
+  var url = getTaskGpxUrl(project.projectId, tasksIds) + '&as_file=true';
+  return (
+    <div className="dib w-33 cf fl tc pt4">
+      <span className="db pb2 ttu blue-grey f6 fw5">
+        <a href={url}>
+          <FormattedMessage {...messages.download} />
+        </a>
+        <FormattedMessage {...messages.asGPX} />
+      </span>
+    </div>
+  );
+}
+
 export function SidebarToggle({ setShowSidebar }: Object) {
   const iDContext = useSelector((state) => state.editor.context);
   return (

diff --git a/frontend/src/components/taskSelection/messages.js b/frontend/src/components/taskSelection/messages.js
@@ -127,6 +127,14 @@ export default defineMessages({
     id: 'project.editor.open_editor',
     defaultMessage: 'Open editor',
   },
+  download: {
+    id: 'project.download.download',
+    defaultMessage: 'Download',
+  },
+  asGPX: {
+    id: 'project.download.asGPX',
+    defaultMessage: ' task as GPX',
+  },
   showSidebar: {
     id: 'project.sidebar.show',
     defaultMessage: 'Show sidebar',