UNPKG

changeset-map/lib/sidebar.js

Version:

11.9 kBJavaScriptView Raw

1import React from 'react';
2import moment from 'moment';
3import { getBounds } from './helpers';
4
5export class Sidebar extends React.PureComponent {
  constructor(props) {
      super(props);
      this.state = {
          actions: true,
          type: false,
          mapStyle: false,
          user: false
      };
      this.toggleUser = this.toggleUser.bind(this);
      this.toggleActions = this.toggleActions.bind(this);
      this.toggleType = this.toggleType.bind(this);
      this.toggleMapStyle = this.toggleMapStyle.bind(this);
  }
  toggleUser() {
      this.setState({
          user: !this.state.user
      });
  }
  toggleActions() {
      this.setState({
          actions: !this.state.actions
      });
  }
  toggleType() {
      this.setState({
          type: !this.state.type
      });
  }
  toggleMapStyle() {
      this.setState({
          mapStyle: !this.state.mapStyle
      });
  }
  render() {
      const result = this.props.result;
      const changesetId = this.props.changesetId;
      const filterLayers = this.props.filterLayers;
      var date = new Date(
    result.changeset.to ? result.changeset.to : result.changeset.from
  );
46
      var bbox = result.changeset.bbox;
      var bounds = getBounds(bbox);
      var center = bounds.getCenter();
      var userName = result.changeset.user;
      var userId = result.changeset.uid;
      return (
    <div className="cmap-sidebar">
      <section className="cmap-changeset-section cmap-fill-light cmap-pt3">
        <h6 className="cmap-heading">
          Changeset:
          <em className="cmap-changeset-id">
            {changesetId}
          </em>
          <small className="cmap-time" title={date}>
            ({moment(date).fromNow()})
          </small>
        </h6>
        <ul className="cmap-hlist">
          <li>
            <a
              target="_blank"
              className="cmap-hlist-item cmap-noselect cmap-pointer cmap-c-link-osm"
              href={'https://openstreetmap.org/changeset/' + changesetId}
            >
              OSM
            </a>
          </li>
          <li>
            <a
              target="_blank"
              className="cmap-hlist-item cmap-noselect cmap-pointer cmap-c-link-osmcha"
              href={'https://osmcha.mapbox.com/' + changesetId + '/'}
            >
              OSMCha
            </a>
          </li>
          <li>
            <a
              target="_blank"
              className="cmap-hlist-item cmap-noselect cmap-pointer cmap-c-link-achavi"
              href={
                'https://overpass-api.de/achavi/?changeset=' + changesetId
              }
            >
              Achavi
            </a>
          </li>
          <li>
            <a
              target="_blank"
              className="cmap-hlist-item cmap-noselect cmap-pointer cmap-c-link-osmhv"
              href={
                'http://osmhv.openstreetmap.de/changeset.jsp?id=' +
                changesetId
              }
            >
              OSM HV
            </a>
          </li>
          <li>
            <a
              target="_blank"
              className="cmap-hlist-item cmap-noselect cmap-pointer cmap-c-link-josm"
              href={
                'http://127.0.0.1:8111/import?url=http://www.openstreetmap.org/api/0.6/changeset/' +
                changesetId +
                '/download'
              }
            >
              JOSM
            </a>
          </li>
          <li>
            <a
              target="_blank"
              className="cmap-hlist-item cmap-noselect cmap-pointer cmap-c-link-id"
              href={
                'http://preview.ideditor.com/release#map=15/' +
                center.lat +
                '/' +
                center.lng
              }
            >
              iD
            </a>
          </li>
        </ul>
      </section>
      <section className="cmap-user-section cmap-fill-light cmap-pb3">
        <h6 className="cmap-heading" onClick={this.toggleUser}>
          {this.state.user ? '▼' : '▶'}
          User:
          {' '}
          <em className="cmap-user-id">{userName}</em>
        </h6>
142
        <ul
          className="cmap-hlist"
          style={{
              display: this.state.user ? 'block' : 'none'
          }}
        >
          <li>
            <a
              target="_blank"
              className="cmap-hlist-item cmap-noselect cmap-pointer cmap-u-link-osm"
              href={'https://openstreetmap.org/user/' + userName}
            >
              OSM
            </a>
          </li>
          <li>
            <a
              target="_blank"
              className="cmap-hlist-item cmap-noselect cmap-pointer cmap-u-link-hdyc"
              href={'http://hdyc.neis-one.org/?' + userName}
            >
              HDYC
            </a>
          </li>
          <li>
            <a
              target="_blank"
              className="cmap-hlist-item cmap-noselect cmap-pointer cmap-u-link-disc"
              href={
                'http://resultmaps.neis-one.org/osm-discussion-comments?uid=' +
                userId
              }
            >
              Discussions
            </a>
          </li>
          <li>
            <a
              target="_blank"
              className="cmap-hlist-item cmap-noselect cmap-pointer cmap-u-link-comm"
              href={
                'http://resultmaps.neis-one.org/osm-discussion-comments?uid=115894' +
                userId +
                '&commented'
              }
            >
              Comments
            </a>
          </li>
        </ul>
      </section>
      <section className="cmap-filter-action-section cmap-pt3">
        <h6 className="cmap-heading pointer" onClick={this.toggleActions}>
          {this.state.actions ? '▼' : '▶'}Filter by actions
        </h6>
198
        <ul
          style={{
              display: this.state.actions ? 'block' : 'none'
          }}
          className="cmap-hlist"
        >
          <li>
            <label className="cmap-hlist-item cmap-noselect cmap-pointer">
              <input
                type="checkbox"
                value="added"
                defaultChecked="true"
                id="cmap-layer-selector-added"
                onChange={filterLayers}
              />
              <span className="cmap-label-text">
                Added
              </span>
              <span className="cmap-color-box cmap-color-added" />
            </label>
          </li>
          <li>
            <label className="cmap-hlist-item cmap-noselect cmap-pointer">
              <input
                type="checkbox"
                value="modified"
                defaultChecked="true"
                id="cmap-layer-selector-modified"
                onChange={filterLayers}
              />
              <span className="cmap-label-text">
                Modified
              </span>
              <span className="cmap-color-box cmap-color-modified-old" />
              <span className="cmap-unicode">→</span>
              <span className="cmap-color-box cmap-color-modified-new" />
            </label>
          </li>
          <li>
            <label className="cmap-hlist-item cmap-noselect cmap-pointer">
              <input
                type="checkbox"
                value="deleted"
                defaultChecked="true"
                id="cmap-layer-selector-deleted"
                onChange={filterLayers}
              />
              <span className="cmap-label-text">
                Deleted
              </span>
              <span className="cmap-color-box cmap-color-deleted" />
            </label>
          </li>
        </ul>
      </section>
      <section className="cmap-filter-type-section">
        <h6 className="cmap-heading pointer" onClick={this.toggleType}>
          {this.state.type ? '▼' : '▶'}Filter by type
        </h6>
        <ul
          className="cmap-hlist"
          style={{
              display: this.state.type ? 'block' : 'none'
          }}
        >
          <li>
            <label className="cmap-hlist-item cmap-noselect cmap-pointer">
              <input
                type="checkbox"
                value="nodes"
                defaultChecked="true"
                id="cmap-type-selector-nodes"
                onChange={filterLayers}
              />
              <span className="cmap-label-text">
                Nodes
              </span>
            </label>
          </li>
          <li>
            <label className="cmap-hlist-item cmap-noselect cmap-pointer">
              <input
                type="checkbox"
                value="ways"
                defaultChecked="true"
                id="cmap-type-selector-ways"
                onChange={filterLayers}
              />
              <span className="cmap-label-text">
                Ways
              </span>
            </label>
          </li>
          <li>
            <label className="cmap-hlist-item cmap-noselect cmap-pointer">
              <input
                type="checkbox"
                value="relations"
                defaultChecked="true"
                id="cmap-type-selector-relations"
                onChange={filterLayers}
              />
              <span className="cmap-label-text">
                Relations
              </span>
            </label>
          </li>
        </ul>
      </section>
      <section className="cmap-map-style-section cmap-pb3">
        <h6 className="cmap-heading pointer" onClick={this.toggleMapStyle}>
          {this.state.mapStyle ? '▼' : '▶'}Map style
        </h6>
312
        <ul
          className="cmap-hlist"
          style={{
              display: this.state.mapStyle ? 'block' : 'none'
          }}
        >
          <li>
            <label className="cmap-hlist-item cmap-noselect cmap-pointer">
              <input
                type="radio"
                value="satellite"
                defaultChecked="true"
                name="baselayer"
                id="cmap-baselayer-satellite"
                onChange={this.props.toggleLayer}
              />
              <span className="cmap-label-text">
                Satellite
              </span>
            </label>
          </li>
          <li>
            <label className="cmap-hlist-item cmap-noselect cmap-pointer">
              <input
                type="radio"
                value="streets"
                name="baselayer"
                id="cmap-baselayer-streets"
                onChange={this.props.toggleLayer}
              />
              <span className="cmap-label-text">
                Streets
              </span>
            </label>
          </li>
          <li>
            <label className="cmap-hlist-item cmap-noselect cmap-pointer">
              <input
                type="radio"
                value="dark"
                name="baselayer"
                id="cmap-baselayer-dark"
                onChange={this.props.toggleLayer}
              />
              <span className="cmap-label-text">
                Dark
              </span>
            </label>
          </li>
        </ul>
      </section>
    </div>
      );
  }
367}

