Develop Reference

How to set an distanceFilter to the flutter location receiving data

I'm trying to set a change settings function to my getLocation() with no lucky. My current locantion it's been updated despite I move or not, what cause noise in my variable. I'm probably defined my change settings function wrongly, and if use the function provided by the docmentation page says the LocationAccuracy isn't defined.
void getCurrentLocation() async {
try {
Uint8List imageData = await getMarker();
var location = await _locationTracker.getLocation();
if (_locationSubscription != null) {
_locationSubscription.cancel();
}
updateMarkerAndCircle(location, imageData);
location.changeSettings(interval: 3000, distanceFilter: 10.0);
_locationSubscription =
_locationTracker.onLocationChanged().listen((newLocalData) {
if (_controller != null) {
_controller.animateCamera(CameraUpdate.newCameraPosition(
new CameraPosition(
bearing: 192.8334901395799,
target: LatLng(newLocalData.latitude, newLocalData.longitude),
tilt: 0,
zoom: 18.00)));
updateMarkerAndCircle(newLocalData, imageData);
}
routesCoordinates.currentLocation =
LatLng(newLocalData.latitude, newLocalData.longitude);
if (routesCoordinates.inCourse) {
routesCoordinates.upDateCurrentLocation();
routesCoordinates.latlngSendBackEnd.add({
"lat_lng": LatLng(newLocalData.latitude, newLocalData.longitude),
"date": DateTime.now().toString(),
});
drawPolyLine.latlng
.add(LatLng(newLocalData.latitude, newLocalData.longitude));
drawPolyLine.drawPolyLine();
}
});
} on PlatformException catch (e) {
if (e.code == 'PERMISSION_DENIED') {
debugPrint("Permission Denied");
}
}
}
Any help, advice or guidance would be greatly appreciated.

I just solved, the sintaxe on the docmentation was wrong.
Future<bool> changeSettings({
LocationAccuracy accuracy = LocationAccuracy.HIGH,
int interval = 1000,
double distanceFilter = 5,
}) {
return _locationTracker.changeSettings(
accuracy: accuracy,
interval: interval,
distanceFilter: distanceFilter,
);
}
LocationAccuracy accuracy = LocationAccuracy.HIGH,
The "high" MUST be capitalized.

Maybe try word await before changeSettings command
await location.changeSettings(interval: 3000, distanceFilter: 10.0);

upload( ) of object FileTransfert not working on some android devices

