From 7a672bca878d9a6f57f20788508acf1c1a07daa2 Mon Sep 17 00:00:00 2001 From: vjrj Date: Wed, 20 Dec 2017 12:59:25 +0100 Subject: [PATCH] Added confirm --- .../api/ActiveFires/server/publications.js | 10 +- .../ui/components/Maps/SubsUnion/SubsUnion.js | 4 +- imports/ui/components/Prompt/Confirm.js | 11 ++ imports/ui/components/Prompt/Prompt.js | 111 ++++++++++++++++++ .../ui/pages/Subscriptions/Subscriptions.js | 43 ++++--- package-lock.json | 5 + package.json | 1 + 7 files changed, 159 insertions(+), 26 deletions(-) create mode 100644 imports/ui/components/Prompt/Confirm.js create mode 100644 imports/ui/components/Prompt/Prompt.js diff --git a/imports/api/ActiveFires/server/publications.js b/imports/api/ActiveFires/server/publications.js index ac2ff81..5bdfcce 100644 --- a/imports/api/ActiveFires/server/publications.js +++ b/imports/api/ActiveFires/server/publications.js @@ -56,7 +56,7 @@ const activefires = (zoom, lat, lng, height, width) => { const distUnt = resolution * Math.max(height, width); const distance = Math.trunc(distUnt); // console.log(`so ${height}x${width} gives ${Math.trunc(resolution*height/1000)} x ${Math.trunc(resolution*width/1000)} km, so looking in ${distance}`); - console.log(`So ${height}x${width} gives ${Math.trunc(resolution)} of resolution, so looking in ${Math.trunc(distance / 1000)}km`); + // console.log(`So ${height}x${width} gives ${Math.trunc(resolution)} of resolution, so looking in ${Math.trunc(distance / 1000)}km`); const fires = ActiveFires.find({ ourid: { @@ -76,7 +76,7 @@ const activefires = (zoom, lat, lng, height, width) => { scan: 1 } }); - console.log(`Fires total: ${fires.count()}`); + // console.log(`Fires total: ${fires.count()}`); return fires; }; @@ -85,7 +85,7 @@ Meteor.publish('allActiveFires', function allActive() { // latitude -90 and 90 and the longitude between -180 and 180 const { latitude, longitude } = localize().location; - console.log(`${latitude}, ${longitude}`); + // console.log(`${latitude}, ${longitude}`); check(latitude, NumberBetween(-90, 90)); check(longitude, NumberBetween(-180, 180)); // https://docs.meteor.com/api/collections.html#Mongo-Collection-find @@ -117,10 +117,10 @@ Meteor.publish('activefiresmyloc', function activeInMyLoc(zoom, lat, lng, height check(lng, NullOr(Number)); check(height, NullOr(Number)); check(width, NullOr(Number)); - console.log(`Check active fires in ${lat},${lng} with zoom ${zoom} pixels in ${height}x${width} map`); + // console.log(`Check active fires in ${lat},${lng} with zoom ${zoom} pixels in ${height}x${width} map`); if (lat === null || lng === null) { const location = localize(); - console.log(`${location.latitude}, ${location.longitude}`); + // console.log(`${location.latitude}, ${location.longitude}`); return activefires(zoom, location.latitude, location.longitude, height, width); } return activefires(zoom, lat, lng, height, width); diff --git a/imports/ui/components/Maps/SubsUnion/SubsUnion.js b/imports/ui/components/Maps/SubsUnion/SubsUnion.js index 90b5f64..1088273 100644 --- a/imports/ui/components/Maps/SubsUnion/SubsUnion.js +++ b/imports/ui/components/Maps/SubsUnion/SubsUnion.js @@ -38,7 +38,7 @@ const subsUnion = (union, options) => { const fillColor = options.fillColor || 'green'; const opacity = options.options || 0.1; - if (options.subs.length > 0) { + if (options.subs) { const lmap = options.map.leafletElement; // http://leafletjs.com/reference-1.2.0.html#layergroup // FeatureGroup has getBounds @@ -49,7 +49,7 @@ const subsUnion = (union, options) => { } union = null; - if (options.show) { + if (options.subs.length > 0 && options.show) { // http://leafletjs.com/reference-1.2.0.html#path const copts = { parts: 144 diff --git a/imports/ui/components/Prompt/Confirm.js b/imports/ui/components/Prompt/Confirm.js new file mode 100644 index 0000000..f19e8a4 --- /dev/null +++ b/imports/ui/components/Prompt/Confirm.js @@ -0,0 +1,11 @@ +import { createConfirmation } from 'react-confirm'; +import Prompt from './Prompt'; + +// create confirm function +const confirm = createConfirmation(Prompt); + +// This is optional. But I recommend to define your confirm function easy to call. +export default function (confirmation, options = {}) { + // You can pass whatever you want to the component. These arguments will be your Component's props + return confirm({ confirmation, ...options }); +} diff --git a/imports/ui/components/Prompt/Prompt.js b/imports/ui/components/Prompt/Prompt.js new file mode 100644 index 0000000..1b39ebb --- /dev/null +++ b/imports/ui/components/Prompt/Prompt.js @@ -0,0 +1,111 @@ +/* eslint-disable react/jsx-indent-props */ +/* eslint-disable react/jsx-indent */ +/* eslint-disable import/no-absolute-path */ + +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { Modal, Button } from 'react-bootstrap'; +import { confirmable } from 'react-confirm'; + +class Prompt extends Component { + // constructor(props) { + /* super(props); + * this.state = { + * open: true + * }; + } + + componentDidMount() { + * console.log(this.prompt); + * this.setState({ open: true }); + } + */ + + render2() { + const { + show, + proceed, + dismiss, + cancel, + confirmation, + okBtn, + cancelBtn + } = this.props; + return ( +
+
+
+
+
Modal title
+ +
+
+

Modal body text goes here.

+
+
+ + +
+
+
+
+ ); + } + render() { + const { + show, + proceed, + dismiss, + cancel, + confirmation, + okBtn, + cancelBtn, + enableEscape = true + } = this.props; + return ( +
+ + + + + +

{confirmation}

+ + + + + + +
+ ); + } +} + +Prompt.propTypes = { + show: PropTypes.bool, // from confirmable. indicates if the dialog is shown or not. + proceed: PropTypes.func, // from confirmable. call to close the dialog with promise resolved. + cancel: PropTypes.func, // from confirmable. call to close the dialog with promise rejected. + dismiss: PropTypes.func, // from confirmable. call to only close the dialog. + confirmation: PropTypes.string, // arguments of your confirm function + okBtn: PropTypes.string.isRequired, + cancelBtn: PropTypes.string.isRequired, + enableEscape: PropTypes.bool +}; + +Prompt.defaultProps = { +}; + +export default confirmable(Prompt); diff --git a/imports/ui/pages/Subscriptions/Subscriptions.js b/imports/ui/pages/Subscriptions/Subscriptions.js index f842487..704d611 100644 --- a/imports/ui/pages/Subscriptions/Subscriptions.js +++ b/imports/ui/pages/Subscriptions/Subscriptions.js @@ -4,14 +4,14 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { Table, Alert, Button } from 'react-bootstrap'; -import { timeago } from '@cleverbeagle/dates'; +import { Alert } from 'react-bootstrap'; import { Meteor } from 'meteor/meteor'; import { withTracker } from 'meteor/react-meteor-data'; import { Trans, translate } from 'react-i18next'; import { Bert } from 'meteor/themeteorchef:bert'; import UserSubsToFiresCollection from '/imports/api/Subscriptions/Subscriptions'; import SelectionMap, { action } from '/imports/ui/components/SelectionMap/SelectionMap'; +import confirm from '/imports/ui/components/Prompt/Confirm'; import Loading from '../../components/Loading/Loading'; import './Subscriptions.scss'; @@ -33,7 +33,6 @@ class Subscriptions extends Component { } onSndBtn() { - console.log('Snd btn pressed'); this.setState({ action: action.edit }); } @@ -43,24 +42,29 @@ class Subscriptions extends Component { } handleRemove(subscriptionId) { - if (confirm('Are you sure? This is permanent!')) { - Meteor.call('subscriptions.remove', subscriptionId, (error) => { - if (error) { - Bert.alert(error.reason, 'danger'); - } else { - Bert.alert('Subscription deleted!', 'success'); - } - }); - } + const { t } = this.props; + confirm(t('Dejarás de recibir notificaciones de fuegos en esa área ¿Estás seguro/a? '), { okBtn: t('Sí'), cancelBtn: t('No') }).then( + () => { + // `proceed` callback + Meteor.call('subscriptions.remove', subscriptionId, (error) => { + if (error) { + Bert.alert(error.reason, 'danger'); + } else { + Bert.alert('Subscription deleted!', 'success'); + } + }); + }, + () => { + // `cancel` callback + } + ); } render() { const { loading, t, - subscriptions, - match, - history + subscriptions } = this.props; return (!loading ? (
@@ -68,22 +72,23 @@ class Subscriptions extends Component {

Suscripciones a fuegos en zonas de mi interés


+ { subscriptions.length === 0 && + No estás suscrito a fuegos en ninguna zona + } +
this.onFstBtn(state)} - sndBtn={this.props.subscriptions.length > 1 ? t('Editar') : null} + sndBtn={this.props.subscriptions.length >= 1 ? t('Editar') : null} onSndBtn={() => this.onSndBtn()} onViewportChanged={viewport => this.onViewportChanged(viewport)} loadingSubs={this.props.loading} currentSubs={this.props.subscriptions} onRemove={(id) => { this.handleRemove(id); }} /> - { subscriptions.length === 0 && - No estás suscrito a fuegos en ninguna zona - } ) : ); } diff --git a/package-lock.json b/package-lock.json index 9d88c9c..e0777d6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9840,6 +9840,11 @@ "warning": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz" } }, + "react-confirm": { + "version": "0.1.16", + "resolved": "https://registry.npmjs.org/react-confirm/-/react-confirm-0.1.16.tgz", + "integrity": "sha512-eNV9e+qFQl93kadwkEhqNF5UX7RxQyXtM2f4MzDLwBOINTqQITIASpRmuxO59hpsrFCWWowx4lmfpDDXwPhhcw==" + }, "react-dom": { "version": "16.2.0", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.2.0.tgz", diff --git a/package.json b/package.json index eaf6a23..c84db79 100644 --- a/package.json +++ b/package.json @@ -47,6 +47,7 @@ "react": "^16.0.0", "react-addons-pure-render-mixin": "^15.6.2", "react-bootstrap": "^0.31.5", + "react-confirm": "^0.1.16", "react-dom": "^16.0.0", "react-fullpage": "^0.1.18", "react-i18next": "^7.1.1",