Subversion Repositories HomeAutomation

Rev

Rev 2314 | Only display areas with differences | Regard whitespace | Details | Blame | Last modification | View Log | SVN | RSS feed

Rev 2314 Rev 2318
1
<?php
1
<?php
2
require_once("backend.php");
2
require_once("backend.php");
3
require_once("config.php");
3
require_once("config.php");
4
?>
4
?>
5
<!DOCTYPE HTML>
5
<!DOCTYPE HTML>
6
<html>
6
<html>
7
  <head>
7
  <head>
8
    <meta charset="utf-8">
8
    <meta charset="utf-8">
9
    <meta name="viewport" content="width=device-width, initial-scale=1">
9
    <meta name="viewport" content="width=device-width, initial-scale=1">
10
    <title>Home Automation Control Center</title>
10
    <title>Home Automation Control Center</title>
11
    <link rel="stylesheet" href="jquery.mobile-1.1.1.min.css" />
11
    <link rel="stylesheet" href="jquery.mobile-1.1.1.min.css" />
-
 
12
    <link rel="manifest" href="manifest.json" />
12
    <script src="jquery-1.7.2.min.js"></script>
13
    <script src="jquery-1.7.2.min.js"></script>
13
    <script src="jquery.timeago.js"></script>
14
    <script src="jquery.timeago.js"></script>
14
    <script src="jquery.mobile-1.1.1.min.js"></script>
15
    <script src="jquery.mobile-1.1.1.min.js"></script>
15
    <script src="jquery.tmpl.min.js"></script>
16
    <script src="jquery.tmpl.min.js"></script>
16
 
17
 
17
    <style>
18
    <style>
18
    <?php
19
    <?php
19
      foreach ($pages as $page)
20
      foreach ($pages as $page)
20
      {
21
      {
21
        if (file_exists("pages/" . $page . "/style.css"))
22
        if (file_exists("pages/" . $page . "/style.css"))
22
        {
23
        {
23
          include("pages/" . $page . "/style.css");
24
          include("pages/" . $page . "/style.css");
24
        }
25
        }
25
      }
26
      }
26
    ?>
27
    ?>
27
 
28
 
28
      .ui-li-heading {
29
      .ui-li-heading {
29
        white-space: normal;
30
        white-space: normal;
30
      }
31
      }
31
    </style>
32
    </style>
32
 
33
 
33
    <?php
34
    <?php
34
      foreach ($pages as $page)
35
      foreach ($pages as $page)
35
      {
36
      {
36
        if (file_exists("pages/" . $page . "/template.html"))
37
        if (file_exists("pages/" . $page . "/template.html"))
37
        {
38
        {
38
          include("pages/" . $page . "/template.html");
39
          include("pages/" . $page . "/template.html");
39
        }
40
        }
40
      }
41
      }
41
    ?>
42
    ?>
42
 
43
 
43
    <script id="page-template" type="text/x-jquery-tmpl" data-enhance="false">
44
    <script id="page-template" type="text/x-jquery-tmpl" data-enhance="false">
44
      <div id="page-${name}" data-role="page" data-theme="a" id="page-{name}">
45
      <div id="page-${name}" data-role="page" data-theme="a" id="page-{name}">
45
        <div data-id="PersistentFooter" data-role="header" data-position="fixed" data-tap-toggle="false">
46
        <div data-id="PersistentFooter" data-role="header" data-position="fixed" data-tap-toggle="false">
46
          <div data-role="navbar">
47
          <div data-role="navbar">
47
            <ul class="navbar-container"></ul>
48
            <ul class="navbar-container"></ul>
48
          </div>
49
          </div>
49
        </div>
50
        </div>
50
        <div data-role="content"></div>
51
        <div data-role="content"></div>
51
      </div>
52
      </div>
52
    </script>
53
    </script>
53
 
54
 
54
    <script id="pagelink-template" type="text/x-jquery-tmpl" data-enhance="false">
55
    <script id="pagelink-template" type="text/x-jquery-tmpl" data-enhance="false">
55
      <span>
56
      <span>
56
        <a href="#" data-role="button">${title}</a>
57
        <a href="#" data-role="button">${title}</a>
57
      </span>
58
      </span>
58
    </script>
59
    </script>
59
 
60
 
60
    <script>
61
    <script>
61
      $.mobile.ignoreContentEnabled = true;
62
      $.mobile.ignoreContentEnabled = true;
