qwc2
Version:
QGIS Web Client
299 lines (297 loc) • 13.6 kB
JavaScript
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
/**
* Copyright 2021 Oslandia SAS <infos+qwc2@oslandia.com>
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree.
*/
import React from 'react';
import { connect } from 'react-redux';
import classnames from 'classnames';
import isEmpty from 'lodash.isempty';
import PropTypes from 'prop-types';
import { zoomToExtent, zoomToPoint } from '../actions/map';
import Icon from '../components/Icon';
import SideBar from '../components/SideBar';
import Spinner from '../components/widgets/Spinner';
import ConfigUtils from '../utils/ConfigUtils';
import LocaleUtils from '../utils/LocaleUtils';
import MapUtils from '../utils/MapUtils';
import { createBookmark, getUserBookmarks, removeBookmark, resolveBookmark, updateBookmark } from '../utils/PermaLinkUtils';
import './style/Bookmark.css';
/**
* Allows managing user bookmarks.
*
* Bookmarks are only allowed for authenticated users.
*
* Requires `permalinkServiceUrl` to point to a `qwc-permalink-service`.
*/
var Bookmark = /*#__PURE__*/function (_React$Component) {
function Bookmark() {
var _this;
_classCallCheck(this, Bookmark);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _callSuper(this, Bookmark, [].concat(args));
_defineProperty(_this, "state", {
bookmarks: [],
currentBookmark: null,
description: "",
saving: false
});
_defineProperty(_this, "open", function (bookmarkkey, newtab) {
var url = location.href.split("?")[0] + '?bk=' + bookmarkkey;
if (newtab) {
window.open(url, '_blank');
} else {
location.href = url;
}
});
_defineProperty(_this, "zoomToBookmarkExtent", function (bookmarkkey) {
resolveBookmark(bookmarkkey, function (params) {
if ('c' in params && 's' in params) {
var _params$crs;
var scale = parseFloat(params.s);
var zoom = MapUtils.computeZoom(_this.props.mapScales, scale);
var center = params.c.split(/[;,]/g).map(function (x) {
return parseFloat(x);
});
_this.props.zoomToPoint(center, zoom, (_params$crs = params.crs) !== null && _params$crs !== void 0 ? _params$crs : _this.props.mapCrs);
} else if ('e' in params) {
var _params$crs2;
var bounds = params.e.split(',').map(function (n) {
return parseFloat(n);
});
_this.props.zoomToExtent(bounds, (_params$crs2 = params.crs) !== null && _params$crs2 !== void 0 ? _params$crs2 : _this.props.mapCrs);
}
});
});
_defineProperty(_this, "toggleCurrentBookmark", function (bookmark) {
if (_this.state.currentBookmark === bookmark.key) {
_this.setState({
currentBookmark: null,
description: ""
});
} else {
_this.setState({
currentBookmark: bookmark.key,
description: bookmark.description
});
}
});
_defineProperty(_this, "addBookmark", function () {
createBookmark(_this.state.description, function (success) {
if (!success) {
/* eslint-disable-next-line */
alert(LocaleUtils.tr("bookmark.addfailed"));
}
_this.refresh();
});
_this.setState({
description: "",
currentBookmark: null
});
});
_defineProperty(_this, "updateBookmark", function (bookmark) {
_this.setState({
saving: true
});
updateBookmark(bookmark.key, _this.state.description, function (success) {
if (!success) {
/* eslint-disable-next-line */
alert(LocaleUtils.tr("bookmark.savefailed"));
}
_this.setState({
saving: false,
description: "",
currentBookmark: null
});
_this.refresh();
});
});
_defineProperty(_this, "removeBookmark", function (bookmark) {
removeBookmark(bookmark.key, function (success) {
if (!success) {
/* eslint-disable-next-line */
alert(LocaleUtils.tr("bookmark.removefailed"));
}
_this.refresh();
});
});
_defineProperty(_this, "refresh", function () {
getUserBookmarks(ConfigUtils.getConfigProp("username"), function (bookmarks) {
_this.setState({
bookmarks: bookmarks
});
});
});
return _this;
}
_inherits(Bookmark, _React$Component);
return _createClass(Bookmark, [{
key: "componentDidMount",
value: function componentDidMount() {
this.refresh();
}
}, {
key: "render",
value: function render() {
var _this2 = this;
var openTitle = LocaleUtils.tr("bookmark.open");
var openTabTitle = LocaleUtils.tr("bookmark.openTab");
var zoomTitle = LocaleUtils.tr("bookmark.zoomToExtent");
var username = ConfigUtils.getConfigProp("username");
var placeholder = LocaleUtils.tr("bookmark.description");
var addBookmarkTitle = LocaleUtils.tr("bookmark.add");
var updateTitle = LocaleUtils.tr("bookmark.update");
var removeTitle = LocaleUtils.tr("bookmark.remove");
var lastUpdateTitle = LocaleUtils.tr("bookmark.lastUpdate");
var currentBookmark = this.state.bookmarks.find(function (bookmark) {
return bookmark.key === _this2.state.currentBookmark;
});
return /*#__PURE__*/React.createElement(SideBar, {
icon: "bookmark",
id: "Bookmark",
side: this.props.side,
title: LocaleUtils.tr("appmenu.items.Bookmark"),
width: "20em"
}, !username ? /*#__PURE__*/React.createElement("div", {
className: "bookmark-body",
role: "body"
}, LocaleUtils.tr("bookmark.notloggedin")) : /*#__PURE__*/React.createElement("div", {
className: "bookmark-body",
role: "body"
}, /*#__PURE__*/React.createElement("h4", null, LocaleUtils.tr("bookmark.manage")), /*#__PURE__*/React.createElement("div", {
className: "bookmark-create"
}, /*#__PURE__*/React.createElement("input", {
onChange: function onChange(ev) {
return _this2.setState({
description: ev.target.value
});
},
onKeyDown: function onKeyDown(ev) {
if (ev.key === "Enter" && _this2.state.description !== "") {
_this2.addBookmark();
}
},
placeholder: placeholder,
type: "text",
value: this.state.description
})), /*#__PURE__*/React.createElement("div", {
className: "bookmark-actions controlgroup"
}, /*#__PURE__*/React.createElement("button", {
className: "button",
disabled: !currentBookmark,
onClick: function onClick() {
return _this2.open(currentBookmark.key, false);
},
title: openTitle
}, /*#__PURE__*/React.createElement(Icon, {
icon: "folder-open"
})), /*#__PURE__*/React.createElement("button", {
className: "button",
disabled: !currentBookmark,
onClick: function onClick() {
return _this2.open(currentBookmark.key, true);
},
title: openTabTitle
}, /*#__PURE__*/React.createElement(Icon, {
icon: "open_link"
})), this.props.mapCrs && this.props.mapScales ? /*#__PURE__*/React.createElement("button", {
className: "button",
disabled: !currentBookmark,
onClick: function onClick() {
return _this2.zoomToBookmarkExtent(currentBookmark.key);
},
title: zoomTitle
}, /*#__PURE__*/React.createElement(Icon, {
icon: "zoom"
})) : null, /*#__PURE__*/React.createElement("span", {
className: "bookmark-actions-spacer"
}), /*#__PURE__*/React.createElement("button", {
className: "button",
disabled: !this.state.description,
onClick: this.addBookmark,
title: addBookmarkTitle
}, /*#__PURE__*/React.createElement(Icon, {
icon: "plus"
})), /*#__PURE__*/React.createElement("button", {
className: "button",
disabled: !currentBookmark || !this.state.description,
onClick: function onClick() {
return _this2.updateBookmark(currentBookmark);
},
title: updateTitle
}, this.state.saving ? /*#__PURE__*/React.createElement(Spinner, null) : /*#__PURE__*/React.createElement(Icon, {
icon: "save"
})), /*#__PURE__*/React.createElement("button", {
className: "button",
disabled: !currentBookmark,
onClick: function onClick() {
return _this2.removeBookmark(currentBookmark);
},
title: removeTitle
}, /*#__PURE__*/React.createElement(Icon, {
icon: "trash"
}))), /*#__PURE__*/React.createElement("div", {
className: "bookmark-list"
}, this.state.bookmarks.map(function (bookmark) {
var itemclasses = classnames({
"bookmark-list-item": true,
"bookmark-list-item-active": _this2.state.currentBookmark === bookmark.key
});
return /*#__PURE__*/React.createElement("div", {
className: itemclasses,
key: bookmark.key,
onClick: function onClick() {
return _this2.toggleCurrentBookmark(bookmark);
},
onDoubleClick: function onDoubleClick() {
return _this2.open(bookmark.key, false);
},
title: lastUpdateTitle + ": " + bookmark.date
}, bookmark.description);
}), isEmpty(this.state.bookmarks) ? /*#__PURE__*/React.createElement("div", {
className: "bookmark-list-item-empty"
}, LocaleUtils.tr("bookmark.nobookmarks")) : null)));
}
}]);
}(React.Component);
_defineProperty(Bookmark, "availableIn3D", true);
_defineProperty(Bookmark, "propTypes", {
mapCrs: PropTypes.string,
mapScales: PropTypes.array,
/** The side of the application on which to display the sidebar. */
side: PropTypes.string,
zoomToExtent: PropTypes.func,
zoomToPoint: PropTypes.func
});
_defineProperty(Bookmark, "defaultProps", {
side: 'right'
});
var selector = function selector(state) {
var _state$map, _state$map2;
return {
mapCrs: (_state$map = state.map) === null || _state$map === void 0 ? void 0 : _state$map.projection,
mapScales: (_state$map2 = state.map) === null || _state$map2 === void 0 ? void 0 : _state$map2.scales
};
};
export default connect(selector, {
zoomToExtent: zoomToExtent,
zoomToPoint: zoomToPoint
})(Bookmark);