I developed a mobile app to help sharing things. The user has to give infos about what he is sending and he can add a picture of the object. So i used the cordova file, camera and fileTransfert plugins. It worked fine on most of the devices i tested on, but i discovered that in some other phone, it doesn't. While doing some tests and research on one of those phones, i discovered that the upload() method of FileTransfert i use to send images to online server seems like not able to reach the folder where the image is stored. Here is a sample of my code. Would you please help me to confirm if i am rigth and how to make those phones to be able to post pictures on the platform?
public presentActionSheet(picture) {
if(this.translateService.currentLang=='fr'){
let actionSheet = this.actionSheetCtrl.create({
title: 'Quelle est la source?',
buttons: [
{
icon: 'images',
text: 'Mon téléphone',
handler: () => {
this.takePicture(this.camera.PictureSourceType.PHOTOLIBRARY, picture);
}
},
{
icon: 'camera',
text: 'Ma Camera',
handler: () => {
this.takePicture(this.camera.PictureSourceType.CAMERA, picture);
}
},
{
text: 'Annuler',
role: 'cancel'
}
]
});
actionSheet.present();
}else{
let actionSheet = this.actionSheetCtrl.create({
title: 'What is the source?',
buttons: [
{
icon: 'images',
text: 'My Phone',
handler: () => {
this.takePicture(this.camera.PictureSourceType.PHOTOLIBRARY, picture);
}
},
{
icon: 'camera',
text: 'My Camera',
handler: () => {
this.takePicture(this.camera.PictureSourceType.CAMERA, picture);
}
},
{
text: 'Cancel',
role: 'cancel'
}
]
});
actionSheet.present();
}
};
presentToast(message_error) {
let toast = this.toastCtrl.create({
message: message_error,
cssClass: 'alert-box',
position: 'middle',
showCloseButton: true,
closeButtonText: "OK"
});
toast.present();
}
//Here is the function to take a picture
public takePicture(sourceType, picture) {
// Create options for the Camera Dialog
var options = {
quality: 100,
sourceType: sourceType,
saveToPhotoAlbum: false,
correctOrientation: true
};
// Get the data of an image
this.camera.getPicture(options).then((imagePath) => {
// Special handling for Android library
if (this.platform.is('android') && sourceType === this.camera.PictureSourceType.PHOTOLIBRARY) {
this.filePath.resolveNativePath(imagePath)
.then(filePath => {
let correctPath = filePath.substr(0, filePath.lastIndexOf('/') + 1);
let currentName = imagePath.substring(imagePath.lastIndexOf('/') + 1, imagePath.lastIndexOf('?'));
this.copyFileToLocalDir(correctPath, currentName, this.createFileName(), picture);
});
} else {
console.log('In the else condition');
var currentName = imagePath.substr(imagePath.lastIndexOf('/') + 1);
var correctPath = imagePath.substr(0, imagePath.lastIndexOf('/') + 1);
this.copyFileToLocalDir(correctPath, currentName, this.createFileName(), picture);
}
}, (err) => {
if(this.translateService.currentLang=='fr'){
this.presentToast('Erreur, pas d\'image selectionnée.');
}else{
this.presentToast('Error, no image selected.');
}
});
}
// Create a new name for the image
private createFileName() {
var d = new Date(),
n = d.getTime(),
newFileName = n + ".jpg";
return newFileName;
}
// Copy the image to a local folder
//cordova.file.dataDirectory
private copyFileToLocalDir(namePath, currentName, newFileName, picture) {
this.file.copyFile(namePath, currentName, cordova.file.dataDirectory, newFileName).then(success => {
if(picture == "imageOne"){
this.mainImage = newFileName;
}else if(picture == "imageTwo"){
this.secondImage = newFileName;
}else{
this.thirdImage = newFileName;
}
//this.lastImage = newFileName;
}, error => {
if(this.translateService.currentLang=='fr'){
this.presentToast('Erreur, le fichier n\'a pas pu etre sauvegardé.');
}else{
this.presentToast('Error, file could not be saved.');
}
console.log(error);
});
}
// Always get the accurate path to your apps folder
public pathForImage(img) {
if (img === null) {
return '';
} else {
return cordova.file.dataDirectory + img;
}
}
public uploadImage(picture) {
// Destination URL
var url = "http://donation.oneclub1.org/donation-new/web/api/upload/image?context=donations";
// File for Upload
var targetPath: any;
if(picture == "imageOne"){
targetPath = this.pathForImage(this.mainImage);
}else if(picture == "imageTwo"){
targetPath = this.pathForImage(this.secondImage);
}else{
targetPath = this.pathForImage(this.thirdImage);
}
// File name only
var filename: any;
if(picture == "imageOne"){
filename = this.mainImage;
}else if(picture == "imageTwo"){
filename = this.secondImage;
}else{
filename = this.thirdImage;
}
var options = {
fileKey: "file",
fileName: filename,
chunkedMode: false,
mimeType: "multipart/form-data",
params : {'fileName': filename}
};
const fileTransfer: TransferObject = this.transfer.create();
// Use the FileTransfer to upload the image
return fileTransfer.upload(targetPath, url, options);/*.then(data => {
if(picture == "imageOne"){
this.mainImageLocal = parseInt(data.response);
}else if(picture == "imageTwo"){
this.secondImageLocal = parseInt(data.response);
}else{
this.thirdImageLocal = parseInt(data.response);
}
//this.presentToast('this is your image id'+this.mainImageLocal);
}, err => {
this.loading.dismissAll();
this.presentToast('Error while uploading file.');
})*/;
}
publish(){
if(this.mainImage!=null){
this.loading = this.loadingCtrl.create({
content: this.content2,
});
this.loading.present();
//var categoryId: number;
for(let parent of this.categories){
if(parent.name == this.asking_form_group.value.subcategory){
this.categoryId=parent.id;
console.log('Id found and it is:'+this.categoryId);
break;
};
};
//var userId: number;
if(localStorage.getItem('userId')){
this.userId= parseInt(localStorage.getItem('userId'));
console.log('got the user id in nmber:'+this.userId);
};
var headers = new Headers();
headers.append("Accept", 'application/json');
headers.append('Content-Type', 'application/json' );
let options = new RequestOptions({ headers: headers });
this.uploadImage('imageOne').then(data => {
this.mainImageLocal = parseInt(data.response);
this.postParams = {
name: this.asking_form_group.value.name,
category: this.categoryId,
description: this.asking_form_group.value.description,
image: this.mainImageLocal,
user: this.userId
}
this.http.post(this.Api+"/donations/requests?api_key="+localStorage.getItem('userApiKey'), this.postParams, options).map(res => res.json())
.subscribe(data => {
this.loading.dismissAll();
if(this.translateService.currentLang=='fr'){
this.presentToast('Félicitations!!Votre demande a été postée sur la plateforme!')
}else{
this.presentToast ('Congratulations !! Your request has been posted on the platform!')
}
this.events.publish('ask:posted', 1);
this.navCtrl.setRoot(Dashboard);
}, error => {
console.log(error);
//this.asking_form_group.reset();
this.testor = error.response;
this.loading.dismissAll();
this.presentToast(this.error);
});
});
}else{
this.loading = this.loadingCtrl.create({
content: this.content2,
});
this.loading.present();
//var categoryId: number;
for(let parent of this.categories){
if(parent.name == this.asking_form_group.value.subcategory){
this.categoryId=parent.id;
console.log('Id found and it is:'+this.categoryId);
break;
};
};
if(localStorage.getItem('userId')){
this.userId= parseInt(localStorage.getItem('userId'));
console.log('got the user id in nmber:'+this.userId);
};
var headers = new Headers();
headers.append("Accept", 'application/json');
headers.append('Content-Type', 'application/json' );
let options = new RequestOptions({ headers: headers });
this.postParams = {
name: this.asking_form_group.value.name,
category: this.categoryId,
description: this.asking_form_group.value.description,
image: this.mainImageLocal,
user: this.userId
}
this.http.post(this.Api+"/donations/requests?api_key="+localStorage.getItem('userApiKey'), this.postParams, options).map(res => res.json())
.subscribe(data => {
this.loading.dismissAll();
if(this.translateService.currentLang=='fr'){
this.presentToast('Félicitations!!Votre demande a été postée sur la plateforme!')
}else{
this.presentToast ('Congratulations !! Your request has been posted on the platform!')
}
this.events.publish('ask:posted', 1);
this.navCtrl.setRoot(Dashboard);
}, error => {
console.log(error);
//this.asking_form_group.reset();
this.testor = error.response;
this.loading.dismissAll();
this.presentToast(this.error);
});
};
}

