Subversion Repositories HomeAutomation

<?php

require_once("backend.php");

require_once("config.php");

?>

<!DOCTYPE HTML>

<html>

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Home Automation Control Center</title>

    <link rel="stylesheet" href="jquery.mobile-1.1.1.min.css" />

    <script src="jquery-1.7.2.min.js"></script>

    <script src="jquery.mobile-1.1.1.min.js"></script>

    <script src="jquery.tmpl.min.js"></script>

    <style>

    <?php

      foreach ($pages as $page)

      {

        include("pages/" . $page . "/style.css");

      }

    ?>

      .ui-li-heading {

        white-space: normal;

      }

    </style>

    <?php

      foreach ($pages as $page)

      {

        include("pages/" . $page . "/template.html");

      }

    ?>

    <script id="page-template" type="text/x-jquery-tmpl" data-enhance="false">

      <div id="page-${name}" data-role="page" data-theme="a" id="page-{name}">

        <div data-role="header">

          <a href="#home" data-icon="home" data-direction="reverse">Start</a>

          <h1>${title} - Home Automation Control Center</h1>

        </div>

        <div data-role="content"></div>

      </div>

    </script>

    <script id="pagelink-template" type="text/x-jquery-tmpl" data-enhance="false">

      <span>

        <a href="#" data-role="button">${title}</a>

      </span>

    </script>

    <script>

      $.mobile.ignoreContentEnabled = true;

      $.mobile.transitionFallbacks.pop = "none";

      $.mobile.transitionFallbacks.flip = "none";

      $.mobile.transitionFallbacks.turn = "none";

      $.mobile.transitionFallbacks.flow = "none";

      $.mobile.transitionFallbacks.slidefade = "none";

      $.mobile.transitionFallbacks.slide = "none";

      $.mobile.transitionFallbacks.slideup = "none";

      $.mobile.transitionFallbacks.slidedown = "none";

      $.mobile.defaultPageTransition = "none";

      $.mobile.ajaxEnabled = false;

      var commandActive = false;

      var commandQueue = [];

      function sendCommand(command, callback)

      {

        if (commandActive)

        {

          commandQueue.push({ command: command, callback: callback });

        }

        else

        {

          commandActive = true;

          jQuery.getJSON("backend.php?ajax", { command: command }, function(jsonData)

          {

            handleCommandResponse(true, jsonData, callback);

          }).error(function()

          {

            handleCommandResponse(false, {}, callback);

          });

        }

      }

      function handleCommandResponse(success, jsonData, callback)

      {

        commandActive = false;

        if (commandQueue.length > 0)

        {

          var commandItem = commandQueue.shift();

          sendCommand(commandItem.command, commandItem.callback);

        }

        if (success)

        {

          if (callback)

          {

            callback(jsonData);

          }

        }

        else

        {

          console.log("command failed!");

        }

      }

    </script>

    <script>

      var pages = {};

    <?php

      foreach ($pages as $page)

      {

        include("pages/" . $page . "/script.js");

      }

    ?>

    </script>

    <script>

      var aliasNames = <?php echo json_encode($aliasNames); ?>;

      var pageConfigurations = <?php echo json_encode($pageConfiguration); ?>;

      var pageInstances = {};

      var serverTimeOffset = 0;

      function getServerTimestamp()

      {

        return ((new Date()).getTime()) - serverTimeOffset

      }

      $(document).ready(function(event)

      {

        document.location.hash = "";

        sendCommand("(new Date()).getTime();", function(timestamp)

        {

          serverTimeOffset = ((new Date()).getTime()) - parseInt(timestamp, 10);

        });

        jQuery.each(pageConfigurations, function(n, configuration)

        {

          var pageName = configuration.page + "_" + n;

          pageInstances[pageName] = configuration;

          pageInstances[pageName].name = pageName;

          pageInstances[pageName].pageElement = $("#page-template").tmpl(pageInstances[pageName]).appendTo($("body")).page();

          pageInstances[pageName].pageContentElement = pageInstances[pageName].pageElement.find(":jqmData(role=content)");

          pageInstances[pageName].pageElement.find(":jqmData(rel=back)").on("click", function(event)

          {

            $.mobile.changePage("#home", { transition: "slide", reverse: true });

            event.preventDefault();

          });

          pageInstances[pageName].pageLinkElement = $("#pagelink-template").tmpl(pageInstances[pageName]).appendTo($("#home").find(":jqmData(role=content)")).trigger("create").on("click", function(event)

          {

            $.mobile.changePage("#" + pageInstances[pageName].pageElement.attr("id"), "slide");

            event.preventDefault();

          });

          if (pages[configuration.page] && pages[configuration.page].init)

          {

            pages[configuration.page].init(pageInstances[pageName]);

          }

        });

        $(".ui-page").on("swipeleft", function()

        {

          var nextpage = $(this).nextAll(":jqmData(role=page)");

          if (nextpage.length > 0)

          {

            $.mobile.changePage("#" + nextpage[0].id, { transition: "slide", changeHash: true });

          }

        });

        $(".ui-page").on("swiperight", function()

        {

          var prevpage = $(this).prevAll(":jqmData(role=page)");

          if (prevpage.length > 0)

          {

            $.mobile.changePage("#" + prevpage[0].id, { transition: "slide", reverse: true, changeHash: true });

          }

        });

      });

      var dialogCloseTimer = null;

      var dialogCloseCallback = null;

      function openDialog(titleText, contentsHtml, autoCloseTimeout, closeCallback)

      {

        closeDialog();

        $("#dialog .dialog-title").text(titleText);

        $("#dialog .dialog-contents").html(contentsHtml);

        $("#dialog a").on("click", function(event)

        {

          closeDialog();

          event.preventDefault();

          return false;

        });

        dialogCloseCallback = closeCallback;

        $.mobile.changePage($("#dialog"), { role: "dialog"});

        $("#dialog").dialog({ close: function(event)

        {

          var callback = dialogCloseCallback;

          closeDialog();

          if (callback)

          {

            callback();

          }

        }});

        if (autoCloseTimeout)

        {

          dialogCloseTimer = setTimeout(closeDialog, autoCloseTimeout);

        }

      }

      function closeDialog()

      {

        if (dialogCloseTimer)

        {

          clearTimeout(dialogCloseTimer);

          dialogCloseTimer = null;

        }

        if ($("#dialog").is(":visible"))

        {

          $("#dialog").dialog("close");

          if (dialogCloseCallback)

          {

            dialogCloseCallback();

          }

        }

        dialogCloseCallback = null;

      }

    </script>

  </head>

  <body>

    <div id="home" data-role="page" data-theme="a">

      <div data-role="header"><h1>Home Automation Control Center</h1></div>

      <div data-role="content"></div>

    </div>

    <div data-role="dialog" id="dialog">

      <div data-role="content">

        <h3 class="dialog-title"></h3>

        <p class="dialog-contents"></p>

        <a href="#" data-role="button" data-theme="c">Close</a>

      </div>

    </div>

  </body>

</html>