beachsafe

beach_panel.js

var util = require('util');

var args = $.args;


// UX HERE!!
$.row.args = args;
//$.row.left = args.left;

// Set width
if (args.width != null) {
    $.row.width = args.width;
}

// Set Value for UX Elements
$.title.text = util.ellipsize(args.title || '', 34);

// Set weather
if (args.weather != null) {
    $.weather.text = args.weather;
}
if (!Alloy.Globals.online) {
    $.celcius.hide();
}

// Set distance
if (args.distance <= 2) {
    $.distance.text = Math.round(args.distance * 1000) + "m";
} else {
    $.distance.text = Math.round(args.distance) + "km";
}

// Set patrolled flag
if (args.patrol >= 1) {
    $.patrol.image = "images/patrolled.gif";
} else {
    $.patrol.image = null;
}

// Set image
if (args.mobileImage) {
  //  $.beachImage.image = args.mobileImage;
}

// Listener Events HERE!
$.getView().addEventListener('click', function (e) {
    return openBeach(args);
});

// FUNCTIONS HERE!!!
function openBeach(data) {
    Alloy.Globals.tabs.activeTab.open(Alloy.createController('beaches/beach_show', {
        data: data
    }).getView());
}

beach_panel.tss

"#row":  {
  height: 180,
  width: 180,
  backgrounColor: "#999"
}

"#beachImage": {
  right: 10,
  top: 5,
  bottom: 50,
  width: '100%',
  height: 135
}

"#title" : {
  left: '5',
  bottom: '18',
  color: '#000',
  font: {
    fontSize: 16,
    fontWeight: 'bold'
  }
}


"#patrol": {
  right: 15,
  bottom: 25,
  width: 16,
  height: 10
}

"#distance": {
  right: '15',
  bottom: '5',
  color: '#000',
  font: {
    fontSize: 12
  }
}


"#weather": {
  left: '5',
  bottom: '5',
  font: {
    fontSize: 12
  },
  color: '#000'
}


"#celcius": {
 left: 35,
 bottom: '5',
 font: {
    fontSize: 12
  },
  color: '#000' 
}

beach_panel.xml

<Alloy autoStyle="true">
    <View id="row">
        <Label id="title"></Label>
        <Label id="distance"></Label>
        <Label id="weather"></Label>
        <Label id="celcius">°C</Label>
        <!--<Label id="follow"></Label>-->
        <View platform='ios' clipMode="Titanium.UI.iOS.CLIP_MODE_ENABLED">
                <ImageView id="beachImage" image="images/noimage.png"/>
        </View>
        <View platform="android">
            <!--<ImageView id="beachImage" image="images/noimage.png"/>-->
        </View>
        <ImageView id="patrol" />
    </View>
</Alloy>

index.js

var args = $.args;
var beachsafe = Alloy.Globals.Beachsafe;

Alloy.Globals.amInProgress = false;


// Listener Events HERE!
// Reload Nearby Beaches
Ti.App.addEventListener('reloadHome', function (params) {
    Ti.API.info('reloadHome trigger');
    fetchNearbyBeaches();
});

Ti.App.addEventListener('reloadMyBeach', function (params) {
    Ti.API.info('reloadMyBeach homepage');
    fetchMineBeaches();
});


// Around me - View on map
$.AM_viewOnMap_Wrapper.addEventListener('click', function (e) {
    Ti.API.info("click on AM Map");

    // disabled button for 2s
    if (!Alloy.Globals.amInProgress) {
        Ti.API.info("not in progress executing");
        Alloy.Globals.amInProgress = true;
        $.AM_explore.color = Alloy.CFG.colors.lightblue;
        beachsafe.search(
            lon,
            lat,
            Alloy.Globals.location.title,
            {},
            true,
            'map'
        );
        setTimeout(function () {
            Alloy.Globals.amInProgress = false;
            $.AM_explore.color = Alloy.CFG.colors.darkblue;
            Ti.API.info("AM_viewOnMap_Wrapper mark as NOT in progress");
        }, 1000)
    } else {
        Ti.API.info("in progress do noting");
    }


});

