implemented longclick functionality + ui rearrangement + geo loc conversion functions master
authorhackbard <hackbard@hackdaworld.org>
Wed, 1 Jun 2016 21:32:11 +0000 (23:32 +0200)
committerhackbard <hackbard@hackdaworld.org>
Wed, 1 Jun 2016 21:32:11 +0000 (23:32 +0200)
app/www/css/index.css
app/www/index.html
app/www/js/index.js

index 11f1650..52bfe4b 100644 (file)
@@ -24,6 +24,7 @@ html {
 body {
        height: 100%;
        margin: 0;
+       background-color: black;
 }
 
 #io {
@@ -82,6 +83,7 @@ body {
        border: none;
        text-align: center;
        background-color: #999;
+       overflow: hidden;
 }
 
 .hwbtn {
@@ -93,6 +95,7 @@ body {
        text-align: center;
        background-color: #999;
        float: left;
+       overflow: hidden;
 }
 
 .twbtn {
@@ -104,12 +107,15 @@ body {
        text-align: center;
        background-color: #999;
        float: left;
+       overflow: hidden;
 }
 
 .mainseclabel {
-       margin-left: 2%;
-       margin-top: 2%;
+       margin-top: 3%;
+       width: 100%;
        clear: left;
+       text-align: center;
+       color: white;
 }
 
 .infocolumn,
index 2543412..9cf671e 100644 (file)
@@ -47,6 +47,7 @@
        <body>
 
                <div id=io>
+                       <!--
                        <div id=ionav>
                                <button id=ctrl class=ionavbtn>
                                        Control
@@ -58,6 +59,7 @@
                                        Settings
                                </button>
                        </div>
+                       -->
                        <div id=iomain>
                                <div id=ctrlwin class=iomainwin>
                                        <div class=mainseclabel>
                                        </div>
                                        <div class=switchcol>
                                                <button id=ioctrlstore
-                                                       class=fwbtn>
+                                                       class=twbtn>
                                                        Store location
                                                </button>
-                                       </div>
-                                       <div class=switchcol>
                                                <button id=ioctrlcurrent
-                                                       class=hwbtn>
+                                                       class=twbtn>
                                                        Center current location
                                                </button>
                                                <button id=ioctrlstored
-                                                       class=hwbtn>
+                                                       class=twbtn>
                                                        Center stored location
                                                </button>
                                        </div>
                                                </button>
                                        </div>
                                        <div class=mainseclabel>
-                                               Report patrols
+                                               Patrols
                                        </div>
                                        <div class=switchcol>
                                                <button id=ioctrlrepfp
-                                                       class=twbtn>
+                                                       class="twbtn longclickbtn">
                                                        Free (legal) parking
                                                </button>
                                                <button id=ioctrlrepmm
index 1d4e691..332cd2c 100644 (file)
@@ -30,10 +30,13 @@ var ui = {
        fb: {},
        winwidth: 0,
        winheight: 0,
+       touchtimer: null,
+       longtouch: false,
        init: function(event_cb) {
                // width and height auf io and map window
-               ui.height=$(document).height();
-               ui.width=$(document).width();
+               var bw=1;
+               ui.height=$(window).height();
+               ui.width=$(window).width();
                cl("init: width="+ui.width+", height="+ui.height);
                ui.winwidth=(ui.width-1)/2;
                ui.winheight=ui.height;
@@ -42,25 +45,52 @@ var ui = {
                        ui.winheight=(ui.height-1)/2;
                }
                cl("init: winwidth="+ui.winwidth+", winheight="+ui.winheight);
-               $('#io').css('width',ui.winwidth);
-               $('#io').css('height',ui.winheight);
-               $('#map').css('width',ui.winwidth);
-               $('#map').css('height',ui.winheight);
+               $('#io').css('width',ui.winwidth-2*bw);
+               $('#io').css('height',ui.winheight-2*bw);
+               $('#io').css('border',bw+"px solid black");
+               $('#map').css('width',ui.winwidth-2*bw);
+               $('#map').css('height',ui.winheight-2*bw);
+               $('#map').css('border',bw+"px solid black");
                // io events (navigation)
                $('.ionavbtn').click(function(event) {
                        ui.nav_event(event);
                });
                // io events (ctrl, info and settings windows)
                $('.fwbtn').click(function(event) {
-                       event_cb(event,'switch');
+                       event_cb(event,'click');
                });
                $('.hwbtn').click(function(event) {
-                       event_cb(event,'switch');
+                       event_cb(event,'click');
                });
                $('.twbtn').click(function(event) {
-                       event_cb(event,'switch');
+                       event_cb(event,'click');
+               });
+               // click and long click events
+               $('.longclickbtn').mouseup(function(event) {
+                       clearTimeout(ui.touchtimer);
+                       if(!ui.longtouch) {
+                               event_cb(event,'click');
+                               ui.longclick($(this).attr('data-id'),false);
+                       }
+                       return false;
+               });
+               $('.longclickbtn').mousedown(function(event) {
+                       ui.longtouch=false;
+                       ui.touchtimer=setTimeout(function() {
+                               ui.longtouch=true;
+                               var did=$(event.target).attr('data-id');
+                               ui.longclick(Number(did),true);
+                               event_cb(event,'longclick');
+                       },500);
+                       return false;
                });
        },
+       longclick: function(did,long) {
+               var str="click event: "+did;
+               if(long)
+                       str="long"+str;
+               cl(str);
+       },
        draw: function() {
                ui.draw_io();
                ui.draw_map();
@@ -115,7 +145,8 @@ var ui = {
                        $(id).html(txt);
                }
                $(trg).css('background-color',col);
-       }
+       },
+       
 }
 
 var geo = {
@@ -141,6 +172,21 @@ var geo = {
                else {
                        cb(geo.loc,'unsupported');
                }
+       },
+       loc2ll: function(loc) {
+               var ll={};
+               if('coords' in loc) {
+                       ll[0]=loc.coords.latitude;
+                       ll[1]=loc.coords.longitue;
+               }
+               else if('latitude' in loc) {
+                       ll[0]=loc.latitude;
+                       ll[0]=loc.longitude;
+               }
+               else {
+                       return loc;
+               }
+               return ll;
        }
 };
 
@@ -217,7 +263,7 @@ var gp = {
        init: function() {
                document.addEventListener('deviceready',this.startup,false);
                window.addEventListener('orientationchange',function() {
-                       alert("gp: orientational change detected");
+                       alert("change in orientation detected, rotating ...");
                        ui.init();
                        ui.draw();
                });
@@ -247,10 +293,14 @@ var gp = {
        dbcallback: function() {
                // stored location
                idb.get_store_items('geo',function(item) {
-                       var str='('+item[1].coords[0].toFixed(3)+','+
-                               item[1].coords[1].toFixed(3)+')';
-                       var str='Store location '+str;
+                       var str="Update locion";
+                       if(!item[1].update) {
+                               var ll=geo.loc2ll(geo.loc);
+                               str="Stored location<br>"+
+                                    ll[0].toFixed(3)+","+ll[1].toFixed(3)+")";
+                       }
                        ui.draw_content('ioctrlstore',str);
+                       ui.set_switch('ioctrlstore',item[1].update);
                        gp.status.geo.coords=item[1].coords;
                },0,-1);
                // map settings
@@ -268,10 +318,6 @@ var gp = {
                        idb.get_store_items('geo',function(it) {
                                if(item[1].stored)
                                        map.set_mark(item[1].coords,'stored');
-                               var str='Display stored location'+
-                                       '<br>('+it[1].coords[0].toFixed(3)+','+
-                                       it[1].coords[1].toFixed(3)+')';
-                               ui.draw_content('ioctrldiss',str);
                        },0,-1);
                        ui.set_switch('ioctrldiss',item[1].stored);
                        gp.status.map.stored=item[1].stored;
@@ -280,9 +326,8 @@ var gp = {
                },0,-1);
        },
        geocallback: function(loc,msg,code) {
-               var str="Display current location<br>(";
                if(msg!='success') {
-                       str+="&lt;";
+                       var str='geocallback error: ';
                        switch(code) {
                        case 0:
                                str+="unknown error";
@@ -297,28 +342,28 @@ var gp = {
                                str+="timed out";
                                break;
                        }
-                       str+="&gt;";
                }
                else {
-                       var latlng=L.latLng(loc.coords.latitude,
-                                           loc.coords.longitude);
-                       str+=latlng[0].toFixed(3)+','+latlng[1].toFixed(3);
-                       if(gp.status.map.current) {
-                               map.set_mark(latlng,'current');
-                       }
+                       if(gp.status.map.current)
+                               map.set_mark(loc,'current');
                        if(gp.status.map.recenter)
-                               map.showpos(latlng);
-                       else
-                               map.showpos(gp.status.geo.coords);
+                               map.showpos(loc);
                }
-               str+=")";
-               ui.draw_content('ioctrldisc',str);
        },
        event_action: function(event,type) {
-               if(type=="switch")
-                       gp.switch_event(event.target.id);
-               if(type=="button")
-                       gp.button_event(event.target.id);
+               if(type=="click") {
+                       switch(event.target.id) {
+                       case 'whatsoever':
+                               gp.button_event(event.target.id);
+                               break;
+                       default:
+                               gp.switch_event(event.target.id);
+                               break;
+                       }
+               }
+               if(type=="longclick") {
+                       cl("going to do some longclick action ...");
+               }
        },
        switch_event: function(id) {
                cl("event from id "+id);
@@ -326,16 +371,21 @@ var gp = {
                switch(id) {
                case 'ioctrlstore':
                        idb.get_store_items('geo',function(item) {
-                               item[1].coords=geo.loc;
+                               var str="Update location";
+                               if(item[1].update) {
+                                       nstat=false;
+                                       item[1].coords=geo.loc;
+                                       var ll=geo.loc2ll(geo.loc);
+                                       str="Stored location<br>("+
+                                           ll[0].toFixed(3)+","+
+                                           ll[1].toFixed(3)+")";
+                               }
+                               item[1].update=nstat;
                                idb.update_store_item('geo',1,item[1],
                                                      function() {
                                        gp.status.geo.coords=item[1].coords;
-                                       var str='Stored location ('+
-                                               item[1].coords[0].toFixed(3)+
-                                               ','+
-                                               item[1].coords[1].toFixed(3)+
-                                               ')';
-                                       ui.draw_content('ioctrlstore',str);
+                                       ui.draw_content(id,str);
+                                       ui.set_switch(id,nstat);
                                        var loc=geo.loc
                                        if(!gp.status.map.recenter)
                                                loc=item[1].coords;
@@ -432,13 +482,10 @@ var gp = {
 };
 
 $(document).ready(function() {
-       //if(Modernizr.hasEvent('deviceready')) {
        if('cordova' in window) {
-               alert("via init");
                gp.init();
        }
        else {
-               alert("via startup");
                gp.startup();
        }
 });