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

   .hide{display:none}
   .loading{padding:70px;text-align:center;color:var(--muted)}
   .spinner{width:30px;height:30px;border:3px solid #e3e8f5;border-top-color:var(--brand);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 12px}
   @keyframes spin{to{transform:rotate(360deg)}}
   .modal-back{position:fixed;inset:0;background:rgba(15,22,40,.45);display:none;align-items:flex-start;justify-content:center;z-index:50;padding:40px 16px;overflow:auto}
+  /* image lightbox — stacks above the journey modal */
+  .img-back{position:fixed;inset:0;background:rgba(8,12,24,.82);display:none;align-items:center;justify-content:center;z-index:60;padding:30px}
+  .img-back.show{display:flex}
+  .img-back img{max-width:95%;max-height:92vh;border-radius:10px;box-shadow:0 16px 60px rgba(0,0,0,.5);background:#fff}
+  .img-x{position:absolute;top:18px;right:22px;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.18);color:#fff;font-size:26px;line-height:1;cursor:pointer}
+  .img-x:hover{background:rgba(255,255,255,.3)}
   .modal-back.show{display:flex}
   .modal{background:#fff;border-radius:14px;max-width:780px;width:100%;padding:20px 22px;box-shadow:0 20px 60px rgba(10,20,50,.3);position:relative}
   .modal h3{margin:0 0 2px;font-size:17px;text-align:center}
   .modal > .desc{text-align:center}
   .modal .x{position:absolute;top:14px;right:16px;cursor:pointer;color:var(--soft);font-size:22px;line-height:1;border:0;background:none}
   /* journey timeline (exec drilldown) */
   .tl{position:relative;margin:14px 2px 4px;padding:4px 0}
   .tl::before{content:"";position:absolute;left:50%;top:6px;bottom:6px;width:2px;background:#e9edf5;transform:translateX(-50%)}
   .tlgap{position:relative;display:flex;justify-content:center;margin:-3px 0}
   .tlgap .gappill{background:#fff;border:1px solid var(--line);border-radius:999px;padding:3px 11px;font-size:11px;font-weight:600;color:var(--muted);z-index:2;box-shadow:0 1px 2px rgba(20,30,60,.05);font-variant-numeric:tabular-nums}
-  .tlrow{position:relative;display:flex;margin:14px 0}
+  .tlrow{position:relative;display:flex;justify-content:space-between;align-items:flex-start;margin:14px 0}
-  .tlrow.left{justify-content:flex-start}
-  .tlrow.right{justify-content:flex-end}
   .tlrow .node{position:absolute;left:50%;top:8px;transform:translateX(-50%);width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;z-index:2;box-shadow:0 0 0 4px #fff}
   .tlcard{width:calc(50% - 26px);background:#fff;border:1px solid var(--line);border-radius:11px;box-shadow:0 2px 10px rgba(20,30,60,.07);display:flex;overflow:hidden}
   .tlrow.left .tlcard{flex-direction:row-reverse;text-align:right}
   .tlrow.right .tlcard{flex-direction:row;text-align:left}
+  /* remark on the opposite half, hugging the centre line */
+  .tlremark{width:calc(50% - 26px);display:flex;align-items:flex-start;padding-top:6px}
+  .tlrow.right .tlremark{justify-content:flex-end}
+  .tlrow.left .tlremark{justify-content:flex-start}
+  .tlremark .rk{max-width:100%;background:#fbfcfe;border:1px solid var(--line2);border-left:3px solid #c7d0e8;border-radius:8px;padding:7px 10px;font-size:11.5px;color:#4a5468;line-height:1.45;word-break:break-word}
+  .tlrow.right .tlremark .rk{text-align:right}
+  .tlrow.left .tlremark .rk{text-align:left}
+  .tlremark .rkl{font-size:9px;text-transform:uppercase;letter-spacing:.05em;color:var(--soft);font-weight:700;margin-bottom:3px}
   .tlcard .tm{flex:none;width:62px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;font-weight:750;font-size:13px;padding:6px 4px;line-height:1.05}
   .tlcard .tm small{font-weight:600;font-size:8.5px;opacity:.9;text-transform:uppercase;letter-spacing:.04em;margin-top:3px}
   .tlcard .bd{padding:8px 11px;flex:1;min-width:0}
   .tlcard .bd .ti{font-size:12.5px;font-weight:700;color:var(--ink);line-height:1.25;word-break:break-word}
   .tlcard .bd .stt{display:inline-block;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:1px 6px;border-radius:5px;margin-top:5px;color:#fff}
   .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}
+  .bjlegend{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:12px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#f8f9fc;font-size:12.5px;min-height:20px}
+  .bjlegend .lg{font-weight:700}
+  .bjlegend .sw{display:inline-block;width:24px;vertical-align:middle;margin-right:7px}
+  .bjlegend .ln{border-top:4px solid #e03131}
+  .bjlegend .dt{border-top:4px dotted #2f9e44}
   .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}}
+  @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}.tlremark{display:none}}
 </style>
 </head>
 <body>
 <div class="wrap">
   <header class="top">
       <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>
       <button class="btn-r" id="bj-apply">Apply</button>
+      <button class="btn-r" id="bj-export" style="background:#2f9e44" title="Download an Excel report for the selected date / range">&#11015; Export Excel</button>
     </div>
   </header>
   <div class="lenses">
     <button class="lens active" data-lens="today" id="lens-today">Today (Live)</button>
 <div class="modal-back" id="bj-modal-back">
   <div class="modal" id="bj-modal"></div>
 </div>
+<div class="img-back" id="bj-img-back">
+  <button class="img-x" id="bj-img-x" title="Close">&times;</button>
+  <img id="bj-img" alt="Attachment">
+</div>
 <script>
 var CTX = '${rc.contextPath}';
 var BASE = CTX + '/beat-journey';
 var LENS = 'today';
 var TODAY = '$today';
 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>\'">'
+    ? '<img class="valimg" src="'+esc(window._mediaUrl+item.attachment)+'" onclick="bjOpenImage(this.src)" 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">'+
     '<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="bjRouteLegend" class="bjlegend"></div>'+
-    el('bj-modal').innerHTML=head+'<div id="bjMap"><div class="loading"><div class="spinner"></div>Loading map&hellip;</div></div>';
+      '<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);
+  }
+}
     else if(x.checkInTime){ visited.push(x); }
     else { pending.push(x); }
   });
   visited.sort(function(a,b){ return tlSecs(a.checkInTime)-tlSecs(b.checkInTime); });
-  var distKm=0, inStoreSec=0, transitSec=0, leadsN=0;
+  var distKm=0, inStoreSec=0, leadsN=0;
   all.forEach(function(x){
     var tt=(x.taskType||'').toLowerCase();
     if(tt==='attendance') return;
     if(x.totalDistance) distKm += (parseFloat(x.totalDistance)||0);
     inStoreSec += toSec(x.timeSpent);
-    transitSec += toSec(x.transitTime);
     if(tt==='lead') leadsN++;
   });
   var workSec = (att && att.checkInTime && att.checkOutTime) ? (toSec(att.checkOutTime)-toSec(att.checkInTime)) : (att?toSec(att.timeSpent):0);
   if(workSec<0) workSec=0;
+  // Travel = working − in-store, so In-store + Travel = Working hours exactly
+  // (summing per-leg transit under-counts the idle/waiting between stops).
+  var transitSec = Math.max(0, workSec - inStoreSec);
   var seq=[];
   if(att && att.checkInTime) seq.push(punchEntry('in', att.checkInTime));
   visited.forEach(function(x){ seq.push(x); });
   pending.forEach(function(x){ seq.push(x); });
     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)
+  // 1) last-known location marker (the GPS trail itself is drawn as the "taken"
+  // route in bjDrawRoutes, straight from location_tracking_path).
   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>'});
     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>');
+  }
+  // 5) routes — actual road taken vs Google-suggested optimal, for comparison.
+  // Checkpoints in journey order: punch in → visits (by check-in time) → punch out.
+  var cps=[];
+  if(data.punchIn) cps.push({lat:data.punchIn.lat,lng:data.punchIn.lng});
+  (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});
+  bjDrawRoutes(map, cps, pts);
   if(has){
     map.fitBounds(bounds);
     google.maps.event.addListenerOnce(map,'idle',function(){ if(map.getZoom()>16) map.setZoom(16); });
   } else {
     box.innerHTML='<div class="loading">No GPS / location recorded for this day.</div>';
+  }
+}
+// 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){
+  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});
+      legend.set('taken', bjRouteKm(res));
+    }, function(status){
+      console.warn('Directions (taken) failed:', status);
+      // fallback: plot the raw breadcrumb (straight hops) and measure along it
+      new google.maps.Polyline({path:pathPts,geodesic:false,strokeColor:'#e03131',strokeOpacity:.9,strokeWeight:4,zIndex:55,map:map});
+      var ll=pathPts.map(function(p){ return new google.maps.LatLng(p.lat,p.lng); });
+      legend.set('taken', google.maps.geometry.spherical.computeLength(ll)/1000);
+    });
+  } else {
+    legend.set('taken', false);
+  }
+  // suggested — Google-optimal route through punch-in → visits → punch-out
+  if(cps.length>=2){
+    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});
+      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);
+  }
+}
+// Evenly downsample a list to at most `max` items, always keeping first and last.
+function bjSample(arr, max){
+  if(arr.length<=max) return arr.slice();
+  var out=[], step=(arr.length-1)/(max-1);
+  for(var i=0;i<max;i++) out.push(arr[Math.round(i*step)]);
+  return out;
+}
+function bjRouteRequest(ds, origin, dest, wpts, optimize, ok, err){
+  ds.route({
+    origin:new google.maps.LatLng(origin.lat,origin.lng),
+    destination:new google.maps.LatLng(dest.lat,dest.lng),
+    waypoints:wpts, optimizeWaypoints:optimize,
+    travelMode:google.maps.TravelMode.DRIVING
+  }, function(res, status){
+    if(status===google.maps.DirectionsStatus.OK && res && res.routes && res.routes.length) ok(res);
+    else err(status);
+  });
+}
+function bjRenderRoute(map, res, opt){
+  var poly={strokeColor:opt.color, strokeWeight:opt.dashed?0:5, strokeOpacity:opt.dashed?0:0.85, zIndex:opt.z};
+  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'}];
+  }
+  new google.maps.DirectionsRenderer({map:map, directions:res, suppressMarkers:true,
+    suppressInfoWindows:true, preserveViewport:true, polylineOptions:poly});
+}
+function bjRouteKm(res){
+  var m=0; (res.routes[0].legs||[]).forEach(function(l){ m+=(l.distance?l.distance.value:0); }); return m/1000;
+}
+// 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');
+  if(!div) return { set:function(){}, note:function(){} };
+  var taken, sugg, noteTxt='';
+  function val(v){ return typeof v==='number' ? '<b>'+v.toFixed(1)+' km</b>' : (v===false ? 'n/a' : '…'); }
+  function render(){
+    var cmp='';
+    if(typeof taken==='number' && typeof sugg==='number'){
+      cmp = taken>sugg+0.05
+        ? '<span style="color:#e03131">+'+(taken-sugg).toFixed(1)+' km longer than suggested</span>'
+        : '<span style="color:#2f9e44">on / better than the suggested route</span>';
+    }
+    div.innerHTML=
+      '<span class="lg">Route comparison</span>'+
+      '<span><span class="sw ln"></span>Taken (GPS)</span>'+
+      '<span><span class="sw dt"></span>Suggested</span>'+
+      cmp+
+      (noteTxt?'<span style="color:#e8590c">'+noteTxt+'</span>':'');
+  }
+  render();
+  return { set:function(k,v){ if(k==='taken')taken=v; else sugg=v; render(); }, note:function(t){ noteTxt=t; render(); } };
+}
 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>'; }
 function hhmm(t){ return t? t.slice(0,5):''; }
 function tlThumb(att){
-  if(att && window._mediaUrl) return '<img class="tlthumb" src="'+esc(window._mediaUrl+att)+'" onclick="window.open(this.src,\'_blank\')" onerror="tlImgErr(this)">';
+  if(att && window._mediaUrl) return '<img class="tlthumb" src="'+esc(window._mediaUrl+att)+'" onclick="bjOpenImage(this.src)" onerror="tlImgErr(this)">';
   return '<div class="tlph" title="No photo">&#128247;</div>';
+}
 function tlImgErr(im){ var d=document.createElement('div'); d.className='tlph'; d.title='Photo unavailable'; d.innerHTML='&#128247;'; if(im.parentNode) im.parentNode.replaceChild(d, im); }
 function punchEntry(kind, time){ return {_punch:kind, checkInTime:time, markType:(kind==='in'?'PUNCHIN':'PUNCHOUT'), taskType:'attendance'}; }
 function tlStyle(x){
   return {c:'#3b5bdb', l:(mt||'-'), ic:'&#9679;'};
+}
 function tlTitle(x){
   if(x._punch) return x._punch==='in' ? 'Journey start (Punch in)' : 'Journey end (Punch out)';
   var n=x.taskName||'';
+  var taskType=(x.taskType||'').toLowerCase();
+  if(taskType==='franchisee-visit') {
+    var pipe = n.lastIndexOf('|');
-  var pipe=n.lastIndexOf('|'); if(pipe>=0) n=n.slice(pipe+1);      // drop leading agenda tags
+    if (pipe >= 0) n = n.slice(pipe + 1);      // drop leading agenda tags
-  n=n.replace(/\s*VISIT\b.*$/i,'').replace(/\s*visit\s*$/i,'').replace(/\bnull\b/gi,'').replace(/\s{2,}/g,' ').trim();
+    n = n.replace(/\s*VISIT\b.*$/i, '').replace(/\s*visit\s*$/i, '').replace(/\bnull\b/gi, '').replace(/\s{2,}/g, ' ').trim();
+  }
   return n || '(stop)';
+}
 function tlRow(x, side){
   var s=tlStyle(x);
   var tt=(x.taskType||'').toLowerCase();
     var chips='';
     if(x.battery!=null) chips += '<span class="tlchip">&#128267; '+x.battery+'%</span>';
     if(x.locOff!=null) chips += '<span class="tlchip">&#128244; '+x.locOff+'</span>';
     extra = '<div class="tlextra">'+tlThumb(x.attachment)+chips+'</div>';
+  }
-  return '<div class="tlrow '+side+'">'+
-      '<div class="node" style="background:'+s.c+'">'+s.ic+'</div>'+
-      '<div class="tlcard">'+
+  var card='<div class="tlcard">'+
         '<div class="tm" style="background:'+s.c+'">'+timeTop+'<small>'+tlabel+'</small></div>'+
         '<div class="bd"><div class="ti">'+esc(tlTitle(x))+'</div>'+
           '<span class="stt" style="background:'+s.c+'">'+s.l+'</span>'+
           '<div class="mt">'+meta+'</div>'+extra+'</div>'+
