From 497724443f970a1f3e70ea932595d52b121df000 Mon Sep 17 00:00:00 2001 From: vjrj Date: Mon, 18 Dec 2017 03:16:06 +0100 Subject: [PATCH] More work with subscriptions --- .../api/Subscriptions/server/publications.js | 2 +- imports/api/Users/Users.js | 5 +- imports/api/Utility/Utils.js | 3 +- .../components/SelectionMap/SelectionMap.js | 171 ++++++++++++------ .../components/SelectionMap/SelectionMap.scss | 25 +++ .../SubscriptionEditor/SubscriptionEditor.js | 5 +- imports/ui/pages/Index/Index.js | 4 +- .../ui/pages/Subscriptions/Subscriptions.js | 4 +- .../ui/stylesheets/leaflet-sidebar.min.css | 1 + package-lock.json | 5 + package.json | 1 + 11 files changed, 164 insertions(+), 62 deletions(-) create mode 100644 imports/ui/stylesheets/leaflet-sidebar.min.css diff --git a/imports/api/Subscriptions/server/publications.js b/imports/api/Subscriptions/server/publications.js index a91c4a8..fe33282 100644 --- a/imports/api/Subscriptions/server/publications.js +++ b/imports/api/Subscriptions/server/publications.js @@ -37,7 +37,7 @@ Meteor.publishTransformed('userSubsToFires', function transform() { }); }); -Meteor.publish('subscriptions', function subscriptions() { +Meteor.publish('mysubscriptions', function subscriptions() { return Subscriptions.find({ owner: this.userId }); }); diff --git a/imports/api/Users/Users.js b/imports/api/Users/Users.js index d081b98..059fe66 100644 --- a/imports/api/Users/Users.js +++ b/imports/api/Users/Users.js @@ -6,7 +6,10 @@ import { defaultCreatedAt, defaultUpdateAt } from '/imports/api/Utility/Utils.js import i18n from 'i18next'; const schemaUserProfile = new SimpleSchema({ - name: { type: String, optional: true }, + // name: { type: String, optional: true }, + name: Object, + 'name.first': String, + 'name.last': String, lang: { type: String, optional: true }, telegramChatId: { type: Number, optional: true }, telegramUsername: { type: String, optional: true }, diff --git a/imports/api/Utility/Utils.js b/imports/api/Utility/Utils.js index ce82aea..4384ff3 100644 --- a/imports/api/Utility/Utils.js +++ b/imports/api/Utility/Utils.js @@ -11,7 +11,8 @@ export const defaultCreatedAt = { } // Prevent user from supplying their own value this.unset(); - } + }, + optional: true // TODO: Use migration for users }; export const defaultUpdateAt = { diff --git a/imports/ui/components/SelectionMap/SelectionMap.js b/imports/ui/components/SelectionMap/SelectionMap.js index 41f2a1e..496e0fc 100644 --- a/imports/ui/components/SelectionMap/SelectionMap.js +++ b/imports/ui/components/SelectionMap/SelectionMap.js @@ -1,11 +1,13 @@ /* global setTimeout */ /* eslint-disable react/jsx-indent-props */ /* eslint-disable import/no-absolute-path */ +/* eslint-disable import/no-absolute-path */ + import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { Map, TileLayer, Marker, CircleMarker, Circle } from 'react-leaflet'; import Leaflet from 'leaflet'; -import { translate } from 'react-i18next'; +import { Trans, translate } from 'react-i18next'; import { withTracker } from 'meteor/react-meteor-data'; import update from 'immutability-helper'; import geolocation from '/imports/startup/client/geolocation'; @@ -15,6 +17,8 @@ import 'leaflet-graphicscale/dist/Leaflet.GraphicScale.min.js'; import 'leaflet-sleep/Leaflet.Sleep.js'; import Control from 'react-leaflet-control'; import { Button, ButtonToolbar } from 'react-bootstrap'; +import { Sidebar, Tab } from 'react-leaflet-sidebarv2'; +import '/imports/ui/stylesheets/leaflet-sidebar.min.css'; import './SelectionMap.scss'; class SelectionMap extends Component { @@ -25,7 +29,9 @@ class SelectionMap extends Component { marker: props.center, zoom: 11, distance: props.distance, - draggable: true + draggable: true, + sidebarCollapsed: true, + sidebarSelected: 'home' }; this.getMap = this.getMap.bind(this); @@ -79,6 +85,7 @@ class SelectionMap extends Component { this.setState(update(this.state, { $merge: { marker: [lat, lng] } })); this.props.onSelection({ lat, lng, currentDistance }); this.fit(); + // this.addScale(); } fit() { @@ -103,62 +110,120 @@ class SelectionMap extends Component { return this.state.center && this.state.center[0] && this.state.distance; } + onSidebarClose() { + this.setState({ sidebarCollapsed: true }); + } + + onSidebarOpen(id) { + this.setState({ + sidebarCollapsed: false, + sidebarSelected: id + }); + } + + aTab(oid, name) { + return ( + +
+ + + + +
+ + ); + } + render() { // console.log('render map called'); return (
{ this.isValidState() && - { this.selectionMap = map; }} - sleep={window.location.pathname === '/'} - sleepTime={10750} - wakeTime={750} - sleepNote - hoverToWake - wakeMessage={this.props.t('Pulsa para activar')} - sleepOpacity={0.6} - > - - { this.marker = ref; }} - /> - - { this.distanceCircle = ref; }} - color="#145A32" - fillColor="green" - fillOpacity={0.1} - radius={this.state.distance * 1000} - /> - - - - - - } +
+ + +