Sorry i found what the issue was and i fogot to put it here. The problem was actually about filesize. Filetransfert default limit is 7.5Mo. Sending file greater than that would fail. In some phones, camera default configurations put the picture size to 8 or greater Mpx. So that why it could not work in those phones.

AsyncStorage+firebase read data hang up application

i'm using React native AsyncStroare with written on firebase when device connected with internet
but i am facing unknown problem which hang up my application which doesn't allow even click event
Anyone has ever faced this kind of problem ever?
i'm sharing code,
import React, { Component, PropTypes } from 'react';
import { StyleSheet, View, Text, Dimensions, AppRegistry, TouchableOpacity, Animated, Button, Alert, Vibration, AsyncStorage, NetInfo} from 'react-native';
import BackgroundGeolocation from 'react-native-mauron85-background-geolocation';
import MapView, { MAP_TYPES } from 'react-native-maps';
import * as firebase from "firebase";
const onStartPress = () => {
BackgroundGeolocation.start(
function (locations) {
Alert.alert('Tracking has been started');
Vibration.vibrate();
}
);
};
const onStopPress = () => {
BackgroundGeolocation.stop(
function (locations) {
Alert.alert('Tracking has been stop');
Vibration.vibrate();
}
);
};
// Initialize Firebase
const firebaseConfig = {
apiKey: "xxxx",
authDomain: "first-project-910a2.firebaseapp.com",
databaseURL: "https://first-project-910a2.firebaseio.com",
storageBucket: "gs://first-project-910a2.appspot.com",
};
const firebaseApp = firebase.initializeApp(firebaseConfig);
const rootRef = firebase.database().ref();
const itemsRef = rootRef.child('gps');
const email = "test#email.com";
const password = "test121";
var uid = 0;
var currentDistance = 0;
var eventOccur = 0;
firebaseApp.auth().signInWithEmailAndPassword(email, password).catch(function(error) {
var errorCode = error.code;
var errorMessage = error.message;
console.log( errorCode + ": "+ errorMessage );
});
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
uid = JSON.stringify(user.uid);
} else {
uid = 0;
}
});
var SchoolJS = require('./SchoolJS.js');
const { width, height } = Dimensions.get('window');
const ASPECT_RATIO = width / height;
const LATITUDE = 23.0123937;
const LONGITUDE = 72.5227731;
const LATITUDE_DELTA = 0.0922;
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;
let id = 0;
let arb = 0.01;
let busGpsCoordinates = [];
let prevlatOffline = 0;
let prevlongOffline = 0;
export default class MyScene extends Component {
constructor(props) {
super(props);
this.state = {
region: {
latitude: LATITUDE,
longitude: LONGITUDE,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA,
},
};
}
componentWillMount() {
BackgroundGeolocation.configure({
desiredAccuracy: 10,
stationaryRadius: 50,
distanceFilter: 50,
locationTimeout: 30,
notificationTitle: 'Background tracking',
notificationText: 'enabled',
debug: false,
startOnBoot: false,
stopOnTerminate: false,
locationProvider: BackgroundGeolocation.provider.ANDROID_ACTIVITY_PROVIDER,
interval: 5000,
fastestInterval: 2000,
activitiesInterval: 5000,
stopOnStillActivity: false,
});
BackgroundGeolocation.on('location', (location) => {
// since I can connect from multiple devices or browser tabs, we store each connection instance separately
// any time that connectionsRef's value is null (i.e. has no children) I am offline
var myConnectionsRef = firebase.database().ref('users/'+uid+'/connections');
// stores the timestamp of my last disconnect (the last time I was seen online)
var lastOnlineRef = firebase.database().ref('users/'+uid+'/lastOnline');
var connectedRef = firebase.database().ref('.info/connected');
connectedRef.on('value', function(snap) {
if (snap.val() === true) {
// We're connected (or reconnected)! Do anything here that should happen only if online (or on reconnect)
// add this device to my connections list
// this value could contain info about the device or a timestamp too
var con = myConnectionsRef.push(true);
// when I disconnect, remove this device
con.onDisconnect().remove();
// when I disconnect, update the last time I was seen online
lastOnlineRef.onDisconnect().set(firebase.database.ServerValue.TIMESTAMP);
//sync with firebase when reconnect
/*BackgroundGeolocation.start(() => {
console.log('[DEBUG] BackgroundGeolocation start successfully');
});*/
AsyncStorage.getItem(uid+"offline").then((value) => {
busGpsJsonObj = JSON.parse(value);
console.log("BUS OBJ : " + busGpsJsonObj);
if(busGpsJsonObj != null){
busGpsJsonObj.forEach(function(locationObj) {
newPostKey = firebase.database().ref().child('gps').push().key;
todaydate = SchoolJS.today();
newPostKey = (newPostKey != "") ? "/"+todaydate+"/"+newPostKey : "";
firebaseApp.database().ref('gps/' + uid+newPostKey).set({
speed : locationObj.speed,
accuracy: locationObj.accuracy,
bearing: locationObj.bearing,
longitude: locationObj.longitude,
altitude: locationObj.altitude,
latitude: locationObj.latitude,
time: locationObj.time,
locationProvider: locationObj.locationProvider,
});
});
AsyncStorage.removeItem(uid+"offline");
busGpsCoordinates = [];
}
}).done();
}
});
//handle your locations here
timekey = JSON.stringify(location.time);
speed = JSON.stringify(location.speed),
accuracy = JSON.stringify(location.accuracy),
bearing = JSON.stringify(location.bearing),
longitude = JSON.stringify(location.longitude),
altitude = JSON.stringify(location.altitude),
latitude = JSON.stringify(location.latitude),
time = JSON.stringify(location.time),
locationProvider = JSON.stringify(location.locationProvider),
timekey = timekey.toString();
newPostKey = firebase.database().ref().child('gps').push().key;
todaydate = SchoolJS.today();
newPostKey = (newPostKey != "") ? "/"+todaydate+"/"+newPostKey : "";
latitude = latitude.replace(/^"(.*)"$/, '$1');
longitude = longitude.replace(/^"(.*)"$/, '$1');
NetInfo.isConnected.fetch().then(isConnected => {
if(!isConnected)
{
if(busGpsCoordinates.length == 0)
{
busGpsCoordinates.push({
speed : speed,
accuracy: accuracy,
bearing: bearing,
longitude: longitude,
altitude: altitude,
latitude: latitude,
time: time,
locationProvider: locationProvider,
});
AsyncStorage.setItem(uid+"offline", JSON.stringify(busGpsCoordinates ) );
}
else
{
prevData = JSON.stringify(busGpsCoordinates[busGpsCoordinates.length - 1] );
prevData = JSON.parse(prevData);
currentDistance = SchoolJS.distance(prevData.latitude,prevData.longitude,latitude,longitude);
if(currentDistance > 30)
{
busGpsCoordinates.push({
speed : speed,
accuracy: accuracy,
bearing: bearing,
longitude: longitude,
altitude: altitude,
latitude: latitude,
time: time,
locationProvider: locationProvider,
});
AsyncStorage.setItem(uid+"offline", JSON.stringify(busGpsCoordinates ) );
}
}
}
});
this.animateRandom(parseFloat(latitude),parseFloat(longitude));
// retrieve the last record from `ref`
if(uid != 0)
{
itemsRef.once("value", function(snapshot) {
var totalChild = snapshot.child(uid).child(todaydate).numChildren();
if(totalChild == 0)
{
firebaseApp.database().ref('gps/' + uid+newPostKey).set({
speed : speed,
accuracy: accuracy,
bearing: bearing,
longitude: longitude,
altitude: altitude,
latitude: latitude,
time: time,
locationProvider: locationProvider,
});
}
});
itemsRef.child(uid).child(todaydate).limitToLast(1).on('child_added', function(snapshot) {
previousLatitude = JSON.stringify(snapshot.val().latitude);
previousLongitude = JSON.stringify(snapshot.val().longitude);
previousLatitude = previousLatitude.replace(/^"(.*)"$/, '$1');
previousLongitude = previousLongitude.replace(/^"(.*)"$/, '$1');
latitude = latitude.replace(/^"(.*)"$/, '$1');
longitude = longitude.replace(/^"(.*)"$/, '$1');
currentDistance = SchoolJS.distance(previousLatitude,previousLongitude,latitude,longitude);
eventOccur++;
if(currentDistance > 30)
{
firebaseApp.database().ref('gps/' + uid+newPostKey).set({
speed : speed,
accuracy: accuracy,
bearing: bearing,
longitude: longitude,
altitude: altitude,
latitude: latitude,
time: time,
locationProvider: locationProvider,
});
}
});
}
});
BackgroundGeolocation.on('stationary', (stationaryLocation) => {
//handle stationary locations here
console.log(JSON.stringify(stationaryLocation));
});
BackgroundGeolocation.on('error', (error) => {
console.log('[ERROR] BackgroundGeolocation error:', error);
});
BackgroundGeolocation.isLocationEnabled((success, fail) => {
if(success != 1 && fail == "undefined")
{
BackgroundGeolocation.stop(() => {
console.log('[DEBUG] BackgroundGeolocation stop successfully');
});
}
});
}
onRegionChange(region) {
this.setState({ region });
}
jumpRandom() {
this.setState({ region: this.randomRegion() });
}
animateRandom(newLatitude = LATITUDE ,newLongitude = LONGITUDE) {
this.map.animateToRegion(this.randomRegion(newLatitude, newLongitude));
}
randomRegion(newLatitude = LATITUDE ,newLongitude = LONGITUDE) {
const { region } = this.state;
return {
...this.state.region,
latitude: newLatitude,
longitude: newLongitude,
};
}
render() {
return (
<View style={styles.container}>
<MapView
showsUserLocation = { true }
provider={this.props.provider}
ref={ref => { this.map = ref; }}
mapType={MAP_TYPES.TERRAIN}
style={styles.map}
initialRegion={this.state.region}
onRegionChange={region => this.onRegionChange(region)}
>
<MapView.Marker.Animated
coordinate={this.state.region}
/>
</MapView>
<View style={styles.buttonContainer}>
<TouchableOpacity
onPress={onStartPress}
style={[styles.bubble, styles.button]}
>
<Text>Start</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={onStopPress}
style={[styles.bubble, styles.button]}
>
<Text>Stop</Text>
</TouchableOpacity>
</View>
</View>
)
}
}
MyScene.propTypes = {
provider: MapView.ProviderPropType,
};
const styles = StyleSheet.create({
container: {
...StyleSheet.absoluteFillObject,
justifyContent: 'flex-end',
alignItems: 'center',
},
map: {
...StyleSheet.absoluteFillObject,
},
bubble: {
backgroundColor: 'rgba(255,255,255,0.7)',
paddingHorizontal: 18,
paddingVertical: 12,
borderRadius: 20,
},
latlng: {
width: 200,
alignItems: 'stretch',
},
button: {
width: 80,
paddingHorizontal: 12,
alignItems: 'center',
marginHorizontal: 10,
},
buttonContainer: {
flexDirection: 'row',
marginVertical: 20,
backgroundColor: 'transparent',
},
});
anyone can help me out from this problem.