1	`import React from 'react';`
2	`import moment from 'moment';`
3	`import { getBounds } from './helpers';`
4
5	`export class Sidebar extends React.PureComponent {`
6	`constructor(props) {`
7	`super(props);`
8	`this.state = {`
9	`actions: true,`
10	`type: false,`
11	`mapStyle: false,`
12	`user: false`
13	`};`
14	`this.toggleUser = this.toggleUser.bind(this);`
15	`this.toggleActions = this.toggleActions.bind(this);`
16	`this.toggleType = this.toggleType.bind(this);`
17	`this.toggleMapStyle = this.toggleMapStyle.bind(this);`
18	`}`
19	`toggleUser() {`
20	`this.setState({`
21	`user: !this.state.user`
22	`});`
23	`}`
24	`toggleActions() {`
25	`this.setState({`
26	`actions: !this.state.actions`
27	`});`
28	`}`
29	`toggleType() {`
30	`this.setState({`
31	`type: !this.state.type`
32	`});`
33	`}`
34	`toggleMapStyle() {`
35	`this.setState({`
36	`mapStyle: !this.state.mapStyle`
37	`});`
38	`}`
39	`render() {`
40	`const result = this.props.result;`
41	`const changesetId = this.props.changesetId;`
42	`const filterLayers = this.props.filterLayers;`
43	`var date = new Date(`
44	`result.changeset.to ? result.changeset.to : result.changeset.from`
45	`);`
46
47	`var bbox = result.changeset.bbox;`
48	`var bounds = getBounds(bbox);`
49	`var center = bounds.getCenter();`
50	`var userName = result.changeset.user;`
51	`var userId = result.changeset.uid;`
52	`return (`
53	`<div className="cmap-sidebar">`
54	`<section className="cmap-changeset-section cmap-fill-light cmap-pt3">`
55	`<h6 className="cmap-heading">`
56	`Changeset:`
57	`<em className="cmap-changeset-id">`
58	`{changesetId}`
59	`</em>`
60	`<small className="cmap-time" title={date}>`
61	`({moment(date).fromNow()})`
62	`</small>`
63	`</h6>`
64	`<ul className="cmap-hlist">`
65	`<li>`
66	`<a`
67	`target="_blank"`
68	`className="cmap-hlist-item cmap-noselect cmap-pointer cmap-c-link-osm"`
69	`href={'https://openstreetmap.org/changeset/' + changesetId}`
70	`>`
71	`OSM`
72	`</a>`
73	`</li>`
74	`<li>`
75	`<a`
76	`target="_blank"`
77	`className="cmap-hlist-item cmap-noselect cmap-pointer cmap-c-link-osmcha"`
78	`href={'https://osmcha.mapbox.com/' + changesetId + '/'}`
79	`>`
80	`OSMCha`
81	`</a>`
82	`</li>`
83	`<li>`
84	`<a`
85	`target="_blank"`
86	`className="cmap-hlist-item cmap-noselect cmap-pointer cmap-c-link-achavi"`
87	`href={`
88	`'https://overpass-api.de/achavi/?changeset=' + changesetId`
89	`}`
90	`>`
91	`Achavi`
92	`</a>`
93	`</li>`
94	`<li>`
95	`<a`
96	`target="_blank"`
97	`className="cmap-hlist-item cmap-noselect cmap-pointer cmap-c-link-osmhv"`
98	`href={`
99	`'http://osmhv.openstreetmap.de/changeset.jsp?id=' +`
100	`changesetId`
101	`}`
102	`>`
103	`OSM HV`
104	`</a>`
105	`</li>`
106	`<li>`
107	`<a`
108	`target="_blank"`
109	`className="cmap-hlist-item cmap-noselect cmap-pointer cmap-c-link-josm"`
110	`href={`
111	`'http://127.0.0.1:8111/import?url=http://www.openstreetmap.org/api/0.6/changeset/' +`
112	`changesetId +`
113	`'/download'`
114	`}`
115	`>`
116	`JOSM`
117	`</a>`
118	`</li>`
119	`<li>`
120	`<a`
121	`target="_blank"`
122	`className="cmap-hlist-item cmap-noselect cmap-pointer cmap-c-link-id"`
123	`href={`
124	`'http://preview.ideditor.com/release#map=15/' +`
125	`center.lat +`
126	`'/' +`
127	`center.lng`
128	`}`
129	`>`
130	`iD`
131	`</a>`
132	`</li>`
133	`</ul>`
134	`</section>`
135	`<section className="cmap-user-section cmap-fill-light cmap-pb3">`
136	`<h6 className="cmap-heading" onClick={this.toggleUser}>`
137	`{this.state.user ? '▼' : '▶'}`
138	`User:`
139	`{' '}`
140	`<em className="cmap-user-id">{userName}</em>`
141	`</h6>`
142
143	`<ul`
144	`className="cmap-hlist"`
145	`style={{`
146	`display: this.state.user ? 'block' : 'none'`
147	`}}`
148	`>`
149	`<li>`
150	`<a`
151	`target="_blank"`
152	`className="cmap-hlist-item cmap-noselect cmap-pointer cmap-u-link-osm"`
153	`href={'https://openstreetmap.org/user/' + userName}`
154	`>`
155	`OSM`
156	`</a>`
157	`</li>`
158	`<li>`
159	`<a`
160	`target="_blank"`
161	`className="cmap-hlist-item cmap-noselect cmap-pointer cmap-u-link-hdyc"`
162	`href={'http://hdyc.neis-one.org/?' + userName}`
163	`>`
164	`HDYC`
165	`</a>`
166	`</li>`
167	`<li>`
168	`<a`
169	`target="_blank"`
170	`className="cmap-hlist-item cmap-noselect cmap-pointer cmap-u-link-disc"`
171	`href={`
172	`'http://resultmaps.neis-one.org/osm-discussion-comments?uid=' +`
173	`userId`
174	`}`
175	`>`
176	`Discussions`
177	`</a>`
178	`</li>`
179	`<li>`
180	`<a`
181	`target="_blank"`
182	`className="cmap-hlist-item cmap-noselect cmap-pointer cmap-u-link-comm"`
183	`href={`
184	`'http://resultmaps.neis-one.org/osm-discussion-comments?uid=115894' +`
185	`userId +`
186	`'&commented'`
187	`}`
188	`>`
189	`Comments`
190	`</a>`
191	`</li>`
192	`</ul>`
193	`</section>`
194	`<section className="cmap-filter-action-section cmap-pt3">`
195	`<h6 className="cmap-heading pointer" onClick={this.toggleActions}>`
196	`{this.state.actions ? '▼' : '▶'}Filter by actions`
197	`</h6>`
198
199	`<ul`
200	`style={{`
201	`display: this.state.actions ? 'block' : 'none'`
202	`}}`
203	`className="cmap-hlist"`
204	`>`
205	`<li>`
206	`<label className="cmap-hlist-item cmap-noselect cmap-pointer">`
207	`<input`
208	`type="checkbox"`
209	`value="added"`
210	`defaultChecked="true"`
211	`id="cmap-layer-selector-added"`
212	`onChange={filterLayers}`
213	`/>`
214	`<span className="cmap-label-text">`
215	`Added`
216	`</span>`
217	`<span className="cmap-color-box cmap-color-added" />`
218	`</label>`
219	`</li>`
220	`<li>`
221	`<label className="cmap-hlist-item cmap-noselect cmap-pointer">`
222	`<input`
223	`type="checkbox"`
224	`value="modified"`
225	`defaultChecked="true"`
226	`id="cmap-layer-selector-modified"`
227	`onChange={filterLayers}`
228	`/>`
229	`<span className="cmap-label-text">`
230	`Modified`
231	`</span>`
232	`<span className="cmap-color-box cmap-color-modified-old" />`
233	`<span className="cmap-unicode">→</span>`
234	`<span className="cmap-color-box cmap-color-modified-new" />`
235	`</label>`
236	`</li>`
237	`<li>`
238	`<label className="cmap-hlist-item cmap-noselect cmap-pointer">`
239	`<input`
240	`type="checkbox"`
241	`value="deleted"`
242	`defaultChecked="true"`
243	`id="cmap-layer-selector-deleted"`
244	`onChange={filterLayers}`
245	`/>`
246	`<span className="cmap-label-text">`
247	`Deleted`
248	`</span>`
249	`<span className="cmap-color-box cmap-color-deleted" />`
250	`</label>`
251	`</li>`
252	`</ul>`
253	`</section>`
254	`<section className="cmap-filter-type-section">`
255	`<h6 className="cmap-heading pointer" onClick={this.toggleType}>`
256	`{this.state.type ? '▼' : '▶'}Filter by type`
257	`</h6>`
258	`<ul`
259	`className="cmap-hlist"`
260	`style={{`
261	`display: this.state.type ? 'block' : 'none'`
262	`}}`
263	`>`
264	`<li>`
265	`<label className="cmap-hlist-item cmap-noselect cmap-pointer">`
266	`<input`
267	`type="checkbox"`
268	`value="nodes"`
269	`defaultChecked="true"`
270	`id="cmap-type-selector-nodes"`
271	`onChange={filterLayers}`
272	`/>`
273	`<span className="cmap-label-text">`
274	`Nodes`
275	`</span>`
276	`</label>`
277	`</li>`
278	`<li>`
279	`<label className="cmap-hlist-item cmap-noselect cmap-pointer">`
280	`<input`
281	`type="checkbox"`
282	`value="ways"`
283	`defaultChecked="true"`
284	`id="cmap-type-selector-ways"`
285	`onChange={filterLayers}`
286	`/>`
287	`<span className="cmap-label-text">`
288	`Ways`
289	`</span>`
290	`</label>`
291	`</li>`
292	`<li>`
293	`<label className="cmap-hlist-item cmap-noselect cmap-pointer">`
294	`<input`
295	`type="checkbox"`
296	`value="relations"`
297	`defaultChecked="true"`
298	`id="cmap-type-selector-relations"`
299	`onChange={filterLayers}`
300	`/>`
301	`<span className="cmap-label-text">`
302	`Relations`
303	`</span>`
304	`</label>`
305	`</li>`
306	`</ul>`
307	`</section>`
308	`<section className="cmap-map-style-section cmap-pb3">`
309	`<h6 className="cmap-heading pointer" onClick={this.toggleMapStyle}>`
310	`{this.state.mapStyle ? '▼' : '▶'}Map style`
311	`</h6>`
312
313	`<ul`
314	`className="cmap-hlist"`
315	`style={{`
316	`display: this.state.mapStyle ? 'block' : 'none'`
317	`}}`
318	`>`
319	`<li>`
320	`<label className="cmap-hlist-item cmap-noselect cmap-pointer">`
321	`<input`
322	`type="radio"`
323	`value="satellite"`
324	`defaultChecked="true"`
325	`name="baselayer"`
326	`id="cmap-baselayer-satellite"`
327	`onChange={this.props.toggleLayer}`
328	`/>`
329	`<span className="cmap-label-text">`
330	`Satellite`
331	`</span>`
332	`</label>`
333	`</li>`
334	`<li>`
335	`<label className="cmap-hlist-item cmap-noselect cmap-pointer">`
336	`<input`
337	`type="radio"`
338	`value="streets"`
339	`name="baselayer"`
340	`id="cmap-baselayer-streets"`
341	`onChange={this.props.toggleLayer}`
342	`/>`
343	`<span className="cmap-label-text">`
344	`Streets`
345	`</span>`
346	`</label>`
347	`</li>`
348	`<li>`
349	`<label className="cmap-hlist-item cmap-noselect cmap-pointer">`
350	`<input`
351	`type="radio"`
352	`value="dark"`
353	`name="baselayer"`
354	`id="cmap-baselayer-dark"`
355	`onChange={this.props.toggleLayer}`
356	`/>`
357	`<span className="cmap-label-text">`
358	`Dark`
359	`</span>`
360	`</label>`
361	`</li>`
362	`</ul>`
363	`</section>`
364	`</div>`
365	`);`
366	`}`
367	`}`