// Around Me - Explore
$.AM_explore_Wrapper.addEventListener('click', function (e) {

    if (!Alloy.Globals.amMapInProgress) {
        Ti.API.info("not in progress executing");
        Alloy.Globals.amMapInProgress = true;
        $.AM_explore.color = Alloy.CFG.colors.lightblue;
        Ti.API.info("click on AM_explore_Wrapper");
        beachsafe.search(
            lon,
            lat,
            Alloy.Globals.location.title,
            {},
            true,
            'list'
        );
        setTimeout(function () {
            Alloy.Globals.amMapInProgress = false;
            $.AM_explore.color = Alloy.CFG.colors.darkblue;
            Ti.API.info("AM_explore_Wrapper mark as NOT in progress");
        }, 1000)
    } else {
        Ti.API.info("in progress do noting");
    }
});

// My Beaches - Explore
$.MB_explore_Wrapper.addEventListener('click', function (e) {
    Ti.API.info("my beach clicked");
    Alloy.Globals.tabs.setActiveTab(2);
});

// Surf Ed Button
$.findButton.addEventListener('click', function (e) {
    Ti.API.info("findButton clicked");
    Alloy.Globals.tabs.setActiveTab(3);
});


if (OS_IOS) {
    // IOS
    // Refresh Location
    $.rightLabel.addEventListener('click', function (e) {
        refreshLocation();
    });
} else {
    // Android
    // var activity = Alloy.Globals.tabs.activity;
    //
    // activity.onCreateOptionsMenu = function (e) {
    //     var menu = e.menu;
    //     Ti.API.info(JSON.stringify(e));
    //
    //     // Menu Item 1
    //     var menuItem1 = menu.add({
    //         title: 'menu',
    //         showAsAction: Ti.Android.SHOW_AS_ACTION_ALWAYS
    //     });
    //     menuItem1.addEventListener('click', function (e) {
    //         alert("click vole");
    //     });
    //
    // };

}


// Run them

// UX HERE!!
fetchNearbyBeaches();
fetchMineBeaches();


// Social LInks
$.twitterImage.addEventListener('click', function (e) {
    openSafari('https://twitter.com/SLSAustralia');
});

$.googlePlusImage.addEventListener('click', function (e) {
    openSafari('https://plus.google.com/115166029268750582318/posts');
});

$.facebookImage.addEventListener('click', function (e) {
    openSafari('https://www.facebook.com/lifesaving');
});

// PLATROFM


// FUNCTIONS HERE!!!

function openSafari(url) {
    Titanium.Platform.openURL(url);
}

function fetchMineBeaches() {

    if (!Alloy.Globals.online) {
        Ti.API.info("Offline not calling my beaches for now");
        return;
    }
    Ti.API.info("Online calling my beaches");

    beachsafe.getMineBeaches(
        function (beaches) {
            Ti.API.info("getMineBeaches running..");

            Alloy.Globals.mybeaches = beaches;
            var i = 0;
            var left = panelSize();
            $.myBeachesList.removeAllChildren();
            _.each(beaches, function (item) {
                var panel = Alloy.createController("beaches/beach_panel", {
                    width: left,
                    rowId: i++,
                    id: item.id,
                    url: item.url,
                    key: item.key,
                    title: item.title,
                    city: item.city,
                    distance: item.distance,
                    weather: item.weather,
                    mobileImage: item.mobileImage,
                    i_follow: item.i_follow,
                    patrol: item.patrol
                }).getView();

                $.myBeachesList.add(panel);

            });
            $.myBeachesView.contentWidth = left * i;
            Ti.API.info("getMineBeaches end..");

        },
        function () {
            Ti.API.error("Error loading my beaches");
        }
    );
}

