Teochew Thunder: Web Tutorial: The Scrooge Expense Tracker Mobile App (Part 3/4)

Hello again. Now that we've gone through the localStorage object and figured out how to store and retrieve values from it, it's time to put those values to good use.

Before that, let's go through the data structure of this app. In here, every month's worth of data is represented by a localStorage item. This item will be an array of all the days in that month, and each item in the array will be an object consisting of the expenditure entered for each category ("A", "B", "C" and "D"). Confused? Not to worry, sit tight and allow me to demonstrate. I'm going to create the function addmonthyear().

Before that, however, let's add some global variables to the application. currentdate will hold the value of whichever date it happens to be when the app is being run. glb_archive is the array that holds the objects making up the current month. glb_currentyear, glb_currentmonth and glb_currentday are simply the year, month and day of the entry that is being edited. glb_currentyear and glb_currentmonth are initialized to the value of the current year and month, because these are the values that will be in use on the first screen of this app.

            var currentdate = new Date();
            var glb_settings,glb_archive;
            var glb_currentyear,glb_currentmonth,glb_currentday;

            glb_currentyear = currentdate.getFullYear();
            glb_currentmonth = currentdate.getMonth();

Now we create add_monthyear(). The global variable glb_archive is used here, and it's an array. The variable day starts at 0, and the variable month takes the variable glb_currentmonth and assigns it to the temporary variable monthpointer. Then the variable datepointer is assigned the value of the first day of the month represented by glb_currentmonth.

            function add_monthyear()
            {
                glb_archive = [];
                var day=0;
                var monthpointer=glb_currentmonth;

                var datepointer = new Date(glb_currentyear,monthpointer,1);
            }

            function update_settings()
            {
                glb_settings[0].name=$("#txtA_name").val();
                glb_settings[1].name=$("#txtB_name").val();
                glb_settings[2].name=$("#txtC_name").val();
                glb_settings[3].name=$("#txtD_name").val();
                glb_settings[4].budget=$("#txtBudget").val();
                glb_settings[5].interval=$("#txtInterval").val();

                localStorage.setItem("scrooge_settings", JSON.stringify(glb_settings));

                alert ("Settings saved.");
            }

We now add a While loop. This loop runs as long as the values of month and monthpointer remain the same. Of course, since we've just assigned the value of glb_currentmonth to monthpointer, this will be true right off the bat. So the day element of glb_archive, that is the first element because day is currently at 0, will be assigned an object. The object stores the day, expenditures for categories "A", "B", "C" and "D", and comments. The variable datepointer is advanced to the next day using the setDate() method, day is incremented and monthpointer is assigned the value of the new date represented by datepointer.

monthpointer will remain the same value as glb_currentmonth until datepointer hits the first day of the following month. And at this point, the While loop is exited.

So now your glb_archive array has been filled up. We now save it to your localStorage object under the name "archive" and appending the value of the year and month. The value to be saved is the JSON representation of the glb_archive array.

And after this is done, the app automatically brings you to the entries page. I know this looks confusing, but honest to God, the reason for this will be apparent very soon.

When is this function going to be used?

Well, of course it's going to be used. Just not right away. The purpose of writing this function first was to give you a good grasp of the underlying data structure for this app.

And for the next bit...

We will be creating the interface for the first page, named "selectdate". It's so named because on the first page, that's exactly what you'll do - select a date. Without further ado, here's the HTML. We've added a label and a drop-down list (id ddlMonth) for the months, then populated it with values from 0 to 11 because JavaScript months are numbered from 0 to 11. Sure, we could do this programmatically, but what the hell, it's only twelve values and one drop-down list, right?

        <div data-role="page" id="selectdate" data-theme="b">
            <div data-role="header" data-position="fixed">
                THE SCROOGE DIRECTIVE<br />A project by T___T
            </div>
            <div data-role="main" class="ui-content">
                <div data-role="fieldcontainer">
                    <label for="ddlMonth">Select a Month</label>
                    <select name="ddlMonth" id="ddlMonth">
                        <option value="0">January</option>
                        <option value="1">February</option>
                        <option value="2">March</option>
                        <option value="3">April</option>
                        <option value="4">May</option>
                        <option value="5">June</option>
                        <option value="6">July</option>
                        <option value="7">August</option>
                        <option value="8">September</option>
                        <option value="9">October</option>
                        <option value="10">November</option>
                        <option value="11">December</option>
                    </select>
                </div>
            </div>
            <div data-role="footer" data-position="fixed">
                <a href="#selectdate" data-icon="info">Select Month</a>
                <a href="#entries" data-icon="grid">Entries</a>
                <a href="#settings" data-icon="gear">Settings</a>
            </div>
        </div>

