Subversion Repositories HomeAutomation

Rev

Rev 2068 | Blame | Last modification | View Log | SVN | RSS feed

  1. <?php
  2. require_once("backend.php");
  3. require_once("config.php");
  4. ?>
  5. <!DOCTYPE HTML>
  6. <html>
  7.   <head>
  8.     <meta charset="utf-8">
  9.     <meta name="viewport" content="width=device-width, initial-scale=1">
  10.     <title>Home Automation Control Center</title>
  11.     <link rel="stylesheet" href="jquery.mobile-1.1.1.min.css" />
  12.     <script src="jquery-1.7.2.min.js"></script>
  13.     <script src="jquery.mobile-1.1.1.min.js"></script>
  14.     <script src="jquery.tmpl.min.js"></script>
  15.  
  16.     <style>
  17.     <?php
  18.       foreach ($pages as $page)
  19.       {
  20.         include("pages/" . $page . "/style.css");
  21.       }
  22.     ?>
  23.     </style>
  24.  
  25.     <?php
  26.       foreach ($pages as $page)
  27.       {
  28.         include("pages/" . $page . "/template.html");
  29.       }
  30.     ?>
  31.  
  32.     <script id="page-template" type="text/x-jquery-tmpl" data-enhance="false">
  33.       <div id="page-${name}" data-role="page" data-theme="a">
  34.         <div data-role="header">
  35.           <a href="#" data-icon="left" data-rel="back" data-direction="reverse">Home</a>
  36.           <h1>Home Automation Control Center - ${title}</h1>
  37.         </div>
  38.         <div data-role="content"></div>
  39.       </div>
  40.     </script>
  41.  
  42.     <script id="pagelink-template" type="text/x-jquery-tmpl" data-enhance="false">
  43.       <span>
  44.         <a href="#" data-role="button">${title}</a>
  45.       </span>
  46.     </script>
  47.  
  48.     <script>
  49.       $.mobile.ignoreContentEnabled = true;
  50.  
  51.       function sendCommand(command, callback)
  52.       {
  53.         jQuery.getJSON("backend.php?ajax", { command: command }, callback);
  54.       }
  55.     </script>
  56.  
  57.     <script>
  58.       var pages = {};
  59.  
  60.     <?php
  61.       foreach ($pages as $page)
  62.       {
  63.         include("pages/" . $page . "/script.js");
  64.       }
  65.     ?>
  66.     </script>
  67.  
  68.     <script>
  69.  
  70.       var pageConfigurations = <?php echo json_encode($pageConfiguration); ?>;
  71.       var pageInstances = {};
  72.  
  73.       $(document).ready(function(event)
  74.       {
  75.         jQuery.each(pageConfigurations, function(n, configuration)
  76.         {
  77.           var pageName = configuration.page + "_" + n;
  78.  
  79.           pageInstances[pageName] = configuration;
  80.  
  81.           pageInstances[pageName].name = pageName;
  82.  
  83.           pageInstances[pageName].pageElement = $("#page-template").tmpl(pageInstances[pageName]).appendTo($("body")).page();
  84.           pageInstances[pageName].pageContentElement = pageInstances[pageName].pageElement.find(":jqmData(role=content)");
  85.  
  86.           pageInstances[pageName].pageElement.find(":jqmData(rel=back)").on("click", function(event)
  87.           {
  88.             $.mobile.changePage($("#home"), "slide");
  89.             event.preventDefault();
  90.           });
  91.  
  92.           pageInstances[pageName].pageLinkElement = $("#pagelink-template").tmpl(pageInstances[pageName]).appendTo($("#home").find(":jqmData(role=content)")).trigger("create").on("click", function(event)
  93.           {
  94.             $.mobile.changePage(pageInstances[pageName].pageElement, "slide");
  95.             event.preventDefault();
  96.           });
  97.  
  98.  
  99.           if (pages[configuration.page] && pages[configuration.page].init)
  100.           {
  101.             pages[configuration.page].init(pageInstances[pageName]);
  102.           }
  103.         });
  104.  
  105.         $(".ui-page").on("swipeleft", function()
  106.         {
  107.           var nextpage = $(this).nextAll(":jqmData(role=page)");
  108.  
  109.           if (nextpage.length > 0)
  110.           {
  111.             $.mobile.changePage($(nextpage[0]), "slide");
  112.           }
  113.         });
  114.        
  115.         $(".ui-page").on("swiperight", function()
  116.         {
  117.           var prevpage = $(this).prevAll(":jqmData(role=page)");
  118.  
  119.           if (prevpage.length > 0)
  120.           {
  121.             $.mobile.changePage($(prevpage[0]), "slide", true);
  122.           }
  123.         });
  124.       });
  125.  
  126.     </script>
  127.   </head>
  128.  
  129.   <body>
  130.     <div id="home" data-role="page" data-theme="a">
  131.       <div data-role="header"><h1>Home Automation Control Center</h1></div>
  132.       <div data-role="content"></div>
  133.     </div>
  134.   </body>
  135. </html>
  136.