Dashboard.js

Dashboard.js

var React = require('react-native');

var {
  View,
  Text,
  TextInput,
  StyleSheet,
  TabBarIOS,
  TouchableHighlight,
  Component,
  ScrollView,
  ListView
} = React;

var BackgroundGeolocation = require('react-native-background-geolocation');
var ScrollableTabView = require('react-native-scrollable-tab-view');
var Order = require('./order');

var styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 70,
  },
  tabView: {
    flex: 1,
    padding: 10,
    backgroundColor: 'rgba(0,0,0,0.01)',
  },
  card: {
    borderWidth: 1,
    backgroundColor: '#fff',
    borderColor: 'rgba(0,0,0,0.1)',
    shadowColor: '#ccc',
    shadowOffset: { width: 2, height: 2, },
    shadowOpacity: 0.5,
    paddingLeft: 0,
    paddingRight: 3,
    shadowRadius: 3,
  },
  Listcontainer: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  thumbnail: {
    width: 80,
    height: 90,
    backgroundColor: '#13227B',
    position: 'relative',
  },
  title: {
    fontSize: 17,
    top: 10,
    textAlign: 'center',
    backgroundColor: 'rgba(0,0,0,0)',
    color: '#fff'
  },
  year: {
    textAlign: 'center',
  },
  listObject: {
    flex: 1,
    height: 90,
  },
  time: {
    marginTop: 15,
    marginBottom: 5,
    fontSize: 15,
    color: '#fff',
    textAlign: 'center'
  },
  subTime: {
    color: '#fff',
    textAlign: 'center'
  },
  information: {
    flex: 1,
    marginTop: -80,
    paddingLeft: 100
  },
  restaurantName: {
    fontSize: 18,
    marginBottom: 5,
    fontWeight: '600'
  },
  dropoffName: {
    fontSize: 16,
  }
});

class Dashboard extends Component {