For now, let's see what your interface looks like.

Next, we create another drop-down list, ddlYear, for the year. This one we'll leave empty because we'll be filling it in using jQuery.

        <div data-role="page" id="selectdate" data-theme="b">
            <div data-role="header" data-position="fixed">
                THE SCROOGE DIRECTIVE<br />A project by T___T
            </div>
            <div data-role="main" class="ui-content">
                <div data-role="fieldcontainer">
                    <label for="ddlMonth">Select a Month</label>
                    <select name="ddlMonth" id="ddlMonth">
                        <option value="0">January</option>
                        <option value="1">February</option>
                        <option value="2">March</option>
                        <option value="3">April</option>
                        <option value="4">May</option>
                        <option value="5">June</option>
                        <option value="6">July</option>
                        <option value="7">August</option>
                        <option value="8">September</option>
                        <option value="9">October</option>
                        <option value="10">November</option>
                        <option value="11">December</option>
                    </select>
              </div>
              <div data-role="fieldcontainer">
                    <label for="ddlYear">Select a Year</label>
                    <select name="ddlYear" id="ddlYear">

                    </select>
                </div>
            </div>
            <div data-role="footer" data-position="fixed">
                <a href="#selectdate" data-icon="info">Select Month</a>
                <a href="#entries" data-icon="grid">Entries</a>
                <a href="#settings" data-icon="gear">Settings</a>
            </div>
        </div>

The ddlYear drop-down list is empty. We'll fix that soon.

After that, we add two buttons. The first button proceeds to the "entries" page using the month selected. The second button deletes the records for the month selected. the set_currentdate() and delete_currentdate() functions will be written, of course. Let's leave that for later.

        <div data-role="page" id="selectdate" data-theme="b">
            <div data-role="header" data-position="fixed">
                THE SCROOGE DIRECTIVE<br />A project by T___T
            </div>
            <div data-role="main" class="ui-content">
                <div data-role="fieldcontainer">
                    <label for="ddlMonth">Select a Month</label>
                    <select name="ddlMonth" id="ddlMonth">
                        <option value="0">January</option>
                        <option value="1">February</option>
                        <option value="2">March</option>
                        <option value="3">April</option>
                        <option value="4">May</option>
                        <option value="5">June</option>
                        <option value="6">July</option>
                        <option value="7">August</option>
                        <option value="8">September</option>
                        <option value="9">October</option>
                        <option value="10">November</option>
                        <option value="11">December</option>
                    </select>
                </div>
        <div data-role="fieldcontainer">
                    <label for="ddlYear">Select a Year</label>
                    <select name="ddlYear" id="ddlYear">

                    </select>
        </div>
                <a href="#" data-role="button" data-icon="forward" onclick="set_currentdate();">Go!</a>
                <a href="#" data-role="button" data-icon="delete" onclick="delete_currentdate();">Delete</a>
            </div>
            <div data-role="footer" data-position="fixed">
                <a href="#selectdate" data-icon="info">Select Month</a>
                <a href="#entries" data-icon="grid">Entries</a>
                <a href="#settings" data-icon="gear">Settings</a>
            </div>
        </div>

And here we are...

