<template>
    <Page class="page">
        <ActionBar class="action-bar">
            <Label class="action-bar-title" text="Geolocation Demo"></Label>
        </ActionBar>

        <StackLayout>
            <Label v-if="needLocation" text="Looking up your location..." />
            <Label v-if="locationFailure" text="Sorry, I failed! :(" />
            <Label v-if="location" :text="locationDescription" textWrap="true" />
        </StackLayout>

    </Page>
</template>

<script>
import * as Geolocation from 'nativescript-geolocation';
import LocationService from '../api/LocationService';

export default {
    data() {
        return {
            needLocation:true,
            locationFailure:false,
            location:null
        }
    },
    computed: {
        locationDescription() {
            return `You are at ${this.location.latitude}, ${this.location.longitude}. Your altitude is ${this.location.altitude}.`;
        }
    },
    async created() {
        console.log('lets try to get location!!');

        let locs = await LocationService.getLocations();
        console.log('got locs maybe', loc);

    }
};
</script>

<style scoped lang="scss">
    // Start custom common variables
    @import '../app-variables';
    // End custom common variables
</style>