62
      $.mobile.transitionFallbacks.pop = "none";
63
      $.mobile.transitionFallbacks.pop = "none";
63
      $.mobile.transitionFallbacks.flip = "none";
64
      $.mobile.transitionFallbacks.flip = "none";
64
      $.mobile.transitionFallbacks.turn = "none";
65
      $.mobile.transitionFallbacks.turn = "none";
65
      $.mobile.transitionFallbacks.flow = "none";
66
      $.mobile.transitionFallbacks.flow = "none";
66
      $.mobile.transitionFallbacks.slidefade = "none";
67
      $.mobile.transitionFallbacks.slidefade = "none";
67
      $.mobile.transitionFallbacks.slide = "none";
68
      $.mobile.transitionFallbacks.slide = "none";
68
      $.mobile.transitionFallbacks.slideup = "none";
69
      $.mobile.transitionFallbacks.slideup = "none";
69
      $.mobile.transitionFallbacks.slidedown = "none";
70
      $.mobile.transitionFallbacks.slidedown = "none";
70
      $.mobile.defaultPageTransition = "none";
71
      $.mobile.defaultPageTransition = "none";
71
      $.mobile.ajaxEnabled = false;
72
      $.mobile.ajaxEnabled = false;
72
 
73
 
73
      var commandActive = false;
74
      var commandActive = false;
74
      var commandQueue = [];
75
      var commandQueue = [];
75
 
76
 
76
      function sendCommand(command, callback)
77
      function sendCommand(command, callback)
77
      {
78
      {
78
        if (commandActive)
79
        if (commandActive)
79
        {
80
        {
80
          commandQueue.push({ command: command, callback: callback });
81
          commandQueue.push({ command: command, callback: callback });
81
        }
82
        }
82
        else
83
        else
83
        {
84
        {
84
          commandActive = true;
85
          commandActive = true;
85
 
86
 
86
          jQuery.getJSON("backend.php?ajax", { command: command }, function(jsonData)
87
          jQuery.getJSON("backend.php?ajax", { command: command }, function(jsonData)
87
          {
88
          {
88
            handleCommandResponse(true, jsonData, callback);
89
            handleCommandResponse(true, jsonData, callback);
89
          }).error(function()
90
          }).error(function()
90
          {
91
          {
91
            handleCommandResponse(false, {}, callback);
92
            handleCommandResponse(false, {}, callback);
92
          });
93
          });
93
        }
94
        }
94
      }
95
      }
95
 
96
 
96
      function handleCommandResponse(success, jsonData, callback)
97
      function handleCommandResponse(success, jsonData, callback)
97
      {
98
      {
98
        commandActive = false;
99
        commandActive = false;
99
 
100
 
100
        if (commandQueue.length > 0)
101
        if (commandQueue.length > 0)
101
        {
102
        {
102
          var commandItem = commandQueue.shift();
103
          var commandItem = commandQueue.shift();
103
 
104
 
104
          sendCommand(commandItem.command, commandItem.callback);
105
          sendCommand(commandItem.command, commandItem.callback);
105
        }
106
        }
106
 
107
 
107
        if (success)
108
        if (success)
108
        {
109
        {
109
          if (callback)
110
          if (callback)
110
          {
111
          {
111
            callback(jsonData);
112
            callback(jsonData);
112
          }
113
          }
113
        }
114
        }
114
        else
115
        else
115
        {
116
        {
116
          console.log("command failed!");
117
          console.log("command failed!");
117
        }
118
        }
118
      }
119
      }
119
    </script>
120
    </script>
120
 
121
 
121
    <script>
122
    <script>
122
      var pages = {};
123
      var pages = {};
123
 
124
 
124
    <?php
125
    <?php
125
      foreach ($pages as $page)
126
      foreach ($pages as $page)
126
      {
127
      {
127
        include("pages/" . $page . "/script.js");
128
        include("pages/" . $page . "/script.js");
128
      }
129
      }
129
    ?>
130
    ?>
130
    </script>
131
    </script>
131
 
132
 
132
    <script>
133
    <script>
133
 
134
 
134
      var aliasNames = <?php echo json_encode($aliasNames); ?>;
135
      var aliasNames = <?php echo json_encode($aliasNames); ?>;
135
      var pageConfigurations = <?php echo json_encode($pageConfiguration); ?>;
136
      var pageConfigurations = <?php echo json_encode($pageConfiguration); ?>;
136
      var pageInstances = { };
