Clean master commit

2026-06-12 13:28:36 +03:00 · 2018-10-31 14:11:03 -04:00
parent 59aa005a64
commit 92e03fdb07
69 changed files with 12939 additions and 0 deletions
--- a/src/components/InfoPopup.jsx
+++ b/src/components/InfoPopup.jsx
@@ -0,0 +1,104 @@
+import React from 'react';
+import copy from '../js/data/copy.json';
+// NB: should we make this componetn part of a future feature?
+
+export default class InfoPopUp extends React.Component{
+
+  renderView2DCopy() {
+    return copy[this.props.app.language].legend.view2d.paragraphs.map(paragraph => <p>{paragraph}</p>);
+  }
+
+  renderCategoryColors() {
+    const colors = copy[this.props.app.language].legend.view2d.colors.slice(0);
+    colors.reverse();
+    return (
+      <div className="legend-labels" style={{ 'margin-left': '-10px' }}>
+        {colors.map((color, idx) => {
+          return (
+            <div className="label" style={{ 'margin-left': `${idx*5}` }}>
+              <div className={`color-category ${color.class}`}></div>
+              {color.label}
+            </div>
+          )
+        })}
+      </div>
+    )
+  }
+
+  renderView2DLegend() {
+    return (
+      <div className={`infopopup ${(this.props.ui.flags.isInfopopup) ? '' : 'hidden'}`}>
+        <button onClick={() => this.props.toggle()} className="side-menu-burg over-white is-active"><span /></button>
+        {this.renderView2DCopy()}
+        <div className="legend">
+          <div className="legend-section" style={{ 'height': '100px' }}>
+            <svg x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" enableBackground="new 0 0 100 100">
+              <circle fill="#D2CD28" cx="50" cy="50" r="50"/>
+              <circle fill="#662770" cx="50" cy="50" r="40"/>
+              <circle fill="#2F409A" cx="50" cy="50" r="30"/>
+              <circle fill="#256C36" cx="50" cy="50" r="20"/>
+              <circle fill="#FF0000" cx="50" cy="50" r="10"/>
+            </svg>
+            {this.renderCategoryColors()}
+          </div>
+          <div className="legend-section">
+            <svg x="0px" y="0px" width="100px" height="30px" viewBox="0 0 100 30" enableBackground="new 0 0 100 30">
+              <line fill="none" stroke="#2F409A" strokeDasharray="4,4" x1="30" y1="15" x2="70" y2="15"/>
+              <circle fill="2F409A" fillOpacity="0.2" stroke="#2F409A" strokeDasharray="4,4" cx="80" cy="15" r="10"/>
+              <circle fill="2F409A" fillOpacity="0.2" stroke="#2F409A" strokeDasharray="4,4" cx="20" cy="15" r="10"/>
+            </svg>
+            <div className="legend-labels">
+              <div className="label">Comunicaciones</div>
+            </div>
+          </div>
+          <div className="legend-section">
+            <svg x="0px" y="0px" width="100px" height="30px" viewBox="0 0 100 30" enableBackground="new 0 0 100 30">
+              <circle opacity="0.3" fill="#FF0000" cx="50" cy="15" r="15"/>
+            </svg>
+            <div className="legend-labels">
+              <div className="label">Ataques</div>
+            </div>
+          </div>
+          <div className="legend-section">
+            <svg x="0px" y="0px" width="100px" height="30px" viewBox="0 40 100 30" enableBackground="new 0 0 100 70">
+              <polyline fill="none" stroke="#000000" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" stroke-miterlimit="10" points="
+                8.376,63.723 47.287,63.723 60,46 106,46 "/>
+              <line stroke="#000000" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" x1="33.723" y1="59.663" x2="39.069" y2="63.723"/>
+              <line stroke="#000000" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" x1="33.723" y1="67.782" x2="39.069" y2="63.723"/>
+              <line stroke="#000000" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" x1="78.849" y1="41.94" x2="84.195" y2="46"/>
+              <line stroke="#000000" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" x1="78.849" y1="50.06" x2="84.195" y2="46"/>
+            </svg>
+            <div className="legend-labels">
+              <div className="label">Rutas de bus</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  renderView3DLegend() {
+      const lang = copy[this.props.app.language].legend.view3d;
+      return (
+        <div className={`infopopup ${(this.props.ui.flags.isInfopopup) ? '' : 'hidden'}`}>
+          <button onClick={() => this.props.toggle()} className="side-menu-burg over-white is-active"><span /></button>
+          {lang.paragraphs.map(paragraph => <p>{paragraph}</p>)}
+          {lang.colors.map(color => (
+            <div className="legend-item">
+              <div className={`color-marker ${color.class}`}></div>
+              <div className="item-label">{color.label}</div>
+            </div>
+          ))}
+        </div>
+      )
+  }
+
+  render() {
+    if (!this.props.ui.flags.isView2d) {
+      return (<div>{this.renderView3DLegend()}</div>)
+    }
+    return (
+      <div>{this.renderView2DLegend()}</div>
+    )
+  }
+}