Add this code. Here, we ensure that the ddlMonth drop-down list's value reflects the value of glb_currentmonth, then we use the selectmenu() method with the argument "refresh" to, well, refresh the display.

            $(document).ready(function()
            {
                if (localStorage.getItem("scrooge_settings") == null)
                {
                    localStorage.setItem("scrooge_settings","[{\"category\":\"A\",\"name\":\"A\"},{\"category\":\"B\",\"name\":\"B\"},{\"category\":\"C\",\"name\":\"C\"},{\"category\":\"D\",\"name\":\"D\"},{\"budget\":\"1000.00\"},{\"interval\":\"5\"}]");
                }

                    glb_settings = JSON.parse(localStorage.getItem("scrooge_settings"));
            });

        $(document).on("pagebeforeshow", "#selectdate", function(event, data) {
            $("#ddlMonth").val(glb_currentmonth).attr("selected", "selected");
            $("#ddlMonth").selectmenu( "refresh" );
        });

Refresh your code. Does the selected value change? Is it the current month?

Editor's Note: It says "May", even though it's currently June. That's because this material was prepared last month. The code is fine. Really.

Next, we clear the ddlYear drop-down list using the empty() method. Then we use a For loop to populate it with years relative to the current year. It's 2016 now, so 2014 and 2015 will be added, then 2016, then 2017. The value of glb_currentyear is selected as default. We then use the selectmenu() method with the argument "refresh" as above.

See the change?

As promised, we'll now create the functions set_currentdate() and delete_currentdate(). These are simple enough. Each function begin by taking the values of the ddlMonth and ddlYear drop-down lists and setting the values of glb_currentmonth and glb_currentyear respectively.

For the set_currentdate(), we redirect to the entries page immediately after that.

For the delete_currentdate() function, we obtain the archive name from the values of glb_currenthmonth and glb_currentdate, and remove the item from localStorage using the removeItem method. This function is just so you can delete certain archives if you so feel like it.

Now for the entries page!

We've blabbered long enough about it. In two separate functions, namely add_monthyear() and set_currentdate(), you'll see redirects to this page. So now we're going to work on it. The layout is fairly straightforward - it consists of one table with six columns - one to display the day, for for the categories, and one more for the total. Note that while the columns for "Day" and "Total" are filled in, those for the categories are not. Instead, they're given ids colA, colB, colC and colD respectively. We'll need those ids to fill the column headers in. Remember the previous part of this web tutorial where you tinkered with the settings? Well, that's where they come in!

The table has an id of tblDailyEntries, and I've set the font size to 0.7em because it may get a little cramped otherwise.

        <div data-role="page" id="entries" data-theme="b">
            <div data-role="header" data-position="fixed">
                ENTRIES
            </div>
            <div data-role="main" class="ui-content">
                <table data-role="table" class="ui-responsive" id="tblDailyEntries" style="font-size:0.7em;">
                    <thead>
                        <tr>
                            <td>Day</td>
                            <td id="colA"></td>
                            <td id="colB"></td>
                            <td id="colC"></td>
                            <td id="colD"></td>
                            <td>Total</td>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
            <div data-role="footer" data-position="fixed">
                <a href="#selectdate" data-icon="info">Select Month</a>
                <a href="#entries" data-icon="grid">Entries</a>
                <a href="#settings" data-icon="gear">Settings</a>
            </div>
        </div>

Before that, check out the entries page you have so far...

So add this to your jQuery script. Upon entering the entries page, we populate the headers colA, colB, colC and colD with the values taken from the glb_settings array.

                $(document).on("pagebeforeshow", "#selectdate", function(event, data)
                {
                    $("#ddlMonth").val(glb_currentmonth).attr("selected", "selected");
                    $("#ddlMonth").selectmenu( "refresh" );

                    $("#ddlYear").empty();

                    for (var i=-2;i<=1;i++)
                    {
                        yearoption=$("<option value=\""+(currentdate.getFullYear()+i)+"\">"+(currentdate.getFullYear()+i)+"</option>");
                        $("#ddlYear").append(yearoption);
                    }

                    $("#ddlYear").val(glb_currentyear).attr("selected", "selected");
                    $("#ddlYear").selectmenu( "refresh" );
                });

                $(document).on("pagebeforeshow", "#entries", function(event, data)
                {
                    $("#colA").html(glb_settings[0].name);
                    $("#colB").html(glb_settings[1].name);
                    $("#colC").html(glb_settings[2].name);
                    $("#colD").html(glb_settings[3].name);

                    $("#tblDailyEntries").table( "refresh" );
                });

                $(document).on("pagebeforeshow", "#settings", function(event, data)
                {
                    $("#txtA_name").val(glb_settings[0].name);
                    $("#txtB_name").val(glb_settings[1].name);
                    $("#txtC_name").val(glb_settings[2].name);
                    $("#txtD_name").val(glb_settings[3].name);
                    $("#txtBudget").val(glb_settings[4].budget);
                    $("#txtInterval").val(glb_settings[5].interval);
                });