  constructor(props) {

    super(props);

    this.state = {
      dataSource: new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2,
      }),
      deliveredDataSource: new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2,
      }),
      archiveDataSource: new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2,
      }),
      loaded: false,
    };

    // BackgroundGeolocation.configure({
    //     desiredAccuracy: 0,
    //     stationaryRadius: 50,
    //     distanceFilter: 50,
    //     disableElasticity: false, // <-- [iOS] Default is 'false'.  Set true to disable speed-based distanceFilter elasticity
    //     locationUpdateInterval: 5000,
    //     minimumActivityRecognitionConfidence: 80,   // 0-100%.  Minimum activity-confidence for a state-change 
    //     fastestLocationUpdateInterval: 5000,
    //     activityRecognitionInterval: 10000,
    //     stopDetectionDelay: 1,  // <--  minutes to delay after motion stops before engaging stop-detection system
    //     stopTimeout: 2, // 2 minutes
    //     activityType: 'AutomotiveNavigation',

    //     // Application config
    //     debug: true, // <-- enable this hear sounds for background-geolocation life-cycle.
    //     forceReloadOnLocationChange: false,  // <-- [Android] If the user closes the app **while location-tracking is started** , reboot app when a new location is recorded (WARNING: possibly distruptive to user) 
    //     forceReloadOnMotionChange: false,    // <-- [Android] If the user closes the app **while location-tracking is started** , reboot app when device changes stationary-state (stationary->moving or vice-versa) --WARNING: possibly distruptive to user) 
    //     forceReloadOnGeofence: false,        // <-- [Android] If the user closes the app **while location-tracking is started** , reboot app when a geofence crossing occurs --WARNING: possibly distruptive to user) 
    //     stopOnTerminate: false,              // <-- [Android] Allow the background-service to run headless when user closes the app.
    //     startOnBoot: true,                   // <-- [Android] Auto start background-service in headless mode when device is powered-up.

    //     // HTTP / SQLite config
    //     url: 'https://onlinelunch-stage.herokuapp.com/api/v1/updateD',
    //     batchSync: false,       // <-- [Default: false] Set true to sync locations to server in a single HTTP request.
    //     autoSync: true,         // <-- [Default: true] Set true to sync each location to server as it arrives.
    //     maxDaysToPersist: 1,    // <-- Maximum days to persist a location in plugin's SQLite database when HTTP fails
    //     headers: {
    //       "X-FOO": "bar"
    //     },
    //     params: {
    //       "auth_token": "maybe_your_server_authenticates_via_token_YES?"
    //     }
    //   });

    //   // This handler fires whenever bgGeo receives a location update.
    //   BackgroundGeolocation.on('location', function(location) {
    //     console.log('- [js]location: ', JSON.stringify(location));
    //   });

    //   // This handler fires whenever bgGeo receives an error
    //   BackgroundGeolocation.on('error', function(error) {
    //     var type = error.type;
    //     var code = error.code;
    //   });

    //   // This handler fires when movement states changes (stationary->moving; moving->stationary)
    //   BackgroundGeolocation.on('motionchange', function(location) {
    //       console.log('- [js]motionchanged: ', JSON.stringify(location));
    //   });

    //   BackgroundGeolocation.start(function() {
    //     console.log('- [js] BackgroundGeolocation started successfully');

    //     // Fetch current position
    //     BackgroundGeolocation.getCurrentPosition({timeout: 30}, function(location) {
    //       console.log('- [js] BackgroundGeolocation received current position: ', JSON.stringify(location));
    //     }, function(error) {});
    //   });
  }

  componentDidMount() {
    this.fetchActual();
    this.fetchDelivered();
    this.fetchArchived();
  }

  fetchActual() {
    var data = new FormData()
    data.append('u', '')
    data.append('p', '')

    fetch("https://onlinelunch-stage.herokuapp.com/api/molly/orders?op=today", {
        method: "POST",
        body: data
    })
    .then((response) => response.json())
    .then((responseData) => {
        this.setState({
          dataSource: this.state.dataSource.cloneWithRows(responseData.orders),
          loaded: true
        })
    })
    .done();
  }

  fetchDelivered() {
    var data = new FormData()
    data.append('u', '')
    data.append('p', '')

    fetch("https://onlinelunch-stage.herokuapp.com/api/molly/orders?op=todayd", {
        method: "POST",
        body: data
    })
    .then((response) => response.json())
    .then((responseData) => {
        this.setState({
          deliveredDataSource: this.state.deliveredDataSource.cloneWithRows(responseData.orders),
          loaded: true
        })
    })
    .done();
  }

  fetchArchived() {
    var data = new FormData()
    data.append('u', '')
    data.append('p', '')

    fetch("https://onlinelunch-stage.herokuapp.com/api/molly/orders?op=archive", {
        method: "POST",
        body: data
    })
    .then((response) => response.json())
    .then((responseData) => {
        this.setState({
          archiveDataSource: this.state.archiveDataSource.cloneWithRows(responseData.orders),
          loaded: true
        })
    })
    .done();
  }

  render() {

    if (!this.state.loaded) {
      return this.renderLoadingView();
    }

    return (
      <View style={styles.container}>
      <ScrollableTabView>
        <ScrollView tabLabel="Aktuella" style={styles.tabView} initialPage={1}>
          <View style={styles.card}>
            <ListView
              dataSource={this.state.dataSource}
              renderRow={this.renderOrder}
              style={styles.listView}/>
          </View>
        </ScrollView>
        <ScrollView tabLabel="Levererade" style={styles.tabView}>
          <View style={styles.card}>
              <ListView
                dataSource={this.state.deliveredDataSource}
                renderRow={this.renderDeliveredOrder}
                style={styles.listView}/>
          </View>
        </ScrollView>
        <ScrollView tabLabel="Arkiverade" style={styles.tabView}>
          <View style={styles.card}>
              <ListView
                dataSource={this.state.archiveDataSource}
                renderRow={this.renderArchiveOrder}
                style={styles.listView}/>
          </View>
        </ScrollView>
      </ScrollableTabView>
    </View>
    );
  }

  renderLoadingView() {
    return (
      <View style={styles.container}>
        <Text>
          Laddar data...
        </Text>
      </View>
    );
  }

  renderOrder(order) {

    try {
      pickups = order.locations["pickup"]
      if (pickups.length > 0){
        var title = pickups[0].title
      } else {
        var title = "Ingen titel"
      }
    } 
    catch (_error) {
      alert(_error)
    }

    return (
        <View style={styles.listObject}>
          <View style={styles.thumbnail}>
            <Text style={styles.title}>#{order.bid}</Text>
            <Text style={styles.time}>TID</Text>
            <Text style={styles.subTime}>{order.time}</Text>
          </View>
          <View style={styles.information}>
            <Text style={styles.restaurantName}>{title}</Text>
            <Text style={styles.dropoffName}>{order.locations.dropoff.address}</Text>
          </View>
        </View>
    );
  }

  renderDeliveredOrder(order) {

    try {
      pickups = order.locations["pickup"]
      if (pickups.length > 0){
        var title = pickups[0].title
      } else {
        var title = "Ingen titel"
      }
    } 
    catch (_error) {
      alert(_error)
    }

    return (
        <View style={styles.listObject}>
          <View style={styles.thumbnail}>
            <Text style={styles.title}>#{order.bid}</Text>
            <Text style={styles.time}>TID</Text>
            <Text style={styles.subTime}>{order.time}</Text>
          </View>
          <View style={styles.information}>
            <Text style={styles.restaurantName}>{title}</Text>
            <Text style={styles.dropoffName}>{order.locations.dropoff.address}</Text>
          </View>
        </View>
    );
  }

  renderArchiveOrder(order) {

    return (
      <TouchableHighlight onPress={this.onPress.bind(order.id)}>
        <View style={styles.listObject}>
          <View style={styles.thumbnail}>
            <Text style={styles.title}>#{order.bid}</Text>
            <Text style={styles.time}>TID</Text>
            <Text style={styles.subTime}>{order.time}</Text>
          </View>
          <View style={styles.information}>
            <Text style={styles.restaurantName}>{title}</Text>
            <Text style={styles.dropoffName}>{order.locations.dropoff.address}</Text>
          </View>
        </View>
        </TouchableHighlight>
    );
  }

  onPress = (index) => {
      this.props.navigator.push({
        title: 'Order',
        component: Order,
        passProps: {
          id: index
        }
      })
    };
}



module.exports = Dashboard;