From 3e72bfa56c860826429a842f6c128d78d4a930db Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Thu, 1 Jun 2017 19:47:08 -0400
Subject: react-native-web port of fmf app

---
 client/src/lib/drone/index.js | 216 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 216 insertions(+)
 create mode 100644 client/src/lib/drone/index.js

(limited to 'client/src/lib/drone/index.js')

diff --git a/client/src/lib/drone/index.js b/client/src/lib/drone/index.js
new file mode 100644
index 0000000..19e7843
--- /dev/null
+++ b/client/src/lib/drone/index.js
@@ -0,0 +1,216 @@
+import React, { Component } from 'react';
+import {
+  StyleSheet,
+  Image,
+  View,
+  TouchableOpacity,
+} from 'react-native';
+
+import ScrollableContainer from '../components/scrollableContainer'
+import ClearText from '../components/text'
+import Heading from '../components/heading'
+
+const countryLinks = {
+  pakistan: 'https://www.thebureauinvestigates.com/projects/drone-war/charts?show_casualties=1&show_injuries=1&show_strikes=1&location=pakistan&from=2004-1-1&to=now',
+  yemen: 'https://www.thebureauinvestigates.com/projects/drone-war/charts?show_casualties=1&show_injuries=1&show_strikes=1&location=yemen&from=2002-1-1&to=now',
+  somalia: 'https://www.thebureauinvestigates.com/projects/drone-war/charts?show_casualties=1&show_injuries=1&show_strikes=1&location=somalia&from=2007-1-1&to=now',
+  afghanistan: 'https://www.thebureauinvestigates.com/projects/drone-war/charts?show_casualties=1&show_injuries=1&show_strikes=1&location=afghanistan&from=2015-1-1&to=now',
+}
+
+export default class Drone extends Component {
+  constructor(props) {
+    super()
+  }
+  render() {
+    const content = this.props.content
+    const links = content.links.map((link,i) => {
+      const url = link.uri
+      const name = link.text
+      return (
+        <TouchableOpacity key={'link_' + i} onPress={() => this.props.onLinkPress(url)}>
+          <ClearText style={styles.link}>{name}</ClearText>
+        </TouchableOpacity>
+      )
+    })
+    return (
+      <ScrollableContainer heading='Military Drone Statistics' bodyStyle={styles.scrollContainer}>
+
+        <ClearText style={styles.body}>
+          {content.intro}
+        </ClearText>
+
+        <Heading style={styles.subheading}>STATISTICS</Heading>
+
+        <View style={styles.statistics}>
+          <View style={styles.statistic}>
+            <ClearText style={styles.statisticNumber}>{content.strikes}</ClearText>
+            <ClearText style={styles.statisticLabel}>MINIMUM CONFIRMED STRIKES</ClearText>
+          </View>
+
+          <View style={styles.statistic}>
+            <ClearText style={styles.statisticNumber}>{content.totalKilled}</ClearText>
+            <ClearText style={styles.statisticLabel}>TOTAL KILLED</ClearText>
+          </View>
+        </View>
+
+        <View style={styles.statistics}>
+          <View style={styles.statistic}>
+            <ClearText style={styles.statisticNumber}>{content.civiliansKilled}</ClearText>
+            <ClearText style={styles.statisticLabel}>CIVILIANS KILLED</ClearText>
+          </View>
+
+          <View style={styles.statistic}>
+            <ClearText style={styles.statisticNumber}>{content.childrenKilled}</ClearText>
+            <ClearText style={styles.statisticLabel}>CHILDREN KILLED</ClearText>
+          </View>
+        </View>
+
+        <ClearText style={styles.body}>
+          {content.statisticsByline}
+        </ClearText>
+
+        <View style={styles.countries}>
+          <View style={styles.country}>
+            <TouchableOpacity onPress={() => this.props.onLinkPress(countryLinks.afghanistan)}>
+              <Image source={require('../../img/afghanistan.png')} resizeMode='cover' style={styles.countryImage} />
+              <ClearText>AFGHANISTAN</ClearText>
+            </TouchableOpacity>
+          </View>
+
+          <View style={styles.country}>
+            <TouchableOpacity onPress={() => this.props.onLinkPress(countryLinks.pakistan)}>
+              <Image source={require('../../img/pakistan.png')} resizeMode='cover' style={styles.countryImage} />
+              <ClearText>PAKISTAN</ClearText>
+            </TouchableOpacity>
+          </View>
+        </View>
+
+        <View style={styles.countries}>
+          <View style={styles.country}>
+            <TouchableOpacity onPress={() => this.props.onLinkPress(countryLinks.yemen)}>
+              <Image source={require('../../img/yemen.png')} resizeMode='cover' style={styles.countryImage} />
+              <ClearText>YEMEN</ClearText>
+            </TouchableOpacity>
+          </View>
+
+          <View style={styles.country}>
+            <TouchableOpacity onPress={() => this.props.onLinkPress(countryLinks.somalia)}>
+              <Image source={require('../../img/somalia.png')} resizeMode='cover' style={styles.countryImage} />
+              <ClearText>SOMALIA</ClearText>
+            </TouchableOpacity>
+          </View>
+        </View>
+        
+        <ClearText style={styles.body}>
+          {content.moreInfo}
+        </ClearText>
+        
+        <View style={styles.links}>
+          {links}
+        </View>
+
+      </ScrollableContainer>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'flex-start',
+    alignItems: 'flex-start',
+    width: '100%',
+  },
+  scrollContainer: {
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    width: '100%',
+  },
+  body: {
+    textAlign: 'left',
+    padding: 10,
+    width: '90%',
+    maxWidth: '600px',
+    paddingBottom: 20,
+    paddingLeft: 20,
+  },
+  hero: {
+    width: '100%',
+    height: 400,
+  },
+  subheading: {
+    textAlign: 'center',
+    width: '100%',
+  },
+  statistics: {
+    width: '90%',
+    maxWidth: '650px',
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    alignItems: 'flex-start',
+    marginLeft: 20,
+  },
+  statistic: {
+    flex: 1,
+    flexBasis: '50%',
+    backgroundColor: 'white',
+    padding: 10,
+    margin: 10,
+  },
+  statisticNumber: {
+    fontSize: 36,
+    lineHeight: 48,
+    fontWeight: 'bold',
+    color: 'black',
+    textAlign: 'left',
+  },
+  statisticLabel: {
+    textAlign: 'left',
+    color: 'black',
+    fontSize: 13,
+  },
+  countries: {
+    width: '90%',
+    maxWidth: '650px',
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingRight: 20,
+    marginLeft: 30,
+  },
+  country: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    flex: 1,
+    flexBasis: '50%',
+    padding: 10,
+    margin: 5,
+    aspectRatio: 1,
+  },
+  countryImage: {
+    flex: 1,
+    aspectRatio: 1,
+    borderWidth: 1,
+    borderColor: 'white',
+    marginBottom: 5,
+    width: '35vw',
+    height: '35vw',
+    maxWidth: '300px',
+    maxHeight: '300px',
+  },
+  links: {
+    maxWidth: '650px',
+    width: '75%',
+    alignItems: 'flex-start',
+    marginBottom: 80,
+    marginLeft: 75,
+  },
+  link: {
+    justifyContent: 'flex-start',
+    alignItems: 'flex-start',
+    textDecorationLine: 'underline',
+    padding: 5,
+  },
+})
-- 
cgit v1.2.3-70-g09d2