Nomination mobile - part 4

This post its a part of a series about creating an app with node.js and express for Facebook... this time for mobile browsers

Part 1

Part 2

Part 3

Version en español

Desktop version:

Part 10

*NOTE: jqm = jquery mobile

Now lets put the functionality for vote, delete and invite friends to the application

To start lets add a feature to the list of friends in the details of a nomination, when the user swipe left or right it will appear two buttons vote or delete, for that lets update "mscript.js", after add the user to the list we add (around line 150):

$('.users li').bind('swiperight swipeleft', swipe);

This will look for swipe function when the user swipe in any direction on any list item, lets add the function in the same file

function swipe(){
    // reference the just swiped list item
    var $li = $(this);
    // remove all buttons first
    $('.aDeleteBtn').remove();
    $('.aVoteBtn').remove();
    // create buttons and div container
 var $deleteBtn = $('<a>Delete</a>').attr({
   'class': 'aDeleteBtn ui-btn-up-r',
   'href': '#'
  });
    var $voteBtn = $('<a>Vote</a>').attr({
            'class': 'aVoteBtn ui-btn-up-bl',
   'href': '#'
  });
 // insert swipe div into list item
 $li.prepend($deleteBtn);
    $li.prepend($voteBtn);
    $deleteBtn.slideToggle();
    $voteBtn.slideToggle();
}

Here we take the li as a reference, first erase the buttons if they exist already, then we create 2 buttons which have 2 clases, 1 for reference only and the other one to give them style and the position, for that lets add them to the css

.aDeleteBtn, .aVoteBtn {
    -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 float: right;
 height: 15px;
 line-height: 15px;
 margin: 10px 10px 0 0;
 padding: 0.6em;
 position: absolute;
 right: 0;
 top: 0;
 z-index: 10;
    display: none;
}

.aDeleteBtn{
    right: 60px;
}

/* red color buttons */