React native listview does not show all the rows

I have a questionnaire application which works fine on Android. However on iOS, the ListView never shows all the questions. Of the 11 questions in the questionnaire. only about 2 or 2.5 of them are rendered. A small amount of scrolling does seem to happen based on the size off the emulator window. I have tried all the suggestion posted including:
- setting the height of the ListView item using Dimensions
- setting flex:1 up the container hierarchy.
But nothing seems to work.
I am posting a much abridged and modified version of the code that uses NativeBase's RadionButton. My original code uses my own home-brewed radio buttons, but all of them have the same problem. I would appreciate any help I can get on this problem. Thanks in advance.
Here is my code:
import React, { Component } from 'react';
import {
Alert,
StyleSheet,
// Text,
TextInput,
View,
ListView,
TouchableHighlight,
Dimensions,
} from 'react-native';
import Svg,{
Rect,
} from 'react-native-svg';
import { Actions } from 'react-native-router-flux';
import realm from './realm';
import Utils from './Utils';
import moment from 'moment';
import { Container, Content, InputGroup, Input,
List, ListItem, Text, Radio } from 'native-base';
require('Dimensions');
const windowDims = Dimensions.get('window');
///////////////////////////////////////////////////////////////////////////////
const WhenSymptom = 0;
const FrequencySymptom = 1;
const FeelingSymptom = 2;
const YesNoSymptom = 3;
const ValueSymptom = 4;
global.junk = "hello";
var SymptomValues = new Array
(
// WhenSymptom
[ "none", "only after inactivity", "mostly AM", "AM and PM", "all the time" ],
// FrequencySymptom
[ "None", "Less than usual", "Usual", "More than usual", "Very bothersome" ],
// FeelingSymptom
[ "Great", "Fair", "So-so", "Poor", "Terrible" ],
// YesNoSymptom
[ "No", "", "", "", "Yes" ],
// ValueSymptom
[]
);
// var questions = new Array
global.questions = new Array
(
{ rowIndex: 0,
chartTitle: "Tremors",
answer: 0},
{ rowIndex: 1,
chartTitle: "Speech-slurring",
answer: 1},
{ rowIndex: 2,
chartTitle: "Feeling-stuck",
answer: 2},
{ rowIndex: 3,
chartTitle: "Instability",
answer: 3},
{ rowIndex: 4,
chartTitle: "Anxiety",
answer: 4},
{ rowIndex: 5,
chartTitle: "# of steps",
answer: 1},
{ rowIndex: 6,
chartTitle: "Pain or aches",
answer: 3},
{ rowIndex: 7,
chartTitle: "Day drowsiness",
answer: 2},
{ rowIndex: 8,
chartTitle: "Urinary urgency",
answer: 1},
{ rowIndex: 9,
chartTitle: "Constipation",
answer: 0},
{ rowIndex: 10,
chartTitle: "Overall feeling",
answer: 2}
);
var colors = new Array( "green", "#dbdb70", "yellow", "orange", "red" );
var styles = StyleSheet.create({
list: {
flexDirection: 'column',
flex:1,
//height: windowDims.height-30,
marginTop: 52,
},
questionText: {
flex:1,
fontSize: 14,
// color: 'white',
color: 'black',
alignSelf: 'flex-start'
},
});
var junk = 0;
// const mySaveAction = () => console.log('Back From the Questions page ');
///////////////////////////////////////////////////////////////////////////////
export default class QuestionsPage extends Component {
constructor(props){
super(props);
console.log("numToPop: " + this.props.numToPop);
var ds = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 != r2
//rowHasChanged: (r1, r2) => true
});
// if it is a new panel, set all the answers to -1
let answersIn = new Array(questions.length);
if (this.props.panel == null) {
for (let i in questions) {
answersIn[i] = -1;
questions[i].answer = -1;
}
}
else {
answersIn = this.props.panel.symptoms.split(",");
for (let i in questions) {
questions[i].answer = answersIn[i];
}
}
this.state = {
ds: questions,
dataSource:ds,
editAllowed: 0,
initialAnswers: answersIn,
behavior: 'position'
// there is three ways to adjust (position , height , padding )
}
}
///////////////////////////////////////////////////////////////////////////////
componentDidMount(){
this.setState({
dataSource:this.state.dataSource.cloneWithRows(this.state.ds),
});
// When we come in here with newPanel == 1, the route was
// MenuPage => QuestionsPage; so cancel should just be
// Actions.pop(). If newPanel == 0, , the route was
// MenuPage => Calendar => QuestionsPage; so cancel should call Actions.pop(2)
Actions.refresh({ onRight: () => { this._saveButtonPressed(); },
onBack: () => { this._cancelButtonPressed(); },
title: (this.props.panel == null ?
"New panel" :
(" Panel of " +
Utils.readableDate(this.props.panel.panelDate)))
});
}
///////////////////////////////////////////////////////////////////////////////
_saveButtonPressed() {
var finalAnswers = new Array(questions.length);
var panelChanged = 0;
var dateString;
for (let i=0; i<finalAnswers.length; i++) {
finalAnswers[i] = questions[i].answer;
if (finalAnswers[i] != this.state.initialAnswers[i])
panelChanged = 1;
}
var symptoms = "" + finalAnswers[0];
for (let i=1; i<finalAnswers.length; i++) {
symptoms = (symptoms + "," + finalAnswers[i]);
}
console.log("_saveButtonPressed panelChanged: " + panelChanged);
if (this.props.panel == null) {
if (panelChanged) {
let myPanelKey = Utils.newPanelKey();
this._updateDB(myPanelKey, symptoms);
}
Actions.pop();
}
else {
if (panelChanged) {
this._updateDB(this.props.panel.panelDate, symptoms);
}
// Kluge:
this._returnFromScreen();
}
}
///////////////////////////////////////////////////////////////////////////////
_updateDB(myPanelDate, symptoms) {
console.log("_updateDB dt: " + moment(myPanelDate).toString() +
" symptoms: " + symptoms);
// var dateString = Utils._myISOString(myPanelDate);
realm.write(() => {
realm.create('Symptoms', {panelDate: myPanelDate, symptoms: symptoms}, true);
});
console.log("Trace");
let after = realm.objects('Symptoms');
for (let i=0; i<after.length; i++) {
console.log("panelDate: " + moment(after[i].panelDate).toString() +
" (" + after[i].panelDate + " )" +
"; symptoms: " + after[i].symptoms);
}
}
///////////////////////////////////////////////////////////////////////////////
_returnFromScreen() {
if (this.props.numToPop == 1)
Actions.pop();
else
Actions.pop({popNum: 2});
}
///////////////////////////////////////////////////////////////////////////////
_cancelButtonPressed() {
console.log("_cancelButtonPressed in QuestionsPage numToPop: " +
this.props.numToPop);
this._returnFromScreen();
}
///////////////////////////////////////////////////////////////////////////////
_rowPressed(rowData){
console.log("In _rowPressed");
}
///////////////////////////////////////////////////////////////////////////////
_buttonPressed(rowIndex, value, forceEdit = 0){
// console.log("In _buttonPressed " + rowIndex + " " + value);
let newDs = this.state.ds.slice();
newDs[rowIndex] = {
...this.state.ds[rowIndex],
answer: value,
};
// This is absolutely essential to do!!!!!
questions[rowIndex].answer = value;
this.setState({
dataSource:this.state.dataSource.cloneWithRows(newDs),
})
// this.forceUpdate();
// console.log("answers: " + this.state.answers);
}
///////////////////////////////////////////////////////////////////////////////
_renderButton(rowIndex, column){
return (
<ListItem>
<Radio selected={this.state.ds[rowIndex].answer == column ? true : false} />
<Text>{SymptomValues[0][column]}</Text>
</ListItem>
);
}
///////////////////////////////////////////////////////////////////////////////
_renderRow(rowData){
// console.log("renderRow " + this.state.ds[rowData.rowIndex].answer);
return (
<View style={styles.list}>
<Text style={styles.questionText}>Question {rowData.rowIndex+1}.</Text>
<Container>
<Content>
<List>
{ this._renderButton(rowData.rowIndex, 0) }
{ this._renderButton(rowData.rowIndex, 1) }
{ this._renderButton(rowData.rowIndex, 2) }
{ this._renderButton(rowData.rowIndex, 3) }
{ this._renderButton(rowData.rowIndex, 4) }
</List>
</Content>
</Container>
</View>
);
}
///////////////////////////////////////////////////////////////////////////////
render(){
// console.log("render");
return (
<ListView style={styles.list}
dataSource = {this.state.dataSource}
renderRow = {this._renderRow.bind(this)}>
</ListView>
);
}
}
module.exports = QuestionsPage;
// Util.js
import moment from 'moment';
let Utils = {
// toISOString returns (YYYY-MM-DDTHH:mm:ss.sssZ
newPanelKey: function() {
let myPanelDate = moment();
myPanelDate.milliseconds(0);
myPanelDate.seconds(0);
myPanelDate.minutes(0);
return myPanelDate.valueOf();
},
readableDate: function(utc) {
return moment(utc).format("MMM D, YYYY#ha");
},
readableDateNoTime: function(utc) {
return moment(utc).format("MMM D, YYYY");
},
shortDate: function(utc) {
let mom = moment(utc);
let date = mom.format("DDMMM:hha");
return date.substring(0,date.length-1);
}
}
module.exports = Utils;