137
      var pageInstances = { };
137
      var serverTimeOffset = 0;
138
      var serverTimeOffset = 0;
138
 
139
 
139
      function getServerTimestamp()
140
      function getServerTimestamp()
140
      {
141
      {
141
        return ((new Date()).getTime()) - serverTimeOffset
142
        return ((new Date()).getTime()) - serverTimeOffset
142
      }
143
      }
143
 
144
 
144
      $(document).ready(function(event)
145
      $(document).ready(function(event)
145
      {
146
      {
146
        sendCommand("(new Date()).getTime();", function(timestamp)
147
        sendCommand("(new Date()).getTime();", function(timestamp)
147
        {
148
        {
148
          serverTimeOffset = ((new Date()).getTime()) - parseInt(timestamp, 10);
149
          serverTimeOffset = ((new Date()).getTime()) - parseInt(timestamp, 10);
149
        });
150
        });
150
 
151
 
151
        jQuery.each(pageConfigurations, function(n, configuration)
152
        jQuery.each(pageConfigurations, function(n, configuration)
152
        {
153
        {
153
          var pageName = configuration.page + "_" + n;
154
          var pageName = configuration.page + "_" + n;
154
 
155
 
155
          pageInstances[pageName] = configuration;
156
          pageInstances[pageName] = configuration;
156
 
157
 
157
          pageInstances[pageName].name = pageName;
158
          pageInstances[pageName].name = pageName;
158
 
159
 
159
          pageInstances[pageName].pageElement = $("#page-template").tmpl(pageInstances[pageName]).appendTo($("body")).page();
160
          pageInstances[pageName].pageElement = $("#page-template").tmpl(pageInstances[pageName]).appendTo($("body")).page();
160
          pageInstances[pageName].pageContentElement = pageInstances[pageName].pageElement.find(":jqmData(role=content)");
161
          pageInstances[pageName].pageContentElement = pageInstances[pageName].pageElement.find(":jqmData(role=content)");
161
 
162
 
162
          if (pages[configuration.page] && pages[configuration.page].init)
163
          if (pages[configuration.page] && pages[configuration.page].init)
163
          {
164
          {
164
            pages[configuration.page].init(pageInstances[pageName]);
165
            pages[configuration.page].init(pageInstances[pageName]);
165
          }
166
          }
166
        });
167
        });
167
 
168
 
168
       
169
       
169
        jQuery.each(pageInstances, function(pageName, pageInstance)
170
        jQuery.each(pageInstances, function(pageName, pageInstance)
170
        {
171
        {
171
          var navbarContainerElement = pageInstances[pageName].pageElement.find("ul.navbar-container");
172
          var navbarContainerElement = pageInstances[pageName].pageElement.find("ul.navbar-container");
172
 
173
 
173
          jQuery.each(pageInstances, function(pageName2, pageInstance2)
174
          jQuery.each(pageInstances, function(pageName2, pageInstance2)
174
          {
175
          {
175
            if (pageInstance === pageInstance2)
176
            if (pageInstance === pageInstance2)
176
            {
177
            {
177
              $("<li class=''><a href='#page-" + pageName2 + "' class='ui-btn-active ui-state-persist'>" + pageInstance2.title + "</a></li>").appendTo(navbarContainerElement);
178
              $("<li class=''><a href='#page-" + pageName2 + "' class='ui-btn-active ui-state-persist'>" + pageInstance2.title + "</a></li>").appendTo(navbarContainerElement);
178
            }
179
            }
179
            else
180
            else
180
            {
181
            {
181
              $("<li class=''><a href='#page-" + pageName2 + "'>" + pageInstance2.title + "</a></li>").appendTo(navbarContainerElement);
182
              $("<li class=''><a href='#page-" + pageName2 + "'>" + pageInstance2.title + "</a></li>").appendTo(navbarContainerElement);
182
            }
183
            }
183
          });
184
          });
184
        });
185
        });
185
 
186
 
186
        $(":jqmData(role=header)").navbar();
187
        $(":jqmData(role=header)").navbar();
187
 
188
 
188
       
189
       
189
        /*$(".ui-page").on("swipeleft", function()
190
        /*$(".ui-page").on("swipeleft", function()
190
        {
191
        {
191
          var nextpage = $(this).nextAll(":jqmData(role=page)");
192
          var nextpage = $(this).nextAll(":jqmData(role=page)");
192
 
193
 
193
          if (nextpage.length > 0)
194
          if (nextpage.length > 0)
194
          {
195
          {
195
            $.mobile.changePage("#" + nextpage[0].id, { transition: "none", changeHash: true });
196
            $.mobile.changePage("#" + nextpage[0].id, { transition: "none", changeHash: true });
196
          }
197
          }
197
          else
198
          else
198
          {
199
          {
199
            nextpage = $(":jqmData(role=page)");
200
            nextpage = $(":jqmData(role=page)");
200
 
201
 
201
            $.mobile.changePage("#" + nextpage[0].id, { transition: "none", changeHash: true });
202
            $.mobile.changePage("#" + nextpage[0].id, { transition: "none", changeHash: true });
202
          }
203
          }
203
        });
204
        });
204
       
205
       
205
        $(".ui-page").on("swiperight", function()
206
        $(".ui-page").on("swiperight", function()
206
        {
207
        {
207
          var prevpage = $(this).prevAll(":jqmData(role=page)");
208
          var prevpage = $(this).prevAll(":jqmData(role=page)");
208
 
209
 
209
          if (prevpage.length > 0)
210
          if (prevpage.length > 0)
210
          {
211
          {
211
            $.mobile.changePage("#" + prevpage[0].id, { transition: "none", reverse: true, changeHash: true });
212
            $.mobile.changePage("#" + prevpage[0].id, { transition: "none", reverse: true, changeHash: true });
212
          }
213
          }
213
          else
214
          else
214
          {
215
          {
215
            prevpage = $(":jqmData(role=page)");
216
            prevpage = $(":jqmData(role=page)");
216
 
217
 
217
            $.mobile.changePage("#" + prevpage[prevpage.length - 1].id, { transition: "none", reverse: true, changeHash: true });
218
            $.mobile.changePage("#" + prevpage[prevpage.length - 1].id, { transition: "none", reverse: true, changeHash: true });
218
          }
219
          }
219
        });*/
220
        });*/
220
 
221
 
221
    $(".ui-page").on("pagebeforeshow", function(arg1, arg2)
222
    $(".ui-page").on("pagebeforeshow", function(arg1, arg2)
222
        {
223
        {
223
        var res=arg1.currentTarget.id.split("-");
224
        var res=arg1.currentTarget.id.split("-");
224
        if (res[1] != null) {
225
        if (res[1] != null) {
225
        res=res[1].split("_");     
226
        res=res[1].split("_");     
226
        if (pages[res[0]].pageshow) {
227
        if (pages[res[0]].pageshow) {
227
            pages[res[0]].pageshow();
228
            pages[res[0]].pageshow();
228
        }
229
        }
229
        }
230
        }
230
        });
231
        });
231
 
232
 
232
    $(".ui-page").on("pagehide", function(arg1, arg2)
233
    $(".ui-page").on("pagehide", function(arg1, arg2)
233
        {
234
        {
234
       
235
       
235
        var res=arg1.currentTarget.id.split("-");
236
        var res=arg1.currentTarget.id.split("-");
236
        if (res[1] != null) {
237
        if (res[1] != null) {
237
        res=res[1].split("_");     
238
        res=res[1].split("_");     
238
        if (pages[res[0]].pagehide) {
239
        if (pages[res[0]].pagehide) {
239
            pages[res[0]].pagehide();
240
            pages[res[0]].pagehide();
240
        }
241
        }
241
        }
242
        }
242
        });
243
        });
243
 
244
 
244
        $(":jqmData(role=navbar)").delegate("a", "vclick", function(event)
245
        $(":jqmData(role=navbar)").delegate("a", "vclick", function(event)
245
        {
246
        {
246
          if(!$(event.target).hasClass("ui-disabled"))
247
          if(!$(event.target).hasClass("ui-disabled"))
247
          {
248
          {
248
            $(":jqmData(role=navbar)").find("a").not(".ui-state-persist").removeClass($.mobile.activeBtnClass);
249
            $(":jqmData(role=navbar)").find("a").not(".ui-state-persist").removeClass($.mobile.activeBtnClass);
249
            $(this).addClass($.mobile.activeBtnClass);
250
            $(this).addClass($.mobile.activeBtnClass);
250
          }
251
          }
251
        });
252
        });
252
 
253
 
253
        if (document.location.hash === "" || document.location.hash === "#")
254
        if (document.location.hash === "" || document.location.hash === "#")
254
        {
255
        {
255
          document.location.hash = "#" + $(":jqmData(role=page)").attr("id");
256
          document.location.hash = "#" + $(":jqmData(role=page)").attr("id");
256
        }
257
        }
257
 
258
 
258
        $.mobile.changePage($(document.location.hash));
259
        $.mobile.changePage($(document.location.hash));
259
 
260
 
260
      });