-      '</div></div>';
+      '</div>';
+  // remark sits on the opposite half of the timeline (empty spacer when none)
+  var rk=(!x._punch && x.remarks) ? '<div class="rk"><div class="rkl">Remark</div>'+esc(x.remarks)+'</div>' : '';
+  var remark='<div class="tlremark">'+rk+'</div>';
+  var halves = side==='left' ? (card+remark) : (remark+card);
+  return '<div class="tlrow '+side+'">'+
+      '<div class="node" style="background:'+s.c+'">'+s.ic+'</div>'+
+      halves+'</div>';
+}
 function closeModal(){ el('bj-modal-back').classList.remove('show'); }
+// Image lightbox — opens an attachment larger, stacked above the journey modal.
+function bjOpenImage(src){ if(!src) return; el('bj-img').src=src; el('bj-img-back').classList.add('show'); }
+function bjCloseImage(){ el('bj-img-back').classList.remove('show'); el('bj-img').removeAttribute('src'); }
 /* ============================ APPROVAL ============================ */
 function loadApproval(){
   spinner();
   var from=el('bj-start').value, to=el('bj-end').value;
 function approve(trackingId){
   fetch(CTX+'/beat-report/approve-checkin',{method:'POST',headers:{'Content-Type':'application/x-www-form-urlencoded'},body:'trackingId='+trackingId})
     .then(function(r){ return r.json(); }).then(function(){ var row=el('appr-'+trackingId); if(row) row.parentNode.removeChild(row); }).catch(function(){ alert('Approve failed'); });
+}
+/* ============================ EXPORT ============================ */
+// Download the Employee Task Report (.xlsx). Today lens exports the single
+// selected day; Period lens exports the whole start..end range. Both carry the
+// current level / team scope (qs()). The download is served as an attachment, so
+// navigating to the URL triggers the file save without leaving the page.
+function exportReport(){
+  var start, end;
+  if(LENS==='period'){ start=el('bj-start').value; end=el('bj-end').value; }
+  else { start=el('bj-date').value; end=start; }
+  var u = BASE + '/export?startDate=' + encodeURIComponent(start) + '&endDate=' + encodeURIComponent(end) + qs();
+  window.location.href = u;
+}
 /* ============================ INIT ============================ */
 document.querySelectorAll('.lens').forEach(function(b){ b.addEventListener('click', function(){ setLens(b.getAttribute('data-lens')); }); });
 el('bj-apply').addEventListener('click', load);
+el('bj-export').addEventListener('click', exportReport);
 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(); });
+el('bj-img-back').addEventListener('click', function(e){ if(e.target===el('bj-img-back')) bjCloseImage(); });
+el('bj-img-x').addEventListener('click', bjCloseImage);
+// Esc closes the lightbox first (if open), otherwise the journey modal.
+document.addEventListener('keydown', function(e){
+  if(e.key!=='Escape') return;
+  if(el('bj-img-back').classList.contains('show')) bjCloseImage();
+  else if(el('bj-modal-back').classList.contains('show')) closeModal();
+});
 updateTodayLabel();
 load();
 </script>
 </body>
 </html>

Subversion Repositories SmartDukaan

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