Modify the WouldYa View

In this section, we will modify the WouldYa view to include a second celebrity and to use queries to retrieve the Celebrity objects from the API.

Add instance variables

First, add the following instance variables to the HoodyoodooViewModel:

var m_currentGender = "female";
var m_rightCelebrity = null;
var m_topCeleb = null;
var m_genderButton = null;
var m_rightCelebrityButton = null;
var m_rightCelebrityLabel = null;
var m_topResponseLabel = null;
var m_bottomResponseLabel = null;
var m_playAgainButton = null;

These variables hold information for a second celebrity, a WouldYa object, and UI, which we add in the next section.

Modify loadCelebrities method

First, we must modify the init method to hook up our divs with our new instance variables. Here is the modified method:

init: function() {
    ff.setDebug(G_DEBUG);
    m_genderButton = document.getElementById("genderButton");
    m_leftCelebrityButton = document.getElementById("leftCelebrityButton");
    m_leftCelebrityLabel = document.getElementById("leftCelebrityLabel");
    m_rightCelebrityButton = document.getElementById("rightCelebrityButton");
    m_rightCelebrityLabel = document.getElementById("rightCelebrityLabel");
    m_topResponseLabel = document.getElementById("topResponseLabel");
    m_bottomResponseLabel = document.getElementById("bottomResponseLabel");
    m_playAgainButton = document.getElementById("playAgainButton");
    m_doneButton = document.getElementById("doneButton");
    m_firstNameField = document.getElementById("firstNameField");
    m_lastNameField = document.getElementById("lastNameField");
    m_addCelebImage = document.getElementById("addCelebImage");
    m_loadingImageElement = document.getElementById("imgAjaxLoader");
    if(m_topResponseLabel) m_topResponseLabel.style.visibility="hidden";
    if(m_bottomResponseLabel) m_bottomResponseLabel.style.visibility="hidden";
    if(m_playAgainButton) m_playAgainButton.style.visibility="hidden";
    m_celebrity = new Celebrity();
    loader = new FileUploader();
    loader.init();
    this.loadCelebrities();
}

The most important thing is to change the loadCelebrities method to use queries instead of filtering in the client. We are also adding m_rightCelebrity. You will see that m_leftCelebrity is retrieved with the following query:

"(gender eq '" + m_currentGender + "' and guid eq random(guid))"

For m_rightCelebrity, we need to also ensure that we do not retrieve the same celebrity as m_leftCelebrity, and so we have to get the guid for m_leftCelebrity, create a query that will make sure that m_rightCelebrity is different. To do this, we create the query string and getting the guid for m_leftCelebrity.

"/Celebrity/(gender eq '" + m_currentGender + "' and guid ne '" + m_leftCelebrity.guid + "' and guid eq random(guid))"

Here is the modified loadCelebrities method:

loadCelebrities: function() {
    m_playAgainButton.style.visibility="hidden";
    self.showLoading(true);
    ff.getObjFromUri("/ff/resources/Celebrity/(gender eq '" + m_currentGender + "' and guid eq random(guid))",
    function(leftCelebrity){
        self.showLoading(false);
        if(leftCelebrity) {
            m_leftCelebrity = new Celebrity(leftCelebrity);
            m_leftCelebrityButton.setAttribute('src', m_leftCelebrity.imageSrc);
            m_leftCelebrityLabel.innerHTML = leftCelebrity.firstName + " " + leftCelebrity.lastName;
            ff.getObjFromUri("/ff/resources/Celebrity/(gender eq '" + m_currentGender + "' and guid ne '" + leftCelebrity.guid + "' and guid eq random(guid))",
            function(rightCelebrity){
                if(rightCelebrity) {
                    m_rightCelebrity = new Celebrity(rightCelebrity);
                    m_rightCelebrityButton.setAttribute('src', m_rightCelebrity.imageSrc);
                    m_rightCelebrityLabel.innerHTML = rightCelebrity.firstName + " " + rightCelebrity.lastName;
                } else if(G_DEBUG) console.log("No celebrity found for m_rightCelebrity");
            }, function(statusCode, responseText){
                console.error("Error "+ statusCode + ": " + JSON.parse(responseText).statusMessage);
            }
            );
        } else if(G_DEBUG) console.log("No celebrity found for m_leftCelebrity, skipping get for m_rightCelebrity");

    }, function(statusCode, responseText){
        self.showLoading(false);
        console.error("Error "+ statusCode + ": " + JSON.parse(responseText).statusMessage);
    }
    );
}

Add methods

Next, we add the toggleGender method implementation to handle the m_toggleGenderImageButton click:

toggleGender: function() {
    if(m_currentGender == "male") {
        m_genderButton.setAttribute("src", "Images/button_gender_female.png");
        m_currentGender = "female";
    } else {
        m_genderButton.setAttribute("src", "Images/button_gender_male.png");
        m_currentGender = "male";
    }
    if(G_DEBUG) console.log("toggleGender() set m_currentGender to: " + m_currentGender);
    self.loadCelebrities();
}

Add the celebrityWasPicked method implementation to handle m_leftCelebImageView or m_rightCelebImageView clicks:

celebrityWasPicked: function(sender) {
    if(G_DEBUG) console.log("celebrityWasPicked() called");
    var wouldYa = new WouldYa();
    if(sender == m_leftCelebrityButton && m_leftCelebrity) {
        wouldYa.selectedGuid = m_leftCelebrity.guid;
        wouldYa.rejectedGuid = m_rightCelebrity.guid;
        m_wouldYa = wouldYa;
        self.persistWouldYa();
    } else if(sender == m_rightCelebrityButton && m_rightCelebrity) {
        wouldYa.selectedGuid = m_rightCelebrity.guid;
        wouldYa.rejectedGuid = m_leftCelebrity.guid;
        m_wouldYa = wouldYa;
        self.persistWouldYa();
    } else if(G_DEBUG) console.log("celebrityWasPicked() could not determine which celebrity was picked");
}

Now, add the persistWouldYa method implementation that will persist your WouldYa instance to the back-end after ensuring that the user is logged in. This is implemented as a separate method to make it easier to use a callback from a login dialog.

persistWouldYa: function() {
    m_playAgainButton.style.visibility="visible";
    if(!ff.loggedIn()) {
        $("#wouldYaLoginPopup").popup('open');
    } else {
        self.showLoading(true);
        if(m_wouldYa) {
            ff.createObjAtUri(m_wouldYa, "/WouldYa",
            function(data) {
                self.showLoading(false);
            }, function(statusCode, responseText){
                self.showLoading(false);
                console.error("Error "+ statusCode + ": " + JSON.parse(responseText).statusMessage);
            }
            );
        } else console.error("WouldYaViewController persistWouldYa failed: m_wouldYa is null");
    }
}

NEXT: Adding the UI