WebSVN – SmartDukaan – Diff – /trunk/profitmandi-fofo/src/main/webapp/WEB-INF/views/ftl/beat-journey.vm

   .lenses{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:20px}
   .lens{padding:11px 4px;margin-right:22px;font-size:14px;font-weight:650;color:var(--muted);cursor:pointer;border:0;background:transparent;border-bottom:2.5px solid transparent;margin-bottom:-1px}
   .lens.active{color:var(--brand);border-bottom-color:var(--brand)}
   .lens .b{display:inline-block;background:#eef1fb;color:var(--brand);font-size:11px;font-weight:700;border-radius:999px;padding:1px 7px;margin-left:6px}
   .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
-  .kpi{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:14px 15px;box-shadow:0 1px 2px rgba(20,30,60,.04)}
+  .kpi{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:14px 15px;box-shadow:0 1px 2px rgba(20,30,60,.04);display:flex;flex-direction:column}
   .kpi.clickable{cursor:pointer;transition:border-color .12s,box-shadow .12s,transform .12s}
   .kpi.clickable:hover{border-color:#c7d0e8;box-shadow:0 3px 10px rgba(20,30,60,.09);transform:translateY(-1px)}
   .kpi .top{display:flex;align-items:center;gap:8px}
   .kpi .ic{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;flex:none}
   .kpi .label{font-size:11.5px;color:var(--muted);font-weight:600;line-height:1.2}
-  .kpi .val{font-size:26px;font-weight:760;margin-top:9px;letter-spacing:-.02em;line-height:1}
+  .kpi .val{font-size:26px;font-weight:760;margin-top:auto;padding-top:9px;letter-spacing:-.02em;line-height:1}
   .kpi .val small{font-size:13px;color:var(--soft);font-weight:600}
   .kpi .foot{font-size:11.5px;color:var(--soft);margin-top:7px}
+  .kpi .brow{display:flex;align-items:flex-start;text-align:center}
+  .kpi .brow.blabs{margin-top:11px}
+  .kpi .brow.bvals{margin-top:auto;padding-top:4px}
+  .kpi .blab{flex:1;font-size:11px;color:var(--soft);font-weight:600;line-height:1.25}
+  .kpi .bval{flex:1;font-size:24px;font-weight:760;letter-spacing:-.02em;line-height:1}
+  .kpi .bval small{font-size:12px;color:var(--soft);font-weight:600}
+  .kpi .bsep{color:var(--line);font-weight:600;align-self:center}
   .grid{display:grid;gap:16px}
   .g2{grid-template-columns:1fr 1fr}
   .g3{grid-template-columns:1.55fr 1fr}
   .card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:17px 19px;margin-bottom:16px;box-shadow:0 1px 2px rgba(20,30,60,.04)}
   .card h2{margin:0 0 3px;font-size:15px;font-weight:720;letter-spacing:-.01em}
   .fstep .fv{font-size:26px;font-weight:770;margin-top:6px}
   .fstep .fbar{height:5px;border-radius:3px;margin-top:10px;background:linear-gradient(90deg,var(--brand),var(--brand2))}
   .fstep .drop{font-size:11px;color:var(--red);margin-top:7px;font-weight:600}
   .fstep .keep{font-size:11px;color:var(--good);margin-top:7px;font-weight:600}
   .fstep .arrow{position:absolute;right:-12px;top:50%;transform:translateY(-50%);z-index:2;color:#c5cce0;font-size:15px}
+  .fstep .ssplit{display:flex;align-items:flex-start;margin-top:11px}
+  .fstep .scol{flex:1}
+  .fstep .scol .sl{font-size:11px;color:var(--soft);font-weight:600;line-height:1.25}
+  .fstep .scol .sv{font-size:23px;font-weight:760;letter-spacing:-.02em;line-height:1;margin-top:7px;color:#1b2436}
+  .fstep .scol .sv .u{font-size:11px;color:var(--soft);font-weight:600;margin-left:2px}
+  .fstep .scol .sv.good{color:#2f9e44}
+  .fstep .scol .sv.bad{color:#e8590c}
   .leak{display:flex;gap:10px;margin-top:12px}
   .leakbox{flex:1;border:1px solid var(--line2);border-radius:10px;padding:10px 12px;background:#f8f9fc}
   .leakbox .lt{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--soft);font-weight:600}
   .leakbox .lv{font-size:20px;font-weight:760;margin-top:4px}
   table{width:100%;border-collapse:collapse;font-size:13px}
     .then(function(r){ if(!r.ok) throw new Error('HTTP '+r.status); return r.json(); })
     .then(renderToday).catch(fail);
+}
 function kpi(ic, bg, fg, label, val, foot, valColor, click){
   return '<div class="kpi'+(click?' clickable':'')+'"'+(click?' onclick="'+click+'" title="Click for details"':'')+'><div class="top"><div class="ic" style="background:'+bg+';color:'+fg+'">'+ic+'</div>'+
+    '<div class="label">'+label+'</div></div>'+
+    '<div class="foot">'+foot+'</div>'+
-    '<div class="label">'+label+'</div></div><div class="val"'+(valColor?' style="color:'+valColor+'"':'')+'>'+val+'</div>'+
+    '<div class="val"'+(valColor?' style="color:'+valColor+'"':'')+'>'+val+'</div></div>';
+}
+// Multi-column breakdown card: centered title, a row of sub-labels, the number under each.
+// cols = [[label, value], ...]; unit (optional) is appended after each number, e.g. 'min'.
+function kpiCols(ic, bg, fg, title, cols, fg2, click, unit){
+  var lab='', val='', u=unit?' <small>'+unit+'</small>':'';
+  for(var i=0;i<cols.length;i++){
+    var sep=i?'<span class="bsep">&middot;</span>':'';
+    lab+=sep+'<div class="blab">'+cols[i][0]+'</div>';
+    val+=(i?'<span class="bsep">&nbsp;</span>':'')+'<div class="bval"'+(fg2?' style="color:'+fg2+'"':'')+'>'+num(cols[i][1])+u+'</div>';
+  }
+  return '<div class="kpi kpicols'+(click?' clickable':'')+'"'+(click?' onclick="'+click+'" title="Click for details"':'')+'>'+
+    '<div class="top"><div class="ic" style="background:'+bg+';color:'+fg+'">'+ic+'</div><div class="label">'+title+'</div></div>'+
+    '<div class="brow blabs">'+lab+'</div>'+
-    '<div class="foot">'+foot+'</div></div>';
+    '<div class="brow bvals">'+val+'</div></div>';
+}
+// Period journey summary as a row of cards (old funnel layout). Each card is a
+// group (Total Visits / Avg Time Spent / Idle-Break / Deferred / Completed) split
+// into Planned vs Self Assigned columns. col=[[label,value,colorClass],...].
+function summaryCard(title, cols, last){
+  var body='';
+  for(var i=0;i<cols.length;i++){
+    body+='<div class="scol"><div class="sl">'+cols[i][0]+'</div>'+
+          '<div class="sv'+(cols[i][2]?' '+cols[i][2]:'')+'">'+cols[i][1]+'</div></div>';
+  }
+  return '<div class="fstep"><div class="fn">'+title+'</div><div class="ssplit">'+body+'</div>'+
+    (last?'':'<span class="arrow">&#10148;</span>')+'</div>';
+}
+function summaryCards(s){
+  if(!s) return '';
+  var mn=function(v){return num(v)+'<span class="u">min</span>';};
+  var dpC=s.deferredPlanned>0?'bad':'', dsC=s.deferredSelf>0?'bad':'';
+  return summaryCard('Total Visits',[['Planned',num(s.plannedVisits),''],['Self Assigned',num(s.selfVisits),'']])+
+    summaryCard('Average Time Spent',[['Planned',mn(s.avgTimePlannedMin),''],['Self Assigned',mn(s.avgTimeSelfMin),'']])+
+    summaryCard('Idle / Break',[['Total Average',mn(s.idleAvgMin),'']])+
+    summaryCard('Completed Visits',[['Planned',num(s.completedPlanned),'good'],['Self Assigned',num(s.completedSelf),'good']])+
+    summaryCard('Deferred',[['Planned',num(s.deferredPlanned),dpC],['Self Assigned',num(s.deferredSelf),dsC]],true);
+}
 function fstep(name, val, w, sub, drop, last, key){
   return '<div class="fstep'+(key?' clickable" data-fkey="'+key+'" onclick="funnelClick(\''+key+'\')" title="Click to filter the board to these executives':'')+'"><div class="fn">'+name+'</div><div class="fv">'+num(val)+'</div>'+
     '<div class="fbar" style="width:'+Math.min(w,100)+'%"></div><div class="'+(drop?'drop':'keep')+'">'+sub+'</div>'+
     (last?'':'<span class="arrow">&#10148;</span>')+'</div>';
 // Funnel drill-down: each stage shows the executives who reached it AND the
 // drop-off cohort that fell out at this step (the "−N …" sub-line). Filters
 // mirror the backend funnel conditions exactly (rows carry the per-stage flags).
 var FUNNEL_META = {
   punchedIn:  {title:'Punched In',   desc:'Started the day (punch-in recorded)', f:function(r){ return r.punchedIn; }},
-  travelling: {title:'Traveling',    desc:'On the road between stops',           f:function(r){ return r.state==='TRAVELLING'; }},
+  travelling: {title:'Traveling',    desc:'On the road between stops',           f:function(r){ return r.state==='TRAVELLING' && !r.idleAway; }},
   inStore:    {title:'In Store',     desc:'Currently checked in at a stop',      f:function(r){ return r.state==='IN_STORE'; }},
-  idle:       {title:'Idle / Break', desc:'Idle off-store beyond the threshold', f:function(r){ return r.idleAway; }},
+  idle:       {title:'Idle / Break', desc:'Between stops, idle off-store beyond the threshold', f:function(r){ return r.state==='TRAVELLING' && r.idleAway; }},
   punchedOut: {title:'Punched Out',  desc:'Ended the day (punch-out recorded)',  f:function(r){ return r.punchedOut; }}
 };
 function funnelRows(list, date){
   if(!list.length) return '<p class="desc">None.</p>';
   var h='<table><thead><tr><th>Executive / Beat</th><th>Punch In/Out</th><th class="num">Completed</th><th class="num">Planned</th><th>State</th></tr></thead><tbody>';
     });
     h+='</tbody></table>';
+  }
   pModal(h);
+}
+// Auto "missed" drill — the three execution-gap causes behind the card, plus
+// the underlying deferral records (system-flagged "beat missed" / "no punch-in").
+function openMissed(){
+  var k=(window._period||{}).kpis||{};
+  var rows=[
+    ['Unscheduled', k.autoMissedUnscheduled||0, 'Executives (sales roles) with no PJP scheduled in this range'],
+    ['Unfilled agenda', k.autoMissedUnfilledAgenda||0, 'Scheduled beat-days where the agenda was never filled'],
+    ['Missed punch', k.autoMissedMissedPunchin||0, 'Scheduled beat-days the owner never punched in on']
+  ];
+  var h='<button class="x" onclick="closeModal()">&times;</button><h3>Auto &ldquo;missed&rdquo;</h3>'+
+        '<p class="desc">Why planned execution broke down &middot; '+esc(pRange())+'</p>'+
+        '<table><thead><tr><th>Cause</th><th class="num">Count</th><th>What it means</th></tr></thead><tbody>';
+  rows.forEach(function(r){
+    h+='<tr><td style="font-weight:600;white-space:nowrap">'+esc(r[0])+'</td>'+
+       '<td class="num cnt cred">'+num(r[1])+'</td>'+
+       '<td style="color:#69748c">'+esc(r[2])+'</td></tr>';
+  });
+  h+='<tr class="boardtot"><td><b>Total</b></td><td class="num cnt"><b>'+num(k.autoMissed||0)+'</b></td><td></td></tr>';
+  h+='</tbody></table>'+
+     '<p class="desc" style="margin-top:12px">See also the <a href="javascript:void(0)" onclick="openDeferrals()" style="color:#3b5bdb">deferral records</a> for the partner-level &ldquo;beat missed&rdquo; / &ldquo;no punch-in&rdquo; entries.</p>';
+  pModal(h);
+}
 // Leads drill (period) — every lead created in the range.
 function openPLeads(){
   var list=((window._period||{}).leadsList)||[];
   var h='<button class="x" onclick="closeModal()">&times;</button><h3>Leads on route</h3>'+
         '<p class="desc">'+list.length+' lead'+(list.length===1?'':'s')+' created &middot; '+esc(pRange())+'</p>';
   window._period = d;          // drill-downs read scorecard / lists from here
   var k=d.kpis, f=d.funnel, df=d.deferral, u=d.utilization, t=d.travel, o=d.outcomes;
   var neverTouched = Math.max((f.plannedStops||0)-(f.checkedIn||0)-(df.total||0),0);
   var h='';
   h+='<div class="kpis">';
-  h+=kpi('&#9878;','#fff4e6','#f08c00','Adherence',k.adherencePct+'<small>%</small>',num(k.doneStops)+' of '+num(k.plannedStops)+' stops done',adhColor(k.adherencePct),"openPScore('adherencePct','Adherence','Planned vs done per executive')");
+  h+=kpi('&#9878;','#fff4e6','#f08c00','Adherence',k.adherencePct+'<small>%</small>',num(k.doneStops)+' of '+num(k.plannedStops)+' planned visits done',adhColor(k.adherencePct),"openPScore('adherencePct','Adherence','Planned visits done vs planned, per executive')");
   h+=kpi('&#128506;','#e7f5ff','#1098ad','PJP coverage L1',k.coverageL1Pct+'<small>%</small>',k.coverageL1With+'/'+k.coverageL1Total+' have a plan','#1098ad',"openCoverage('L1')");
+  h+=kpiCols('&#128694;','#ebfbee','#2f9e44','Average Visit (per day)',
+    [['Franchisee',k.avgPartnersPerActiveDay],['Planned lead',k.avgPlannedLeadsPerActiveDay],['Unplanned lead',k.avgUnplannedLeadsPerActiveDay]],
-  h+=kpi('&#128694;','#ebfbee','#2f9e44','Visits / active day',k.avgVisitsPerActiveDay,'across '+num(k.journeys)+' journeys',null,"openPScore('done','Visits / active day','Visits completed per executive')");
+    null,"openPScore('done','Visits / active day','Visits completed per executive')");
+  h+=kpiCols('&#128172;','#eef1fb','#3b5bdb','Average discussion (per executive)',
+    [['Partner',k.avgDiscussionPartnerMin],['Lead',k.avgDiscussionLeadMin]],
-  h+=kpi('&#128172;','#eef1fb','#3b5bdb','Discussion / store',k.avgDiscussionMin+' <small>min</small>','target 30&ndash;45 min', k.avgDiscussionMin>0&&k.avgDiscussionMin<30?'#e8590c':null,"openPScore('discussionMin','Discussion / store','Avg in-store discussion per executive')");
+    k.avgDiscussionMin>0&&k.avgDiscussionMin<30?'#e8590c':null,"openPScore('discussionMin','Average discussion minutes','Avg in-store discussion per executive')",'min');
+  h+=kpiCols('&#8635;','#fff0f0','#e03131','Auto "missed"',
-  h+=kpi('&#8635;','#fff0f0','#e03131','Auto "missed"',num(k.autoMissed),k.autoMissedSystemPct+'% system-flagged','#e03131',"openDeferrals()");
+    [['Unscheduled',k.autoMissedUnscheduled],['Unfilled agenda',k.autoMissedUnfilledAgenda],['Missed punch',k.autoMissedMissedPunchin]],
+    '#e03131',"openMissed()");
   h+=kpi('&#9733;','#fff0f6','#d6336c','Leads on route',num(k.leadsCreated),'this period',null,"openPLeads()");
   h+='</div>';
-  h+='<div class="sectionlabel">Aggregate Journey Funnel</div><div class="card"><div class="funnel">';
+  h+='<div class="sectionlabel">Journey Summary</div><div class="card"><p class="desc">Planned = visits on the PJP &middot; Self Assigned = ad-hoc visits the executive added.</p><div class="funnel">'+summaryCards(d.summary)+'</div></div>';
-  var pl=f.plannedStops||1;
-  h+=fstep('Planned stops',f.plannedStops,100,'scheduled',false,false,'p_planned');
-  h+=fstep('Planned on punch-in days',f.punchedIn,pct(f.punchedIn,pl),fdrop(f.dropPunch,'no punch-in'),f.dropPunch>0,false,'p_punchedin');
-  h+=fstep('Checked in',f.checkedIn,pct(f.checkedIn,pl),fdrop(f.dropCheckin,'reached, skipped'),f.dropCheckin>0,false,'p_checkedin');
-  h+=fstep('Checked out (done)',f.checkedOut,pct(f.checkedOut,pl),fdrop(f.dropCheckout,'no checkout'),f.dropCheckout>0,true,'p_checkedout');
-  h+='</div></div>';
   h+='<div class="sectionlabel">Adherence &amp; Coverage</div><div class="grid g3">';
   h+='<div class="card"><h2>Per-executive scorecard <span style="color:#97a1b5;font-weight:500;font-size:12px">&middot; '+d.scorecard.length+' executives</span></h2><p class="desc">The coaching list &mdash; click a header to sort. Reds are where to intervene.</p>'+scorecardTable(d.scorecard)+'</div>';
   h+='<div class="card"><h2>Coverage by sales level</h2><p class="desc">Filled = executives with a plan; light = total at that level.</p>'+coverageBars(d.coverageByLevel)+utilBlock(u)+'</div>';
   h+='</div>';
   (data.visits||[]).slice()
     .filter(function(v){ return v.lat && v.lng; })
     .sort(function(a,b){ return tlSecs(a.checkInTime)-tlSecs(b.checkInTime); })
     .forEach(function(v){ cps.push({lat:v.lat,lng:v.lng}); });
   if(data.punchOut) cps.push({lat:data.punchOut.lat,lng:data.punchOut.lng});
+  // Actual time window of the GPS trail (first → last breadcrumb timestamp),
+  // shown on the taken-route click detail alongside the driving estimate.
+  var takenTime='';
+  var dp=data.path||[];
+  if(dp.length>=2 && dp[0].ts && dp[dp.length-1].ts && dp[dp.length-1].ts>dp[0].ts){
+    var t0=dp[0].ts, t1=dp[dp.length-1].ts;
+    takenTime=bjClock(t0)+' &rarr; '+bjClock(t1)+' ('+bjElapsed(t1-t0)+')';
+  }
-  bjDrawRoutes(map, cps, pts);
+  bjDrawRoutes(map, cps, pts, takenTime, dp);
   if(has){
     map.fitBounds(bounds);
     google.maps.event.addListenerOnce(map,'idle',function(){ if(map.getZoom()>16) map.setZoom(16); });
   } else {
+}
 // TAKEN route = the recorded GPS trail (location_tracking_path) routed along the
 // road network so it follows actual roads rather than straight hops between sparse
 // pings. SUGGESTED route = the Google-optimal road route through the journey's
 // checkpoints (green dotted). Both are drawn and compared by distance.
-function bjDrawRoutes(map, cps, pathPts){
+function bjDrawRoutes(map, cps, pathPts, takenTime, timedPts){
   var legend=bjRouteLegend();
   // taken — road route traced through the recorded breadcrumb (in order)
   if(pathPts && pathPts.length>=2){
     var ds1=new google.maps.DirectionsService();
     var sample=bjSample(pathPts, 25);                          // Directions cap: 25 incl. ends
     var o=sample[0], d=sample[sample.length-1];
     var vias=sample.slice(1,-1).map(function(p){ return {location:new google.maps.LatLng(p.lat,p.lng), stopover:false}; });
     bjRouteRequest(ds1, o, d, vias, false, function(res){
-      bjRenderRoute(map, res, {color:'#e03131', dashed:false, z:55});
+      bjRenderRoute(map, res, {color:'#e03131', dashed:false, z:55, label:'Route taken (actual GPS)', time:takenTime, timed:timedPts});
       legend.set('taken', bjRouteKm(res));
     }, function(status){
       console.warn('Directions (taken) failed:', status);
-      // fallback: plot the raw breadcrumb (straight hops) and measure along it
+      // fallback: plot the raw breadcrumb (straight hops), with arrows, and measure along it
-      new google.maps.Polyline({path:pathPts,geodesic:false,strokeColor:'#e03131',strokeOpacity:.9,strokeWeight:4,zIndex:55,map:map});
+      var poly=new google.maps.Polyline({path:pathPts,geodesic:false,strokeColor:'#e03131',strokeOpacity:.9,strokeWeight:4,zIndex:55,map:map,
+        icons:[{icon:{path:google.maps.SymbolPath.FORWARD_CLOSED_ARROW,strokeColor:'#e03131',fillColor:'#e03131',fillOpacity:1,scale:3},offset:'3%',repeat:'120px'}]});
-      var ll=pathPts.map(function(p){ return new google.maps.LatLng(p.lat,p.lng); });
+      var km=google.maps.geometry.spherical.computeLength(pathPts.map(function(p){ return new google.maps.LatLng(p.lat,p.lng); }))/1000;
-      legend.set('taken', google.maps.geometry.spherical.computeLength(ll)/1000);
+      bjRouteClick(map, poly, '#e03131', 'Route taken (actual GPS)', km, '', takenTime, timedPts);
+      legend.set('taken', km);
     });
   } else {
     legend.set('taken', false);
+  }
     var ds=new google.maps.DirectionsService();
     var origin=cps[0], dest=cps[cps.length-1], mids=cps.slice(1,-1), capped=false;
     if(mids.length>23){ mids=mids.slice(0,23); capped=true; }  // Directions allows 23 waypoints
     var wpts=mids.map(function(p){ return {location:new google.maps.LatLng(p.lat,p.lng), stopover:true}; });
     bjRouteRequest(ds, origin, dest, wpts, true, function(res){
-      bjRenderRoute(map, res, {color:'#2f9e44', dashed:true, z:50});
+      bjRenderRoute(map, res, {color:'#2f9e44', dashed:true, z:50, label:'Suggested route (optimal)'});
       legend.set('suggested', bjRouteKm(res));
     }, function(status){ console.warn('Directions (suggested) failed:', status); legend.set('suggested', false); });
     if(capped) legend.note('Suggested route limited to first 23 stops');
   } else {
     legend.set('suggested', false);
   }, function(res, status){
     if(status===google.maps.DirectionsStatus.OK && res && res.routes && res.routes.length) ok(res);
     else err(status);
   });
+}
+// Draw a route as a custom polyline (so we can add direction arrows + a click
+// info window). Forward arrows are repeated along the line; dashed routes also
+// get the dash pattern. Clicking the line opens its distance / duration detail.
 function bjRenderRoute(map, res, opt){
+  var path=res.routes[0].overview_path;
+  var arrow={icon:{path:google.maps.SymbolPath.FORWARD_CLOSED_ARROW, strokeColor:opt.color,
-  var poly={strokeColor:opt.color, strokeWeight:opt.dashed?0:5, strokeOpacity:opt.dashed?0:0.85, zIndex:opt.z};
+                   strokeOpacity:1, strokeWeight:1, fillColor:opt.color, fillOpacity:1, scale:opt.dashed?2.6:3.2},
+             offset:'3%', repeat:opt.dashed?'95px':'120px'};
+  var icons=[arrow];
   if(opt.dashed){
-    poly.icons=[{icon:{path:'M 0,-1 0,1', strokeColor:opt.color, strokeOpacity:1, strokeWeight:4, scale:3}, offset:'0', repeat:'14px'}];
+    icons.unshift({icon:{path:'M 0,-1 0,1', strokeColor:opt.color, strokeOpacity:1, strokeWeight:4, scale:3}, offset:'0', repeat:'14px'});
+  }
+  var poly=new google.maps.Polyline({path:path, map:map, zIndex:opt.z,
+    strokeColor:opt.color, strokeOpacity:opt.dashed?0:0.85, strokeWeight:opt.dashed?0:5, icons:icons});
+  bjRouteClick(map, poly, opt.color, opt.label||(opt.dashed?'Suggested route':'Route taken'),
+    bjRouteKm(res), bjRouteDur(res), opt.time, opt.timed);
+}
+// Attach a click handler that opens an info window with the route's details at
+// the clicked point. Reused by both the routed line and the breadcrumb fallback.
+// `time` (optional) is the actual GPS time window, e.g. "09:28 → 16:03 (6h 35m)".
+// `timed` (optional) are the raw breadcrumbs with timestamps; when present, the
+// captured time at the nearest breadcrumb to the click is shown.
+function bjRouteClick(map, poly, color, label, km, dur, time, timed){
+  var iw=new google.maps.InfoWindow();
+  poly.addListener('click', function(e){
+    var here='';
+    if(timed && timed.length){
+      var np=bjNearestPt(timed, e.latLng);
+      if(np && np.ts) here='&#128205; At this point: <b>'+bjClockS(np.ts)+'</b><br>';
+    }
+    iw.setContent('<div style="font-size:12px;line-height:1.5"><b style="color:'+color+'">&#10148; '+esc(label)+'</b><br>'+
+      here+(time?'Time: <b>'+time+'</b><br>':'')+
+      'Distance: <b>'+km.toFixed(1)+' km</b>'+(dur?'<br>Est. drive: <b>'+esc(dur)+'</b>':'')+'</div>');
+    iw.setPosition(e.latLng); iw.open(map);
+  });
+}
+// Nearest timestamped breadcrumb to a clicked LatLng (great-circle distance).
+function bjNearestPt(timed, latLng){
+  var best=null, bd=Infinity;
+  for(var i=0;i<timed.length;i++){
+    var d=google.maps.geometry.spherical.computeDistanceBetween(latLng, new google.maps.LatLng(timed[i].lat, timed[i].lng));
+    if(d<bd){ bd=d; best=timed[i]; }
+  }
+  return best;
+}
+// Format an epoch-millis timestamp as a local HH:MM clock, and a millisecond
+// span as a compact "Nh Nm" / "Nm" elapsed string (for the GPS time window).
+function bjClock(ts){
+  var d=new Date(ts), h=d.getHours(), m=d.getMinutes();
+  return (h<10?'0':'')+h+':'+(m<10?'0':'')+m;
+}
+function bjClockS(ts){
-  new google.maps.DirectionsRenderer({map:map, directions:res, suppressMarkers:true,
+  var d=new Date(ts), h=d.getHours(), m=d.getMinutes(), s=d.getSeconds();
+  return (h<10?'0':'')+h+':'+(m<10?'0':'')+m+':'+(s<10?'0':'')+s;
+}
+function bjElapsed(ms){
-    suppressInfoWindows:true, preserveViewport:true, polylineOptions:poly});
+  var s=Math.round(ms/1000), h=Math.floor(s/3600), m=Math.round((s%3600)/60);
+  return h ? (h+'h '+m+'m') : (m+'m');
+}
 function bjRouteKm(res){
   var m=0; (res.routes[0].legs||[]).forEach(function(l){ m+=(l.distance?l.distance.value:0); }); return m/1000;
+}
+function bjRouteDur(res){
+  var s=0; (res.routes[0].legs||[]).forEach(function(l){ s+=(l.duration?l.duration.value:0); });
+  if(!s) return '';
+  var h=Math.floor(s/3600), m=Math.round((s%3600)/60);
+  return h ? (h+'h '+m+'m') : (m+'m');
+}
 // Route-comparison panel rendered into the modal (#bjRouteLegend), above the map.
 // Each distance fills in as its route resolves. value: number = km, false =
 // unavailable, undefined = still loading.
 function bjRouteLegend(){
   var div=el('bjRouteLegend');

Subversion Repositories SmartDukaan

(root)/trunk/profitmandi-fofo/src/main/webapp/WEB-INF/views/ftl/beat-journey.vm – Rev 36917 → 36929