See? The headers are now updated wth the values you saved in the "settings" screen previously. Don't take my word for it! Go fiddle with the values in the settings page. Save. Come back to the "entries" page. Do the headers get updated?

So next, of course, we'll use the interval and budget values you have assigned to glb_settings.

And then we'll get the archive name using the values of glb_currentyear and glb_currentmonth. Variables temprow and temptotal are created for use in populating the table later. The tempsubtotal array is used to store the cumulative subtotals of the A, B, C and D columns.

Next, we check for the existence of the archive in localStorage. If it's null, meaning there's no archive by that name, we run the add_monthyear() function to create one! After that, there will be such an archive, and we'll assign its value to the global variable glb_archive. Then we clear the body of the table in preparation.

Take a look at your localStorage. You should see that the archive has been created.

Next, we add a For loop to iterate through the contents of the glbarchive array. temptotal is assigned the total of the values of the A, B, C and D properties of each object in the glbarchive array. Then temprow is a HTML snippet containing the day, the values of the A, B, C and D properties, and the subtotal, which is, of course, temptotal. temptotal needs to be given two denimal places, hence the use of the toFixed() method. The A, B, C and D properties are already formatted in the archive, so there's no need for us to repeat the process. The temprow is then appended to the tbody portion of the tblDailyEntries table via the append() method.

Let's see what we have. The table is populated... but wait, the days seem wrong. That's because they're numbered 0 to 30.

So just amend like so.

There you go.

Next, we use the budget and interval properties. For each temptotal, the budget is decremented by that value. And the values of A, B, C and D columns are incremented into the tempsubtotal array.

And then we use a Modulus in a conditional to check if it is time for interval to kick in. If you had an interval of 5, for example, every 5 rows a new row will be appended after the current row to display the subtotals so far.

                    for (var i=0;i<glb_archive.length;i++)
                    {
                        temptotal=parseFloat(glb_archive[i].A)+parseFloat(glb_archive[i].B)+parseFloat(glb_archive[i].C)+parseFloat(glb_archive[i].D);
                        temprow=$("<tr><td>"+(i+1)+"</td><td>"+glb_archive[i].A+"</td><td>"+glb_archive[i].B+"</td><td>"+glb_archive[i].C+"</td><td>"+glb_archive[i].D+"</td><td>"+temptotal.toFixed(2)+"</td></tr>");
                        $("#tblDailyEntries tbody").append(temprow);

                        tempsubtotal[0]+=parseFloat(glb_archive[i].A);
                        tempsubtotal[1]+=parseFloat(glb_archive[i].B);
                        tempsubtotal[2]+=parseFloat(glb_archive[i].C);
                        tempsubtotal[3]+=parseFloat(glb_archive[i].D);
                        tempsubtotal[4]+=temptotal;
                        budget-=temptotal;

                        if ((i+1)%interval==0)
                        {
                            temprow=$("<tr><td>SUBT.</td><td>"+tempsubtotal[0].toFixed(2)+"</td><td>"+tempsubtotal[1].toFixed(2)+"</td><td>"+tempsubtotal[2].toFixed(2)+"</td><td>"+tempsubtotal[3].toFixed(2)+"</td><td>"+tempsubtotal[4].toFixed(2)+"</td></tr>");
                            $("#tblDailyEntries tbody").append(temprow);

                            temprow=$("<tr><td>REM.</td><td></td><td></td><td></td><td></td><td>"+budget.toFixed(2)+"</td></tr>");
                            $("#tblDailyEntries tbody").append(temprow);
                        }
                    }

Take a gander, we're almost done with this part!

