/index.htm
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>