261
      });
261
 
262
 
262
      var dialogCloseTimer = null;
263
      var dialogCloseTimer = null;
263
      var dialogCloseCallback = null;
264
      var dialogCloseCallback = null;
264
 
265
 
265
      function openDialog(titleText, contentsHtml, autoCloseTimeout, closeCallback)
266
      function openDialog(titleText, contentsHtml, autoCloseTimeout, closeCallback)
266
      {
267
      {
267
        closeDialog();
268
        closeDialog();
268
 
269
 
269
        $("#dialog .dialog-title").text(titleText);
270
        $("#dialog .dialog-title").text(titleText);
270
        $("#dialog .dialog-contents").html(contentsHtml);
271
        $("#dialog .dialog-contents").html(contentsHtml);
271
        $("#dialog a").on("click", function(event)
272
        $("#dialog a").on("click", function(event)
272
        {
273
        {
273
          closeDialog();
274
          closeDialog();
274
          event.preventDefault();
275
          event.preventDefault();
275
          return false;
276
          return false;
276
        });
277
        });
277
     
278
     
278
        dialogCloseCallback = closeCallback;
279
        dialogCloseCallback = closeCallback;
279
 
280
 
280
        $.mobile.changePage($("#dialog"), { role: "dialog"});
281
        $.mobile.changePage($("#dialog"), { role: "dialog"});
281
 
282
 
282
        $("#dialog").dialog({ close: function(event)
283
        $("#dialog").dialog({ close: function(event)
283
        {
284
        {
284
          var callback = dialogCloseCallback;
285
          var callback = dialogCloseCallback;
285
 
286
 
286
          closeDialog();
287
          closeDialog();
287
 
288
 
288
          if (callback)
289
          if (callback)
289
          {
290
          {
290
            callback();
291
            callback();
291
          }
292
          }
292
        }});
293
        }});
293
 
294
 
294
 
295
 
295
        if (autoCloseTimeout)
296
        if (autoCloseTimeout)
296
        {
297
        {
297
          dialogCloseTimer = setTimeout(closeDialog, autoCloseTimeout);
298
          dialogCloseTimer = setTimeout(closeDialog, autoCloseTimeout);
298
        }
299
        }
299
      }
300
      }