Appcelerator Titanium - why isn't my button showing?

In Titanium, I have the following code:
var dbWindow = Ti.UI.currentWindow;
var Cloud = require('ti.cloud');
var data = [];
var rowid;
var rowindex;
var table;
var db;
/**
* Creates TableView from database
*/
function makeTable() {
db = Ti.Database.open('myDb');
try {
var rows = db.execute('SELECT * from boatData');
var boatName;
var rowLabel;
while (rows.isValidRow()) {
tableRow = Ti.UI.createTableViewRow({
backgroundSelectedColor : 'red',
rowid : rows.fieldByName('id'),
loa : rows.fieldByName('loa'),
lwl : rows.fieldByName('lwl'),
beam : rows.fieldByName('beam'),
displacement : rows.fieldByName('displacement'),
sailArea : rows.fieldByName('sailArea')
});
boatName = rows.fieldByName('boatName');
rowLabel = Ti.UI.createLabel({
text : boatName,
color : 'black',
font : {
fontSize : 22
},
touchEnabled : false
});
tableRow.add(rowLabel);
tableRow.Label = rowLabel;
data.push(tableRow);
rows.next();
}
rows.close();
db.close();
table = Titanium.UI.createTableView({
data : data,
backgroundColor : 'pink',
headerTitle : 'Boats',
height : '75%',
allowsSelection : true
});
} catch (e) {//database table not found
db.close();
var alertWindow = Titanium.UI.createAlertDialog({
message : 'No data found! Please save data first',
buttonNames : ['OK']
});
alertWindow.addEventListener('click', function(e) {
dbWindow.close();
});
alertWindow.show();
}
}
makeTable();
table.addEventListener('click', function(e) {
rowid = e.rowData.rowid;
rowindex = e.index;
Ti.App.loaBox.value = e.rowData.loa;
Ti.App.lwlBox.value = e.rowData.lwl;
Ti.App.beamBox.value = e.rowData.beam;
Ti.App.displacementBox.value = e.rowData.displacement;
Ti.App.saBox.value = e.rowData.sailArea;
openButton.title = 'Get Data';
selected.text = 'Your selection: ' + e.row.Label.text;
deleteButton.visible = true;
});
var parentView = Titanium.UI.createView({
width : '100%',
height : '100%',
layout : 'vertical'
});
parentView.add(table);
var selectionView = Ti.UI.createView({
top : 5,
height : '10%',
layout : 'vertical'
});
var info = Ti.UI.createLabel({
text : 'Click on a boat name to get data or delete.',
color : 'black',
font : {
fontSize : 25
}
});
var selected = Ti.UI.createLabel({
color : 'red',
font : {
fontSize : 25
}
});
selectionView.add(info);
selectionView.add(selected);
parentView.add(selectionView);
var buttons = Ti.UI.createView({
top : 5,
layout : 'horizontal'
});
var lowerButtons = Ti.UI.createView({
top : 5,
layout : 'horizontal'
});
var openButton = Ti.UI.createButton({
backgroundColor : 'pink',
borderColor : 'red',
borderWidth : 2,
font : {
fontSize : 22
},
title : 'Back',
right : 5
});
openButton.addEventListener('click', function(e) {
dbWindow.close();
});
var deleteButton = Ti.UI.createButton({
backgroundColor : 'pink',
borderColor : 'red',
borderWidth : 2,
font : {
fontSize : 22
},
title : 'Delete',
left : 5
});
deleteButton.visible = false;
deleteButton.addEventListener('click', function(e) {
var db = Ti.Database.open('myDb');
db.execute('DELETE FROM boatData WHERE id=' + rowid);
db.close();
table.deleteRow(rowindex);
Ti.App.loaBox.value = '';
Ti.App.lwlBox.value = '';
Ti.App.beamBox.value = '';
Ti.App.displacementBox.value = '';
Ti.App.saBox.value = '';
deleteButton.visible = false;
openButton.title = 'Back';
selected.text = '';
});
var saveToCloudButton = Ti.UI.createButton({
backgroundColor : 'pink',
borderColor : 'red',
borderWidth : 2,
font : {
fontSize : 22
},
title : 'Save boats to cloud',
left : 5
});
saveToCloudButton.addEventListener('click', function(e) {
saveToCloud();
});
buttons.add(openButton);
buttons.add(deleteButton);
lowerButtons.add(saveToCloudButton);
parentView.add(buttons);
parentView.add(lowerButtons);
dbWindow.add(parentView);
/**
* Saves database to cloud
*/
function saveToCloud() {
var dbName = 'myDb';
var dbPath;
var dbFile;
if (Ti.Platform.osname == 'android') {
dbPath = 'file:///data/data/' + Ti.App.getID() + '/databases/';
dbFile = Ti.Filesystem.getFile(dbPath + dbName);
} else {
dbPath = Ti.Filesystem.applicationSupportDirectory + '/database/';
dbFile = Ti.Filesystem.getFile( dbPath + dbName + '.sql' );
}
Cloud.Users.secureLogin({
title : 'Sign In'
}, function(e) {
if (e.success) {
Cloud.Files.create({
name : dbName,
file : dbFile
}, function(e) {
if (e.success) {
var file = e.files[0];
alert('Boats successfully backed up to cloud!');
} else {
alert('Error:\n' + ((e.error && e.message) || JSON.stringify(e)));
}
});
} else {
alert('Error:\\n' + ((e.error && e.message) || JSON.stringify(e)));
}
});
}
However, for some odd reason, my saveToCloudButton does not appear. I tried manually setting the visibility, and that didn't work. Does anyone know what am I doing wrong?
EDIT: Added full code.

Make the top different for both the views
var buttons = Ti.UI.createView({
top : 5,
layout : 'horizontal'
});
var lowerButtons = Ti.UI.createView({
top : 60,
layout : 'horizontal'
});
Thanks

I figured out my problem. I needed to set height values to buttons and lowerButtons.