@@ -278,27 +296,34 @@ class Toolbar extends React.Component {
{narrativesExist
? this.renderToolbarTab(
- narrativesIdx,
- panels.narratives.label,
- panels.narratives.icon
- )
+ narrativesIdx,
+ panels.narratives.label,
+ panels.narratives.icon
+ )
: null}
{features.USE_CATEGORIES
? this.renderToolbarCategoryTabs(categoryIdxs)
: null}
{features.USE_ASSOCIATIONS
? this.renderToolbarTab(
- filtersIdx,
- panels.filters.label,
- panels.filters.icon
- )
+ filtersIdx,
+ panels.filters.label,
+ panels.filters.icon
+ )
: null}
{features.USE_SHAPES
? this.renderToolbarTab(
- shapesIdx,
- panels.shapes.label,
- panels.shapes.icon
- )
+ shapesIdx,
+ panels.shapes.label,
+ panels.shapes.icon
+ )
+ : null}
+ {features.USE_DOWNLOAD
+ ? this.renderToolbarTab(
+ downloadIdx,
+ panels.download.label,
+ panels.download.icon
+ )
: null}
{features.USE_FULLSCREEN && (
diff --git a/src/components/controls/DownloadButton.js b/src/components/controls/DownloadButton.js
new file mode 100644
index 0000000..27ba045
--- /dev/null
+++ b/src/components/controls/DownloadButton.js
@@ -0,0 +1,84 @@
+import React from "react";
+import copy from "../../common/data/copy.json";
+import { parse } from 'json2csv'
+import { downloadAsFile } from "../../common/utilities"
+
+export class DownloadButton extends React.Component {
+ onDownload(format, domain) {
+ let filename = `ukr-civharm-${this.datetimeToDateString(new Date())}`;
+ if (format === "csv") {
+ let outputData = this.getCsvData(domain)
+ downloadAsFile(`${filename}.csv`, outputData);
+ } else if (format === "json") {
+ let outputData = this.getJsonData(domain)
+ downloadAsFile(`${filename}.json`, outputData);
+ }
+ }
+ getCsvData(domain) {
+ const { events, sources } = domain;
+ const exportEvents = events.map(e => {
+ return {
+ id: e.civId,
+ date: this.datetimeToDateString(e.datetime),
+ latitude: e.latitude,
+ longitude: e.longitude,
+ location: e.location,
+ description: e.description,
+ sources: e.sources.map(s => sources[s].paths[0]).join(","),
+ associations: e.associations.map(a => a.filter_paths.join("=")).join(",")
+ }
+ })
+ return parse(exportEvents, { flatten: true })
+ }
+ getJsonData(domain) {
+ const { events, sources } = domain;
+ const exportEvents = events.map(e => {
+ return {
+ id: e.civId,
+ date: this.datetimeToDateString(e.datetime),
+ latitude: e.latitude,
+ longitude: e.longitude,
+ location: e.location,
+ description: e.description,
+ sources: e.sources.map(id => {
+ const s = sources[id]
+ return {
+ id,
+ path: s.paths[0],
+ description: s.description
+ }
+ }),
+ filters: e.associations.map(a => {
+ return {
+ key: a.filter_paths[0],
+ value: a.filter_paths[1]
+ }
+ })
+ }
+ });
+ return JSON.stringify(exportEvents);
+ }
+ datetimeToDateString(datetime) {
+ try {
+ return datetime.toISOString().split("T")[0]
+ } catch (_) { }
+ return "";
+ }
+ render() {
+ const { language, domain, format } = this.props;
+ const textByFormat = copy[language].toolbar.download.panel.formats[format]
+ return (
+
+ this.onDownload(format, domain)}
+ >
+ {"download"}
+ {textByFormat.label}
+
+ {textByFormat.description}
+
+ );
+ }
+}
diff --git a/src/components/controls/DownloadPanel.js b/src/components/controls/DownloadPanel.js
new file mode 100644
index 0000000..57aab67
--- /dev/null
+++ b/src/components/controls/DownloadPanel.js
@@ -0,0 +1,21 @@
+import React from "react";
+import { DownloadButton } from "./DownloadButton";
+
+const DownloadPanel = ({
+ language,
+ title,
+ description,
+ domain
+}) => {
+ return (
+
+
{title}
+
{description}
+
+
+
+