Pulsa en alguna de tus suscripciones para editarlas, etc.

+ + {this.aTab('someid2', 'Some fire')} + {this.aTab('someid3', 'Some another fire')} + + { this.selectionMap = map; }} + sleep={window.location.pathname === '/'} + sleepTime={10750} + wakeTime={750} + sleepNote + hoverToWake + wakeMessage={this.props.t('Pulsa para activar')} + sleepOpacity={0.6} + > + + { this.marker = ref; }} + /> + + { this.distanceCircle = ref; }} + color="#145A32" + fillColor="green" + fillOpacity={0.1} + radius={this.state.distance * 1000} + /> + + + + + + +
+ }
); } diff --git a/imports/ui/components/SelectionMap/SelectionMap.scss b/imports/ui/components/SelectionMap/SelectionMap.scss index b61bcb3..c5ec039 100644 --- a/imports/ui/components/SelectionMap/SelectionMap.scss +++ b/imports/ui/components/SelectionMap/SelectionMap.scss @@ -7,6 +7,11 @@ margin: 30px auto; } +div.leaflet-container { + position: relative; + margin: 0; +} + @media only screen and (max-width: 400px) { .leaflet-container { height: 400px; @@ -21,3 +26,23 @@ .center-in-my-pos { margin: 10px; } +.sidebar-tabs>li>a, +.sidebar-tabs>ul>li>a { + display: inline-block; +} + +.sidebar { + width: 300px; +} + +.sidebar-left~.sidebar-map .leaflet-left { + left: 315px; +} + +.sidebar-tab-btn-group { + margin-top: 10px; +} + +div.sidebar-tab-btn-group > button > i { + margin-right: 3px; +} diff --git a/imports/ui/components/SubscriptionEditor/SubscriptionEditor.js b/imports/ui/components/SubscriptionEditor/SubscriptionEditor.js index 4d937c1..85cbe8f 100644 --- a/imports/ui/components/SubscriptionEditor/SubscriptionEditor.js +++ b/imports/ui/components/SubscriptionEditor/SubscriptionEditor.js @@ -40,7 +40,7 @@ class SubscriptionEditor extends React.Component { this.onSubs(state)} /> @@ -54,7 +54,8 @@ SubscriptionEditor.defaultProps = { SubscriptionEditor.propTypes = { doc: PropTypes.object, t: PropTypes.func.isRequired, - history: PropTypes.object.isRequired + history: PropTypes.object.isRequired, + focusInput: PropTypes.bool }; export default translate([], { wait: true })(SubscriptionEditor); diff --git a/imports/ui/pages/Index/Index.js b/imports/ui/pages/Index/Index.js index 48ff2c6..b94886e 100644 --- a/imports/ui/pages/Index/Index.js +++ b/imports/ui/pages/Index/Index.js @@ -59,7 +59,7 @@ class Index extends Component { const fullPageOptions = { activeClass: 'active', // the class that is appended to the sections links anchors: ['home', 'crowdsourcing', 'platforms', 'participe', 'fires'], // the anchors for each sections - arrowNavigation: false, // use arrow keys (true after development) + arrowNavigation: true, // use arrow keys (true after development) className: 'section-container', // the class name for the section container delay: 1000, // the scroll animation speed navigation: true, // use dots navigation @@ -219,7 +219,7 @@ class Index extends Component {

Suscríbete a alertas de fuegos

- +
diff --git a/imports/ui/pages/Subscriptions/Subscriptions.js b/imports/ui/pages/Subscriptions/Subscriptions.js index aed5a70..0fa79ff 100644 --- a/imports/ui/pages/Subscriptions/Subscriptions.js +++ b/imports/ui/pages/Subscriptions/Subscriptions.js @@ -96,10 +96,10 @@ Subscriptions.propTypes = { export default translate([], { wait: true })(withTracker(() => { - const subscription = Meteor.subscribe('subscriptions'); + const subscription = Meteor.subscribe('mysubscriptions'); // console.log(UserSubsToFiresCollection.find().fetch()); return { loading: !subscription.ready(), - subscriptions: UserSubsToFiresCollection.find().fetch() + subscriptions: UserSubsToFiresCollection.find({ owner: Meteor.userId() }).fetch() }; })(Subscriptions)); diff --git a/imports/ui/stylesheets/leaflet-sidebar.min.css b/imports/ui/stylesheets/leaflet-sidebar.min.css new file mode 100644 index 0000000..a1de268 --- /dev/null +++ b/imports/ui/stylesheets/leaflet-sidebar.min.css @@ -0,0 +1 @@ +.sidebar{position:absolute;top:0;bottom:0;width:100%;overflow:hidden;z-index:2000;box-shadow:0 1px 5px rgba(0,0,0,.65)}.sidebar.collapsed{width:40px}@media (min-width:768px) and (max-width:991px){.sidebar{width:305px}.sidebar-pane{min-width:265px}}@media (min-width:992px) and (max-width:1199px){.sidebar{width:390px}}@media (min-width:1200px){.sidebar{width:460px}}.sidebar-left{left:0}.sidebar-right{right:0}@media (min-width:768px){.sidebar{top:10px;bottom:10px;transition:width .5s}.sidebar-left{left:10px}.sidebar-right{right:10px}}.sidebar-tabs{top:0;bottom:0;height:100%;background-color:#fff}.sidebar-left .sidebar-tabs{left:0}.sidebar-right .sidebar-tabs{right:0}.sidebar-tabs,.sidebar-tabs>ul{position:absolute;width:40px;margin:0;padding:0}.sidebar-tabs>li,.sidebar-tabs>ul>li{width:100%;height:40px;color:#333;font-size:12pt;overflow:hidden;transition:all 80ms}.sidebar-tabs>li:hover,.sidebar-tabs>ul>li:hover{color:#000;background-color:#eee}.sidebar-tabs>li.active,.sidebar-tabs>ul>li.active{color:#fff;background-color:#0074d9}.sidebar-tabs>li.disabled,.sidebar-tabs>ul>li.disabled{color:rgba(51,51,51,.4)}.sidebar-tabs>li.disabled:hover,.sidebar-tabs>ul>li.disabled:hover{background:0 0}.sidebar-tabs>li.disabled>a,.sidebar-tabs>ul>li.disabled>a{cursor:default}.sidebar-tabs>li>a,.sidebar-tabs>ul>li>a{display:block;width:100%;height:100%;line-height:40px;color:inherit;text-decoration:none;text-align:center}.sidebar-tabs>ul+ul{bottom:0}.sidebar-content{position:absolute;top:0;bottom:0;background-color:rgba(255,255,255,.95);overflow-x:hidden;overflow-y:auto}.sidebar-left .sidebar-content{left:40px;right:0}.sidebar-right .sidebar-content{left:0;right:40px}.sidebar.collapsed>.sidebar-content{overflow-y:hidden}.sidebar-pane{display:none;left:0;right:0;box-sizing:border-box;padding:10px 20px}.sidebar-pane.active{display:block}.sidebar-header{margin:-10px -20px 0;height:40px;padding:0 20px;line-height:40px;font-size:14.4pt;color:#fff;background-color:#0074d9}.sidebar-right .sidebar-header{padding-left:40px}.sidebar-close{position:absolute;top:0;width:40px;height:40px;text-align:center;cursor:pointer}.sidebar-left .sidebar-close{right:0}.sidebar-right .sidebar-close{left:0}.sidebar-left~.sidebar-map{margin-left:40px}.sidebar-right~.sidebar-map{margin-right:40px}.sidebar.leaflet-touch{box-shadow:none;border-right:2px solid rgba(0,0,0,.2)}@media (min-width:768px) and (max-width:991px){.sidebar-left~.sidebar-map .leaflet-left{left:315px}.sidebar-right~.sidebar-map .leaflet-right{right:315px}}@media (min-width:992px) and (max-width:1199px){.sidebar-pane{min-width:350px}.sidebar-left~.sidebar-map .leaflet-left{left:400px}.sidebar-right~.sidebar-map .leaflet-right{right:400px}}@media (min-width:1200px){.sidebar-pane{min-width:420px}.sidebar-left~.sidebar-map .leaflet-left{left:470px}.sidebar-right~.sidebar-map .leaflet-right{right:470px}}@media (min-width:768px){.sidebar-left~.sidebar-map{margin-left:0}.sidebar-right~.sidebar-map{margin-right:0}.sidebar{border-radius:4px}.sidebar.leaflet-touch{border:2px solid rgba(0,0,0,.2)}.sidebar-left~.sidebar-map .leaflet-left{transition:left .5s}.sidebar-left.collapsed~.sidebar-map .leaflet-left{left:50px}.sidebar-right~.sidebar-map .leaflet-right{transition:right .5s}.sidebar-right.collapsed~.sidebar-map .leaflet-right{right:50px}} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 621f5d4..214547b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9955,6 +9955,11 @@ "resolved": "https://registry.npmjs.org/react-leaflet-google/-/react-leaflet-google-3.2.0.tgz", "integrity": "sha1-67F5qBIOQ0Ui0GK8eTdojKLtD20=" }, + "react-leaflet-sidebarv2": { + "version": "0.5.1", + "resolved": "https://registry.npmjs.org/react-leaflet-sidebarv2/-/react-leaflet-sidebarv2-0.5.1.tgz", + "integrity": "sha512-HaEeIq3TfK1Hy7xIuX3hv895LNpu1xIBCgW+I1INrqX/95nNRw6ItNQOxmk0YO5ImrSaDeV6rDXKsAGojjngdg==" + }, "react-overlays": { "version": "0.7.4", "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-0.7.4.tgz", diff --git a/package.json b/package.json index 085d28b..1607a0a 100644 --- a/package.json +++ b/package.json @@ -53,6 +53,7 @@ "react-leaflet": "^1.7.7", "react-leaflet-control": "^1.4.0", "react-leaflet-google": "^3.2.0", + "react-leaflet-sidebarv2": "^0.5.1", "react-places-autocomplete": "^5.4.3", "react-resize-detector": "^1.1.0", "react-router-bootstrap": "^0.24.4",