And right at the very end of the table, we append another row displaying the grand totals along with what's remaining of the budget value.

                $(document).on("pagebeforeshow", "#entries", function(event, data)
                {
                    $("#colA").html(glb_settings[0].name);
                    $("#colB").html(glb_settings[1].name);
                    $("#colC").html(glb_settings[2].name);
                    $("#colD").html(glb_settings[3].name);

                    var archivename="archive_" + glb_currentyear + "_" + glb_currentmonth;
                    var temprow,temptotal;
                    var tempsubtotal=[0,0,0,0,0];
                    var budget=parseFloat(glb_settings[4].budget);
                    var interval=parseInt(glb_settings[5].interval);

                    if (localStorage.getItem(archivename) == null)
                    {
                        add_monthyear();
                    }

                    glb_archive=JSON.parse(localStorage.getItem(archivename));
                    $("#tblDailyEntries tbody").empty();

                    for (var i=0;i<glb_archive.length;i++)
                    {
                        temptotal=parseFloat(glb_archive[i].A)+parseFloat(glb_archive[i].B)+parseFloat(glb_archive[i].C)+parseFloat(glb_archive[i].D);
                        temprow=$("<tr><td>"+(i+1)+"</td><td>"+glb_archive[i].A+"</td><td>"+glb_archive[i].B+"</td><td>"+glb_archive[i].C+"</td><td>"+glb_archive[i].D+"</td><td>"+temptotal.toFixed(2)+"</td></tr>");
                        $("#tblDailyEntries tbody").append(temprow);

                        tempsubtotal[0]+=parseFloat(glb_archive[i].A);
                        tempsubtotal[1]+=parseFloat(glb_archive[i].B);
                        tempsubtotal[2]+=parseFloat(glb_archive[i].C);
                        tempsubtotal[3]+=parseFloat(glb_archive[i].D);
                        tempsubtotal[4]+=temptotal;
                        budget-=temptotal;

                        if ((i+1)%interval==0)
                        {
                            temprow=$("<tr><td>SUBT.</td><td>"+tempsubtotal[0].toFixed(2)+"</td><td>"+tempsubtotal[1].toFixed(2)+"</td><td>"+tempsubtotal[2].toFixed(2)+"</td><td>"+tempsubtotal[3].toFixed(2)+"</td><td>"+tempsubtotal[4].toFixed(2)+"</td></tr>");
                            $("#tblDailyEntries tbody").append(temprow);

                            temprow=$("<tr><td>REM.</td><td></td><td></td><td></td><td></td><td>"+budget.toFixed(2)+"</td></tr>");
                            $("#tblDailyEntries tbody").append(temprow);
                        }
                    }

                    temprow=$("<tr><td>TOT.</td><td>"+tempsubtotal[0].toFixed(2)+"</td><td>"+tempsubtotal[1].toFixed(2)+"</td><td>"+tempsubtotal[2].toFixed(2)+"</td><td>"+tempsubtotal[3].toFixed(2)+"</td><td>"+tempsubtotal[4].toFixed(2)+"</td></tr>");
                    $("#tblDailyEntries tbody").append(temprow);

                    temprow=$("<tr><td>REM.</td><td></td><td></td><td></td><td></td><td>"+budget.toFixed(2)+"</td></tr>");
                    $("#tblDailyEntries tbody").append(temprow);

                    $("#tblDailyEntries").table( "refresh" );
                });

It's all zeros right now, so you won't see what wonder you've created. But that's OK, this will be covered in the next and final part of this web tutorial.

Now modify this line...

This turns the day display into a link. Upon clicking it, the goto_dailyentry() function is fired off, and the day passed in as an argument.

Yep, we'll need to add the goto_dailyentry() function. This one's simple enough. It basically sets the value of glb_currentday to the value of the parameter (which is the day depicted by the row) and then redirects you to the "dailyentry" page.

That's all for now!

Phew. That was long. No sweat though, the end is in sight.

Updating the entries of the archive. You don't want to miss this one.

Teochew Thunder

Pages

Monday 13 June 2016

Web Tutorial: The Scrooge Expense Tracker Mobile App (Part 3/4)

When is this function going to be used?

And for the next bit...

Now for the entries page!

That's all for now!

Next

No comments:

Post a Comment

Teochew Thunder

Upcoming Web Tutorials

Features

Reviews