.ui-btn-up-r { border: 1px solid #953403; background: #2567ab; font-weight: bold; color: #fff; cursor: pointer;  text-shadow: 0 -1px 1px #953403; text-decoration: none; background-image: -moz-linear-gradient(top, #ec4a0b, #ad390c); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ec4a0b),color-stop(1, #ad390c));   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ec4a0b', EndColorStr='#ad390c')"; }

.ui-btn-up-r a.ui-link-inherit { color: #fff; }

.ui-btn-hover-r { border: 1px solid #953403; background: #f15c22; font-weight: bold; color: #fff;  text-shadow: 0 -1px 1px #014D68; background-image: -moz-linear-gradient(top, #f15c22, #f15c22); text-decoration: none; background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f15c22),color-stop(1, #f15c22));   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#f15c22', EndColorStr='#f15c22')";  }

.ui-btn-hover-r a.ui-link-inherit { color: #fff; }

.ui-btn-down-r { border: 1px solid #225377; background: #79ae21; font-weight: bold; color: #fff; text-shadow: 0 -1px 1px #225377; background-image: -moz-linear-gradient(top, #bc770f, #e6590c); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #bc770f),color-stop(1, #e6590c));   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#bc770f', EndColorStr='#e6590c')"; }

.ui-btn-down-r a.ui-link-inherit { color: #fff; }

.ui-btn-up-r, .ui-btn-hover-r, .ui-btn-down-r { font-family: Helvetica, Arial, sans-serif; }

/* blue color buttons */

.ui-btn-up-bl { border: 1px solid #036596; background: #2567ab; font-weight: bold; color: #fff; cursor: pointer;  text-shadow: 0 -1px 1px #036596; text-decoration: none; background-image: -moz-linear-gradient(top, #2567ab, #036596); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #2567ab),color-stop(1, #036596));   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#2567ab', EndColorStr='#036596')"; }

.ui-btn-up-bl a.ui-link-inherit { color: #fff; }

.ui-btn-hover-bl { border: 1px solid #036596; background: #2567ab; font-weight: bold; color: #fff;  text-shadow: 0 -1px 1px #014D68; background-image: -moz-linear-gradient(top, #2567ab, #2567ab); text-decoration: none; background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #2567ab),color-stop(1, #2567ab));   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#2567ab', EndColorStr='#2567ab')";  }

.ui-btn-hover-bl a.ui-link-inherit { color: #fff; }

.ui-btn-down-bl { border: 1px solid #225377; background: #79ae21; font-weight: bold; color: #fff; text-shadow: 0 -1px 1px #225377; background-image: -moz-linear-gradient(top, #2567ab, #2567ab); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #2567ab),color-stop(1, #2567ab));   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#2567ab', EndColorStr='#2567ab')"; }

.ui-btn-down-bl a.ui-link-inherit { color: #fff; }

.ui-btn-up-bl, .ui-btn-hover-bl, .ui-btn-down-bl { font-family: Helvetica, Arial, sans-serif; }

OK we got the buttons, now lets give them some functionality, lets start with delete adding this to "mscript.js"

$('.aDeleteBtn').live('click', function(ev){
    ev.preventDefault();
    $.mobile.showPageLoadingMsg();
    var li = $(this).parents('li');
    var details = $('#details');
    var nid = details.find('#attd').attr('nid');
    var user = {
        _id : li.attr("id"),
        name : li.attr("name"),
        votes : li.find(".count").text()
    };
    $.post("/nominations/eraseuser", { id: nid, user: user },
        function(data) {
            if (data){
               li.remove();
               var usersl = details.find('.users');
               usersl.listview('refresh');
            }else{
                showMsg('dashboard.error', 'dashboard.error_erasing_user');
            }
            $.mobile.hidePageLoadingMsg();
        }
    ).error(function() { $.mobile.hidePageLoadingMsg();
        showMsg('dashboard.error', 'dashboard.error_erasing_user'); });
    $('.aVoteBtn').slideToggle();
    $('.aDeleteBtn').slideToggle();
});

Here we take the li from where we get called and the details div to get the nomination id

We create the user object with the details and we send it to the server to erase that user and we hide the buttons, after calling the server we erase the user from the list if everything went right or show the error if any

Now, lets see the voting function

$('.aVoteBtn').live('click', function(ev){
    $.mobile.showPageLoadingMsg();
    ev.preventDefault();
    var li = $(this).parents('li');
    var id = li.attr('id');
    var details = $('#details');
    var nid = details.find('#attd').attr('nid');
    //var name = $('.details').find('legend').text();
    $.post("/nominations/vote", { id: nid, userid: id },
        function(data) {
            if (data){
                var votes = li.find('.count');
                votes.html(data);
                //updat voted list
            }else{
                showMsg('dashboard.error', 'dashboard.error_voting');
            }
            $.mobile.hidePageLoadingMsg();
        }
    ).error(function() {
        $.mobile.hidePageLoadingMsg();
        showMsg('dashboard.error', 'dashboard.error_voting');
    });
    $('.aVoteBtn').slideToggle();
    $('.aDeleteBtn').slideToggle();
});

Same way as before we got the data from the li and details, post to the server the information and hide the buttons, on return from server, lets update the count of the votes or show if any error

Now we are only missing the "invite" functionality, for this one we are going to recycle the add friends screen, first lets update the template "dashboardm.jade", lets add a class to our invite button to look like this:

a.doinvite(href="#", data-icon="plus", class="ui-btn-right") Invite

Then lets add to out page with id "#addf" this button to the footer

a.invite(href="#", data-role="button", data-theme="b") Invite

And then lets initialize the button hidden in our css

.invite{
    display: none;
}

Good now the script, lets update "#adduser" onclick to hide the button

$('.invite').hide();

Then we add the listener for the invite button

$('.doinvite').live('click', function(){
    $.mobile.showPageLoadingMsg();
    $('.invite').show();
    $.mobile.changePage( "#addf",
    {
        transition: "pop",
        reverse: false,
     changeHash: false
 });
});

We show our invite button and then the add friends panel.

To finish lets add our functionality to the invite button

$('.invite').live('click', function(){
    $.mobile.showPageLoadingMsg();
    var users = [];
    var userp;
    $('#lof').find(':checked').each(function(){
        users.push({
            "_id" : $(this).attr('id'),
            "name" : $(this).attr('name'),
            "votes" : 0
        });
    });
    var ul = users.length;
    if (ul > 0 && ul <= 1){
        userp = users[0];
    }else{
        userp = users;
    }
    $.post("/invite", { users: userp },
        function(data) {
            if (data){
                history.back();
                //showMsg('dashboard.warning', 'dashboard.invited');
            }else{
                showMsg('dashboard.error', 'dashboard.warning_invited');
            }
            $.mobile.hidePageLoadingMsg();
        }
    ).error(function() {
        $.mobile.hidePageLoadingMsg();
        showMsg('dashboard.warning', 'dashboard.warning_invited');
    });
});

We take the list of friends selected, send it to the server to invite the friends and show a message in any error

Done!! we have enough functionality...

Next we will see erase me, refresh, update our strings, check for any active session and update the routes for mobile to get our beta version complete

If you can help me out with the bugs or the features

Fork the code

https://github.com/nodejs-mexico/nomi-nation

Greetings

Nomination part 10 - last touches

Version en español

This post is part of the series about creating an app with node.js, express for Facebook

Part 1-2

Part 3

Part 4

Part 5

Part 6

Part 7

Part 8

Part 9

Part 10

Lets put a beta version now, lets integrate a search, a way to invite friends to the app, a logo and lets fix some of the reported bugs, lets go with parts:


1. Lets put a validation so users can only vote once a day, for this lets change how we add the voters, this part was made by Github alejandromg that holds the blog, nodehispano, but what he did overall its when we add a voter, we add an object with the facebook id as the object identifier and inside this the date of the last time the user voted, also i update the validation to search where the user has voted. thanks Alejandro


2. Lets add searching, for this we are going to add a little input text in our header as a form, with jquery we are going to bind to the submit event and with some ajax do the searching and on return show the list of nominations with those terms:

First lets update our "dashboard.jade" in the header part:

form#sf(action="#")
            input.search(type="text", placeholder="Search")

and this at the end to show the results

#dialog-sr(title="#{t('dashboard.search_results')}")
    form
        fieldset#sr

then lets add this to "dashboard.js" to add the route

    /**
     * buscar nominaciones
     */
    app.post('/nominations/search', checkUser, function(req, res){
        var term = req.param('term');
        nominator.findNominationByName( term, function(err, data){
            if (err) { log.debug('error getting nominations:' + err); res.json(null); return; }
            res.json(data);
        });
    });

Then update uur controller to add seaches in the db:

/**
 * find nominations by term
 * @term nomination name or term
 * @callback function
 *
 */
NOMINATOR.findNominationByName = function(term, callback){
    //TODO: scape this
    var myregex = RegExp(term);
    Nomination.find({name: myregex},['name', 'id'], callback);
};

Finally put our jquery part in "script.js":

$('#sf').submit(function(){
        var searchTerm = $('#sf').find('.search').val();
        if (searchTerm){
            $('.loading').show();
            //console.log(searchTerm);
            $.post("/nominations/search", { term: searchTerm },
                function(data) {
                    if (data){
                        var datal = data.length;
                        if (datal <1 ){
                            showMsg('dashboard.warning', 'dashboard.notfound');
                            $('.loading').hide();
                            return;
                        }
                        var dialog = $( '#dialog-sr' );
                        var fs = dialog.find('#sr');
                        fs.html('');
                        for (var i=0;i<datal;i++){
                            fs.append('<input type="radio" name="sr" value="'+data[i]._id+'"> '+data[i].name+'<br>');
                        }
                        dialog.dialog('open');
                    }else{
                        showMsg('dashboard.error', 'dashboard.error_searching');
                    }
                    $('.loading').hide();
                }
            ).error(function() { $('.loading').hide(); showMsg('dashboard.error', 'dashboard.error_searching'); });
        }
        return false;
    });

3. We need the users invite other people without nominating them so lets put a link to do that, after search text box lets put a link, catch the "click" event with jquery and show the list of friends to invite and from node write in the wall of the invited user(s)

In the hader of "Dashboard.jade"

div
            a.invite(href="#") Invite

at the end:

#dialog-invite(title="#{t('dashboard.invite_friends')}")
    form#filterformi(action="#")
        input#filterinputi(type="text")
    br
    form
        fieldset
            ol#selectablei

Lets add the route to the "dashboard.js"

/**
     * Invitar amigos
     */
    app.post('/invite', checkUser, function(req, res){
        var usersl = req.param('users');
        var userl = 0;
        var onerror;
        if (usersl instanceof Array){
            userl = usersl.length;
            onerror = function (error) {
                        if (error) { log.debug('error posting on voted user'); return; }
                    };
            for (var i=0;i<userl;i++){
                fb.apiCall(
                    'POST',
                    '/'+usersl[i]._id+'/feed',
                    {
                        access_token: req.session.user.access_token,
                        message: app._locals.t('dashboard.invited'),
                        name: app._locals.t('dashboard.nominate'),
                        link: url
                    },
                    onerror
                );
            }
        }else{
            onerror = function (error) {
                    if (error) { log.debug('error posting on voted user'); return; }
                };
            fb.apiCall(
                'POST',
                '/'+usersl._id+'/feed',
                {
                        access_token: req.session.user.access_token,
                        message: app._locals.t('dashboard.invited'),
                        name: app._locals.t('dashboard.nominate'),
                        link: url
                },
                onerror
            );
        }
        res.json(true);
    });

And our jquery code:

//creamos el dialog de agregar usuarios
    $( "#dialog-invite" ).dialog({
        autoOpen: false,
        height: 300,
  width: 450,
  modal: true,
  buttons: {
   "Invite friend(s)": function() {
                $('.loading').show();
                var dialog = $(this);
                var users = [];
                var userp;
                $('#selectablei').find('.ui-selected').each(function(key, value){
                    users.push({
                        "_id" : $(value).attr('id'),
                        "name" : $(value).text()
                    });
                });
                var ul = users.length;
                if (ul > 0 && ul <= 1){
                    userp = users[0];
                }else{
                    userp = users;
                }
                $.post("/invite", { users: userp },
                    function(data) {
                        if (data){
                            showMsg('dashboard.warning', 'dashboard.invited');
                            dialog.dialog( "close" );
                        }else{
                            dialog.dialog( "close" );
                            showMsg('dashboard.error', 'dashboard.warning_invited');
                        }
                        $('.loading').hide();
                    }
                ).error(function() { $('.loading').hide(); showMsg('dashboard.warning', 'dashboard.warning_invited'); });
   },
   Cancel: function() {
    $( this ).dialog( "close" );
   }
  },
  close: function() {
   //TODO:
  }
 });

$('.invite').click(function(){
        $( "#dialog-invite" ).dialog( "open" );
    });

4. Update our translation strings in all the folders

5. Update some styles

6. Alejandromg found an error at the moment of finishing a nomination when no users were added, the app hang, we just add an "if" to check the list of users if none we just cancel the nomination

7. See my very amateur gimp logo, its like a small diploma showing that you can win something... options are welcome

8. Add a wiki in github with a smal tutorial to use the app (in spanish only for now, translators are welcome)

Tutorial

9. Update the facebook page, put the logo and some info

Facebook page

10. Close github issues and

11. We have a beta :), lets make noise in facebook and with the friends, hopefully they will enjoy the app as well i did creating it


YAY!!!, we have our app working with node.js, express and some other modules

We have still some bugs so you are welcome to help

If you have ideas for enhancements send them, we will try to add them

Next post we will try to do the mobile version

Use and promote the app.

Fork the code in github:

https://github.com/nodejs-mexico/nomi-nation

Greetings