app/www/js/index.js

   1 /*
   2  *
   3  * glowingpatrol: simple app to report and locate meter maids
   4  * author: hackbrd@hackdaworld.org
   5  *
   6  */
   7
   8 /*
   9  * Licensed to the Apache Software Foundation (ASF) under one
  10  * or more contributor license agreements.  See the NOTICE file
  11  * distributed with this work for additional information
  12  * regarding copyright ownership.  The ASF licenses this file
  13  * to you under the Apache License, Version 2.0 (the
  14  * "License"); you may not use this file except in compliance
  15  * with the License.  You may obtain a copy of the License at
  16  *
  17  * http://www.apache.org/licenses/LICENSE-2.0
  18  *
  19  * Unless required by applicable law or agreed to in writing,
  20  * software distributed under the License is distributed on an
  21  * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  22  * KIND, either express or implied.  See the License for the
  23  * specific language governing permissions and limitations
  24  * under the License.
  25  */
  26
  27 var ui = {
  28         width: 0,
  29         height: 0,
  30         fb: {},
  31         winwidth: 0,
  32         winheight: 0,
  33         init: function(event_cb) {
  34                 // width and height auf io and map window
  35                 ui.height=$(document).height();
  36                 ui.width=$(document).width();
  37                 cl("init: width="+ui.width+", height="+ui.height);
  38                 ui.winwidth=(ui.width-1)/2;
  39                 ui.winheight=ui.height;
  40                 if(ui.height>ui.width) {
  41                         ui.winwidth=ui.width;
  42                         ui.winheight=(ui.height-1)/2;
  43                 }
  44                 cl("init: winwidth="+ui.winwidth+", winheight="+ui.winheight);
  45                 $('#io').css('width',ui.winwidth);
  46                 $('#io').css('height',ui.winheight);
  47                 $('#map').css('width',ui.winwidth);
  48                 $('#map').css('height',ui.winheight);
  49                 // io events (navigation)
  50                 $('.ionavbtn').click(function(event) {
  51                         ui.nav_event(event);
  52                 });
  53                 // io events (ctrl, info and settings windows)
  54                 $('.fwbtn').click(function(event) {
  55                         event_cb(event,'switch');
  56                 });
  57                 $('.hwbtn').click(function(event) {
  58                         event_cb(event,'switch');
  59                 });
  60                 $('.twbtn').click(function(event) {
  61                         event_cb(event,'switch');
  62                 });
  63         },
  64         draw: function() {
  65                 ui.draw_io();
  66                 ui.draw_map();
  67         },
  68         draw_io: function() {
  69         },
  70         draw_map: function() {
  71         },
  72         nav_event: function(event) {
  73                 $('.ionavbtn').each(function() {
  74                         var s="#"+this.id;
  75                         if(event.target.id==this.id) {
  76                                 $(s).css('background-color',ionav_col_active);
  77                         }
  78                         else {
  79                                 $(s).css('background-color',ionav_col_default);
  80                         }
  81                 });
  82                 var trgwin=event.target.id+"win";
  83                 ui.main_show(trgwin);
  84         },
  85         main_show: function(win) {
  86                 $('.iomainwin').each(function() {
  87                         var s="#"+this.id;
  88                         if(this.id==win) {
  89                                 $(s).css('display','block');
  90                         }
  91                         else {
  92                                 $(s).css('display','none');
  93                         }
  94                 });
  95         },
  96         vert_align_text: function(trg) {
  97                 /* code snippet to vertically align text inside trg divs */
  98                 $(trg).each(function() {
  99                         var lh=$(this).parent().height();
 100                         $(this).css('line-height',lh+'px');
 101                         $(this).css('vertical-align','middle');
 102                 });
 103         },
 104         draw_content: function(id,content) {
 105                 var s='#'+id;
 106                 $(s).html(content);
 107         },
 108         set_switch: function(id,active,txt) {
 109                 var col=ionav_col_default;
 110                 var trg='#'+id;
 111                 if(active) {
 112                         col=ionav_col_active;
 113                 }
 114                 if(txt!==undefined) {
 115                         $(id).html(txt);
 116                 }
 117                 $(trg).css('background-color',col);
 118         }
 119 }
 120
 121 var geo = {
 122         loc: geo_default_loc,
 123         locupd: null,
 124         init: function(cb) {
 125                 cl("geo: init");
 126                 geo.getpos(cb);
 127                 geo.locupd=setInterval(function() {
 128                         geo.getpos(cb);
 129                 },10000);
 130         },
 131         getpos: function(cb) {
 132                 if(navigator.geolocation) {
 133                         navigator.geolocation.getCurrentPosition(function(pos) {
 134                                 geo.loc=pos;
 135                                 cb(geo.loc,'success');
 136                         }, function(err) {
 137                                 cl("geo: error="+err.code);
 138                                 cb(geo.loc,'error',err.code);
 139                         });
 140                 }
 141                 else {
 142                         cb(geo.loc,'unsupported');
 143                 }
 144         }
 145 };
 146
 147 var map = {
 148         markc: {},
 149         marks: {},
 150         marko: {},
 151         mobj: {},
 152         tile: {},
 153         center: map_default_center,
 154         zoom: map_default_zoom,
 155         init: function(mapdiv,loc,zoom) {
 156                 var tpobj={
 157                         'attribution': map_tp_attr,
 158                         'maxZoom': map_tp_mzoom
 159                 };
 160                 var lobj={
 161                         'center': loc,
 162                         'zoom': zoom
 163                 };
 164                 map.tile=L.tileLayer(map_tp_url,tpobj);
 165                 map.mobj=L.map(mapdiv,lobj);
 166                 map.tile.addTo(map.mobj);
 167         },
 168         ll: function(loc) {
 169                 var ll={};
 170                 if('coords' in loc) {
 171                         ll=L.latLng(loc.coords.latitude,loc.coords.longitude);
 172                 }
 173                 else if('latitude' in loc) {
 174                         ll=L.latLng(loc.latitude,loc.longitude);
 175                 }
 176                 else {
 177                         ll=L.latLng(loc[0],loc[1]);
 178                 }
 179                 return ll;
 180         },
 181         showpos: function(loc) {
 182                 var zoom=15;
 183                 map.mobj.setView(map.ll(loc),zoom);
 184         },
 185         set_mark: function(coord,type) {
 186                 var prop= {};
 187                 var ll=map.ll(coord);
 188                 if(type=='current') {
 189                         prop.color='green';
 190                         prop.fillColor='green';
 191                         prop.fillOpacity=1.0;
 192                         map.mobj.removeLayer(map.markc);
 193                         map.markc=L.circle(ll,20,prop).addTo(map.mobj);
 194                 }
 195                 if(type=='stored') {
 196                         mark=map.marks;
 197                         prop.color='blue';
 198                         prop.fillColor='blue';
 199                         prop.fillOpacity=1.0;
 200                         map.mobj.removeLayer(map.marks);
 201                         map.marks=L.circle(ll,20,prop).addTo(map.mobj);
 202                 }
 203         },
 204         remove_mark: function(type) {
 205                 switch(type) {
 206                 case 'current':
 207                         map.mobj.removeLayer(map.markc);
 208                         break;
 209                 case 'stored':
 210                         map.mobj.removeLayer(map.marks);
 211                         break;
 212                 }
 213         }
 214 };
 215
 216 var gp = {
 217         init: function() {
 218                 document.addEventListener('deviceready',this.startup,false);
 219                 window.addEventListener('orientationchange',function() {
 220                         alert("gp: orientational change detected");
 221                         ui.init();
 222                         ui.draw();
 223                 });
 224         },
 225         startup: function() {
 226                 // ui
 227                 ui.init(gp.event_action);
 228                 ui.draw();
 229                 ui.main_show("ctrlwin");
 230
 231                 // map
 232                 mapdiv=document.getElementById('map');
 233                 map.init(mapdiv,geo.loc,map_default_zoom);
 234
 235                 // db
 236                 //idb.name='gp';
 237                 //idb.del();
 238                 var stores={
 239                         'geo': db_geo_config,
 240                         'map': db_map_config
 241                 };
 242                 idb.init('gp',gp.dbcallback,1,stores);
 243
 244                 // geo
 245                 geo.init(gp.geocallback);
 246         },
 247         dbcallback: function() {
 248                 // stored location
 249                 idb.get_store_items('geo',function(item) {
 250                         var str='('+item[1].coords[0].toFixed(3)+','+
 251                                 item[1].coords[1].toFixed(3)+')';
 252                         var str='Store location '+str;
 253                         ui.draw_content('ioctrlstore',str);
 254                         gp.status.geo.coords=item[1].coords;
 255                 },0,-1);
 256                 // map settings
 257                 idb.get_store_items('map',function(item) {
 258                         ui.set_switch('ioctrlcurrent',item[1].recenter)
 259                         ui.set_switch('ioctrlstored',!(item[1].recenter))
 260                         gp.status.map.recenter=item[1].recenter;
 261                         if(item[1].current) {
 262                                 idb.get_store_items('geo',function(item) {
 263                                         map.set_mark(item[1].coords,'current');
 264                                 },0,-1);
 265                         }
 266                         ui.set_switch('ioctrldisc',item[1].current);
 267                         gp.status.map.current=item[1].current;
 268                         idb.get_store_items('geo',function(it) {
 269                                 if(item[1].stored)
 270                                         map.set_mark(item[1].coords,'stored');
 271                                 var str='Display stored location'+
 272                                         '<br>('+it[1].coords[0].toFixed(3)+','+
 273                                         it[1].coords[1].toFixed(3)+')';
 274                                 ui.draw_content('ioctrldiss',str);
 275                         },0,-1);
 276                         ui.set_switch('ioctrldiss',item[1].stored);
 277                         gp.status.map.stored=item[1].stored;
 278                         ui.set_switch('ctrldissobj',item[1].objects);
 279                         gp.status.map.objects=item[1].objects;
 280                 },0,-1);
 281         },
 282         geocallback: function(loc,msg,code) {
 283                 var str="Display current location<br>(";
 284                 if(msg!='success') {
 285                         str+="&lt;";
 286                         switch(code) {
 287                         case 0:
 288                                 str+="unknown error";
 289                                 break;
 290                         case 1:
 291                                 str+="permission denied";
 292                                 break;
 293                         case 2:
 294                                 str+="position unavailable";
 295                                 break;
 296                         case 3:
 297                                 str+="timed out";
 298                                 break;
 299                         }
 300                         str+="&gt;";
 301                 }
 302                 else {
 303                         var latlng=L.latLng(loc.coords.latitude,
 304                                             loc.coords.longitude);
 305                         str+=latlng[0].toFixed(3)+','+latlng[1].toFixed(3);
 306                         if(gp.status.map.current) {
 307                                 map.set_mark(latlng,'current');
 308                         }
 309                         if(gp.status.map.recenter)
 310                                 map.showpos(latlng);
 311                         else
 312                                 map.showpos(gp.status.geo.coords);
 313                 }
 314                 str+=")";
 315                 ui.draw_content('ioctrldisc',str);
 316         },
 317         event_action: function(event,type) {
 318                 if(type=="switch")
 319                         gp.switch_event(event.target.id);
 320                 if(type=="button")
 321                         gp.button_event(event.target.id);
 322         },
 323         switch_event: function(id) {
 324                 cl("event from id "+id);
 325                 var nstat=true;
 326                 switch(id) {
 327                 case 'ioctrlstore':
 328                         idb.get_store_items('geo',function(item) {
 329                                 item[1].coords=geo.loc;
 330                                 idb.update_store_item('geo',1,item[1],
 331                                                       function() {
 332                                         gp.status.geo.coords=item[1].coords;
 333                                         var str='Stored location ('+
 334                                                 item[1].coords[0].toFixed(3)+
 335                                                 ','+
 336                                                 item[1].coords[1].toFixed(3)+
 337                                                 ')';
 338                                         ui.draw_content('ioctrlstore',str);
 339                                         var loc=geo.loc
 340                                         if(!gp.status.map.recenter)
 341                                                 loc=item[1].coords;
 342                                         map.showpos(loc);
 343                                 },0,-1);
 344                         },0,-1);
 345                         break;
 346                 case 'ioctrlcurrent':
 347                         idb.get_store_items('map',function(item) {
 348                                 item[1].recenter=true;
 349                                 ui.set_switch(id,true)
 350                                 ui.set_switch('ioctrlstored',false)
 351                                 gp.status.map.recenter=true;
 352                                 map.showpos(geo.loc);
 353                                 idb.update_store_item('map',1,item[1]);
 354                         },0,-1);
 355                         break;
 356                 case 'ioctrlstored':
 357                         idb.get_store_items('map',function(item) {
 358                                 item[1].recenter=false;
 359                                 ui.set_switch('ioctrlcurrent',false)
 360                                 ui.set_switch(id,true)
 361                                 gp.status.map.recenter=false;
 362                                 map.showpos(gp.status.geo.coords);
 363                                 idb.update_store_item('map',1,item[1]);
 364                         },0,-1);
 365                         break;
 366                 case 'ioctrldisc':
 367                         idb.get_store_items('map',function(item) {
 368                                 nstat=true;
 369                                 if(item[1].current)
 370                                         nstat=false;
 371                                 ui.set_switch(id,nstat);
 372                                 gp.status.map.current=nstat;
 373                                 item[1].current=nstat;
 374                                 idb.update_store_item('map',1,item[1]);
 375                                 if(nstat)
 376                                         map.set_mark(geo.loc,'current');
 377                                 else
 378                                         map.mobj.removeLayer(map.markc)
 379
 380                         },0,-1);
 381                         break;
 382                 case 'ioctrldiss':
 383                         idb.get_store_items('map',function(item) {
 384                                 nstat=true;
 385                                 if(item[1].stored)
 386                                         nstat=false;
 387                                 ui.set_switch(id,nstat)
 388                                 gp.status.map.stored=nstat;
 389                                 item[1].stored=nstat;
 390                                 idb.update_store_item('map',1,item[1]);
 391                                 if(nstat)
 392                                         map.set_mark(
 393                                                 gp.status.geo.coords,'stored'
 394                                         );
 395                                 else
 396                                         map.mobj.removeLayer(map.marks)
 397                         },0,-1);
 398                         break;
 399                 case 'ioctrldiso':
 400                         idb.get_store_items('map',function(item) {
 401                                 nstat=true;
 402                                 if(item[1].objects)
 403                                         nstat=false;
 404                                 ui.set_switch(id,nstat)
 405                                 gp.status.map.objects=nstat;
 406                                 item[1].objects=nstat;
 407                                 idb.update_store_item('map',1,item[1]);
 408                         },0,-1);
 409                         break;
 410                 }
 411         },
 412         button_event: function(id) {
 413                 var txt='Reporting ';
 414                 var s="#"+id;
 415                 var obj=$(s);
 416                 txt=txt+id+"!";
 417                 cl(txt);
 418                 alert(txt);
 419         },
 420         status: {
 421                 geo: {
 422                         coords: [0,0],
 423                         update: true
 424                 },
 425                 map: {
 426                         recenter: true,
 427                         current: true,
 428                         stored: true,
 429                         objects: true
 430                 }
 431         }
 432 };
 433
 434 $(document).ready(function() {
 435         //if(Modernizr.hasEvent('deviceready')) {
 436         if('cordova' in window) {
 437                 alert("via init");
 438                 gp.init();
 439         }
 440         else {
 441                 alert("via startup");
 442                 gp.startup();
 443         }
 444 });
 445