se anexa token de api de google maps para rastreo de ubicaciones
This commit is contained in:
@@ -58,9 +58,6 @@
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,197 @@
|
||||
@extends('layouts.landing')
|
||||
|
||||
@section('title',"show")
|
||||
|
||||
@section('content')
|
||||
|
||||
<div class="container-fluid">
|
||||
|
||||
<div class="card shadow mb-4">
|
||||
|
||||
<div class="card-header py-3 d-flex justify-content-between">
|
||||
<h6 class="m-0 font-weight-bold text-primary">
|
||||
Datos de los registros
|
||||
</h6>
|
||||
|
||||
<a href="{{ route('code.index') }}" class="btn btn-sm btn-primary">
|
||||
Regresar
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
|
||||
@foreach ($codes as $fecha => $registros)
|
||||
|
||||
<div class="card shadow mb-4">
|
||||
|
||||
<div class="card-header bg-primary text-white d-flex justify-content-between">
|
||||
|
||||
<h5 class="m-0">
|
||||
📅 {{ \Carbon\Carbon::parse($fecha)->format('d/m/Y') }}
|
||||
</h5>
|
||||
|
||||
<button class="btn btn-light btn-sm ver-ruta" data-registros='@json($registros)'>
|
||||
<i class="fa-solid fa-circle-location-arrow fa-fade"></i>
|
||||
Rastrear
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
|
||||
@foreach ($registros as $registro)
|
||||
|
||||
<div class="{{ !$loop->last ? 'border-bottom' : '' }} mb-2 pb-2">
|
||||
<strong>Hora:</strong>
|
||||
{{ $registro->registro->format('h:i A') }}
|
||||
<br>
|
||||
<strong>Código:</strong>
|
||||
{{ $registro->codigo }}
|
||||
</div>
|
||||
|
||||
@endforeach
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@endforeach
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div id="mapOverlay"
|
||||
style="
|
||||
position:fixed;
|
||||
top:0;
|
||||
left:0;
|
||||
width:100%;
|
||||
height:100%;
|
||||
background:rgba(0,0,0,.6);
|
||||
z-index:9999;
|
||||
display:none;
|
||||
">
|
||||
|
||||
<div
|
||||
style="
|
||||
position:absolute;
|
||||
top:50%;
|
||||
left:50%;
|
||||
transform:translate(-50%,-50%);
|
||||
width:80%;
|
||||
height:80%;
|
||||
background:white;
|
||||
border-radius:10px;
|
||||
overflow:hidden;
|
||||
">
|
||||
|
||||
<button id="cerrarMapa"
|
||||
class="btn btn-danger btn-sm"
|
||||
style="
|
||||
position:absolute;
|
||||
top:10px;
|
||||
right:10px;
|
||||
z-index:10;
|
||||
">
|
||||
✖
|
||||
</button>
|
||||
|
||||
<div id="map"
|
||||
style="width:100%;height:100%;"></div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@endsection
|
||||
|
||||
|
||||
|
||||
@push('scripts')
|
||||
|
||||
{{-- GOOGLE MAPS --}}
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key={{ config('services.google_maps.key') }}"></script>
|
||||
|
||||
<script>
|
||||
|
||||
let map;
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
const overlay =
|
||||
document.getElementById('mapOverlay');
|
||||
|
||||
const cerrar =
|
||||
document.getElementById('cerrarMapa');
|
||||
|
||||
cerrar.onclick = () => {
|
||||
overlay.style.display = 'none';
|
||||
};
|
||||
|
||||
document.querySelectorAll('.ver-ruta')
|
||||
.forEach(btn => {
|
||||
|
||||
btn.addEventListener('click', function () {
|
||||
|
||||
console.log("CLICK OK");
|
||||
|
||||
const registros =
|
||||
JSON.parse(this.dataset.registros);
|
||||
|
||||
const puntos = registros.map(r => ({
|
||||
lat: Number(r.latitud),
|
||||
lng: Number(r.longitud)
|
||||
}));
|
||||
|
||||
|
||||
overlay.style.display = 'block';
|
||||
|
||||
setTimeout(() => {
|
||||
|
||||
const mapDiv = document.getElementById('map');
|
||||
|
||||
map = new google.maps.Map(mapDiv,{
|
||||
zoom:15,
|
||||
center:puntos[0]
|
||||
});
|
||||
|
||||
const bounds = new google.maps.LatLngBounds();
|
||||
|
||||
puntos.forEach((p,i)=>{
|
||||
|
||||
new google.maps.Marker({
|
||||
position:p,
|
||||
map:map,
|
||||
label:String(i+1)
|
||||
});
|
||||
|
||||
bounds.extend(p);
|
||||
});
|
||||
|
||||
new google.maps.Polyline({
|
||||
path:puntos,
|
||||
strokeWeight:4,
|
||||
map:map
|
||||
});
|
||||
|
||||
map.fitBounds(bounds);
|
||||
|
||||
// 🔥 recalculo REAL
|
||||
google.maps.event.trigger(map,'resize');
|
||||
map.fitBounds(bounds);
|
||||
|
||||
},400);
|
||||
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
@endpush
|
||||
@@ -7,11 +7,13 @@
|
||||
<div class="container-fluid">
|
||||
<div class="card shadow mb-4">
|
||||
<div class="card-header py-3">
|
||||
<h6 class="m-0 font-weight-bold text-primary">Crear Nota</h6>
|
||||
<div class="d-sm-flex align-items-center justify-content-between">
|
||||
<h6 class="m-0 font-weight-bold text-primary">Editar horario</h6>
|
||||
<a href="{{route('horario.index')}}" class="d-sm-inline-block btn btn-sm btn-primary shadow-sm"><i class="fas fa-download fa-sm text-white-50"></i> Regresar</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<a href="{{route('horario.index')}}">Regresar</a>
|
||||
<form action="{{route('horario.store')}}" method="POST">
|
||||
@csrf
|
||||
<div class="mb-3">
|
||||
@@ -74,7 +76,7 @@
|
||||
|
||||
</div>
|
||||
@endforeach
|
||||
<input class="btn btn-primary" type="submit" value="Create">
|
||||
<input class="btn btn-primary" type="submit" value="Guardar">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -7,11 +7,18 @@
|
||||
<div class="container-fluid">
|
||||
<div class="card shadow mb-4">
|
||||
<div class="card-header py-3">
|
||||
<h6 class="m-0 font-weight-bold text-primary">Editar nota</h6>
|
||||
<div class="d-sm-flex align-items-center justify-content-between">
|
||||
<h6 class="m-0 font-weight-bold text-primary">Editar horario</h6>
|
||||
<a href="{{route('horario.index')}}" class="d-sm-inline-block btn btn-sm btn-primary shadow-sm"><i class="fas fa-download fa-sm text-white-50"></i> Regresar</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<a href="{{route('horario.index')}}">Regresar</a>
|
||||
@if (session('info'))
|
||||
<div class="alert alert-success">
|
||||
<strong>{{session('info')}}</strong>
|
||||
</div>
|
||||
@endif
|
||||
<form action="{{ route('horario.update', $user->id) }}" method="POST">
|
||||
@csrf
|
||||
@method('PUT')
|
||||
@@ -89,7 +96,7 @@
|
||||
|
||||
@endforeach
|
||||
|
||||
<input class="btn btn-primary" type="submit" value="Update">
|
||||
<input class="btn btn-primary" type="submit" value="Actualizar">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
<div class="d-sm-flex align-items-center justify-content-between">
|
||||
<h6 class="m-0 font-weight-bold text-primary">Horarios</h6>
|
||||
@can('horario.create')
|
||||
<a href="{{route('horario.create')}}" class="d-sm-inline-block btn btn-sm btn-primary shadow-sm"><i class="fas fa-download fa-sm text-white-50"></i> Asignnar horarios a colaborador</a>
|
||||
<a href="{{route('horario.create')}}" class="d-sm-inline-block btn btn-sm btn-primary shadow-sm"><i class="fas fa-download fa-sm text-white-50"></i> Asignar horarios a colaborador</a>
|
||||
@endcan
|
||||
</div>
|
||||
</div>
|
||||
@@ -52,7 +52,7 @@
|
||||
|
||||
@can('horario.destroy')
|
||||
<div class="col-sm-6 col-md-6">
|
||||
<form action="{{route('horario.destroy',$usuario->id)}}" method="POST">
|
||||
<form class="delete-form" action="{{route('horario.destroy',$usuario->id)}}" method="POST">
|
||||
@csrf
|
||||
@method('DELETE')
|
||||
<input type="submit" value="DELETE" class="btn btn-danger">
|
||||
@@ -81,4 +81,5 @@
|
||||
|
||||
@section('scripts')
|
||||
@include('layouts._partials.tablaScript')
|
||||
@include('layouts._partials.delete')
|
||||
@endsection
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="{{ route('dashboard') }}">
|
||||
<i class="fas fa-fw fa-tachometer-alt"></i>
|
||||
<span>Dashboard</span></a>
|
||||
<span>Inicio</span></a>
|
||||
</li>
|
||||
<!-- Divider -->
|
||||
<hr class="sidebar-divider">
|
||||
@@ -149,7 +149,7 @@
|
||||
</li> --}}
|
||||
|
||||
|
||||
@can('code.index')
|
||||
@can('asistencia')
|
||||
<li class="nav-item">
|
||||
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseUtilities"
|
||||
aria-expanded="true" aria-controls="collapseUtilities">
|
||||
@@ -161,7 +161,7 @@
|
||||
<div class="bg-white py-2 collapse-inner rounded">
|
||||
<h6 class="collapse-header">Herramientas:</h6>
|
||||
<a class="collapse-item" href="{{ route('code.index') }}" style="color:gray">Escanear</a>
|
||||
{{-- <a class="collapse-item" href="{{ route('code.show') }}" style="color:gray">Registros</a> --}}
|
||||
<a class="collapse-item" href="{{ route('registros') }}" style="color:gray">Registros</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
@@ -25,6 +25,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{{-- JS base --}}
|
||||
@include('layouts._partials.scripts')
|
||||
|
||||
@@ -103,7 +104,7 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@stack('modals')
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -73,4 +73,5 @@
|
||||
|
||||
@section('scripts')
|
||||
@include('layouts._partials.tablaScript')
|
||||
@include('layouts._partials.delete')
|
||||
@endsection
|
||||
|
||||
Reference in New Issue
Block a user