300
 
301
 
301
      function closeDialog()
302
      function closeDialog()
302
      {
303
      {
303
        if (dialogCloseTimer)
304
        if (dialogCloseTimer)
304
        {
305
        {
305
          clearTimeout(dialogCloseTimer);
306
          clearTimeout(dialogCloseTimer);
306
          dialogCloseTimer = null;
307
          dialogCloseTimer = null;
307
        }
308
        }
308
 
309
 
309
        if ($("#dialog").is(":visible"))
310
        if ($("#dialog").is(":visible"))
310
        {
311
        {
311
          $("#dialog").dialog("close");
312
          $("#dialog").dialog("close");
312
 
313
 
313
          if (dialogCloseCallback)
314
          if (dialogCloseCallback)
314
          {
315
          {
315
            dialogCloseCallback();
316
            dialogCloseCallback();
316
          }
317
          }
317
        }
318
        }
318
 
319
 
319
        dialogCloseCallback = null;
320
        dialogCloseCallback = null;
320
      }
321
      }
321
 
322
 
322
 
323
 
323
    </script>
324
    </script>
324
  </head>
325
  </head>
325
 
326
 
326
  <body>
327
  <body>
327
    <div data-role="dialog" id="dialog">
328
    <div data-role="dialog" id="dialog">
328
      <div data-role="content">
329
      <div data-role="content">
329
        <h3 class="dialog-title"></h3>
330
        <h3 class="dialog-title"></h3>
330
        <p class="dialog-contents"></p>
331
        <p class="dialog-contents"></p>
331
        <a href="#" data-role="button" data-theme="c">Close</a>
332
        <a href="#" data-role="button" data-theme="c">Close</a>
332
      </div>
333
      </div>
333
    </div>
334
    </div>
334
 
335
 
335
  </body>
336
  </body>
336
</html>
337
</html>
337
 
338