function fetchNearbyBeaches() {
    Alloy.Globals.loading.show('Loading..', false);
    var lat = Ti.App.Properties.getDouble("lat", null);
    var lon = Ti.App.Properties.getDouble("lon", null);

    beachsafe.getBeaches(
        lon,
        lat,
        [],
        function (data) {
            Ti.API.info("getBeaches running..");
            Ti.API.info(data);
            var beaches = data.beaches;
            Alloy.Globals.beaches = beaches;
            var location = data.location;
            Alloy.Globals.location = data.location;
            var rows = [];
            var i = 0;
            var left = panelSize();

            if(OS_IOS) {
                $.rightLabel.title = location.title;
            }

            $.aroundMeList.removeAllChildren();

            Ti.API.info("Location: " + location.title);
            _.each(beaches, function (item) {
                var panel = Alloy.createController("beaches/beach_panel", {
                    width: left,
                    rowId: i++,
                    id: item.id,
                    url: item.url,
                    key: item.key,
                    title: item.title,
                    city: item.city,
                    distance: item.distance,
                    weather: item.weather,
                    mobileImage: item.mobileImage,
                    i_follow: item.i_follow,
                    patrol: item.patrol
                }).getView();

                $.aroundMeList.add(panel);
            });
            $.aroundMeView.contentWidth = left * i;
            Alloy.Globals.loading.hide();
        },
        function () {
            Ti.API.error("Error loading beaches");
            Alloy.Globals.loading.hide();
        }
    );
}

function panelSize() {
    if (Ti.Platform.displayCaps.platformWidth >= 768) {
        var width = Ti.Platform.displayCaps.platformWidth / 2.8;
    } else {
        var width = Ti.Platform.displayCaps.platformWidth / 1.8;
    }
    Ti.API.info("platformWidth: " + Ti.Platform.displayCaps.platformWidth);
    Ti.API.info("panelSize: " + width);
    return width;
}

function refreshLocation() {
    Ti.API.info("rightLabel clicked");

    Ti.API.info("asking for Location");
    Ti.Geolocation.getCurrentPosition(function (e) {
        Ti.API.info("Location" + JSON.stringify(e.coords));
        if (typeof e.coords !== "undefined") {

            if (e.coords.longitude !== Ti.App.Properties.getDouble("lon") && e.coords.latitude !== Ti.App.Properties.getDouble("lat")) {
                lon = e.coords.longitude;
                Ti.App.Properties.setDouble("lon", lon);
                lat = e.coords.latitude;
                Ti.App.Properties.setDouble("lat", lat);
                Ti.API.info('long:' + lon + ' lat: ' + lat);
                fetchNearbyBeaches();
            } else {
                Ti.API.info('Location has not changed, doing nothing:');
            }

        }

    });
}

index.tss

'Label' : {
  color: Alloy.CFG.colors.darkblue
}

".breadcrumb" : {
  font: {
    fontSize: 18,
    fontWeight: 'bold'
  }
}

".navigation": {
  left : 15,
  top : 10,
  right: 15,
  height: 30
}


".title" : {
  font: {
    fontSize: 18,
    fontWeight: 'bold'
  },
  left : 5,
  bottom : 0,
  width: Ti.UI.SIZE
}

".viewOnMap" : {
  font: {
    fontSize: 13
  },

}

"#AM_viewOnMap_Wrapper" : {
  right: 90,
  bottom : 0,
  top: 0,
  height: 30,
  width: 80
}

"#AM_explore_Wrapper": {
  right: 10,
  bottom : 0,
  top: 0,
  height: 30,
  width: 70
}

"#MB_explore_Wrapper": {
  right: 10,
  bottom : 0,
  top: 0,
  height: 30,
  width: 70
}

".explore" : {
  font: {
    fontSize: 13
  }
}


"#infoView" : {
  top: 10,
  left: 0,
  height: 300,
  width: '100%',
  backgroundImage: 'images/surf/banner_surfed_01.jpg'
}

"#surfImage": {
    top:0,
    zIndex: -1
}

"#infoTitle": {
  font: {
    fontSize: 35,
    fontWeight: 'bold'
  },
  textAlign: Titanium.UI.TEXT_ALIGNMENT_LEFT,
  left: 20,
  top: 20,
  color: "#fff"
}

