diff options
Diffstat (limited to 'client/src/lib/drone/index.js')
| -rw-r--r-- | client/src/lib/drone/index.js | 216 |
1 files changed, 216 insertions, 0 deletions
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, + }, +}) |