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

   .meter > i{display:block;height:100%;border-radius:4px}
   .warnflag{color:var(--orange);font-weight:700}
   .badflag{color:var(--red);font-weight:700}
   .rowwarn{background:#fff9f0}
   .rowbad{background:#fff5f5}
+  .bstat{display:inline-block;font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap}
+  .bstat.ok{background:#ebfbee;color:#2f9e44}
+  .bstat.warn{background:#fff4e6;color:#e8590c}
+  .bstat.no{background:#fff0f0;color:#e03131}
+  .bdot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:middle}
+  .ptime{display:inline-block;background:#ebfbee;color:#2f9e44;font-weight:700;font-size:11px;padding:2px 7px;border-radius:6px;font-variant-numeric:tabular-nums}
+  td.cnt{font-weight:700;font-variant-numeric:tabular-nums}
+  .cgreen{color:#2f9e44}.camber{color:#f08c00}.cred{color:#e03131}.cmuted{color:#69748c}
+  .actbtn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:7px;border:0;cursor:pointer;color:#fff;font-size:12px;margin-left:3px}
+  .actbtn.map{background:#12b886}.actbtn.view{background:#3b5bdb}
+  .actbtn.edit{background:#f08c00}.actbtn.add{background:#2f9e44;font-size:15px}
+  .actbtn:active{transform:translateY(1px)}
   .att{display:flex;align-items:center;gap:12px;padding:11px 12px;border:1px solid var(--line);border-radius:11px;margin-bottom:9px}
   .att .ic{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:14px;flex:none}
   .att .ab{flex:1}
   .att .atitle{font-size:13px;font-weight:650}
   .att .adet{font-size:12px;color:var(--muted);margin-top:2px}
   .tlrow.left .tlextra{justify-content:flex-end}
   .tlrow.right .tlextra{justify-content:flex-start}
   .tlthumb{width:46px;height:46px;border-radius:8px;object-fit:cover;border:1px solid var(--line);cursor:pointer;background:#f1f3f9}
   .tlph{width:46px;height:46px;border-radius:8px;border:1px dashed #cfd6e6;background:#f4f6fb;display:flex;align-items:center;justify-content:center;color:#b3bcce;font-size:18px}
   .tlchip{font-size:10.5px;font-weight:600;color:var(--muted);background:#f1f3f9;border-radius:6px;padding:2px 7px;white-space:nowrap}
+  .exectabs{display:flex;gap:6px;justify-content:center;margin:12px 0 4px}
+  .exectab{padding:6px 14px;border-radius:8px;font-size:12.5px;font-weight:650;color:var(--muted);cursor:pointer;border:1px solid var(--line);background:#fff}
+  .exectab.active{background:var(--brand);color:#fff;border-color:var(--brand)}
+  #bjMap{width:100%;height:460px;border-radius:12px;border:1px solid var(--line);margin-top:10px;background:#eef1f7;overflow:hidden}
+  .valwrap{display:flex;justify-content:center;margin:14px 0 6px}
+  .valimg{max-width:100%;max-height:440px;border-radius:12px;border:1px solid var(--line);cursor:zoom-in}
+  .valph{width:100%;padding:48px;text-align:center;color:var(--soft);border:1px dashed #cfd6e6;border-radius:12px;background:#f4f6fb;font-size:14px}
+  .valactions{display:flex;justify-content:center;gap:10px;margin-top:8px}
   @media (max-width:1000px){.kpis{grid-template-columns:repeat(3,1fr)}.g2,.g3{grid-template-columns:1fr}.funnel{flex-wrap:wrap}.fstep{min-width:46%}.fstep .arrow{display:none}}
   @media (max-width:560px){.tl::before{left:20px}.tlrow.left,.tlrow.right{justify-content:flex-end}.tlrow .node{left:20px}.tlcard{width:calc(100% - 44px)}.tlrow.left .tlcard{flex-direction:row;text-align:left}}
 </style>
 </head>
 <body>
         <option value="">All levels below me</option>
         #foreach($lvl in $escalationTypes)
           <option value="$lvl">$lvl</option>
         #end
       </select>
+      #if($topLevel)
+      <select class="ctl hide" id="bj-user">
+        <option value="">All users at level</option>
+      </select>
+      #end
       <input class="ctl" type="date" id="bj-date" value="$today">
       <span id="bj-period-range" class="hide">
         <input class="ctl" type="date" id="bj-start" value="$monthStart">
         <input class="ctl" type="date" id="bj-end" value="$today">
       </span>
   </header>
   <div class="lenses">
     <button class="lens active" data-lens="today" id="lens-today">Today (Live)</button>
     <button class="lens" data-lens="period" id="lens-period">Period (Analytics)</button>
-    <button class="lens" data-lens="approval" id="lens-approval">Location Approval</button>
   </div>
   <div id="bj-content"><div class="loading"><div class="spinner"></div>Loading&hellip;</div></div>
 </div>
 <script>
 var CTX = '${rc.contextPath}';
 var BASE = CTX + '/beat-journey';
 var LENS = 'today';
+var TODAY = '$today';
 function el(id){ return document.getElementById(id); }
+// The first lens reads "Today (Live)" for today's date, otherwise it shows the
+// selected date (the tab is still the live/single-day view, just for that day).
+function fmtDateLabel(d){
+  var p=(d||'').split('-'); if(p.length!==3) return d;
+  var mo=['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
+  return parseInt(p[2],10)+' '+(mo[parseInt(p[1],10)-1]||p[1])+' '+p[0];
+}
+function updateTodayLabel(){
+  var b=el('bj-date'), lbl=el('lens-today'); if(!lbl) return;
+  var d=b?b.value:'';
+  lbl.innerHTML = (!d || d===TODAY) ? 'Today (Live)' : esc(fmtDateLabel(d));
+}
 function esc(s){ return String(s==null?'':s).replace(/[&<>"]/g,function(c){return {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c];}); }
 function num(n){ return (n==null?0:n).toLocaleString(); }
 function adhColor(p){ if(p>=80)return '#2f9e44'; if(p>=60)return '#f08c00'; if(p>=40)return '#e8590c'; return '#e03131'; }
 function pct(a,b){ return b? Math.round(100*a/b):0; }
 function qs(){
   var lvl = el('bj-level').value;
   var s = '';
   if(lvl) s += '&escalationType=' + encodeURIComponent(lvl);
+  var usr = el('bj-user');           // only present for L5/Final
+  if(usr && usr.value) s += '&teamOfAuthUserId=' + encodeURIComponent(usr.value);
   return s;
+}
+// L5/Final: when a level is picked, list its users so a specific manager's team
+// can be selected. Selecting a user scopes the whole view to that user's team.
+function onLevelChange(){
+  var usr = el('bj-user');
+  if(!usr){ load(); return; }       // not top-level: just reload on level change
+  var lvl = el('bj-level').value;
+  usr.innerHTML = '<option value="">All users at level</option>';
+  if(!lvl){ usr.classList.add('hide'); load(); return; }
+  fetch(BASE + '/users?escalationType=' + encodeURIComponent(lvl), {headers:{'Accept':'application/json'}})
+    .then(function(r){ return r.json(); })
+    .then(function(d){
+      var us = d.users || [];
+      var h = '<option value="">All ' + esc(lvl) + ' users</option>';
+      us.forEach(function(u){ h += '<option value="' + u.id + '">' + esc(u.name) + '</option>'; });
+      usr.innerHTML = h;
+      usr.classList.toggle('hide', us.length === 0);
+      load();
+    })
+    .catch(function(){ usr.classList.add('hide'); load(); });
+}
 function spinner(){ el('bj-content').innerHTML = '<div class="loading"><div class="spinner"></div>Loading&hellip;</div>'; }
 function fail(e){ el('bj-content').innerHTML = '<div class="loading">Could not load data ('+esc(e&&e.message||e)+'). Are you signed in?</div>'; }
 function setLens(name){
   LENS = name;
   return loadApproval();
+}
 /* ============================ TODAY ============================ */
 function loadToday(){
+  updateTodayLabel();
   spinner();
   fetch(BASE + '/today?date=' + encodeURIComponent(el('bj-date').value) + qs(), {headers:{'Accept':'application/json'}})
     .then(function(r){ if(!r.ok) throw new Error('HTTP '+r.status); return r.json(); })
     .then(renderToday).catch(fail);
+}
+}
 function leakbox(t, v, color){ return '<div class="leakbox"><div class="lt">'+t+'</div><div class="lv"'+(color?' style="color:'+color+'"':'')+'>'+num(v)+'</div></div>'; }
 function renderToday(d){
   var k=d.kpis, f=d.funnel, s=d.stops, a=d.attention;
+  window._canApprove = !!d.canApprove;
+  window._mediaUrl = d.mediaUrl || window._mediaUrl || '';
   var h='';
   h+='<div class="kpis">';
   h+=kpi('&#128101;','#eef1fb','#3b5bdb','Executives scheduled',num(k.scheduled),k.notStarted+' not started yet');
   h+=kpi('&#9201;','#ebfbee','#2f9e44','Punched in',num(k.punchedIn)+' <small>/'+k.scheduled+'</small>',k.notStarted+' pending');
   h+=kpi('&#128205;','#e7f5ff','#1098ad','On route now',num(k.onRouteNow),'live journeys');
   h+=fstep('Scheduled executives',f.scheduled,100,'start of day',false,false);
   h+=fstep('Punched in',f.punchedIn,pct(f.punchedIn,sc),'&minus;'+(f.scheduled-f.punchedIn)+' never started',true,false);
   h+=fstep('Made a check-in',f.madeCheckin,pct(f.madeCheckin,sc),'&minus;'+(f.punchedIn-f.madeCheckin)+' punched, idle',true,false);
   h+=fstep('Completed all visits',f.completedAll,pct(f.completedAll,sc),(f.madeCheckin-f.completedAll)+' still mid-journey',true,false);
   h+=fstep('Punched out',f.punchedOut,pct(f.punchedOut,sc),'journey ended',false,true);
-  h+='</div><div class="leak">';
-  h+=leakbox('Stops planned',s.planned,null);
-  h+=leakbox('Checked out (done)',s.done,'#2f9e44');
-  h+=leakbox('In progress now',s.inProgress,'#1098ad');
-  h+=leakbox('Deferred',s.deferred,'#e8590c');
-  h+=leakbox('Untouched',s.untouched,'#e03131');
   h+='</div></div>';
   h+='<div class="grid g3">';
   h+='<div class="card"><h2>Live executive board</h2><p class="desc">Each executive\'s journey right now. Click a row for the day\'s visit detail.</p>'+boardTable(d.board, d.date)+'</div>';
   h+='<div class="card"><h2>Needs attention now</h2><p class="desc">Things a manager should clear today.</p>'+attentionList(a)+'</div>';
   h+='</div>';
   el('bj-content').innerHTML=h;
+}
 function stateClass(st){ return st==='IN_STORE'?'ps-store':st==='TRAVELLING'?'ps-travel':st==='DONE'?'ps-done':st==='NOT_STARTED'?'ps-no':'ps-idle'; }
+function js(s){ return String(s==null?'':s).replace(/\\/g,'\\\\').replace(/'/g,"\\'"); }
+// Open the Beat Planner (map-first planner window) for this executive/beat/day,
+// in a new tab. Edit pre-selects the beat; add opens it to assign/add a visit.
+function openPlanner(authUserId, beatId, date, mode){
+  var u = CTX + '/beatPlanWindow?autoUserId=' + encodeURIComponent(authUserId) + '&editDate=' + encodeURIComponent(date);
+  if(beatId && beatId>0) u += '&editBeatId=' + encodeURIComponent(beatId);
+  if(mode==='add') u += '&assign=1';
+  window.open(u, '_blank');
+}
 function boardTable(rows, date){
   if(!rows||!rows.length) return '<p class="desc">No executives scheduled or active for this date.</p>';
+  var h='<div style="overflow-x:auto"><table><thead><tr>'+
+    '<th>Agenda</th><th>Executive</th><th class="num">Planned</th>'+
-  var h='<table><thead><tr><th>Executive / Beat</th><th>Agenda</th><th>Punch-in</th><th>State now</th><th class="num">Visits</th><th class="num">Last ping</th><th class="num">Batt</th><th class="num">Loc-off</th></tr></thead><tbody>';
+    '<th>Punch In/Out</th><th>State</th><th class="num">Total</th><th class="num">Completed</th><th class="num">Pending</th><th class="num">Deferred</th><th>Action</th>'+
+    '</tr></thead><tbody>';
   rows.forEach(function(r){
-    var stale = r.lastPingMin!=null && r.lastPingMin>=40;
+    var rowcls = r.state==='NOT_STARTED' ? 'rowbad' : (r.idleAway?'rowwarn':'');
-    var idle = r.state==='TRAVELLING' && stale;
+    var A = r.userId+",'"+js(r.name)+"','"+date+"'";   // openExec args
-    var rowcls = r.state==='NOT_STARTED' ? 'rowbad' : (idle?'rowwarn':'');
+    var go = 'onclick="openExec('+A+')"';
-    var ping = r.lastPingMin==null ? '-' : (r.lastPingMin+' min');
+    h+='<tr class="clickable '+rowcls+'" '+go+'>'+
-    h+='<tr class="clickable '+rowcls+'" onclick="openExec('+r.userId+',\''+esc(r.name)+'\',\''+date+'\')">'+
+       '<td style="text-align:center">'+(r.agendaFilled?'<span style="color:#2f9e44;font-size:15px">&#10003;</span>':'<span class="badflag" style="font-size:15px">&#10007;</span>')+'</td>'+
-       '<td><b>'+esc(r.name)+'</b><br><span style="color:#97a1b5;font-size:11px">'+esc(r.beatName||'-')+'</span></td>'+
+       '<td><b>'+esc(r.name)+'</b><br>'+esc(r.beatName||'-')+'</td>'+
+       '<td class="num">'+r.planned+'</td>'+
-       '<td>'+(r.agendaFilled?'<span style="color:#2f9e44">&#10003;</span>':'<span class="badflag">&#10007;</span>')+'</td>'+
+       '<td style="white-space:nowrap">'+(r.punchInTime?'<span class="ptime">'+esc(r.punchInTime)+'</span>':'<span class="badflag">-</span>')+
-       '<td>'+(r.punchInTime?esc(r.punchInTime):'<span class="badflag">-</span>')+'</td>'+
+         ' <span style="color:#97a1b5;font-size:11px">/ '+(r.punchOutTime?esc(r.punchOutTime):'--')+'</span></td>'+
        '<td><span class="pill-state '+stateClass(r.state)+'">'+esc(r.stateLabel)+'</span></td>'+
-       '<td class="num">'+r.visitsDone+'/'+r.visitsTotal+'</td>'+
+       '<td class="num cnt cmuted">'+r.totalVisits+'</td>'+
-       '<td class="num'+(stale?' warnflag':'')+'">'+ping+'</td>'+
+       '<td class="num cnt cgreen">'+r.completedVisits+'</td>'+
-       '<td class="num'+(r.battery!=null&&r.battery<25?' warnflag':'')+'">'+(r.battery==null?'-':r.battery+'%')+'</td>'+
+       '<td class="num cnt camber">'+r.pendingVisits+'</td>'+
-       '<td class="num'+(r.locOff>0?' warnflag':'')+'">'+r.locOff+'</td></tr>';
+       '<td class="num cnt cred">'+r.deferred+'</td>'+
+       '<td style="white-space:nowrap" onclick="event.stopPropagation()">'+
+         '<button class="actbtn map" title="Live location" onclick="openExec('+A+',\'map\')">&#128205;</button>'+
+         '<button class="actbtn view" title="Journey detail" onclick="openExec('+A+')">&#128065;</button>'+
+         '<button class="actbtn edit" title="Edit beat in Beat Planner" onclick="openPlanner('+r.authUserId+','+(r.beatId||0)+',\''+date+'\',\'edit\')">&#9998;</button>'+
+         '<button class="actbtn add" title="Assign / add visit in Beat Planner" onclick="openPlanner('+r.authUserId+','+(r.beatId||0)+',\''+date+'\',\'add\')">&#43;</button>'+
+       '</td></tr>';
   });
-  return h+'</tbody></table>';
+  return h+'</tbody></table></div>';
+}
 function names(list,n){ if(!list||!list.length) return 'None'; var s=list.slice(0,n).join(', '); if(list.length>n) s+=' +'+(list.length-n); return s; }
 var ATT_META = {
   notPunchedIn:    {bg:'#fff0f0', fg:'#e03131', ic:'&#9888;',   title:'Not punched in',                  sub:'executives with a beat, not started', cls:'badflag'},
-  idleStale:       {bg:'#fff4e6', fg:'#e8590c', ic:'&#9201;',   title:'Idle / stale GPS &gt; 40 min',     sub:'no recent GPS ping',                  cls:'warnflag'},
+  idleStale:       {bg:'#fff4e6', fg:'#e8590c', ic:'&#9201;',   title:'Idle &mdash; off-store &gt; 40 min', sub:'stationary &gt;20 m from any store',  cls:'warnflag'},
   geofence:        {bg:'#fff0f0', fg:'#e03131', ic:'&#128205;', title:'Check-in outside store geofence',  sub:'&gt;50 m from partner\'s saved location', cls:'badflag'},
   locationOff:     {bg:'#fff4e6', fg:'#e8590c', ic:'&#128244;', title:'Location turned off mid-journey',  sub:'GPS toggled off',                     cls:'warnflag'},
   deferredAwaiting:{bg:'#eef1f6', fg:'#69748c', ic:'&#8635;',   title:'Deferred, awaiting re-action',     sub:'shops deferred today',                cls:''}
 };
 function attentionList(a){
   return h;
+}
 function openAttention(key){
   var a=window._att||{}, list=a[key]||[], m=ATT_META[key]||{title:'Detail'};
   var mb=el('bj-modal-back'), md=el('bj-modal');
+  // Off-site check-ins can be approved here, but only by L5/Final (canApprove).
+  var showApprove = (key==='geofence' && window._canApprove);
   var h='<button class="x" onclick="closeModal()">&times;</button><h3>'+m.title+'</h3>'+
-        '<p class="desc">'+list.length+' '+(list.length===1?'item':'items')+'</p>';
+        '<p class="desc">'+list.length+' '+(list.length===1?'item':'items')+
+        (showApprove?' &middot; approving updates the partner\'s saved coordinates':'')+'</p>';
   if(!list.length){ h+='<p class="desc">Nothing here.</p>'; }
   else{
     h+='<table><tbody>';
     list.forEach(function(x){
+      var act='';
+      if(showApprove) act='<td class="num" style="white-space:nowrap">'+(x.trackingId?'<button class="btn-ok" onclick="openValidate('+x.trackingId+')">Validate &amp; Approve</button>':'')+'</td>';
       h+='<tr><td style="font-weight:600;white-space:nowrap">'+esc(x.name)+'</td>'+
-         '<td style="color:#69748c">'+esc(x.detail||'')+'</td></tr>';
+         '<td style="color:#69748c">'+esc(x.detail||'')+'</td>'+act+'</tr>';
     });
     h+='</tbody></table>';
+  }
   md.innerHTML=h; mb.classList.add('show');
+}
+// Step 2: review the check-in photo/document before approving.
+function openValidate(trackingId){
+  var list=(window._att&&window._att.geofence)||[], item=null;
+  for(var i=0;i<list.length;i++){ if(list[i].trackingId===trackingId){ item=list[i]; break; } }
+  if(!item){ return; }
+  var img = (item.attachment && window._mediaUrl)
+    ? '<img class="valimg" src="'+esc(window._mediaUrl+item.attachment)+'" onclick="window.open(this.src,\'_blank\')" onerror="this.outerHTML=\'<div class=&quot;valph&quot;>&#128247; Photo unavailable</div>\'">'
+    : '<div class="valph">&#128247; No photo on this check-in</div>';
+  el('bj-modal').innerHTML='<button class="x" onclick="closeModal()">&times;</button><h3>Validate check-in</h3>'+
+    '<p class="desc">'+esc(item.name)+' &middot; '+esc(item.detail||'')+'</p>'+
+    '<div class="valwrap">'+img+'</div>'+
+    '<div class="valactions">'+
+      '<button class="exectab" onclick="openAttention(\'geofence\')">&larr; Back</button>'+
+      '<button class="btn-ok" onclick="approveValidated('+trackingId+',this)">Approve</button>'+
+    '</div>';
+}
+function approveValidated(trackingId, btn){
+  btn.disabled=true; btn.textContent='Approving…';
+  fetch(CTX+'/beat-journey/approve-checkin',{method:'POST',headers:{'Content-Type':'application/x-www-form-urlencoded'},body:'trackingId='+trackingId})
+    .then(function(r){ if(!r.ok) throw new Error('HTTP '+r.status); return r.json(); })
+    .then(function(){
+      if(window._att && window._att.geofence){ window._att.geofence = window._att.geofence.filter(function(x){ return x.trackingId!==trackingId; }); }
+      if(window._att && window._att.geofence && window._att.geofence.length) openAttention('geofence');
+      else closeModal();
+    })
+    .catch(function(){ btn.disabled=false; btn.textContent='Approve'; alert('Approve failed (not authorised, or server error).'); });
+}
 /* ============================ PERIOD ============================ */
 function loadPeriod(){
   spinner();
   var u = BASE + '/data?startDate=' + encodeURIComponent(el('bj-start').value) + '&endDate=' + encodeURIComponent(el('bj-end').value) + qs();
     '<li><b>Coverage and the manager view</b> follow the existing L1&ndash;L5 sales hierarchy, so each manager sees only their team.</li>'+
     '</ul></div>';
+}
 /* ============================ EXEC DRILLDOWN ============================ */
-function openExec(userId, name, date){
+function openExec(userId, name, date, tab){
   if(!userId){ return; }
+  window._exec = {userId:userId, name:name, date:date, detail:null, tab:(tab||'timeline')};
   var mb=el('bj-modal-back'), m=el('bj-modal');
   m.innerHTML='<button class="x" onclick="closeModal()">&times;</button><h3>'+esc(name)+'</h3><p class="desc">Journey detail &middot; '+esc(date)+'</p><div class="loading"><div class="spinner"></div>Loading&hellip;</div>';
   mb.classList.add('show');
   fetch(CTX+'/beat-journey/journey-detail?userId='+userId+'&date='+encodeURIComponent(date),{headers:{'Accept':'application/json'}})
     .then(function(r){ return r.json(); }).then(function(d){
       window._mediaUrl = d.mediaUrl || '';
+      window._exec.detail = d;
+      renderExec(window._exec.tab);
+    }).catch(function(){ el('bj-modal').innerHTML='<button class="x" onclick="closeModal()">&times;</button><p class="desc">Could not load detail.</p>'; });
+}
+function renderExec(tab){
+  var ex=window._exec; if(!ex) return;
+  var d=ex.detail||{};
+  var head='<button class="x" onclick="closeModal()">&times;</button><h3>'+esc(ex.name)+'</h3>'+
+    '<p class="desc">Journey detail &middot; '+esc(ex.date)+' &middot; battery '+(d.batteryLevel==null?'-':d.batteryLevel+'%')+' &middot; loc-off '+(d.locationToggleCount||0)+'</p>'+
+    '<div class="exectabs">'+
+      '<button class="exectab'+(tab==='timeline'?' active':'')+'" onclick="renderExec(\'timeline\')">&#128221; Timeline</button>'+
+      '<button class="exectab'+(tab==='map'?' active':'')+'" onclick="renderExec(\'map\')">&#128205; Live Location</button>'+
+    '</div>';
+  if(tab==='map'){
+    el('bj-modal').innerHTML=head+'<div id="bjMap"><div class="loading"><div class="spinner"></div>Loading map&hellip;</div></div>';
+    bjShowMap(ex.userId, ex.date);
+  } else {
+    el('bj-modal').innerHTML=head+buildTimelineHtml(d, ex.date);
+  }
+}
+function buildTimelineHtml(d, date){
-      var all=(d.visits||[]).slice();
+  var all=(d.visits||[]).slice();
-      // Sequence like the field report: Punch in -> visited stops (by check-in
+  // Sequence like the field report: Punch in -> visited stops (by check-in time)
-      // time) -> PENDING/not-visited -> Punch out. The attendance row carries
+  // -> PENDING/not-visited -> Punch out. The attendance row carries both punch-in
-      // both punch-in & punch-out times; split it into the two bookends.
+  // & punch-out times; split it into the two bookends.
-      var att=null, visited=[], pending=[];
+  var att=null, visited=[], pending=[];
-      all.forEach(function(x){
+  all.forEach(function(x){
-        var tt=(x.taskType||'').toLowerCase(), mt=(x.markType||'').toUpperCase();
+    var tt=(x.taskType||'').toLowerCase(), mt=(x.markType||'').toUpperCase();
-        if(tt==='attendance' || mt.indexOf('PUNCH')>=0){ if(!att) att=x; }
+    if(tt==='attendance' || mt.indexOf('PUNCH')>=0){ if(!att) att=x; }
-        else if(x.checkInTime){ visited.push(x); }
+    else if(x.checkInTime){ visited.push(x); }
-        else { pending.push(x); }
+    else { pending.push(x); }
-      });
+  });
-      visited.sort(function(a,b){ return tlSecs(a.checkInTime)-tlSecs(b.checkInTime); });
+  visited.sort(function(a,b){ return tlSecs(a.checkInTime)-tlSecs(b.checkInTime); });
-      // totals across the day's stops (attendance row excluded from leg sums)
-      var distKm=0, inStoreSec=0, transitSec=0, leadsN=0;
+  var distKm=0, inStoreSec=0, transitSec=0, leadsN=0;
-      all.forEach(function(x){
+  all.forEach(function(x){
-        var tt=(x.taskType||'').toLowerCase();
+    var tt=(x.taskType||'').toLowerCase();
-        if(tt==='attendance') return;
+    if(tt==='attendance') return;
-        if(x.totalDistance) distKm += (parseFloat(x.totalDistance)||0);
+    if(x.totalDistance) distKm += (parseFloat(x.totalDistance)||0);
-        inStoreSec += toSec(x.timeSpent);
+    inStoreSec += toSec(x.timeSpent);
-        transitSec += toSec(x.transitTime);
+    transitSec += toSec(x.transitTime);
-        if(tt==='lead') leadsN++;
+    if(tt==='lead') leadsN++;
-      });
+  });
-      var workSec = (att && att.checkInTime && att.checkOutTime) ? (toSec(att.checkOutTime)-toSec(att.checkInTime)) : (att?toSec(att.timeSpent):0);
+  var workSec = (att && att.checkInTime && att.checkOutTime) ? (toSec(att.checkOutTime)-toSec(att.checkInTime)) : (att?toSec(att.timeSpent):0);
-      if(workSec<0) workSec=0;
+  if(workSec<0) workSec=0;
-      var seq=[];
+  var seq=[];
-      if(att && att.checkInTime) seq.push(punchEntry('in', att.checkInTime));
+  if(att && att.checkInTime) seq.push(punchEntry('in', att.checkInTime));
-      visited.forEach(function(x){ seq.push(x); });
+  visited.forEach(function(x){ seq.push(x); });
-      pending.forEach(function(x){ seq.push(x); });
+  pending.forEach(function(x){ seq.push(x); });
-      if(att && att.checkOutTime) seq.push(punchEntry('out', att.checkOutTime));
+  if(att && att.checkOutTime) seq.push(punchEntry('out', att.checkOutTime));
-      var h='<button class="x" onclick="closeModal()">&times;</button><h3>'+esc(name)+'</h3>'+
-        '<p class="desc">Journey detail &middot; '+esc(date)+' &middot; battery '+(d.batteryLevel==null?'-':d.batteryLevel+'%')+' &middot; loc-off '+(d.locationToggleCount||0)+'</p>';
-      h+='<div class="jstats">'+
+  var h='<div class="jstats">'+
-        jstat(fmtSec(workSec),'Working hours')+
+    jstat(fmtSec(workSec),'Working hours')+
-        jstat(fmtSec(inStoreSec),'In-store time')+
+    jstat(fmtSec(inStoreSec),'In-store time')+
-        jstat(fmtSec(transitSec),'Travel time')+
+    jstat(fmtSec(transitSec),'Travel time')+
-        jstat(distKm.toFixed(2)+' km','Distance Covered')+
+    jstat(distKm.toFixed(2)+' km','Distance Covered')+
-        jstat(visited.length+(leadsN?' &middot; '+leadsN+'L':''),'Stores visited')+
+    jstat(visited.length+(leadsN?' &middot; '+leadsN+'L':''),'Stores / Leads')+
-        '</div>';
+    '</div>';
-      if(!seq.length){ h+='<p class="desc">No tracking events for this day.</p>'; }
+  if(!seq.length){ return h+'<p class="desc">No tracking events for this day.</p>'; }
-      else{
-        h+='<div class="tl">';
+  h+='<div class="tl">';
-        var ri=0;
+  var ri=0;
-        seq.forEach(function(x){
+  seq.forEach(function(x){
-          // travel connector before each visited stop: time taken + distance to reach it
-          if(!x._punch && x.checkInTime){
+    if(!x._punch && x.checkInTime){
-            var tr=(x.transitTime && x.transitTime!=='00:00:00') ? x.transitTime : null;
+      var tr=(x.transitTime && x.transitTime!=='00:00:00') ? x.transitTime : null;
-            var km=(x.totalDistance && parseFloat(x.totalDistance)>0) ? (parseFloat(x.totalDistance).toFixed(2)+' km') : null;
+      var km=(x.totalDistance && parseFloat(x.totalDistance)>0) ? (parseFloat(x.totalDistance).toFixed(2)+' km') : null;
-            if(tr || km){
+      if(tr || km){
-              var parts=[]; if(tr) parts.push('&#128663; '+esc(tr)); if(km) parts.push(esc(km));
+        var parts=[]; if(tr) parts.push('&#128663; '+esc(tr)); if(km) parts.push(esc(km));
-              h+='<div class="tlgap"><span class="gappill">'+parts.join(' &middot; ')+'</span></div>';
+        h+='<div class="tlgap"><span class="gappill">'+parts.join(' &middot; ')+'</span></div>';
-            }
-          }
-          h+=tlRow(x, ri%2===0?'left':'right'); ri++;
-        });
-        h+='</div>';
+      }
+    }
+    h+=tlRow(x, ri%2===0?'left':'right'); ri++;
+  });
+  h+='</div>';
+  return h;
+}
+/* ---- live location map (reuses /beat-report/live-tracking pathPoints) ---- */
+function bjLoadMaps(cb){
+  if(window.google && window.google.maps){ cb(); return; }
+  window._mapsCbs = window._mapsCbs || [];
+  window._mapsCbs.push(cb);
+  if(window._mapsLoading) return;
+  window._mapsLoading=true;
+  window.__bjMapsReady=function(){ (window._mapsCbs||[]).forEach(function(f){ try{f();}catch(e){} }); window._mapsCbs=[]; };
+  var s=document.createElement('script');
+  s.src='https://maps.googleapis.com/maps/api/js?key=AIzaSyAckO0y4Z6WhBOuMjNjioWLSYZDhGEvGBc&libraries=geometry&v=weekly&callback=__bjMapsReady';
+  s.async=true; document.head.appendChild(s);
+}
+function bjShowMap(userId, date){
+  bjLoadMaps(function(){
+    fetch(CTX+'/beat-journey/track-map?userId='+userId+'&date='+encodeURIComponent(date),{headers:{'Accept':'application/json'}})
+      .then(function(r){ return r.json(); }).then(function(data){ bjDrawMap(data); })
+      .catch(function(){ var e=document.getElementById('bjMap'); if(e) e.innerHTML='<div class="loading">Could not load location.</div>'; });
+  });
+}
+function bjMarkColor(mt){
+  mt=(mt||'').toUpperCase();
+  if(mt.indexOf('CHECKOUT')>=0) return '#2f9e44';
+  if(mt==='CHECKIN') return '#f59f00';
+  if(mt==='DEFERRED') return '#e8590c';
+  if(mt==='PENDING') return '#97a1b5';
+  return '#3b5bdb';
+}
+function bjMarkInfo(v,color){
+  return '<div style="font-size:12px;max-width:240px"><b>'+esc(v.name||'')+'</b><br>'+
+    '<span style="background:'+color+';color:#fff;border-radius:4px;padding:1px 6px;font-size:10px">'+esc(v.markType||'')+'</span>'+
+    (v.checkInTime?'<br>In: <b>'+esc(v.checkInTime)+'</b>':'')+
+    (v.checkOutTime?'<br>Out: <b>'+esc(v.checkOutTime)+'</b>':'')+
+    (v.timeSpent?'<br>Time spent: <b>'+esc(v.timeSpent)+'</b>':'')+
+    (v.address?'<br>'+esc(v.address):'')+'</div>';
+}
+// Teardrop pin (same shape as Beat Report) with a white disc + label.
+function bjPin(color, label){
+  var svg='<svg xmlns="http://www.w3.org/2000/svg" width="28" height="40" viewBox="0 0 28 40">'+
+    '<path d="M14 0C6.268 0 0 6.268 0 14c0 10.5 14 26 14 26s14-15.5 14-26C28 6.268 21.732 0 14 0z" fill="'+color+'"/>'+
+    '<circle cx="14" cy="14" r="7" fill="#ffffff"/>'+
+    '<text x="14" y="18" text-anchor="middle" font-size="10" font-weight="bold" fill="'+color+'">'+label+'</text></svg>';
+  return {url:'data:image/svg+xml;charset=UTF-8,'+encodeURIComponent(svg), scaledSize:new google.maps.Size(28,40), anchor:new google.maps.Point(14,40)};
+}
+// Larger pin sized to fit a duration label (idle stops).
+function bjStopPin(label){
+  var s=String(label), d=Math.max(40, 14+s.length*7), H=d+10, r=d/2;
+  var svg='<svg xmlns="http://www.w3.org/2000/svg" width="'+d+'" height="'+H+'" viewBox="0 0 '+d+' '+H+'">'+
+    '<polygon points="'+(r-7)+','+(d-7)+' '+(r+7)+','+(d-7)+' '+r+','+H+'" fill="#e8590c"/>'+
+    '<circle cx="'+r+'" cy="'+r+'" r="'+(r-2)+'" fill="#e8590c" stroke="#ffffff" stroke-width="2"/>'+
+    '<text x="'+r+'" y="'+(r+4)+'" text-anchor="middle" font-size="12" font-weight="bold" fill="#ffffff">'+s+'</text></svg>';
+  return {url:'data:image/svg+xml;charset=UTF-8,'+encodeURIComponent(svg), scaledSize:new google.maps.Size(d,H), anchor:new google.maps.Point(r,H)};
+}
+function fmtDur2(sec){ sec=sec||0; var m=Math.floor(sec/60), s=sec%60; return m+'m'+(s>0?' '+s+'s':''); }
+function bjDrawMap(data){
+  var box=document.getElementById('bjMap'); if(!box) return;
-      m.innerHTML=h;
+  box.innerHTML='';
+  var map=new google.maps.Map(box,{zoom:12,center:{lat:20.5937,lng:78.9629},mapTypeControl:true,streetViewControl:false});
+  var bounds=new google.maps.LatLngBounds(), has=false;
+  function pin(pos,icon,zi,title,info){
+    has=true; bounds.extend(pos);
+    var m=new google.maps.Marker({position:pos,map:map,zIndex:zi||100,icon:icon,title:title||''});
+    if(info){ var iw=new google.maps.InfoWindow({content:info}); m.addListener('click',function(){ iw.open(map,m); }); }
+    return m;
+  }
+  // 1) GPS trail + last-known location (same bike/rider icon as Beat Report)
+  var pts=(data.path||[]).map(function(p){ return {lat:p.lat,lng:p.lng}; });
+  if(pts.length){
+    new google.maps.Polyline({path:pts,geodesic:true,strokeColor:'#e03131',strokeOpacity:.7,strokeWeight:3,zIndex:40,map:map});
+    pts.forEach(function(p){ bounds.extend(p); has=true; });
+    var lastPt=pts[pts.length-1];
+    var lk=new google.maps.Marker({position:lastPt,map:map,zIndex:999,title:'Last Known Location',
+      icon:{url:CTX+'/resources/images/salesman.png',scaledSize:new google.maps.Size(40,40),anchor:new google.maps.Point(20,20)}});
+    var lkIw=new google.maps.InfoWindow({content:'<div style="font-size:12px"><b>&#128205; Last known location</b></div>'});
+    lk.addListener('click',function(){ lkIw.open(map,lk); });
+  }
+  // 2) idle stops (>=10 min within 50 m)
+  (data.idleStops||[]).forEach(function(s){
+    var lbl=fmtDur2(s.seconds);
+    pin({lat:s.lat,lng:s.lng}, bjStopPin(lbl), 80, 'Idle '+lbl,
+      '<div style="font-size:12px"><b>&#9201; Idle stop</b><br>Stayed ~'+esc(lbl)+' within 50 m</div>');
+  });
+  // 3) every visit
+  var idx=0;
+  (data.visits||[]).forEach(function(v){
+    var color=bjMarkColor(v.markType);
+    pin({lat:v.lat,lng:v.lng}, bjPin(color, String(++idx)), 100,
+      (v.name||'')+' ('+v.markType+')', bjMarkInfo(v,color));
+  });
+  // 4) punch in / punch out
+  if(data.punchIn){
+    pin({lat:data.punchIn.lat,lng:data.punchIn.lng}, bjPin('#2f9e44','P'), 300,
+      'Punch in'+(data.punchIn.time?' · '+data.punchIn.time:''),
+      '<div style="font-size:12px"><b>&#9873; Punch in</b>'+(data.punchIn.time?'<br>'+esc(data.punchIn.time):'')+'</div>');
+  }
+  if(data.punchOut){
+    pin({lat:data.punchOut.lat,lng:data.punchOut.lng}, bjPin('#7048e8','X'), 300,
+      'Punch out'+(data.punchOut.time?' · '+data.punchOut.time:''),
+      '<div style="font-size:12px"><b>&#9873; Punch out</b>'+(data.punchOut.time?'<br>'+esc(data.punchOut.time):'')+'</div>');
+  }
+  if(has){
+    map.fitBounds(bounds);
+    google.maps.event.addListenerOnce(map,'idle',function(){ if(map.getZoom()>16) map.setZoom(16); });
+  } else {
-    }).catch(function(){ m.innerHTML='<button class="x" onclick="closeModal()">&times;</button><p class="desc">Could not load detail.</p>'; });
+    box.innerHTML='<div class="loading">No GPS / location recorded for this day.</div>';
+  }
+}
 function tlSecs(t){ if(!t) return 1e9; var p=t.split(':'); return (+p[0])*3600+(+(p[1]||0))*60+(+(p[2]||0)); }
 function toSec(t){ if(!t||t==='00:00:00') return 0; var p=t.split(':'); return (+p[0])*3600+(+(p[1]||0))*60+(+(p[2]||0)); }
 function fmtSec(s){ s=Math.max(0,Math.round(s)); var h=Math.floor(s/3600), m=Math.floor((s%3600)/60), ss=s%60; function z(n){return (n<10?'0':'')+n;} return z(h)+':'+z(m)+':'+z(ss); }
 function jstat(v,l){ return '<div class="js"><div class="jv">'+v+'</div><div class="jl">'+l+'</div></div>'; }
+}
 /* ============================ INIT ============================ */
 document.querySelectorAll('.lens').forEach(function(b){ b.addEventListener('click', function(){ setLens(b.getAttribute('data-lens')); }); });
 el('bj-apply').addEventListener('click', load);
+el('bj-level').addEventListener('change', onLevelChange);
+if(el('bj-user')) el('bj-user').addEventListener('change', load);
+el('bj-date').addEventListener('change', updateTodayLabel);
 el('bj-modal-back').addEventListener('click', function(e){ if(e.target===el('bj-modal-back')) closeModal(); });
+updateTodayLabel();
 load();
 </script>
 </body>
 </html>

Subversion Repositories SmartDukaan

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