"#infoDescription": {
  font: {
    fontSize: 18
  },
  textAlign: Titanium.UI.TEXT_ALIGNMENT_LEFT,
  left: 10,
  top: 60,
  color: "#fff"
}

"#findButton": {
    font: {
      fontWeight: 'bold'
    },
    top: 50,
    color: "#fff",
    left: 10,
    borderColor: "#fff",
    borderWidth: 1,
    width: 120
}

"#socialView" : {
  top: 10,
  left: 0,
  height: 140,
  width: '100%',
//  backgroundColor: Alloy.CFG.colors.red
}

"#socialLabel": {
  font: {
    fontSize: 18,
    fontWeight: 'bold'
  },
  textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
  top: 20,
  width: '100%',
  color: Alloy.CFG.colors.darkblue
}

"#twitterImage": {
  top: 20,
  left: '25%',
  width: 30,
}

"#googlePlusImage": {
  top: 20,
  left: '15%',
  width: 30,
}

"#facebookImage": {
  top: 20,
  left: '15%',
  width: 30,
}

index.xml

<Alloy>
    <Window class="container" backgroundColor="#ffffff" titleImage="icons/home.png">

        <RightNavButton platform='ios'>
            <Button id="rightLabel" title=""/>
        </RightNavButton>

        <Menu platform="android" id="menu">
            <MenuItem itemId="rightLabel" id="rightLabel" title="Location" onClick="refreshLocation"
                      showAsAction="Ti.Android.SHOW_AS_ACTION_IF_ROOM"/>
        </Menu>

        <!--<Menu platform='android'>-->
        <!--<MenuItem>-->
        <!--<Button id="rightLabel" title=""/>-->
        <!--</MenuItem>-->
        <!--</Menu>-->

        <ScrollView
                canCancelEvents="false"
                disableBounce="true"
                left="0"
                right="0"
                showVerticalScrollIndicator="false"
                showHorizontalScrollIndicator="false"
                scrollType="vertical"
                layout="vertical"
                height="100%"
                width="100%"
        >

            <View class="navigation">

                <Label id="AM" class="title">
                    Around Me
                </Label>

                <View id="AM_viewOnMap_Wrapper">
                    <Label id="AM_viewOnMap" class="viewOnMap">
                        View on map
                    </Label>
                </View>

                <View id="AM_explore_Wrapper">
                    <Label id="AM_explore" class="explore">
                        Explore
                    </Label>
                </View>

            </View>

            <ScrollView id="aroundMeView"
                        scrollType="horizontal"
                        height="180"
                        contentHeight="180"
                        left="15"
                        right="15"
                        contentWidth="2000"
                        showHorizontalScrollIndicator="true"
            >
                <View id="aroundMeList" height="180"  layout="horizontal">
                </View>

            </ScrollView>

            <View class="navigation">
                <Label id="MB" class="title">
                    My Beaches
                </Label>
                <View id="MB_explore_Wrapper">
                    <Label id="MB_explore" class="explore">
                        Explore
                    </Label>
                </View>

            </View>
            <ScrollView id="myBeachesView"
                        scrollType="horizontal"
                        height="180"
                        contentHeight="180"
                        left="15"
                        right="15"
                        top="0"
                        contentWidth="2000"
                        showHorizontalScrollIndicator="true"
            >
                <View id="myBeachesList" height="180" layout="horizontal"/>

            </ScrollView>

            <View id="infoView" layout="vertical">
                <Label id="infoTitle">
                    RIP CURRENTS
                </Label>
                <Label id="infoDescription">
                    Find out what you don’t know about rips..
                </Label>
                <Button id="findButton">Learn more</Button>
            </View>

            <View id="socialView" layout="horizontal">
                <Label id="socialLabel">SOCIAL</Label>
                <ImageView id="twitterImage" image="social/twitter.png"/>
                <ImageView id="googlePlusImage" image="social/google-plus.png"/>
                <ImageView id="facebookImage" image="social/facebook.png"/>
            </View>

        </ScrollView>
    </Window>
</Alloy>