index.htm | searchcode

/index.htm

https://bitbucket.org/dnteam/eu.ebabel.xcats
HTML | 297 lines | 279 code | 18 blank | 0 comment | 0 complexity | ff3e92b1b1610b171af93b46963d29f8 MD5 | raw file

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <title>X-Cats App</title>

        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <style>
            table {
                border-spacing: 0;
                margin: 0 auto;
            }
            table th, table td {
                padding: 0.2em 0.5em;
            }
            table th {
                text-align: left;
            }
            .centre {
                text-align: center;
            }
            #Message {
                padding: 0.7em 1.5em;
            }
        </style>

        <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.js"></script>
        <script>
            // X-Cats library.
            (function ($) {
                "use strict";
                var settings, xcatGui, xcatData;

                xcatData = {
                    addCat: function () {
                        var catToAdd, cats;
                        catToAdd = {
                            catGuid: xcatData.createGuid(),
                            name: $( settings.catName ).val(),
                            dateOfBirth: new Date( $( settings.catDob ).val() ),
                            mutantPower: $( settings.mutantPower ).val()
                        };
                        cats = xcatData.readLocalStorage( "cats" );
                        cats.push( catToAdd );
                        xcatData.saveLocalStorage( { key: "cats", value: cats } );
                        return catToAdd;
                    },
                    readLocalStorage: function ( key ) {
                        return ( localStorage[ key ] === undefined ) ? 
                          JSON.parse( "[]" ) : 
                          JSON.parse( localStorage[ key ] );
                    },
                    saveLocalStorage: function ( keyValuePair ) {
                        localStorage[ keyValuePair.key ] = JSON.stringify(keyValuePair.value);
                    },
                    clearLocalStorage: function () {
                        localStorage.clear();
                    },
                    addSurvey: function () {
                        var surveyToAdd, surveys;
                        surveyToAdd = xcatData.populateSurveyToAdd();
                        surveys = xcatData.readLocalStorage( "surveys" );
                        surveys.push(surveyToAdd);
                        xcatData.saveLocalStorage( { key: "surveys", value: surveys } );
                        localStorage.removeItem( "cats" );
                    },
                    populateSurveyToAdd: function () {
                        return {
                            surveyGuid: xcatData.createGuid(),
                            timestamp: new Date().getTime(),
                            surveyor: $( "#Surveyor" ).val(),
                            cats: xcatData.readLocalStorage( "cats" )
                        };
                    },
                    syncCats: function () {
                        var json;
            			$.ajax(
            			{
            				type: 'PUT',
            				url: '/cats.php',
            				contentType: 'application/json; charset=utf-8',
            				dataType: 'json',
            				data: { 
                                'cats': JSON.stringify ( xcatData.readLocalStorage( 'cats' ) )
                            }
            			} )
                        .done(function ( data ) 
                        {
                            if ( data.saved <= 0 )
                                $( '#Message' ).html( 'You failed to save any mutant cats. This is disappointing.' );
                            if ( data.saved === 1 )
                                $( '#Message' ).html( 'You saved your one special mutant cat.' );
                            if ( data.saved > 1 )
                                $( '#Message' ).html( [ 'You\'re a hero! ', data.saved, ' mutant cats have been saved because of you!' ].join( '' ) );
                            if ( data.saved >= 1 ) 
                            {
                                xcatData.clearLocalStorage();
                                $( '#CatsTable tbody' ).xcatGui( 'clearTable' );
                            }
                            $( '#Popup' ).popup( 'open' );
                        } )
                        .fail(function () 
                        { 
                            $( '#Message' ).html( 'Oops, sorry, your mutant cats haven\'t been saved!' );
                            $( '#Popup' ).popup( 'open' );
                        } );
                    },
                    createGuid: function () {
                        var S4 = function () {
                            return Math.floor(
                                    Math.random() * 0x10000 /* 65536 */
                                ).toString(16);
                        };

                        return [ S4(), S4(), "-",
                                S4(), "-",
                                S4(), "-",
                                S4(), "-",
                                S4(), S4(), S4() ].join( "" );
                    }
                };

                xcatGui = {
                    init: function ( options ) {
                        var defaults = {
                            output: $( this.selector + " tbody" ).selector,
                            addCat: "#AddCat",
                            addSurvey: "#AddSurvey",
                            catName: "#CatName",
                            catDob: "#CatDob",
                            mutantPower: "#MutantPower"
                        };
                        settings = $.extend( defaults, options );

                        // Handle adding a survey submit.
                        $(settings.addSurvey).on( "submit", function ( event ) {
                            xcatData.addSurvey();
                            $( settings.output ).xcatGui( "clearTable" );
                            event.preventDefault();
                        });
                    },
                    populateCatsTable: function ( cats ) {
                        var index;
                        for ( index = 0; index < cats.length; index += 1 ) {
                            $( this ).append( "<tr><td>" + cats[ index ].name + "</td><td>" + new Date(cats[ index ].dateOfBirth ).toDateString() + "</td><td>" + cats[ index ].mutantPower + "</td></tr>" );
                        }
                    },
                    appendCatToTable: function () {
                        xcatData.addCat();
                    },
                    populateCatsTableFromLocalStorage: function () {
                        $( this ).xcatGui( "populateCatsTable", xcatData.readLocalStorage( "cats" ) );
                    },
                    clearTable: function () {
                        $( this ).html( "" );
                    },
                    syncCatsToServer: function () {
                        xcatData.syncCats();
                    }
                };

                // Method calling logic
                $.fn.xcatGui = function ( method ) {
                    if ( xcatGui[ method ] ) {
                        return xcatGui[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ) );
                    }
                    if ( typeof method === "object" || !method ) {
                        return xcatGui.init.apply( this, arguments );
                    }
                    $.error( "Method " + method + " does not exist on jQuery.xcatGui" );
                };

            } ) ( jQuery );
        </script>
    </head>
    <body>
        <div data-role="page" id="ListXCats">
            <div data-role="header">
                <a href="#ListXCats" data-icon="home" data-iconpos="notext" class="ui-btn-active"></a>
                <h1>X-Cats App</h1>
            </div>
            <div data-role="content">
                <table data-role="table" class="ui-body-d" id="CatsTable">
                    <thead>
                        <tr class="ui-bar-d">
                            <th>Name</th>
                            <th data-priority="2">DOB</th>
                            <th data-priority="1">Power</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
            <div data-role="footer" data-position="fixed" class="ui-bar centre">
                <div data-role="controlgroup" data-type="horizontal">
                    <a href="#AddXCat" data-role="button" data-icon="plus" data-transition="slide">Add</a>
                    <a href="#CompleteSurvey" data-role="button" data-icon="refresh" data-transition="slide">Sync</a>
                </div>
            </div>
        </div>

        <div data-role="page" id="AddXCat">
            <div data-role="header">
                <a href="#ListXCats" data-icon="home" data-iconpos="notext" data-direction="reverse" data-transition="slide"></a>
                <h1>Add a new X-Cat</h1>
            </div>
            <div data-role="content">
                <form action="#AddXCat" method="post" id="AddCat">
                    <p data-role="fieldcontain">
                        <label for="CatName">Name: </label>
                        <input type="text" id="CatName" />
                    </p>
                    <p data-role="fieldcontain">
                        <label for="CatDob">Date of birth: </label>
                        <input type="date" id="CatDob" value=""  />
                    </p>
                    <p data-role="fieldcontain">
                        <label for="MutantPower">Mutant power</label>
                        <input type="text" id="MutantPower" />
                    </p>
                    <p class="submitButton">
                        <input type="button" value="Add new cat" data-theme="b" id="AddCatButton" />
                    </p>
                </form>                
            </div>
            <div data-role="footer" data-position="fixed" class="ui-bar centre">
                <div data-role="controlgroup" data-type="horizontal">
                    <a href="#AddXCat" data-role="button" data-icon="plus" class="ui-btn-active">Add</a>
                    <a href="#CompleteSurvey" data-role="button" data-icon="refresh" data-transition="slide">Sync</a>
                </div>
            </div>
        </div>


        <div data-role="page" id="CompleteSurvey">
            <div data-role="header">
                <a href="#ListXCats" data-icon="home" data-iconpos="notext" data-direction="reverse" data-transition="slide"></a>
                <h1>Sync X-Cats</h1>
            </div>
            <div data-role="content">
                <form action="#AddXCat" method="post" id="AddCat">
                    <p class="centre">
                        Please confirm you want to sync your XCats with our mutant server.
                    </p>
                    <p class="submitButton">
                        <input type="button" value="X-Cats GO!" data-theme="b" id="SyncButton" />
                    </p>
                </form>
                <div data-role="popup" id="Popup">
                    <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
                    <p id="Message"><p>
                </div>
            </div>
            <div data-role="footer" data-position="fixed" class="ui-bar centre">
                <div data-role="controlgroup" data-type="horizontal">
                    <a href="#AddXCat" data-role="button" data-icon="plus" data-transition="slide">Add</a>
                    <a href="#CompleteSurvey" data-role="button" data-icon="refresh" class="ui-btn-active">Sync</a>
                </div>
            </div>
        </div>


        <script>
            // todo: 1. Syncing via ajax with a php/mysql web API.

            $( document ).bind( 'pageinit', function ( e ) {
                // Initialise the plugin.
                $( "#CatsTable" ).xcatGui();
            } );

            $( "#ListXCats" ).bind ( "pagebeforecreate", function ( e ) {
                // Display the cats.
                $( "#CatsTable tbody" ).xcatGui( "populateCatsTableFromLocalStorage" );
            } );

            $( "#AddXCat" ).bind ( "pagebeforecreate", function ( e ) {
                // Handle adding an X-Cat.
                $( "#AddCatButton" ).on ( "click", function ( event ) {
                    $( "#CatsTable tbody" ).xcatGui( "appendCatToTable" );
                    $.mobile.changePage( "#ListXCats", { transition: "slide", reverse: true } );
                    $( "#CatsTable tbody" ).xcatGui( "clearTable" );
                    $( "#CatsTable tbody" ).xcatGui( "populateCatsTableFromLocalStorage" );
                } );
            } );

            $( "#CompleteSurvey" ).bind ( "pagebeforecreate", function ( e ) {
                // Handle syncing all the X-Cats to the mutant server.
                $( "#SyncButton" ).on ( "click", function ( event ) {
                    $( "#CatsTable tbody" ).xcatGui( "syncCatsToServer" );
                } );
            } );

        </script>
    </body>
</html>